/* ========================================================= AdInflatable — closely modelled on 360inflatable.com Montserrat · centered hero · hamburger header · full-width category image bands · case carousel · light sections · red. Tweak variables: ========================================================= */ :root{ --white:#FFFFFF; --grey:#F4F4F4; --dark:#0F0F0F; --text:#111111; --muted:#6A6A6A; --line:#E6E6E6; --line-d:#2A2A2A; --accent:#E4000F; /* 360 red — set #FF5A1E for AdInflatable orange */ --tan:#BAB7AC; --maxw:1152px; --f:"Montserrat",system-ui,sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--white);color:var(--text);font-family:var(--f);font-size:16px;line-height:1.7} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3{margin:0;font-weight:700;line-height:1.12;text-transform:uppercase} p{margin:0} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:40px} .eyebrow{font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#9a9a9a} .btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:11px;letter-spacing:.066em;text-transform:uppercase;padding:15px 26px;cursor:pointer;transition:.2s;border:1px solid transparent;border-radius:2px} .btn-p{background:var(--accent);color:#fff}.btn-p:hover{background:#c62a2a} .btn-o{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}.btn-o:hover{border-color:#fff} .btn-ro{background:transparent;color:var(--text);border-color:var(--text)}.btn-ro:hover{background:var(--text);color:#fff} .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)} .rv.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}} /* header — minimal + hamburger */ header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .3s,box-shadow .3s} header.scrolled{background:#fff;box-shadow:0 1px 0 var(--line)} header .wrap{display:flex;align-items:center;padding-block:20px} .logo{font-weight:800;font-size:24px;letter-spacing:.02em;text-transform:uppercase;color:#fff;transition:color .3s} .logo b{color:var(--accent)} header.scrolled .logo{color:var(--text)} nav.main{display:flex;gap:26px;margin-left:auto;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.9);transition:color .3s} header.scrolled nav.main{color:var(--muted)} nav.main a:hover{color:var(--accent)} .head-r{margin-left:28px;display:flex;align-items:center;gap:22px} .head-r .ic{color:#fff;transition:color .3s;cursor:pointer;display:flex} .head-r .ic svg{width:20px;height:20px} .head-r .lang{font-size:12px;letter-spacing:.14em;color:#fff;font-weight:600} header.scrolled .head-r .ic,header.scrolled .head-r .lang{color:var(--text)} .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px} .burger span{width:26px;height:2px;background:#fff;transition:background .3s} header.scrolled .burger span{background:var(--text)} /* overlay menu */ .menu{position:fixed;inset:0;z-index:200;background:#0d0d0f;display:flex;flex-direction:column;padding:20px 26px 32px;opacity:0;pointer-events:none;transition:opacity .26s;overflow-y:auto;-webkit-overflow-scrolling:touch} .menu.open{opacity:1;pointer-events:auto} .menu .m-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.1)} .menu .m-top .logo{color:#fff;font-size:22px;font-weight:800;letter-spacing:.02em} .menu .m-top .logo b{color:var(--accent);font-weight:800} .menu .close{color:#fff;font-size:34px;line-height:1;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;margin-right:-6px} .menu .m-links{display:flex;flex-direction:column;margin-top:8px;flex:1} .menu .m-links a{color:#fff;font-size:20px;font-weight:600;letter-spacing:.01em;padding:18px 2px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;transition:color .2s} .menu .m-links a::after{content:"→";opacity:.35;font-size:16px;transition:transform .2s,opacity .2s} .menu .m-links a:hover,.menu .m-links a:active{color:var(--accent)} .menu .m-links a:hover::after{opacity:1;transform:translateX(4px)} .menu .m-cta{margin-top:24px;background:var(--accent);color:#fff;text-align:center;padding:16px;border-radius:4px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .menu .m-cta:hover{background:#c62a2a} /* side social rail */ .rail-social{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:1px} .rail-social a{width:46px;height:46px;display:grid;place-items:center;background:rgba(20,20,20,.55);backdrop-filter:blur(4px);color:#fff;transition:background .2s} .rail-social a:hover{background:var(--accent)} .rail-social a svg{width:19px;height:19px} .rail-social .top{background:var(--accent)} .rail-social .rail-wechat{position:relative;width:46px;height:46px;display:grid;place-items:center;background:rgba(20,20,20,.55);backdrop-filter:blur(4px);color:#fff;cursor:pointer;transition:background .2s;outline:none} .rail-social .rail-wechat:hover,.rail-social .rail-wechat:focus{background:#09b83e} .rail-social .rail-wechat>svg{width:22px;height:22px} .rail-social .wechat-pop{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) scale(.96);transform-origin:right center;background:#fff;color:#1a1a1a;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.22);padding:14px;width:178px;text-align:center;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s;pointer-events:none} .rail-social .rail-wechat:hover .wechat-pop,.rail-social .rail-wechat:focus .wechat-pop,.rail-social .rail-wechat:focus-within .wechat-pop{opacity:1;visibility:visible;transform:translateY(-50%) scale(1);pointer-events:auto} .rail-social .wechat-pop::after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);border:7px solid transparent;border-left-color:#fff} .rail-social .wechat-pop img{display:block;width:150px;height:150px;border-radius:6px} .rail-social .wechat-pop b{display:block;font-size:12.5px;font-weight:600;margin-top:9px;letter-spacing:0} .rail-social .wechat-pop em{display:block;font-size:11.5px;color:#6b6b6b;font-style:normal;margin-top:2px} /* hero — 45/55 split: copy left (eyebrow → title → subtitle → CTAs → trust bar), product fully in view right */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:108px 0 48px;overflow:hidden;background:#0b0b0d} .hero .grid{display:grid;grid-template-columns:45fr 55fr;gap:48px;align-items:center;width:100%} .hero .copy .eyebrow{color:#9a9a9a} .hero .copy h1{color:#fff;font-size:clamp(34px,3.8vw,50px);text-transform:none;letter-spacing:normal;line-height:1.08;margin-top:14px;font-weight:700} .hero .copy h1 .a{color:var(--accent)} .hero .copy .sub{margin-top:18px;color:#b8b3aa;font-size:16px;line-height:1.7;max-width:44ch;text-transform:none} .hero .copy .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} .hero .copy .ctas .btn-o{border-color:rgba(255,255,255,.6);color:#fff} .hero .trust{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:34px;padding-top:20px;border-top:1px solid #26262b;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#9a9a9a} .hero .trust b{color:#fff;font-weight:700} .hero .trust .sep{color:#3a3a40} .hero .stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px} .hero .stage::before{content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:120%;aspect-ratio:1;pointer-events:none;background:radial-gradient(circle,rgba(143,211,255,.14) 0%,rgba(120,140,170,.06) 40%,transparent 68%);filter:blur(6px)} .hero .floor{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);width:52%;height:54px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 70%);filter:blur(10px)} .hero .pimg{position:relative;display:inline-block;z-index:2;animation:vefloat 6.5s ease-in-out infinite} .hero .pimg img{display:block;max-height:min(520px,58vh);width:auto;filter:drop-shadow(0 40px 36px rgba(0,0,0,.6));transition:opacity .35s ease} @keyframes vefloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @media(prefers-reduced-motion:reduce){.hero .pimg{animation:none}} .hero .hint{position:relative;z-index:2;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#8a8a92;display:flex;align-items:center;gap:8px} .hero .hint::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.35)} @media(max-width:900px){.hero{min-height:auto}.hero .grid{grid-template-columns:1fr;gap:28px}} .hero .hotspot{position:absolute;z-index:5;width:12px;height:12px;cursor:pointer} .hero .hotspot .dot{position:absolute;inset:0;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.28),0 0 14px 2px rgba(255,255,255,.35)} .hero .hotspot .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(255,255,255,.6);animation:hspulse 2.4s ease-out infinite} .hero .hotspot .tip{position:absolute;left:22px;top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;background:rgba(255,255,255,.96);border:0;color:#141416;font-size:11px;font-weight:600;letter-spacing:.02em;padding:8px 13px;border-radius:7px;box-shadow:0 10px 26px -8px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.25s;text-transform:none} .hero .hotspot:hover .tip{opacity:1;transform:translateY(-50%) translateX(0)} @keyframes hspulse{0%{transform:scale(.55);opacity:.85}100%{transform:scale(1.9);opacity:0}} .hero .switcher{position:relative;z-index:2;display:flex;align-items:center;gap:16px;margin-top:2px;width:max-content;max-width:100%;background:rgba(22,22,25,.88);backdrop-filter:blur(10px);border:1px solid #2c2c30;border-radius:14px;padding:9px 14px} .hero .switcher .sw-name{color:#fff;font-size:13px;font-weight:600;letter-spacing:.02em;min-width:160px;text-align:left;text-transform:none} .hero .switcher .sw-name small{display:block;color:#9a9a9a;font-weight:400;font-size:10.5px;margin-top:3px;letter-spacing:.02em} .hero .switcher .sw-dots{display:flex;gap:9px;padding-left:18px;border-left:1px solid #313135} .hero .switcher .sw{width:48px;height:48px;border-radius:12px;background:radial-gradient(circle at 50% 32%,#2a2a2f,#141416);border:1px solid #33333a;cursor:pointer;display:grid;place-items:center;overflow:hidden;transition:.2s;padding:0} .hero .switcher .sw img{max-width:80%;max-height:80%;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))} .hero .switcher .sw:hover{border-color:#666;transform:translateY(-1px)} .hero .switcher .sw.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)} /* ---- hero tech layer (HUD / grid / callouts) ---- */ .hero{--tech:#8FD3FF} .hero .dots{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(60% 60% at 62% 46%,#000 25%,transparent 100%);mask-image:radial-gradient(60% 60% at 62% 46%,#000 25%,transparent 100%)} .hero .wrap{position:relative;z-index:1} .hero .stage .pgrid{position:absolute;left:50%;bottom:66px;transform:translateX(-50%) perspective(620px) rotateX(64deg);transform-origin:50% 100%;width:150%;height:280px;z-index:0;pointer-events:none; background-image:linear-gradient(rgba(143,211,255,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(143,211,255,.24) 1px,transparent 1px);background-size:46px 46px; -webkit-mask-image:radial-gradient(62% 84% at 50% 100%,#000 18%,transparent 74%);mask-image:radial-gradient(62% 84% at 50% 100%,#000 18%,transparent 74%)} .hero .stage .ring{position:absolute;left:50%;top:41%;transform:translate(-50%,-50%);width:min(580px,62vw);aspect-ratio:1;border-radius:50%;border:1px dashed rgba(143,211,255,.24);z-index:0;pointer-events:none;animation:spin 70s linear infinite} .hero .stage .ring::before{content:"";position:absolute;inset:36px;border-radius:50%;border:1px solid rgba(143,211,255,.10)} @keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}} .hero .stage .hud{position:absolute;inset:4% 2% 22%;z-index:1;pointer-events:none} .hero .stage .hud i{position:absolute;width:18px;height:18px;border:1px solid rgba(143,211,255,.55)} .hero .stage .hud i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0} .hero .stage .hud i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0} .hero .stage .hud i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0} .hero .stage .hud i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0} .hero .stage .scan{position:absolute;left:6%;right:6%;top:12%;height:2px;z-index:3;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(143,211,255,.75),transparent);animation:scan 6s ease-in-out infinite} @keyframes scan{0%{top:10%;opacity:0}12%{opacity:.85}50%{top:74%}88%{opacity:.85}100%{top:10%;opacity:0}} .hero .readout{position:relative;z-index:2;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(143,211,255,.85);display:flex;gap:18px;flex-wrap:wrap;justify-content:center} .hero .readout span::before{content:"▸ ";opacity:.6} .hero .hotspot{width:10px;height:10px} .hero .hotspot .dot{background:var(--tech);box-shadow:0 0 0 3px rgba(143,211,255,.22),0 0 12px 2px rgba(143,211,255,.5)} .hero .hotspot .dot::after{border-color:rgba(143,211,255,.7)} .hero .hotspot .line{position:absolute;top:50%;height:1px;width:44px;background:linear-gradient(90deg,var(--tech),rgba(143,211,255,.15))} .hero .hotspot .tip{opacity:1;transform:translateY(-50%);left:auto;background:rgba(10,12,16,.72);color:var(--tech);border:1px solid rgba(143,211,255,.35);font-family:ui-monospace,"SF Mono",Menlo,monospace;font-weight:500;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:4px;box-shadow:none;backdrop-filter:blur(6px)} .hero .hotspot:hover .tip{background:rgba(143,211,255,.14)} .hero .hotspot.r .line{left:14px} .hero .hotspot.r .tip{left:60px} .hero .hotspot.l .line{right:14px;background:linear-gradient(270deg,var(--tech),rgba(143,211,255,.15))} .hero .hotspot.l .tip{right:60px} @media(prefers-reduced-motion:reduce){.hero .stage .ring,.hero .stage .scan{animation:none}} /* ---- hero: 360-style full-bleed usage-scene + motion + tech layer ---- */ .hero.hero-scene{min-height:100vh;display:flex;align-items:flex-end;padding:0 0 60px;background:linear-gradient(180deg,#0a1628 0%,#0b1b30 55%,#0a1220 100%)} /* No blanket transition here: the mousemove parallax (home.js) rewrites transform on every pointer frame, and .8s of easing applied to each write meant the layer never caught up — the whole hero swam behind the cursor. The ease is now opt-in via .is-settling, which the parallax sets only on mouseleave. */ .hero-scene .media{position:absolute;inset:0;z-index:0;overflow:hidden;will-change:transform} .hero-scene .media.is-settling{transition:transform .7s cubic-bezier(.2,.7,.2,1)} /* The photo fills the hero box exactly and is cropped by object-fit:cover — and .marks below reproduces that same painted rectangle, so --hx/--hy on a hotspot are percentages of the PHOTO and stay on the subject at every viewport. Both the slide image and .marks run the same 7s push-in, and hero-fx.js scales .marks about the hero box centre to match, so the callout dots stay welded to their features instead of drifting off them as the zoom runs. The scene still moves — fog/bloom come from .fx, drift from the parallax. */ .hero-scene .media .slides{position:absolute;inset:0} /* A .slide holds nothing but its , so the stacking context its opacity and transform create can never trap .marks / .tint / .scrim / .fx — those stay siblings above it and keep their z-index order. Putting the callouts inside a slide instead would drop them under the scrim. */ .hero-scene .media .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease} .hero-scene .media .slide.is-on{opacity:1} .hero-scene .media .slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 8%;-webkit-mask-image:linear-gradient(90deg,transparent 26%,#000 48%);mask-image:linear-gradient(90deg,transparent 26%,#000 48%)} /* The push-in is an ANIMATION, not a transition: the first slide ships with .is-on already in the markup, and a transition has no previous computed value to move from on the initial render, so it would snap straight to full zoom instead of easing into it. An animation runs from first paint. It also restarts for free when a slide's .is-on is re-applied on the next cycle. */ @keyframes heroPush{from{transform:scale(1)}to{transform:scale(1.035)}} .hero-scene .media .slide.is-on img{animation:heroPush 7s linear forwards} @media(prefers-reduced-motion:reduce){.hero-scene .media .slide{transition:opacity .25s}.hero-scene .media .slide.is-on img{animation:none}} /* The .still rule that used to sit here is gone with the single-image markup — the slideshow's .slide img carries the same crop, mask and object-position. */ .hero-scene .media .vid{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 8%;-webkit-mask-image:linear-gradient(90deg,transparent 26%,#000 48%);mask-image:linear-gradient(90deg,transparent 26%,#000 48%);opacity:0;transition:opacity .8s ease} .hero-scene .media .vid[src]{display:block} .hero-scene .media .vid.is-ready{opacity:1} .hero-scene .media .vid.is-ready~.slides{opacity:0} /* callout layer — hero-fx.js writes left/top/width/height to match the painted photo; z-index 5 keeps the labels above the scrim and the .fx canvas. */ .hero-scene .media .marks{position:absolute;left:0;top:0;width:100%;height:100%;z-index:5;pointer-events:none} /* one hotspot set per slide; visibility:hidden (not just opacity) so the hidden sets cannot be hovered or tabbed into */ .hero-scene .media .hset{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease} .hero-scene .media .hset.is-on{opacity:1;visibility:visible} .hero-scene .media .fx{position:absolute;inset:0;z-index:4;pointer-events:none} /* The top band is heavier than the old hero needed: hero-scene-v3 puts bright white inflatable fabric behind the top-right, and the header stays transparent until it scrolls, so a lighter top stop left the nav white-on-white there. */ .hero-scene .media .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,13,.82) 0%,rgba(11,11,13,.42) 13%,rgba(11,11,13,.12) 34%,rgba(11,11,13,.5) 66%,rgba(11,11,13,.97) 100%),linear-gradient(90deg,rgba(11,11,13,.5),transparent 55%)} .hero-scene .media .tint{position:absolute;inset:0;background:radial-gradient(60% 55% at 68% 42%,rgba(143,211,255,.12),transparent 70%);mix-blend-mode:screen} .hero-scene .tech{position:absolute;inset:0;z-index:2;pointer-events:none} .hero-scene .tech .hud{position:absolute;inset:100px 40px 44px} .hero-scene .tech .hud i{position:absolute;width:22px;height:22px;border:1px solid rgba(143,211,255,.5)} .hero-scene .tech .hud i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0} .hero-scene .tech .hud i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0} .hero-scene .tech .hud i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0} .hero-scene .tech .hud i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0} .hero-scene .tech .ro{position:absolute;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(143,211,255,.8);line-height:1.9} .hero-scene .tech .ro.tl{left:52px;top:112px} .hero-scene .tech .ro.br{right:52px;bottom:56px;text-align:right} .hero-scene .tech .ro b{color:#fff;font-weight:600} .hero-scene .tech .call{position:absolute;pointer-events:auto} .hero-scene .content{position:relative;z-index:3;text-align:left;width:100%} /* The copy column is a full-width box sitting above the .media layer, so its empty right-hand area would swallow clicks aimed at the hero callouts. Let clicks through, and hand them back to anything actually interactive in here. */ .hero-scene .content{pointer-events:none} .hero-scene .content a,.hero-scene .content button,.hero-scene .content [tabindex]{pointer-events:auto} .hero-scene .content .eyebrow{color:#cfd6df} .hero-scene .content h1{color:#fff;font-size:clamp(38px,5.4vw,78px);text-transform:uppercase;letter-spacing:.02em;line-height:1.02;margin:16px 0 0;max-width:13ch} .hero-scene .content h1 .a{color:var(--accent)} .hero-scene .content .sub{margin:18px 0 0;color:#d9d3c9;max-width:48ch;font-size:16px;line-height:1.7} .hero-scene .content .ctas{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap;margin-top:28px} .hero-scene .content .ctas .btn-o{border-color:rgba(255,255,255,.6);color:#fff} .hero-scene .content .trust{display:flex;justify-content:flex-start;gap:12px;flex-wrap:wrap;margin-top:34px;padding-top:0;border-top:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#a9a9b0} .hero-scene .content .trust b{color:#fff} .hero-scene .content>*{opacity:0;transform:translateY(14px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards} .hero-scene .content>*:nth-child(2){animation-delay:.12s} .hero-scene .content>*:nth-child(3){animation-delay:.24s} .hero-scene .content>*:nth-child(4){animation-delay:.36s} .hero-scene .content>*:nth-child(5){animation-delay:.48s} @keyframes rise{to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.hero-scene .content>*{animation:none;opacity:1;transform:none}} /* ---- hero-scene: activated tech layer (dots / readout / hotspots) ---- These selectors already existed but had no markup behind them until now. */ .hero-scene .dots{z-index:1;background-image:radial-gradient(rgba(143,211,255,.16) 1px,transparent 1.2px);background-size:34px 34px;-webkit-mask-image:radial-gradient(64% 62% at 68% 44%,#000 20%,transparent 96%);mask-image:radial-gradient(64% 62% at 68% 44%,#000 20%,transparent 96%)} /* readout sits under the trust row, left-aligned like the rest of the copy */ .hero-scene .content .readout{justify-content:flex-start;margin-top:20px;color:rgba(143,211,255,.78)} .hero-scene .content>*:nth-child(6){animation-delay:.6s} /* ---- hero-scene: banner slideshow nav (2026-09-28) ---- Sits outside .media so the parallax translate doesn't drag it around, and is a sibling of .content so it never collides with the left-aligned readout row. */ .hero-scene .hero-nav{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;display:flex;gap:8px} .hero-scene .hero-nav button{width:26px;height:3px;padding:0;border:0;border-radius:2px;background:rgba(143,211,255,.26);cursor:pointer;transition:background .3s,width .3s} .hero-scene .hero-nav button:hover{background:rgba(143,211,255,.6)} .hero-scene .hero-nav button.on{width:40px;background:var(--tech)} .hero-scene .hero-nav button:focus-visible{outline:2px solid var(--tech);outline-offset:4px} @media(max-width:900px){.hero-scene .hero-nav{bottom:14px}.hero-scene .hero-nav button{width:18px}.hero-scene .hero-nav button.on{width:28px}} /* callouts — --hx/--hy are % of the photo (see .marks); tune against the source image. The dot carries a dark ring so it reads on the white suit AND the night sky. */ .hero-scene .hotspot{left:var(--hx,50%);top:var(--hy,50%);pointer-events:auto;outline:none} .hero-scene .hotspot .dot{background:#EAF6FF;box-shadow:0 0 0 2px rgba(6,14,24,.72),0 0 0 4px rgba(143,211,255,.30),0 0 14px 3px rgba(143,211,255,.55)} .hero-scene .hotspot .dot::after{inset:-6px;border-color:rgba(143,211,255,.85)} .hero-scene .hotspot .line{opacity:.55;box-shadow:0 1px 0 rgba(6,14,24,.5);transition:opacity .25s} .hero-scene .hotspot:hover .line,.hero-scene .hotspot:focus .line{opacity:1} .hero-scene .hotspot .tip{opacity:0;background:rgba(8,10,14,.86);transition:opacity .25s,transform .25s} .hero-scene .hotspot:hover .tip,.hero-scene .hotspot:focus .tip{opacity:1} @media(max-width:900px){.hero-scene .hotspot{display:none}} @media(prefers-reduced-motion:reduce){.hero-scene .content>*:nth-child(6){animation-delay:0s}.hero-scene .hotspot .dot::after{animation:none}} @media(max-width:900px){.hero-scene .tech .ro{display:none}.hero-scene .tech .hud{inset:84px 16px 24px}} /* (old floating-stage rules removed — Veyra framed layout above) */ /* section frame */ .sec{padding-block:104px} .sec-white{background:var(--white)} .sec-grey{background:var(--grey)} .sec-head{text-align:center;max-width:680px;margin:0 auto 60px} .sec-head h2{font-size:clamp(24px,2.6vw,30px);letter-spacing:normal;margin-top:14px} .sec-head .lede{color:var(--muted);font-size:15px;line-height:1.8;font-weight:400;margin-top:18px} .ph{position:relative;overflow:hidden;background:#e6e6e6;display:grid;place-items:center} .ph::before{content:"";position:absolute;inset:0;opacity:.5;background-image:repeating-linear-gradient(45deg,transparent,transparent 11px,rgba(0,0,0,.05) 11px,rgba(0,0,0,.05) 12px)} .ph .tag{position:relative;z-index:1;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#9a9a9a;padding:10px} /* STORY — design + build, text-led */ .story{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:start;margin-top:8px} .story h2{font-size:clamp(26px,3.2vw,40px);letter-spacing:.01em;line-height:1.12} .story h2 .a{color:var(--accent)} .story p{margin-top:22px;color:var(--muted);font-weight:400;font-size:15.5px;line-height:1.85;text-transform:none} .proof{border-top:2px solid var(--text)} .proof>div{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline} .proof .k{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--accent)} .proof h3{font-size:16px;letter-spacing:.01em} .proof p{margin-top:6px;font-size:13.5px;line-height:1.7;color:var(--muted);text-transform:none;font-weight:400} /* the 3D-model-to-built-form render under the two columns; the caption keeps it labelled as a render, same convention as the hero's "Scene render · 1:1" */ .story-twin{position:relative;margin:56px 0 0;overflow:hidden;background:var(--dark)} .story-twin img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 55%} .story-twin figcaption{position:absolute;left:18px;bottom:16px;font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82);background:rgba(6,14,24,.55);border:1px solid rgba(255,255,255,.18);padding:7px 11px;backdrop-filter:blur(4px)} @media(max-width:560px){.story-twin{margin-top:40px}.story-twin figcaption{left:12px;bottom:12px;font-size:9px;letter-spacing:.1em;padding:6px 9px}} /* CASES — coverflow: centre card in colour, neighbours grayscale and shorter */ .cf{position:relative;height:560px;margin-top:10px;overflow:hidden} .cf .track{position:absolute;inset:0} .cf .card{position:absolute;left:50%;bottom:0;width:340px;height:100%;border-radius:6px;box-shadow:0 20px 50px -20px rgba(0,0,0,.45);transform-origin:50% 100%;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .5s,filter .5s;cursor:pointer;overflow:hidden;background:#111;will-change:transform} .cf .card img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) brightness(.72);transition:filter .6s} .cf .card .cap{position:absolute;left:0;right:0;bottom:0;padding:0 22px 34px;text-align:center;color:#fff;opacity:0;transform:translateY(10px);transition:.5s;background:linear-gradient(to top,rgba(0,0,0,.78),transparent)} .cf .card .cap .t{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#fff;opacity:.8} .cf .card .cap h3{color:#fff;font-size:22px;line-height:1.2;margin-top:8px;letter-spacing:.02em} .cf .card .cap .v{display:inline-block;margin-top:14px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#fff;border-bottom:1px solid var(--accent);padding-bottom:4px} .cf .card.is-on{z-index:5} .cf .card.is-on img{filter:none} .cf .card.is-on .cap{opacity:1;transform:none;padding-top:120px} .cf .card[data-p="-3"],.cf .card[data-p="3"]{z-index:1} .cf .card[data-p="-2"],.cf .card[data-p="2"]{z-index:2} .cf .card[data-p="-1"],.cf .card[data-p="1"]{z-index:3} .cf .card.is-off{opacity:0;pointer-events:none} .cf-nav{display:flex;justify-content:center;gap:12px;margin-top:26px} /* .certs-nav 只在手机端出现（桌面端证书是四列 grid，不需要翻页） */ .certs-nav{display:none} .cf-nav button,.certs-nav button{width:48px;height:48px;border:1px solid var(--text);background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center;border-radius:50%;transition:.2s} .cf-nav button:hover,.certs-nav button:hover{background:var(--text);color:#fff} .certs-nav button:disabled{opacity:.25;cursor:default} .certs-nav button:disabled:hover{background:transparent;color:var(--text)} .cf-hint{text-align:center;margin-top:16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} @media(max-width:900px){.cf{height:440px}.cf .card{width:240px}} /* ABOUT */ .about-lead{text-align:center;max-width:720px;margin:0 auto 52px} .about-lead h2{font-size:clamp(24px,2.8vw,32px);letter-spacing:normal;margin-top:14px} .about-lead h2 .a{color:var(--accent)} .about-img{position:relative;overflow:hidden;aspect-ratio:21/9;background:var(--dark)} .about-img .ph{position:absolute;inset:0} .craft{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:64px;align-items:start} .craft h3{font-size:clamp(24px,2.8vw,34px);letter-spacing:.02em;line-height:1.15} .craft h3 .a{color:var(--accent)} .craft p{color:var(--muted);font-weight:400;font-size:15px;line-height:1.85;text-transform:none} .craft p+p{margin-top:18px} .stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:64px;border-top:2px solid var(--text)} .stats>div{padding:26px 0;text-align:center;border-right:1px solid var(--line)} .stats>div:last-child{border-right:0} .stats .n{font-size:clamp(30px,3.6vw,46px);font-weight:800;letter-spacing:.01em} .stats .n b{color:var(--accent)} .stats .l{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px} /* CERTIFICATIONS */ .certs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .cert{background:#fff;border:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:14px} .cert .img{aspect-ratio:3/4;background:#f4f4f4;display:grid;place-items:center;overflow:hidden} .cert .img img{width:100%;height:100%;object-fit:contain} .cert h3{font-size:14px;letter-spacing:.02em;line-height:1.3} .cert p{font-size:12.5px;line-height:1.6;color:var(--muted);text-transform:none;font-weight:400} .cert .std{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)} @media(max-width:900px){.certs{grid-template-columns:repeat(2,1fr)}} /* ≤560px：四张证书改横向滚轮，**一次一张、居中**（原来是一列竖排，3:4 的证书图叠起来太长）。 卡片 flex-basis 100% = 正好等于内容盒宽，所以它天然居中；4 张 + 3 个 12px 间隙 恰好让最后一张也能滚到对齐位（3(C-48+12) = 4(C-48)+84-C，对任意宽度都成立），不用尾部占位。 出血到屏幕两边：.wrap 在这一档是 padding-inline:24px，所以 -24/+24 抵消。 */ @media(max-width:560px){ .certs{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory; margin-inline:-24px;padding:4px 24px 6px;scroll-padding-inline:24px; overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch; scrollbar-width:none} .certs::-webkit-scrollbar{display:none} .cert{flex:0 0 100%;scroll-snap-align:start} .certs-nav{display:flex;justify-content:center;gap:12px;margin-top:22px} } /* ONE-STOP pillars */ .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .pillar{background:#fff;padding:38px 30px;min-height:290px;display:flex;flex-direction:column;border-top:3px solid var(--accent)} .pillar .no{font-size:15px;font-weight:700;letter-spacing:.2em;color:var(--accent)} .pillar h3{font-size:18px;margin-top:20px;letter-spacing:.01em} .pillar p{color:var(--muted);font-size:13.5px;font-weight:400;margin-top:14px;line-height:1.75;text-transform:none} /* materials + precision detail blocks — margin-top matches the .pillars gap so the two rows read as one grid continuing */ .techblocks{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px} .techblock{margin:0;background:#fff;border-top:3px solid var(--accent)} .techblock img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover} .techblock figcaption{padding:26px 30px 32px} .techblock .k{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)} .techblock h3{font-size:18px;margin-top:12px;letter-spacing:.01em} .techblock p{color:var(--muted);font-size:13.5px;font-weight:400;margin-top:12px;line-height:1.75;text-transform:none} @media(max-width:900px){.techblocks{grid-template-columns:1fr}} /* SKETCH feature */ .feature{position:relative;overflow:hidden;background:var(--dark)} .feature .fbg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 60%;opacity:.55} .feature .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,18,40,.92) 0%,rgba(10,18,40,.55) 55%,rgba(10,18,40,.25) 100%)} .feature .fin{position:relative;z-index:2;text-align:left;padding-block:120px;max-width:1152px}.feature .fin .eyebrow{color:#cfd6df} .feature h2{font-size:clamp(40px,5.6vw,76px);font-weight:700;letter-spacing:.01em;line-height:1.02;color:#fff;margin-top:14px} .feature p{color:rgba(255,255,255,.78);margin-top:20px;font-weight:400;text-transform:none;font-size:16px;line-height:1.75;max-width:520px} .fmeta{display:flex;gap:40px;margin:34px 0 30px}.fmeta div{color:rgba(255,255,255,.7);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}.fmeta b{display:block;color:#fff;font-size:30px;letter-spacing:0;line-height:1;margin-bottom:6px} /* SKETCHES — 设计库：六条产品线的手绘稿，悬停/聚焦切到对应实拍 排版：两行 × 每行三格，宽度错落。7 单位栅格，主推品类（卡通气模 / 节日造型）占 3 单位宽， 其余两格各占 2 单位；第 2 行左右反转 —— 两张主推图落在对角（左上 / 右下）。 行内靠 flex 拉伸等高：窄卡的线稿在框内居中，白色卡片在灰底上四边是齐的， 否则窄卡会在下方留出一块灰洞（试过，像出错）。 */ #sketches .sec-head{text-align:left;max-width:none;margin:0 0 48px;padding-top:22px;border-top:2px solid var(--text)} #sketches .sec-head h2{font-size:clamp(26px,3vw,36px)} .skgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:22px;align-items:stretch} .skgrid .sk{margin:0;background:#fff;border:1px solid var(--line);outline-offset:3px;display:flex;flex-direction:column;transition:border-color .25s,transform .25s} .skgrid .sk:nth-child(1){grid-column:span 3} .skgrid .sk:nth-child(2){grid-column:span 2} .skgrid .sk:nth-child(3){grid-column:span 2} .skgrid .sk:nth-child(4){grid-column:span 2} .skgrid .sk:nth-child(5){grid-column:span 2} .skgrid .sk:nth-child(6){grid-column:span 3} .skgrid .sk:hover,.skgrid .sk:focus-visible{border-color:var(--text);transform:translateY(-3px)} /* aspect-ratio 提供固有高度（决定行高），flex-grow 让窄卡长到跟宽卡一样高 */ .skgrid .skm{position:relative;aspect-ratio:4/3;flex:1 1 auto;overflow:hidden;background:#fff} .skgrid .skm img{display:block;width:100%;height:100%;object-fit:contain} .skgrid .skm .real{position:absolute;inset:0;object-fit:cover;opacity:0;transition:opacity .45s ease} .skgrid .sk:hover .skm .real,.skgrid .sk:focus-visible .skm .real{opacity:1} /* 触屏没有指针悬停，上面那条 :hover 永远不触发 —— 手机用户从头到尾只看得到线稿、 看不到实拍。改成「视口里最完整的那张自动显彩图」，参照 360inflatable 首页 FROM IDEA TO IMPACT 的做法（那边是 JS 给最可见的卡加 --viewport-hover）。 判据用 (hover:none) 而不是宽度断点：真正缺的是 hover 这个能力，不是屏幕小； 窄窗口的桌面用户不该因此丢掉悬停切图。 .is-inview 必须写在 :hover{opacity:0} 之后 —— 同等特异性靠源码顺序取胜， 这样触屏上残留的粘滞 hover 不会跟自动显图打架（360 也是这么压的）。 */ @media(hover:none){ .skgrid .sk:hover .skm .real{opacity:0} .skgrid .sk.is-inview .skm .real{opacity:1} } /* 卡片整体是 ：caption 右侧一个 → 表明可点，悬停时右移变深 */ .skgrid .skcap{display:flex;align-items:center;gap:8px;padding:14px 16px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--muted);border-top:1px solid var(--line)} .skgrid .skcap::after{content:"→";margin-left:auto;transition:color .25s,transform .25s} .skgrid .sk:hover .skcap::after,.skgrid .sk:focus-visible .skcap::after{color:var(--text);transform:translateX(3px)} /* ≤900px：两栏。两张主推图（第 1、6 格）整行通栏，其余两两并排，行内仍拉伸等高 */ @media(max-width:900px){ .skgrid{grid-template-columns:repeat(2,1fr);column-gap:16px;row-gap:16px} .skgrid .sk:nth-child(n){grid-column:span 1} .skgrid .sk:nth-child(1),.skgrid .sk:nth-child(6){grid-column:span 2} } @media(max-width:560px){ .skgrid{grid-template-columns:1fr;row-gap:14px} .skgrid .sk:nth-child(n){grid-column:auto} .skgrid .skcap{padding:11px 12px;font-size:10.5px;letter-spacing:.06em} } @media(prefers-reduced-motion:reduce){.skgrid .sk:hover,.skgrid .sk:focus-visible{transform:none}.skgrid .skm .real{transition:none}.skgrid .skcap::after{transition:none}.skgrid .sk:hover .skcap::after,.skgrid .sk:focus-visible .skcap::after{transform:none}} /* FAQ */ .faq-grid{display:grid;grid-template-columns:.62fr 1.38fr;gap:56px;align-items:start} .faq-lead h2{font-size:clamp(26px,2.8vw,34px);letter-spacing:normal;margin-top:14px}.faq-lead p{color:var(--muted);margin:16px 0 24px;font-weight:400;text-transform:none;line-height:1.75;font-size:14.5px} .faq{display:flex;flex-direction:column;gap:12px}.qa{border:1px solid var(--line);background:#fff;padding:0 26px;transition:.25s}.qa.open{border-color:var(--text)}.qa:hover{border-color:var(--text)} .qa .q{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 0;cursor:pointer;font-size:15px;font-weight:700;text-transform:none} .qa .pm{flex:none;width:30px;height:30px;border-radius:50%;background:#f4f4f4;display:grid;place-items:center;color:var(--text);font-size:18px;line-height:1;transition:.25s} .qa.open .pm{transform:rotate(45deg);background:var(--accent);color:#fff} .qa .a{color:var(--muted);max-width:74ch;overflow:hidden;max-height:0;transition:max-height .35s,padding .35s;padding:0;font-weight:400;font-size:14px;line-height:1.8} .qa.open .a{max-height:300px;padding:0 0 24px} /* CTA band */ .cta-band{background:var(--accent);color:#fff;text-align:center;padding-block:100px} .cta-band h2{font-size:clamp(26px,3.2vw,40px);font-weight:800;color:#fff;letter-spacing:normal} .cta-band p{margin:18px auto 0;max-width:46ch;opacity:.92;font-weight:400;text-transform:none} .cta-band .b{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap} .cta-band .btn-w{background:#fff;color:var(--text)}.cta-band .btn-w:hover{background:#111;color:#fff} .cta-band .btn-ow{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)} /* footer */ footer{background:var(--dark);color:var(--tan);padding-block:64px 30px} .foot .wrap{max-width:1360px} .foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line-d);align-items:start} .foot .logo{color:#fff} .foot h4{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 16px} .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px} .foot a{font-size:13.5px;color:var(--tan);text-transform:none}.foot a:hover{color:#fff} .foot .about p{color:var(--tan);font-size:13.5px;margin-top:14px;max-width:34ch;line-height:1.6;text-transform:none;font-weight:400} .foot .ct{margin:22px 0 0;padding:22px 0 0;border-top:1px solid var(--line-d);font-size:13px;color:var(--tan);display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px} .foot .ct a+a::before,.foot .ct span+a::before,.foot .ct a+span::before{content:"·";margin-right:12px;color:var(--line-d)} .foot .ct span,.foot .ct a{color:var(--tan);text-transform:none;line-height:1.55}.foot .ct a:hover{color:#fff} .foot-social{display:flex;gap:9px;margin-top:20px} .foot-social a{width:34px;height:34px;border:1px solid var(--line-d);border-radius:50%;display:grid;place-items:center;color:var(--tan);transition:.2s} .foot-social a:hover{color:#fff;border-color:#fff} .foot-bot{padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11.5px;letter-spacing:.04em;color:#7c7a72;text-transform:uppercase} .foot-bot a{color:#7c7a72}.foot-bot a:hover{color:#fff} @media(max-width:900px){ .wrap{padding-inline:24px} nav.main{display:none} .burger{display:flex} .head-r{margin-left:auto} .rail-social{display:none} .craft,.faq-grid,.story{grid-template-columns:1fr;gap:30px} .pillars{grid-template-columns:repeat(2,1fr)} .stats{grid-template-columns:repeat(2,1fr)} .stats>div:nth-child(2n){border-right:0} .stats>div{border-bottom:1px solid var(--line)} .stats>div:nth-last-child(-n+2){border-bottom:0} .foot-grid{grid-template-columns:1fr 1fr} .ccard{width:300px}.ccard.wideC{width:380px} .about-img{aspect-ratio:16/9} } @media(max-width:560px){ .sec{padding-block:64px} .pillars{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr;gap:30px 24px} .foot .about{grid-column:1/-1} .foot .ct{gap:8px 0;flex-direction:column;align-items:flex-start} .foot .ct a+a::before,.foot .ct span+a::before,.foot .ct a+span::before{display:none} .catrail{padding-inline:20px} .catcard{width:78vw} } /* video blocks */ .vidbox{position:relative;background:#000}.vidbox video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .vidbox .play{position:absolute;inset:0;z-index:2;border:0;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.05));cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#fff;font:inherit} .vidbox .play span{width:84px;height:84px;border-radius:50%;background:var(--accent);display:grid;place-items:center;transition:transform .25s}.vidbox .play span::after{content:"";border-left:22px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:5px} .vidbox .play:hover span{transform:scale(1.08)}.vidbox .play b{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase} .vidbox.playing .play{display:none} /* The band background is the bubble-tent clip, as it was before the 2026-09-28 still experiment. .fbg stays display:none — home.js still paints it from the demo set, but the