:root{--navy:#071324;--gold:#f0c660;--goldlight:#ffe3a0;--ink:#f4f6fb;--slate:#c3ccda}
*{box-sizing:border-box}html{background:#061222}body{margin:0;background:#071324;color:var(--ink);font-family:Inter,system-ui,'Segoe UI',Arial,sans-serif}button,a{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}
.stage{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 70% 51%,#133056 0%,#091a32 40%,#04101e 90%)}
.stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#669ddc 0.8px,transparent 1.3px),radial-gradient(#f1d8aa .65px,transparent 1.1px);background-size:137px 121px,215px 167px;background-position:34px 16px,90px 80px;opacity:.27}
.earth{position:absolute;z-index:-1;right:-4%;bottom:-9%;width:min(86vw,1360px);aspect-ratio:887/622;opacity:0;transform:translateY(24px) scale(1.02);animation:earth-reveal 1.2s 1.6s cubic-bezier(.19,.85,.26,1) forwards;mask-image:linear-gradient(to right,transparent 0%,#000 14%,#000 100%)}
.earth>img,.earth>svg{width:100%;height:100%;position:absolute;inset:0;display:block}.earth>img{object-fit:cover;filter:saturate(.9) brightness(.78)}
#network{overflow:visible}.trace{fill:none;stroke:#f6d17d;stroke-width:2.7;opacity:0;filter:url(#softglow)}.node-core{fill:#ffdb83;filter:url(#softglow)}.node-halo{fill:none;stroke:#ffdf8c;stroke-width:2;filter:url(#softglow)}.signal{fill:#fff1be;filter:url(#softglow)}
.header{position:relative;z-index:3;max-width:1550px;margin:24px auto 0;padding:10px 22px;min-height:70px;border:1px solid rgba(203,224,248,.14);border-radius:22px;background:rgba(3,12,25,.66);display:flex;align-items:center;justify-content:space-between;gap:20px;opacity:0;animation:appear .8s 1.5s forwards}
.brand{display:flex;align-items:center;gap:13px;white-space:nowrap;font-weight:800;font-size:21px;letter-spacing:.2px}.gold{color:var(--gold)}.brand-logo{width:42px;height:42px;border-radius:50%;position:relative;display:inline-flex;align-items:center;justify-content:center}.brand-logo img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1}.brand-logo:after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:0 0 9px 2px rgba(247,194,80,.09);animation:header-glow 7s 3.3s ease-in-out infinite}
.header nav{display:flex;gap:32px;color:#c7d1df;font-size:14px}.header nav a:hover{color:var(--goldlight)}.header-actions{display:flex;gap:10px}.primary,.secondary{display:inline-flex;align-items:center;gap:14px;padding:15px 22px;border-radius:11px;font-weight:700;font-size:14px;border:1px solid rgba(209,227,250,.24);white-space:nowrap}.primary{background:linear-gradient(120deg,#f6d276,#dbad42);color:#091321;border-color:#eac165;box-shadow:0 7px 22px rgba(230,179,71,.12)}.secondary{background:rgba(8,25,45,.77);color:#e6eefb}.primary:hover{filter:brightness(1.08)}.secondary:hover{border-color:rgba(242,207,119,.6)}.small{padding:12px 15px;font-size:13px}
.hero{position:relative;z-index:2;max-width:1550px;margin:0 auto;padding:clamp(112px,17vh,215px) 34px 185px;width:100%;pointer-events:none}.hero a{pointer-events:auto}.eyebrow{color:var(--goldlight);font-size:11px;letter-spacing:.28em;display:flex;align-items:center;gap:15px;opacity:0;animation:up .7s 1.7s forwards}.gold-stroke{width:34px;height:1px;background:var(--gold)}.eyebrow span:not(.gold-stroke){color:#aebcd2}
.hero h1{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:clamp(49px,5.1vw,82px);line-height:1.07;letter-spacing:-.025em;margin:29px 0 22px;max-width:730px;opacity:0;animation:up .9s 1.9s forwards}.hero h1 span{display:block;color:var(--gold)}.description{max-width:500px;color:var(--slate);font-size:clamp(15px,1.13vw,18px);line-height:1.58;opacity:0;animation:up .8s 2.1s forwards}.cta{display:flex;gap:14px;margin-top:28px;opacity:0;animation:up .8s 2.22s forwards}.trust{display:flex;align-items:center;gap:11px;color:#adb8c9;font-size:12px;margin-top:26px;opacity:0;animation:up .8s 2.33s forwards}.trust i{width:5px;height:5px;background:var(--gold);border-radius:50%;box-shadow:0 0 6px #f0c660}
.benefits{position:absolute;bottom:23px;left:4%;right:4%;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(215,232,251,.10);padding-top:20px;gap:18px;z-index:2;opacity:0;animation:appear 1s 2.45s forwards}.benefits>div{display:grid;grid-template-columns:40px 1fr;column-gap:9px;align-items:center}.benefits span{grid-row:span 2;font-size:26px;color:var(--gold)}.benefits b{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:600}.benefits small{color:#a6b5c9;font-size:11px;margin-top:4px}
.demo-panel{position:fixed;bottom:7px;right:10px;z-index:9;display:flex;align-items:center;gap:8px;font-size:11px;color:#b0bbca;background:rgba(4,15,30,.73);border-radius:12px;padding:4px 5px 4px 10px;backdrop-filter:blur(7px)}.demo-panel button{padding:8px 10px;border-radius:8px;border:1px solid rgba(207,223,246,.24);background:#0a1c34;color:#d9e2ed;font-size:11px}
.intro{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:8;background:radial-gradient(circle at 50% 48%,#112a4a,#051325 47%,#030b15 100%);pointer-events:none;animation:outro 1s 1.9s ease-in-out forwards}.intro-logo{position:relative;width:min(31vw,280px);aspect-ratio:1;animation:intro-logo 1.3s .18s ease-out both}.intro-logo img{width:100%;height:100%;position:relative;z-index:2;filter:drop-shadow(0 0 16px rgba(255,204,103,.3));animation:logo-light 2.6s .25s ease-in-out both}.intro-ring{position:absolute;inset:-9%;border-radius:50%;border:2px solid transparent;border-top-color:var(--goldlight);border-right-color:rgba(255,211,118,.4);filter:drop-shadow(0 0 8px #ebc269);animation:ring .98s .35s ease-out both}.intro-halo{position:absolute;width:min(58vw,560px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,209,111,.18),rgba(38,115,198,.13) 34%,transparent 69%);animation:halo 2.65s .3s ease-in-out both}.bolt-glow{position:absolute;z-index:3;left:30%;top:24%;width:40%;height:60%;transform:rotate(26deg);background:linear-gradient(90deg,transparent,rgba(255,246,188,.42),transparent);filter:blur(10px);mix-blend-mode:screen;animation:bolt 1.3s .77s ease-in-out both;pointer-events:none}.intro-caption{font-size:11px;letter-spacing:.38em;color:var(--goldlight);margin-top:30px;animation:up .8s 1s both}
@keyframes intro-logo{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}@keyframes logo-light{0%,100%{filter:drop-shadow(0 0 12px rgba(255,206,101,.25))}58%{filter:drop-shadow(0 0 38px rgba(255,216,114,.67)) drop-shadow(0 0 68px rgba(55,138,233,.25))}}@keyframes ring{from{transform:rotate(-140deg);opacity:0}35%{opacity:1}to{transform:rotate(190deg);opacity:.25}}@keyframes halo{0%{transform:scale(.6);opacity:0}52%{opacity:.95}100%{transform:scale(1.15);opacity:.35}}@keyframes bolt{0%{opacity:0;transform:translate(-35%,24%) rotate(26deg)}40%{opacity:.85}100%{opacity:0;transform:translate(65%,-24%) rotate(26deg)}}@keyframes outro{0%,64%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}@keyframes header-glow{0%,86%,100%{box-shadow:0 0 8px rgba(247,194,80,.08)}93%{box-shadow:0 0 22px 5px rgba(247,194,80,.45)}}@keyframes earth-reveal{from{opacity:0;transform:translateY(24px) scale(1.02)}to{opacity:1;transform:none}}@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes appear{from{opacity:0}to{opacity:1}}
@media(max-width:1100px){.header nav{gap:15px}.earth{width:92vw;right:-27%;bottom:5%;opacity:.68}.hero{padding-top:145px}.hero h1{font-size:clamp(45px,6.2vw,75px)}.description{max-width:450px}}
@media(max-width:730px){.header{margin:12px 12px 0;padding:8px 12px;min-height:58px}.header nav{display:none}.brand{font-size:16px}.brand-logo{width:32px;height:32px}.header-actions .secondary{display:none}.small{padding:10px 12px}.hero{padding:95px 25px 170px}.hero h1{font-size:clamp(42px,9vw,62px)}.earth{width:125vw;right:-43%;bottom:8%;opacity:.45;mask-image:linear-gradient(to right,transparent,#000 26%,#000)}.description{max-width:340px}.benefits{grid-template-columns:repeat(2,1fr);gap:13px;bottom:55px}.benefits>div{grid-template-columns:24px 1fr}.benefits span{font-size:20px}.benefits b{font-size:10px}.benefits small{font-size:10px}.trust{flex-wrap:wrap}.intro-logo{width:180px}.demo-panel span{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}.intro{display:none}.earth,.header,.hero>*:not(.cta),.cta,.benefits{opacity:1;transform:none}.brand-logo:after{display:none}}
.earth{mask-image:linear-gradient(to right,transparent 0%,transparent 12%,#000 38%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 11%,#000 84%,transparent 100%);mask-composite:intersect}
.demo-panel button:disabled{opacity:.55;cursor:default}
@media(max-width:730px){.earth{mask-image:linear-gradient(to right,transparent 0%,#000 33%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 12%,#000 83%,transparent 100%)}}
@media(max-width:730px){.demo-panel{position:absolute;bottom:8px;right:8px}}
@media(max-width:370px){.header-actions{display:none}.eyebrow{flex-wrap:wrap;gap:7px;letter-spacing:.15em}.cta{flex-direction:column;align-items:stretch}.cta a{justify-content:space-between}.hero{padding-left:20px;padding-right:20px}}