:root{
  --bg:#0f172a;
  --panel:#0b1228;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --brand:#16a34a;
  --brand-2:#22c55e;
  --accent:#38bdf8;
  --card:#0a0f22;
  --border:#1f2937;
  --ring:rgba(56,189,248,.35);
  --header-h:150px;                 /* default header height */
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 12px); /* fixed-header offset */
}
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  padding-top:var(--header-h);      /* content not hidden behind header */
}

/* Decorative background (fixed so it never “smears” under sticky header) */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 20% -10%,rgba(56,189,248,.15),transparent 70%),
    radial-gradient(900px 500px at 110% 10%,rgba(34,197,94,.12),transparent 60%),
    var(--bg);
  transform:translateZ(0);
}

a{color:inherit;text-decoration:none}
.container{max-width:1040px;margin:0 auto;padding:0 1.2rem}

/* =======================
   Header / Navigation
   ======================= */
header{
  position:fixed; top:0; left:0; right:0;
  z-index:1000;
  min-height:var(--header-h);
  height:auto;                         /* grows when items wrap */
  background:rgba(15,23,42,.95);
  border-bottom:1px solid var(--border);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
  padding:0 2rem;
}

/* Left: brand block (logo + name + pill stacked) */
.brand-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.35rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:1rem;
  font-weight:700;
  font-size:1.2rem;
  position:relative;                   /* prevents global underline effect */
}
.brand .logo{height:96px;width:auto;display:block}

/* Pill under brand */
.subheader{margin:0;padding:0}
.subheader .pill{font-size:.9rem}

/* Right: nav links */
.nav ul{
  display:flex;
  gap:1.6rem;
  list-style:none;
  margin:0;
  padding:0;
}

/* Plain links hover/active underline (excludes .btn) */
.nav ul a:not(.btn){
  position:relative;
  padding:.25rem .1rem;
  opacity:.92;
  font-size:1.05rem;
  font-weight:500;
  transition:color .18s ease,opacity .18s ease;
}
.nav ul a:not(.btn)::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease;
  pointer-events:none;
}
.nav ul a:not(.btn):hover,
.nav ul a:not(.btn):focus{color:#fff;opacity:1}
.nav ul a:not(.btn):hover::after,
.nav ul a:not(.btn):focus::after,
.nav ul a:not(.btn).active::after{transform:scaleX(1)}
.nav ul a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* Ensure logo/brand & header button never get the underline */
.brand::after{content:none !important}
.nav .btn::after{content:none !important}

/* Optional: nicer hover for ghost button */
.nav .btn.ghost:hover{
  background:rgba(148,163,184,.08);
  box-shadow:0 0 0 3px var(--ring);
}

/* =======================
   Buttons
   ======================= */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.05rem;
  border:1px solid var(--border);
  border-radius:14px;
  background:linear-gradient(180deg,#0b132a,#0a1022);
  font-weight:700;
  transition:.15s;
  cursor:pointer;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 0 4px var(--ring)}
.btn.primary{
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  border-color:transparent; color:#04110b;
  box-shadow:0 6px 18px rgba(34,197,94,.22);
}
.btn.primary:hover{box-shadow:0 8px 22px rgba(34,197,94,.28)}
.btn.success{
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  border-color:transparent; color:#04110b;
}

/* =======================
   Hero + Layout
   ======================= */
.hero{padding:2rem 0 3rem}
.hero .pill{margin-top:0}
.hero h1{font-size:clamp(2.4rem,6vw,3.6rem);line-height:1.15;margin:0 0 1rem;font-weight:800}
.hero p{max-width:58ch;color:var(--muted);margin:0 0 1.5rem;font-size:1.05rem;opacity:.92}

section{padding:3.5rem 0; position:relative; isolation:isolate; background:transparent}
section + section{margin-top:0}         /* tidy spacing */
section{scroll-margin-top:calc(var(--header-h) + 12px)}  /* extra safety */

.section-title{
  font-size:clamp(1.6rem,2.2vw,2rem);
  font-weight:800;
  margin:0 0 1.4rem;
  position:relative;
}
.section-title::after{
  content:"";
  position:absolute;
  left:0; bottom:-.5rem;
  width:56px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
  opacity:.7;
}

.grid{display:grid; gap:1.5rem}
@media (min-width:860px){
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
  .grid.cols-2{grid-template-columns:repeat(2,1fr)}
}

/* Cards */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:1.1rem;
  background-clip:padding-box;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-2px);border-color:rgba(56,189,248,.25);box-shadow:0 14px 30px rgba(0,0,0,.32)}
