:root{--teal:#04D2C0;--blue:#0064F9;--navy:#0A1325;--white:#effaff;--muted:#9FB3CE;--glass:rgba(255,255,255,.065)}
*{box-sizing:border-box}html,body{margin:0;background:#060e1c;color:var(--white);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}a{color:inherit}
.scene{position:relative;width:100%;aspect-ratio:16/9;min-height:440px;max-height:100vh;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 80% 24%,#0e3056 0,transparent 50%),radial-gradient(ellipse at 9% 90%,#074c53 0,transparent 48%),linear-gradient(127deg,#081525,#061122 55%,#06192b)}
.scene::before{content:'';position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 98%,rgba(255,255,255,.035) 100%),linear-gradient(0deg,transparent 98%,rgba(255,255,255,.035) 100%);background-size:60px 60px;opacity:.38;pointer-events:none}
.scene:after{content:'';position:absolute;width:55%;height:80%;background:radial-gradient(ellipse,rgba(0,100,249,.13),transparent 70%);right:-15%;top:6%;animation:breath 8s ease-in-out infinite;pointer-events:none}
.topbar{position:absolute;top:6.7%;left:5.5%;right:5.5%;display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.24em;font-size:clamp(10px,.87vw,14px);color:#b9cfe2;z-index:6}
.logo-mark{width:27px;height:27px;border-radius:9px;background:linear-gradient(125deg,var(--teal),var(--blue));box-shadow:0 0 28px #04d2c054;display:grid;place-items:center;color:#00172b;font-size:20px;font-weight:900;letter-spacing:0}.topbar .sequence{margin-left:auto;color:#6f9bb6;letter-spacing:.1em}
.text-side{position:absolute;left:5.5%;top:28%;width:34%;z-index:5}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:clamp(10px,.88vw,14px);letter-spacing:.17em;font-weight:750;color:#64f3df;transform:translateY(12px);opacity:0;animation:appear .65s .1s ease-out forwards}
.eyebrow:before{content:'';width:22px;height:2px;background:var(--teal);box-shadow:0 0 14px var(--teal)}
h1{font-size:clamp(30px,4.3vw,65px);letter-spacing:-.053em;line-height:1.04;margin:17px 0 19px;font-weight:800;max-width:590px;transform:translateY(35px);opacity:0;animation:appear .78s .3s cubic-bezier(.2,.7,.1,1) forwards}
p.sub{color:#b5c8df;line-height:1.65;font-size:clamp(13px,1.17vw,18px);max-width:450px;transform:translateY(20px);opacity:0;animation:appear .7s .55s ease-out forwards}
.callout{margin-top:32px;display:inline-flex;align-items:center;gap:11px;font-size:clamp(11px,.95vw,15px);font-weight:700;padding:11px 15px;border:1px solid rgba(4,210,192,.35);border-radius:12px;background:rgba(4,210,192,.08);opacity:0;animation:appear .7s .9s ease-out forwards}
.callout-dot{width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 5px rgba(4,210,192,.12);animation:blink 3s ease-in-out infinite}
.visual-side{position:absolute;left:44%;top:17%;width:52%;height:67%;transform:perspective(1200px) rotateY(-5deg) translateY(32px) scale(.96);opacity:0;animation:panel-enter 1.1s .4s cubic-bezier(.18,.67,.16,1) forwards;z-index:4}
.mock-browser{height:100%;position:relative;overflow:hidden;border:1px solid rgba(232,247,255,.23);border-radius:22px;background:#edf1f3;box-shadow:0 50px 100px #0008,0 0 90px rgba(0,100,249,.14),inset 0 1px 0 #fff9}
.browser-bar{height:43px;background:#f9fbfe;border-bottom:1px solid #dbe2e7;display:flex;gap:6px;align-items:center;padding:0 17px;color:#8c99a7;font-size:11px;position:relative;z-index:2}.dot{width:8px;height:8px;border-radius:50%;background:#fa8189}.dot:nth-child(2){background:#ffca6e}.dot:nth-child(3){background:#40d7a7}.urlbar{margin:0 auto;background:#eef3f7;color:#8293a2;padding:7px 45px;border-radius:7px;letter-spacing:.04em}
.capture{position:absolute;top:43px;left:0;right:0;bottom:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#f6f7f7}
.capture img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;filter:saturate(.96);animation:image-breathe 10s ease-in-out infinite}
.capture:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(4,210,192,.09) 53%,transparent 66%);transform:translateX(-160%);animation:scan 7s 2s linear infinite;pointer-events:none}
.focus{position:absolute;left:var(--fx);top:var(--fy);width:var(--fw);height:var(--fh);border-radius:11px;border:2px solid #00c9d8;box-shadow:0 0 0 999px rgba(6,27,47,.02),0 0 25px rgba(4,210,192,.65),inset 0 0 15px rgba(4,210,192,.14);pointer-events:none;animation:focus-pop 6s ease-in-out infinite;z-index:3}
.focus::before,.focus::after{content:'';position:absolute;border-color:#0064f9;pointer-events:none}.focus::before{top:-7px;left:14px;width:28px;height:5px;background:var(--teal);box-shadow:0 0 17px var(--teal);border-radius:20px}
.float-chip{position:absolute;z-index:5;right:-1%;bottom:-6%;border:1px solid #4f9dd070;border-radius:13px;padding:13px 19px;background:linear-gradient(120deg,rgba(7,43,65,.96),rgba(13,36,68,.96));box-shadow:0 16px 43px #0007;color:#dcfbff;font-size:clamp(11px,1vw,16px);font-weight:700;transform:translateY(32px);opacity:0;animation:chip-enter 1s 1.4s ease-out forwards,chip-float 6s 2.4s ease-in-out infinite}
.float-chip:before{content:'●';color:var(--teal);margin-right:10px}
.particle{position:absolute;border-radius:50%;width:5px;height:5px;background:#04d2c0;box-shadow:0 0 15px #04d2c0aa;opacity:.55;animation:drift var(--dur,11s) var(--delay,0s) linear infinite;left:var(--px);bottom:-5%}
.footer{position:absolute;bottom:6%;left:5.5%;right:5.5%;font-size:clamp(9px,.84vw,12px);letter-spacing:.14em;display:flex;justify-content:space-between;color:#7c93ac;z-index:4}
.footer .stroke{display:inline-block;width:100px;height:2px;background:linear-gradient(90deg,var(--teal),var(--blue));vertical-align:middle;margin-right:10px}
@keyframes appear{to{transform:translateY(0);opacity:1}}@keyframes panel-enter{to{transform:perspective(1200px) rotateY(-3deg) translateY(0) scale(1);opacity:1}}@keyframes image-breathe{50%{transform:scale(1.025)}}@keyframes chip-enter{to{opacity:1;transform:translateY(0)}}@keyframes chip-float{50%{transform:translateY(-10px)}}
@keyframes scan{to{transform:translateX(180%)}}@keyframes breath{50%{opacity:.4;transform:scale(1.3)}}@keyframes blink{50%{box-shadow:0 0 0 9px rgba(4,210,192,.02);opacity:.7}}@keyframes drift{from{transform:translate(0,0);opacity:0}20%{opacity:.65}80%{opacity:.4}to{transform:translate(130px,-750px);opacity:0}}@keyframes focus-pop{0%,12%{opacity:0;transform:scale(.95)}28%,75%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(1.03)}}
.scene--metric .focus{border-color:#0064f9;box-shadow:0 0 24px #0064f999}.scene--chart .focus{border-color:#04d2c0;animation:focus-pop 6s infinite}.scene--typing .float-chip:after{content:' ▍';animation:blink 1s steps(2) infinite}
@media(max-width:800px){.scene{min-height:680px;aspect-ratio:auto}.text-side{left:7%;width:87%;top:16%}.text-side h1{font-size:clamp(34px,8vw,52px)}.text-side p.sub{font-size:14px;max-width:560px}.callout{margin-top:14px}.visual-side{left:7%;top:51%;width:86%;height:34%;transform:none;animation:appear .7s .3s forwards}.topbar{left:7%;right:7%;top:4%}.footer{left:7%;right:7%;bottom:3%}.float-chip{bottom:-10%;right:0}.browser-bar{height:27px}.capture{top:27px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.eyebrow,h1,p.sub,.callout,.visual-side,.float-chip{opacity:1;transform:none}.focus{opacity:1}.particle{display:none}}