
.fu-sec{position:relative;overflow:hidden;padding:72px 0;background:radial-gradient(900px 520px at 70% 40%,rgba(20,184,166,.16),transparent 60%),radial-gradient(700px 500px at 15% 80%,rgba(59,130,246,.16),transparent 60%),linear-gradient(180deg,#05080c,#0a1218 55%,#05080c);color:#e6eef3;isolation:isolate}
.fu-sec .fu-aura{position:absolute;inset:-20%;z-index:-1;pointer-events:none;background:conic-gradient(from 0deg at 60% 50%,rgba(20,184,166,.0),rgba(20,184,166,.14),rgba(59,130,246,.12),rgba(148,163,184,.08),rgba(20,184,166,0));filter:blur(60px);animation:fu-spin 38s linear infinite}
.fu-wrap{max-width:1180px;margin:0 auto;padding:0 20px;display:grid;gap:40px;align-items:center}
.fu-copy .fu-eb{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--teal2,#5eead4);padding:7px 12px;border-radius:999px;background:rgba(20,184,166,.1);border:1px solid rgba(94,234,212,.3)}
.fu-copy .fu-eb::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal2,#5eead4);box-shadow:0 0 10px var(--teal2,#5eead4);animation:fu-pulse 2s ease-in-out infinite}
.fu-copy h2{font:800 clamp(28px,6vw,46px)/1.08 Montserrat,sans-serif;margin:16px 0 14px;color:#fff;letter-spacing:-.01em}
.fu-g{background:linear-gradient(90deg,var(--teal2,#5eead4),#60a5fa 60%,#cbd5e1);-webkit-background-clip:text;background-clip:text;color:transparent}
.fu-copy p{color:#b6c3cc;font-size:17px;line-height:1.6;margin:0 0 18px;max-width:560px}
.fu-pts{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.fu-pts li{display:flex;gap:10px;align-items:center;padding:11px 14px;border-radius:14px;background:rgba(15,23,32,.55);border:1px solid rgba(148,163,184,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .3s,border-color .3s,box-shadow .3s}
.fu-pts li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--teal2,#5eead4),#60a5fa);box-shadow:0 0 10px rgba(94,234,212,.7)}
.fu-pts li:hover{transform:translateX(4px);border-color:rgba(94,234,212,.45);box-shadow:0 0 22px rgba(20,184,166,.18)}
.fu-stage{position:relative;min-height:540px;display:flex;justify-content:center;align-items:center;perspective:1200px}
.fu-stage::before{content:"";position:absolute;width:min(420px,86vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(20,184,166,.32),rgba(59,130,246,.14) 45%,transparent 70%);filter:blur(20px);z-index:-1;animation:fu-breathe 6s ease-in-out infinite}
.fu-phone{margin:0;width:min(250px,64vw);transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fu-bezel{position:relative;border-radius:38px;padding:9px;background:linear-gradient(145deg,#2a3440,#0b1016 40%,#1c2530);box-shadow:0 0 0 1px rgba(148,163,184,.25),0 30px 80px -20px rgba(0,0,0,.8),0 0 60px -10px rgba(20,184,166,.45);animation:fu-float 7s ease-in-out infinite}
.fu-bezel::after{content:"";position:absolute;inset:9px;border-radius:30px;background:linear-gradient(120deg,rgba(255,255,255,.14),transparent 35%);pointer-events:none}
.fu-scr,.fu-scr img{display:block;width:100%;height:auto;aspect-ratio:540/1170;border-radius:30px;background:#0b1016}
.fu-cap{margin-top:14px;text-align:center;color:var(--teal2,#5eead4);font:600 13px/1.4 Inter,sans-serif;padding:6px 12px;border-radius:999px;background:rgba(6,22,26,.6);border:1px solid rgba(20,184,166,.35);box-shadow:0 0 18px rgba(20,184,166,.18)}
.fu-chip{position:absolute;z-index:3;width:min(200px,48vw);border-radius:18px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);filter:drop-shadow(0 18px 30px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(20,184,166,.25));animation:fu-float 6s ease-in-out infinite;animation-delay:calc(var(--d,0)*-1.7s);transition:transform .35s}
.fu-chip img{display:block;width:100%;height:auto}
.fu-chip:hover{transform:scale(1.05)}
.fu-chip.tl{top:6%;left:0}.fu-chip.r{top:44%;right:0}.fu-chip.bl{bottom:8%;left:2%}
/* reveal (only with JS) */
.fu-js .fu-sec [data-fu]{opacity:0;transform:translateY(28px) scale(.97);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0)*.18s + .1s)}
.fu-js .fu-sec.fu-in [data-fu]{opacity:1;transform:none}
/* variants */
.fu-timeline .fu-stage::after{content:"";position:absolute;left:12%;top:12%;bottom:12%;width:2px;background:linear-gradient(var(--teal2,#5eead4),#60a5fa,transparent);box-shadow:0 0 12px rgba(94,234,212,.6);opacity:.7}
.fu-night{background:radial-gradient(700px 500px at 65% 45%,rgba(59,130,246,.2),transparent 60%),linear-gradient(180deg,#03050a,#070c16 60%,#03050a)}
.fu-night .fu-poly{position:absolute;inset:6% 4%;z-index:0;pointer-events:none;opacity:.8}
.fu-night .fu-poly polygon{fill:rgba(20,184,166,.06);stroke:var(--teal2,#5eead4);stroke-width:1.5;stroke-dasharray:8 8;animation:fu-dash 3s linear infinite;filter:drop-shadow(0 0 6px rgba(94,234,212,.7))}
.fu-night .fu-scan{position:absolute;left:0;right:0;height:120px;top:-120px;background:linear-gradient(transparent,rgba(94,234,212,.12),transparent);animation:fu-scan 5s linear infinite;pointer-events:none}
.fu-heat .fu-stage::before{background:radial-gradient(circle,rgba(251,146,60,.22),rgba(20,184,166,.22) 40%,rgba(59,130,246,.12) 60%,transparent 72%)}
.fu-heat .fu-ring{position:absolute;width:300px;aspect-ratio:1;border-radius:50%;border:1px solid rgba(94,234,212,.4);animation:fu-ring 4s ease-out infinite;pointer-events:none}
.fu-heat .fu-ring:nth-of-type(2){animation-delay:-2s}
.fu-grid .fu-dots{position:absolute;inset:4%;display:grid;grid-template-columns:repeat(8,1fr);gap:18px;z-index:0;pointer-events:none;opacity:.6}
.fu-grid .fu-dots i{aspect-ratio:1;border-radius:6px;border:1px solid rgba(148,163,184,.18);background:rgba(20,184,166,.05);animation:fu-blink 5s ease-in-out infinite}
.fu-grid .fu-phone{transform:rotateY(-12deg) rotateX(4deg)}
.fu-steps .fu-wrap{grid-template-columns:1fr}
.fu-steps .fu-copy{text-align:center;justify-self:center}.fu-steps .fu-copy p{margin-left:auto;margin-right:auto}
.fu-steps .fu-row{position:relative;display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 10px 30px;-webkit-overflow-scrolling:touch}
.fu-steps .fu-row::before{content:"";position:absolute;left:8%;right:8%;top:46%;height:2px;background:linear-gradient(90deg,transparent,var(--teal2,#5eead4),#60a5fa,transparent);background-size:200% 100%;animation:fu-flow 4s linear infinite;opacity:.6;z-index:0}
.fu-steps .fu-col{position:relative;flex:0 0 min(250px,72vw);scroll-snap-align:center}
.fu-steps .fu-col .fu-chip{position:relative;width:88%;margin:-34px auto 0;left:auto;right:auto;top:auto;bottom:auto}
.fu-steps .fu-col:nth-child(2) .fu-bezel{animation-delay:-2.3s}.fu-steps .fu-col:nth-child(3) .fu-bezel{animation-delay:-4.6s}
.fu-steps .fu-phone{width:100%}
@media(min-width:900px){
 .fu-sec{padding:110px 0}
 .fu-wrap{grid-template-columns:1fr 1.05fr;gap:60px}
 .fu-timeline .fu-wrap,.fu-grid .fu-wrap{grid-template-columns:1.05fr 1fr}.fu-timeline .fu-stage,.fu-grid .fu-stage{order:-1}
 .fu-stage{min-height:640px}.fu-phone{width:290px}.fu-chip{width:230px}
 .fu-chip.tl{left:4%}.fu-chip.r{right:2%}
 .fu-steps .fu-row{overflow:visible;justify-content:center;gap:40px}
 .fu-steps .fu-col{flex:0 0 280px}.fu-steps .fu-col:nth-child(2){transform:translateY(-30px)}
}
/* fu-duo: PPE page, two phones (timeline + rules) with a scanning detection frame */
.fu-duo{background:radial-gradient(800px 520px at 72% 45%,rgba(250,204,21,.10),transparent 60%),radial-gradient(700px 500px at 20% 80%,rgba(20,184,166,.18),transparent 60%),linear-gradient(180deg,#05080c,#0b1114 55%,#05080c)}
.fu-duo .fu-pair{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:0}
.fu-duo .fu-pair .fu-phone{width:min(190px,44vw)}
.fu-duo .fu-pair .fu-phone.b{margin-left:-28px;margin-top:56px;transform:rotate(4deg)}
.fu-duo .fu-pair .fu-phone.a{transform:rotate(-3deg);z-index:2}
.fu-duo .fu-pair .fu-phone.b .fu-bezel{animation-delay:-3.5s}
.fu-duo .fu-pair .fu-cap{font-size:11.5px}
.fu-duo .fu-phone{position:relative}
.fu-duo .fu-camscan{position:absolute;z-index:2;pointer-events:none;left:9px;right:9px;top:calc(9px + 6.5%);height:13%;overflow:hidden;border-radius:4px;box-shadow:inset 0 0 0 1.5px rgba(94,234,212,.55)}
.fu-duo .fu-phone.b .fu-camscan{top:calc(9px + 6%);height:12%}
.fu-duo .fu-camscan::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-30%;background:linear-gradient(90deg,transparent,rgba(94,234,212,.35),transparent);animation:fu-sweep 3.6s linear infinite}
.fu-duo .fu-phone.b .fu-camscan::after{animation-delay:-1.8s}
.fu-duo .fu-chip.tl{display:block;margin:0;gap:0;grid-template-columns:none}.fu-duo .fu-stage{padding-bottom:64px}.fu-duo .fu-chip.bl{bottom:0;left:0}.fu-duo .fu-chip.tl{top:2%}
@keyframes fu-sweep{to{left:100%}}
@keyframes fu-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes fu-spin{to{transform:rotate(360deg)}}
@keyframes fu-pulse{50%{opacity:.35}}
@keyframes fu-breathe{50%{transform:scale(1.08);opacity:.8}}
@keyframes fu-dash{to{stroke-dashoffset:-32}}
@keyframes fu-scan{to{top:100%}}
@keyframes fu-ring{from{transform:scale(.6);opacity:.9}to{transform:scale(1.7);opacity:0}}
@keyframes fu-blink{0%,100%{background:rgba(20,184,166,.05)}50%{background:rgba(20,184,166,.22);box-shadow:0 0 14px rgba(20,184,166,.35)}}
@keyframes fu-flow{to{background-position:-200% 0}}
.fu-timeline .fu-chip.tl{top:27%}
.fu-ov{position:absolute;inset:9px;border-radius:30px;overflow:hidden;pointer-events:none;container-type:inline-size;z-index:2}
.fu-mask,.fu-push{display:none}
.fu-js .fu-mask{display:block;position:absolute;left:0;right:0;top:3.6%;height:7.6%;background:#fff}
.fu-js .fu-push{display:flex;position:absolute;left:2.4%;right:2.4%;top:4%;gap:3cqw;align-items:center;padding:2.6cqw 3.4cqw;border-radius:4.4cqw;background:rgba(244,246,249,.97);box-shadow:0 2cqw 6cqw rgba(15,23,42,.28);transform:translateY(-160%);opacity:0;font-family:Inter,-apple-system,sans-serif}
.fu-pi{flex:none;width:8cqw;height:8cqw;border-radius:2cqw;background:linear-gradient(135deg,#14b8a6,#3b82f6)}
.fu-push span{display:flex;flex-direction:column;min-width:0;color:#0f172a;line-height:1.25}
.fu-push small{font-size:2.6cqw;color:#64748b;letter-spacing:.02em}.fu-push strong{font-size:3.3cqw}.fu-push em{font-style:normal;font-size:3cqw;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fu-in .fu-push{animation:fu-drop 7s cubic-bezier(.2,.8,.2,1) .8s infinite}
@keyframes fu-drop{0%{transform:translateY(-160%);opacity:0}8%,62%{transform:none;opacity:1}72%,100%{transform:translateY(-160%);opacity:0}}
.fu-smk{position:absolute;left:46.5%;width:13%;top:13.4%;height:9.6%}
.fu-smk i{position:absolute;bottom:0;left:30%;width:40%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(235,238,242,.55),rgba(235,238,242,0) 70%);filter:blur(2px);opacity:0;animation:fu-rise 4.5s linear infinite}
.fu-smk i:nth-child(2){animation-delay:-.9s;left:22%}.fu-smk i:nth-child(3){animation-delay:-1.8s;left:36%}.fu-smk i:nth-child(4){animation-delay:-2.7s;left:26%}.fu-smk i:nth-child(5){animation-delay:-3.6s;left:34%}
@keyframes fu-rise{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:.8}60%{opacity:.5}100%{transform:translate(18%,-210%) scale(1.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.fu-js .fu-push{transform:none!important;opacity:1!important}.fu-smk{display:none}}
@media(prefers-reduced-motion:reduce){.fu-sec *,.fu-sec *::before,.fu-sec *::after,.fu-sec::before{animation:none!important;transition:none!important}.fu-js .fu-sec [data-fu]{opacity:1!important;transform:none!important}}
