/* SafeGate "Gatehouse" redesign: override layer, loaded last. No IDs or JS touched. */
:root{--gate-em:#2ECC8A;--gate-in:#5E68E6;--gate-aurora:linear-gradient(135deg,#2ECC8A 0%,#4FA8C8 45%,#5E68E6 100%);--gate-r:28px}
body{background:radial-gradient(1100px 600px at 12% -5%,rgba(46,204,138,.10),transparent 60%),radial-gradient(900px 600px at 95% 10%,rgba(94,104,230,.16),transparent 60%),#070A12}
:root[data-theme="light"] body{background:radial-gradient(1100px 600px at 12% -5%,rgba(46,204,138,.14),transparent 60%),radial-gradient(900px 600px at 95% 10%,rgba(118,113,250,.14),transparent 60%),#F4F6FB}

/* Nav: floating glass pill */
.nav{margin:10px auto;max-width:1180px;width:calc(100% - 20px);border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(14,19,32,.55);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 10px 40px rgba(0,0,0,.35)}
:root[data-theme="light"] .nav{background:rgba(255,255,255,.65);border-color:rgba(10,21,48,.08);box-shadow:0 10px 30px rgba(40,50,90,.12)}

/* Buttons: gradient pills */
.btn,.btn-primary,.btn-secondary,.btn-ghost,.role-btn{border-radius:999px}
.btn-primary{background:var(--gate-aurora);border:0;color:#04120C;box-shadow:0 8px 28px rgba(46,204,138,.28)}
.btn-primary:hover{filter:brightness(1.08);box-shadow:0 10px 34px rgba(94,104,230,.38)}

/* Hero highlight + arch glow */
.hero .highlight{background:var(--gate-aurora);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero{position:relative}
.hero::after{content:"";position:absolute;left:50%;bottom:-1px;width:min(900px,92%);height:120px;transform:translateX(-50%);border-radius:420px 420px 0 0;border:1px solid rgba(46,204,138,.28);border-bottom:0;background:linear-gradient(180deg,rgba(46,204,138,.10),transparent);pointer-events:none}

/* Section heads */
.section-eyebrow{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(46,204,138,.10);border:1px solid rgba(46,204,138,.28);color:var(--gate-em)}
:root[data-theme="light"] .section-eyebrow{color:#0E8F5B}

/* Soft liquid-glass cards, no sharp edges */
.step,.why-card,.pricing-card,.demo-card,.faq-item,.problem-card,.security-card,.role-btn{border-radius:var(--gate-r);border:1px solid rgba(255,255,255,.09);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 40px rgba(0,0,0,.28)}
:root[data-theme="light"] .step,:root[data-theme="light"] .why-card,:root[data-theme="light"] .pricing-card,:root[data-theme="light"] .demo-card,:root[data-theme="light"] .faq-item,:root[data-theme="light"] .problem-card,:root[data-theme="light"] .security-card,:root[data-theme="light"] .role-btn{background:linear-gradient(160deg,#fff,rgba(255,255,255,.7));border-color:rgba(10,21,48,.08);box-shadow:0 14px 34px rgba(40,50,90,.10)}
.why-card:hover,.pricing-card:hover,.role-btn:hover{transform:translateY(-4px);border-color:rgba(46,204,138,.4)}

/* #how: five arch gates joined by a gradient path */
#how .steps{position:relative;gap:18px}
#how .steps::before{content:"";position:absolute;left:6%;right:6%;top:44px;height:3px;border-radius:3px;background:var(--gate-aurora);opacity:.45}
#how .step{border-radius:999px 999px var(--gate-r) var(--gate-r);padding-top:34px;text-align:center;overflow:hidden}
#how .step::before{border-radius:inherit}
#how .step .step-num{background:var(--gate-aurora);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-weight:700}
#how .step .step-icon{margin-inline:auto;border-radius:50%;background:rgba(46,204,138,.12);color:var(--gate-em)}
#how .step:hover,#how .step:focus-within{border-color:rgba(46,204,138,.55);box-shadow:0 0 0 1px rgba(46,204,138,.35),0 18px 50px rgba(46,204,138,.18)}
@media(max-width:820px){#how .steps::before{left:50%;right:auto;top:0;bottom:0;width:3px;height:auto}#how .step{border-radius:60px 60px var(--gate-r) var(--gate-r)}}

/* Final CTA: arch panel */
.final-cta .container,.final-cta>div{border-radius:48px 48px 32px 32px}
.final-cta{background:radial-gradient(700px 320px at 50% 0,rgba(46,204,138,.16),transparent 70%),radial-gradient(700px 360px at 80% 100%,rgba(94,104,230,.20),transparent 70%)}
input,select,textarea{border-radius:16px}

/* Scroll story: sits directly on the page background */
.story-sec{padding:0}
.story-track{height:480vh;position:relative}
.story-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:84px 12px 28px;overflow:hidden;--story-ink:#fff;--story-muted:#9AA6D8}
:root[data-theme="light"] .story-sticky{--story-ink:#0B1020;--story-muted:#5C6A82}
.story-sticky .section-head{margin:0}
.story-svg{width:min(1180px,100%);flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.story-svg svg{width:100%;height:100%;max-height:64vh;overflow:visible}
.sg-ink{fill:var(--story-ink)}.sg-muted{fill:var(--story-muted)}
.story-cap{min-height:2.6em;margin:0;padding:10px 22px;border-radius:999px;font:600 clamp(15px,2.2vw,22px)/1.3 var(--font-head,'Space Grotesk',sans-serif);color:var(--story-ink);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-align:center;transition:opacity .25s}
:root[data-theme="light"] .story-cap{background:rgba(255,255,255,.7);border-color:rgba(10,21,48,.1)}
.story-cap:empty{visibility:hidden}
@media(prefers-reduced-motion:reduce){.story-track{height:auto}.story-sticky{position:static;height:auto;padding:56px 12px}}

.sg-sky{fill:var(--story-sky,rgba(123,132,238,.10))}.sg-cloud{fill:var(--story-cloud,rgba(255,255,255,.07))}.sg-dash{fill:var(--story-dash,rgba(255,255,255,.35))}
:root[data-theme="light"] .story-sticky{--story-sky:rgba(94,104,230,.10);--story-cloud:rgba(94,104,230,.10);--story-dash:rgba(94,104,230,.35)}
.story-sticky{position:sticky}
.story-svg{position:relative}
.story-title{position:absolute;left:0;right:0;top:46%;transform:translateY(0);text-align:center;font:800 clamp(40px,9vw,120px)/1.02 var(--font-head,'Space Grotesk',sans-serif);color:var(--story-ink);opacity:0;pointer-events:none;display:flex;flex-direction:column;z-index:2;text-shadow:0 6px 40px rgba(0,0,0,.35)}
:root[data-theme="light"] .story-title{text-shadow:none}
.story-title .grad{background:var(--gate-aurora);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.story-dots{display:flex;gap:8px}.story-dots span{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.25);transition:all .3s}.story-dots span.on{width:26px;background:var(--gate-aurora)}
:root[data-theme="light"] .story-dots span{background:rgba(10,21,48,.18)}
.story-cap{transition:opacity .14s}
.sg-star{fill:#fff;opacity:.6}:root[data-theme="light"] .sg-star{opacity:0}.story-svg svg{max-height:72vh}

.btn-block.btn-lg{white-space:normal;text-align:center;line-height:1.25;height:auto;min-height:56px;padding:14px 22px;flex-wrap:nowrap}
.btn-block.btn-lg{display:flex;align-items:center;justify-content:center;gap:12px;font-size:1rem;min-height:60px;border-radius:999px}
.btn-block.btn-lg svg{width:20px;height:20px;flex:0 0 20px}
.cta-pill{justify-content:space-between!important;padding:10px 10px 10px 28px!important;min-height:72px;gap:14px;position:relative;overflow:hidden}
.cta-pill::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s}
.cta-pill:hover::before{transform:translateX(120%)}
.cta-t{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.2;position:relative}
.cta-t b{font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.cta-t small{font-size:.8rem;font-weight:600;opacity:.78;margin-top:2px}
.cta-ar{position:relative;flex:0 0 52px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(6,10,24,.9);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .3s}
.cta-pill:hover .cta-ar{transform:translateX(3px) scale(1.05)}
.cta-ar svg{width:22px;height:22px}