:root{
  --bg:#070a12;
  --card:#0b0f1a;
  --muted:#a7b0c3;
  --text:#eef2ff;
  --brand:#7c3aed;
  --brand2:#22c55e;
  --line:rgba(255,255,255,.10);
  --shadow:0 10px 30px rgba(0,0,0,.42);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:
    radial-gradient(1200px 800px at 70% 0%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(1000px 700px at 0% 20%, rgba(34,197,94,.16), transparent 55%),
    linear-gradient(to bottom, #070a12 0%, #070a12 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color:var(--text);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(7,10,18,.72);
  border-bottom:1px solid var(--line);
  padding:env(safe-area-inset-top) 0 0;
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0; gap:10px;
}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;min-width:0}
.mark{
  width:34px;height:34px;border-radius:11px;flex:0 0 auto;
  background:conic-gradient(from 210deg,var(--brand),#60a5fa,var(--brand2),var(--brand));
  box-shadow:0 8px 25px rgba(124,58,237,.35);
}
.logo-title{min-width:0}
.logo-title .t1{font-size:14px;opacity:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}
.logo-title .t2{font-size:12px;color:var(--muted);margin-top:-2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}
.nav-links{display:flex;gap:10px;align-items:center;flex:0 0 auto; flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  transition:.18s ease;
  font-weight:750;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:linear-gradient(90deg,rgba(124,58,237,1),rgba(34,197,94,1));
  border:0;
  box-shadow:0 14px 30px rgba(124,58,237,.18);
}
.btn.ghost{background:transparent}
.hide-sm{display:none}

.card{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.panel{padding:16px}
.tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;padding:8px 10px;border:1px solid var(--line);
  border-radius:999px;background:rgba(255,255,255,.03);color:var(--muted)
}
.tag .dot{width:8px;height:8px;border-radius:99px;background:var(--brand2)}
.small{font-size:12.5px;color:rgba(167,176,195,.85)}
.legal{
  margin-top:10px;padding:12px 14px;border-radius:16px;border:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.section{padding:26px 0}
.section h1,.section h2{margin:0 0 10px}
.section p{margin:0;color:var(--muted)}
.hero{padding:34px 0 18px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:14px;align-items:stretch}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--muted);font-weight:800;
  width:fit-content;max-width:100%;
}
h1{font-size:clamp(30px,8.6vw,52px);margin:12px 0 8px;line-height:1.08}
.lead{font-size:15.8px;color:var(--muted);margin:10px 0 14px;max-width:62ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mini{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;color:var(--muted);font-size:13px}
.mini span{padding:8px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03)}

.grid-3{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
.feature{padding:16px}
.feature h3{margin:10px 0 6px;font-size:16px}
.feature p{margin:0;color:var(--muted);font-size:14px}
.icon{
  width:40px;height:40px;border-radius:14px;display:grid;place-items:center;
  background:rgba(124,58,237,.15);border:1px solid rgba(124,58,237,.25);
}

.pill-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.pill{
  padding:12px;border-radius:16px;border:1px solid var(--line);
  background:rgba(7,10,18,.35);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:54px;
}
.pill b{font-size:14px}
.pill span{font-size:12.5px;color:var(--muted)}
.pill .badge{
  padding:6px 10px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font-size:12px;color:var(--muted);white-space:nowrap
}

.steps{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
.step{padding:16px}
.step .num{
  width:28px;height:28px;border-radius:10px;display:grid;place-items:center;
  background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.25);
  font-weight:900;
}

.calculator{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
.field{display:flex;flex-direction:column;gap:8px}
input,select,textarea{
  width:100%;padding:12px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--text);outline:none;
  font-size:16px;
}
input:focus,textarea:focus{border-color:rgba(124,58,237,.45)}
label{font-size:13px;color:var(--muted);font-weight:800}
.result{
  padding:16px;border-radius:16px;border:1px solid var(--line);
  background:rgba(7,10,18,.35);
  display:flex;flex-direction:column;gap:8px
}
.result b{font-size:18px}

details{
  border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02);
  padding:12px 14px;margin-bottom:10px;
}
summary{cursor:pointer;font-weight:900}
details p{margin:10px 0 0;color:var(--muted)}

.footer{
  padding:22px 0 36px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13.5px;
  padding-bottom:calc(36px + env(safe-area-inset-bottom));
}
.footer-grid{display:grid;grid-template-columns:1fr;gap:12px}
.footer-links{display:grid;gap:8px;margin-top:10px}
.footer-links a{text-decoration:none;opacity:.95}
.footer-links a:hover{opacity:1;text-decoration:underline}

.article{max-width:860px;margin:0 auto}
.article h1{font-size:clamp(26px,6.4vw,40px)}
.article h2{font-size:18px;margin-top:18px}
.article p,.article li{color:var(--muted);font-size:14.5px}
.article ul{margin:10px 0 0;padding-left:18px}
.breadcrumbs{margin:0 0 10px;color:var(--muted);font-size:13px}
.breadcrumbs a{text-decoration:none;color:var(--muted)}
.breadcrumbs a:hover{text-decoration:underline}

.cookie-banner{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:100;
  border-radius:18px;border:1px solid var(--line);
  background:rgba(11,15,26,.92);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
  padding:14px;
  display:none;
}
.cookie-banner .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.cookie-banner p{margin:0;color:var(--muted);font-size:13.5px;max-width:70ch}
.cookie-banner .actions{display:flex;gap:10px;flex-wrap:wrap}
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:120;display:none;
}
.modal{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:130;
  border-radius:18px;border:1px solid var(--line);
  background:rgba(11,15,26,.98);
  box-shadow:var(--shadow);
  padding:14px;
  display:none;
  max-width:720px;margin:0 auto;
}
.modal h3{margin:0 0 8px}
.toggle{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px;border-radius:16px;border:1px solid var(--line);
  background:rgba(255,255,255,.02);margin-top:10px;
}
.switch{
  width:46px;height:28px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  position:relative;flex:0 0 auto;
}
.switch::after{
  content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:999px;
  background:rgba(255,255,255,.82);
  transition:.15s ease;
}
.switch.on{background:rgba(34,197,94,.22);border-color:rgba(34,197,94,.35)}
.switch.on::after{left:21px;background:white}

@media (min-width: 920px){
  .container{padding:0 20px}
  .hide-sm{display:inline-flex}
  .hero{padding:64px 0 28px}
  .hero-grid{grid-template-columns:1.1fr .9fr;gap:26px}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:1fr 1fr}
  .calculator{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1.3fr .7fr}
  .pill-grid{grid-template-columns:repeat(3,1fr)}
  .logo-title .t1,.logo-title .t2{max-width:unset}
  .cookie-banner{left:20px;right:20px;bottom:20px}
  .modal{left:20px;right:20px;bottom:20px}
}