:root{
  --bg:#0f1117; --panel:#0b1220; --panel2:#111827; --text:#e5e7eb; --muted:#94a3b8; --line:#1f2937;
  --brand:#8b5cf6; --brand-600:#7c3aed; --accent:#22d3ee; --ring:rgba(139,92,246,.28);
  --br:16px; --shadow:0 14px 34px rgba(0,0,0,.35);
  --maxw:1160px; --pad-inline:clamp(18px,6vw,36px); --pad-block:clamp(16px,4.5vw,32px); --gap:20px
}
@media (min-width:1024px){:root{--gap:22px}}

*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,"Helvetica Neue","Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:var(--pad-block) var(--pad-inline)}
section.wrap{padding-top:calc(var(--pad-block)*.6);padding-bottom:calc(var(--pad-block)*.8)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 18px;border-radius:999px;font-weight:700;border:1px solid transparent;transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease;cursor:pointer;text-decoration:none;white-space:nowrap;position:relative;overflow:hidden}
.btn-primary{background:var(--brand);color:#0b0614;box-shadow:0 10px 26px rgba(139,92,246,.35)}
.btn-primary:hover{background:var(--brand-600);transform:translateY(-1px)}
.btn-primary::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.25) 50%,rgba(255,255,255,0) 80%);transform:translateX(-120%);transition:transform .5s ease}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-ghost{background:#1b2133;color:#c7d2fe;border:1px solid #2a3552}.btn-ghost:hover{background:#1e2740}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid #223155;background:#121a2c;color:#bcd1ff;padding:8px 12px;border-radius:999px;font-size:13px}
.input{height:46px;border-radius:12px;border:1px solid #1f2b47;background:#0b1324;color:var(--text);padding:0 14px;outline:none;transition:border-color .15s,box-shadow .15s;width:100%}
.input:focus{border-color:#5b6ee6;box-shadow:0 0 0 4px var(--ring)}

/* ===== Header & Nav ===== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.75);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid #12203a}
.header-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand-logo{width:34px;height:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:.2px;background:radial-gradient(120% 140% at 30% 20%,#a78bfa 0%,#8b5cf6 40%,#6d28d9 100%);color:#0b0614;box-shadow:0 0 0 2px rgba(167,139,250,.28),0 0 22px rgba(139,92,246,.55)}
.brand-name{font-weight:900;font-size:clamp(20px,2.6vw,22px);letter-spacing:.2px}

/* top nav */
.top-nav{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:wrap}
.top-nav .actions{display:flex;align-items:center;gap:12px}
.top-nav .menu{display:flex;gap:8px}

/* dropdown (auth) */
.dropdown-wrap{position:relative}
.menu-btn.btn-ghost{display:inline-flex;align-items:center;gap:8px}
.menu-btn .caret{width:14px;height:14px}
.dropdown{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--panel2);border:1px solid #1f2b47;border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.35);padding:6px;display:none;z-index:60}
.dropdown a{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:10px;color:#dbeafe}
.dropdown a:hover{background:#0f1a2e}
.dropdown-wrap.open .dropdown{display:block}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(900px 380px at 12% -10%,rgba(139,92,246,.20),transparent 60%),
  radial-gradient(900px 380px at 88% 0%,rgba(34,211,238,.16),transparent 60%),
  linear-gradient(180deg,rgba(17,24,39,0),rgba(17,24,39,.35))}
.hero .row{display:grid;grid-template-columns:1fr;gap:28px;padding-block:clamp(56px,10vw,120px)}
@media (min-width:992px){.hero .row{grid-template-columns:1.2fr .8fr;align-items:center}}

.h-badge{display:inline-flex;align-items:center;gap:8px;background:#1c2440;color:#c7d2fe;border:1px solid #29345a;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;letter-spacing:.3px}
.h-title{font-size:clamp(32px,6vw,58px);line-height:1.08;margin:10px 0 12px;font-weight:900;letter-spacing:-.02em}
.h-sub{color:#cbd5e1;font-size:18px;max-width:56ch}
.h-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.stat{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:#0e1627;border:1px solid #203154;color:#e2e8f0;font-size:13px}

.hero-card{background:linear-gradient(180deg,#0c1425,#0a1322);border:1px solid #1c2740;border-radius:var(--br);box-shadow:var(--shadow);padding:18px;animation:floatY 6s ease-in-out infinite alternate both;will-change:transform}
.hero-card .card-title{font-weight:800;margin:0 0 6px}
.fields{display:grid;grid-template-columns:1fr;gap:12px}
.grid-feat{display:grid;grid-template-columns:1fr;gap:18px;margin:28px 0 0}
@media (min-width:768px){.grid-feat{grid-template-columns:repeat(3,1fr)}}

.card{background:var(--panel);border:1px solid #162036;border-radius:14px;padding:18px;box-shadow:var(--shadow);min-height:160px;transform:translateY(0);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(0,0,0,.45);border-color:#384a80}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:#c0cbe0}

.section{padding-block:clamp(40px,8vw,72px)}

/* ===== FAQ as compact cards (stronger styles) ===== */
.faq-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:700px){.faq-grid{grid-template-columns:repeat(3,1fr)}}
.faq-item{
  display:flex;flex-direction:column;gap:8px;
  padding:18px;border-radius:14px;
  background:linear-gradient(180deg,#0c1425,#0a1322);
  border:1px solid #1c2740;box-shadow:var(--shadow);
  min-height:130px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.faq-item:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(0,0,0,.45);border-color:#384a80}
.faq-item .badge{
  position:absolute;top:12px;right:12px;background:#0f1a2e;border:1px solid #2a3a66;border-radius:10px;
  padding:6px 10px;font-size:12px;color:#c7d2fe
}
.faq-item h4{margin:0 0 4px;font-size:18px}
.faq-item p{margin:0;color:var(--muted)}

/* ===== Footer ===== */
.site-footer{padding:28px 0;border-top:1px solid #121a2c;background:var(--panel2);color:#cbd5e1}
.footer-grid{display:grid;gap:22px}
@media (min-width:740px){.footer-grid{grid-template-columns:repeat(3,1fr)}}
.footer-title{font-weight:800;color:#dbeafe;margin:0 0 10px}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.footer-links a{color:#c7d2fe;border-radius:10px;padding:6px 6px;display:inline-block}
.footer-links a:hover{background:#0f1a2e}
.footer-bottom{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;color:#94a3b8}
.footer-bottom a{color:#c7d2fe}
.footer-bottom a:hover{color:#e5e7eb}

/* reveal */
.reveal{opacity:0;transform:translateY(12px);will-change:transform,opacity}
.reveal.show{animation:revealUp .7s cubic-bezier(.2,.65,.2,1) forwards}
.sr{position:absolute;left:-9999px}
.muted{color:var(--muted)}
.row-gap{margin-top:28px}
@keyframes floatY{0%{transform:translateY(0)}100%{transform:translateY(-8px)}}
@keyframes revealUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}