/* ===== 8calc.com — glass dark theme ===== */
:root{
  --bg0:#070b14; --bg1:#0b1322;
  --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.085);
  --stroke:rgba(255,255,255,.12); --stroke-hi:rgba(45,212,191,.45);
  --text:#e7eef7; --muted:#97a6ba;
  --accent:#10b981; --accent-2:#2dd4bf; --accent-glow:rgba(16,185,129,.35);
  --radius:18px;
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg0);color:var(--text);font-family:var(--body);
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.aurora{position:fixed;inset:0;z-index:-1;background:var(--bg0)}
.aurora::before,.aurora::after{content:"";position:absolute;width:60vmax;height:60vmax;
  border-radius:50%;filter:blur(90px);opacity:.32}
.aurora::before{background:radial-gradient(circle,#10b981,transparent 60%);top:-22vmax;right:-18vmax;
  animation:drift1 26s ease-in-out infinite alternate}
.aurora::after{background:radial-gradient(circle,#1e3a8a,transparent 60%);bottom:-25vmax;left:-20vmax;
  animation:drift2 32s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(-8vmax,10vmax) scale(1.12)}}
@keyframes drift2{to{transform:translate(10vmax,-8vmax) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.aurora::before,.aurora::after{animation:none}
  *{transition:none!important;animation:none!important}}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
header.site{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px);
  background:rgba(7,11,20,.65);border-bottom:1px solid var(--stroke)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:var(--display);font-weight:700;font-size:22px;color:#fff;display:flex;align-items:center;gap:9px}
.logo .eight{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#062019;font-size:19px}
nav.main a{color:var(--muted);margin-left:22px;font-size:14.5px;font-weight:500}
nav.main a:hover{color:#fff;text-decoration:none}
.hero{padding:64px 0 30px;text-align:left}
.hero h1{font-family:var(--display);font-size:clamp(34px,5.4vw,56px);line-height:1.08;
  margin:0 0 14px;color:#fff;letter-spacing:-.015em}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:18.5px;color:var(--muted);max-width:46ch;margin:0 0 8px}
.glass{background:var(--glass);border:1px solid var(--stroke);border-radius:var(--radius);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 18px 50px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:18px;margin:34px 0 60px}
.card{position:relative;padding:24px 22px 22px;display:block;color:var(--text);transition:transform .25s,border-color .25s,box-shadow .25s;overflow:hidden}
.card:hover{transform:translateY(-5px);border-color:var(--stroke-hi);text-decoration:none;
  box-shadow:0 22px 60px rgba(0,0,0,.5),0 0 0 1px var(--stroke-hi),0 0 42px -12px var(--accent-glow)}
.card .glyph{font-size:26px;width:50px;height:50px;display:grid;place-items:center;border-radius:14px;
  background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(45,212,191,.10));
  border:1px solid rgba(45,212,191,.25);margin-bottom:14px}
.card h3{font-family:var(--display);font-size:19px;margin:0 0 6px;color:#fff}
.card p{font-size:13.8px;color:var(--muted);margin:0;line-height:1.55}
.card .go{position:absolute;top:20px;right:18px;color:var(--accent-2);opacity:0;transition:opacity .2s,transform .2s;transform:translateX(-4px)}
.card:hover .go{opacity:1;transform:none}
.calc{padding:28px;margin:26px 0 8px}
.calc h2.widget-title{font-family:var(--display);margin:0 0 18px;font-size:21px;color:#fff}
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;font-weight:600;letter-spacing:.03em;color:var(--muted);margin-bottom:6px}
.field input,.field select{width:100%;padding:12px 14px;font-size:16px;color:#fff;font-family:var(--body);
  background:rgba(255,255,255,.06);border:1px solid var(--stroke);border-radius:12px;outline:none;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus{border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(45,212,191,.18)}
.field select option{background:var(--bg1)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.cols{grid-template-columns:1fr}}
.btn{display:inline-block;width:100%;padding:14px;border:none;border-radius:12px;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:16.5px;color:#04150f;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 10px 26px -8px var(--accent-glow);transition:transform .15s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px var(--accent-glow)}
.results{margin-top:20px;padding:20px 22px;border-radius:14px;background:rgba(16,185,129,.08);
  border:1px solid rgba(16,185,129,.25);display:none}
.results.show{display:block;animation:pop .35s ease}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.results .big{font-family:var(--display);font-size:clamp(30px,4.5vw,42px);font-weight:700;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1.15}
.results .big small{font-size:15px;color:var(--accent-2);font-weight:500;display:block;letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
.results .rows{margin-top:12px;border-top:1px solid rgba(255,255,255,.1);padding-top:10px}
.results .row{display:flex;justify-content:space-between;font-size:14.5px;padding:5px 0}
.results .row b{color:#fff;font-variant-numeric:tabular-nums}
.results .row span{color:var(--muted)}
article.content{max-width:760px;margin:46px auto 70px;padding:0 22px}
article.content h1{font-family:var(--display);font-size:clamp(30px,4.6vw,42px);line-height:1.12;color:#fff;letter-spacing:-.01em;margin:30px 0 10px}
article.content h2{font-family:var(--display);font-size:24px;color:#fff;margin:38px 0 12px}
article.content p,article.content li{color:#c4d0de;font-size:16.5px}
article.content .sub{color:var(--muted);font-size:18px;margin-top:0}
.formula{font-family:'Space Grotesk',monospace;background:var(--glass);border:1px solid var(--stroke);
  border-left:3px solid var(--accent);border-radius:12px;padding:16px 20px;font-size:17px;color:#fff;overflow-x:auto}
details.faq{background:var(--glass);border:1px solid var(--stroke);border-radius:12px;margin-bottom:10px;padding:0 18px}
details.faq summary{cursor:pointer;font-weight:600;color:#fff;padding:15px 0;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.faq summary::after{content:"+";color:var(--accent-2);font-size:20px;font-family:var(--display)}
details.faq[open] summary::after{content:"\2013"}
details.faq p{margin:0 0 16px}
.crumbs{font-size:13.5px;color:var(--muted);margin:26px 0 0}
footer.site{border-top:1px solid var(--stroke);background:rgba(7,11,20,.6);backdrop-filter:blur(14px);margin-top:30px}
footer.site .wrap{padding:38px 22px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px}
@media(max-width:700px){footer.site .wrap{grid-template-columns:1fr}}
footer.site h4{font-family:var(--display);color:#fff;font-size:15px;margin:0 0 10px}
footer.site a{display:block;color:var(--muted);font-size:14px;padding:3px 0}
footer.site a:hover{color:var(--accent-2)}
footer.site .fine{grid-column:1/-1;border-top:1px solid var(--stroke);padding-top:16px;font-size:12.5px;color:var(--muted)}
.minicalc{padding:20px;max-width:330px}
.minicalc .screen{font-family:var(--display);font-variant-numeric:tabular-nums;background:rgba(0,0,0,.35);
  border:1px solid var(--stroke);border-radius:12px;padding:14px 16px;font-size:30px;text-align:right;color:#fff;
  margin-bottom:12px;min-height:60px;word-break:break-all}
.minicalc .keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.minicalc button{padding:13px 0;font-size:18px;font-family:var(--display);font-weight:600;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid var(--stroke);color:#fff;transition:background .15s,transform .1s}
.minicalc button:hover{background:rgba(255,255,255,.14)}
.minicalc button:active{transform:scale(.96)}
.minicalc button.op{background:rgba(45,212,191,.16);border-color:rgba(45,212,191,.3);color:var(--accent-2)}
.minicalc button.eq{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#04150f;grid-column:span 2}
.hero-flex{display:flex;gap:40px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.hero-flex>div:first-child{flex:1;min-width:300px}
h2.section{font-family:var(--display);color:#fff;font-size:26px;margin:8px 0 0}