body{margin:0;background:#F0F2F6}
a{color:#D42A3C}a:hover{color:#A81E2D}
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
details.lift{padding:0 !important}
details.lift>summary{padding:16px 24px}
details.lift>p{padding:0 24px 16px;margin-left:32px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 008 Kinetic typography : headline chunks */
.kt{display:inline-block;opacity:0;transform:translateY(42px) rotate(2deg);filter:blur(8px);animation:ktIn .9s cubic-bezier(.2,.9,.2,1.15) forwards}
.kt.k2{animation-delay:.12s}.kt.k3{animation-delay:.3s}.kt.k4{animation-delay:.45s}
@keyframes ktIn{to{opacity:1;transform:none;filter:none}}
/* 004 Line draw : underline under accent words */
.uline{position:absolute;left:0;right:0;bottom:-6px;height:6px;background:#E63946;transform:scaleX(0);transform-origin:0 50%;animation:uline .7s 1.05s cubic-bezier(.77,0,.18,1) forwards}
@keyframes uline{to{transform:scaleX(1)}}

/* 004 Line draw + 125 Pulse : hero network */
.net-line{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 2.4s cubic-bezier(.65,0,.35,1) forwards}
.net-line.d2{animation-delay:.4s}.net-line.d3{animation-delay:.8s}.net-line.d4{animation-delay:1.2s}
@keyframes draw{to{stroke-dashoffset:0}}
.net-node{transform-box:fill-box;transform-origin:center;animation:pulse 3.2s ease-in-out infinite}
.net-node.p2{animation-delay:.8s}.net-node.p3{animation-delay:1.6s}.net-node.p4{animation-delay:2.4s}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.8)}}

/* 015 Particles */
.particle{position:absolute;border-radius:50%;background:#FFFFFF;opacity:0;animation:floatUp linear infinite;pointer-events:none}
.particle.red{background:#E63946}
@keyframes floatUp{0%{transform:translateY(0);opacity:0}15%{opacity:.85}100%{transform:translateY(-160px);opacity:0}}

/* 006 Typewriter caret */
.caret{display:inline-block;width:.55em;height:1.05em;background:#E63946;vertical-align:-.15em;margin-left:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* 022 Light sweep : scan line + radar */
.scanline{position:absolute;left:0;right:0;height:80px;top:-80px;background:linear-gradient(180deg,rgba(230,57,70,0) 0%,rgba(230,57,70,.08) 80%,rgba(230,57,70,.45) 100%);pointer-events:none;animation:scan 3.4s linear infinite}
@keyframes scan{to{top:100%}}

/* 001 Pop-in + 010 Overshoot + 024 Impact shake : result chips */
.pop{animation:pop .5s cubic-bezier(.34,1.8,.5,1) both}
.pop.shake{animation:pop .5s cubic-bezier(.34,1.8,.5,1) both,shake .45s .5s ease-in-out}
@keyframes pop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.blink{animation:blink .8s steps(1) infinite}

/* 022 Light sweep on buttons + 125 Pulse */
.btn{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.btn::after{content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:sheen 4.5s ease-in-out infinite}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(212,42,60,.6)}
@keyframes sheen{0%,70%{left:-70%}100%{left:140%}}
.cta{animation:glow 2.6s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(230,57,70,.5)}50%{box-shadow:0 0 0 12px rgba(230,57,70,0)}}

/* 081 Hover lift */
.lift{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.lift:hover{transform:translateY(-6px);box-shadow:0 20px 40px -20px rgba(12,30,62,.35);border-color:#E63946}

/* 094 Marquee (two rows, opposite directions) */
.mq{display:flex;width:max-content;animation:mq 30s linear infinite}
.mq.rev{animation-direction:reverse;animation-duration:38s}
@keyframes mq{to{transform:translateX(-50%)}}

/* 167 Scroll-down cue */
.cue-dot{animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(34px);opacity:0}}

/* 023 Glitch (periodic) */
.glitch{display:inline-block;animation:glitch 5s steps(1) infinite}
@keyframes glitch{0%,90%,100%{text-shadow:none;transform:none}91%{text-shadow:-3px 0 #E63946,3px 0 #5B9BFF;transform:translateX(2px)}93%{text-shadow:3px 0 #E63946,-3px 0 #5B9BFF;transform:translateX(-2px)}95%{text-shadow:none;transform:none}}

/* 079 Scroll progress bar */
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:#E63946;transform-origin:0 50%;transform:scaleX(0);z-index:60}
@supports not (animation-timeline: scroll()){.progress{display:none}}

/* 080 Marker */
.marker{background:linear-gradient(transparent 60%,rgba(230,57,70,.28) 60%) no-repeat;background-size:100% 100%}

/* Scroll-driven motion (Chrome); other browsers show content as is */
@supports (animation-timeline: view()){
.progress{animation:grow linear both;animation-timeline:scroll(root)}
/* 016 Parallax */
.parallax{animation:par linear both;animation-timeline:scroll(root);animation-range:0 900px}
.parallax.slow{animation-name:parSlow}
/* 074 Fade-in + 002 Stagger */
.reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
.stagger>*{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 26%}
.stagger>*:nth-child(2){animation-range:entry 6% cover 30%}
.stagger>*:nth-child(3){animation-range:entry 12% cover 34%}
.stagger>*:nth-child(4){animation-range:entry 18% cover 38%}
.stagger>*:nth-child(5){animation-range:entry 24% cover 42%}
.stagger>*:nth-child(6){animation-range:entry 30% cover 46%}
/* 080 Marker draw on scroll */
.marker{animation:mark linear both;animation-timeline:view();animation-range:entry 40% cover 45%}
/* 146 Scroll text reveal */
.tr span{animation:lightup linear both;animation-timeline:view()}
.tr span:nth-child(1){animation-range:cover 10% cover 22%}
.tr span:nth-child(2){animation-range:cover 14% cover 26%}
.tr span:nth-child(3){animation-range:cover 18% cover 30%}
.tr span:nth-child(4){animation-range:cover 22% cover 34%}
.tr span:nth-child(5){animation-range:cover 26% cover 38%}
.tr span:nth-child(6){animation-range:cover 30% cover 42%}
.tr span:nth-child(7){animation-range:cover 34% cover 46%}
/* 145 Timeline line fill */
.tl-fill{animation:fillY linear both;animation-timeline:view();animation-range:entry 30% exit 60%}
/* 152 Zoom on scroll */
.zoom{animation:zoomIn linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
/* 007 Count-up */
.count{animation:countup linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
}
@keyframes grow{to{transform:scaleX(1)}}
@keyframes par{to{transform:translateY(140px)}}
@keyframes parSlow{to{transform:translateY(60px)}}
@keyframes rise{from{opacity:0;transform:translateY(40px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes mark{from{background-size:0% 100%}to{background-size:100% 100%}}
@keyframes lightup{from{color:#3B4F75}to{color:#FFFFFF}}
@keyframes fillY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes zoomIn{from{transform:scale(.86);opacity:.2}to{transform:scale(1);opacity:1}}
@property --num{syntax:'<integer>';initial-value:0;inherits:false}
.count{--num:var(--to);counter-reset:n var(--num)}
.count::after{content:counter(n)}
@keyframes countup{from{--num:0}to{--num:var(--to)}}

/* 147 Stacking cards */
.stack-card{position:sticky}

/* ===== Added motion set ===== */
/* 004 Line draw (SVG icons, on scroll) */
.ld{stroke-dasharray:1;stroke-dashoffset:0}
/* Card border trace on hover */
.trace-card{position:relative}
.trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.trace rect{x:1px;y:1px;width:calc(100% - 2px);height:calc(100% - 2px);fill:none;stroke:#E63946;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.65,0,.35,1)}
.trace-card:hover .trace rect{stroke-dashoffset:0}
/* 125 Pulse : alert ping */
.ping{position:relative;display:inline-block;width:10px;height:10px;border-radius:50%;background:#E63946}
.ping::after{content:'';position:absolute;inset:0;border-radius:50%;background:#E63946;animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{75%,100%{transform:scale(3);opacity:0}}
/* Red beam sweeping across a section */
.beam{position:absolute;top:0;bottom:0;width:280px;left:-300px;background:linear-gradient(90deg,transparent,rgba(230,57,70,.07),transparent);animation:beam 8s linear infinite;pointer-events:none}
@keyframes beam{to{left:110%}}
/* Voice waveform (deepfake) */
.eq{display:inline-block;width:4px;border-radius:2px;background:#FF8A93;transform-origin:50% 50%;animation:eq 1.1s ease-in-out infinite}
.eq.ai{background:#FFFFFF}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
/* Radar ping rings */
.ring{transform-box:fill-box;transform-origin:center;animation:ring 2.6s ease-out infinite}
.ring.r2{animation-delay:.9s}.ring.r3{animation-delay:1.8s}
@keyframes ring{0%{transform:scale(.2);opacity:.9}100%{transform:scale(2.4);opacity:0}}
/* 129 Text scramble-like flicker on labels */
.flicker{animation:flick 4s steps(1) infinite}
@keyframes flick{0%,86%,100%{opacity:1}88%{opacity:.2}90%{opacity:1}92%{opacity:.4}94%{opacity:1}}
@supports (animation-timeline: view()){
.ld{stroke-dashoffset:1;animation:ldraw linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
/* 021 Flip-in (3D) */
.flipset>*{animation:flipIn linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
.flipset-even>*{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
.flipset>*:nth-child(3n+2){animation-range:entry 6% cover 34%}
.flipset>*:nth-child(3n){animation-range:entry 12% cover 38%}
/* 077 Horizontal scroll : giant outline text */
.hscroll{animation:hscroll linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
.hscroll.back{animation-name:hscrollBack}
/* 145 item highlight as it passes */
.area-item{animation:rise linear both,areaGlow linear both;animation-timeline:view(),view();animation-range:entry 0% cover 25%,cover 35% cover 65%}
.tl-bar{transform-origin:0 50%;animation:barGrow linear both;animation-timeline:view();animation-range:entry 40% cover 50%}
.area-dot{animation:dotOn linear both;animation-timeline:view();animation-range:cover 30% cover 45%}
}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ldraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes flipIn{from{opacity:0;transform:perspective(900px) rotateX(60deg) translateY(60px) scale(.92)}to{opacity:1;transform:none}}
@keyframes hscroll{from{transform:translateX(10%)}to{transform:translateX(-35%)}}
@keyframes hscrollBack{from{transform:translateX(-35%)}to{transform:translateX(10%)}}
@keyframes areaGlow{0%{background:transparent}50%{background:rgba(230,57,70,.06)}100%{background:transparent}}
@keyframes dotOn{from{background:#E6EAF1;transform:scale(1)}to{background:#E63946;transform:scale(1.25)}}

/* ===== Hero report : alert ===== */
.report-card.alert{animation:cardAlert .8s ease-in-out infinite}
.report-card.calm{animation:cardAlert 3s ease-in-out infinite}
@keyframes cardAlert{0%,100%{box-shadow:0 40px 80px -30px rgba(0,0,0,.55),0 0 0 2px rgba(230,57,70,.9),0 0 40px 8px rgba(230,57,70,.5)}50%{box-shadow:0 40px 80px -30px rgba(0,0,0,.55),0 0 0 2px rgba(230,57,70,.2),0 0 8px 0 rgba(230,57,70,.1)}}
.alert-title{animation:softBlink .8s steps(1) infinite}
@keyframes softBlink{50%{opacity:.25}}
.row-flash{animation:rowFlash .8s ease-out}
@keyframes rowFlash{0%{background:rgba(230,57,70,.32)}100%{background:rgba(230,57,70,0)}}
.sg-a{animation:sgA .4s steps(2)}
.sg-b{animation:sgB .4s steps(2)}
@keyframes sgA{0%{text-shadow:-3px 0 #0C1E3E,3px 0 rgba(230,57,70,.45);transform:translateX(2px)}100%{text-shadow:none;transform:none}}
@keyframes sgB{0%{text-shadow:3px 0 #0C1E3E,-3px 0 rgba(230,57,70,.45);transform:translateX(-2px)}100%{text-shadow:none;transform:none}}
@keyframes nodeAlert{0%,100%{opacity:.35}50%{opacity:1}}
/* ===== Emergency alarm (card-contained) ===== */
.alarm-vignette{opacity:0;transition:opacity .35s ease}
.alarm-vignette.land{opacity:.4}
.alarm-vignette.flash{opacity:.15;animation:vig .8s ease-in-out 4}
.alarm-vignette.out{opacity:0;transition:opacity .7s ease}
@keyframes vig{0%,100%{opacity:.15}50%{opacity:.55}}
.tape{transition:transform .4s cubic-bezier(.2,.9,.2,1)}
.tape-top{transform:translateY(-100%)}.tape-bottom{transform:translateY(100%)}
.tape.land,.tape.flash{transform:none}
.tape.out{transition:transform .5s ease-in}
.tape-top.out{transform:translateY(-100%)}.tape-bottom.out{transform:translateY(100%)}
.tape-track{animation:tapeScroll 7s linear infinite}
.tape-track.rev{animation-direction:reverse}
@keyframes tapeScroll{to{transform:translateX(-50%)}}
.caution{opacity:0}
.caution.land{animation:cLand .35s cubic-bezier(.2,.9,.2,1.1) forwards}
.caution.flash{opacity:1}
.caution.flash .caution-inner{animation:cPulse .8s ease-in-out 4}
.caution.out{opacity:1;animation:cOut .7s ease forwards}
.caution.static{opacity:1}
@keyframes cLand{from{opacity:0;transform:translate(-50%,-50%) scale(1.4)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes cPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes cOut{to{opacity:0}}
.page-shake{animation:pshake .3s ease-in-out}
@keyframes pshake{0%,100%{transform:none}20%{transform:translate(-5px,3px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(4px,2px)}}
.hero-alert .net-node{animation:nodeAlert .8s ease-in-out infinite}
.hero-alert .net-lines{animation:lineAlert .8s ease-in-out infinite}
@keyframes lineAlert{0%,100%{stroke-opacity:.22}50%{stroke-opacity:.7}}
.cta-ring{animation:ctaRing 1.2s ease-out 2}
@keyframes ctaRing{0%{box-shadow:0 0 0 0 rgba(230,57,70,.7)}100%{box-shadow:0 0 0 26px rgba(230,57,70,0)}}
html{scroll-padding-top:80px}

@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation:none !important;transition:none !important}
.kt{opacity:1;transform:none;filter:none}.ld{stroke-dashoffset:0}.beam{display:none}.caution.static{opacity:1}.caution.out{opacity:0;transition:opacity .4s !important}.uline{transform:scaleX(1)}.net-line{stroke-dashoffset:0}.scanline,.particle{display:none}
}

/* ===== Responsive ===== */
.menu-btn{display:none}
@media (max-width: 900px){
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #E1E5EC;border-radius:10px;background:#FFFFFF;color:#0C1E3E;cursor:pointer;padding:0}
.site-nav{display:none !important;position:absolute;left:0;right:0;top:100%;flex-direction:column !important;align-items:stretch !important;gap:0 !important;background:#FFFFFF;border-bottom:1px solid #E1E5EC;padding:8px 20px 20px;box-shadow:0 20px 40px -24px rgba(12,30,62,.35)}
.site-nav.open{display:flex !important}
.site-nav>a{padding:14px 4px !important;border-bottom:1px solid #EDF0F5;font-size:16px !important;font-weight:700 !important}
.site-nav>a.btn{margin-top:14px;justify-content:center;border-bottom:none}
.hdr-inner{position:relative}
.sec{padding:72px 20px !important}
.hero-inner{padding:56px 20px 112px !important;gap:40px !important}
.hero-h1{font-size:clamp(34px,9.2vw,44px) !important;line-height:1.3 !important}
.hero-eyebrow{font-size:10.5px !important;letter-spacing:0 !important;white-space:normal;overflow-wrap:anywhere}
.scroll-cue{display:none !important}
.sample-badge{white-space:nowrap}
.hero-sub{font-size:16px !important}
.hero-btns>a{flex:none;width:70%;margin:0 auto;justify-content:center}
.hero-radar{display:none}
.report-card{padding:20px !important}
.report-score{font-size:40px !important}
.h2{font-size:24px !important;line-height:1.5 !important;white-space:normal !important}
.h2-lg{font-size:30px !important;line-height:1.4 !important}
.lead{font-size:15px !important}
.giant{font-size:88px !important}
.stat-num{font-size:40px !important}
.risk-card h3{min-height:0 !important}
.risk-card p{min-height:0 !important}
.statement{font-size:26px !important}
.sticky-col{position:static !important}
.stack-card{position:static !important;padding:24px !important}
.stack-num{font-size:44px !important}
.step-card h3{font-size:20px !important}
.price-num{font-size:36px !important}
.price-card{padding:24px !important}
.faq-q{font-size:15px !important}
.cta-h2{font-size:30px !important}
.cta-btns>a{flex:none;width:70%;margin:0 auto;justify-content:center}
.cta-mark{width:300px !important;right:-80px !important}
.foot-nav{gap:4px 32px !important}
/* Disable scroll-driven animations on mobile — use JS IntersectionObserver instead */
.reveal,.stagger>*,.zoom,.area-item{animation:none !important;opacity:0;transform:translateY(30px);filter:none;transition:opacity .6s ease,transform .6s ease}
.reveal.in-view,.stagger.in-view>*,.zoom.in-view,.area-item.in-view{opacity:1 !important;transform:none !important}
.stagger.in-view>*:nth-child(2){transition-delay:.1s}
.stagger.in-view>*:nth-child(3){transition-delay:.12s}
.stagger.in-view>*:nth-child(4){transition-delay:.18s}
.stagger.in-view>*:nth-child(5){transition-delay:.24s}
.stagger.in-view>*:nth-child(6){transition-delay:.3s}
.flipset>*,.flipset-even>*{animation:none !important;opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .5s ease}
.flipset.in-view>*,.flipset-even.in-view>*{opacity:1 !important;transform:none !important}
.flipset.in-view>*:nth-child(2),.flipset-even.in-view>*:nth-child(2){transition-delay:.1s}
.flipset.in-view>*:nth-child(3),.flipset-even.in-view>*:nth-child(3){transition-delay:.2s}
.parallax{animation:none !important;transform:none !important}
.marker{animation:none !important;background-size:100% 100% !important}
.ld{animation:none !important;stroke-dashoffset:0 !important}
.tl-fill{animation:none !important;transform:scaleY(1) !important}
.tl-bar{animation:none !important;transform:scaleX(1) !important}
.area-dot{animation:none !important;opacity:1 !important}
.count{animation:none !important}
.hscroll{animation:none !important}
}
@media (max-width: 1024px) and (min-width: 901px){
.sec{padding:96px 24px !important}
.h2{font-size:34px !important}
}