:root{
--bg:#040507;
--bg-2:#07090d;
--panel:#0b0e13;
--line:rgba(255,255,255,0.09);
--ink:#f5f5f7;
--dim:#a1a1a6;
--mute:#6e6e73;
--cyan:#5fe8f0;
--cyan-2:#3ec6ff;
--red:#E8392E;
--glow:0 0 24px rgba(95,232,240,.55), 0 0 60px rgba(62,198,255,.25);
--nav-h:72px;
--pad:clamp(20px, 5vw, 72px);
--max:1280px;
--ease:cubic-bezier(.2,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif;
background:var(--bg);color:var(--ink);
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;line-height:1.5;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.eyebrow{
font-size:11px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--dim);
}
.glow-text{
background:linear-gradient(100deg,#8ff6ff 0%,var(--cyan) 40%,var(--cyan-2) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 0 18px rgba(95,232,240,.35));
}
h1,h2,h3{font-weight:300;letter-spacing:-.025em;line-height:1.05}
h2{font-size:clamp(36px,5.2vw,64px)}
.lede{font-size:clamp(16px,1.35vw,19px);color:var(--dim);font-weight:300;max-width:34em}
/* buttons */
.btn{
display:inline-flex;align-items:center;gap:10px;
padding:14px 26px;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:.01em;
transition:transform .3s var(--ease),background .3s,box-shadow .3s,border-color .3s;
white-space:nowrap;
}
.btn svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-solid{background:#fff;color:#000}
.btn-solid:hover{box-shadow:0 0 0 6px rgba(255,255,255,.08),0 10px 40px rgba(95,232,240,.25)}
.btn-ghost{border:1px solid rgba(255,255,255,.35);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-glow{border:1px solid rgba(95,232,240,.55);color:#fff}
.btn-glow:hover{box-shadow:var(--glow);border-color:var(--cyan)}
.link{
display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);
padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .3s,gap .3s var(--ease);
}
.link svg{width:14px;height:14px}
.link:hover{border-color:var(--cyan);gap:14px}
/* ---------- NAV ---------- */
.nav{
position:fixed;top:0;right:0;bottom:auto;left:0;height:var(--nav-h);z-index:100;
transition:background .4s,border-color .4s,-webkit-backdrop-filter .4s;
transition:background .4s,border-color .4s,backdrop-filter .4s;
transition:background .4s,border-color .4s,backdrop-filter .4s,-webkit-backdrop-filter .4s;
border-bottom:1px solid transparent;
}
.nav.scrolled{
background:rgba(4,5,7,.72);border-color:var(--line);
backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
}
.nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:none}
.logo img{height:34px;width:auto}
.nav ul{list-style:none;display:flex;gap:36px}
.nav ul a{font-size:13px;color:rgba(245,245,247,.78);transition:color .2s}
.nav ul a:hover{color:#fff}
.nav ul a[aria-current=page]{color:#fff;text-shadow:0 0 14px rgba(95,232,240,.6)}
.nav .btn{padding:10px 20px;font-size:13px}
.menu{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;position:relative}
.menu span{position:absolute;left:10px;right:10px;height:1.5px;background:#fff;transition:transform .3s,top .3s}
.menu span:nth-child(1){top:15px}.menu span:nth-child(2){top:23px}
.nav.open .menu span:nth-child(1){top:19px;transform:rotate(45deg)}
.nav.open .menu span:nth-child(2){top:19px;transform:rotate(-45deg)}
/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2}
.hero-bg img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:50% center;object-position:50% center;transform:scale(1.08);animation:heroZoom 18s var(--ease) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero::before{
content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;
background:
linear-gradient(90deg,rgba(4,5,7,.8) 0%,rgba(4,5,7,.58) 32%,rgba(4,5,7,.1) 62%,rgba(4,5,7,0) 100%),
linear-gradient(180deg,rgba(4,5,7,.55) 0%,rgba(4,5,7,0) 22%,rgba(4,5,7,0) 70%,var(--bg) 100%);
}
.hero-main{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:none;margin:0;padding-top:calc(var(--nav-h) + 48px);padding-bottom:72px}
.hero-main > *{max-width:760px}
.hero h1{font-size:clamp(46px,7.4vw,104px);font-weight:200;letter-spacing:-.035em;line-height:.98;margin:26px 0 30px}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .l > span{display:inline-block;transform:translateY(105%);animation:rise 1.1s var(--ease) forwards}
.hero h1 .l:nth-child(2) > span{animation-delay:.12s}
.hero h1 .l:nth-child(3) > span{animation-delay:.24s}
@keyframes rise{to{transform:none}}
.hero .eyebrow,.hero .lede,.hero .ctas{opacity:0;animation:fade 1s var(--ease) forwards}
.hero .eyebrow{animation-delay:.05s}
.hero .lede{animation-delay:.5s;color:rgba(245,245,247,.78)}
.hero .ctas{animation-delay:.7s;display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* spec strip */
.specs{
position:relative;z-index:2;
border-top:1px solid var(--line);
background:linear-gradient(180deg,rgba(4,5,7,.35),rgba(4,5,7,.85));
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.specs ul{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);max-width:none}
.specs li{display:flex;align-items:center;gap:16px;padding:28px 12px 28px 0}
.specs li + li{padding-left:28px;border-left:1px solid var(--line)}
.specs svg{width:30px;height:30px;flex:none;stroke:var(--ink);opacity:.9}
.specs b{display:block;font-size:14px;font-weight:500}
.specs small{font-size:12.5px;color:var(--dim)}
/* ---------- SECTIONS ---------- */
section{position:relative}
.sec{padding:clamp(96px,13vw,168px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:64px;flex-wrap:wrap}
.sec-head h2{margin-top:20px}
.sec-head .side{max-width:380px;color:var(--dim);font-size:15px}
.sec-head .side .link{margin-top:18px}
/* reveal */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}
/* ---------- TECHNOLOGY ---------- */
.tech{background:radial-gradient(60% 60% at 20% 50%,rgba(62,198,255,.10),transparent 70%)}
.tech-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,7vw,110px);align-items:center}
.tech-media{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/3.4;box-shadow:0 40px 120px -30px rgba(62,198,255,.35)}
.tech-media img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transform:scale(1.12);transition:transform 1.6s var(--ease)}
.tech-media.in img{transform:scale(1)}
.tech-media::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.tech-media .tag{
position:absolute;left:20px;bottom:20px;padding:10px 16px;border-radius:999px;font-size:12px;
background:rgba(0,0,0,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;
}
.tech h2{margin:20px 0 28px}
.tech .lede{margin-bottom:40px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden;margin-top:clamp(72px,9vw,120px)}
.pillar{background:var(--bg);padding:40px 34px 44px;transition:background .4s}
.pillar:hover{background:var(--panel)}
.pillar .n{font-size:12px;color:var(--cyan);letter-spacing:.2em}
.pillar h3{font-size:26px;margin:18px 0 12px}
.pillar p{color:var(--dim);font-size:15px}
/* ---------- PRODUCTS ---------- */
.products{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tm{font-size:.45em;vertical-align:super;letter-spacing:0;font-weight:300}
.series{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.card{
position:relative;border-radius:26px;overflow:hidden;background:var(--panel);
border:1px solid var(--line);min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;
transition:transform .6s var(--ease),border-color .4s,box-shadow .6s var(--ease);isolation:isolate;
}
.card:hover{transform:translateY(-6px);border-color:rgba(95,232,240,.35);box-shadow:0 30px 80px -30px rgba(62,198,255,.35)}
.card.w3{grid-column:span 3}.card.w2{grid-column:span 2}.card.w4{grid-column:span 4}
.card .media{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}
.card .media video,.card .media img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover .media video,.card:hover .media img{transform:scale(1.04)}
.card .media::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(11,14,19,0) 35%,rgba(11,14,19,.92) 88%)}
.card .body{padding:30px 32px 32px}
.card .num{font-size:11px;letter-spacing:.28em;color:var(--dim);text-transform:uppercase}
.card h3{font-size:clamp(26px,2.4vw,34px);margin:10px 0 8px}
.card h3 small{font-size:.5em;color:var(--dim);margin-left:4px}
.card p{color:var(--dim);font-size:15px;max-width:26em}
.card.light .media{background:#fff}
.card.light .media img{-o-object-fit:contain;object-fit:contain;padding:8% 6% 30%}
.card.light .media::after{background:linear-gradient(180deg,rgba(255,255,255,0) 45%,rgba(11,14,19,.96) 86%)}
/* wire illustration */
.wire-art{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:radial-gradient(70% 60% at 50% 35%,rgba(62,198,255,.12),transparent 70%)}
.wire-art svg{width:100%;height:72%}
.wire-art path{fill:none;stroke:var(--cyan);stroke-width:3;stroke-linecap:round;filter:url(#softglow);stroke-dasharray:1400;stroke-dashoffset:1400}
.card.in .wire-art path{animation:draw 3.2s var(--ease) forwards}
.card.in .wire-art path:nth-child(2){animation-delay:.35s}
.card.in .wire-art path:nth-child(3){animation-delay:.7s}
@keyframes draw{to{stroke-dashoffset:0}}
.live{position:absolute;top:22px;right:22px;display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
/* ---------- APPLICATIONS ---------- */
.apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.app{
position:relative;border-radius:24px;padding:34px;min-height:300px;overflow:hidden;
background:linear-gradient(180deg,#0b0e13,#07090c);border:1px solid var(--line);
display:flex;flex-direction:column;justify-content:space-between;transition:border-color .4s,transform .6s var(--ease);
}
.app:hover{border-color:rgba(95,232,240,.3);transform:translateY(-4px)}
.app .art{height:130px;display:flex;align-items:center}
.app .art svg{height:100%;width:auto;overflow:visible}
.app .art .base{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.app .art .lit{fill:none;stroke:var(--cyan);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;filter:url(#softglow);opacity:.55;transition:opacity .5s}
.app:hover .art .lit{opacity:1}
.app h3{font-size:24px;margin-bottom:8px}
.app p{color:var(--dim);font-size:14.5px}
.app .soon{position:absolute;top:24px;right:24px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
/* ---------- COMPARE ---------- */
.compare{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);margin-top:12px}
.stat .big{font-size:clamp(56px,7vw,96px);font-weight:200;letter-spacing:-.04em;line-height:1}
.stat .big em{font-style:normal;font-size:.4em;color:var(--dim);margin-left:6px;letter-spacing:0}
.stat p{color:var(--dim);margin-top:14px;font-size:15px;max-width:22em}
.stat hr{border:0;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);margin-bottom:26px;opacity:.6}
/* ---------- STORY / TIMELINE ---------- */
.story{background:var(--bg-2);border-top:1px solid var(--line);overflow:hidden}
.timeline{position:relative;margin-top:24px}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:0;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.step{scroll-snap-align:start;position:relative;padding:70px 28px 8px 0}
.step::before{content:"";position:absolute;top:32px;left:0;right:0;height:1px;background:rgba(255,255,255,.14)}
.step.past::before{background:linear-gradient(90deg,rgba(95,232,240,.8),rgba(95,232,240,.5))}
.step.now::before{background:linear-gradient(90deg,rgba(95,232,240,.8),rgba(255,255,255,.14) 60%)}
.step .dot{position:absolute;top:27px;left:0;width:11px;height:11px;border-radius:50%;background:var(--bg-2);border:1px solid rgba(255,255,255,.35)}
.step.past .dot{background:var(--cyan);border-color:var(--cyan)}
.step.now .dot{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 0 6px rgba(95,232,240,.15),var(--glow);animation:pulse 2.4s infinite}
.step .here{position:absolute;top:2px;left:0;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.step .k{font-size:12px;color:var(--mute);letter-spacing:.14em}
.step h3{font-size:28px;margin:8px 0 4px}
.step .yr{font-size:13px;color:var(--cyan);opacity:.85}
.step p{color:var(--dim);font-size:14px;margin-top:12px;max-width:18em}
.step.future h3{color:rgba(245,245,247,.7)}
.tl-nav{display:flex;gap:10px}
.tl-nav button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:none;color:#fff;cursor:pointer;display:grid;place-items:center;transition:border-color .3s,background .3s}
.tl-nav button:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.tl-nav svg{width:16px;height:16px}
/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;padding:clamp(120px,16vw,220px) 0;text-align:center;isolation:isolate}
.cta .horizon{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}
.cta .horizon svg{position:absolute;left:50%;bottom:0;width:max(1600px,140%);transform:translateX(-50%)}
.cta .horizon .arc{fill:none;stroke:var(--cyan);stroke-width:2.2;filter:url(#bigglow);stroke-dasharray:2400;stroke-dashoffset:2400}
.cta.in .horizon .arc{animation:draw 3.5s var(--ease) forwards}
.cta .horizon .arc2{stroke-width:1;opacity:.35}
.cta::before{content:"";position:absolute;top:auto;right:0;bottom:0;left:0;height:70%;z-index:-2;background:radial-gradient(60% 80% at 50% 100%,rgba(62,198,255,.22),transparent 70%)}
.cta h2{font-size:clamp(44px,7vw,96px);font-weight:200}
.cta .lede{margin:28px auto 44px;text-align:center}
.cta .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line);padding:72px 0 40px;font-size:13px;color:var(--dim)}
.foot{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
.foot img{height:40px;width:auto;margin-bottom:18px}
.foot h4{font-size:12px;font-weight:500;color:var(--ink);margin-bottom:16px;letter-spacing:.04em}
.foot ul{list-style:none;display:grid;gap:10px}
.foot a:hover{color:#fff}
.legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:64px;padding-top:24px;border-top:1px solid var(--line);color:var(--mute);font-size:12px}
/* ---------- INNER PAGES ---------- */
.page-hero{position:relative;padding:calc(var(--nav-h) + clamp(80px,12vw,150px)) 0 clamp(64px,8vw,110px);overflow:hidden;isolation:isolate}
.page-hero::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:radial-gradient(50% 70% at 12% 0%,rgba(62,198,255,.16),transparent 70%)}
.page-hero h1{font-size:clamp(48px,7.4vw,104px);font-weight:200;letter-spacing:-.035em;line-height:1;margin:24px 0 28px}
.page-hero.img{min-height:78svh;display:flex;align-items:flex-end}
.page-hero.img .bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2}
.page-hero.img .bg img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.page-hero.img::before{background:linear-gradient(90deg,rgba(4,5,7,.9),rgba(4,5,7,.35) 60%,rgba(4,5,7,.1)),linear-gradient(180deg,rgba(4,5,7,.4),transparent 30%,transparent 60%,var(--bg))}
.hero-main{max-width:none}
.page-hero .wrap > *{max-width:820px}
.jump{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px}
.jump a{font-size:13px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);color:var(--dim);transition:color .3s,border-color .3s}
.jump a:hover{color:#fff;border-color:rgba(95,232,240,.5)}
/* how it works */
.layers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
.layer{border:1px solid var(--line);border-radius:22px;padding:30px;background:var(--panel)}
.layer .n{font-size:12px;color:var(--cyan);letter-spacing:.2em}
.layer h3{font-size:22px;margin:16px 0 8px}
.layer p{color:var(--dim);font-size:14.5px}
.stack{position:relative;height:220px;margin:0 auto 20px;max-width:520px;perspective:900px}
.stack span{position:absolute;left:10%;right:10%;height:46px;border-radius:10px;transform:rotateX(58deg);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.03)}
.stack span:nth-child(1){top:20px}.stack span:nth-child(2){top:62px}.stack span:nth-child(4){top:146px}.stack span:nth-child(5){top:188px;opacity:.6}
.stack span:nth-child(3){top:104px;background:rgba(95,232,240,.25);border-color:var(--cyan);box-shadow:var(--glow);animation:pulse 3s infinite}
/* comparison table */
.table{width:100%;border-collapse:collapse;margin-top:48px;font-size:15px}
.table th,.table td{text-align:left;padding:20px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.table thead th{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.table thead th:nth-child(2){color:var(--cyan)}
.table td:first-child{color:var(--dim);width:24%}
.table td:nth-child(2){color:var(--ink)}
.table td:nth-child(3){color:var(--mute)}
/* product / application detail rows */
.rows{display:grid;gap:clamp(80px,10vw,140px)}
.row{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(36px,6vw,96px);align-items:center;scroll-margin-top:calc(var(--nav-h) + 40px)}
.row.flip .row-media{order:2}
.row-media{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/3;background:var(--panel);border:1px solid var(--line);box-shadow:0 40px 120px -40px rgba(62,198,255,.3)}
.row-media video,.row-media img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.row-media.light{background:#fff}
.row-media.light img{-o-object-fit:contain;object-fit:contain;padding:6%}
.row-media .wire-art{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center}
.row-media .wire-art svg{height:80%}
.row-media.in .wire-art path{animation:draw 3.2s var(--ease) forwards}
.row-media.in .wire-art path:nth-child(2){animation-delay:.35s}
.row-media.in .wire-art path:nth-child(3){animation-delay:.7s}
.row-media.art{display:flex;align-items:center;justify-content:center;background:radial-gradient(70% 70% at 50% 45%,rgba(62,198,255,.1),transparent 70%),var(--panel)}
.row-media.art svg{width:70%;height:auto;overflow:visible}
.row-media.art .base{fill:none;stroke:rgba(255,255,255,.25);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.row-media.art .lit{fill:none;stroke:var(--cyan);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;filter:url(#softglow)}
.row .num{font-size:11px;letter-spacing:.28em;color:var(--dim);text-transform:uppercase}
.row h2{font-size:clamp(40px,4.6vw,60px);margin:14px 0 18px}
.row .lede{margin-bottom:28px}
.ticks{list-style:none;display:grid;gap:12px;margin-bottom:34px;font-size:15px}
.ticks li{display:flex;gap:12px;align-items:baseline}
.ticks li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);transform:translateY(-2px)}
.chip{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);border:1px solid rgba(95,232,240,.35);border-radius:999px;padding:6px 12px;margin-left:12px;vertical-align:middle}
.actions{display:flex;gap:12px;flex-wrap:wrap}
/* story */
.vision{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.vision .pillar{border:1px solid var(--line);border-radius:22px}
.vision .pillar h3{font-size:30px}
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:56px}
.person{display:flex;gap:22px;align-items:center;border:1px solid var(--line);border-radius:22px;padding:28px;background:var(--panel)}
.avatar{flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:300;border:1px solid rgba(95,232,240,.5);box-shadow:0 0 24px rgba(95,232,240,.2) inset}
.person h3{font-size:22px}
.person p{color:var(--dim);font-size:14px}
/* contact */
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(40px,7vw,110px);align-items:start}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .full{grid-column:1/-1}
.form label{display:block;font-size:12px;color:var(--dim);margin-bottom:8px;letter-spacing:.04em}
.form input,.form select,.form textarea{
width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--panel);
border:1px solid var(--line);border-radius:14px;padding:15px 16px;outline:none;transition:border-color .3s,box-shadow .3s;
}
.form select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 17px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.form textarea{min-height:160px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-color:rgba(95,232,240,.6);box-shadow:0 0 0 4px rgba(95,232,240,.1)}
.form button{border:0;cursor:pointer;font:inherit;font-size:14px;font-weight:500}
.form .note{font-size:12.5px;color:var(--mute);align-self:center}
.form .thanks{display:none;grid-column:1/-1;color:var(--cyan);font-size:14px}
.form.sent .thanks{display:block}
.aside{display:grid;gap:18px}
.aside .box{border:1px solid var(--line);border-radius:22px;padding:30px;background:var(--panel)}
.aside h3{font-size:20px;margin-bottom:14px}
.aside ol{list-style:none;counter-reset:s;display:grid;gap:14px}
.aside ol li{counter-increment:s;display:flex;gap:14px;color:var(--dim);font-size:14.5px}
.aside ol li::before{content:counter(s,decimal-leading-zero);color:var(--cyan);font-size:12px;letter-spacing:.1em;padding-top:2px}
.aside a.mail{font-size:18px;color:#fff;border-bottom:1px solid rgba(95,232,240,.5)}
/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
.specs ul{grid-template-columns:repeat(3,1fr)}
.specs li:nth-child(4){border-left:0;padding-left:0}
.specs li:nth-child(n+4){border-top:1px solid var(--line)}
.series{grid-template-columns:repeat(2,1fr)}
.card.w2,.card.w3{grid-column:span 1}.card.w4{grid-column:span 2}
.apps-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:880px){
.nav ul,.nav .btn{display:none}
.menu{display:block}
.nav.open{background:rgba(4,5,7,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);height:auto;border-color:var(--line)}
.nav.open .wrap{flex-wrap:wrap;height:auto;padding-top:16px;padding-bottom:24px}
.nav.open ul{display:flex;flex-direction:column;gap:0;width:100%;order:3;margin-top:12px}
.nav.open ul a{display:block;padding:14px 0;font-size:17px;border-bottom:1px solid var(--line)}
.tech-grid{grid-template-columns:1fr}
.pillars,.compare{grid-template-columns:1fr}
.foot{grid-template-columns:1fr 1fr}
.foot > div:first-child{grid-column:1/-1}
.row,.contact-grid{grid-template-columns:1fr}
.row.flip .row-media{order:0}
.layers{grid-template-columns:1fr 1fr}
.team,.vision{grid-template-columns:1fr}
}
@media (max-width:640px){
.hero-bg img{-o-object-position:68% center;object-position:68% center}
.hero::before{background:linear-gradient(180deg,rgba(4,5,7,.6) 0%,rgba(4,5,7,.55) 45%,rgba(4,5,7,.9) 75%,var(--bg) 100%)}
.specs ul{grid-template-columns:1fr 1fr}
.specs li,.specs li + li{padding:18px 0;border-left:0}
.specs li:nth-child(even){padding-left:18px;border-left:1px solid var(--line)}
.specs li:nth-child(n+3){border-top:1px solid var(--line)}
.specs li:nth-child(5){grid-column:1/-1;border-left:0;padding-left:0}
.specs small{font-size:11.5px}
.specs svg{width:24px;height:24px}
.series,.apps-grid{grid-template-columns:1fr}
.card.w4{grid-column:span 1}
.card{min-height:400px}
.btn{padding:13px 22px}
.layers,.form{grid-template-columns:1fr}
.table{font-size:13.5px}
.table th,.table td{padding:14px 8px}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.rv{opacity:1;transform:none}
}
/* "EL STYELIGHTS™" line that sits in front of every series name */
.pre{display:block;font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px}
.row h2 .pre{font-size:12px;margin-bottom:14px}
/* ---------- FAQ (home) ---------- */
.faq{border-top:1px solid var(--line);background:radial-gradient(50% 60% at 85% 20%,rgba(62,198,255,.08),transparent 70%)}
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,7vw,110px);align-items:start}
.faq-side{position:-webkit-sticky;position:sticky;top:calc(var(--nav-h) + 32px)}
.faq-side h2{margin:20px 0 24px}
.chips-f{display:flex;flex-wrap:wrap;gap:8px;margin:36px 0 40px}
.chip-f{font:inherit;font-size:13px;color:var(--dim);background:none;border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;transition:color .3s,border-color .3s,background .3s,box-shadow .3s}
.chip-f:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.chip-f.on{color:#000;background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 24px rgba(95,232,240,.45)}
.faq-ask{display:flex;align-items:center;gap:18px;padding:22px 24px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.faq-ask b{font-weight:500}
.faq-ask p{font-size:13.5px;color:var(--dim)}
.faq-ask .btn{margin-left:auto;padding:10px 18px;font-size:13px}
.bulb{flex:none;width:12px;height:12px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 6px rgba(95,232,240,.12),var(--glow);animation:pulse 2.4s infinite}
.faq-list{display:grid;gap:12px}
.qa{position:relative;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,#0b0e13,#08090d);overflow:hidden;transition:border-color .4s,box-shadow .5s var(--ease),opacity .4s,transform .5s var(--ease)}
.qa::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:2px;background:var(--cyan);box-shadow:var(--glow);transform:scaleY(0);transition:transform .5s var(--ease)}
.qa:hover{border-color:rgba(255,255,255,.18)}
.qa.open{border-color:rgba(95,232,240,.35);box-shadow:0 20px 60px -30px rgba(62,198,255,.45)}
.qa.open::before{transform:scaleY(1)}
.qa.hide{display:none}
.q{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:18px;padding:24px 26px;cursor:pointer}
.q:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;border-radius:20px}
.qn{font-size:12px;letter-spacing:.14em;color:var(--mute);transition:color .3s}
.qa.open .qn{color:var(--cyan)}
.qt{flex:1;font-size:clamp(16px,1.35vw,18.5px);font-weight:400;line-height:1.35}
.qi{position:relative;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.2);transition:transform .5s var(--ease),background .3s,border-color .3s}
.qi::before,.qi::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:#fff;transform:translate(-50%,-50%);transition:transform .5s var(--ease)}
.qi::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa.open .qi{transform:rotate(180deg);background:var(--cyan);border-color:var(--cyan)}
.qa.open .qi::before,.qa.open .qi::after{background:#000}
.qa.open .qi::after{transform:translate(-50%,-50%) rotate(0deg)}
.a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.a > div{overflow:hidden}
.a p{padding:0 26px 26px 64px;color:var(--dim);font-size:15.5px;max-width:44em;opacity:0;transform:translateY(-6px);transition:opacity .45s .1s,transform .5s var(--ease)}
.qa.open .a{grid-template-rows:1fr}
.qa.open .a p{opacity:1;transform:none}
@media (max-width:880px){
.faq-grid{grid-template-columns:1fr}
.faq-side{position:static}
}
@media (max-width:640px){
.q{padding:20px 18px;gap:14px}
.a p{padding:0 18px 22px 18px}
.faq-ask{flex-wrap:wrap}
.faq-ask .btn{margin-left:0}
}
/* ---------- OUR STORY ---------- */
.page-hero h1.statement{font-size:clamp(38px,5.2vw,76px);line-height:1.08;max-width:17em}
.page-hero .wrap > h1.statement{max-width:1000px}
.origin{display:grid;grid-template-columns:.5fr 1.5fr;gap:clamp(24px,5vw,80px);border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px)}
.origin .big{font-size:clamp(26px,3vw,40px);font-weight:300;letter-spacing:-.02em;line-height:1.2;margin-bottom:32px}
.origin .lede{max-width:40em;margin-bottom:20px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.duo-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:26px;padding:clamp(32px,4vw,52px);background:linear-gradient(160deg,rgba(232,57,46,.16),transparent 45%),var(--panel)}
.duo-card + .duo-card{background:linear-gradient(160deg,rgba(62,198,255,.16),transparent 45%),var(--panel)}
.duo-card .n{font-size:12px;letter-spacing:.2em;color:var(--cyan)}
.duo-card h2{font-size:clamp(32px,3.4vw,46px);margin:16px 0 20px}
.duo-card p{color:var(--dim);font-size:16px}
.leaders{display:grid;gap:clamp(72px,9vw,128px)}
.leader{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,6vw,96px);align-items:center}
.leader.flip{grid-template-columns:1.2fr .8fr}
.leader.flip .portrait{order:2}
.portrait{position:relative;border-radius:28px;aspect-ratio:4/5;max-width:440px;width:100%;justify-self:center;isolation:isolate;box-shadow:0 40px 110px -30px rgba(232,57,46,.5),0 0 0 1px rgba(255,255,255,.1)}
.portrait::before{content:"";position:absolute;top:-18%;right:-18%;bottom:-18%;left:-18%;z-index:-1;background:radial-gradient(closest-side,rgba(232,57,46,.28),transparent);pointer-events:none}
.portrait img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center 20%;object-position:center 20%;border-radius:inherit}
.leader h3{font-size:clamp(34px,3.6vw,50px);margin:14px 0 22px}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.facts li{font-size:12.5px;padding:7px 13px;border-radius:999px;border:1px solid rgba(95,232,240,.3);color:var(--ink);background:rgba(95,232,240,.05)}
.bio{color:var(--dim);font-size:16px;max-width:38em}
@media (max-width:880px){
.origin,.duo,.leader,.leader.flip{grid-template-columns:1fr}
.leader.flip .portrait{order:0}
.portrait{justify-self:start;max-width:360px}
}
/* ---------- TECHNOLOGY: interactive exploded view ---------- */
.anatomy{--noise:url("data:image/svg+xml;utf8,")}
.lab{
--w:430px;--h:270px;
position:relative;display:grid;grid-template-columns:1.25fr 1fr;min-height:720px;
border:1px solid var(--line);border-radius:28px;overflow:hidden;isolation:isolate;
background:
radial-gradient(60% 70% at 32% 55%,rgba(62,198,255,.13),transparent 70%),
linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/40px 40px,
linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/40px 40px,
#06080b;
}
.crn{position:absolute;width:18px;height:18px;border-color:rgba(95,232,240,.55);border-style:solid;z-index:6;pointer-events:none}
.c1{top:16px;left:16px;border-width:1px 0 0 1px}.c2{top:16px;right:16px;border-width:1px 1px 0 0}
.c3{bottom:16px;left:16px;border-width:0 0 1px 1px}.c4{bottom:16px;right:16px;border-width:0 1px 1px 0}
.hud{position:absolute;z-index:6;font:500 10.5px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,245,247,.6);pointer-events:none}
.hud b{color:var(--cyan);font-weight:500}
.hud-tl{top:28px;left:44px}.hud-tr{top:28px;right:44px;display:flex;gap:24px}.hud-bl{bottom:28px;right:44px;color:#fff;transition:opacity .4s}
.hud-bl::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);margin-right:10px;vertical-align:1px;animation:pulse 2s infinite}
/* real photo */
.photo{all:unset;position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;cursor:zoom-in;transition:opacity .7s var(--ease),transform 1s var(--ease),visibility 0s .7s}
.photo img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:60% 50%;object-position:60% 50%}
.photo::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(6,8,11,.55),transparent 22%,transparent 72%,rgba(6,8,11,.7))}
.photo .pulse{position:absolute;left:47%;top:52%;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:ring 2s infinite;z-index:1}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:0 0 0 26px rgba(255,255,255,0)}}
.photo:focus-visible{outline:2px solid var(--cyan);outline-offset:-4px;border-radius:28px}
.lab:not([data-state=photo]) .photo{opacity:0;transform:scale(1.06);visibility:hidden;pointer-events:none}
.lab[data-state=photo] .photo{transition:opacity .7s var(--ease),transform 1s var(--ease),visibility 0s}
/* 3D model */
.viewport{position:relative;display:grid;place-items:center;cursor:pointer;min-height:560px;opacity:0;transition:opacity .6s var(--ease)}
.lab:not([data-state=photo]) .viewport{opacity:1}
.model{position:relative;width:var(--w);height:var(--h);margin-top:10px}
.ly{
--gap:1.4px;--lift:0px;
position:absolute;top:0;right:0;bottom:0;left:0;border-radius:4px;z-index:var(--n);
/* flat isometric projection: spin, squash, then lift along the screen's vertical axis */
transform:translateY(calc((4 - var(--n)) * var(--gap) - var(--lift))) scaleY(.52) rotate(-32deg);
transition:transform 1.15s var(--ease) calc((7 - var(--n)) * 55ms),opacity .4s,filter .4s,box-shadow .4s;
}
.lab[data-state=exploded] .ly{--gap:58px}
.lab[data-state=assembled] .ly{transition-delay:calc(var(--n) * 110ms)}
.ly .pin{position:absolute;right:-3px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#fff;opacity:0;transition:opacity .4s}
.lab[data-state=exploded] .pin{opacity:.9}
.l-protect{background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 55%,rgba(255,255,255,.14));border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 0 40px rgba(255,255,255,.08)}
.l-ito{background:var(--noise),linear-gradient(135deg,rgba(210,225,238,.3),rgba(170,190,205,.14));border:1px solid rgba(255,255,255,.35)}
.l-diel{background:var(--noise),linear-gradient(135deg,#e2dccb,#b8b2a2);border:1px solid rgba(255,255,255,.35);opacity:.9}
.l-phos{background:radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 1.5px) 0 0/13px 11px,radial-gradient(circle at 70% 60%,rgba(255,255,255,.8) 0 1px,transparent 1.5px) 0 0/17px 19px,linear-gradient(135deg,#8ff6ff,#27cfe3 60%,#1fb8d8);border:1px solid #bff9ff;box-shadow:0 0 50px rgba(95,232,240,.85),0 0 130px rgba(62,198,255,.5)}
.l-diel2{background:var(--noise),linear-gradient(135deg,#eef1f3,#c9ced3);border:1px solid rgba(255,255,255,.4)}
.l-back{background:var(--noise),linear-gradient(135deg,#2a2d33,#111317);border:1px solid rgba(255,255,255,.14)}
.l-sub{background:linear-gradient(135deg,rgba(242,245,248,.95),rgba(196,204,212,.9));border:1px solid rgba(255,255,255,.6)}
.fpc{position:absolute;left:-30%;bottom:10%;width:34%;height:15%;border-radius:3px;background:linear-gradient(90deg,#b56a2a,#d98d45 60%,#c47a36);box-shadow:inset 0 0 0 1px rgba(255,210,150,.35)}
.fpc::before{content:"";position:absolute;left:30%;right:0;top:35%;height:8%;background:#f3c26b;box-shadow:0 7px 0 #f3c26b}
.fpc-pads{position:absolute;left:4%;top:18%;width:22%;height:64%;background:repeating-linear-gradient(180deg,#f7d57a 0 3px,#9a5a20 3px 5px);border-radius:2px}
.fpc .pin{right:auto;left:-3px}
.lab[data-state=exploded] .ly.dim{opacity:.28}
.lab[data-state=exploded] .ly.hi{--lift:16px;filter:brightness(1.25);box-shadow:0 0 0 1.5px var(--cyan),0 0 30px rgba(95,232,240,.5)}
.lab[data-state=exploded] .ly.l-phos.hi{box-shadow:0 0 0 1.5px #fff,0 0 60px rgba(95,232,240,.95),0 0 140px rgba(62,198,255,.6)}
/* legend */
.legend{list-style:none;counter-reset:none;align-self:center;padding:90px 48px 80px 8px;display:grid;gap:4px;opacity:0;transition:opacity .5s}
.lab[data-state=exploded] .legend{opacity:1;transition-delay:.45s}
.lab:not([data-state=exploded]) .legend{pointer-events:none}
.legend button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:34px 1fr;-moz-column-gap:10px;column-gap:10px;width:100%;padding:9px 14px;border-radius:12px;transition:background .3s}
.legend .k{grid-row:span 2;font:500 12px/1.6 ui-monospace,"SF Mono",Menlo,monospace;color:var(--cyan)}
.legend .nm{font-size:15px;font-weight:500}
.legend .ds{font-size:12.5px;line-height:1.45;color:var(--dim);max-height:0;overflow:hidden;opacity:0;transition:max-height .45s var(--ease),opacity .35s,margin .35s}
.legend button:hover,.legend button:focus-visible,.legend button.on{background:rgba(95,232,240,.07)}
.legend button.on .ds,.legend button:focus-visible .ds{max-height:80px;opacity:1;margin-top:4px}
.legend button:focus-visible{outline:1px solid var(--cyan)}
/* leader lines */
.lead-lines{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
.lead-lines path{fill:none;stroke:rgba(255,255,255,.32);stroke-width:1;transition:stroke .3s}
.lead-lines path.on{stroke:var(--cyan)}
.lead-lines circle{fill:#fff}
.lead-lines .dimln{stroke:var(--cyan);stroke-width:1.2}
.lead-lines .dimtx{fill:var(--cyan);font:500 11px ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em}
/* thickness gauge */
.gauge{position:absolute;right:48px;top:50%;width:min(340px,34%);transform:translateY(-40%);opacity:0;transition:opacity .5s,transform .7s var(--ease);pointer-events:none}
.lab[data-state=assembled] .gauge{opacity:1;transform:translateY(-50%);transition-delay:.3s}
.g-read{display:flex;align-items:baseline;gap:8px;margin:14px 0 18px}
.g-read span{font-size:clamp(64px,7vw,104px);font-weight:200;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.g-read em{font-style:normal;font-size:28px;color:var(--cyan)}
.g-bar{height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.g-bar i{display:block;height:100%;width:0;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.g-sub{margin-top:16px;color:var(--dim);font-size:14px}
.g-sub b{color:#fff;font-weight:500}
/* controls + diagram */
.lab-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:20px}
.seg{display:inline-flex;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.seg button{all:unset;cursor:pointer;font-size:13px;padding:10px 18px;border-radius:999px;color:var(--dim);transition:color .3s,background .3s,box-shadow .3s}
.seg button:hover{color:#fff}
.seg button[aria-pressed=true]{background:#fff;color:#000}
.seg button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.lab-controls .link{background:none;border:0;border-bottom:1px solid rgba(255,255,255,.3);font:inherit;font-size:14px;cursor:pointer}
.diagram{margin:auto;max-width:min(1200px,94vw);padding:0;border:1px solid var(--line);border-radius:20px;background:#0b0e13;overflow:hidden}
.diagram::backdrop{background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.diagram img{width:100%;height:auto}
.diagram .close{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.5);color:#fff;font-size:22px;cursor:pointer}
@media (max-width:980px){
.lab{--w:340px;--h:212px;grid-template-columns:1fr;min-height:0}
.viewport{min-height:460px}
.legend{padding:0 20px 70px;opacity:1}
.lab[data-state=photo] .legend{display:none}
.lab:not([data-state=exploded]) .legend{opacity:.35}
.legend .ds{max-height:none;opacity:1;margin-top:2px}
.lead-lines path,.lead-lines circle{display:none}
.gauge{position:relative;right:auto;top:auto;width:auto;transform:none;padding:0 28px 80px}
.lab:not([data-state=assembled]) .gauge{display:none}
.lab[data-state=assembled] .gauge{transform:none}
.lab[data-state=assembled] .legend{display:none}
.hud-tr{display:none}
.photo{position:relative;display:block;aspect-ratio:16/10}
.lab:not([data-state=photo]) .photo{display:none}
.lab[data-state=photo] .viewport{display:none}
}
@media (max-width:520px){ .lab{--w:230px;--h:144px} .viewport{min-height:360px} .seg button{padding:9px 12px;font-size:12px} }
/* assembled = switched on: layers above the phosphor turn see-through so the panel reads as lit */
.lab[data-state=assembled] .l-diel,.lab[data-state=assembled] .l-ito{opacity:.12}
.lab[data-state=assembled] .l-protect{background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 55%,rgba(255,255,255,.1))}
/* ---------- TECHNOLOGY: specifications ---------- */
.specs-key{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:24px;overflow:hidden;margin:56px 0 18px}
.sk{background:var(--bg);padding:34px 30px 36px;transition:background .4s}
.sk:hover{background:var(--panel)}
.sk svg{width:28px;height:28px;stroke:var(--cyan);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(95,232,240,.5))}
.sk .lbl{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:22px 0 10px}
.sk .val{font-size:clamp(26px,2.5vw,36px);font-weight:300;letter-spacing:-.02em;line-height:1.15}
.sk .val small{font-size:.5em;color:var(--dim);letter-spacing:0;margin-left:4px}
.sk .alt{display:block;font-size:14px;color:var(--dim);margin-top:6px}
.sheet{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.sheet-card{border:1px solid var(--line);border-radius:22px;padding:30px 32px;background:linear-gradient(180deg,#0b0e13,#08090d)}
.sheet-card h3{font-size:22px;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.sheet-card h3::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.sheet-card dl{display:grid;grid-template-columns:minmax(120px,.8fr) 1.2fr;font-size:14.5px}
.sheet-card dt,.sheet-card dd{padding:13px 0;border-top:1px solid var(--line)}
.sheet-card dt{color:var(--dim);padding-right:16px}
.sheet-card dd{font-variant-numeric:tabular-nums}
.sheet-card dd span{display:block}
.badges{display:flex;flex-wrap:wrap;gap:10px}
.badge{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:14px;border:1px solid rgba(95,232,240,.28);background:rgba(95,232,240,.05);min-width:120px}
.badge b{font-weight:500;font-size:15px}
.badge span{font-size:12px;color:var(--dim)}
@media (max-width:980px){ .specs-key{grid-template-columns:1fr 1fr} .sheet{grid-template-columns:1fr} }
@media (max-width:520px){ .specs-key{grid-template-columns:1fr} .sheet-card dl{grid-template-columns:1fr} .sheet-card dd{border-top:0;padding-top:0} }
/* ---------- WARM AMBIENCE (site-wide) ---------- */
/* a slow-drifting dusk glow behind every page, plus fine film grain */
body::before,body::after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-1}
body::before{
top:-10%;right:-10%;bottom:-10%;left:-10%;
background:
radial-gradient(38% 32% at 88% 6%,rgba(255,138,61,.14),transparent 70%),
radial-gradient(42% 38% at 4% 42%,rgba(232,57,46,.09),transparent 70%),
radial-gradient(48% 36% at 68% 104%,rgba(255,170,90,.12),transparent 70%),
radial-gradient(38% 38% at 26% 92%,rgba(130,62,150,.10),transparent 70%),
radial-gradient(34% 30% at 50% 40%,rgba(62,198,255,.04),transparent 70%);
animation:warmdrift 38s ease-in-out infinite alternate;
}
body::after{
opacity:.05;mix-blend-mode:overlay;
background:url("data:image/svg+xml;utf8,");
}
@keyframes warmdrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2%,1.5%,0) scale(1.05)}100%{transform:translate3d(2%,-1%,0) scale(1.02)}}
/* let the warmth show through the tinted bands */
.products,.story{background:linear-gradient(180deg,rgba(10,11,17,.55),rgba(14,10,16,.5))}
.tech{background:radial-gradient(55% 60% at 18% 50%,rgba(62,198,255,.10),transparent 70%),radial-gradient(45% 55% at 88% 30%,rgba(255,138,61,.08),transparent 70%)}
.faq{background:radial-gradient(50% 60% at 85% 20%,rgba(255,138,61,.09),transparent 70%),radial-gradient(40% 50% at 10% 90%,rgba(62,198,255,.06),transparent 70%)}
/* inner-page artwork headers */
.page-hero.has-art{min-height:86svh;display:flex;align-items:flex-end}
.page-hero.has-art > .wrap{width:100%}
.page-hero .art{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;overflow:hidden}
.page-hero .art img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center 72%;object-position:center 72%;transform:scale(1.08);animation:heroZoom 20s var(--ease) forwards}
.page-hero.has-art::before{background:
linear-gradient(90deg,rgba(5,6,10,.88) 0%,rgba(5,6,10,.55) 38%,rgba(5,6,10,.08) 72%,rgba(5,6,10,0) 100%),
linear-gradient(180deg,rgba(5,6,10,.65) 0%,rgba(5,6,10,0) 24%,rgba(5,6,10,0) 62%,var(--bg) 100%)}
.page-hero.has-art .lede{color:rgba(245,245,247,.8)}
.page-hero.has-art .jump a{background:rgba(5,6,10,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:rgba(255,255,255,.16);color:rgba(245,245,247,.8)}
@media (max-width:640px){
.page-hero.has-art{min-height:78svh}
.page-hero .art img{-o-object-position:62% 75%;object-position:62% 75%}
.page-hero.has-art::before{background:linear-gradient(180deg,rgba(5,6,10,.4) 0%,rgba(5,6,10,.12) 35%,rgba(5,6,10,.55) 72%,var(--bg) 100%)}
}
/* closing banners: a warm dusk horizon under the arc of light */
.cta{background:
linear-gradient(180deg,var(--bg) 0%,rgba(5,6,10,.55) 30%,rgba(5,6,10,.1) 70%,rgba(5,6,10,.35) 100%),
url("../images/bg_horizon.webp") center bottom/cover no-repeat}
.cta::before{background:radial-gradient(60% 80% at 50% 100%,rgba(255,138,61,.22),transparent 70%)}
/* footer: last light of the day along its top edge */
footer{position:relative;background:radial-gradient(70% 120% at 50% 0%,rgba(255,138,61,.08),transparent 60%),linear-gradient(180deg,rgba(5,6,10,.4),rgba(5,6,10,.9))}
footer::before{content:"";position:absolute;left:10%;right:10%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,170,90,.55),rgba(95,232,240,.45),transparent)}
@media (prefers-reduced-motion:reduce){ body::before{animation:none} }
.page-hero.has-art.compact{min-height:64svh}
/* ---------- THREAD SERIES PAGE ---------- */
.ti{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;color:var(--cyan);background:rgba(95,232,240,.06);border:1px solid rgba(95,232,240,.22)}
.ti svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ti.ring{border-radius:50%;width:56px;height:56px;box-shadow:0 0 24px rgba(95,232,240,.18),inset 0 0 14px rgba(95,232,240,.12)}
.ti.ring svg{width:24px;height:24px;filter:drop-shadow(0 0 4px rgba(95,232,240,.6))}
.thread-hero .art img{-o-object-position:70% 50%;object-position:70% 50%}
.thread-hero.has-art::before{background:linear-gradient(90deg,rgba(5,6,10,.7) 0%,rgba(5,6,10,.35) 40%,rgba(5,6,10,0) 65%),linear-gradient(180deg,rgba(5,6,10,.5) 0%,rgba(5,6,10,0) 22%,rgba(5,6,10,0) 65%,var(--bg) 100%)}
/* technical details */
.tspec{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,6vw,90px);align-items:center}
.tspec-media{position:relative;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 40px 120px -40px rgba(95,232,240,.45)}
.tspec-media img{width:100%;aspect-ratio:3/4;-o-object-fit:cover;object-fit:cover}
.tspec-media figcaption,.tprice-media figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 24px 20px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,transparent,rgba(5,6,10,.75))}
.tspec-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;margin-top:28px}
.tspec-list li{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}
.tspec-list b{display:block;font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:5px}
.tspec-list span{font-size:15px;color:var(--ink)}
/* integration */
.tint{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tint-card{border:1px solid var(--line);border-radius:26px;overflow:hidden;background:linear-gradient(180deg,#0b0e13,#08090d)}
.tint-card figure{aspect-ratio:16/10;overflow:hidden}
.tint-card img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform 1.2s var(--ease)}
.tint-card:hover img{transform:scale(1.05)}
.tint-card > div{padding:28px 30px 34px;position:relative}
.tint-card .ti{position:absolute;top:-28px;right:26px;background:#0b0e13}
.tint-card h3{font-size:24px;margin-bottom:10px}
.tint-card p{color:var(--dim);font-size:15px}
/* applications grid */
.tapps-sec{background:radial-gradient(60% 60% at 50% 40%,rgba(62,198,255,.08),transparent 70%)}
.tapps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:26px;overflow:hidden}
.tapp{background:rgba(6,8,12,.92);padding:34px 22px 30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;transition:background .4s}
.tapp:hover{background:rgba(14,20,28,.95)}
.tapp .ti{margin-bottom:8px;transition:transform .5s var(--ease),box-shadow .5s}
a.tapp:hover .ti{transform:translateY(-4px);box-shadow:0 0 36px rgba(95,232,240,.45),inset 0 0 14px rgba(95,232,240,.2)}
.tapp b{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.tapp span{font-size:13px;color:var(--dim);line-height:1.45}
.tapps-foot{margin-top:22px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
/* day & night showcase */
.dn-all{margin-top:18px}
.dn-all button,.dn-switch button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:13px;padding:10px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:#fff;transition:background .3s,border-color .3s,color .3s,box-shadow .3s}
.dn-all button svg,.dn-switch svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dn-all button[aria-pressed=true]{background:var(--cyan);color:#000;border-color:var(--cyan);box-shadow:0 0 26px rgba(95,232,240,.5)}
.dn-all button:focus-visible,.dn-switch button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.tshows{display:grid;gap:clamp(90px,11vw,150px)}
.tshow{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;scroll-margin-top:calc(var(--nav-h) + 30px)}
.tshow.flip .tshow-hero{order:2}
.tshow-hero{border-radius:30px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 50px 120px -40px rgba(0,0,0,.8),0 0 0 1px var(--line)}
.tshow-hero img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transform:scale(1.04);transition:transform 1.6s var(--ease)}
.tshow-hero.in img{transform:none}
.tshow-body h3{font-size:clamp(34px,3.8vw,52px);margin:14px 0 6px}
.tshow-tag{font-size:clamp(18px,1.6vw,22px);font-weight:300;color:var(--cyan);margin-bottom:14px}
.tshow-body .lede{margin-bottom:26px}
.dn{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/11;background:#000;box-shadow:0 0 0 1px var(--line)}
.dn img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:opacity 1.1s var(--ease),filter 1.1s var(--ease)}
.dn .dn-night{opacity:0}
.dn[data-mode=night] .dn-night{opacity:1}
.dn[data-mode=night] .dn-day{opacity:0;filter:brightness(.4)}
.dn::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 60%,rgba(0,0,0,.65))}
.dn-cap{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;font-size:14px;color:#fff}
.dn-cap span{transition:opacity .6s}
.dn .c-night,.dn[data-mode=night] .c-day{display:none}
.dn[data-mode=night] .c-night{display:inline}
.dn-switch{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;padding:4px;border-radius:999px;background:rgba(0,0,0,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14)}
.dn-switch button{border:0;padding:8px 14px;font-size:12.5px}
.dn-switch button[aria-pressed=true]{background:#fff;color:#000}
.dn[data-mode=night] .dn-switch button[data-set=night][aria-pressed=true]{background:var(--cyan);box-shadow:0 0 18px rgba(95,232,240,.6)}
.tchips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tchips li{font-size:12.5px;padding:7px 13px;border-radius:999px;border:1px solid rgba(95,232,240,.28);background:rgba(95,232,240,.05)}
.tsign{margin-top:22px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);padding-left:14px;border-left:2px solid var(--cyan)}
/* keepsakes */
.tkeep{display:grid;grid-template-columns:1.2fr 1fr .9fr;gap:18px;align-items:stretch}
.tkeep figure{border-radius:24px;overflow:hidden;min-height:360px}
.tkeep img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.tkeep-copy{align-self:center;padding:10px 10px 10px 20px}
.tkeep-copy h3{font-size:clamp(28px,2.8vw,38px);margin:16px 0 12px}
.tkeep-copy p:last-child{color:var(--dim)}
/* pricing */
.tprice-sec{background:radial-gradient(50% 60% at 80% 40%,rgba(255,138,61,.08),transparent 70%)}
.tprice{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(32px,5vw,72px);align-items:center}
.tprice-media{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:3/4.3;box-shadow:0 40px 120px -40px rgba(95,232,240,.4)}
.tprice-media img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.tprice-head{display:flex;gap:26px;align-items:center;margin-bottom:34px}
.tprice-head img{width:150px;height:130px;-o-object-fit:cover;object-fit:cover;border-radius:18px;box-shadow:0 0 50px rgba(95,232,240,.35)}
.tprice-head h2{font-size:clamp(32px,3.6vw,50px);margin-top:14px}
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tcard{border:1px solid var(--line);border-radius:22px;padding:24px 22px 26px;background:linear-gradient(180deg,rgba(11,14,19,.9),rgba(8,9,13,.9))}
.tcard:first-child{border-color:rgba(95,232,240,.4);box-shadow:0 0 40px -10px rgba(95,232,240,.35)}
.tbig{font-size:44px;font-weight:200;letter-spacing:-.03em;line-height:1.05;margin:14px 0 12px;color:var(--cyan);text-shadow:0 0 24px rgba(95,232,240,.35)}
.tbig small{display:block;font-size:14px;letter-spacing:0;color:var(--ink);margin-top:6px}
.tbig-word{font-size:26px;letter-spacing:-.01em}
.tcard p:last-child{font-size:13.5px;color:var(--dim)}
.tcats{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.tcats li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--dim)}
.tcats svg{width:20px;height:20px;fill:none;stroke:var(--cyan);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* thread contact */
.tcontact{position:relative;overflow:hidden;isolation:isolate}
.tcontact-art{position:absolute;top:0;right:0;bottom:0;left:45%;z-index:-1;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.tcontact-art img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.tcontact h2{margin:20px 0 22px}
.tcontact .lede{margin-bottom:34px}
.tdetails{list-style:none;display:grid;gap:18px;margin-bottom:38px;max-width:560px}
.tdetails li{display:flex;gap:16px;align-items:flex-start}
.tdetails svg{flex:none;width:44px;height:44px;padding:11px;border-radius:50%;fill:none;stroke:var(--cyan);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;background:rgba(95,232,240,.08);border:1px solid rgba(95,232,240,.25)}
.tdetails b{display:block;font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.tdetails a{border-bottom:1px solid rgba(95,232,240,.4)}
.tdetails a:hover{color:var(--cyan)}
.tcontact .ctas{display:flex;gap:14px;flex-wrap:wrap}
@media (max-width:1080px){ .tapps{grid-template-columns:repeat(3,1fr)} .tcards{grid-template-columns:1fr} .tkeep{grid-template-columns:1fr 1fr} .tkeep-copy{grid-column:1/-1;padding:10px 0} }
@media (max-width:880px){
.tspec,.tint,.tshow,.tprice{grid-template-columns:1fr}
.tshow.flip .tshow-hero{order:0}
.tshow-hero{aspect-ratio:4/4.4}
.tspec-media img{aspect-ratio:4/3}
.tprice-media{aspect-ratio:4/3.6}
.tcontact-art{top:0;right:0;bottom:0;left:0;opacity:.25;-webkit-mask-image:none;mask-image:none}
}
@media (max-width:640px){
.tspec-list{grid-template-columns:1fr}
.tapps{grid-template-columns:1fr 1fr}
.tkeep{grid-template-columns:1fr}
.tkeep figure{min-height:240px}
.tprice-head{flex-direction:column;align-items:flex-start}
}
.thread-hero .wrap > *{max-width:600px}
@media (max-width:640px){
.thread-hero .art img{-o-object-position:88% 50%;object-position:88% 50%}
.thread-hero.has-art::before{background:linear-gradient(180deg,rgba(5,6,10,.5) 0%,rgba(5,6,10,.62) 45%,rgba(5,6,10,.85) 80%,var(--bg) 100%)}
}
/* ---------- OUR STORY: facility ---------- */
.facility{background:radial-gradient(55% 45% at 80% 15%,rgba(255,138,61,.08),transparent 70%),radial-gradient(50% 50% at 10% 70%,rgba(62,198,255,.07),transparent 70%)}
.fac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.fac-grid .fac-tile:nth-child(3n+2){margin-top:80px} /* staggered middle column */
.fac-grid .fac-tile:nth-child(3n){margin-top:40px}
.fac-tile{position:relative;margin:0;border-radius:26px;overflow:hidden;aspect-ratio:3/4;box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px var(--line)}
.fac-tile img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transform:scale(1.06);transition:transform 1.4s var(--ease)}
.fac-tile.in img{transform:none}
.fac-tile:hover img{transform:scale(1.04)}
.fac-tile::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 50%,rgba(5,6,10,.88));pointer-events:none}
.fac-tile figcaption{position:absolute;left:22px;right:22px;bottom:20px;z-index:1}
.fac-tile b{display:block;font-size:19px;font-weight:500;margin-bottom:4px}
.fac-tile span{display:block;font-size:13.5px;line-height:1.45;color:rgba(245,245,247,.72)}
.fac-points{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:clamp(56px,7vw,96px);background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.fac-points > div{background:rgba(6,8,12,.92);padding:32px 28px 34px}
.fac-points .n{font-size:12px;letter-spacing:.2em;color:var(--cyan)}
.fac-points h3{font-size:21px;margin:14px 0 10px}
.fac-points p{font-size:14.5px;color:var(--dim)}
@media (max-width:980px){ .fac-points{grid-template-columns:1fr 1fr} }
@media (max-width:760px){
.fac-grid{grid-template-columns:1fr 1fr;gap:12px}
.fac-grid .fac-tile:nth-child(n){margin-top:0}
.fac-grid .fac-tile:nth-child(even){margin-top:40px}
.fac-tile figcaption{left:14px;right:14px;bottom:14px}
.fac-tile b{font-size:15px}
.fac-tile span{display:none}
}
@media (max-width:520px){ .fac-points{grid-template-columns:1fr} }
/* leadership portraits: quiet, editorial */
.leader{grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:clamp(32px,5vw,72px)}
.leader.flip{grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr)}
.portrait{max-width:300px;aspect-ratio:4/5;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 60px -30px rgba(0,0,0,.8)}
.portrait::before{display:none}
.portrait::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(5,6,10,0) 55%,rgba(5,6,10,.45)),linear-gradient(0deg,rgba(40,30,20,.08),rgba(40,30,20,.08))}
.portrait img{filter:saturate(.55) brightness(.9) contrast(1.02);transition:filter .8s var(--ease)}
.leader:hover .portrait img{filter:saturate(.85) brightness(.96)}
.leader h3{font-size:clamp(28px,2.8vw,40px)}
@media (max-width:880px){ .leader,.leader.flip{grid-template-columns:1fr} .portrait{max-width:240px} }
@media (max-width:1140px){ .nav ul{gap:22px} }
/* ---------- INVESTORS PAGE ---------- */
.inv-hero .wrap > *{max-width:760px}
.inv-hero .art img{-o-object-position:60% 70%;object-position:60% 70%}
.iproof{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.ip{background:rgba(6,8,12,.9);padding:28px 24px 30px}
.ip b{display:block;font-size:clamp(30px,3vw,44px);font-weight:200;letter-spacing:-.03em;line-height:1;color:#fff}
.ip:nth-child(odd) b{color:var(--cyan);text-shadow:0 0 22px rgba(95,232,240,.3)}
.ip span{display:block;margin-top:10px;font-size:13.5px;color:var(--dim)}
.isplit{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,96px);align-items:center}
.isplit h2{margin:20px 0 24px}
.inone p{font-size:clamp(20px,2vw,26px);font-weight:300;color:var(--mute);padding:14px 0;border-bottom:1px solid var(--line);text-decoration:line-through;-webkit-text-decoration-color:rgba(232,57,46,.55);text-decoration-color:rgba(232,57,46,.55);text-decoration-thickness:1.5px}
.inone p.yet{text-decoration:none;color:#fff;border:0;padding-top:26px;line-height:1.3}
.ifactory{background:radial-gradient(55% 50% at 20% 30%,rgba(255,138,61,.08),transparent 70%)}
.ifac{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px}
.ifac figure{position:relative;margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/5}
.ifac figure:first-child{aspect-ratio:auto}
.ifac img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.ifac figcaption{position:absolute;left:18px;bottom:16px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ibuilt{margin-top:clamp(40px,5vw,64px);font-size:clamp(22px,2.4vw,32px);font-weight:300;letter-spacing:-.015em;line-height:1.3;max-width:30em}
.icusts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.icust{border:1px solid var(--line);border-radius:22px;padding:30px 26px 32px;background:linear-gradient(180deg,rgba(11,14,19,.9),rgba(8,9,13,.9));position:relative;overflow:hidden;transition:border-color .4s,transform .6s var(--ease)}
.icust::before{content:"";position:absolute;left:26px;right:26px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.6}
.icust:hover{border-color:rgba(95,232,240,.35);transform:translateY(-4px)}
.icust h3{font-size:22px;font-weight:500;letter-spacing:.01em;margin-bottom:14px}
.icust p{font-size:14.5px;color:var(--dim)}
.iengine{text-align:center;background:radial-gradient(50% 60% at 50% 60%,rgba(62,198,255,.08),transparent 70%)}
.iengine h2{margin:20px auto 24px;max-width:16em}
.iengine .lede{margin:0 auto}
.iq{margin:clamp(48px,6vw,80px) auto 12px;font-size:clamp(28px,3.6vw,50px);font-weight:200;letter-spacing:-.025em;line-height:1.15;max-width:18em}
.iq-sub{color:var(--cyan);font-size:15px;letter-spacing:.18em;text-transform:uppercase}
.iglobe{position:relative;max-width:440px;justify-self:center;width:100%}
.iglobe svg{width:100%;height:auto;overflow:visible}
.iglobe .arcs path{stroke-dasharray:420;stroke-dashoffset:420;filter:drop-shadow(0 0 4px currentColor)}
.iglobe.in .arcs path{animation:draw 2.4s var(--ease) forwards}
.iglobe.in .arcs path:nth-child(2){animation-delay:.2s}.iglobe.in .arcs path:nth-child(3){animation-delay:.4s}
.iglobe.in .arcs path:nth-child(4){animation-delay:.6s}.iglobe.in .arcs path:nth-child(5){animation-delay:.8s}.iglobe.in .arcs path:nth-child(6){animation-delay:1s}
.iglobe .ping{transform-origin:232px 226px;animation:ping 2.2s ease-out infinite}
@keyframes ping{from{transform:scale(.6);opacity:1}to{transform:scale(2.2);opacity:0}}
.iglobe-tag{position:absolute;left:60%;top:60%;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;padding:6px 10px;border-radius:999px;background:rgba(232,57,46,.2);border:1px solid rgba(232,57,46,.5)}
/* today vs vision wipe */
.iwipe{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:16/9;background:#000;box-shadow:0 50px 120px -40px rgba(0,0,0,.9),0 0 0 1px var(--line);-moz-user-select:none;user-select:none;-webkit-user-select:none}
.iwipe > img,.w-now img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.w-now{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-clip-path:inset(0 calc(100% - var(--pos)) 0 0);clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.w-now img{-o-object-position:50% 60%;object-position:50% 60%}
.w-tag{position:absolute;top:20px;z-index:3;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:9px 14px;border-radius:999px;background:rgba(0,0,0,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15)}
.t-now{left:20px}.t-next{right:20px;border-color:rgba(95,232,240,.5);color:var(--cyan)}
.w-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 18px rgba(95,232,240,.8);z-index:2;pointer-events:none}
.w-handle span{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(5,6,10,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1.5px solid #fff}
.w-handle span::before,.w-handle span::after{content:"";position:absolute;top:50%;width:8px;height:8px;border:solid #fff;border-width:0 0 1.5px 1.5px;margin-top:-4px}
.w-handle span::before{left:12px;transform:rotate(45deg)}.w-handle span::after{right:12px;transform:rotate(-135deg)}
.iwipe input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:4}
.iwipe input:focus-visible ~ .w-handle span,.iwipe:focus-within .w-handle span{box-shadow:0 0 0 3px var(--cyan)}
.imarkets ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 30px}
.imarkets li{font-size:14px;padding:9px 16px;border-radius:999px;border:1px solid rgba(95,232,240,.3);background:rgba(95,232,240,.05)}
.imade{color:var(--dim);font-size:15.5px;padding-left:16px;border-left:2px solid var(--cyan)}
.imade b{color:#fff;font-weight:500;display:block;margin-bottom:6px}
/* the dream */
.idream{position:relative;overflow:hidden;isolation:isolate;padding:clamp(140px,18vw,240px) 0;text-align:center}
.idream-art{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}
.idream-art img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:60% 75%;object-position:60% 75%}
.idream::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,var(--bg) 0%,rgba(5,6,10,.25) 30%,rgba(5,6,10,.2) 70%,var(--bg) 100%)}
.idream .wrap{position:relative;z-index:1}
.idream blockquote{margin:24px 0 30px;font-size:clamp(52px,8vw,120px);font-weight:200;letter-spacing:-.04em;line-height:1}
.idream .lede{margin:0 auto;color:rgba(245,245,247,.82)}
.idisclaimer{margin:40px auto 0;max-width:40em;font-size:12px;color:var(--mute)}
@media (max-width:1080px){ .iproof{grid-template-columns:repeat(3,1fr)} .icusts{grid-template-columns:1fr 1fr} #partner .pillars{grid-template-columns:1fr 1fr!important} }
@media (max-width:880px){
.isplit{grid-template-columns:1fr}
.ifac{grid-template-columns:1fr 1fr}
.ifac figure:first-child{grid-column:1/-1;aspect-ratio:16/10}
.iwipe{aspect-ratio:4/3}
}
@media (max-width:640px){
.iproof{grid-template-columns:1fr 1fr}
.iproof .ip:last-child{grid-column:1/-1}
.icusts,#partner .pillars{grid-template-columns:1fr!important}
.w-tag{font-size:10px;padding:7px 10px;top:12px}.t-now{left:12px}.t-next{right:12px}
}
/* ---------- PRODUCTS: per-series application galleries ---------- */
.papps{margin-top:calc(-1 * clamp(30px,5vw,70px));padding:clamp(28px,3.5vw,44px);border:1px solid var(--line);border-radius:30px;background:linear-gradient(180deg,rgba(11,14,19,.75),rgba(7,9,12,.75));scroll-margin-top:calc(var(--nav-h) + 30px)}
.papps-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.papps-head h3{font-size:clamp(22px,2.2vw,30px);font-weight:300}
.papps-grid{display:grid;gap:14px}
.papps-flex .papps-grid{grid-template-columns:repeat(4,1fr)}
.papps-flex .papp:first-child{grid-column:span 2}
.papps-flex .papp:first-child .papp-img{aspect-ratio:33/10}
.papps-semi-rigid .papps-grid{grid-template-columns:repeat(2,1fr)}
.papps-wire .papps-grid{grid-template-columns:repeat(5,1fr)}
.papps-smart .papps-grid{grid-template-columns:repeat(3,1fr)}
.papp{margin:0;border-radius:20px;overflow:hidden;background:var(--panel);border:1px solid var(--line);transition:border-color .4s,transform .6s var(--ease),box-shadow .6s var(--ease)}
.papp:hover{border-color:rgba(95,232,240,.35);transform:translateY(-4px);box-shadow:0 24px 60px -30px rgba(62,198,255,.45)}
.papp-img{overflow:hidden;aspect-ratio:16/10;background:#000}
.papps-semi-rigid .papp-img{aspect-ratio:5/2}
.papps-wire .papp-img{aspect-ratio:3/4}
.papps-smart .papp-img{aspect-ratio:9/10}
.papp img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform 1.2s var(--ease)}
.papp:hover img{transform:scale(1.05)}
.papp figcaption{padding:16px 18px 18px}
.papp b{display:block;font-size:15px;font-weight:500;margin-bottom:6px}
.papp span{display:block;font-size:13.5px;line-height:1.45;color:var(--dim)}
.papps-foot{margin-top:22px;font-size:13px;color:var(--mute);padding-left:14px;border-left:2px solid var(--cyan)}
@media (max-width:1080px){ .papps-wire .papps-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){
.papps-flex .papps-grid,.papps-wire .papps-grid,.papps-smart .papps-grid,.papps-semi-rigid .papps-grid{grid-template-columns:1fr 1fr}
.papps-flex .papp:first-child .papp-img{aspect-ratio:16/5}
.papps-semi-rigid .papp-img{aspect-ratio:16/9}
.papp span{display:none}
}
@media (max-width:420px){ .papps-semi-rigid .papps-grid,.papps-smart .papps-grid{grid-template-columns:1fr} .papp span{display:block} }
/* ---------- NAV v2: larger logo, Investors at the far right, more items ---------- */
:root{--nav-h:84px}
.logo img{height:48px}
.nav ul{gap:30px}
.nav .m-only{display:none}
.nav-right{display:flex;align-items:center;gap:22px}
.nav-inv{position:relative;font-size:13px;color:rgba(245,245,247,.7);padding-left:22px;transition:color .2s}
.nav-inv::before{content:"";position:absolute;left:0;top:50%;width:1px;height:18px;margin-top:-9px;background:rgba(255,255,255,.2)}
.nav-inv:hover,.nav-inv[aria-current=page]{color:#fff}
@media (max-width:1240px){ .nav ul{gap:22px} .nav-right{gap:16px} }
@media (max-width:1100px){
.nav ul,.nav-right{display:none}
.menu{display:block}
.nav.open{background:rgba(4,5,7,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);height:auto;border-color:var(--line)}
.nav.open .wrap{flex-wrap:wrap;height:auto;padding-top:16px;padding-bottom:24px}
.nav.open ul{display:flex;flex-direction:column;gap:0;width:100%;order:3;margin-top:12px}
.nav.open ul a{display:block;padding:14px 0;font-size:17px;border-bottom:1px solid var(--line)}
.nav .m-only{display:block}
}
@media (max-width:640px){ .logo img{height:40px} :root{--nav-h:76px} }
.pillars.usps{grid-template-columns:repeat(4,1fr)}
.usps .n{letter-spacing:.16em;text-transform:uppercase}
.usps h3{font-size:22px}
.apps-grid.apps-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){ .pillars.usps,.apps-grid.apps-4{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .pillars.usps,.apps-grid.apps-4{grid-template-columns:1fr} }
.agallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:calc(-1 * clamp(40px,6vw,90px))}
.agallery figure{position:relative;margin:0;border-radius:18px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 0 0 1px var(--line)}
.agallery img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform 1.2s var(--ease)}
.agallery figure:hover img{transform:scale(1.05)}
.agallery figcaption{position:absolute;left:12px;bottom:12px;font-size:12px;padding:6px 11px;border-radius:999px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media (max-width:640px){ .agallery{grid-template-columns:1fr 1fr} .agallery figure:last-child{grid-column:1/-1} }
/* ---------- LIGHT THAT FOLLOWS THE CURSOR ---------- */
.cursor-glow{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:-1;opacity:0;transition:opacity .6s;
background:radial-gradient(closest-side,rgba(95,232,240,.13),rgba(62,198,255,.06) 45%,rgba(255,138,61,.03) 70%,transparent);will-change:transform}
.cursor-glow.on{opacity:1}
.nav ul{position:relative}
.nav-pill{position:absolute;left:0;top:50%;height:36px;border-radius:999px;pointer-events:none;z-index:-1;opacity:0;
background:radial-gradient(120% 140% at 50% 50%,rgba(95,232,240,.18),rgba(95,232,240,.04) 70%);box-shadow:0 0 22px rgba(95,232,240,.25),inset 0 0 0 1px rgba(95,232,240,.25);
transition:transform .35s var(--ease),width .35s var(--ease),opacity .3s}
.nav ul.pill-on .nav-pill{opacity:1}
.nav ul a:hover{color:#fff;text-shadow:0 0 12px rgba(95,232,240,.5)}
:is(.card,.app,.pillar,.papp,.tcard,.job,.bcard,.tint-card,.sheet-card,.layer,.icust,.duo-card,.person,.tapp,.qa){position:relative;overflow:hidden}
:is(.card,.app,.pillar,.papp,.tcard,.job,.bcard,.tint-card,.sheet-card,.layer,.icust,.duo-card,.person,.tapp,.qa)::after{
content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s;mix-blend-mode:screen;
background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(95,232,240,.14),transparent 60%)}
:is(.card,.app,.pillar,.papp,.tcard,.job,.bcard,.tint-card,.sheet-card,.layer,.icust,.duo-card,.person,.tapp,.qa):hover::after{opacity:1}
.btn{position:relative;overflow:hidden}
.btn-ghost::after,.btn-glow::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(95,232,240,.28),transparent 70%)}
.btn-ghost:hover::after,.btn-glow:hover::after{opacity:1}
/* ---------- CAREERS ---------- */
.careers-hero .art img{-o-object-position:60% 55%;object-position:60% 55%}
.careers-hero.has-art::before{background:linear-gradient(90deg,rgba(5,6,10,.92) 0%,rgba(5,6,10,.7) 45%,rgba(5,6,10,.3) 75%,rgba(5,6,10,.2)),linear-gradient(180deg,rgba(5,6,10,.5),rgba(5,6,10,0) 25%,rgba(5,6,10,0) 65%,var(--bg))}
.cgal{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px}
.cgal figure{position:relative;margin:0;border-radius:22px;overflow:hidden;aspect-ratio:4/4.6}
.cgal img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.cgal figcaption{position:absolute;left:16px;bottom:14px;font-size:12.5px;padding:7px 12px;border-radius:999px;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.jobs{display:grid;gap:12px}
.job{border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(11,14,19,.92),rgba(8,9,13,.92));transition:border-color .4s,box-shadow .5s}
.job.open{border-color:rgba(95,232,240,.35);box-shadow:0 20px 60px -30px rgba(62,198,255,.45)}
.job-head{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:170px 1fr auto 34px;align-items:center;gap:18px;padding:22px 26px;position:relative;z-index:1}
.job-head:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;border-radius:20px}
.job-team{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.job-title{font-size:clamp(18px,1.6vw,22px)}
.job-meta{font-size:13px;color:var(--dim)}
.job .qi{position:relative;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.2);transition:transform .5s var(--ease),background .3s}
.job .qi::before,.job .qi::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:#fff;transform:translate(-50%,-50%)}
.job .qi::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .5s var(--ease)}
.job.open .qi{background:var(--cyan);border-color:var(--cyan);transform:rotate(180deg)}
.job.open .qi::before,.job.open .qi::after{background:#000}
.job.open .qi::after{transform:translate(-50%,-50%) rotate(0)}
.job-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.job-body > div{overflow:hidden;padding:0 26px}
.job.open .job-body{grid-template-rows:1fr}
.job.open .job-body > div{padding-bottom:28px}
.job-sum{font-size:17px;color:var(--ink);max-width:46em;margin-bottom:22px;font-weight:300}
.job-cols{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.job-cols h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:500;margin:4px 0 14px}
.job-cols .ticks{margin-bottom:22px;font-size:14.5px}
.ticks.soft li{color:var(--dim)}
.job-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.job-note{font-size:13px;color:var(--mute)}
@media (max-width:880px){ .cgal{grid-template-columns:1fr 1fr} .cgal figure:first-child{grid-column:1/-1;aspect-ratio:16/10} .job-head{grid-template-columns:1fr 34px;gap:6px 14px} .job-team{grid-column:1} .job-title{grid-column:1} .job-meta{grid-column:1} .job .qi{grid-column:2;grid-row:1/4} .job-cols{grid-template-columns:1fr;gap:0} }
/* ---------- BLOG ---------- */
.blog-hero .art img{-o-object-position:50% 60%;object-position:50% 60%}
.bfilters{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:30px}
.bsearch input{font:inherit;font-size:14px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:11px 18px;width:260px;outline:none;transition:border-color .3s,box-shadow .3s}
.bsearch input:focus{border-color:rgba(95,232,240,.6);box-shadow:0 0 0 4px rgba(95,232,240,.1)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(11,14,19,.92),rgba(8,9,13,.92));transition:border-color .4s,transform .6s var(--ease)}
.bcard:hover{border-color:rgba(95,232,240,.35);transform:translateY(-4px)}
.bcard-img{aspect-ratio:16/10;overflow:hidden}
.bcard-img img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform 1.2s var(--ease)}
.bcard:hover .bcard-img img{transform:scale(1.05)}
.bcard-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.bcard h3{font-size:20px;line-height:1.25}
.bcard-body > p:not(.eyebrow){font-size:14px;color:var(--dim)}
.bcard-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--cyan)}
.bcard-more svg{width:13px;height:13px}
.bcard.feature{grid-column:1/-1;flex-direction:row}
.bcard.feature .bcard-img{flex:1.3;aspect-ratio:auto;min-height:360px}
.bcard.feature .bcard-body{flex:1;padding:40px;justify-content:center}
.bcard.feature h3{font-size:clamp(28px,3vw,40px)}
.bgrid-3{grid-template-columns:repeat(3,1fr)}
.bempty{color:var(--dim);margin-top:30px}
.bprogress{position:fixed;left:0;right:0;top:var(--nav-h);height:2px;z-index:99;pointer-events:none}
.bprogress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),#ffb36b);box-shadow:0 0 12px var(--cyan)}
.bpost-head{position:relative;overflow:hidden;isolation:isolate;padding:calc(var(--nav-h) + clamp(60px,9vw,120px)) 0 clamp(40px,5vw,70px)}
.bpost-head .art{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2}
.bpost-head .art img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;filter:blur(30px) saturate(1.2);transform:scale(1.2);opacity:.5}
.bpost-head::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:linear-gradient(180deg,rgba(5,6,10,.4),var(--bg))}
.bpost-head .wrap > *{max-width:820px}
.bpost-back{font-size:13px;color:var(--dim);display:inline-block;margin-bottom:26px}
.bpost-back:hover{color:#fff}
.bpost-head h1{font-size:clamp(36px,5vw,64px);font-weight:200;letter-spacing:-.03em;line-height:1.05;margin:18px 0 20px}
.bpost-wrap{max-width:860px}
.bpost-cover{margin:0 0 50px;border-radius:24px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 40px 100px -40px rgba(0,0,0,.9),0 0 0 1px var(--line)}
.bpost-cover img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.bpost-body{font-size:17.5px;line-height:1.75;color:rgba(245,245,247,.86)}
.bpost-body > p{margin:0 0 22px}
.bpost-body h2{font-size:clamp(24px,2.4vw,32px);margin:46px 0 16px;color:#fff;line-height:1.2}
.bpost-body ul{margin:0 0 24px 0;padding-left:22px}
.bpost-body li{margin-bottom:10px}
.bpost-body a{color:var(--cyan);border-bottom:1px solid rgba(95,232,240,.4)}
.bpost-body strong{color:#fff;font-weight:500}
.bpost-body blockquote{margin:40px 0;padding:6px 0 6px 26px;border-left:2px solid var(--cyan);font-size:clamp(22px,2.2vw,28px);font-weight:300;line-height:1.35;color:#fff}
.bpost-share{display:flex;gap:12px;flex-wrap:wrap;margin:50px 0 30px}
.bpost-share .btn{font:inherit;font-size:13px;cursor:pointer;background:none}
.bpost-next{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:26px 28px;border:1px solid var(--line);border-radius:20px;transition:border-color .3s}
.bpost-next:hover{border-color:rgba(95,232,240,.4)}
.bpost-next .eyebrow{flex-basis:100%}
.bpost-next b{font-weight:400;font-size:20px}
.bpost-next svg{width:16px;height:16px;color:var(--cyan)}
@media (max-width:1080px){ .bgrid,.bgrid-3{grid-template-columns:1fr 1fr} }
@media (max-width:760px){ .bgrid,.bgrid-3{grid-template-columns:1fr} .bcard.feature{flex-direction:column} .bcard.feature .bcard-img{min-height:220px} .bcard.feature .bcard-body{padding:24px} .bsearch input{width:100%} .bsearch{width:100%} }
/* blog widgets */
.bw{margin:34px 0 40px;padding:26px;border:1px solid rgba(95,232,240,.25);border-radius:22px;background:radial-gradient(80% 100% at 50% 0%,rgba(95,232,240,.07),transparent 70%),var(--panel);font-size:15px;line-height:1.5}
.bw button{font:inherit;cursor:pointer}
.bw-note{margin-top:14px;font-size:12px;color:var(--mute)}
.bw-glow .bw-stage{height:220px;display:grid;place-items:center;border-radius:16px;background:#05060a}
.wg-panel{--b:.6;--hue:185;width:62%;height:62%;border-radius:10px;background:hsl(var(--hue) 85% calc(18% + var(--b) * 52%));box-shadow:0 0 calc(var(--b) * 70px) hsl(var(--hue) 90% 60% / calc(var(--b) * .9)),0 0 calc(var(--b) * 160px) hsl(var(--hue) 90% 55% / calc(var(--b) * .5));transition:background .2s,box-shadow .2s}
.bw-controls{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.bw-controls label{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:13px;color:var(--dim)}
.bw-controls output{color:var(--cyan);font-variant-numeric:tabular-nums}
.bw input[type=range]{grid-column:1/-1;width:100%;accent-color:#5fe8f0}
.bw-layers{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:center}
.wl-stack{display:grid;gap:6px;transform:skewY(-8deg)}
.wl-bar{display:block;height:14px;border-radius:4px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);transition:transform .4s var(--ease),background .3s,box-shadow .3s}
.wl-bar.glow{background:#5fe8f0;box-shadow:0 0 22px rgba(95,232,240,.6)}
.wl-bar.hi{transform:translateX(16px);border-color:var(--cyan);box-shadow:0 0 18px rgba(95,232,240,.5)}
.wl-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.wl-btns button,.wc-btns button,.wh-btns button,.wq-opts button,.ws-nav button{background:none;border:1px solid var(--line);border-radius:12px;padding:9px 12px;color:var(--ink);text-align:left;font-size:13.5px;transition:border-color .3s,background .3s}
.wl-btns button b{color:var(--cyan);font-weight:500;margin-right:6px}
.wl-btns button.on,.wc-btns button.on,.wh-btns button.on{border-color:var(--cyan);background:rgba(95,232,240,.08)}
.wl-desc p{margin-top:14px;color:var(--dim)}
.ws-bar{height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:20px}
.ws-bar i{display:block;height:100%;width:0;background:var(--cyan);box-shadow:0 0 12px var(--cyan);transition:width .5s var(--ease)}
.bw-steps ol{list-style:none;margin:0;padding:0;min-height:150px}
.bw-steps li{display:none}
.bw-steps li.on{display:block;animation:fade .5s var(--ease)}
.bw-steps li span{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.bw-steps li h3{font-size:24px;margin:8px 0 10px;color:#fff}
.bw-steps li p{color:var(--dim)}
.ws-nav{display:flex;justify-content:space-between;margin-top:18px}
.ws-nav button:disabled{opacity:.3;cursor:default}
.ws-nav button:last-child{background:#fff;color:#000;border-color:#fff}
.wc-btns,.wh-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.wc-row{display:grid;grid-template-columns:60px 1fr 1.2fr;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.wc-row b{font-weight:500}
.wc-row.best b{color:var(--cyan)}
.wc-track{height:8px;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden}
.wc-track i{display:block;height:100%;width:var(--w);background:rgba(255,255,255,.4);border-radius:8px;animation:grow .7s var(--ease)}
.wc-row.best .wc-track i{background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.wc-row em{font-style:normal;font-size:13px;color:var(--dim)}
@keyframes grow{from{width:0}}
.wh-meter{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;font-size:12px;color:var(--dim)}
.wh-track{height:14px;border-radius:14px;background:linear-gradient(90deg,#3ec6ff,#ffd28a,#E8392E);opacity:.9;position:relative}
.wh-track i{position:absolute;top:-6px;left:var(--h);width:4px;height:26px;margin-left:-2px;border-radius:3px;background:#fff;box-shadow:0 0 10px #fff;transition:left .7s var(--ease)}
.wh-desc p{margin-top:16px;color:var(--ink)}
.wcar-stage{position:relative;max-width:560px;margin:0 auto}
.wcar-stage svg{width:100%;height:auto}
.wcar-dot{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2px solid #fff;background:rgba(95,232,240,.35);box-shadow:0 0 0 0 rgba(95,232,240,.6);animation:ring 2s infinite;padding:0}
.wcar-dot.on{background:var(--cyan);box-shadow:0 0 18px var(--cyan)}
.wcar-info{margin-top:18px;min-height:80px}
.wcar-info h3{font-size:20px;color:#fff;margin-bottom:6px}
.wcar-info p{color:var(--dim)}
.bw-dn{margin:34px 0 40px}
.bw-fog{--fog:.2}
.wf-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;height:220px;border-radius:16px;overflow:hidden;background:#04060a}
.wf-cell{position:relative;display:grid;place-items:center}
.wf-cell span{position:absolute;bottom:12px;font-size:12px;color:var(--dim);z-index:2}
.wf-led{width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 calc(10px + var(--fog) * 120px) calc(4px + var(--fog) * 60px) rgba(255,255,255,calc(.9 - var(--fog) * .3));filter:blur(calc(var(--fog) * 4px))}
.wf-el{width:46%;filter:blur(calc(var(--fog) * 3px)) drop-shadow(0 0 calc(4px + var(--fog) * 10px) #5fe8f0)}
.wf-fog{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(180deg,rgba(150,160,170,calc(var(--fog) * .55)),rgba(120,130,140,calc(var(--fog) * .6)));-webkit-backdrop-filter:blur(calc(var(--fog) * 2px));backdrop-filter:blur(calc(var(--fog) * 2px))}
.wf-ctl{display:grid;gap:8px;margin-top:16px;font-size:13px;color:var(--dim)}
.wn-stage{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:5/2}
.wn-stage img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:filter .6s}
.wn-scan{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .6s;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 2px,transparent 2px 4px),radial-gradient(circle,transparent 55%,rgba(0,0,0,.85) 100%)}
.bw-nvg.nv .wn-stage img{filter:grayscale(1) sepia(1) hue-rotate(60deg) saturate(3.5) brightness(1.1) contrast(1.15)}
.bw-nvg.nv .wn-scan{opacity:1}
.wn-switch{position:static;margin-top:14px}
.wq-q{padding:14px 0;border-top:1px solid var(--line)}
.wq-q:first-child{border-top:0;padding-top:0}
.wq-q p{margin-bottom:10px;color:#fff}
.wq-opts{display:flex;flex-wrap:wrap;gap:8px}
.wq-opts button.right{border-color:#3fd68a;background:rgba(63,214,138,.12)}
.wq-opts button.wrong{border-color:#E8392E;background:rgba(232,57,46,.12)}
.wq-opts button:disabled{cursor:default}
.wq-score{margin-top:16px;color:var(--cyan)}
@media (max-width:640px){ .bw-layers{grid-template-columns:1fr} .wl-btns{grid-template-columns:1fr} .bw-controls{grid-template-columns:1fr} .wc-row{grid-template-columns:50px 1fr} .wc-row em{grid-column:1/-1} }
.apps-4 .app{padding:0;min-height:0;justify-content:flex-start}
.apps-4 .app > div:last-child{padding:22px 24px 26px}
.app-photo{aspect-ratio:4/3;overflow:hidden}
.app-photo img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform 1.2s var(--ease)}
.app:hover .app-photo img{transform:scale(1.05)}
.apps-4 .app:nth-child(4) .app-photo img{-o-object-position:30% 50%;object-position:30% 50%}
.apps-4 .app:nth-child(2) .app-photo img{-o-object-position:50% 25%;object-position:50% 25%}
.papps-thread .papps-grid{grid-template-columns:repeat(4,1fr)}
.papps-thread .papp:first-child{grid-column:auto}
.papps-thread .papp:first-child .papp-img,.papps-thread .papp-img{aspect-ratio:4/5}
@media (max-width:760px){ .papps-thread .papps-grid{grid-template-columns:1fr 1fr} .papps-thread .papp:first-child .papp-img{aspect-ratio:4/5} }
.papps-thread .papps-grid{grid-template-columns:repeat(4,1fr)}
.papps-thread .papp-img{aspect-ratio:4/5}
@media (max-width:760px){ .papps-thread .papps-grid{grid-template-columns:1fr 1fr} .papps-thread .papp span{display:none} }
.cdirect{list-style:none;display:grid;gap:16px}
.cdirect span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.cdirect .mail{font-size:17px}
.cdirect p{color:var(--dim);font-size:14.5px}
.nav-side{display:flex;align-items:center;gap:18px;position:relative;padding-left:22px}
.nav-side::before{content:"";position:absolute;left:0;top:50%;width:1px;height:18px;margin-top:-9px;background:rgba(255,255,255,.2)}
.nav-side .nav-inv{padding-left:0}
.nav-side .nav-inv::before{display:none}
@media (max-width:1320px){ .nav ul{gap:20px} .nav-right{gap:14px} .nav-side{gap:14px;padding-left:16px} }
/* ---------- PARTNERS ---------- */
.pmosaic{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pmosaic img{width:100%;aspect-ratio:1/1;-o-object-fit:cover;object-fit:cover;border-radius:18px;box-shadow:0 0 0 1px var(--line)}
.pmosaic img:nth-child(2){-o-object-position:50% 25%;object-position:50% 25%}.pmosaic img:nth-child(4){-o-object-position:30% 50%;object-position:30% 50%}
.pwho{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.pwho li{background:rgba(6,8,12,.92);padding:28px 26px 30px}
.pwho b{display:block;font-size:18px;font-weight:400;margin-bottom:8px}
.pwho span{font-size:14px;color:var(--dim)}
.psteps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:none;position:relative}
.psteps li{position:relative;padding:44px 24px 0 0}
.psteps li::before{content:"";position:absolute;top:14px;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--cyan),rgba(95,232,240,.15))}
.psteps li::after{content:"";position:absolute;top:9px;left:0;width:11px;height:11px;border-radius:50%;background:var(--cyan);box-shadow:var(--glow)}
.psteps span{font-size:12px;letter-spacing:.2em;color:var(--cyan)}
.psteps b{display:block;font-size:22px;font-weight:300;margin:8px 0}
.psteps p{font-size:14.5px;color:var(--dim)}
@media (max-width:980px){ .pwho{grid-template-columns:1fr 1fr} .psteps{grid-template-columns:1fr 1fr;row-gap:30px} }
@media (max-width:600px){ .pwho,.psteps{grid-template-columns:1fr} }
/* ---------- COMPATIBILITY FALLBACKS ---------- */
.no-webp .cta{background-image:linear-gradient(180deg,var(--bg) 0%,rgba(5,6,10,.55) 30%,rgba(5,6,10,.1) 70%,rgba(5,6,10,.35) 100%),url("../images/bg_horizon.jpg")}
.no-io .rv,.no-io .tech-media img{opacity:1;transform:none}
/* browsers without aspect-ratio (Safari < 15, iOS < 15): give image frames a real height */
@supports not (aspect-ratio:1/1){
.tech-media,.row-media,.tint-card figure,.dn,.fac-tile,.ifac figure,.agallery figure,.cgal figure,.bpost-cover,.wn-stage{height:0;padding-top:66%;position:relative}
.tech-media > img,.row-media > img,.row-media > video,.tint-card figure img,.fac-tile img,.ifac figure img,.agallery figure img,.cgal figure img,.bpost-cover img,.wn-stage img{position:absolute;top:0;left:0;width:100%;height:100%}
.portrait,.tshow-hero,.tprice-media,.tspec-media{height:0;padding-top:125%;position:relative}
.portrait img,.tshow-hero img,.tprice-media img,.tspec-media img{position:absolute;top:0;left:0;width:100%;height:100%}
.iwipe{height:0;padding-top:56.25%}
.papp-img,.bcard-img,.app-photo{height:0;padding-top:62%;position:relative}
.papp-img img,.bcard-img img,.app-photo img{position:absolute;top:0;left:0;width:100%;height:100%}
.pmosaic img{height:220px}
.photo{height:100%}
}
.jobpage h2{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:500;margin:4px 0 16px}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form.err .thanks{color:#ff8a7a}
/* home hero (EL panel photo): on phones show the panel as a band under the headline */
@media (max-width:640px){
.hero-main{padding-bottom:250px}
.hero-bg{top:auto;bottom:195px;height:330px;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%)}
.hero-bg img{object-position:74% 50%;animation:none;transform:none}
.hero::before{background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 50%,rgba(4,5,7,.35) 62%,rgba(4,5,7,0) 72%,rgba(4,5,7,0) 76%,var(--bg) 78%)}
}
/* ---------- HOME HERO v3: premium layout for the EL panel photo ---------- */
.hero-bg img{object-position:62% 50%}
.hero::before{background:
linear-gradient(90deg,rgba(4,5,7,.92) 0%,rgba(4,5,7,.7) 28%,rgba(4,5,7,.15) 52%,rgba(4,5,7,0) 70%),
linear-gradient(180deg,rgba(4,5,7,.6) 0%,rgba(4,5,7,0) 18%,rgba(4,5,7,0) 72%,var(--bg) 100%)}
.hero-main{padding-top:calc(var(--nav-h) + 40px);padding-bottom:96px}
.hero-main > *{max-width:560px}
.hero h1{font-size:clamp(40px,4.9vw,74px);font-weight:200;letter-spacing:-.032em;line-height:1.04;margin:28px 0 26px}
.hero h1 .l{white-space:nowrap}
.hero .lede{font-size:clamp(16px,1.2vw,18px);line-height:1.6;max-width:30em;color:rgba(245,245,247,.72)}
.hero .ctas{margin-top:38px}
.hero-tag{display:inline-flex;align-items:center;gap:10px;width:max-content;max-width:100%;
padding:9px 16px 9px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:11px;letter-spacing:.14em;color:rgba(245,245,247,.75)}
.hero-tag i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(95,232,240,.14),0 0 14px var(--cyan);animation:pulse 2.4s infinite}
.hero-caption{position:absolute;right:var(--pad);bottom:150px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:4px;
padding-right:18px;border-right:1px solid rgba(95,232,240,.6);text-align:right;opacity:0;animation:fade 1.2s var(--ease) 1s forwards}
.hero-caption span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,245,247,.6)}
.hero-caption b{font-size:15px;font-weight:400;color:#fff}
.hero-caption:hover b{color:var(--cyan)}
.specs{background:linear-gradient(180deg,rgba(4,5,7,.15),rgba(4,5,7,.7));border-top:1px solid rgba(255,255,255,.07)}
.specs li{padding:22px 12px 22px 0;gap:14px}
.specs li + li{padding-left:24px;border-left-color:rgba(255,255,255,.06)}
.specs svg{width:24px;height:24px;stroke:var(--cyan);opacity:.85}
.specs b{font-size:13px}
.specs small{font-size:12px}
@media (max-width:1080px){ .hero-caption{bottom:230px} }
@media (max-width:880px){ .hero h1 .l{white-space:normal} }
@media (max-width:640px){
.hero-tag{font-size:10px;letter-spacing:.1em;white-space:normal;width:auto}
.hero h1{font-size:clamp(36px,10vw,44px)}
.hero-caption{display:none}
.hero-main{padding-bottom:250px}
}
/* caption sits on the dark table, under the panel's left edge */
.hero-caption{right:auto;left:53%;bottom:120px;align-items:flex-start;text-align:left;padding-right:0;padding-left:16px;border-right:0;border-left:1px solid rgba(95,232,240,.6)}
@media (max-width:1080px){ .hero-caption{left:auto;right:var(--pad);bottom:230px} }
/* bridal hero: busier background, so a deeper fade behind the text; caption on the floor left of the gown */
.hero-bg img{object-position:58% 50%}
.hero::before{background:
linear-gradient(90deg,rgba(4,5,7,.94) 0%,rgba(4,5,7,.82) 30%,rgba(4,5,7,.35) 48%,rgba(4,5,7,0) 62%),
linear-gradient(180deg,rgba(4,5,7,.65) 0%,rgba(4,5,7,0) 18%,rgba(4,5,7,0) 72%,var(--bg) 100%)}
.hero-caption{left:37%;bottom:110px}
@media (max-width:640px){ .hero-bg img{object-position:80% 35%} .hero-bg{height:360px} }
.hero-caption{left:32%}
@media (max-width:1080px){ .hero-caption{left:auto;right:var(--pad);bottom:230px} }
/* ---------- HOME HERO CAROUSEL ---------- */
.hero-bg img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);
opacity:0;transform:scale(1.06);transition:opacity 1s ease-in-out,transform 7s linear;animation:none}
.hero-bg img.on{opacity:1;transform:scale(1)}
.hero-caption{transition:opacity .45s var(--ease)}
.hero-caption.swap{opacity:0!important}
.hero-dots{position:absolute;left:var(--pad);bottom:122px;z-index:3;display:flex;gap:8px}
.hero-dot{width:26px;height:3px;padding:0;border:0;border-radius:3px;background:rgba(255,255,255,.22);cursor:pointer;transition:background .4s,width .4s var(--ease)}
.hero-dot.on{width:42px;background:var(--cyan);box-shadow:0 0 10px rgba(95,232,240,.7)}
.hero-dot:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media (max-width:1080px){ .hero-dots{bottom:240px} }
@media (max-width:640px){
.hero-bg img{object-position:var(--mpos,50% 50%)}
.hero-dots{left:auto;right:var(--pad);bottom:210px}
}
@media (prefers-reduced-motion:reduce){ .hero-bg img{transition:opacity .3s} }
/* carousel caption sits with the dots, bottom-left, away from every image subject */
.hero-caption{left:calc(var(--pad) + 270px);right:auto;bottom:112px;align-items:flex-start;text-align:left;border-right:0;border-left:1px solid rgba(95,232,240,.6);padding:0 0 0 14px}
@media (max-width:1080px){ .hero-caption{left:calc(var(--pad) + 270px);right:auto;bottom:230px} }
/* ---------- HOME HERO FIXES (Windows fonts + phones) ---------- */
/* headline must never be clipped: the line box grows with the font (Inter on Windows is wider than SF on Mac) */
.hero-main > h1{max-width:none}
.hero h1 .l{width:max-content;max-width:100%}
@media (min-width:881px){ .hero h1 .l{max-width:none} }
/* phones: stack text → photo band (with dots) → specs in normal flow, so nothing overlaps whatever the screen height */
@media (max-width:640px){
.hero{min-height:0}
.hero::before{display:none}
.hero-main{order:1;flex:none;padding-bottom:8px}
.hero-bg{order:2;position:relative;top:auto;right:auto;bottom:auto;left:auto;flex:none;height:min(360px,62vw + 120px);z-index:0;margin-top:-24px;
-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%)}
.hero-dots{order:3;position:relative;left:auto;right:auto;bottom:auto;align-self:center;margin:-6px 0 22px}
.hero-caption{display:none}
.hero .specs{order:4}
}
@media (min-width:641px) and (max-width:1080px){ .hero-main{padding-bottom:130px} }
@media (max-width:640px){
.specs li,.specs li + li{padding:16px 10px 16px 0;gap:12px}
.specs li:nth-child(even){padding-left:16px}
}