:root {
  /* Neutral, reusable system */
  --bg: #0b0b0c;            /* page background */
  --bg-2: #121317;          /* section/Dark surfaces */
  --ink: #e6e7ea;           /* main text on dark */
  --ink-2: #b5b8c3;         /* secondary text */
  --muted: #9aa0ad;         /* subtle text */
  --line: #252733;          /* hairlines */

  /* Accent theme (black/mono with soft blue accent only for links) */
  --accent: #9ab4ff;        
  --accent-strong: #c9d6ff;

  /* Components */
  --brand: #ffffff;         /* brand mark */
  --surface: #0e0f12;       /* cards */
  --surface-2: #15171e;     /* alternate section */
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --container: 1120px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--ink); background: var(--bg); line-height:1.65;
}

img{max-width:100%; height:auto; display:block}

/* Layout helpers */
.container{max-width:var(--container); margin:0 auto; padding:0 24px}
.center{text-align:center}
.maxw{max-width:900px; margin-inline:auto}
.thin{max-width:var(--container);}
.hr{height:1px; background:var(--line); margin:24px 0}
.grid{display:grid; gap:28px}

/* ▼ NEW: top-align items in 2-column grids (benefits) */
.grid.two{
  grid-template-columns: 1fr 1fr;
  align-items: start;           /* top alignment */
}
.grid.two > *{ align-self: start; } /* guard against per-item overrides */

@media (max-width:980px){.grid.two{grid-template-columns:1fr}}

/* Headings */
.h2{font-size: clamp(28px, 3.2vw, 40px); line-height:1.15; margin: 0 0 12px}
.display{font-size: clamp(40px, 6vw, 88px); line-height:1.05; margin: 0}
.subtitle{color: var(--ink-2); font-weight:600; margin: 4px 0 12px}
.punchline{font-weight:800; font-size: clamp(26px, 4.2vw, 44px); margin: 10px 0 8px}
.lead{color: var(--ink-2); font-size:18px;}
.muted{color: var(--muted)}
.small{font-size: 14px}

