@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --bg:#0f0f13;
    --card:#1a1a2e;
    --card-hover:#222240;
    --border:rgba(255,255,255,0.06);
    --text:#e4e4e7;
    --text-muted:#a1a1aa;
    --accent-1:#2dd4bf;
    --accent-2:#14b8a6;
    --accent-3:#0d9488;
    --gradient:linear-gradient(135deg,var(--accent-1),var(--accent-2),var(--accent-3));
    --radius:0.75rem;
    --radius-lg:1rem;
}

html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}

.hidden{display:none!important}

.container{max-width:1100px;margin:0 auto;padding:0 1.5rem}

/* Header */
.site-header{background:rgba(15,15,19,0.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:3.75rem}
.logo{display:flex;align-items:center;gap:0.6rem;text-decoration:none;color:var(--text);font-weight:700;font-size:1.1rem}
.logo-icon{width:2.2rem;height:2.2rem;border-radius:0.5rem;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;background:var(--gradient);color:#0f0f13}
.site-header nav{display:flex;gap:1.5rem}
.site-header nav a{color:var(--text-muted);text-decoration:none;font-size:0.85rem;font-weight:500;transition:color .2s}
.site-header nav a:hover{color:var(--accent-1)}

/* Hero */
.hero{text-align:center;padding:3rem 0 2rem}
.hero h1{font-size:2.5rem;font-weight:900;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:0.75rem}
.hero p{color:var(--text-muted);font-size:1.1rem;max-width:600px;margin:0 auto}

/* Ad slots */
.ad-slot{background:var(--card);border:1px dashed var(--border);border-radius:var(--radius);min-height:90px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:0.8rem;margin:1.5rem 0}

/* Card */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem}

/* Tool Section */
.tool-section{margin-bottom:2rem}
.tool-section h2{font-size:1.25rem;font-weight:700;margin-bottom:1rem;color:var(--text)}

/* Input Group */
.input-group{margin-bottom:1rem}
.input-group label{display:block;font-weight:600;margin-bottom:0.35rem;font-size:0.9rem;color:var(--text-muted)}
.input-row{display:flex;gap:0.75rem}
.input-row .input-group{flex:1}

input[type="number"],input[type="text"],select{
    width:100%;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:0.75rem 1rem;
    color:var(--text);
    font-family:'Inter',sans-serif;
    font-size:0.95rem;
    transition:border-color .2s;
}
input:focus,select:focus{outline:none;border-color:var(--accent-2)}
select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
select option{background:var(--card);color:var(--text)}

/* Results Grid */
.results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;margin-top:1.25rem}
.result-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;text-align:center;transition:border-color .2s}
.result-card:hover{border-color:var(--accent-2)}
.result-card .label{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);margin-bottom:0.35rem}
.result-card .value{font-size:1.25rem;font-weight:800;font-family:'JetBrains Mono',monospace;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Tax Section */
.tax-section{margin-top:1.5rem}
.tax-section h3{font-size:1.1rem;font-weight:700;margin-bottom:1rem}
.tax-bar{display:flex;border-radius:var(--radius);overflow:hidden;height:2rem;margin:1rem 0;background:var(--bg)}
.tax-bar .segment{display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:600;color:#fff;min-width:2rem;transition:width .4s ease}
.tax-legend{display:flex;flex-wrap:wrap;gap:0.75rem;margin-bottom:1rem}
.tax-legend .item{display:flex;align-items:center;gap:0.4rem;font-size:0.8rem;color:var(--text-muted)}
.tax-legend .dot{width:10px;height:10px;border-radius:50%}

.take-home-card{background:var(--bg);border:2px solid var(--accent-2);border-radius:var(--radius-lg);padding:1.5rem;text-align:center;margin-top:1rem}
.take-home-card .th-label{font-size:0.85rem;font-weight:600;color:var(--text-muted);margin-bottom:0.25rem}
.take-home-card .th-value{font-size:2rem;font-weight:900;font-family:'JetBrains Mono',monospace;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.take-home-card .th-sub{font-size:0.8rem;color:var(--text-muted);margin-top:0.25rem}

/* Content Sections */
.content-section{margin:2rem 0;padding:2rem}
.content-section h2{font-size:1.5rem;font-weight:800;margin-bottom:1rem;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.content-section h3{font-size:1.1rem;font-weight:700;margin:1.25rem 0 0.5rem;color:var(--text)}
.content-section p,.content-section li{color:var(--text-muted);margin-bottom:0.5rem;font-size:0.92rem}
.content-section ul{padding-left:1.25rem}
.content-section a{color:var(--accent-1);text-decoration:none}
.content-section a:hover{text-decoration:underline}

/* FAQ */
.faq-item{border-bottom:1px solid var(--border);padding:1rem 0}
.faq-item:last-child{border-bottom:none}
.faq-q{font-weight:700;margin-bottom:0.4rem;cursor:pointer;color:var(--text)}
.faq-a{color:var(--text-muted);font-size:0.9rem}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:2rem 0;margin-top:3rem}
.site-footer .container{display:flex;justify-content:space-between;align-items:center}
.site-footer p{color:var(--text-muted);font-size:0.8rem}
.site-footer nav{display:flex;gap:1.5rem}
.site-footer nav a{color:var(--text-muted);text-decoration:none;font-size:0.8rem;transition:color .2s}
.site-footer nav a:hover{color:var(--accent-1)}

/* Responsive */
@media(max-width:768px){
    .hero h1{font-size:1.8rem}
    .results-grid{grid-template-columns:repeat(2,1fr)}
    .input-row{flex-direction:column}
    .site-header nav{display:none}
    .site-footer .container{flex-direction:column;gap:1rem;text-align:center}
}
@media(max-width:480px){
    .results-grid{grid-template-columns:1fr}
}