:root{--navy:#111a56;--coral:#ff5848;--ink:#101633;--muted:#69708b;--paper:#fffdf9;--line:#e9eaf1;--mint:#dff7eb;--blue:#e8eeff;--soft:#f5f6fb}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Manrope,system-ui,sans-serif;color:var(--ink);background:var(--paper)}
a{color:inherit;text-decoration:none}
.container{width:min(1160px,calc(100% - 40px));margin:auto}
.site-header{height:86px;background:rgba(255,253,249,.94);border-bottom:1px solid rgba(17,26,86,.08);position:sticky;top:0;z-index:50;backdrop-filter:blur(14px)}
.nav-shell{height:100%;display:flex;align-items:center;gap:46px}
.brand img{display:block;width:160px;height:auto}
.desktop-nav{display:flex;align-items:center;gap:32px;margin-left:auto}
.desktop-nav a,.login-link{font-size:14px;font-weight:700;color:#313755}
.desktop-nav a:hover,.login-link:hover{color:var(--coral)}
.nav-actions{display:flex;align-items:center;gap:22px}
.nav-cta{padding:13px 19px;border-radius:12px;background:var(--navy);color:white;font-size:13px;font-weight:800}
.menu-toggle{display:none;border:0;background:none;font-size:24px;color:var(--navy)}
.hero{position:relative;overflow:hidden;padding:86px 0 0;background:linear-gradient(160deg,#fffdf9 0%,#f7f8ff 68%,#fff 100%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:70px;min-height:570px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--navy);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.eyebrow i{width:24px;height:3px;background:var(--coral);border-radius:4px}
.hero h1{font-size:clamp(45px,5.4vw,74px);line-height:1.04;letter-spacing:-.055em;margin:22px 0 24px;color:var(--navy)}
.hero h1 span{color:var(--coral)}
.hero-lead{max-width:640px;color:var(--muted);font-size:18px;line-height:1.75;margin:0}
.hero-note{display:flex;align-items:flex-start;gap:14px;margin-top:28px}
.note-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:0 0 auto;background:var(--mint);color:#18855c;font-weight:800}
.hero-note p{margin:0;color:#626981;font-size:14px;line-height:1.55}
.hero-note strong{color:var(--ink)}
.hero-visual{position:relative;height:480px}
.main-card{position:absolute;inset:42px 20px 56px 30px;border-radius:30px;background:#fff;box-shadow:0 32px 70px rgba(17,26,86,.16);padding:28px;transform:rotate(1.5deg);border:1px solid rgba(17,26,86,.06)}
.card-head{display:flex;align-items:center;gap:12px}
.mini-logo{display:grid;place-items:center;width:45px;height:45px;border-radius:14px;background:var(--navy);color:white;font-size:28px;font-weight:800}
.card-head div:nth-child(2){display:flex;flex-direction:column}
.card-head strong{font-size:14px;color:var(--navy)}
.card-head small{font-size:11px;color:var(--muted);margin-top:3px}
.live-pill{margin-left:auto;padding:6px 10px;border-radius:20px;background:#ffe9e6;color:#df483b;font-size:9px;font-weight:800;letter-spacing:.1em}
.risk-overview{display:flex;align-items:center;gap:25px;margin:45px 0 34px}
.risk-ring{width:130px;height:130px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:conic-gradient(var(--coral) 0 72%,#eff0f6 72%);position:relative}
.risk-ring:before{content:"";position:absolute;inset:12px;background:white;border-radius:50%}
.risk-ring span,.risk-ring small{position:relative}
.risk-ring span{font-size:36px;font-weight:800;color:var(--navy)}
.risk-ring small{font-size:10px;color:var(--muted)}
.risk-copy{display:flex;flex-direction:column;gap:8px}
.risk-copy small{color:var(--coral);font-weight:800}
.risk-copy strong{font-size:20px;line-height:1.4;color:var(--navy)}
.signal-bars{display:flex;flex-direction:column;gap:14px}
.signal-bars span{display:block;width:var(--w);height:11px;border-radius:20px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}
.floating-card{position:absolute;z-index:4;background:#fff;box-shadow:0 18px 45px rgba(17,26,86,.14);border:1px solid rgba(17,26,86,.06)}
.class-card{left:-14px;bottom:18px;border-radius:18px;padding:15px 18px;display:grid;grid-template-columns:auto auto;gap:2px 10px;align-items:center}
.class-card b{grid-row:1/3;font-size:25px;color:var(--navy)}
.class-card span{font-size:11px;font-weight:700}
.class-card i{font-style:normal;font-size:9px;color:#18855c}
.shield-card{right:-10px;top:15px;border-radius:18px;padding:14px 18px;display:flex;align-items:center;gap:11px}
.shield-card>span{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--mint);color:#18855c;font-weight:800}
.shield-card div{display:flex;flex-direction:column}
.shield-card b{font-size:11px}
.shield-card small{font-size:9px;color:var(--muted);margin-top:3px}
.dots{position:absolute;right:-50px;bottom:45px;width:120px;height:120px;background-image:radial-gradient(#ffb1a9 2px,transparent 2px);background-size:14px 14px;opacity:.75}
.hero-orb{position:absolute;border-radius:50%;filter:blur(2px)}
.hero-orb-one{width:220px;height:220px;background:#ffe4df;right:-90px;top:20px;opacity:.6}
.hero-orb-two{width:110px;height:110px;background:#dfe6ff;left:-45px;bottom:80px}
.trust-strip{position:relative;z-index:3;margin-top:50px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:22px 22px 0 0;background:#fff;box-shadow:0 -8px 30px rgba(17,26,86,.04)}
.trust-strip div{padding:27px 34px;display:flex;flex-direction:column;border-right:1px solid var(--line)}
.trust-strip div:last-child{border:0}
.trust-strip strong{font-size:21px;color:var(--navy)}
.trust-strip span{font-size:12px;color:var(--muted);margin-top:4px}
.steps{padding:120px 0}
.section-heading{max-width:700px}
.section-heading h2,.difference h2,.process h2{font-size:clamp(36px,4vw,54px);line-height:1.1;letter-spacing:-.045em;color:var(--navy);margin:18px 0}
.section-heading>p{color:var(--muted);line-height:1.7}
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:58px}
.step-card{position:relative;border-radius:26px;padding:32px;min-height:300px;border:1px solid transparent;overflow:hidden}
.step-card.coral{background:#fff0ed;border-color:#ffd0c9}
.step-card.blue{background:#eff2ff;border-color:#d9e0ff}
.step-card.mint{background:#eaf9f1;border-color:#caeedc}
.step-no{position:absolute;right:24px;top:22px;color:rgba(17,26,86,.18);font-size:28px;font-weight:800}
.step-icon{display:grid;place-items:center;width:55px;height:55px;border-radius:17px;background:#fff;color:var(--navy);font-size:25px;box-shadow:0 10px 24px rgba(17,26,86,.08)}
.step-card h3{margin:42px 0 12px;font-size:21px;color:var(--navy)}
.step-card p{font-size:14px;line-height:1.7;color:#5f657e;margin:0}
.difference{padding:100px 0;background:var(--navy);color:white}
.difference-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;align-items:center}
.eyebrow.light{color:white}
.difference h2{color:white}
.difference-copy>p{color:#bac0df;line-height:1.8}
.feature-list{display:flex;flex-direction:column}
.feature-list>div{display:flex;gap:22px;padding:25px 0;border-bottom:1px solid rgba(255,255,255,.13)}
.feature-list>div:last-child{border:0}
.feature-list>div>span{color:var(--coral);font-size:13px;font-weight:800}
.feature-list p{display:flex;flex-direction:column;margin:0;gap:6px}
.feature-list strong{font-size:17px}
.feature-list small{font-size:13px;line-height:1.6;color:#aeb5d5}
.process{padding:100px 0}
.process-card{position:relative;overflow:hidden;border-radius:32px;background:#f1f3ff;padding:58px 65px}
.process-card p{color:var(--muted)}
.process-mark{position:absolute;right:70px;top:50%;transform:translateY(-50%);font-size:210px;line-height:1;color:rgba(17,26,86,.07);font-weight:800}
footer{border-top:1px solid var(--line);padding:30px 0}
.footer-row{display:flex;align-items:center;justify-content:space-between}
.footer-row img{width:130px}
.footer-row p{font-size:12px;color:var(--muted)}
@media(max-width:900px){.desktop-nav,.nav-actions{display:none}
.menu-toggle{display:block;margin-left:auto}
.hero{padding-top:55px}
.hero-grid{grid-template-columns:1fr;gap:30px}
.hero-visual{height:420px;max-width:560px;width:100%;margin:auto}
.trust-strip{grid-template-columns:1fr 1fr}
.trust-strip div:nth-child(2){border-right:0}
.trust-strip div:nth-child(-n+2){border-bottom:1px solid var(--line)}
.step-grid{grid-template-columns:1fr}
.difference-grid{grid-template-columns:1fr;gap:45px}
.process-mark{right:20px}
.steps{padding:85px 0}
}
@media(max-width:560px){.container{width:min(100% - 28px,1160px)}
.site-header{height:72px}
.brand img{width:130px}
.hero h1{font-size:43px}
.hero-lead{font-size:16px}
.hero-visual{height:370px}
.main-card{inset:35px 5px 45px;padding:20px}
.risk-overview{gap:16px;margin:32px 0 28px}
.risk-ring{width:105px;height:105px}
.risk-copy strong{font-size:16px}
.shield-card{right:-5px}
.class-card{left:-5px}
.trust-strip div{padding:20px}
.step-card{min-height:270px}
.process-card{padding:42px 28px}
.process-mark{font-size:130px;right:-15px}
.footer-row{flex-direction:column;gap:18px}
.footer-row p{margin:0}
}

/* Animated feature banners */
.step-card.navy{background:var(--navy);border-color:var(--navy)}
.step-card.orange{background:var(--coral);border-color:var(--coral)}
.animated-banner{min-height:330px;display:grid;place-items:center;text-align:center;isolation:isolate}
.animated-banner:before{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(255,255,255,.13);border-radius:50%;right:-70px;top:-75px}
.animated-banner:after{content:"";position:absolute;width:90px;height:90px;background:rgba(255,255,255,.06);border-radius:50%;left:-25px;bottom:-30px}
.banner-titles{position:relative;width:100%;height:230px;display:grid;place-items:center;z-index:2}
.banner-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:translateY(20px);filter:blur(4px);animation:bannerSlideSwap 24s cubic-bezier(.22,.7,.24,1) infinite}
.banner-slide h3{margin:0!important;color:#fff!important;font-size:clamp(22px,2.2vw,30px)!important;line-height:1.22;letter-spacing:-.035em}
.banner-slide p{max-width:330px;margin:18px auto 0!important;color:rgba(255,255,255,.82)!important;font-size:13px!important;line-height:1.68!important}
.banner-slide.title-two{animation-delay:12s}
.animated-banner:nth-child(2) .banner-slide{animation-delay:.4s}
.animated-banner:nth-child(2) .banner-slide.title-two{animation-delay:12.4s}
.animated-banner:nth-child(3) .banner-slide{animation-delay:.8s}
.animated-banner:nth-child(3) .banner-slide.title-two{animation-delay:12.8s}
.animated-banner{transition:transform .3s ease,box-shadow .3s ease}
.animated-banner:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(17,26,86,.18)}
.animated-banner:hover .banner-slide,.animated-banner:focus-within .banner-slide{animation-play-state:paused}
@keyframes bannerSlideSwap{0%{opacity:0;transform:translateY(20px);filter:blur(4px)}7%,43%{opacity:1;transform:translateY(0);filter:blur(0)}50%,100%{opacity:0;transform:translateY(-20px);filter:blur(4px)}}
@media(prefers-reduced-motion:reduce){.banner-slide{animation:none;opacity:1;transform:none;filter:none}.banner-slide.title-two{display:none}}

/* Hero success badge */
.hero-copy{position:relative}
.success-badge{position:absolute;z-index:6;top:-54px;right:8px;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#ff705f,#ff4f3e);color:#fff;box-shadow:0 18px 38px rgba(255,88,72,.32),inset 0 0 0 1px rgba(255,255,255,.28);animation:successBadgePulse 3.2s ease-in-out infinite;transform-origin:center}
.success-badge:before{content:"";position:absolute;inset:9px;border:1px dashed rgba(255,255,255,.52);border-radius:50%}
.success-badge svg{position:absolute;inset:5px;width:108px;height:108px;overflow:visible;animation:successBadgeSpin 22s linear infinite}
.success-badge text{fill:#fff;font-family:Manrope,sans-serif;font-size:9.2px;font-weight:800;letter-spacing:1.6px}
.success-badge>span{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1;transform:translateY(1px)}
.success-badge strong{font-size:31px;letter-spacing:-.06em}
.success-badge small{margin-top:5px;font-size:7px;font-weight:800;letter-spacing:.13em;opacity:.85}
@keyframes successBadgePulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-9px) scale(1.07)}}
@keyframes successBadgeSpin{to{transform:rotate(360deg)}}
@media(max-width:1100px){.success-badge{top:-62px;right:0;width:104px;height:104px}.success-badge svg{width:94px;height:94px}.success-badge strong{font-size:27px}}
@media(max-width:700px){.success-badge{position:relative;top:auto;right:auto;width:96px;height:96px;margin:22px 0 -6px}.success-badge svg{width:86px;height:86px}.success-badge strong{font-size:25px}.hero h1{margin-top:24px}}
@media(prefers-reduced-motion:reduce){.success-badge,.success-badge svg{animation:none}}