/* Links */
a{color:var(--accent)}
a:hover{color:var(--accent-strong)}
.plain{list-style:none; padding:0; margin:0}
.plain li{margin:6px 0}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:12px 18px; border-radius:12px; font-weight:700; text-decoration:none; border:1.5px solid transparent; transition: .15s ease}
.btn-primary{background:#ffffff; color:#0a0a0b}
.btn-primary:hover{filter: brightness(.92)}
.btn-outline{background:transparent; border-color:#2a2d39; color:var(--ink)}
.btn-outline:hover{background:#171923}
.btn-outline-light{background:transparent; border-color:rgba(255,255,255,.25); color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.06)}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:rgba(13,14,17,.72); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.logo{width:28px; height:28px; border-radius:8px; background: radial-gradient(circle at 30% 20%, #fff 20%, #b7b7b7 70%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25)}
.brand-text small{display:block; color:var(--muted); font-weight:600}
.nav-links{display:flex; gap:28px}
.nav-links a{color:var(--ink); text-decoration:none; font-weight:600}
.nav-links a:hover{color:#fff}
.nav-cta{margin-left: 16px}
@media (max-width:760px){.nav-links{display:none}}

/* Hero */
.hero{position:relative; color:#fff; background: var(--bg)}
.hero:before{content:""; position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65)); z-index:0}
.hero:after{content:""; position:absolute; inset:0; background-image: var(--hero-bg); background-size: cover; background-position:center; filter: contrast(105%) brightness(70%); z-index:-1}
.hero-inner{position:relative; padding: 96px 0 88px; text-align:center}
.accent{color: var(--accent-strong)}
.actions{display:flex; gap:16px; justify-content:center; margin-top: 14px}
@media (max-width:720px){.actions{flex-direction:column}}

/* Sections */
.section{padding:64px 0; background:var(--bg)}
.section-alt{background: var(--surface-2)}

/* How grid */
.how-grid{grid-template-columns: 1.1fr .9fr; align-items:start; margin-top: 36px}
@media (max-width:980px){.how-grid{grid-template-columns:1fr}}

/* Steps */
.step-list{counter-reset: step; list-style:none; padding:0; margin:0; display:grid; gap:12px}
.step-list li{position:relative; padding: 10px 0 10px 50px; border-radius:10px}
.step-list li:before{counter-increment: step; content: counter(step); position:absolute; left:0; top:6px; width:36px; height:36px; display:grid; place-items:center; border-radius:999px; background:#2c2f3c; color:#fff; font-weight:800}

/* Options */
.panel{background: var(--surface); border:1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--shadow)}
.panel-title{margin: 4px 0 12px; font-size:18px}
.card{background: #0f1014; border:1px solid var(--line); border-radius:14px; padding:18px; margin-top:14px}
/* .card + .card{margin-top:14px} */
.card-title{font-weight:800; margin:0 0 6px}
.card-accent{border-color:#3a3f52}

.card.card-accent {
  background: linear-gradient(180deg, #1c2340, #1a1e30); /* same palette as .note */
  border: 1px solid #2d396b;
  box-shadow: 0 6px 24px rgba(0, 0, 40, 0.45);
  color: #e8edff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card.card-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 60, 0.55);
}
.card.card-accent .card-title {
  color: #bcd0ff;  /* brighter heading */
}
.card.card-accent .chip {
  background: #2d396b;
  color: #e8edff;
}


.chip{display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px; background:#1b2030; color:#bcd0ff; font-weight:700; margin-top:8px}

/* ▼ NEW: benefit cards stretch & start at top */
.card.benefit{
  display:flex;
  flex-direction:column;
  justify-content:flex-start; /* top content */
  height:100%;               /* equal heights in grid row */
}

/* Lists */
.tick-list{list-style:none; padding:0; margin:8px 0 0; display:grid; gap:10px}
.tick-list li{position:relative; padding-left:30px}
.tick-list li:before{content:"✓"; position:absolute; left:0; top:0; opacity:.9}

.bar-list{list-style:none; padding:0; margin:10px 0 0; display:grid; gap:12px}
.bar-list li{border-left:4px solid #3b82f6; padding-left:12px}
.bar-list.green li{border-left-color:#10b981}

/* FAQ / Accordion (no JS) */
.accordion { display: grid; gap: 12px; margin-top: 16px; }
.faq {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Summary row */
.faq > summary {
  list-style: none;           /* hide default marker (Firefox needs both) */
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 700;
  position: relative;
  outline: none;
}
.faq > summary::-webkit-details-marker { display: none; }

/* Custom chevron */
.faq > summary::after {
  content: "▸";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .18s ease;
  opacity: .8;
}
.faq[open] > summary::after { transform: translateY(-50%) rotate(90deg); }

/* Answer panel */
.faq .answer {
  padding: 0 18px 16px 18px;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
  display: block;              /* enables simple transition trick */
}
.faq[open] .answer {
  grid-template-rows: 1fr;
  padding-top: 12px;
}
.faq .answer > * { min-height: 0; } /* required for the 0fr/1fr trick */


/* Notes */
.note{background: linear-gradient(180deg, #1c2340, #1a1e30); color:#e8edff; border:1px solid #2d396b; padding:22px 22px; border-radius:16px; box-shadow: var(--shadow)}

/* CTA */
.cta{background: radial-gradient(1200px 600px at 50% 0%, rgba(255,255,255,.04), transparent 70%), var(--bg-2);}
.cta-card{background:#0f1118; border:1px solid var(--line); border-radius:16px; padding:18px; display:inline-block; margin-top:16px}

/* Footer */
.site-footer{background:#0a0b0d; padding:40px 0 24px; color:#c9cbd3}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:20px}
.footer-grid h6, .footer-grid h5{margin:0 0 8px}
.footnote{display:flex; justify-content:space-between; gap:12px; color:#8f95a3; font-size:14px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}.footnote{flex-direction:column; align-items:flex-start}}