:root{
  --bg:#f8fbff;--bg2:#eef5fb;--ink:#0b0d12;--muted:#5b6068;--line:rgba(13,27,43,.12);
  --blue:#078af5;--blue2:#5eb8ff;--blue3:#003e91;--glass:rgba(255,255,255,.58);
  --shadow:0 28px 80px rgba(24,72,112,.16);--radius:28px;--header-h:96px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;color:var(--ink);font-family:"Noto Sans Thai",system-ui,sans-serif;background:linear-gradient(180deg,#fff 0%,#f2f7fb 48%,#fff 100%);overflow-x:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit}.noise{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.16;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E")}.cursor-glow{position:fixed;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(84,176,255,.12),rgba(84,176,255,0) 68%);transform:translate(-50%,-50%);transition:opacity .2s}#scrollProgress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--blue3),var(--blue2));z-index:200}.site-header{position:fixed;z-index:90;top:0;left:0;width:100%;height:var(--header-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 5vw;transition:background .4s,backdrop-filter .4s,box-shadow .4s}.site-header.scrolled{background:rgba(250,253,255,.72);backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(8,43,70,.08)}.brand{font:600 18px/1 system-ui,sans-serif;letter-spacing:.35em;display:flex;gap:.65em;align-items:center}.brand-x{font-weight:500;letter-spacing:.42em}.brand-logo{display:block;width:142px;height:auto;object-fit:contain}.nav{display:flex;gap:42px;font:600 12px/1 system-ui,sans-serif;letter-spacing:.055em}.nav a{position:relative;color:#31363b}.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-10px;height:1px;background:var(--blue);transition:right .25s}.nav a:hover:after{right:0}.header-cta{justify-self:end}.pill{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 28px;border-radius:16px;font-weight:600;font-size:14px;letter-spacing:.01em}.pill-ghost{min-width:210px;border:1px solid white;background:linear-gradient(180deg,#fff,rgba(201,235,255,.82));box-shadow:inset 0 3px 5px rgba(255,255,255,.8),0 10px 25px rgba(57,133,185,.14)}.pill-primary{height:62px;padding:0 34px;color:white;border:1px solid rgba(255,255,255,.9);background:linear-gradient(95deg,#177ecb,#0892fc);box-shadow:inset 0 4px 4px rgba(255,255,255,.25),0 18px 36px rgba(0,121,222,.22)}.menu-btn{display:none;background:transparent;border:0;width:46px;height:46px}.menu-btn span{display:block;width:22px;height:1px;background:#111;margin:7px auto}.hero{height:100svh;min-height:720px;position:relative;overflow:hidden;background:#edf5fb;isolation:isolate;--video-x:0px;--video-y:0px;--video-scroll-y:0px;--copy-x:0px;--copy-y:0px;--copy-scroll-y:0px}.hero:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(249,252,255,.97) 0%,rgba(249,252,255,.91) 25%,rgba(249,252,255,.56) 42%,rgba(249,252,255,.10) 62%,rgba(249,252,255,.02) 100%)}
.hero-video-wrap{position:absolute;z-index:0;inset:-3.5%;overflow:hidden;will-change:transform;transform:translate3d(var(--video-x),calc(var(--video-y) + var(--video-scroll-y)),0) scale(1.075);transition:filter .35s ease;pointer-events:none}.hero-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center center;filter:saturate(.98) contrast(1.02);transform:scale(1.01)}.hero-video-wash{position:absolute;inset:0;background:radial-gradient(circle at 76% 44%,rgba(60,176,255,.10),transparent 32%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(220,238,251,.04));mix-blend-mode:screen}.hero-video-depth{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.02) 0 68%,rgba(235,246,255,.24) 100%)}
.hero-copy{position:relative;z-index:6;width:42vw;max-width:700px;margin-left:7vw;padding-top:19vh;will-change:transform;transform:translate3d(var(--copy-x),calc(var(--copy-y) + var(--copy-scroll-y)),0)}.eyebrow,.mini-label,.section-kicker{font:600 11px/1.2 system-ui,sans-serif;letter-spacing:.24em;color:#60707e}.eyebrow{margin-bottom:18px}.hero-title,.display{font-family:"Italiana",Georgia,serif;font-weight:400;letter-spacing:.018em;margin:0}.hero-title{font-size:clamp(58px,6.25vw,120px);line-height:.88}.hero-title .line{display:block;white-space:nowrap}.hero-title .blue,.display span{background:linear-gradient(180deg,#63b9ff 0%,#0876d4 56%,#003f8a 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-sub{font-size:clamp(15px,1.05vw,21px);line-height:1.75;color:#454d55;margin:26px 0 28px}.hero-sub strong{color:#0d1116}.hero-actions{display:flex;align-items:center;gap:38px}.text-link{font-weight:700;text-decoration:underline;text-underline-offset:5px;color:#4a4f55}.text-link span{font-size:12px}.vertical-label{position:absolute;z-index:7;right:2.3vw;top:45%;font:600 10px/1 system-ui,sans-serif;letter-spacing:.25em;color:#71808b;writing-mode:vertical-rl}.scroll-cue{position:absolute;z-index:8;left:50%;bottom:2.8vh;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:15px;font:500 11px/1 system-ui,sans-serif;letter-spacing:.08em;color:#4c555d}.scroll-cue i{display:block;width:1px;height:30px;background:#111;position:relative}.scroll-cue i:after{content:"";position:absolute;left:-4px;bottom:0;width:8px;height:8px;border-right:1px solid #111;border-bottom:1px solid #111;transform:rotate(45deg)}
.hero-scrub{position:absolute;z-index:8;right:6vw;bottom:7.2vh;width:min(250px,24vw);font:600 8px/1 system-ui,sans-serif;letter-spacing:.16em;color:rgba(42,62,78,.7);pointer-events:none}.hero-scrub-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.hero-scrub-label b{font-weight:600;font-variant-numeric:tabular-nums;color:#2f76aa}.hero-scrub-track{height:1px;background:rgba(41,96,135,.20);overflow:visible;position:relative}.hero-scrub-track i{position:absolute;left:0;top:0;width:100%;height:1px;background:linear-gradient(90deg,#6bc4ff,#0078d8);transform:scaleX(0);transform-origin:left center;will-change:transform}.hero-scrub-track i:after{content:"";position:absolute;right:-3px;top:-2.5px;width:6px;height:6px;border-radius:50%;background:#0589e8;box-shadow:0 0 0 3px rgba(5,137,232,.12),0 0 15px rgba(5,137,232,.35)}.hero-scrub small{display:block;margin-top:10px;font-size:7px;color:rgba(70,89,103,.55)}
.section{position:relative;padding:140px 7vw;min-height:100vh;border-top:1px solid rgba(10,37,60,.07);overflow:hidden}.section-kicker{position:absolute;top:48px;left:7vw}.display{font-size:clamp(64px,7.1vw,136px);line-height:.88}.lead{font-size:clamp(22px,2.05vw,38px);line-height:1.38;font-weight:400;letter-spacing:-.035em}.body-copy{font-size:16px;line-height:1.8;color:var(--muted);max-width:690px}.emotion{background:linear-gradient(180deg,#f8fbff,#fff 48%,#f2f7fb)}.emotion-grid{display:grid;grid-template-columns:1fr .85fr;gap:10vw;align-items:start;padding-top:7vh}.sticky-title{position:sticky;top:160px}.emotion-story{padding-top:16vh}.emotion-story .lead{margin:0 0 30px}.emotion-cost{margin-top:80px;border-top:1px solid var(--line)}.cost-row{display:grid;grid-template-columns:1.1fr 44px 1fr 1fr;align-items:center;gap:18px;min-height:86px;border-bottom:1px solid var(--line)}.cost-row span{font:500 14px/1 system-ui;letter-spacing:.13em}.cost-row b{font:400 13px/1 system-ui;color:#90a0ad}.cost-row i{height:1px;background:linear-gradient(90deg,var(--blue),rgba(0,132,240,.06));transform-origin:left}.cost-row em{font:500 11px/1 system-ui;font-style:normal;letter-spacing:.12em;color:#77828b;text-align:right}.giant-watermark{position:absolute;left:4vw;bottom:-.13em;font:400 18vw/.8 "Italiana",serif;color:rgba(44,122,184,.04);letter-spacing:.02em;white-space:nowrap}.edge{background:radial-gradient(circle at 30% 45%,rgba(141,211,255,.26),rgba(255,255,255,0) 35%),#fff}.edge-layout{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center;padding-top:3vh}.signal-core{position:relative;width:min(43vw,720px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(0,122,230,.2),rgba(255,255,255,.1) 32%,rgba(255,255,255,0) 68%)}.core-ring{position:absolute;border-radius:50%;border:1px solid rgba(0,125,229,.35);inset:12%;animation:spin 18s linear infinite}.core-ring:before,.core-ring:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#078af5;box-shadow:0 0 16px #078af5}.core-ring:before{left:12%;top:12%}.core-ring:after{right:10%;bottom:15%}.cr2{inset:24%;animation-direction:reverse;animation-duration:11s;border-style:dashed}.cr3{inset:34%;animation-duration:7s;border-color:rgba(0,125,229,.7)}.core-center{position:absolute;inset:40%;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at 35% 25%,#fff,#d9f0ff 40%,#1497f4 100%);box-shadow:0 0 0 7px rgba(255,255,255,.75),0 0 0 9px rgba(0,112,204,.3),0 25px 70px rgba(0,128,238,.25);font:600 28px/1 system-ui;letter-spacing:.08em}.core-center small{font-size:8px;letter-spacing:.22em;margin-top:7px}.data-tag{position:absolute;padding:8px 12px;border:1px solid rgba(0,123,220,.2);border-radius:999px;background:rgba(255,255,255,.78);backdrop-filter:blur(8px);font:600 9px/1 system-ui;letter-spacing:.12em}.tag-a{left:2%;top:28%}.tag-b{right:4%;top:21%}.tag-c{right:7%;bottom:22%}.tag-d{left:5%;bottom:25%}.edge-copy{padding-right:2vw}.edge-copy .lead{font-size:clamp(20px,1.7vw,32px)}.spec-strip{display:flex;gap:6px;margin-top:48px}.spec-strip span{flex:1;border-top:1px solid var(--line);padding-top:16px;font:600 9px/1.2 system-ui;letter-spacing:.12em;color:#60717e}
.control{background:linear-gradient(140deg,#f9fcff,#eaf4fb 55%,#fff)}.control-layout{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:7vw;padding-top:2vh}.control-copy .lead{font-size:clamp(20px,1.7vw,31px)}.panel-shell{position:relative;border-radius:34px;padding:10px;background:linear-gradient(135deg,#fff,#c8d9e5 45%,#fff 65%,#8199aa);box-shadow:0 35px 90px rgba(49,93,125,.22),inset 0 0 0 1px rgba(255,255,255,.7);transform:perspective(1400px) rotateY(-5deg) rotateX(2deg);will-change:transform}.panel-top,.panel-bottom{height:58px;border-radius:25px 25px 0 0;background:linear-gradient(180deg,#f6fbff,#d9e7ef);display:flex;align-items:center;justify-content:space-between;padding:0 22px;font:600 10px/1 system-ui;letter-spacing:.11em;border-bottom:1px solid rgba(58,94,120,.15)}.live-dot:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#20c58d;margin-right:8px;box-shadow:0 0 10px #20c58d}.panel-screen{background:linear-gradient(160deg,#07131e,#0b1e2d);padding:24px;border-radius:0;display:grid;grid-template-columns:1fr 1fr;gap:14px;color:white;position:relative;overflow:hidden}.panel-screen:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.5%,rgba(69,174,255,.06) 50%,transparent 50.5%),linear-gradient(0deg,transparent 49.5%,rgba(69,174,255,.045) 50%,transparent 50.5%);background-size:34px 34px;pointer-events:none}.panel-metric{position:relative;z-index:2;border:1px solid rgba(146,198,236,.14);background:rgba(255,255,255,.035);border-radius:16px;padding:16px}.panel-metric small{font:500 8px/1 system-ui;letter-spacing:.14em;color:#91aabc;display:block;margin-bottom:14px}.segmented{display:flex;gap:7px}.segmented button{flex:1;border:1px solid rgba(148,201,240,.18);border-radius:8px;background:#0b2335;color:#9fb7c8;padding:11px 8px;font:600 10px system-ui}.segmented button.active{background:linear-gradient(180deg,#22a8ff,#0873d2);color:#fff;border-color:#55bcff;box-shadow:0 0 18px rgba(9,143,246,.25)}.stepper{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:8px}.stepper button{height:38px;border:1px solid rgba(148,201,240,.18);background:#0b2335;color:#b6d1e2;border-radius:8px}.stepper strong{text-align:center;font:500 18px/1 system-ui;letter-spacing:.12em}.range-metric{grid-column:1/3}.range-metric input{width:100%;accent-color:#159af6}.range-labels{display:flex;justify-content:space-between;font:500 7px system-ui;color:#70899b;letter-spacing:.1em}.panel-chart{grid-column:1/3;height:170px;border:1px solid rgba(146,198,236,.12);border-radius:16px;overflow:hidden;position:relative;z-index:2;background:rgba(4,18,29,.5)}.panel-chart canvas{width:100%;height:100%}.panel-bottom{border-radius:0 0 25px 25px;border-top:1px solid rgba(58,94,120,.12);border-bottom:0}.panel-bottom button{border:0;border-radius:10px;padding:10px 18px;background:#0f8dec;color:white;font:600 9px system-ui;letter-spacing:.12em}
.protect{background:#fbfdff}.protect-head,.action-head{display:grid;grid-template-columns:1.35fr .65fr;gap:8vw;align-items:end;padding-top:3vh}.protect-head .lead,.action-head .lead{font-size:clamp(19px,1.55vw,28px);margin-bottom:1.3em}.risk-track{margin-top:100px}.risk-axis{display:grid;grid-template-columns:repeat(4,1fr);font:600 9px/1 system-ui;letter-spacing:.12em;color:#72828e}.risk-axis span:not(:first-child){text-align:center}.risk-axis span:last-child{text-align:right}.risk-line{height:56px;position:relative}.risk-line:before,.risk-progress{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:#d4e0e8}.risk-progress{right:0;background:linear-gradient(90deg,#96cfff,var(--blue));transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}.risk-track.in-view .risk-progress{transform:scaleX(1)}.risk-dot{position:absolute;top:22px;width:11px;height:11px;border:2px solid #fff;background:#0d91ef;border-radius:50%;box-shadow:0 0 0 1px #0d91ef,0 0 18px rgba(13,145,239,.35)}.rd1{left:0}.rd2{left:33.33%}.rd3{left:66.66%}.rd4{right:0}.risk-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}.risk-cards article{padding:30px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.68);min-height:210px}.risk-cards small{font:500 10px system-ui;color:#70889a}.risk-cards h3{font:600 16px system-ui;letter-spacing:.06em}.risk-cards p{font-size:14px;line-height:1.75;color:#68737b}.action{background:radial-gradient(circle at 10% 55%,rgba(115,197,255,.22),transparent 36%),linear-gradient(180deg,#fff,#edf6fc)}.media-grid{display:grid;grid-template-columns:.58fr 1.42fr;gap:28px;margin-top:78px;align-items:start}.media-card{border:1px solid var(--line);border-radius:28px;padding:18px;background:rgba(255,255,255,.72);box-shadow:0 18px 60px rgba(61,104,134,.1)}.media-label{display:flex;justify-content:space-between;padding:4px 3px 16px;font:600 9px/1 system-ui;letter-spacing:.14em;color:#60717e}.media-label b{font-weight:500;color:#96a4af}.phone-card{max-width:420px;justify-self:center;width:100%}.phone-shell{position:relative;width:100%;aspect-ratio:9/16;border-radius:28px;padding:9px;background:linear-gradient(135deg,#879dad,#fff 20%,#718897 50%,#fff 72%,#7a91a0);overflow:hidden}.phone-shell video{width:100%;height:100%;object-fit:cover;border-radius:21px;background:#07121b}.play-overlay{position:absolute;inset:9px;border:0;border-radius:21px;background:radial-gradient(circle at 50% 35%,rgba(15,143,241,.22),rgba(4,18,29,.8));color:white;display:grid;place-content:center;gap:10px;text-align:center;cursor:pointer;transition:opacity .2s}.play-overlay span{display:grid;place-items:center;width:62px;height:62px;margin:auto;border:1px solid rgba(255,255,255,.7);border-radius:50%;backdrop-filter:blur(8px)}.play-overlay small{font:600 9px system-ui;letter-spacing:.15em}.media-card p{font-size:12px;color:#77858f;margin:14px 5px 4px;line-height:1.6}.media-card code{font-size:11px}.proof-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#06131e;border:1px solid rgba(16,104,164,.16)}.proof-frame img{width:100%;height:100%;object-fit:cover;display:block}.scan-line{position:absolute;left:0;right:0;top:10%;height:1px;background:rgba(91,196,255,.65);box-shadow:0 0 12px rgba(0,155,255,.7);animation:scan 4s ease-in-out infinite}.proof-meta{display:flex;justify-content:space-between;gap:10px;padding:16px 4px 2px;font:600 9px system-ui;letter-spacing:.1em;color:#758895}.proof-meta strong{color:#167fc7}
.buy{min-height:auto;padding-bottom:160px;background:linear-gradient(145deg,#f8fcff,#dcebfa 55%,#fff);isolation:isolate}.buy-glow{position:absolute;z-index:-1;width:55vw;height:55vw;border-radius:50%;right:-12vw;top:6vh;background:radial-gradient(circle,rgba(51,171,255,.24),rgba(51,171,255,0) 64%);filter:blur(12px)}.buy-layout{display:grid;grid-template-columns:1fr .7fr;gap:8vw;align-items:center;padding-top:5vh}.buy-copy .lead{font-size:clamp(24px,2vw,36px)}.price-card{border:1px solid rgba(255,255,255,.95);border-radius:32px;padding:30px;background:linear-gradient(150deg,rgba(255,255,255,.9),rgba(218,239,254,.76));backdrop-filter:blur(22px);box-shadow:0 30px 90px rgba(30,104,158,.2),inset 0 1px 0 #fff}.price-top{display:flex;justify-content:space-between;padding-bottom:24px;border-bottom:1px solid rgba(20,70,104,.12);font:600 9px system-ui;letter-spacing:.12em;color:#506675}.price-top b{color:#0f82cf}.price-value{padding:26px 0 18px;display:grid;grid-template-columns:auto 1fr;align-items:end}.price-value small{font:600 10px system-ui;letter-spacing:.13em;color:#667987;margin-bottom:16px}.price-value strong{font:400 clamp(74px,6vw,112px)/.85 "Italiana",serif;text-align:right}.price-value del{grid-column:1/3;text-align:right;color:#8a969e;font-size:14px;margin-top:12px}.price-card ul{list-style:none;padding:0;margin:16px 0 26px;border-top:1px solid rgba(20,70,104,.11)}.price-card li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid rgba(20,70,104,.09);font-size:13px}.price-card li span{font:500 9px system-ui;color:#82939e}.purchase-btn{height:64px;border-radius:16px;background:linear-gradient(95deg,#0d7dce,#0a97ff);color:white;display:flex;align-items:center;justify-content:space-between;padding:0 22px 0 26px;font-weight:600;box-shadow:inset 0 3px 4px rgba(255,255,255,.22),0 15px 34px rgba(0,117,215,.22)}.purchase-btn span{font-size:20px}.fine-print{font-size:10px!important;line-height:1.6!important;margin:13px 2px 0!important;color:#788993!important}footer{min-height:130px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto 2fr auto;align-items:center;gap:30px;padding:25px 7vw;background:#fff;font-size:11px;color:#66737c}.footer-brand{color:#13191d}.risk-note{text-align:center;max-width:700px;justify-self:center}.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}.reveal.in-view{opacity:1;transform:none}.hero .reveal:nth-child(1){transition-delay:.12s}.hero .reveal:nth-child(2){transition-delay:.22s}.hero .hero-title .reveal:nth-child(2){transition-delay:.28s}.hero .hero-title .reveal:nth-child(3){transition-delay:.34s}.hero .hero-title .reveal:nth-child(4){transition-delay:.4s}.hero .hero-sub{transition-delay:.5s}.hero .hero-actions{transition-delay:.62s}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scan{0%,100%{top:10%}50%{top:90%}}
@media (max-width:1180px){.nav{gap:24px}.hero-copy{width:48vw}.hero-title{font-size:clamp(58px,7vw,94px)}.hero-scrub{right:4vw}.display{font-size:clamp(62px,7.8vw,110px)}.control-layout{grid-template-columns:.75fr 1.25fr}}
@media (max-width:900px){:root{--header-h:76px}.site-header{grid-template-columns:1fr auto;padding:0 22px}.nav,.header-cta{display:none}.menu-btn{display:block}.site-header.open{height:auto;min-height:100svh;align-content:start;background:rgba(248,252,255,.96);backdrop-filter:blur(24px);padding-top:16px}.site-header.open .nav{display:flex;position:absolute;top:120px;left:22px;right:22px;flex-direction:column;gap:28px;font-size:18px}.site-header.open .header-cta{display:flex;position:absolute;top:360px;left:22px;right:22px}.hero{min-height:780px}.hero:after{background:linear-gradient(180deg,rgba(249,252,255,.97) 0%,rgba(249,252,255,.91) 30%,rgba(249,252,255,.60) 55%,rgba(249,252,255,.10) 82%,rgba(249,252,255,.02) 100%)}.hero-video{object-position:64% center}.hero-copy{width:auto;max-width:none;margin:0;padding:16vh 22px 0}.hero-title{font-size:clamp(54px,12.5vw,92px);line-height:.89}.hero-sub{margin-top:20px}.hero-scrub{right:22px;bottom:30px;width:180px}.scroll-cue{display:none}.vertical-label{display:none}.section{padding:110px 22px}.section-kicker{left:22px;top:34px}.display{font-size:clamp(56px,13vw,92px)}.emotion-grid,.edge-layout,.control-layout,.protect-head,.action-head,.buy-layout{grid-template-columns:1fr;gap:54px}.sticky-title{position:relative;top:auto}.emotion-story{padding-top:0}.signal-core{width:min(92vw,620px);margin:auto;order:2}.edge-copy{order:1}.panel-shell{transform:none}.protect-head,.action-head{align-items:start}.risk-axis{display:none}.risk-cards{grid-template-columns:1fr}.media-grid{grid-template-columns:1fr}.phone-card{max-width:380px}.buy-layout{padding-top:3vh}.price-card{max-width:600px;margin:auto;width:100%}footer{grid-template-columns:1fr;gap:12px;text-align:center}.risk-note{order:3}}
@media (max-width:560px){.hero{min-height:760px}.hero-video{object-position:66% center}.hero-copy{padding-top:13vh}.eyebrow{font-size:9px}.hero-title{font-size:clamp(50px,15vw,78px)}.hero-sub{font-size:14px}.hero-actions{gap:18px;align-items:flex-start;flex-direction:column}.pill-primary{height:54px}.hero-scrub{width:150px;bottom:24px}.hero-scrub small{display:none}.section{padding-top:96px;padding-bottom:96px}.display{font-size:clamp(50px,14vw,76px)}.lead{font-size:20px}.cost-row{grid-template-columns:1fr 35px .7fr}.cost-row i{display:none}.cost-row em{font-size:8px}.control-layout{gap:42px}.panel-shell{margin:0 -10px}.panel-screen{grid-template-columns:1fr;padding:14px}.panel-metric,.range-metric,.panel-chart{grid-column:1}.panel-chart{height:140px}.panel-top,.panel-bottom{padding:0 14px}.risk-track{margin-top:60px}.media-grid{margin-top:50px}.proof-meta{font-size:7px}.price-card{padding:20px;border-radius:24px}.price-value strong{font-size:78px}.price-top{gap:10px}.buy{padding-bottom:110px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.core-ring,.scan-line{animation:none}.hero-video-wrap,.hero-copy{transform:none!important}.hero-scrub{display:none}}

/* =========================================================
   FIGMA HERO — rebuilt from XAU1(4).fig separated layers
   ========================================================= */
:root{--hero-blue:#1597ee;--hero-navy:#08172d}
.site-header{height:86px;padding:0 4.7vw;grid-template-columns:1fr auto 1fr;z-index:120}
.site-header.scrolled{background:rgba(255,255,255,.74);box-shadow:0 1px 0 rgba(31,72,110,.07)}
.brand-logo{width:clamp(132px,8.9vw,172px)}
.nav{gap:clamp(26px,3.1vw,58px);font-size:10px;letter-spacing:.16em;font-weight:600;color:#152235}
.header-cta{min-width:166px;height:38px;border-radius:999px;font-size:11px;box-shadow:inset 0 2px 8px rgba(255,255,255,.95),0 7px 24px rgba(59,128,178,.12);background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(211,240,255,.8))}
.menu-btn b{display:none}

.figma-hero{height:100svh;min-height:720px;background:linear-gradient(135deg,#fff 0%,#f9fcff 52%,#eef7fd 100%);overflow:hidden;isolation:isolate;--hero-scroll:0;--scroll-2:0vh;--scroll-4:0vh;--scroll-5:0vh;--scroll-8:0vh;--scroll-9:0vh;--scroll-13:0vh;--scroll-15:0vh;--scroll-neg2:0vh;--scroll-neg4:0vh;--scroll-neg5:0vh;--scroll-rot:0deg;--engine-scale:1;--video-x:0px;--video-y:0px;--video-scroll-y:0px;--copy-x:0px;--copy-y:0px;--copy-scroll-y:0px}
.figma-hero:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 67% 42%,rgba(120,197,250,.16),transparent 27%),linear-gradient(100deg,rgba(255,255,255,.98) 0 27%,rgba(255,255,255,.72) 45%,rgba(235,247,255,.42) 100%)}
.figma-hero:after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 18% 78%,rgba(255,255,255,.18)),radial-gradient(ellipse at 64% 48%,transparent 0 34%,rgba(255,255,255,.18) 72%)}
.hero-art{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-mobile-bg{display:none}
.hero-mountain{position:absolute;display:block;pointer-events:none;user-select:none;will-change:transform;filter:saturate(.92) contrast(.98)}
.hero-mountain-band{left:-1vw;bottom:-1.5vh;width:102vw;height:29vh;object-fit:cover;object-position:center bottom;opacity:.72;transform:translate3d(var(--copy-x),var(--scroll-9),0) scale(1.02)}
.hero-mountain-left{left:-8vw;bottom:-25vh;width:67vw;opacity:.92;transform:translate3d(var(--copy-x),var(--scroll-13),0)}
.hero-mountain-right{right:-20vw;bottom:-30vh;width:57vw;opacity:.62;transform:scaleX(-1) translate3d(var(--copy-x),var(--scroll-15),0)}
.hero-engine-wrap{position:absolute;z-index:4;left:35.3vw;top:-12vh;width:min(62vw,1190px);aspect-ratio:1192/1282;pointer-events:none;transform-style:preserve-3d;will-change:transform,filter;transform:translate3d(var(--video-x),calc(var(--video-y) + var(--video-scroll-y) + var(--scroll-neg4)),0) rotateZ(var(--scroll-rot)) scale(var(--engine-scale));filter:drop-shadow(0 35px 40px rgba(67,127,169,.06))}
.hero-engine{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;user-select:none;opacity:.99;animation:engineLoad 1.35s cubic-bezier(.16,.8,.22,1) both}
.engine-halo{position:absolute;left:44%;top:49%;border:1px solid rgba(34,153,233,.20);border-radius:50%;transform:translate(-50%,-50%);opacity:.55;mix-blend-mode:multiply;animation:haloSpin 15s linear infinite}
.halo-a{width:48%;aspect-ratio:1;box-shadow:0 0 55px rgba(30,151,232,.07)}
.halo-b{width:64%;aspect-ratio:1;border-style:dashed;animation-direction:reverse;animation-duration:24s;opacity:.23}
.hero-webgl{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;opacity:.42;mix-blend-mode:multiply}
.hero-heading{position:absolute;z-index:7;left:6.6vw;top:21.7vh;width:35vw;will-change:transform;transform:translate3d(var(--copy-x),calc(var(--copy-y) + var(--copy-scroll-y) + var(--scroll-neg5)),0)}
.hero-kicker{font:600 9px/1.2 system-ui,sans-serif;letter-spacing:.27em;color:#7a8896;margin-bottom:19px;opacity:.72}
.hero-title{font-size:clamp(70px,6.15vw,118px);line-height:.81;letter-spacing:.012em;color:#05080b;text-shadow:0 1px 0 rgba(255,255,255,.75)}
.hero-title .line{display:block;white-space:nowrap}
.hero-title .blue{background:linear-gradient(180deg,#78c4fb 0%,#239fe8 35%,#006fbd 88%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-meta{position:absolute;z-index:9;left:6.8vw;top:57.1vh;width:31vw;min-width:420px;will-change:transform;transform:translate3d(var(--copy-x),calc(var(--copy-y) + var(--scroll-neg2)),0)}
.hero-sub{font-size:clamp(12px,.82vw,15px);line-height:1.65;color:#47535f;margin:0 0 25px;letter-spacing:.008em}.hero-sub strong{font-weight:700;color:#111820}
.hero-actions{display:flex;align-items:center;gap:26px}.figma-hero .pill-primary{height:51px;min-width:178px;padding:0 22px;border-radius:13px;font-size:12px;gap:18px;background:linear-gradient(100deg,#1c9fe6,#0879d5);box-shadow:inset 0 3px 5px rgba(255,255,255,.27),0 13px 30px rgba(0,127,213,.20)}
.figma-hero .pill-primary span{font-size:10px}.figma-hero .text-link{font-size:12px;text-decoration:none;border-bottom:1px solid #7f8991;padding-bottom:3px;white-space:nowrap}
.hero-discover{position:absolute;z-index:10;left:50.1%;bottom:2.4vh;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:9px;font:600 8px/1 system-ui,sans-serif;letter-spacing:.22em;color:#65717c}.hero-discover i{display:block;width:1px;height:21px;background:#23313e;position:relative}.hero-discover i:after{content:"";position:absolute;left:-3px;bottom:0;width:6px;height:6px;border-right:1px solid #23313e;border-bottom:1px solid #23313e;transform:rotate(45deg)}
.figma-hero .vertical-label{right:1.7vw;top:47%;font-size:8px;opacity:.62}

/* cinematic entrance */
.hero-heading .reveal{transform:translateY(42px);filter:blur(8px)}
.hero-heading .reveal.in-view{transform:none;filter:blur(0)}
.hero-title .reveal:nth-child(1){transition-delay:.08s}.hero-title .reveal:nth-child(2){transition-delay:.17s}.hero-title .reveal:nth-child(3){transition-delay:.26s}.hero-meta.reveal{transition-delay:.42s}
@keyframes engineLoad{0%{opacity:0;transform:translate3d(75px,25px,0) scale(.92) rotate(-3deg);filter:blur(12px)}100%{opacity:.99;transform:none;filter:blur(0)}}
@keyframes haloSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

@media (max-width:1180px) and (min-width:901px){.hero-heading{left:5.6vw;width:39vw}.hero-title{font-size:clamp(68px,6.7vw,92px)}.hero-meta{left:5.8vw;min-width:360px;width:34vw}.hero-engine-wrap{left:34vw;width:66vw}.hero-mountain-left{width:72vw}.nav{gap:24px}}

@media (max-width:900px){
  :root{--header-h:68px}
  .site-header{height:68px;padding:0 20px;grid-template-columns:1fr auto;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}.brand-logo{width:93px}.nav,.header-cta{display:none}.menu-btn{display:flex;width:auto;height:30px;min-width:58px;padding:0 13px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.95);border-radius:999px;background:linear-gradient(180deg,#fff,rgba(211,240,255,.82));box-shadow:0 7px 18px rgba(52,119,165,.10)}.menu-btn b{display:block;font:700 8px/1 system-ui,sans-serif;letter-spacing:.13em;color:#263645}.menu-btn span{display:none}.site-header.open{height:100svh;padding-top:0;background:rgba(250,253,255,.97)!important;backdrop-filter:blur(20px)!important}.site-header.open .nav{top:105px}.site-header.open .header-cta{top:350px}
  .figma-hero{height:100svh;min-height:760px;background:#f7fbfe}.figma-hero:before{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(249,252,255,.20) 52%,rgba(255,255,255,.02))}.figma-hero:after{background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 32% 88%,rgba(255,255,255,.12))}
  .hero-mobile-bg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;opacity:.88;transform:translate3d(0,var(--scroll-8),0) scale(1.035)}
  .hero-mountain{display:none}
  .hero-heading{left:5vw;right:5vw;top:9.3vh;width:auto;text-align:center;transform:translate3d(var(--copy-x),calc(var(--copy-y) + var(--scroll-neg4)),0)}
  .hero-kicker{display:none}.hero-title{font-size:clamp(57px,15.1vw,88px);line-height:.78;letter-spacing:.005em}.hero-title .line{white-space:nowrap}
  .hero-engine-wrap{left:50%;top:18.5vh;width:min(126vw,680px);transform:translate3d(calc(-50% + var(--video-x)),calc(var(--video-y) + var(--scroll-neg2)),0) rotateZ(var(--scroll-rot)) scale(var(--engine-scale));filter:none}
  .engine-halo{display:none}.hero-webgl{opacity:.30}
  .hero-meta{left:8%;top:66.5vh;width:84%;min-width:0;text-align:center;transform:translate3d(var(--copy-x),calc(var(--copy-y) + var(--scroll-neg2)),0)}.hero-sub{font-size:12px;line-height:1.7;margin-bottom:20px;text-shadow:0 1px 10px rgba(255,255,255,.95)}.hero-actions{flex-direction:column;gap:14px;align-items:center}.figma-hero .pill-primary{width:min(66vw,280px);height:48px;border-radius:10px}.figma-hero .text-link{font-size:11px}
  .hero-discover{bottom:2.0vh;font-size:7px;gap:8px}.hero-discover i{height:18px}.figma-hero .vertical-label{display:none}
}
@media (max-width:560px){.figma-hero{min-height:700px}.hero-heading{top:9.7vh}.hero-title{font-size:clamp(52px,15.8vw,76px)}.hero-engine-wrap{top:18.8vh;width:132vw}.hero-meta{top:66vh;width:88%;left:6%}.hero-sub{font-size:11.5px}.figma-hero .pill-primary{width:68vw}.hero-discover{bottom:1.7vh}}
@media (max-height:760px) and (max-width:900px){.hero-heading{top:8.7vh}.hero-engine-wrap{top:16vh;width:118vw}.hero-meta{top:65vh}.hero-discover{bottom:1.4vh}}
@media (prefers-reduced-motion:reduce){.hero-engine{animation:none}.engine-halo{animation:none}.hero-engine-wrap,.hero-heading,.hero-meta,.hero-mobile-bg,.hero-mountain{transform:none!important}.hero-webgl{display:none}}


/* =========================================================
   HERO V2 — CI SCALE + IMMERSIVE 3D-LIKE SCROLL TRANSITION
   ========================================================= */
.site-header{
  height:94px;
  padding:0 5.35vw;
}
.brand-logo{width:clamp(154px,9.6vw,188px)}
.nav{
  gap:clamp(32px,3.35vw,64px);
  font-size:clamp(11px,.68vw,13px);
  letter-spacing:.135em;
  font-weight:650;
}
.header-cta{
  min-width:184px;
  height:44px;
  padding:0 25px;
  font-size:12.5px;
  font-weight:650;
}

.figma-hero{
  --hero-exit:0;
  --hero-mx:0;
  --hero-my:0;
  --hero-perspective-x:0deg;
  --hero-perspective-y:0deg;
}
.hero-heading{
  left:5.7vw;
  top:18.8vh;
  width:40vw;
  transform-origin:18% 52%;
  transform:perspective(1300px)
    translate3d(var(--copy-x),calc(var(--copy-y) + var(--copy-scroll-y) + var(--scroll-neg5)),0)
    rotateX(calc(var(--hero-exit) * -4deg))
    rotateY(calc(var(--hero-mx) * 1.1deg))
    scale(calc(1 - var(--hero-exit) * .035));
  filter:blur(calc(var(--hero-exit) * 1.2px));
}
.hero-kicker{
  font-size:clamp(10px,.62vw,12px);
  letter-spacing:.29em;
  margin-bottom:22px;
  color:#657483;
  opacity:.86;
}
.hero-title{
  font-size:clamp(82px,7.25vw,142px);
  line-height:.805;
  letter-spacing:.008em;
}
.hero-meta{
  left:5.95vw;
  top:59.3vh;
  width:min(36vw,610px);
  min-width:460px;
  transform-origin:left center;
  transform:perspective(1200px)
    translate3d(var(--copy-x),calc(var(--copy-y) + var(--scroll-neg2)),0)
    rotateY(calc(var(--hero-mx) * .75deg))
    scale(calc(1 - var(--hero-exit) * .025));
  opacity:calc(1 - var(--hero-exit) * .48);
}
.hero-sub{
  font-size:clamp(15px,1vw,19px);
  line-height:1.72;
  margin-bottom:30px;
  letter-spacing:-.008em;
}
.hero-actions{gap:32px}
.figma-hero .pill-primary{
  height:58px;
  min-width:204px;
  padding:0 27px;
  border-radius:15px;
  font-size:13.5px;
  gap:22px;
}
.figma-hero .text-link{font-size:13.5px;padding-bottom:4px}
.hero-discover{font-size:9px;bottom:2.6vh}
.figma-hero .vertical-label{font-size:9px}

.hero-engine-wrap{
  left:37vw;
  top:-13.5vh;
  width:min(63vw,1210px);
  transform-origin:49% 49%;
  transform:perspective(1400px)
    translate3d(var(--video-x),calc(var(--video-y) + var(--video-scroll-y) + var(--scroll-neg4)),calc(var(--hero-exit) * -220px))
    rotateX(calc(var(--hero-my) * -2.5deg))
    rotateY(calc(var(--hero-mx) * 3.2deg))
    rotateZ(calc(var(--scroll-rot) + var(--hero-mx) * .35deg))
    scale(calc(var(--engine-scale) - var(--hero-exit) * .055));
  filter:drop-shadow(0 36px 48px rgba(41,116,166,.08)) blur(calc(var(--hero-exit) * .25px));
}
.hero-engine{filter:contrast(1.015) saturate(1.01)}
.engine-depth-field{
  position:absolute;inset:21% 13% 17% 18%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(72,180,255,.22),rgba(36,143,224,.065) 33%,transparent 69%);
  filter:blur(15px);opacity:.78;transform:translateZ(-50px) scale(1.1);
  animation:depthPulse 5.5s ease-in-out infinite alternate;
}
.engine-core-glow{
  position:absolute;z-index:4;left:44.2%;top:49.3%;width:12%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%) translateZ(70px);
  background:radial-gradient(circle,rgba(255,255,255,.96) 0 7%,rgba(83,193,255,.35) 15%,rgba(12,135,229,.11) 42%,transparent 70%);
  mix-blend-mode:screen;filter:blur(.2px);opacity:.78;
  box-shadow:0 0 26px rgba(59,177,255,.21),0 0 80px rgba(29,145,229,.14);
  animation:coreBreathe 2.8s ease-in-out infinite;
}
.engine-orbit{position:absolute;z-index:5;left:44%;top:49%;border-radius:50%;pointer-events:none;transform-style:preserve-3d}
.engine-orbit:before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(37,145,217,.13);box-shadow:inset 0 0 32px rgba(36,159,237,.025)}
.orbit-a{width:53%;aspect-ratio:1;transform:translate(-50%,-50%) rotateX(67deg) rotateZ(8deg);animation:orbitSpinA 18s linear infinite}
.orbit-b{width:66%;aspect-ratio:1;transform:translate(-50%,-50%) rotateX(72deg) rotateY(17deg);animation:orbitSpinB 26s linear infinite reverse;opacity:.65}
.engine-orbit i{position:absolute;width:5px;height:5px;border-radius:50%;background:#63c5ff;box-shadow:0 0 9px #45b8fb,0 0 22px rgba(60,171,238,.42)}
.orbit-a i:nth-child(1){left:10%;top:23%}.orbit-a i:nth-child(2){right:5%;top:48%}.orbit-a i:nth-child(3){left:46%;bottom:-2%}
.orbit-b i:nth-child(1){left:2%;top:54%}.orbit-b i:nth-child(2){right:18%;top:10%}

.hero-spatial-fx{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;perspective:1200px}
.spatial-grid{
  position:absolute;right:-8vw;top:8vh;width:71vw;height:74vh;
  background-image:linear-gradient(rgba(48,140,202,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(48,140,202,.075) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at 52% 47%,#000 0 23%,rgba(0,0,0,.52) 46%,transparent 73%);
  -webkit-mask-image:radial-gradient(ellipse at 52% 47%,#000 0 23%,rgba(0,0,0,.52) 46%,transparent 73%);
  transform:rotateX(64deg) rotateZ(-7deg) translate3d(calc(var(--hero-mx) * 6px),calc(var(--hero-my) * 5px),0) scale(calc(1 + var(--hero-exit) * .11));
  transform-origin:center;opacity:calc(.36 + var(--hero-exit) * .18);
}
.spatial-sweep{
  position:absolute;right:3vw;top:7vh;width:3px;height:78vh;
  background:linear-gradient(180deg,transparent,rgba(101,201,255,.07) 18%,rgba(31,152,229,.38) 50%,rgba(255,255,255,.03) 72%,transparent);
  box-shadow:0 0 30px rgba(51,161,231,.16);opacity:.55;
  transform:translateX(calc(var(--hero-scroll) * -27vw)) skewX(-12deg);
}
.spatial-vignette{position:absolute;inset:0;background:radial-gradient(circle at 66% 45%,transparent 0 26%,rgba(223,243,255,.05) 42%,transparent 64%);mix-blend-mode:multiply}
.hero-webgl{opacity:calc(.52 + var(--hero-exit) * .15);mix-blend-mode:multiply}

/* Viewport-fixed transition between Hero and section 02 */
.hero-exit-transition{
  --tp:0;--to:0;
  position:fixed;inset:0;z-index:88;pointer-events:none;overflow:hidden;
  opacity:var(--to);visibility:hidden;
  transition:visibility 0s linear .2s;
}
.hero-exit-transition.active{visibility:visible;transition:none}
.exit-bg{position:absolute;inset:0;background:linear-gradient(105deg,rgba(245,251,255,.04),rgba(226,244,255,.45) 43%,rgba(255,255,255,.72) 62%,rgba(250,253,255,.18));backdrop-filter:blur(calc(var(--tp) * 8px));transform:translateX(calc((1 - var(--tp)) * 105%));will-change:transform}
.exit-grid{position:absolute;inset:-18%;background-image:linear-gradient(rgba(10,116,189,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(10,116,189,.075) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(circle at 66% 51%,#000,transparent 65%);-webkit-mask-image:radial-gradient(circle at 66% 51%,#000,transparent 65%);transform:perspective(900px) rotateX(64deg) rotateZ(-10deg) scale(calc(.72 + var(--tp) * .45));opacity:calc(var(--tp) * .7)}
.exit-beam{position:absolute;top:-15%;left:calc(-20% + var(--tp) * 115%);width:8vw;height:135%;transform:skewX(-13deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),rgba(103,199,255,.34),rgba(255,255,255,.72),rgba(65,164,229,.15),transparent);filter:blur(8px);mix-blend-mode:screen}
.exit-ring{position:absolute;left:66%;top:50%;border:1px solid rgba(18,136,217,.2);border-radius:50%;transform:translate(-50%,-50%) scale(calc(.25 + var(--tp) * 2.6));opacity:calc((1 - var(--tp)) * .6 + .12)}
.er1{width:20vmin;aspect-ratio:1}.er2{width:31vmin;aspect-ratio:1;border-style:dashed;transform:translate(-50%,-50%) scale(calc(.12 + var(--tp) * 2.05)) rotate(calc(var(--tp) * 40deg))}
.exit-copy{position:absolute;left:7vw;bottom:7vh;display:grid;grid-template-columns:auto auto;column-gap:18px;align-items:end;color:#48647a;transform:translateY(calc((1 - var(--tp)) * 24px));opacity:calc(var(--tp) * .9)}
.exit-copy small{grid-column:1/-1;font:650 9px/1 system-ui,sans-serif;letter-spacing:.24em;margin-bottom:10px}.exit-copy strong{font:400 clamp(46px,4.5vw,82px)/.8 "Italiana",serif;color:#0b75ba}.exit-copy span{font:650 11px/1 system-ui,sans-serif;letter-spacing:.2em;padding-bottom:5px}

.emotion{--entry:0}
.emotion > .section-kicker,.emotion > .emotion-grid,.emotion > .giant-watermark{
  transform:translate3d(0,calc((1 - var(--entry)) * 28px),0);
  opacity:calc(.65 + var(--entry) * .35);
}
.emotion > .section-kicker{transition:none}
.emotion:after{content:"";position:absolute;z-index:20;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(234,247,255,.72),rgba(255,255,255,.98) 50%,rgba(234,247,255,.32));transform:translateX(calc(var(--entry) * 112%));opacity:calc(1 - var(--entry));will-change:transform,opacity}

@keyframes depthPulse{from{transform:translateZ(-50px) scale(1.02);opacity:.62}to{transform:translateZ(-50px) scale(1.16);opacity:.88}}
@keyframes coreBreathe{0%,100%{transform:translate(-50%,-50%) translateZ(70px) scale(.88);opacity:.53}50%{transform:translate(-50%,-50%) translateZ(70px) scale(1.18);opacity:.92}}
@keyframes orbitSpinA{to{transform:translate(-50%,-50%) rotateX(67deg) rotateZ(368deg)}}
@keyframes orbitSpinB{to{transform:translate(-50%,-50%) rotateX(72deg) rotateY(17deg) rotateZ(360deg)}}

@media (max-width:1180px) and (min-width:901px){
  .site-header{padding:0 4vw}.brand-logo{width:148px}.nav{font-size:11px;gap:25px}.header-cta{min-width:166px}
  .hero-heading{left:4.7vw;top:19.5vh;width:43vw}.hero-title{font-size:clamp(74px,7.15vw,100px)}
  .hero-meta{left:4.9vw;top:59vh;min-width:410px;width:38vw}.hero-sub{font-size:15px}
  .hero-engine-wrap{left:36vw;width:65vw}
}
@media (max-width:900px){
  .site-header{height:74px;padding:0 20px}.brand-logo{width:112px}.menu-btn{height:36px;min-width:68px;padding:0 16px}.menu-btn b{font-size:9px}
  .hero-heading{top:8.4vh;left:4vw;right:4vw}.hero-title{font-size:clamp(62px,16.4vw,96px);line-height:.775}
  .hero-engine-wrap{left:50%;top:18vh;width:min(132vw,710px);transform:perspective(1100px) translate3d(calc(-50% + var(--video-x)),calc(var(--video-y) + var(--scroll-neg2)),calc(var(--hero-exit) * -140px)) rotateY(calc(var(--hero-mx) * 2deg)) rotateZ(var(--scroll-rot)) scale(calc(var(--engine-scale) - var(--hero-exit) * .035))}
  .hero-meta{left:6%;top:66.1vh;width:88%;min-width:0}.hero-sub{font-size:clamp(13px,3.25vw,16px);line-height:1.7;margin-bottom:21px}.figma-hero .pill-primary{width:min(70vw,310px);height:54px;font-size:13px}.figma-hero .text-link{font-size:12.5px}
  .spatial-grid{right:-40vw;top:14vh;width:145vw;height:60vh;background-size:38px 38px;opacity:.25}.spatial-sweep{display:none}
  .engine-orbit{display:none}.engine-core-glow{opacity:.56}.hero-webgl{opacity:.34}
  .exit-copy{left:22px;bottom:5vh}.exit-grid{background-size:42px 42px}.exit-ring{left:57%}
}
@media (max-width:560px){
  .hero-heading{top:8.7vh}.hero-title{font-size:clamp(58px,17vw,82px)}
  .hero-engine-wrap{top:18.3vh;width:137vw}.hero-meta{top:65.5vh;left:5%;width:90%}.hero-sub{font-size:13px}
  .figma-hero .pill-primary{width:72vw}.hero-discover{font-size:7.5px}
}
@media (max-height:760px) and (max-width:900px){
  .hero-heading{top:7.8vh}.hero-title{font-size:clamp(54px,14.8vw,76px)}.hero-engine-wrap{top:15.7vh;width:121vw}.hero-meta{top:64.2vh}
}
@media (prefers-reduced-motion:reduce){
  .engine-depth-field,.engine-core-glow,.engine-orbit{animation:none!important}.hero-exit-transition{display:none!important}.emotion:after{display:none}.emotion > .section-kicker,.emotion > .emotion-grid,.emotion > .giant-watermark{transform:none;opacity:1}
}

/* =========================================================
   V3 — HERO REACTIVE LIGHT / BIG KV FX / MOBILE + NAV FIX
   ========================================================= */
html{scroll-padding-top:104px}
section[id]{scroll-margin-top:96px}

/* Keep TRADING in the XAU LABS CI blue while the cursor creates a moving light hotspot. */
.hero-title .blue.trading-reactive{
  --shine-x:50%;
  --shine-y:50%;
  position:relative;
  color:transparent;
  background:
    radial-gradient(circle at var(--shine-x) var(--shine-y),
      #ffffff 0 3%,
      #bfeaff 7%,
      #5bc5ff 13%,
      rgba(7,138,245,.98) 24%,
      #078af5 42%,
      #078af5 100%);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 0 0 rgba(30,155,238,0));
  transition:filter .18s ease;
}
.hero-title .blue.trading-reactive.is-lit{
  filter:drop-shadow(0 0 10px rgba(71,188,255,.22)) drop-shadow(0 0 28px rgba(24,145,231,.12));
}
.hero-title .blue.trading-reactive:after{
  content:"";
  position:absolute;
  left:var(--shine-x);top:var(--shine-y);
  width:clamp(90px,8vw,160px);height:clamp(90px,8vw,160px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(123,211,255,.18),rgba(38,158,234,.055) 38%,transparent 70%);
  filter:blur(9px);
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.86;
}

/* Bigger immersive FX around the Hero KV. */
.kv-mega-ring,.kv-light-arc,.kv-laser-field,.kv-mouse-flare{position:absolute;pointer-events:none;will-change:transform,opacity}
.kv-mega-ring{
  left:66.5%;top:45%;border-radius:50%;
  transform:translate(-50%,-50%) rotateX(68deg) rotateZ(var(--ring-rot,0deg));
  border:1px solid rgba(26,149,231,.20);
  box-shadow:0 0 55px rgba(53,171,240,.075),inset 0 0 70px rgba(42,160,232,.035);
  mix-blend-mode:multiply;
}
.kv-mega-ring:before,.kv-mega-ring:after{content:"";position:absolute;border-radius:50%;inset:6%;border:1px dashed rgba(20,136,216,.13)}
.kv-mega-ring:after{inset:18%;border-style:solid;border-color:rgba(83,191,252,.15)}
.ring-01{width:76vw;aspect-ratio:1;--ring-rot:8deg;animation:megaRingA 34s linear infinite;opacity:.72}
.ring-02{width:58vw;aspect-ratio:1;--ring-rot:-11deg;animation:megaRingB 23s linear infinite reverse;opacity:.58}
.ring-03{width:42vw;aspect-ratio:1;border-style:dashed;--ring-rot:18deg;animation:megaRingA 17s linear infinite;opacity:.48}
.kv-light-arc{left:66%;top:43%;border-radius:50%;transform:translate(-50%,-50%) rotate(var(--arc-r,0deg));filter:blur(.2px);mix-blend-mode:screen}
.kv-light-arc:before{content:"";position:absolute;inset:0;border-radius:inherit;border-top:2px solid rgba(119,215,255,.72);border-right:1px solid rgba(255,255,255,.55);border-bottom:1px solid transparent;border-left:1px solid transparent;box-shadow:0 -3px 30px rgba(63,178,244,.28)}
.arc-01{width:64vw;aspect-ratio:1;--arc-r:18deg;animation:arcSpin 14s linear infinite;opacity:.72}
.arc-02{width:48vw;aspect-ratio:1;--arc-r:-29deg;animation:arcSpin 10s linear infinite reverse;opacity:.54}
.kv-laser-field{
  right:-9vw;top:5vh;width:65vw;height:88vh;
  background:repeating-linear-gradient(101deg,transparent 0 46px,rgba(56,168,238,.10) 47px,transparent 48px 92px);
  mask-image:radial-gradient(ellipse at 52% 48%,#000 0 19%,rgba(0,0,0,.72) 38%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at 52% 48%,#000 0 19%,rgba(0,0,0,.72) 38%,transparent 72%);
  transform:perspective(1100px) rotateX(62deg) rotateZ(-9deg) translate3d(calc(var(--hero-mx) * 18px),calc(var(--hero-my) * 12px),0);
  opacity:.52;
}
.kv-mouse-flare{
  left:calc(50% + var(--hero-mx) * 24%);top:calc(44% + var(--hero-my) * 18%);
  width:32vw;height:32vw;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(122,215,255,.22),rgba(47,161,231,.08) 25%,transparent 68%);
  filter:blur(18px);mix-blend-mode:screen;opacity:calc(.62 + var(--hero-exit) * .18);
}
@keyframes megaRingA{to{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(calc(var(--ring-rot) + 360deg))}}
@keyframes megaRingB{to{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(calc(var(--ring-rot) + 360deg))}}
@keyframes arcSpin{to{transform:translate(-50%,-50%) rotate(calc(var(--arc-r) + 360deg))}}

/* Section 7 notice + manual CTA */
.broker-spread-note{margin:18px 0 20px;padding:17px 18px 16px;border:1px solid rgba(11,126,206,.17);border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(214,239,255,.58));box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.broker-spread-note span{display:block;font:700 8px/1 system-ui,sans-serif;letter-spacing:.18em;color:#0a83d5;margin-bottom:8px}
.broker-spread-note strong{display:block;font-size:13.5px;color:#17232d;margin-bottom:5px}
.broker-spread-note p{margin:0;font-size:11.5px;line-height:1.55;color:#5a6b77}
.broker-spread-note b{color:#087fce;font-size:13px}
.price-actions{display:grid;grid-template-columns:1fr .72fr;gap:10px}
.price-actions .purchase-btn{min-width:0}
.manual-btn{height:64px;border-radius:16px;border:1px solid rgba(9,124,206,.22);background:rgba(255,255,255,.72);display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:12px;font-weight:650;color:#096fae;box-shadow:inset 0 1px 0 #fff,0 10px 22px rgba(35,114,165,.08);transition:transform .22s ease,background .22s ease,border-color .22s ease}
.manual-btn:hover{transform:translateY(-2px);background:#fff;border-color:rgba(9,124,206,.38)}
.manual-btn span{font-size:17px}

@media (max-width:900px){
  html{scroll-padding-top:82px}section[id]{scroll-margin-top:76px}
  .hero{min-height:880px}
  .hero-heading{text-align:center}
  .hero-title{text-align:center}
  .hero-meta{top:72.5vh;text-align:center}
  .hero-sub{width:min(88vw,430px);margin-left:auto;margin-right:auto;text-align:center}
  .hero-actions{align-items:center;justify-content:center}
  .hero-engine-wrap{top:17.2vh;width:min(126vw,680px)}
  .kv-mega-ring{left:52%;top:42%}.ring-01{width:142vw}.ring-02{width:112vw}.ring-03{width:86vw}
  .kv-light-arc{left:52%;top:42%}.arc-01{width:126vw}.arc-02{width:98vw}
  .kv-laser-field{right:-45vw;top:12vh;width:150vw;height:64vh;opacity:.32}
  .kv-mouse-flare{width:72vw;height:72vw;left:50%;top:42%;opacity:.42}
  .price-actions{grid-template-columns:1fr}.manual-btn{height:58px;padding:0 20px}
}
@media (max-width:560px){
  .hero{min-height:900px}
  .hero-heading{top:8.5vh;left:3.5vw;right:3.5vw}
  .hero-title{font-size:clamp(56px,16.6vw,80px)}
  .hero-engine-wrap{top:17.6vh;width:128vw}
  .hero-meta{top:73.8vh;left:5%;width:90%}
  .hero-sub{font-size:13px;line-height:1.62;margin-bottom:18px}
  .hero-actions{gap:12px}
  .figma-hero .pill-primary{height:52px}
  .hero-discover{bottom:1.2vh}
  .broker-spread-note{padding:15px 15px 14px}.broker-spread-note strong{font-size:13px}.broker-spread-note p{font-size:11px}
}
@media (max-height:760px) and (max-width:900px){
  .hero{min-height:880px}
  .hero-heading{top:7.7vh}.hero-engine-wrap{top:15.8vh;width:118vw}.hero-meta{top:71.5vh}
}
@media (prefers-reduced-motion:reduce){
  .kv-mega-ring,.kv-light-arc{animation:none!important}.kv-mouse-flare{display:none}.hero-title .blue.trading-reactive:after{display:none}
}

/* Mobile composition refinement: reserve a clear band below the KV for copy + CTAs. */
@media (max-width:900px){
  .hero{height:100svh;min-height:780px}
  .hero-engine-wrap{top:16.5vh;width:min(112vw,620px)}
  .hero-meta{top:72.5vh}
  .hero-sub{text-align:center}
}
@media (max-width:560px){
  .hero{min-height:760px}
  .hero-engine-wrap{top:16.8vh;width:112vw}
  .hero-meta{top:73.5vh}
}
@media (max-height:760px) and (max-width:900px){
  .hero{min-height:760px}
  .hero-heading{top:7.4vh}
  .hero-engine-wrap{top:14.5vh;width:102vw}
  .hero-meta{top:70.5vh}
}

/* =========================================================
   V4 — SOLID CI TRADING / RED SPREAD WARNING / FLUID HERO KV
   ========================================================= */

/* TRADING must stay exactly the requested CI blue — no white hotspot, haze or glow. */
.hero-title .blue.trading-reactive,
.hero-title .blue.trading-reactive.is-lit{
  color:#0A7BF0 !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:#0A7BF0 !important;
  filter:none !important;
  text-shadow:none !important;
}
.hero-title .blue.trading-reactive::after{
  content:none !important;
  display:none !important;
}

/* Section 07: make the broker/spread requirement unmistakably red. */
.broker-spread-note strong{
  color:#D71920 !important;
}
.broker-spread-note b{
  color:#D71920 !important;
}

/*
   Desktop/tablet landscape Hero KV:
   center the key visual vertically instead of pinning it to a negative top value.
   Size is constrained by BOTH viewport width and height so resizing the browser
   does not leave the graphic stuck at the top or oversized on short windows.
*/
@media (min-width:901px){
  .hero-engine-wrap{
    top:50% !important;
    left:clamp(34vw,37vw,39vw) !important;
    width:min(63vw,118vh,1210px) !important;
    transform:perspective(1400px)
      translate3d(
        var(--video-x),
        calc(-50% + var(--video-y) + var(--video-scroll-y) + var(--scroll-neg4)),
        calc(var(--hero-exit) * -220px)
      )
      rotateX(calc(var(--hero-my) * -2.5deg))
      rotateY(calc(var(--hero-mx) * 3.2deg))
      rotateZ(calc(var(--scroll-rot) + var(--hero-mx) * .35deg))
      scale(calc(var(--engine-scale) - var(--hero-exit) * .055)) !important;
  }

  /* Keep the large decorative FX bound to the KV area as the viewport changes. */
  .kv-mega-ring,.kv-light-arc{
    left:66% !important;
    top:50% !important;
  }
  .spatial-grid{
    height:min(74vh,760px) !important;
    transform-origin:center center;
  }
}

/* Mid-size desktop: pull the composition inward and scale from available height. */
@media (min-width:901px) and (max-width:1280px){
  .hero-engine-wrap{
    left:37vw !important;
    width:min(64vw,112vh,900px) !important;
  }
  .hero-heading{left:4.8vw;width:42vw}
  .hero-meta{left:5vw;width:38vw;min-width:350px}
}

/* Short desktop/laptop windows: preserve breathing room instead of cropping the KV at top. */
@media (min-width:901px) and (max-height:760px){
  .figma-hero{min-height:640px}
  .hero-engine-wrap{
    width:min(61vw,108vh,860px) !important;
  }
  .hero-heading{top:16.5vh}
  .hero-meta{top:58vh}
  .kv-mega-ring,.kv-light-arc{top:49% !important}
}

/* Very wide but shallow browser windows: cap the artwork by height first. */
@media (min-width:1200px) and (max-aspect-ratio:16/9){
  .hero-engine-wrap{width:min(63vw,116vh,1210px) !important}
}
@media (min-width:1200px) and (min-aspect-ratio:2/1){
  .hero-engine-wrap{width:min(56vw,108vh,1080px) !important}
  .hero-heading{top:17vh}
  .hero-meta{top:57vh}
}

/* =========================================================
   V5 — CLEAN SCROLL / LOOPING TRADING LIGHT / IMMERSIVE MENU
   ========================================================= */

/* Remove the cyan bars/veils that cross page content during scroll. */
.spatial-sweep,
.exit-beam,
.emotion::after{
  display:none !important;
}
.exit-bg{
  background:linear-gradient(105deg,rgba(255,255,255,.02),rgba(255,255,255,.22) 48%,rgba(255,255,255,.46) 68%,rgba(255,255,255,.08)) !important;
  backdrop-filter:blur(calc(var(--tp) * 5px));
}

/* TRADING: keep the base strictly #0A7BF0; loop a blue-only light pass across the glyphs. */
.hero-title .blue.trading-reactive{
  position:relative;
  color:#0A7BF0 !important;
  -webkit-text-fill-color:#0A7BF0 !important;
  background:none !important;
  text-shadow:none !important;
  isolation:isolate;
}
.hero-title .blue.trading-reactive::after{
  content:attr(data-text) !important;
  display:block !important;
  position:absolute;
  inset:0;
  pointer-events:none;
  color:#0A7BF0 !important;
  -webkit-text-fill-color:#0A7BF0 !important;
  background:none !important;
  text-shadow:none !important;
  opacity:.92;
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(100deg,transparent 0 38%,#000 46% 54%,transparent 62% 100%);
  mask-image:linear-gradient(100deg,transparent 0 38%,#000 46% 54%,transparent 62% 100%);
  -webkit-mask-size:260% 100%;
  mask-size:260% 100%;
  -webkit-mask-position:170% 0;
  mask-position:170% 0;
  animation:tradingBlueSweep 3.2s cubic-bezier(.55,.08,.35,.95) infinite;
  will-change:mask-position,-webkit-mask-position,opacity;
}
@keyframes tradingBlueSweep{
  0%,12%{-webkit-mask-position:170% 0;mask-position:170% 0;opacity:0}
  20%{opacity:.9}
  68%{opacity:.9}
  80%,100%{-webkit-mask-position:-70% 0;mask-position:-70% 0;opacity:0}
}

/* More breathing room below ENGINE before the descriptor and CTAs. */
@media (min-width:901px){
  .hero-meta{top:61.4vh !important;}
}
@media (min-width:901px) and (max-height:760px){
  .hero-meta{top:61.5vh !important;}
}
@media (max-width:900px){
  .hero-meta{top:75.2vh !important;}
}
@media (max-width:560px){
  .hero-meta{top:76vh !important;}
}
@media (max-height:760px) and (max-width:900px){
  .hero-meta{top:73.4vh !important;}
}

/* Full-screen menu artwork. Hidden on desktop; becomes the visual stage behind the mobile nav. */
.menu-stage{display:none}

@media (max-width:900px){
  body.menu-open{overflow:hidden;touch-action:none}
  .site-header{
    transition:background .6s cubic-bezier(.2,.75,.2,1),backdrop-filter .6s,box-shadow .45s,height .55s cubic-bezier(.2,.8,.2,1);
  }
  .site-header.open{
    position:fixed;
    inset:0;
    width:100%;
    height:100svh !important;
    min-height:100svh;
    overflow:hidden;
    padding:0 22px !important;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:76px 1fr;
    align-content:stretch;
    background:linear-gradient(135deg,rgba(250,253,255,.985),rgba(232,246,255,.975) 56%,rgba(250,253,255,.99)) !important;
    backdrop-filter:blur(28px) saturate(1.08) !important;
  }
  .site-header.open::before{
    content:"";
    position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(circle at 78% 28%,rgba(10,123,240,.16),transparent 29%),radial-gradient(circle at 15% 82%,rgba(10,123,240,.08),transparent 34%);
    opacity:0;animation:menuStageIn .7s .08s ease forwards;
  }
  .site-header.open .brand{z-index:6;align-self:center}
  .site-header.open .brand-logo{width:112px}
  .site-header.open .menu-btn{
    z-index:7;align-self:center;
    background:#0b1118;color:#fff;border-color:#0b1118;
    box-shadow:0 12px 30px rgba(5,32,52,.18);
  }
  .site-header.open .menu-btn b{color:#fff}

  .site-header.open .nav{
    display:flex !important;
    position:absolute !important;
    z-index:6;
    top:clamp(130px,17svh,178px) !important;
    left:7vw !important;
    right:7vw !important;
    flex-direction:column;
    align-items:stretch;
    gap:0 !important;
    font-family:"Italiana",Georgia,serif;
  }
  .site-header.open .nav a{
    --d:0ms;
    position:relative;
    display:flex;
    align-items:center;
    min-height:clamp(76px,11.3svh,112px);
    border-bottom:1px solid rgba(13,49,76,.13);
    padding:0 3px 0 clamp(46px,9vw,82px);
    font-size:clamp(43px,11vw,72px);
    line-height:.9;
    letter-spacing:-.025em;
    font-weight:400;
    color:#0b1118;
    opacity:0;
    transform:translate3d(0,32px,0) skewY(2deg);
    transition:color .25s ease,transform .7s cubic-bezier(.18,.84,.25,1),opacity .6s ease;
    transition-delay:var(--d);
  }
  .site-header.open .nav a:nth-child(1){--d:90ms}
  .site-header.open .nav a:nth-child(2){--d:150ms}
  .site-header.open .nav a:nth-child(3){--d:210ms}
  .site-header.open .nav a:nth-child(4){--d:270ms}
  .site-header.open .nav a::before{
    position:absolute;left:3px;top:50%;transform:translateY(-50%);
    font:650 8px/1 system-ui,sans-serif;letter-spacing:.18em;color:#718696;
  }
  .site-header.open .nav a:nth-child(1)::before{content:"01"}
  .site-header.open .nav a:nth-child(2)::before{content:"02"}
  .site-header.open .nav a:nth-child(3)::before{content:"03"}
  .site-header.open .nav a:nth-child(4)::before{content:"04"}
  .site-header.open .nav a::after{
    content:"↗" !important;
    left:auto !important;right:4px !important;bottom:auto !important;top:50% !important;
    width:auto !important;height:auto !important;background:none !important;
    transform:translateY(-50%);font:400 20px/1 system-ui;color:#0A7BF0;
    opacity:.65;
  }
  .site-header.open.menu-ready .nav a{opacity:1;transform:none}
  .site-header.open .nav a:hover{color:#0A7BF0}

  .site-header.open .header-cta{
    display:flex !important;
    position:absolute !important;
    z-index:7;
    left:7vw !important;right:7vw !important;
    top:auto !important;bottom:clamp(28px,5svh,52px) !important;
    height:58px;
    border-radius:15px;
    background:linear-gradient(100deg,#0A7BF0,#0b91ff);
    border:1px solid rgba(255,255,255,.8);
    color:#fff;
    box-shadow:inset 0 2px 4px rgba(255,255,255,.2),0 18px 40px rgba(10,123,240,.22);
    opacity:0;transform:translateY(18px);
    transition:opacity .55s .34s ease,transform .65s .34s cubic-bezier(.18,.84,.25,1);
  }
  .site-header.open.menu-ready .header-cta{opacity:1;transform:none}

  .site-header.open .menu-stage{
    display:block;
    position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
    opacity:0;animation:menuStageIn .7s ease forwards;
  }
  .menu-stage-grid{
    position:absolute;right:-34vw;top:4svh;width:112vw;height:78svh;
    background-image:linear-gradient(rgba(10,123,240,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(10,123,240,.075) 1px,transparent 1px);
    background-size:42px 42px;
    -webkit-mask-image:radial-gradient(ellipse at 55% 40%,#000 0 22%,rgba(0,0,0,.7) 44%,transparent 70%);
    mask-image:radial-gradient(ellipse at 55% 40%,#000 0 22%,rgba(0,0,0,.7) 44%,transparent 70%);
    transform:perspective(900px) rotateX(66deg) rotateZ(-9deg) scale(1.16);
    opacity:.5;
  }
  .menu-stage-orbit{position:absolute;border:1px solid rgba(10,123,240,.18);border-radius:50%;left:76%;top:29%;transform:translate(-50%,-50%) rotateX(67deg);}
  .menu-stage-orbit::before,.menu-stage-orbit::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#0A7BF0;box-shadow:0 0 16px rgba(10,123,240,.48)}
  .menu-stage-orbit::before{left:9%;top:27%}.menu-stage-orbit::after{right:12%;bottom:18%}
  .orbit-one{width:64vw;aspect-ratio:1;animation:menuOrbit 18s linear infinite}
  .orbit-two{width:88vw;aspect-ratio:1;opacity:.55;animation:menuOrbitB 26s linear infinite reverse}
  .menu-stage-glow{position:absolute;width:70vw;height:70vw;border-radius:50%;right:-24vw;top:-13vw;background:radial-gradient(circle,rgba(10,123,240,.16),transparent 67%);filter:blur(7px)}
  .menu-stage-label{position:absolute;right:7vw;top:9.3svh;text-align:right;color:#728595}
  .menu-stage-label span{display:block;font:650 7px/1 system-ui;letter-spacing:.18em;margin-bottom:7px}
  .menu-stage-label strong{font:500 9px/1.32 system-ui;letter-spacing:.08em;color:#345069}
  .menu-stage-foot{position:absolute;left:7vw;right:7vw;bottom:calc(clamp(28px,5svh,52px) + 78px);display:grid;grid-template-columns:1fr 1fr auto;gap:8px;border-top:1px solid rgba(13,49,76,.12);padding-top:11px;font:650 6.5px/1 system-ui;letter-spacing:.13em;color:#758895}
  .menu-stage-foot b{color:#0A7BF0;font-weight:700}

  @keyframes menuStageIn{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:none}}
  @keyframes menuOrbit{to{transform:translate(-50%,-50%) rotateX(67deg) rotateZ(360deg)}}
  @keyframes menuOrbitB{to{transform:translate(-50%,-50%) rotateX(72deg) rotateY(12deg) rotateZ(360deg)}}
}

@media (max-width:560px){
  .site-header.open .nav{top:15svh !important}
  .site-header.open .nav a{font-size:clamp(39px,12.7vw,58px);min-height:10.2svh;padding-left:43px}
  .site-header.open .header-cta{height:54px}
  .menu-stage-label{top:10svh}
  .menu-stage-foot{grid-template-columns:1fr auto}.menu-stage-foot span:nth-child(2){display:none}
}

@media (prefers-reduced-motion:reduce){
  .hero-title .blue.trading-reactive::after{animation:none !important;display:none !important}
  .site-header.open .nav a,.site-header.open .header-cta{opacity:1;transform:none;transition:none}
  .site-header.open .menu-stage{animation:none;opacity:1}.menu-stage-orbit{animation:none!important}
}

/* =========================================================
   V7 — CINEMATIC PAGE LOADER / INTRO TRANSITION
   ========================================================= */
body.is-loading{overflow:hidden!important;height:100svh}
body.is-loading main,body.is-loading footer{pointer-events:none}
.page-loader{
  position:fixed;inset:0;z-index:5000;overflow:hidden;
  display:grid;place-items:center;color:#ecf7ff;
  background:#06111c;isolation:isolate;
  opacity:1;visibility:visible;
  transition:opacity .42s ease .78s,visibility 0s linear 1.22s;
}
.page-loader::before{
  content:"";position:absolute;inset:-22%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 62% 42%,rgba(10,123,240,.23),transparent 24%),
    radial-gradient(circle at 34% 70%,rgba(0,151,255,.10),transparent 28%),
    linear-gradient(135deg,#06111c 0%,#071725 48%,#04101b 100%);
  animation:loaderAtmosphere 5s ease-in-out infinite alternate;
}
.page-loader::after{
  content:"";position:absolute;inset:0;z-index:8;pointer-events:none;
  background:linear-gradient(90deg,transparent 0 46%,rgba(125,205,255,.07) 49.5%,rgba(255,255,255,.18) 50%,rgba(125,205,255,.07) 50.5%,transparent 54%);
  transform:translateX(-115%);opacity:.8;
  animation:loaderFlash 2.4s cubic-bezier(.5,.05,.2,1) infinite;
}
.loader-panel{position:absolute;top:0;bottom:0;width:50.5%;z-index:12;background:#071522;will-change:transform;transition:transform 1.05s cubic-bezier(.77,0,.18,1)}
.loader-panel-left{left:0;border-right:1px solid rgba(10,123,240,.16)}
.loader-panel-right{right:0;border-left:1px solid rgba(10,123,240,.16)}
.loader-grid{position:absolute;inset:-10%;z-index:13;pointer-events:none;opacity:.33;background-image:linear-gradient(rgba(69,170,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(69,170,255,.10) 1px,transparent 1px);background-size:54px 54px;transform:perspective(900px) rotateX(64deg) translateY(34%);transform-origin:center 72%;animation:loaderGridDrift 7s linear infinite}
.loader-scan{position:absolute;z-index:15;left:0;right:0;top:16%;height:1px;background:linear-gradient(90deg,transparent,rgba(48,167,255,.9),rgba(255,255,255,.9),rgba(48,167,255,.9),transparent);box-shadow:0 0 24px rgba(10,123,240,.48);opacity:.8;animation:loaderScan 2.7s ease-in-out infinite}
.loader-orbit{position:absolute;z-index:13;left:50%;top:50%;border:1px solid rgba(68,173,255,.25);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.loader-orbit::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:#0A7BF0;box-shadow:0 0 20px rgba(10,123,240,.9);left:50%;top:-3px}
.loader-orbit-a{width:min(64vw,760px);aspect-ratio:1;animation:loaderOrbitA 10s linear infinite}
.loader-orbit-b{width:min(43vw,520px);aspect-ratio:1;border-style:dashed;opacity:.62;animation:loaderOrbitB 7s linear infinite reverse}
.loader-center{position:relative;z-index:20;width:min(78vw,720px);display:flex;flex-direction:column;align-items:center;text-align:center;transform:translateY(-1vh)}
.loader-logo{width:clamp(118px,11vw,170px);height:auto;filter:brightness(0) invert(1);opacity:.96;animation:loaderLogoIn .9s .12s both cubic-bezier(.18,.8,.2,1)}
.loader-r3c{margin-top:clamp(32px,5vh,58px);display:grid;place-items:center;line-height:.75}
.loader-r3c span{font:400 clamp(104px,16vw,240px)/.68 "Italiana",Georgia,serif;letter-spacing:-.055em;color:#f6fbff;text-shadow:0 0 60px rgba(10,123,240,.12);animation:loaderR3CIn 1.15s .18s both cubic-bezier(.18,.88,.2,1)}
.loader-r3c i{font:650 clamp(8px,.7vw,11px)/1 system-ui,sans-serif;font-style:normal;letter-spacing:.42em;margin-top:28px;color:#5cb5ff;animation:loaderMetaIn .7s .55s both ease}
.loader-progress-wrap{width:min(500px,74vw);margin-top:clamp(42px,6vh,68px);animation:loaderMetaIn .7s .65s both ease}
.loader-progress-meta{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:12px;font:650 8px/1 system-ui,sans-serif;letter-spacing:.18em;color:#7893a8}
.loader-progress-meta strong{font:400 28px/1 "Italiana",Georgia,serif;color:#f8fcff;letter-spacing:.02em;min-width:58px;text-align:right}
.loader-progress-track{height:1px;background:rgba(125,194,247,.18);overflow:visible;position:relative}
.loader-progress-track i{display:block;width:100%;height:1px;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#0A7BF0,#63c6ff,#fff);box-shadow:0 0 18px rgba(10,123,240,.7);will-change:transform}
.loader-progress-track i::after{content:"";position:absolute;right:-3px;top:-2px;width:5px;height:5px;border-radius:50%;background:#e9f8ff;box-shadow:0 0 18px #0A7BF0}
.loader-corner{position:absolute;z-index:20;font:650 7px/1.2 system-ui,sans-serif;letter-spacing:.2em;color:#66849a;animation:loaderMetaIn .75s .72s both ease}
.loader-corner-tl{left:28px;top:26px}.loader-corner-tr{right:28px;top:26px}.loader-corner-bl{left:28px;bottom:26px}.loader-corner-br{right:28px;bottom:26px}
.page-loader.is-finishing .loader-center{opacity:0;transform:scale(.96) translateY(-1vh);transition:opacity .32s ease,transform .45s ease}
.page-loader.is-finishing .loader-grid,.page-loader.is-finishing .loader-scan,.page-loader.is-finishing .loader-orbit,.page-loader.is-finishing .loader-corner{opacity:0;transition:opacity .3s ease}
.page-loader.is-open .loader-panel-left{transform:translateX(-102%)}
.page-loader.is-open .loader-panel-right{transform:translateX(102%)}
.page-loader.is-open{background:transparent;pointer-events:none;opacity:0;visibility:hidden}

@keyframes loaderAtmosphere{to{transform:scale(1.05) translate3d(-1.5%,1%,0)}}
@keyframes loaderFlash{0%,16%{transform:translateX(-120%);opacity:0}28%{opacity:.75}62%{transform:translateX(120%);opacity:.5}63%,100%{opacity:0}}
@keyframes loaderGridDrift{to{background-position:54px 54px,54px 54px}}
@keyframes loaderScan{0%,100%{top:14%;opacity:0}18%{opacity:.8}55%{opacity:.45}78%{top:86%;opacity:.75}}
@keyframes loaderOrbitA{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes loaderOrbitB{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes loaderLogoIn{from{opacity:0;transform:translateY(16px);filter:brightness(0) invert(1) blur(8px)}to{opacity:.96;transform:none;filter:brightness(0) invert(1) blur(0)}}
@keyframes loaderR3CIn{from{opacity:0;transform:scale(.84);letter-spacing:.08em;filter:blur(12px)}to{opacity:1;transform:none;letter-spacing:-.055em;filter:blur(0)}}
@keyframes loaderMetaIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .loader-grid{background-size:38px 38px}
  .loader-orbit-a{width:116vw}.loader-orbit-b{width:76vw}
  .loader-r3c span{font-size:clamp(112px,34vw,180px)}
  .loader-r3c i{letter-spacing:.32em;margin-top:22px}
  .loader-corner{font-size:6px;letter-spacing:.13em}
  .loader-corner-tr,.loader-corner-br{display:none}
  .loader-corner-tl{left:18px;top:18px}.loader-corner-bl{left:18px;bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  .loader-grid,.loader-orbit,.loader-scan,.page-loader::after{animation:none!important}
  .loader-logo,.loader-r3c span,.loader-r3c i,.loader-progress-wrap,.loader-corner{animation:none!important}
}

/* =========================================================
   SECTION 02 — XAU LABS ECOSYSTEM / IMMERSIVE SYSTEM STORY
   ========================================================= */
.emotion{padding-bottom:0}
.emotion>.giant-watermark{bottom:auto;top:78vh}
.ecosystem-stage{
  --eco-progress:0;
  position:relative;
  margin:clamp(110px,15vh,190px) -7vw 0;
  padding:clamp(120px,15vh,180px) 7vw clamp(130px,16vh,200px);
  min-height:150vh;
  overflow:hidden;
  isolation:isolate;
  border-top:1px solid rgba(10,63,104,.10);
  background:
    radial-gradient(circle at 86% 16%,rgba(10,123,240,.16),transparent 25%),
    radial-gradient(circle at 8% 72%,rgba(71,178,255,.12),transparent 28%),
    linear-gradient(180deg,#f7fbff 0%,#edf6fd 48%,#f9fcff 100%);
}
.ecosystem-stage::before{
  content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;opacity:.58;
  background-image:linear-gradient(rgba(19,104,168,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(19,104,168,.055) 1px,transparent 1px);
  background-size:72px 72px;
  transform:perspective(850px) rotateX(58deg) scale(1.34) translateY(calc((var(--eco-progress) - .5) * 46px));
  transform-origin:50% 60%;
}
.ecosystem-stage::after{
  content:"";position:absolute;z-index:-2;width:min(76vw,1120px);aspect-ratio:1;border-radius:50%;right:-24vw;top:5vh;
  border:1px solid rgba(10,123,240,.16);box-shadow:0 0 0 70px rgba(10,123,240,.025),0 0 0 142px rgba(10,123,240,.018),inset 0 0 90px rgba(10,123,240,.035);
  transform:rotate(calc(var(--eco-progress) * 72deg)) scale(calc(.94 + var(--eco-progress) * .08));
}
.eco-intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:6vw;align-items:end;position:relative;z-index:2;margin-bottom:clamp(80px,10vh,132px)}
.eco-kicker{font:650 10px/1 system-ui,sans-serif;letter-spacing:.28em;color:#44728f;margin-bottom:22px}
.eco-title{margin:0;font-family:"Italiana",Georgia,serif;font-weight:400;font-size:clamp(74px,8.2vw,158px);line-height:.82;letter-spacing:-.018em;color:#0b1117}
.eco-title span{display:block;color:#0A7BF0}
.eco-thai{margin:0 0 12px;font-size:clamp(28px,3.05vw,58px);line-height:1.18;letter-spacing:-.055em;font-weight:500;color:#101820}
.eco-thai strong{display:block;font-weight:700;color:#0A7BF0}
.eco-description{margin:26px 0 0;max-width:580px;font-size:clamp(14px,1vw,18px);line-height:1.8;color:#64727d}
.eco-system-line{position:absolute;left:7vw;right:7vw;top:clamp(415px,42vh,540px);height:1px;background:linear-gradient(90deg,transparent,rgba(10,123,240,.25) 12%,rgba(10,123,240,.75) 50%,rgba(10,123,240,.22) 88%,transparent);z-index:0;transform:scaleX(calc(.18 + var(--eco-progress) * .82));transform-origin:left center;box-shadow:0 0 18px rgba(10,123,240,.2)}
.eco-system-line::after{content:"";position:absolute;top:-3px;left:calc(var(--eco-progress) * 100%);width:7px;height:7px;border-radius:50%;background:#0A7BF0;box-shadow:0 0 0 8px rgba(10,123,240,.08),0 0 24px rgba(10,123,240,.7)}
.eco-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;perspective:1200px}
.eco-card{position:relative;min-height:clamp(270px,28vw,430px);padding:clamp(28px,2.5vw,46px);border:1px solid rgba(20,81,128,.12);border-radius:clamp(22px,2vw,34px);overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(235,246,254,.72));box-shadow:0 22px 70px rgba(41,105,151,.09),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(14px);display:flex;flex-direction:column;justify-content:space-between;transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.16,.84,.2,1),filter 1s ease,border-color .35s ease,box-shadow .35s ease;transform-origin:50% 100%}
.eco-card.reveal{opacity:0;transform:translateY(78px) rotateX(7deg) scale(.965);filter:blur(11px)}
.eco-card.reveal.in-view{opacity:1;transform:none;filter:none}
.eco-card:nth-child(2){transition-delay:.08s}.eco-card:nth-child(3){transition-delay:.04s}.eco-card:nth-child(4){transition-delay:.11s}.eco-card:nth-child(5){transition-delay:.17s}.eco-card:nth-child(6){transition-delay:.06s}
.eco-card:hover{border-color:rgba(10,123,240,.32);box-shadow:0 30px 90px rgba(36,118,179,.16),inset 0 1px 0 #fff;transform:translateY(-6px)}
.eco-card::before{content:"";position:absolute;width:210px;height:210px;border-radius:50%;right:-86px;top:-88px;border:1px solid rgba(10,123,240,.13);box-shadow:0 0 0 24px rgba(10,123,240,.02),0 0 0 52px rgba(10,123,240,.014);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.eco-card:hover::before{transform:scale(1.14) rotate(18deg)}
.eco-card::after{content:"";position:absolute;left:0;top:0;width:42%;height:2px;background:linear-gradient(90deg,#0A7BF0,rgba(10,123,240,0));transform:scaleX(0);transform-origin:left;transition:transform .6s ease}
.eco-card:hover::after{transform:scaleX(1)}
.eco-card-a{grid-column:span 7}.eco-card-b{grid-column:span 5}.eco-card-c,.eco-card-d,.eco-card-e{grid-column:span 4}.eco-card-f{grid-column:1/-1;min-height:clamp(300px,26vw,390px);background:linear-gradient(120deg,#07111b 0%,#0b2135 48%,#0A7BF0 135%);color:white;border-color:rgba(255,255,255,.12);box-shadow:0 34px 100px rgba(15,77,125,.22)}
.eco-card-f::before{width:420px;height:420px;right:-100px;top:-215px;border-color:rgba(111,196,255,.28);box-shadow:0 0 0 62px rgba(72,167,237,.045),0 0 0 126px rgba(72,167,237,.025)}
.eco-card-head{display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:2}
.eco-num{display:flex;align-items:baseline;gap:10px;color:#7c94a5}.eco-num strong{font:500 clamp(34px,3vw,56px)/.82 "Italiana",Georgia,serif;letter-spacing:-.045em;color:#0A7BF0}.eco-num em{font:650 clamp(8px,.62vw,11px)/1 system-ui,sans-serif;letter-spacing:.18em;color:#7c94a5;font-style:normal;white-space:nowrap}.eco-card-f .eco-num strong{color:#fff}.eco-card-f .eco-num em{color:#8bcfff}
.eco-status{display:inline-flex;align-items:center;gap:8px;font:650 8px/1 system-ui,sans-serif;letter-spacing:.17em;color:#6d8494}.eco-status i{width:6px;height:6px;border-radius:50%;background:#0A7BF0;box-shadow:0 0 0 5px rgba(10,123,240,.08),0 0 14px rgba(10,123,240,.55)}.eco-card-f .eco-status{color:#a8c8dc}
.eco-card-body{position:relative;z-index:2;padding-top:50px}
.eco-card h3{margin:0 0 18px;font-family:"Italiana",Georgia,serif;font-size:clamp(36px,3.65vw,70px);line-height:.9;font-weight:400;letter-spacing:-.01em;color:#101820}.eco-card-f h3{font-size:clamp(52px,6.2vw,118px);color:#fff;margin-bottom:22px}
.eco-card p{margin:0;max-width:620px;font-size:clamp(16px,1.18vw,22px);line-height:1.65;color:#566a78}.eco-card-f p{font-size:clamp(18px,1.55vw,28px);color:#d9ecf8;max-width:890px}
.eco-card b{font-weight:650;color:#17212a}.eco-card-f b{color:white}
.eco-marquee{position:relative;z-index:1;margin:clamp(95px,12vh,150px) -7vw -20px;overflow:hidden;border-top:1px solid rgba(10,123,240,.09);border-bottom:1px solid rgba(10,123,240,.09);padding:21px 0;transform:rotate(-1deg);background:rgba(255,255,255,.35)}
.eco-marquee-track{width:max-content;display:flex;gap:38px;animation:ecoMarquee 24s linear infinite;font:500 clamp(18px,2vw,34px)/1 "Italiana",Georgia,serif;letter-spacing:.055em;color:rgba(12,56,91,.26)}
.eco-marquee-track span{display:flex;gap:38px;align-items:center;white-space:nowrap}.eco-marquee-track span::after{content:"✦";font-family:system-ui;color:#0A7BF0;font-size:.42em;opacity:.65}
@keyframes ecoMarquee{to{transform:translateX(-50%)}}

@media (max-width:1100px){.eco-intro{grid-template-columns:1fr;gap:38px;align-items:start}.eco-thai{max-width:720px}.eco-card-a,.eco-card-b{grid-column:span 6}.eco-card-c,.eco-card-d,.eco-card-e{grid-column:span 4}.ecosystem-stage::after{right:-36vw}}
@media (max-width:900px){
  .emotion{padding-bottom:0}.emotion>.giant-watermark{top:68vh}
  .ecosystem-stage{margin:100px -22px 0;padding:110px 22px 120px;min-height:auto}
  .eco-title{font-size:clamp(66px,16vw,110px)}.eco-thai{font-size:clamp(30px,7vw,48px)}
  .eco-system-line{left:22px;right:22px;top:360px}
  .eco-grid{grid-template-columns:1fr;gap:14px}.eco-card-a,.eco-card-b,.eco-card-c,.eco-card-d,.eco-card-e,.eco-card-f{grid-column:1;min-height:310px}
  .eco-card-f{min-height:360px}.eco-card h3{font-size:clamp(42px,10vw,72px)}.eco-card-f h3{font-size:clamp(56px,13vw,94px)}
  .eco-card-body{padding-top:42px}.eco-marquee{margin-left:-22px;margin-right:-22px}
}
@media (max-width:560px){
  .ecosystem-stage{padding-top:92px;padding-bottom:100px}.eco-intro{margin-bottom:68px}.eco-kicker{font-size:8px}.eco-title{font-size:clamp(57px,16.5vw,82px)}.eco-thai{font-size:clamp(28px,8vw,42px)}.eco-description{font-size:13px;margin-top:18px}.eco-system-line{display:none}
  .eco-card{padding:26px 22px;min-height:280px;border-radius:24px}.eco-card-f{min-height:335px}.eco-card h3{font-size:clamp(39px,12vw,58px);margin-bottom:14px}.eco-card-f h3{font-size:clamp(49px,14vw,74px)}.eco-card p{font-size:15px}.eco-card-f p{font-size:16px}.eco-marquee{margin-top:78px;padding:17px 0}
}
@media (prefers-reduced-motion:reduce){.ecosystem-stage::before,.ecosystem-stage::after,.eco-system-line,.eco-marquee-track{transform:none!important;animation:none!important}.eco-card.reveal{opacity:1;transform:none;filter:none}}