*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:76px}body{margin:0;background:#06152b;color:#f1f8ff;font:15px/1.55 "Microsoft YaHei UI",system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}img{display:block;max-width:100%}h1,h2,p,ol,ul{margin:0}h2{font-size:clamp(24px,3vw,39px);line-height:1.23;letter-spacing:.02em}small{color:#c2d6ed}button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #40e6ff;outline-offset:4px}.skip{position:fixed;top:-100px;z-index:30;background:#091d38;padding:10px}.skip:focus{top:0}.wrap{width:min(1320px,calc(100% - 80px));margin:auto}.header{position:sticky;top:0;z-index:10;background:#05142bf5;border-bottom:1px solid #244f78}.nav,.brand{display:flex;align-items:center}.nav{min-height:70px;justify-content:space-between;gap:16px}.brand{gap:10px;white-space:nowrap;font-size:23px;font-weight:800;line-height:1.05}.brand img{width:42px}.brand small{display:block;font-size:9px;letter-spacing:.06em;margin-top:5px;color:#e4f5ff}.nav nav{display:flex;gap:clamp(12px,2vw,30px);align-items:center}.nav nav a{padding:22px 0;font-size:14px;white-space:nowrap}.nav nav a:hover,.nav nav a:first-child{color:#81defe}.nav nav a:first-child{box-shadow:inset 0 -3px #39caff}.menu{display:none}.button{display:inline-flex;justify-content:center;align-items:center;gap:10px;background:linear-gradient(115deg,#0b76ae,#1648dc);border:1px solid #68d9ff;box-shadow:inset 0 0 14px #66d4ff64,0 0 18px #1c9bff48;padding:10px 22px;border-radius:100px;font-weight:750;white-space:nowrap}.button:hover{filter:brightness(1.2)}.compact{padding:6px 14px;font-size:13px}.outline{background:#07152a99;box-shadow:none;border-color:#b4d4ee}.hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 75% 88%,#0765bc 0,transparent 43%),linear-gradient(155deg,#07162d 27%,#102d58 73%,#06152b);border-bottom:1px solid #195485}.hero::after{content:"";position:absolute;z-index:-1;inset:75% -18% 0;background:repeating-linear-gradient(0deg,transparent 0 15px,#33caff65 17px,transparent 20px 31px);transform:perspective(140px) rotateX(36deg);mask-image:linear-gradient(transparent,#000 45%,transparent)}.hero-grid{min-height:440px;display:grid;grid-template-columns:1fr 1.12fr;align-items:center}.hero-copy{position:relative;z-index:2;padding:35px 0}.hero h1{font-size:clamp(34px,4.2vw,62px);line-height:1.14;letter-spacing:-.04em;text-shadow:0 0 24px #27adff70}.hero p{max-width:490px;margin:18px 0;color:#dbe9fb;font-size:clamp(16px,1.5vw,21px)}.mobile-break{display:none}.actions{display:flex;gap:13px;flex-wrap:wrap}.checks{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:14px;margin-top:27px;font-size:13px;color:#d5eafa}.checks li::before,.platform-list li::before{content:"✓";color:#5ce4ff;margin-right:7px}.stage{position:relative;height:410px;isolation:isolate}.planet{position:absolute;width:64%;aspect-ratio:1;top:4%;left:19%;border:1px solid #5cd7fd;border-radius:50%;background:radial-gradient(ellipse at 51% 105%,#2d8cff,transparent 55%),radial-gradient(ellipse at 55% 0%,#154685,#030d22 67%);box-shadow:0 0 32px #28c0ff,inset 0 9px 28px #159bff;mask-image:linear-gradient(#000 58%,transparent 83%)}.pedestal{position:absolute;bottom:6%;left:11%;width:72%;height:18%;border:2px solid #62e7ff;border-radius:50%;background:radial-gradient(ellipse,#3fb8ff73,#0c4c8b 68%);box-shadow:0 0 20px #29d3ff,inset 0 0 22px #61c7ff,0 12px 0 #063570}.stage-device,.stage-phone{position:absolute;padding:0;background:#0b2343;overflow:hidden;border:1px solid #75cfff;box-shadow:0 0 22px #058aff96;border-radius:12px}.stage-device{height:81%;left:37%;bottom:10%;z-index:2}.stage-device img,.stage-phone img{height:100%;width:auto;max-width:none}.stage-device span{position:absolute;bottom:6px;left:5px;right:5px;border-radius:20px;background:#03132ae8;padding:5px 1px;font-size:12px}.stage-phone{height:45%;bottom:9%;left:15%;z-index:3;transform:rotate(-9deg)}.stage-data{position:absolute;z-index:3;top:26%;right:0;background:linear-gradient(145deg,#15588be8,#081e42ed);border:1px solid #67c4ff;border-radius:13px;padding:12px;display:grid;gap:5px;transform:perspective(580px) rotateY(-13deg);box-shadow:0 0 24px #299afd80}.stage-data span{font-size:12px}.stage-data i{height:35px;background:linear-gradient(90deg,#2c76ed,#70ecff);clip-path:polygon(0 78%,12% 78%,12% 55%,28% 55%,28% 63%,44% 63%,44% 35%,60% 35%,60% 48%,76% 48%,76% 17%,92% 17%,92% 0,100% 0,100% 100%,0 100%)}.quick-grid,.product-grid,.solution-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.quick-grid{margin-top:15px}.panel{display:flex;align-items:center;text-align:left;gap:13px;padding:14px;background:radial-gradient(ellipse at 100% 0,#2582c65c,transparent 64%),linear-gradient(125deg,#102947,#0d2342);border:1px solid #3c79ac;border-radius:13px;box-shadow:inset 0 -5px 16px #5caaff30}.panel:hover,.solution:hover,.template-card:hover{border-color:#68e4ff;box-shadow:0 0 18px #24acff66}.panel strong,.panel small,.solution strong,.solution small{display:block}.panel strong{font-size:17px}.panel small{font-size:12px}.glyph{display:grid;place-items:center;flex:0 0 45px;height:45px;border-radius:11px;background:linear-gradient(140deg,#0a62ab,#112a61);border:1px solid #50caff;color:#bbfaff;text-shadow:0 0 8px #29ccff;box-shadow:inset 0 0 12px #40bdff86;font-size:20px}.section{padding:27px 0 5px}.section-head{display:flex;align-items:baseline;gap:18px;margin-bottom:14px}.section-head p{font-size:14px;color:#bdd2ea;border-left:1px solid #5c84ad;padding-left:15px}.flow,.delivery{padding:0;list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.flow{border:1px solid #29a7e9;border-radius:52px;padding:10px;background:linear-gradient(180deg,#11345a,#081c35);box-shadow:inset 0 0 18px #49a9fb38}.flow li{position:relative;text-align:center;display:grid;justify-items:center;align-content:start;gap:2px}.flow i{display:grid;place-items:center;font-style:normal;width:40px;height:40px;border:1px solid #68c6ff;border-radius:50%;background:radial-gradient(#146eaf,#10365e);font-size:21px;color:#a9edff}.flow li:not(:last-child)::after{content:"→";position:absolute;right:-10px;top:14px;color:#62dcff}.flow small{font-size:12px}.product{position:relative;min-height:112px;padding-right:24px}.product img{width:48px;border-radius:5px}.featured{background:linear-gradient(115deg,#0756a7,#113b6e)}.arrow{position:absolute;right:8px;bottom:5px;color:#8de3ff;font-size:25px}.platform-section{margin-top:25px;padding:31px 0;background:radial-gradient(ellipse at 72% 100%,#1461ad,transparent 65%),linear-gradient(135deg,#102745,#0a1c35);border-block:1px solid #2b5682}.platform-grid{display:grid;grid-template-columns:.72fr 1.65fr;gap:25px;align-items:center}.eyebrow{display:inline-block;border:1px solid #55baff;border-radius:20px;padding:2px 12px;font-size:12px;margin-bottom:8px;color:#b4f4ff}.platform-grid p{margin-top:8px;color:#c5d7ec}.platform-list{list-style:none;padding:0;margin:12px 0 18px}.platform-list li{margin-top:5px}.dashboard{border:1px solid #72ddff;border-radius:16px;background:#091b31;padding:12px;box-shadow:0 0 24px #21b7ff87,inset 0 0 16px #1d69a7}.dash-head{display:flex;justify-content:space-between;gap:6px;margin-bottom:8px}.dash-head b{font-size:12px;color:#aad5fe;margin-left:8px}.dash-head small{color:#9ce9ff}.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}.tabs button{background:#102a4b;border:1px solid #346086;border-radius:6px;padding:4px 9px;font-size:12px}.tabs button[aria-selected=true]{background:#2251b2;border-color:#65bbff}.dash-image{width:100%;border:0;background:#08172a;padding:0;border-radius:6px;overflow:hidden}.dash-image img{width:100%;height:clamp(154px,24vw,344px);object-fit:contain}.dashboard .demo-note{font-size:12px;margin-top:3px}.solutions-section{padding:24px 0;background:#102745}.solution,.template-card{position:relative;overflow:hidden;border:1px solid #417baa;border-radius:10px;padding:0;background:#132c4d;text-align:left}.solution img{width:100%;aspect-ratio:2.35;object-fit:cover}.solution span{display:block;padding:7px 10px}.template-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.template-card img{width:100%;aspect-ratio:1.22;object-fit:cover}.template-card strong{display:block;padding:5px 8px}.delivery li{padding:8px 3px;border:1px solid #4286b6;border-radius:10px;background:linear-gradient(#164366,#0b233c);text-align:center;font-weight:750}.consult{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:24px 0;padding:19px 24px;border-radius:16px;border:1px solid #43c0ff;background:radial-gradient(ellipse at 70% 100%,#1a7ad4,transparent 56%),linear-gradient(135deg,#124375,#0b2247)}.consult h2{font-size:clamp(20px,2.8vw,34px)}.consult p{margin-top:5px;color:#def0ff}footer{background:#081b34;border-top:1px solid #2b5079;padding:23px 0 14px}.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:14px}.footer-grid div>a:not(.brand){display:block;color:#c2d6ed;margin-top:4px}.footer-grid p{color:#b7cde6;font-size:13px;margin-top:7px}.copyright{grid-column:1/-1;border-top:1px solid #2b5079;padding-top:9px}
dialog{width:min(760px,calc(100% - 28px));max-height:90dvh;background:#0c2240;color:#f1f8ff;border:1px solid #6ecaff;border-radius:15px;padding:14px;box-shadow:0 0 30px #1677bd80}dialog::backdrop{background:#020816dd}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.dialog-head h2{font-size:21px}.close{font-size:24px;line-height:1;background:#142f53;border:1px solid #43759f;border-radius:8px;width:37px;height:37px}.viewer-media{margin:auto;max-height:63dvh;max-width:100%;object-fit:contain;display:block}.viewer-caption{margin-top:8px}.viewer-actions{display:flex;justify-content:center;gap:10px;margin-top:10px}.viewer-actions button{padding:5px 12px;border:1px solid #66a8d7;border-radius:8px;background:#16365e}form label{display:grid;gap:4px;margin:10px 0}form p{color:#c2d6ed}select,textarea{font:inherit;background:#081a32;color:#fff;border:1px solid #4d80b1;border-radius:5px;padding:7px;width:100%}
@media(max-width:1080px){.wrap{width:calc(100% - 40px)}.nav nav{gap:12px}.nav nav a{font-size:12px}.panel{padding:10px;gap:7px}.panel strong{font-size:15px}.hero-grid{min-height:370px}.stage{height:350px}.stage-phone{left:12%}}
@media(max-width:770px){html{scroll-padding-top:66px}.wrap{width:calc(100% - 32px)}.nav{min-height:59px}.brand{font-size:20px}.brand img{width:34px}.menu{display:block;background:#102f51;border:1px solid #4275a5;border-radius:8px;padding:5px 10px}.nav-cta{display:none}.nav nav{display:none;position:absolute;top:100%;left:0;width:100%;background:#081b32;border-bottom:1px solid #467ba8;padding:9px 16px;grid-template-columns:1fr 1fr;gap:0 14px}.nav nav.open{display:grid}.nav nav a{padding:8px;font-size:14px}.hero-grid{display:block}.hero-copy{padding:24px 0 0}.hero h1{font-size:clamp(34px,8.7vw,48px)}.mobile-break{display:initial}.hero p{margin:12px 0}.checks{margin-top:15px;gap:5px 10px;font-size:11px}.stage{height:clamp(256px,73vw,375px)}.stage-data{top:28%;padding:7px;right:0;font-size:12px}.stage-data span,.stage-data small{font-size:10px}.stage-data i{height:23px}.stage-device{left:37%;height:80%}.stage-phone{left:11%}.stage-device span{font-size:11px}.quick-grid,.product-grid,.solution-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.panel{min-height:70px}.panel small{font-size:11px}.glyph{flex-basis:34px;height:34px;font-size:15px}.section{padding-top:20px}.section-head{display:block;margin-bottom:10px}.section-head p{border:0;padding:0;margin-top:3px;font-size:12px}.flow,.delivery{grid-template-columns:repeat(3,minmax(0,1fr))}.flow{border-radius:15px;gap:11px 4px}.flow li:nth-child(3)::after{display:none}.flow small{font-size:10px}.flow strong{font-size:13px}.product{min-height:96px}.product img{width:36px}.platform-grid{grid-template-columns:1fr;gap:15px}.platform-section{padding:19px 0}.template-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.template-card strong,.solution strong{font-size:13px}.consult{align-items:flex-start;flex-direction:column;padding:14px;gap:10px}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(min-width:771px){.hero h1{font-size:clamp(29px,3.6vw,53px);text-wrap:balance}}

/* Refined homepage */
.hero{background:radial-gradient(ellipse at 79% 62%,#0b3c74 0%,#071e3c 36%,transparent 69%),linear-gradient(120deg,#041021,#091d36);border-bottom-color:#23496a}
.hero-grid{grid-template-columns:.94fr 1.06fr;min-height:510px}
.hero h1{font-size:clamp(28px,3.6vw,53px);letter-spacing:-.04em}
.hero p{max-width:470px;line-height:1.65}
.hero::after{inset:72% -22% -24%;opacity:.55}
.stage{height:490px}
.planet{width:79%;left:8%;top:8%;border-color:#78dfff;box-shadow:0 -5px 37px #13a2ff8a,inset 0 10px 28px #2696e146;background:radial-gradient(ellipse at 58% 9%,#144f7a,#06152c 64%);mask-image:linear-gradient(#000 27%,transparent 78%)}
.stage::before,.stage::after{content:"";position:absolute;pointer-events:none;border-radius:50%;border:1px solid #48baff91;box-shadow:0 0 14px #137bd34d}
.stage::before{inset:41% 1% 22% -7%;transform:rotate(-13deg);mask-image:linear-gradient(100deg,transparent,#000 27%,transparent 80%)}
.stage::after{inset:63% 0 9% -2%;transform:rotate(8deg);mask-image:linear-gradient(90deg,transparent,#000 61%,transparent)}
.pedestal{left:10%;width:79%;bottom:10%;height:18%;border:1px solid #82eaff;box-shadow:0 0 26px #16a7ec81,inset 0 0 21px #2ebae89c,0 9px 0 #052340;background:radial-gradient(ellipse,#1b9eea51,#082242 65%);z-index:1}
.pedestal::after{content:"";position:absolute;inset:17% 8%;border:1px solid #58ccff89;border-radius:50%}
.stage-device{left:30%;bottom:16%;height:auto;width:clamp(181px,23vw,335px);aspect-ratio:720/980;overflow:hidden;background:none;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 0 16px #139df78c);z-index:4}
.stage-device img{position:absolute;top:-26.4%;left:0;width:100%;height:auto;clip-path:polygon(10.2% 22.5%,93.8% 20%,97% 85%,72% 85%,78% 100%,37% 94%,41% 85%,11.5% 85%);mask-image:linear-gradient(#000 85%,transparent 98%)}
.stage-device span{left:16%;right:12%;bottom:0;background:#071e36;border:1px solid #4fc5f7;padding:6px 2px;color:#e3f9ff}
.stage-phone{left:9%;bottom:17%;width:19%;height:auto;aspect-ratio:.70;border-color:#5e9cc6;background:#071c36;transform:rotate(-9deg);box-shadow:0 8px 24px #000a,0 0 21px #137cbe71;z-index:5}
.stage-phone img{width:100%;height:100%;object-fit:cover;object-position:57% 61%;transform:scale(2.05);transform-origin:60% 62%}
.stage-phone::after{content:"NFC 交互";position:absolute;inset:auto 0 0;padding:4px 2px;background:#04152bdb;font-size:11px;color:#ccf2ff}
.stage-data{width:26%;right:0;top:28%;padding:13px;border-color:#55a8d478;transform:perspective(650px) rotateY(-15deg) rotateZ(-3deg);background:linear-gradient(145deg,#164c74e8,#07182ee8);box-shadow:0 12px 35px #020d25a8,inset 0 0 19px #2a9ee533;z-index:5}
.quick-grid{margin-top:0;padding:17px 0;border-bottom:1px solid #25405d;gap:0}
.quick-grid .panel{border:0;border-radius:0;box-shadow:none;background:transparent;padding:12px 18px}
.quick-grid .panel+.panel{border-left:1px solid #264562}
.quick-grid .panel:hover{background:#102949}
.glyph{border:0;background:#113354;color:#81d9ff;box-shadow:none;text-shadow:none}
.product-grid{grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:auto auto}
.product.featured{grid-row:span 2;min-height:200px;background:radial-gradient(ellipse at 5% 90%,#16518e,transparent 70%),linear-gradient(115deg,#122a47,#0b2038);border-color:#306591;padding:20px;gap:19px;box-shadow:none}
.product.featured img{width:86px;aspect-ratio:.86;object-fit:cover;object-position:center 53%}
.product.featured strong{font-size:22px}
.product:not(.featured){min-height:85px;background:#0d2038;border-color:#284763;box-shadow:none}
.product-grid #ai{grid-column:2/-1}
.flow,.delivery li{box-shadow:none;border-color:#2f5678}
.platform-section{margin-top:36px;padding:38px 0;background:radial-gradient(ellipse at 69% 110%,#164772,transparent 66%),linear-gradient(125deg,#0b1b31,#0e2744)}
.platform-grid{grid-template-columns:minmax(315px,1fr) minmax(0,2.1fr);gap:34px}
.platform-grid h2{font-size:clamp(25px,2.55vw,38px);text-wrap:balance}
.dashboard{padding:13px;border-color:#529bc3;box-shadow:0 18px 38px #030b1cb3,0 0 25px #2384c53d}
.dash-image img{height:auto;aspect-ratio:1.85;max-height:none}
.solutions-section{background:linear-gradient(#101f34,#0a1a30)}
.solution,.template-card{border-color:#2d4660;background:#10233a}
.solution:hover,.template-card:hover{box-shadow:none}
.consult{position:relative;isolation:isolate;overflow:hidden;padding:25px 30px;background:radial-gradient(ellipse at 79% 130%,#1b6bb6 0%,transparent 64%),linear-gradient(115deg,#112c4c,#081d38);border-color:#397ea7}
.consult::before{content:"";position:absolute;z-index:-1;inset:42% -12% -125% 23%;border:1px solid #72d9ffa8;border-radius:50%;box-shadow:0 -5px 32px #44b6ff63;transform:rotate(-7deg)}
@media(max-width:1080px){.hero-grid{min-height:400px}.stage{height:395px}.stage-device{width:47%}.stage-data{padding:8px}.quick-grid .panel{padding:10px}.product.featured{padding:14px;gap:10px}.platform-grid{grid-template-columns:minmax(245px,1fr) minmax(0,1.7fr);gap:22px}}
@media(max-width:770px){.hero h1{font-size:clamp(33px,8.6vw,46px)}.hero-grid{min-height:0}.stage{height:clamp(255px,83vw,396px)}.stage-device{width:min(49%,235px);left:26%;bottom:14%}.stage-phone{left:8%;width:21%;bottom:15%}.stage-data{width:29%;right:0;top:31%;font-size:11px;padding:6px}.stage-data span{display:none}.stage-device span{font-size:10px}.quick-grid{padding:9px 0;gap:0}.quick-grid .panel:nth-child(odd){border-left:0}.quick-grid .panel:nth-child(n+3){border-top:1px solid #264562}.product-grid{grid-template-columns:1fr 1fr}.product.featured{grid-column:1/-1;grid-row:auto;min-height:115px}.product.featured strong{font-size:18px}.product.featured img{width:57px}.product-grid #ai{grid-column:1/-1}.platform-grid{grid-template-columns:1fr;gap:17px}.platform-section{padding:23px 0;margin-top:25px}.dashboard{padding:8px}.consult{padding:17px}}

@media(min-width:1081px){.stage-device{width:clamp(245px,20vw,294px)}}
@media(min-width:771px) and (max-width:1080px){.stage-device{width:min(47%,235px)}}
/* Final hero composition */
.hero{background:radial-gradient(ellipse at 76% 57%,#123e69 0%,#091f3b 37%,transparent 70%),linear-gradient(115deg,#04101f,#06162b)}
.hero-grid{grid-template-columns:1fr 1.12fr}
.hero-copy{padding-right:10px}
.stage{isolation:isolate}
.planet{width:min(83%,575px);left:7%;top:7%;opacity:.84}
.pedestal{left:10%;width:81%;height:15%;bottom:10%;opacity:.9}
.stage-device{width:clamp(247px,21vw,322px);left:28%;bottom:11%;aspect-ratio:auto;overflow:visible;display:grid;justify-items:center;gap:8px;filter:none}
.stage-device .device-photo{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:720/860;padding:0;border:0;border-radius:0;background:none;filter:drop-shadow(0 12px 15px #001429) drop-shadow(0 0 11px #40b9ff64)}
.stage-device .device-photo img{top:-28.84%;clip-path:polygon(10% 22.6%,93.9% 20%,96.7% 85.2%,11.5% 85.2%);mask-image:none}
.stage-device > span:last-child{position:relative;inset:auto;padding:6px 14px;background:#071e36e8;box-shadow:0 4px 14px #0007}
.stage-phone{width:15%;left:11%;bottom:14%;aspect-ratio:.57;background:#071b32;border-radius:15px;transform:rotate(-12deg);z-index:5}
.stage-phone img{transform:none;object-fit:cover;object-position:65% center}
.stage-phone::after{background:#04152bf2}
.stage-data{width:30%;right:0;top:32%;padding:10px;transform:perspective(660px) rotateY(-13deg) rotateZ(-2deg);z-index:3}
.stage-data img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;border-radius:5px;border:1px solid #537e9f}
.stage-data small{font-size:11px}
@media(min-width:1500px){.hero .wrap{width:min(1480px,calc(100% - 100px))}.hero-grid{min-height:555px}.stage{height:535px}}
@media(min-width:771px) and (max-width:1080px){.stage-device{width:min(48%,236px);left:26%}.stage-data{padding:7px}}
@media(max-width:770px){.hero-copy{padding-right:0}.stage{height:clamp(258px,83vw,394px)}.stage-device{width:min(53%,224px);left:21%;bottom:12%;gap:4px}.stage-device > span:last-child{padding:5px 8px}.stage-phone{width:19%;left:7%;bottom:16%;border-radius:10px}.stage-data{width:32%;right:0;top:34%;padding:5px;z-index:5}.stage-data small{font-size:9px}.planet{width:83%;top:10%}}
 
@media(max-width:770px){.stage-data{width:27%;transform:rotate(-2deg)}.stage-phone{left:6%}}

/* Hero product trio: isolate the actual device silhouette and phone screen. */
.stage-device {
  width: clamp(250px, 19.6vw, 315px);
  left: 26%;
  bottom: 6%;
}
.stage-device .device-photo { aspect-ratio: 540 / 774; }
.stage-device .device-photo img {
  top: -22.5%;
  clip-path: polygon(18.6% 18.6%, 89.5% 18.1%, 83.6% 65.1%, 66% 65.1%, 65.5% 82%, 71.5% 82%, 74.5% 82.4%, 75.9% 83.7%, 80.5% 94.8%, 80.5% 96.1%, 76.8% 97.4%, 75.2% 98.3%, 72.6% 98.3%, 71.9% 97.6%, 41% 97.6%, 39.7% 98.4%, 36.1% 98.4%, 33.6% 96.4%, 33.5% 95.1%, 36.1% 83.8%, 37.5% 82.3%, 52.6% 82%, 52.6% 65.3%, 25.3% 65.3%);
}
.stage-phone { left: 10%; width: 17%; bottom: 16%; }
.stage-phone img {
  position: absolute;
  left: -15%;
  top: 0;
  width: 121%;
  max-width: none;
  height: auto;
  clip-path: polygon(27% 0, 93% 0, 99% 7%, 96% 84%, 89% 94%, 27% 94%, 14% 90%, 11% 82%, 16% 15%);
}
.stage-data { width: 32%; top: 31%; }
.stage-data > span { display: block; font-size: clamp(9px, .85vw, 13px); }
@media (min-width: 771px) and (max-width: 1080px) {
  .stage-device { width: min(44%, 232px); }
}
@media (max-width: 770px) {
  .stage-device { width: min(48%, 182px); left: 23%; bottom: 8%; }
  .stage-phone { width: 19%; left: 7%; }
  .stage-data { width: 30%; top: 36%; }
}
/* Frame the unobstructed share controls from the real NFC capture. */
.stage-phone {
  left: 9%;
  width: 18%;
  aspect-ratio: .71;
  padding: 0;
  border: 2px solid #779dbb;
  border-radius: 17px;
  background: #0a2039;
  transform: rotate(-9deg);
}
.stage-phone img {
  left: -12%;
  top: -1%;
  width: 120%;
  height: auto;
  clip-path: polygon(24% 1%, 93% 1%, 99% 9%, 93% 63%, 15% 63%, 18% 12%);
}
.stage-phone::after {
  padding: 5px 2px;
  background: #081b32;
}
.stage-data { top: 30%; }
@media (max-width: 770px) {
  .stage-phone { left: 6%; width: 21%; border-radius: 10px; }
  .stage-device { left: 23%; }
  .stage-data { top: 35%; width: 30%; }
}
/* Shared blue stage, based on the approved hero composition. */
.hero {
  background: radial-gradient(ellipse at 68% 86%, #0865ac 0%, #062952 32%, transparent 62%),
    linear-gradient(112deg, #030e22, #061a39 65%, #06132b);
}
.hero-grid { grid-template-columns: minmax(0, .78fr) minmax(0, 1.42fr); }
.hero h1 { font-size: clamp(34px, 4.4vw, 73px); line-height: 1.13; }
.hero-emphasis { color: #65dcff; text-shadow: 0 0 26px #1089e58f; }
.stage .planet {
  left: 0;
  top: 22%;
  width: 96%;
  aspect-ratio: 1.34;
  border: 2px solid #60d8ff;
  background: radial-gradient(ellipse at 58% 0, #0b4c80, #07316b66 48%, transparent 73%);
  box-shadow: 0 -6px 29px #159bfaa1, inset 0 9px 25px #129cf669;
  mask-image: linear-gradient(#000 12%, transparent 70%);
}
.stage .pedestal {
  left: 0;
  width: 98%;
  bottom: 7%;
  height: 20%;
  opacity: 1;
  border: 2px solid #86edff;
  background: radial-gradient(ellipse, #167cbb80, #063867 65%);
  box-shadow: 0 0 30px #04bbff8a, inset 0 0 28px #1ba7ef91, 0 13px 0 #074881;
}
.stage-device { left: 25%; bottom: 8%; }
.stage-phone { left: 9%; bottom: 17%; }
.stage-data {
  width: 35%;
  top: auto;
  bottom: 23%;
  right: 1%;
  transform: none;
  background: linear-gradient(145deg,#10294c,#07172d);
  border-color: #88dfff;
  box-shadow: 0 0 18px #29a9f57a, 0 14px 21px #010c20aa;
}
@media (min-width: 1081px) {
  .hero-grid { min-height: 575px; }
  .stage { height: 555px; }
}
@media (max-width: 770px) {
  .hero h1 { font-size: clamp(32px, 8.7vw, 48px); }
  .stage-device { left: 23%; bottom: 8%; }
  .stage-phone { left: 5%; bottom: 16%; }
  .stage-data { width: 29%; bottom: 24%; }
  .stage .pedestal { bottom: 9%; height: 15%; }
}
/* NFC preview: the shell alone establishes the transform and clips the display. */
.stage-phone {
  container-type: inline-size;
  display: block;
  border-color: #81a9c8;
  background: #07131f;
}
.stage-phone::after { content: none; }
.stage-phone .nfc-screen {
  position: absolute;
  inset: 2px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 3cqw;
  padding: 5cqw;
  overflow: hidden;
  border-radius: inherit;
  clip-path: inset(0 round 8cqw);
  background: linear-gradient(#e5f5ff, #fcfdff 40%);
  color: #102a46;
  text-align: center;
  line-height: 1.12;
}
.nfc-kicker { font-size: 6.8cqw; font-weight: 700; color: #335675; }
.nfc-title { font-size: 13cqw; letter-spacing: -.045em; }
.nfc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 2cqw;
}
.nfc-share {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  border-radius: 4cqw;
  background: #eef4ff;
  font-size: 7cqw;
  font-weight: 750;
  white-space: nowrap;
}
.nfc-icon {
  display: grid;
  place-items: center;
  width: 12cqw;
  height: 12cqw;
  border-radius: 3cqw;
  font-size: 8.5cqw;
  color: white;
  background: var(--share-color, #172635);
}
.nfc-share:nth-child(2) { --share-color: #ba2542; }
.nfc-share:nth-child(3) { --share-color: #087850; }
.nfc-share:nth-child(4) { --share-color: #aa4a0c; }
.nfc-share:nth-child(5) { --share-color: #bc460c; }
.nfc-share:nth-child(6) { --share-color: #845112; }
.nfc-action {
  padding: 3.5cqw 0;
  border-radius: 100px;
  background: #144ec4;
  color: white;
  font-size: 8cqw;
  font-weight: 750;
  white-space: nowrap;
}