:root{ --bg:#111827; --fg:#FFFFFF; --muted:#0F1621; --accent:#1DA87A; }
*{box-sizing:border-box}
body{ margin:0; font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; background:var(--bg); color:var(--fg); }

/* ===== HERO (holographic) ===== */
header.hero{ position:relative; padding:80px 20px; text-align:center; overflow:hidden; }
.motion-utility{ position:absolute; top:12px; right:12px; z-index:2; }
.brand-icon{ width:160px; height:160px; margin:0 auto 20px; display:block; z-index:1; position:relative; }
h1.title{ font-weight:800; letter-spacing:.2px; font-size:2.5rem; color:var(--fg); margin:10px 0 8px; position:relative; z-index:1; }
p.sub{ max-width:640px; margin:0 auto 22px; font-size:1.1rem; opacity:.9; position:relative; z-index:1; }
p.tagline{ font-size:1.1rem; font-weight:600; opacity:.85; position:relative; z-index:1; }
.hero-ctas{ position:relative; z-index:1; }
a.cta, button.cta{ display:inline-block; text-decoration:none; padding:12px 20px; border:none; border-radius:6px; font-weight:700; font-size:1rem; cursor:pointer; color:#0b141c; background:var(--accent); transition: transform .15s ease, opacity .15s ease; }
a.cta:hover, button.cta:hover{ transform:translateY(-1px); opacity:.95 }

/* ===== FORM & SECTIONS ===== */
section{ padding:60px 20px; }
section h2{ font-weight:800; letter-spacing:.2px; font-size:2rem; margin-bottom:20px; text-align:center; }
.value-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; max-width:1100px; margin:0 auto; }
.value-card{ background:rgba(15,22,33,0.8); border:1px solid rgba(29,168,122,0.18); padding:20px; border-radius:12px; text-align:center; }

.faq{ max-width:900px; margin:0 auto; }
.faq-item{ margin-bottom:20px; }
.faq-item h3{ font-weight:700; font-size:1.1rem; margin-bottom:8px; color:var(--fg); }

section.signup{ background:var(--muted); }
form#signupForm{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
input.field{ padding:12px 12px; border-radius:6px; border:1px solid rgba(29,168,122,.3); background:rgba(17,24,39,.9); color:#fff; min-width:220px; }
input.field::placeholder{ color:#bfc6cf }
.form-message{ margin-top:10px; font-size:.95rem; min-height:1.2em; text-align:center; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ===== ROADMAP ===== */
.roadmap{ background:rgba(15,22,33,.6); }
.rm-grid{ max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.rm-card{ background:rgba(11,20,28,.6); border:1px solid rgba(29,168,122,.25); border-radius:12px; padding:18px; }
.rm-title{ font-weight:700; font-size:1.05rem; margin:0 0 6px; color:var(--fg); }
.rm-date{ font-size:.9rem; opacity:.75; margin-bottom:8px }
.rm-desc{ opacity:.88; font-size:.95rem }

/* ===== MODAL ===== */
.modal{ position:fixed; inset:0; display:none; place-items:center; background:rgba(5,6,10,.6); backdrop-filter: blur(6px); z-index:999; }
.modal[aria-hidden="false"]{ display:grid; }
.modal-card{ width:min(520px, 92vw); border-radius:18px; padding:26px 24px; background:rgba(17,24,39,.95); border:1px solid rgba(29,168,122,.25); position:relative; overflow:hidden; }
.modal-card::before{ content:""; position:absolute; inset:-1px; border-radius:18px; padding:1px; background:transparent; -webkit-mask: none; mask-composite: add; }
.modal-head{ display:flex; align-items:center; gap:12px; }
.modal-title{ font-weight:800; font-size:1.25rem; color:var(--fg); margin:0; }
.modal-body{ color:#D8DEE9; margin-top:8px; }
.close-btn{ position:absolute; top:10px; right:10px; width:34px; height:34px; border:none; border-radius:10px; background:rgba(22,25,31,.7); color:#fff; cursor:pointer; }
.close-btn:hover{ background:rgba(22,25,31,.9) }
.glyph{ width:72px; height:72px; filter: drop-shadow(0 0 8px rgba(29,168,122,.3)); }
.stroke-grad stop:first-child{ stop-color: var(--accent); }
.stroke-grad stop:last-child{ stop-color: var(--accent); }
.check-path{ stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw 1.2s ease forwards .3s; }
@keyframes draw{ to{ stroke-dashoffset: 0 } }
.burst{ position:absolute; inset:0; pointer-events:none; }

/* ===== FOOTER ===== */
footer{ background:var(--muted); text-align:center; padding:40px 20px; }
footer .legal{ margin-top:20px; font-size:.9rem; opacity:.7; }

/* ===== STICKY HEADER & MOBILE CTA ===== */
.sticky-header{ position:fixed; top:0; left:0; right:0; transform: translateY(-100%); transition: transform .25s ease; background: rgba(17,24,39,.9); border-bottom:1px solid rgba(29,168,122,.2); z-index:998; backdrop-filter: blur(6px); }
.sticky-header[aria-hidden="false"]{ transform: translateY(0); }
.sh-wrap{ max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:10px 16px; }
.sh-brand{ font-weight:800; letter-spacing:.2px; }
.sh-cta{ padding:8px 14px; font-size:.95rem; }
.top-nav{ display:flex; align-items:center; gap:14px; }
.top-nav a{ color:#C7CDD6; text-decoration:none; font-weight:600; font-size:.95rem; }
.top-nav a:hover, .top-nav a:focus{ color:#E2E8F0; outline:none; text-decoration:underline; text-underline-offset: 3px; }
.mobile-cta{ position:fixed; left:0; right:0; bottom:0; display:none; justify-content:center; padding:10px 12px; background: rgba(17,24,39,.9); border-top:1px solid rgba(29,168,122,.2); z-index:997; backdrop-filter: blur(6px); }
.mobile-cta[aria-hidden="false"]{ display:flex; }
@media (min-width: 769px){ .mobile-cta{ display:none !important; } }

/* ===== SOCIAL PROOF ===== */
.social-proof{ padding:40px 20px; }
.social-proof h2{ font-weight:800; font-size:1.2rem; text-align:center; opacity:.9; margin-bottom:10px; }
.logo-strip{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:1100px; margin:0 auto; }
.logo-pill{ padding:8px 12px; border:1px solid rgba(29,168,122,.25); border-radius:20px; color:#C7CDD6; font-weight:600; font-size:.9rem; }

/* Principles page helpers */
.principles{ max-width:900px; margin:0 auto; }
.principles h1{ font-weight:800; font-size:2rem; margin:8px 0 16px; color:var(--fg); text-align:center; }
.principles-list{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.principles-list li{ background:rgba(15,22,33,0.8); border:1px solid rgba(29,168,122,0.18); padding:16px; border-radius:12px; }
.principles-list h3{ margin:0 0 6px; font-size:1.05rem; }
.principles-list p{ margin:0; opacity:.9; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .brand-icon { animation: none !important; }
}

/* Optional runtime reduce-motion toggle */
.rm .brand-icon { animation: none !important; }
.rm header.hero { transform: none !important; }
.motion-ctrl{ margin-top:12px; }
.link-btn{ background:none; color:#C7CDD6; border:none; cursor:pointer; text-decoration:underline; font: inherit; padding:0; }
.link-btn:hover{ color:#E2E8F0 }

/* Skip link */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left:12px; top:12px; width:auto; height:auto; background:#0b1a2a; color:#fff; padding:8px 10px; border:1px solid rgba(29,168,122,.5); z-index:1000; }