.card h3{margin:.2rem 0 .4rem;font-size:1.1rem;font-weight:800}
.muted{color:var(--muted); line-height:1.7}

/* Pricing */
.pricing{align-items:stretch}
.price{font-size:2.2rem;font-weight:800;margin:.6rem 0 1rem;line-height:1}
.price small{font-size:.9rem;color:var(--muted);font-weight:600;margin-left:.35rem}

/* Process */
.step{display:flex;gap:.8rem;align-items:flex-start}
.step .num{
  width:28px;height:28px;border-radius:7px;
  background:linear-gradient(135deg,var(--accent),var(--brand-2));
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#04110b;
}

/* Forms */
form{display:grid;gap:.8rem}
input,textarea{
  width:100%; padding:.8rem; border-radius:10px;
  border:1px solid var(--border); background:#0b1228; color:var(--text);
}
input:focus,textarea:focus{outline:none; box-shadow:0 0 0 4px var(--ring)}
.two-col{display:grid; gap:.8rem}
@media (min-width:700px){.two-col{grid-template-columns:1fr 1fr}}
.notice{font-size:.9rem;color:var(--muted)}

/* Footer */
footer{border-top:1px solid var(--border);padding:2rem 0;color:var(--muted)}
.badges{display:flex;gap:1rem;flex-wrap:wrap;opacity:.9}

/* Spacing guard before Pricing block */
#process{margin-bottom:4rem}
.grid .card{height:auto;min-height:100%}

/* =======================
   Responsive Polish
   ======================= */

/* Tablet */
@media (max-width:900px){
  :root{--header-h:160px}          /* header gets more vertical room */
  .brand .logo{height:72px}
  .nav{
    padding:.75rem 1rem;
    gap:.6rem;
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .nav ul{
    width:100%;
    gap:1rem 1.25rem;
    justify-content:flex-start;
    flex-wrap:wrap;
    font-size:.95rem;
  }
  .brand-wrap{gap:.25rem}
  .subheader .pill{font-size:.85rem; padding:.25rem .6rem}
  .hero{padding:2.5rem 0 2.75rem}
}

/* Phone */
@media (max-width:600px){
  :root{--header-h:220px}          /* enough for 2–3 rows in header */

  .container{padding:0 1rem}
  .brand .logo{height:60px}
  .brand{font-size:1.05rem}
  .brand-wrap{gap:.25rem}

  .subheader .pill{
    font-size:.8rem;
    padding:.22rem .55rem;
    line-height:1.1; /* allow wrap if needed */
  }

  .nav{
    flex-direction:column;
    align-items:flex-start;
    padding:.75rem 1rem;
    gap:.6rem;
  }
  .nav ul{
    width:100%;
    gap:.9rem 1rem;
    flex-wrap:wrap;
    justify-content:flex-start;
  }
  /* Full-width CTA row */
  .nav ul li:last-child{width:100%}
  .nav ul li:last-child .btn{width:100%; justify-content:center}

  /* Hero buttons stack & fill width */
  .hero>div{
    display:flex; flex-direction:column;
    gap:.6rem !important;
    width:100%; max-width:420px;
  }
  .hero .btn{width:100%; justify-content:center}

  .hero h1{font-size:clamp(1.9rem,8vw,2.6rem)}
  section{padding:2.2rem 0}

  .card{padding:1rem}
  .two-col{grid-template-columns:1fr}
  form{gap:.7rem}
  .badges{gap:.6rem}
  .badges .pill{font-size:.85rem}
}
.validator-badge {
  width: 88px;
  height: 31px;
  border: 0;
  opacity: .9;
  transition: opacity .2s ease;
}
.validator-badge:hover {
  opacity: 1;
}