/* HomeIQ — Apple-style LIGHT redesign (design tokens v2 from the investor film). Self-hosted, CSP-safe. */
@font-face{font-family:'Inter';font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/Inter-latin-500-800.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2248,U+2264-2265}
@font-face{font-family:'Kufi';font-weight:800;font-display:swap;src:url(fonts/NotoKufiArabic-800-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:'NSA';font-weight:500 600;font-display:swap;src:url(fonts/NotoSansArabic-500-600-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
:root{--bg:#FFFFFF;--alt:#F5F5F7;--ink:#1D1D1F;--sec:#6E6E73;--mute:#6E6E73;--line:#D2D2D7;--cb:#E5E5EA;--acc:#0E7490;--red:#D70015;
 --g1:#22E5FF;--g2:#3DFF9E;--grad:linear-gradient(100deg,var(--g1),var(--g2));--tg:linear-gradient(100deg,#0891B2,#059669);--lg:linear-gradient(100deg,#06B6D4,#10B981);
 --f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;--fh:var(--f);--ls:-.045em;--lh:1.03;--hw:800;--gw:1180px}
[dir=rtl]{--f:'Inter','NSA',Tahoma,sans-serif;--fh:'Inter','Kufi','NSA',Tahoma,sans-serif;--ls:0;--lh:1.35}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px;background:#fff}
body{margin:0;background:var(--bg);color:var(--ink);font:500 17px/1.55 var(--f);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html,body{overflow-x:clip}
img{max-width:100%;height:auto;display:block}a{color:inherit}bdi{unicode-bidi:isolate}
.skip{position:absolute;top:12px;left:12px;transform:translateY(-200%)}.skip:focus{transform:none;z-index:99;background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px}
.gw{max-width:var(--gw);margin:0 auto;padding:0 24px}.narrow{max-width:900px}.center{text-align:center}
.eyebrow{font-size:15px;font-weight:600;margin:0 0 14px;letter-spacing:.01em;color:var(--acc);display:inline-block}
.h2{font:var(--hw) clamp(38px,6vw,80px)/var(--lh) var(--fh);letter-spacing:var(--ls);margin:0 0 22px}
.lead{font-size:clamp(18px,1.7vw,23px);line-height:1.45;color:var(--sec);margin:0 0 24px;max-width:46ch}
.sh{text-align:center;margin:0 auto 64px}.sh .lead{margin-inline:auto}
.fine{font-size:12.5px;line-height:1.5;color:var(--mute);margin:16px 0 0}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border:0;border-radius:980px;padding:15px 28px;font:600 17px/1 var(--f);text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:scale(1.03);box-shadow:0 0 0 6px rgba(8,145,178,.14)}
.link{color:var(--acc);text-decoration:none;font-weight:600;font-size:17px}.link:hover{text-decoration:underline}
:focus-visible{outline:2px solid #0891B2;outline-offset:3px;border-radius:6px}
.grad{background:var(--tg);-webkit-background-clip:text;background-clip:text;color:transparent}
/* nav */
.gnav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.gnav .gw{display:flex;align-items:center;gap:22px;height:52px}
.logo{display:inline-flex;align-items:center;gap:8px;font:700 18px/1 'Inter',sans-serif;text-decoration:none;letter-spacing:-.03em}
.lm{width:18px;height:18px;border-radius:6px;background:conic-gradient(from 210deg,#06B6D4,#10B981,#06B6D4);box-shadow:inset 0 0 0 4px #fff,0 0 0 1px rgba(6,182,212,.35)}
.links{display:flex;gap:22px;margin-inline-start:auto}.links a,.lang a{font-size:13px;color:var(--sec);text-decoration:none}.links a:hover{color:var(--ink)}
.lang{display:flex;gap:2px}.lang a{padding:4px 7px;border-radius:6px;font-weight:600;min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}.lang a[aria-current]{background:var(--ink);color:#fff}
.pill{font-size:13px;font-weight:600;background:var(--acc);color:#fff;text-decoration:none;padding:7px 14px;border-radius:980px;white-space:nowrap}
/* hero */
.hero{padding:clamp(64px,9vw,130px) 0 0;text-align:center;overflow:hidden;background:radial-gradient(60% 50% at 50% 100%,rgba(6,182,212,.08),transparent 70%)}
.hero-copy{max-width:1100px;margin:0 auto;padding:0 24px}
.hero .hh{font:var(--hw) clamp(48px,9vw,132px)/1 var(--fh);letter-spacing:-.05em;margin:0 0 26px}
[dir=rtl] .hero .hh{letter-spacing:0;line-height:1.35;font-size:clamp(42px,7.4vw,110px)}
.hero .hh span{display:block}.hero .hh .l2,.bignum bdi{background:var(--tg);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{margin:0 auto 34px;max-width:40ch}
.ctas{display:flex;gap:28px;justify-content:center;align-items:center;flex-wrap:wrap}
.hero-media{max-width:1240px;margin:36px auto 0;padding:0 24px}.hero-img{width:100%;transform-origin:50% 30%;-webkit-mask-image:radial-gradient(75% 80% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(75% 80% at 50% 50%,#000 60%,transparent 100%)}
/* numbers */
.tint{background:var(--alt);color:var(--ink)}
.numbers{padding:clamp(110px,14vw,190px) 0;text-align:center}
.bignum{display:flex;flex-direction:column;align-items:center;margin:56px 0}
.bignum bdi{white-space:nowrap;font:800 clamp(44px,10vw,156px)/1 'Inter',sans-serif;letter-spacing:-.05em}
.bignum.alt bdi{background:none;color:var(--ink)}
.bignum span{font-size:clamp(18px,2vw,26px);color:var(--sec);margin-top:12px}
/* cards */
.card,.tile,.hstep,.bars,.ph-card,.seg{background:var(--alt);border:1px solid var(--cb)}
.tint .tile,.tint .hstep,.tint .bars,.tint .seg,.tint .pkg{background:#fff}
/* story (static default; .motion = pinned) */
.story{padding:110px 0;background:#fff;border-top:1px solid var(--line)}
.st-pin{max-width:var(--gw);margin:0 auto;padding:0 24px}.st-head{text-align:center;margin-bottom:44px}
.st-stage{display:grid;gap:32px}.st-media{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.st-text{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.st-img img{width:100%;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}
.st-step h3{font:var(--hw) clamp(28px,3.4vw,48px)/1.08 var(--fh);letter-spacing:var(--ls);margin:0 0 12px}
[dir=rtl] .st-step h3{line-height:1.35}
.st-step p{color:var(--sec);margin:0 0 12px;font-size:19px}
.st-step .eyebrow{font-size:14px}
.rng{color:var(--ink)!important;font:700 clamp(22px,2.4vw,32px)/1.2 'Inter',sans-serif!important;letter-spacing:-.02em}.rng small{font-size:15px;color:var(--sec);font-weight:500;letter-spacing:0;font-family:var(--f)}
.st-dots{display:none}
.motion .story{padding:0}
.motion .st-pin{height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:52px}
.motion .st-head{margin-bottom:8px}.motion .st-head .h2{font-size:clamp(28px,3.6vw,48px)}
.motion .st-stage{grid-template-columns:1.1fr 1fr;align-items:center;gap:48px;flex:0 1 auto}
.motion .st-media,.motion .st-text{display:grid;grid-template-columns:1fr}
.motion .st-media>*,.motion .st-text>*{grid-area:1/1}
.motion .st-img{display:flex;justify-content:center}.motion .st-img img{max-height:60vh;width:auto}
.motion .st-step h3{font-size:clamp(40px,5vw,72px)}
.motion .st-dots{display:flex;gap:10px;justify-content:center;margin-top:20px}.st-dots i{width:8px;height:8px;border-radius:9px;background:#D2D2D7;transition:width .3s,background .3s}.st-dots i.on{width:28px;background:var(--lg)}
/* services bento */
.services{padding:clamp(110px,12vw,170px) 0}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.tile{grid-column:span 3;border-radius:28px;padding:40px;min-height:320px;display:flex;flex-direction:column}
.tile:nth-child(1),.tile:nth-child(4){grid-column:span 4}.tile:nth-child(2),.tile:nth-child(3){grid-column:span 2}
.tile.ai{grid-column:span 6;min-height:0;background:radial-gradient(80% 140% at 0% 0%,rgba(6,182,212,.12),transparent 60%),radial-gradient(80% 140% at 100% 100%,rgba(16,185,129,.12),transparent 60%),#fff!important}
.tile.ai p{color:var(--sec);font-size:21px;max-width:60ch;margin:0}
.tnum{font:700 13px/1 'Inter',sans-serif;color:var(--acc);margin-bottom:auto;padding-bottom:28px;letter-spacing:.02em}
.tile:nth-child(even) .tnum{color:#047857}
.tile h3{font:var(--hw) clamp(26px,2.6vw,38px)/1.15 var(--fh);letter-spacing:var(--ls);margin:0 0 14px}
.tile ul{margin:0 0 18px;padding:0;list-style:none;color:var(--sec)}.tile li{padding:7px 0;border-top:1px solid var(--line);font-size:16px}
.tile .rng{margin:auto 0 0}
/* app phone */
.app{padding:clamp(90px,10vw,150px) 0;background:radial-gradient(50% 40% at 50% 70%,rgba(6,182,212,.10),transparent 70%),#fff}
.phone-wrap{perspective:1400px}
.phone{width:min(330px,82vw);margin:0 auto;aspect-ratio:9/19;border-radius:54px;background:#1D1D1F;padding:12px;box-shadow:0 60px 120px -30px rgba(8,145,178,.30),inset 0 0 0 2px #3a3a3c,0 0 0 1px #000;position:relative;transform-origin:50% 100%}
.ph-notch{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:96px;height:28px;border-radius:20px;background:#1D1D1F;z-index:2}
.ph-screen{height:100%;border-radius:43px;background:#fff;color:var(--ink);padding:62px 14px 14px;display:flex;flex-direction:column;gap:10px;overflow:hidden;font-size:12px}
.ph-top{display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:700}.live{color:#047857;font-size:11px;font-weight:600}
.ph-card{border-radius:18px;padding:12px 14px}.ph-card span{color:var(--sec);display:block;font-size:11px}.ph-card b{font:800 22px/1.2 'Inter',sans-serif;letter-spacing:-.03em}.ph-card small{font-size:12px;color:var(--sec)}
.ph-card.big b{font-size:34px}.spark{display:flex;gap:4px;align-items:flex-end;height:44px;margin-top:6px}.spark i{flex:1;border-radius:4px;background:linear-gradient(var(--g2),var(--g1));height:30%}
.spark i:nth-child(2){height:45%}.spark i:nth-child(3){height:70%}.spark i:nth-child(4){height:55%}.spark i:nth-child(5){height:35%}.spark i:nth-child(6){height:25%}.spark i:nth-child(7){height:40%}.spark i:nth-child(8){height:85%}.spark i:nth-child(9){height:100%}.spark i:nth-child(10){height:60%}.spark i:nth-child(11){height:45%}.spark i:nth-child(12){height:30%}
.ph-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ph-grid b{font-size:18px}
.ph-card.ai{background:linear-gradient(135deg,rgba(6,182,212,.14),rgba(16,185,129,.12)),#fff}.ph-card.ai span{color:var(--acc)}.ph-card.ai p{margin:4px 0 8px;font-size:12px;line-height:1.35}.ph-card.ai em{font-style:normal;font-weight:600;background:var(--ink);color:#fff;border-radius:20px;padding:4px 12px;display:inline-block}
/* EV */
.ev{padding:clamp(110px,12vw,170px) 0;border-top:1px solid var(--line)}.ev-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.ev-media img{max-height:660px;width:auto;margin:0 auto;-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent);mask-image:radial-gradient(closest-side,#000 72%,transparent)}
.feats{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:18px}.feats li{display:grid;grid-template-columns:36px 1fr;gap:2px 12px}.fi{grid-row:span 2;font-size:24px}.feats b{font-size:18px;font-weight:700}.feats li span:last-child{color:var(--sec);font-size:15.5px}
.bars{border-radius:24px;padding:28px}.bar{margin-bottom:18px}.bh{display:flex;justify-content:space-between;gap:16px;font-size:14.5px;margin-bottom:8px}.bh span{color:var(--sec)}
.track{height:10px;border-radius:10px;background:#E5E5EA;overflow:hidden}.track i{display:block;height:100%;border-radius:10px;transform-origin:0 50%}[dir=rtl] .track i{transform-origin:100% 50%}
.b0 .track i{width:100%;background:linear-gradient(90deg,#D70015,#FF6B3D)}.b1 .track i{width:70%;background:var(--lg)}.b2 .track{display:none}.b2 .bh b{color:#047857}.b0 .bh b{color:var(--red)}
/* how */
.how{padding:clamp(110px,12vw,170px) 0;overflow:hidden;background:var(--alt)}
.how .hstep{background:#fff}
.how-track{list-style:none;margin:0 auto;padding:0 24px;max-width:var(--gw);display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.hstep{border-radius:28px;padding:40px;min-height:280px;display:flex;flex-direction:column}
.hnum{font:800 clamp(64px,7vw,104px)/1 'Inter',sans-serif;letter-spacing:-.05em;background:var(--tg);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:auto;padding-bottom:24px}
.hstep h3{font:var(--hw) 28px/1.2 var(--fh);letter-spacing:var(--ls);margin:0 0 10px}.hstep p{color:var(--sec);margin:0}
@media (min-width:901px){.motion .how{padding:0}.motion .how-pin{height:100vh;display:flex;flex-direction:column;justify-content:center}
 .motion .how-track{display:flex;max-width:none;width:max-content;padding:0 max(24px,calc((100vw - var(--gw))/2 + 24px));gap:24px}
 .motion .hstep{width:min(520px,40vw);min-height:min(420px,48vh)}}
/* packages */
.packages{padding:clamp(110px,12vw,170px) 0;background:#fff;color:var(--ink)}
.pk{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pkg{background:var(--alt);border:1px solid var(--cb);border-radius:28px;padding:36px;display:flex;flex-direction:column;gap:10px}
.pkg h3{font:var(--hw) 28px/1.2 var(--fh);margin:0;letter-spacing:var(--ls)}.pkg p{color:#6E6E73;margin:0 0 auto;padding-bottom:20px}.pkg .link{color:var(--acc)}
.pkg.feat{background:#1D1D1F;color:#F5F5F7;border-color:#1D1D1F}.pkg.feat p{color:#A1A1A6}.pkg.feat .link{color:var(--g2)}.pkg .tnum{padding:0;color:var(--acc)}.pkg.feat .tnum{color:var(--g1)}
.badges{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}.badges li{font-weight:700;font-size:17px;padding-top:18px;border-top:2px solid var(--ink)}
/* faq */
.faq{padding:clamp(110px,12vw,170px) 0;background:var(--alt)}.faq .h2{text-align:center;margin-bottom:40px}
.qa details{border-bottom:1px solid var(--line)}.qa summary{list-style:none;cursor:pointer;padding:24px 40px 24px 0;font-size:clamp(19px,1.8vw,24px);font-weight:600;position:relative;letter-spacing:-.01em}
[dir=rtl] .qa summary{padding:24px 0 24px 40px;letter-spacing:0}.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);font-size:30px;font-weight:500;color:var(--sec);transition:transform .3s}
.qa details[open] summary::after{transform:translateY(-50%) rotate(45deg);color:var(--acc)}.qa p{margin:0 0 24px;color:var(--sec);font-size:17px;max-width:70ch}
/* contact */
.contact{padding:clamp(110px,12vw,170px) 0;background:radial-gradient(50% 60% at 0% 0%,rgba(6,182,212,.07),transparent 70%),#fff}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.mail{display:inline-block;font-size:clamp(20px,2.2vw,28px);font-weight:700;text-decoration:none;margin:4px 0;background:var(--tg);-webkit-background-clip:text;background-clip:text;color:transparent}
form{display:grid;gap:14px}form label{display:grid;gap:6px;font-size:13px;color:var(--sec)}
form input,form textarea{font:inherit;font-size:17px;color:var(--ink);background:var(--alt);border:1px solid var(--cb);border-radius:14px;padding:14px 16px}
form input:focus,form textarea:focus{border-color:#0891B2;outline:none;background:#fff;box-shadow:0 0 0 4px rgba(8,145,178,.14)}
.contact .btn{justify-self:start}
/* footer */
.foot{background:var(--alt);color:var(--mute);font-size:12.5px;padding:48px 0 28px;border-top:1px solid var(--line)}
.f-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid var(--line)}.f-top p{margin:6px 0 0;max-width:46ch}.f-top .logo{color:var(--ink)}
.f-links{display:flex;flex-wrap:wrap;gap:8px 20px;align-content:flex-start}.f-links a{text-decoration:none;color:var(--sec)}.f-links a:hover{color:var(--ink)}
.srcs{padding:20px 0}.srcs b{color:var(--ink)}.srcs ol{margin:8px 0 0;padding-inline-start:18px;columns:2;column-gap:40px}.srcs li{margin-bottom:4px;break-inside:avoid}.srcs a{color:var(--sec);display:inline-block;padding:3px 0}
.disc{margin:0 0 20px;line-height:1.55}.f-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line)}
/* segments: homes, shops, offices, supermarkets */
.segments{padding:clamp(110px,12vw,170px) 0}
.segs{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.seg{border-radius:28px;padding:36px 30px;display:flex;flex-direction:column;gap:10px}
.seg svg{width:64px;height:64px;margin-bottom:14px}
.seg h3{font:var(--hw) clamp(22px,2vw,28px)/1.2 var(--fh);letter-spacing:var(--ls);margin:0}[dir=rtl] .seg h3{line-height:1.35}
.seg p{color:var(--sec);margin:0;font-size:16.5px}
/* reveal: rise 60px from blur to sharp (only when JS motion is active) */
.motion [data-r]{opacity:0;transform:translateY(60px);filter:blur(16px)}
/* responsive */
@media (max-width:900px){
 .links{display:none}.lang{margin-inline-start:auto}
 .st-media{grid-template-columns:1fr 1fr}.st-text{grid-template-columns:1fr}
 .motion .st-stage{grid-template-columns:1fr;gap:8px}.motion .st-img img{max-height:34vh}.motion .st-step{text-align:center}.motion .st-step h3{font-size:clamp(32px,9vw,44px)}.motion .st-step p{font-size:16px}
 .motion .st-head .h2{font-size:clamp(26px,7vw,34px)}
 .bento{grid-template-columns:1fr}.tile,.tile:nth-child(n){grid-column:auto;min-height:0;padding:32px}
 .ev-grid,.contact-grid{grid-template-columns:1fr;gap:40px}.ev-media img{max-height:440px}
 .segs{grid-template-columns:1fr 1fr}
 .how-track{grid-template-columns:1fr}.pk{grid-template-columns:1fr}.badges{grid-template-columns:1fr 1fr}
 .srcs ol{columns:1}
}
@media (max-width:480px){.gnav .gw{gap:10px;padding:0 14px}.pill{padding:6px 10px;font-size:12px}.lang a{padding:4px 5px;font-size:12px}.logo{font-size:16px}
 .hero-media{padding:0}.tile,.hstep,.pkg,.seg{border-radius:22px}.segs{grid-template-columns:1fr}.seg{padding:28px 24px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ===== live scenes ===== */
.live{padding:clamp(110px,12vw,170px) 0;background:#fff;border-top:1px solid var(--line)}
.live .sh{margin-bottom:48px}
.sc-toggle{display:inline-flex;align-items:center;gap:8px;margin-top:4px;background:#fff;border:1px solid var(--line);border-radius:980px;padding:8px 16px;font:600 14px/1 var(--f);color:var(--sec);cursor:pointer}
.sc-toggle:hover{color:var(--ink);border-color:#AEAEB2}.sc-toggle i{width:10px;height:12px;border-inline:3.5px solid currentColor;display:inline-block}
.sc-toggle[aria-pressed=true] i{border:0;width:0;height:0;border-block:6px solid transparent;border-inline-start:10px solid currentColor}
.scs{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.sc{background:var(--alt);border:1px solid var(--cb);border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
.sc.wide{grid-column:1/-1;flex-direction:row;align-items:center}.sc.wide .sc-stage{flex:1.35}.sc.wide .sc-copy{flex:1;padding:40px}
.sc.wide h3{font-size:clamp(28px,3vw,40px)}
.sc-stage{position:relative;aspect-ratio:480/300;container-type:inline-size;direction:ltr}
.sc-stage svg{display:block;width:100%;height:100%;direction:ltr}
.sc-copy{padding:6px 32px 34px}.sc-copy h3{font:var(--hw) clamp(22px,2vw,28px)/1.2 var(--fh);letter-spacing:var(--ls);margin:0 0 8px}[dir=rtl] .sc-copy h3{line-height:1.4}
.sc-copy p{color:var(--sec);margin:0;font-size:16.5px;max-width:52ch}
[dir=rtl] .sc-copy{direction:rtl;text-align:right}
.sc svg text{font-family:var(--f);font-weight:600;fill:#1D1D1F}
.sc .lb{font-size:13px}.sc .lb.sm{font-size:12.5px;fill:#6E6E73}.sc .lb.xs{font-size:10.5px}.sc .lb.b{font-size:14px;font-weight:700}.sc .ax{font-size:11px;fill:#6E6E73}
.sc .wh{fill:#fff}.sc .grn{fill:#059669}.sc-cam .grn{fill:#10B981}.sc .red{fill:#D70015}
.sc .big{font:800 34px/1 'Inter',sans-serif;letter-spacing:-.03em}.sc .mid{font:800 20px/1 'Inter',sans-serif}.sc .u{font-size:.5em;font-weight:600;fill:#6E6E73}
.chip,.toast{position:absolute;font-size:clamp(10px,2.75cqw,14px);line-height:1.25;font-weight:600;color:var(--ink);background:#fff;border-radius:999px;padding:.45em .85em;box-shadow:0 4px 18px rgba(0,0,0,.08);display:inline-flex;align-items:center;gap:.45em;white-space:nowrap}
.chip.soft{background:rgba(255,255,255,.85);color:var(--sec);box-shadow:none;border:1px solid var(--cb)}
.chip b,.toast b{font-weight:800}.chip .dot{width:.6em;height:.6em;border-radius:50%;background:#10B981;flex:none}.chip .dot.off{background:#AEAEB2}
[dir=rtl] .chip,[dir=rtl] .toast{direction:rtl}
.chip .ln{width:1.8em;height:3px;border-radius:3px;background:linear-gradient(90deg,#06B6D4,#10B981)}.chip .ln.dash{background:repeating-linear-gradient(90deg,#AEAEB2 0 5px,transparent 5px 9px)}
.chip .big{font:800 1.9em/1 'Inter',sans-serif;letter-spacing:-.03em;background:linear-gradient(100deg,#0891B2,#059669);-webkit-background-clip:text;background-clip:text;color:transparent}
.toast{border-radius:16px;padding:.7em .95em;box-shadow:0 10px 30px rgba(0,0,0,.14);gap:.6em;white-space:normal;max-width:62%}
.toast span{display:flex;flex-direction:column}.toast span b{font-size:.82em;color:var(--sec);font-weight:700}
.toast .ti{width:1.7em;height:1.7em;border-radius:.45em;background:linear-gradient(135deg,#06B6D4,#10B981);flex:none}.toast.red .ti{background:#D70015}
/* positions (physical: graphics are not mirrored) */
.c-ev1{top:5%;right:4%}.c-ev2{top:34%;left:4%}.c-ev3{top:27%;left:61%}
.c-en1{top:3%;left:8%}.c-en2{top:13.5%;left:8%}.c-en3{top:3%;right:4%;flex-direction:column;align-items:flex-end;border-radius:18px}.c-en3 small{font-size:.8em;color:var(--sec)}
[dir=rtl] .c-en3{align-items:flex-start}
.c-so1{top:37%;left:5%}.c-so2{top:52%;right:3%}.c-so3{bottom:4%;left:26%}
.t-cam{bottom:7%;right:5%}
.c-sec1{top:5%;left:4%}.c-sec2{top:5%;left:4%;opacity:0}.t-sec1,.t-sec2{top:30%;right:3%;max-width:40%}.t-sec2{opacity:0}
.t-cl{bottom:5%;left:4%;max-width:56%}
.c-ph1{top:3%;right:4%}
.c-bl1{top:5%;right:4%;font-size:clamp(12px,3.4cqw,17px)}
.t-fr{bottom:7%;right:3%;max-width:42%}
/* static (reduced-motion / not yet in view) states */
.ev-bat{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(.8)}
.so-bat{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.85)}
.en-line{stroke-dashoffset:0}
.sec-door{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(.28)}.sec-ring{opacity:0}
.mo-p{transform:translate(150px,90px)}.ml{opacity:0}.ml0{opacity:1}
.cl-arc{stroke-dashoffset:22}.cl-sash{transform-box:fill-box;transform-origin:100% 50%}
.lk-v{transform-box:fill-box;transform-origin:50% 50%;transform:rotate(90deg)}.lk-drop{opacity:0}.lk-pud{transform-box:fill-box;transform-origin:50% 50%;transform:scale(.35)}.lk-led{fill:#10B981}.lk-s1{opacity:0}
.sm-p{opacity:0}.sm-ring{opacity:0}.se-al{opacity:0}.se-al1{opacity:1}
.co-n{transform-origin:396px 132px;transform:rotate(55deg)}.co-fan{transform-box:fill-box;transform-origin:50% 50%}
.ph-on{opacity:1}.ph-tap{opacity:0}.ph-bl{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(1)}.ph-lamp{opacity:.12}.ph-tv{opacity:.95}.ph-w{transform-box:fill-box;transform-origin:50% 50%;transform:scaleY(.4)}
.bl-sun{transform-origin:150px 240px}.bl-bl{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(.75)}
.fr-door{transform-box:fill-box;transform-origin:100% 50%}.fr-al{opacity:0}.fr-line{stroke-dashoffset:0}
.t-cl,.t-fr{opacity:0}
/* ===== playing (in view, JS on, motion allowed) ===== */
.live.paused .play *{animation-play-state:paused!important}
@keyframes flow{to{stroke-dashoffset:-32}}
@keyframes blink{50%{opacity:.25}}
@keyframes spin{to{transform:rotate(360deg)}}
.play .ev-flow{animation:flow .7s linear infinite,evon 8s infinite}
.play .ev-bat{animation:evbat 8s infinite}.play .ev-led{animation:blink 1.2s infinite}.play .pc{animation:pc 8s infinite}
.pb{fill:#D2D2D7}.pc{fill:url(#evg)}
@keyframes evbat{0%,12%{transform:scaleX(.2)}85%,100%{transform:scaleX(.8)}}
@keyframes pc{0%,10%,90%,100%{opacity:.55}20%,80%{opacity:1}}
.play .c-ev1 .dot{animation:blink 1.2s infinite}
.play .en-line{animation:enl 8s infinite}.play .en-area{animation:ena 8s infinite}.play .en-arrow{animation:enarr 8s infinite}
@keyframes enl{0%,10%{stroke-dashoffset:100}70%,100%{stroke-dashoffset:0}}
.play .so-f{animation:flow .9s linear infinite}.play .so-rays{animation:spin 12s linear infinite}.so-rays{transform-origin:90px 70px}
.play .so-bat{animation:sobat 6s infinite}@keyframes sobat{0%{transform:scaleY(.3)}90%,100%{transform:scaleY(.85)}}
.play .cam-p{animation:camp 7s infinite}.play .cam-box{animation:camb 7s infinite}.play .cam-rec{animation:blink 1s infinite}.play .cam-lamp{animation:caml 7s infinite}.play .t-cam{animation:tcam 7s infinite}
@keyframes camp{0%{transform:translateX(170px)}40%,100%{transform:none}}
.play .sec-door{animation:secd 8s infinite}.play .sec-led{animation:secl 8s infinite}.play .sec-siren{animation:secs 8s infinite}.play .sec-ring{animation:secr 8s infinite}.play .sec-ring.r2{animation-delay:-.5s}
.play .c-sec1{animation:sec1 8s infinite}.play .c-sec2{animation:sec2 8s infinite}.play .t-sec1{animation:tsec1 8s infinite}.play .t-sec2{animation:tsec2 8s infinite}
@keyframes secd{0%,26%{transform:none}33%,70%{transform:scaleX(.28)}78%,100%{transform:none}}
@keyframes secl{0%,28%,76%,100%{fill:#10B981}31%,72%{fill:#D70015}}
@keyframes secs{0%,30%,74%,100%{fill:#D2D2D7}32%,36%,44%,52%,60%,68%{fill:#D70015}40%,48%,56%,64%{fill:#FFB3B8}}
@keyframes secr{0%,30%{opacity:0;transform:scale(1)}31%{opacity:1;transform:scale(1)}37%{opacity:0;transform:scale(2.6)}38%,74%{opacity:0}100%{opacity:0}}
.sec-ring{transform-box:fill-box;transform-origin:50% 50%}
.play .sec-ring{animation:ringp 1s infinite,secw 8s infinite}
@keyframes ringp{0%{transform:scale(1);opacity:1}100%{transform:scale(2.6);opacity:0}}
@keyframes secw{0%,30%,74%,100%{visibility:hidden}31%,72%{visibility:visible}}
.play .mo-p{animation:mop 9s infinite}.play .mo-pulse{animation:pulse 1.4s infinite}.mo-pulse{transform-box:fill-box;transform-origin:50% 50%}
@keyframes pulse{0%{transform:scale(.6);opacity:.5}100%{transform:scale(1.6);opacity:0}}
@keyframes mop{0%{transform:translate(120px,262px);opacity:0}4%{opacity:1}10%{transform:translate(120px,205px)}18%{transform:translate(120px,150px)}28%{transform:translate(150px,90px)}40%{transform:translate(260px,90px)}50%{transform:translate(350px,90px)}62%{transform:translate(360px,150px)}74%{transform:translate(320px,205px)}90%{transform:translate(320px,205px);opacity:1}96%,100%{transform:translate(320px,205px);opacity:0}}
.play .ml0{animation:ml0 9s infinite}.play .ml1{animation:ml1 9s infinite}.play .ml2{animation:ml2 9s infinite}.play .ml3{animation:ml3 9s infinite}
.play .cl-arc{animation:cla 8s infinite}.play .cl-sash{animation:cls 8s infinite}.play .cl-air path{animation:flow 1s linear infinite}.play .cl-air{animation:clair 8s infinite}.play .cl-led{animation:clled 8s infinite}.play .t-cl{animation:tcl 8s infinite}
@keyframes cla{0%{stroke-dashoffset:60}40%,47%{stroke-dashoffset:22}70%{stroke-dashoffset:26}86%,100%{stroke-dashoffset:22}}
@keyframes cls{0%,44%{transform:none}49%,68%{transform:scaleX(.3) skewY(-8deg)}73%,100%{transform:none}}
@keyframes clled{0%,46%,72%,100%{fill:#10B981}48%,70%{fill:#F59E0B}}
.play .lk-v{animation:lkv 9s infinite}.play .lk-drop{animation:lkd 9s infinite}.play .lk-pud{animation:lkp 9s infinite}.play .lk-led{animation:lkl 9s infinite}.play .lk-s1{animation:lks1 9s infinite}.play .lk-s2{animation:lks2 9s infinite}.play .se-al0{animation:se0 9s infinite}
@keyframes lkv{0%,48%{transform:none}54%,100%{transform:rotate(90deg)}}
@keyframes lkd{0%{opacity:0;transform:none}2%{opacity:1}10%{opacity:1;transform:translateY(74px)}10.1%{opacity:0;transform:none}12%{opacity:1;transform:none}20%{opacity:1;transform:translateY(74px)}20.1%{opacity:0;transform:none}22%{opacity:1;transform:none}30%{opacity:1;transform:translateY(74px)}30.1%{opacity:0;transform:none}32%{opacity:1;transform:none}40%{opacity:1;transform:translateY(74px)}40.1%{opacity:0;transform:none}42%{opacity:1;transform:none}50%{opacity:1;transform:translateY(74px)}50.1%,100%{opacity:0;transform:none}}
@keyframes lkp{0%{transform:scale(0)}50%{transform:scale(1)}80%{transform:scale(.9);opacity:.45}96%,100%{transform:scale(.9);opacity:0}}
@keyframes lkl{0%,18%,56%,100%{fill:#10B981}20%,54%{fill:#D70015}}
.play .sm-p{animation:smp 9s infinite}.play .sm-p1{animation-delay:-.5s}.play .sm-p2{animation-delay:-1s}
@keyframes smp{0%,8%{opacity:0;transform:none}12%{opacity:.8}24%{opacity:0;transform:translateY(-110px) scale(1.6)}24.1%{transform:none}28%{opacity:.8;transform:none}40%{opacity:0;transform:translateY(-110px) scale(1.6)}40.1%{transform:none}44%{opacity:.8;transform:none}56%,100%{opacity:0;transform:translateY(-110px) scale(1.6)}}
.sm-p{transform-box:fill-box;transform-origin:50% 50%}
.sm-ring{transform-box:fill-box;transform-origin:50% 50%}
.play .sm-ring{animation:ringp 1s infinite,smw 9s infinite}.play .sm-ring.r2{animation-delay:-.5s,0s}.play .sm-led{animation:blink .5s infinite}.play .sm-s{animation:sms 9s infinite}.play .se-al1{animation:se1 9s infinite}
@keyframes smw{0%,28%,82%,100%{visibility:hidden}30%,80%{visibility:visible}}
.play .co-n{animation:con 9s infinite}.play .co-fan{animation:spin .6s linear infinite,cof 9s infinite}.play .co-s{animation:cos 9s infinite}.play .se-al2{animation:se2 9s infinite}
@keyframes con{0%{transform:rotate(-60deg)}45%{transform:rotate(55deg)}90%,100%{transform:rotate(-45deg)}}
@keyframes cof{0%,44%{opacity:.35}48%,88%{opacity:1}92%,100%{opacity:.35}}
.co-fan{opacity:1}
.play .ph-on{animation:phon 8s infinite}.play .ph-tap{animation:phtap 8s infinite}.play .ph-bl{animation:phbl 8s infinite}.play .ph-lamp{animation:phl 8s infinite}.play .ph-tv{animation:phtv 8s infinite}.play .ph-dim{animation:phd 8s infinite}.play .c-ph1{animation:cph 8s infinite}
.play .ph-w{animation:phw .5s ease-in-out infinite alternate,phwv 8s infinite}.play .ph-w:nth-child(2n){animation-delay:-.25s,0s}.play .ph-w:nth-child(3n){animation-delay:-.4s,0s}
@keyframes phw{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@keyframes phwv{0%,4%{opacity:0}8%,20%{opacity:1}26%,100%{opacity:.15}}
@keyframes phtap{0%,19%{opacity:0;transform:scale(.5)}22%{opacity:.8;transform:scale(1)}30%,100%{opacity:0;transform:scale(3)}}
.ph-tap{transform-box:fill-box;transform-origin:50% 50%}
@keyframes phbl{0%,24%{transform:scaleY(.06)}40%,92%{transform:scaleY(1)}100%{transform:scaleY(.06)}}
@keyframes phl{0%,24%{opacity:.9}34%,92%{opacity:.12}100%{opacity:.9}}
@keyframes phtv{0%,32%{opacity:0}42%,92%{opacity:.95}100%{opacity:0}}
@keyframes phd{0%,24%{opacity:0}36%,92%{opacity:.08}100%{opacity:0}}
.play .bl-sun{animation:bls 10s infinite}.play .bl-bl{animation:blb 10s infinite}.play .bl-night{animation:bln 10s infinite}.play .bl-moon{animation:blm 10s infinite}.play .bl-lit{animation:bll 10s infinite}
@keyframes bls{0%{transform:rotate(-78deg);opacity:1}76%{transform:rotate(78deg);opacity:1}80%,100%{transform:rotate(78deg);opacity:0}}
@keyframes blb{0%,26%{transform:scaleY(.08)}38%,56%{transform:scaleY(.75)}68%,100%{transform:scaleY(.08)}}
@keyframes bln{0%,74%{opacity:0}84%,96%{opacity:.6}100%{opacity:0}}
@keyframes blm{0%,78%{opacity:0}86%,96%{opacity:1}100%{opacity:0}}
@keyframes bll{0%,78%{opacity:0}86%,96%{opacity:.55}100%{opacity:0}}
.play .fr-door{animation:frd 8s infinite}.play .fr-al{animation:fral 8s infinite}.play .fr-line{animation:frl 8s linear infinite}.play .t-fr{animation:tfr 8s infinite}
@keyframes frd{0%,22%{transform:none}30%,68%{transform:scaleX(.12)}76%,100%{transform:none}}
@keyframes frl{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}
@media (max-width:900px){.scs{grid-template-columns:1fr}.sc.wide{flex-direction:column;align-items:stretch}.sc.wide .sc-copy{padding:6px 32px 34px}.sc.wide .sc-stage{flex:none}}
@media (max-width:480px){.scs{gap:16px}.sc{border-radius:22px}.sc-copy,.sc.wide .sc-copy{padding:4px 22px 26px}.chip,.toast{font-size:clamp(9.5px,2.9cqw,13px)}}
@media (prefers-reduced-motion:reduce){.sc-toggle{display:none}}
/* ===== photo stages ===== */
.sc-stage.photo{background:#D2D2D7}
.sc-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sc-stage.photo svg{position:relative}
.c-ev1{top:5%;left:3%;right:auto}.c-ev2{top:34%;left:50%}.c-ev3{top:46%;left:63%}
.chip .bt{width:2.4em;height:.95em;border:1.5px solid #1D1D1F;border-radius:.25em;padding:1px;display:inline-flex;flex:none;box-sizing:border-box}
.chip .bf{display:block;height:100%;width:80%;border-radius:.15em;background:linear-gradient(90deg,#0891B2,#059669)}
.play .c-ev3 .bf{animation:evbf 8s infinite}@keyframes evbf{0%,12%{width:20%}85%,100%{width:80%}}
.ev-port{transform-box:fill-box;transform-origin:50% 50%}.play .ev-port{animation:pulse 1.4s infinite}
.c-so1{top:24%;left:3%}.c-so2{top:36%;right:2%;left:auto}.c-so3{bottom:4%;left:4%}
.so-glow{transform-box:fill-box;transform-origin:50% 50%}.play .so-glow{animation:sog 3s ease-in-out infinite alternate}@keyframes sog{to{transform:scale(1.25);opacity:.25}}
.play .so-win{animation:sow 6s infinite}@keyframes sow{0%,20%{opacity:.05}50%,100%{opacity:.3}}
.cam-p2{opacity:1}.play .cam-p2{animation:campf 7s infinite}
.cam-lamp{transform-box:fill-box;transform-origin:50% 50%}
.t-cam{bottom:6%;right:4%}
.sec-out{opacity:0}.play .sec-out{animation:secw 8s infinite,blink .5s infinite;opacity:1}
.t-sec1,.t-sec2{top:auto;bottom:6%;right:3%;max-width:46%}
.cl-win{opacity:0}.play .cl-win{animation:clwin 8s infinite}
.t-cl{bottom:5%;left:auto;right:4%;max-width:56%}
.sc .lb.xs.sm{font-size:10px}
.bl-bl{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(.5)}
.bl-dusk{opacity:0}.play .bl-dusk{animation:bldk 10s infinite}
.play .bl-bl{animation:blb2 10s infinite}
@keyframes blb2{0%,22%{transform:scaleY(.5);opacity:1}38%,56%{transform:scaleY(.92);opacity:1}66%{transform:scaleY(.5);opacity:1}74%,96%{transform:scaleY(.5);opacity:0}100%{transform:scaleY(.5);opacity:1}}
.chip .sun{width:.8em;height:.8em;border-radius:50%;background:#F59E0B;box-shadow:0 0 0 .2em rgba(245,158,11,.25);flex:none}
.play .c-bl1 .sun{animation:blsun 10s infinite}@keyframes blsun{0%,68%{background:#F59E0B}78%,96%{background:#64748B}100%{background:#F59E0B}}
.play .sm-ring{animation:ringp2 1s infinite,smw 9s infinite}@keyframes ringp2{0%{transform:scale(1);opacity:1}100%{transform:scale(1.8);opacity:0}}
@keyframes evon{0%,8%{opacity:0}12%,86%{opacity:1}90%,100%{opacity:0}}
@keyframes ena{0%,20%{opacity:0}30%,96%{opacity:0.14}100%,100%{opacity:0}}
@keyframes enarr{0%,58%{opacity:0}62%,96%{opacity:1}100%,100%{opacity:0}}
@keyframes camb{0%,38%{opacity:0}40%,96%{opacity:1}98%,100%{opacity:0}}
@keyframes caml{0%,35%{opacity:0}38%,96%{opacity:1}99%,100%{opacity:0}}
@keyframes tcam{0%,46%{opacity:0;transform:translateY(14px)}50%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(14px)}}
@keyframes sec1{0%,76%{opacity:1}79%,100%{opacity:0}}
@keyframes sec2{0%,77%{opacity:0}80%,97%{opacity:1}100%,100%{opacity:0}}
@keyframes tsec1{0%,30%{opacity:0;transform:translateY(14px)}34%,72%{opacity:1;transform:none}76%,100%{opacity:0;transform:translateY(14px)}}
@keyframes tsec2{0%,76%{opacity:0;transform:translateY(14px)}80%,97%{opacity:1;transform:none}100%,100%{opacity:0;transform:translateY(14px)}}
@keyframes ml2{0%,0%{opacity:0}2%,22%{opacity:1}26%,100%{opacity:0}}
@keyframes ml0{0%,16%{opacity:0}20%,44%{opacity:1}48%,100%{opacity:0}}
@keyframes ml1{0%,34%{opacity:0}38%,66%{opacity:1}70%,100%{opacity:0}}
@keyframes ml3{0%,54%{opacity:0}58%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes clair{0%,45%{opacity:1}48%,100%{opacity:0}}
@keyframes tcl{0%,45%{opacity:0;transform:translateY(14px)}49%,70%{opacity:1;transform:none}74%,100%{opacity:0;transform:translateY(14px)}}
@keyframes lks1{0%,17%{opacity:0}20%,52%{opacity:1}55%,100%{opacity:0}}
@keyframes lks2{0%,53%{opacity:0}56%,96%{opacity:1}99%,100%{opacity:0}}
@keyframes se0{0%,17%{opacity:0}20%,54%{opacity:1}57%,100%{opacity:0}}
@keyframes sms{0%,27%{opacity:0}30%,80%{opacity:1}83%,100%{opacity:0}}
@keyframes se1{0%,27%{opacity:0}30%,80%{opacity:1}83%,100%{opacity:0}}
@keyframes cos{0%,43%{opacity:0}46%,88%{opacity:1}91%,100%{opacity:0}}
@keyframes se2{0%,37%{opacity:0}40%,60%{opacity:1}63%,100%{opacity:0}}
@keyframes phon{0%,20%{opacity:0}22%,92%{opacity:1}94%,100%{opacity:0}}
@keyframes cph{0%,22%{opacity:0}26%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes fral{0%,47%{opacity:0}50%,74%{opacity:1}77%,100%{opacity:0}}
@keyframes tfr{0%,46%{opacity:0;transform:translateY(14px)}50%,74%{opacity:1;transform:none}78%,100%{opacity:0;transform:translateY(14px)}}
@keyframes campf{0%,25%{opacity:0}30%,96%{opacity:1}100%,100%{opacity:0}}
@keyframes clwin{0%,43%{opacity:0}46%,72%{opacity:1}75%,100%{opacity:0}}
@keyframes bldk{0%,66%{opacity:0}74%,96%{opacity:1}100%,100%{opacity:0}}
/* ===== cinematic scroll hero ===== */
.cine{position:relative;height:780vh;margin-top:-53px;background:#0B0C0E;color:#fff}
.cine-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.cine-poster img,.cine-cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cine-cv{opacity:0;transition:opacity .4s}.cine.ready .cine-cv{opacity:1}
.cine-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,8,.72) 0%,rgba(5,6,8,.38) 38%,rgba(5,6,8,0) 66%),linear-gradient(0deg,rgba(5,6,8,.45),rgba(5,6,8,0) 30%)}
[dir=rtl] .cine-scrim{background:linear-gradient(270deg,rgba(5,6,8,.72) 0%,rgba(5,6,8,.38) 38%,rgba(5,6,8,0) 66%),linear-gradient(0deg,rgba(5,6,8,.45),rgba(5,6,8,0) 30%)}
.cine-copy{position:absolute;inset:0;pointer-events:none}
.cc{position:absolute;inset-inline-start:max(24px,6vw);top:50%;width:min(560px,44vw);transform:translateY(calc(-50% + 48px));opacity:0;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.cc.on{opacity:1;transform:translateY(-50%);pointer-events:auto}.cc.past{transform:translateY(calc(-50% - 48px))}
.cc-still{display:none}
.cc .eyebrow{color:#5EEAD4;font-size:14px;font-weight:600;letter-spacing:.02em;margin:0 0 14px}
.cc h1,.cc h2{font-family:var(--fh);font-weight:800;font-size:clamp(40px,5.6vw,80px);line-height:var(--lh);letter-spacing:var(--ls);margin:0 0 18px;color:#fff;text-wrap:balance}
[dir=rtl] .cc h1,[dir=rtl] .cc h2{font-size:clamp(34px,4.6vw,64px)}
.cc .lead{font-size:clamp(16px,1.35vw,20px);line-height:1.5;color:rgba(255,255,255,.8);margin:0;max-width:40ch}
.cc .ctas{display:flex;gap:22px;align-items:center;margin-top:28px;flex-wrap:wrap}
.cc .btn{background:#fff;color:#1D1D1F}.cc .link{color:#fff}
.c-hint{display:inline-flex;align-items:center;gap:10px;margin-top:34px;font-size:13px;color:rgba(255,255,255,.7);letter-spacing:.04em}
.c-hint i{width:1px;height:34px;background:linear-gradient(#fff,transparent);animation:chint 1.8s ease-in-out infinite}
@keyframes chint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.cine-chips{position:absolute;inset-inline-end:max(20px,5vw);bottom:12vh;width:300px;height:180px;pointer-events:none}
.cg{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;align-items:flex-end;gap:10px;opacity:0;transform:translateY(24px);transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1)}
[dir=rtl] .cg{align-items:flex-start}
.cg.on{opacity:1;transform:none}
.cchip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.9);color:#1D1D1F;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.25);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.cchip.soft{background:rgba(20,22,26,.55);color:#fff;border:1px solid rgba(255,255,255,.18)}
.cchip .dot{width:8px;height:8px;border-radius:50%;background:#10B981;box-shadow:0 0 0 4px rgba(16,185,129,.2)}.cchip .dot.sun{background:#F59E0B;box-shadow:0 0 0 4px rgba(245,158,11,.22)}
.cchip.det{background:#10B981;color:#fff}.cchip.det .dot{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.3)}
.cchip .bt{width:28px;height:13px;border:1.5px solid #1D1D1F;border-radius:3px;padding:1px;display:inline-flex;box-sizing:border-box}
.cchip .bf{display:block;height:100%;width:80%;border-radius:1.5px;background:linear-gradient(90deg,#0891B2,#059669)}
.cine-bar{position:absolute;inset-inline:max(24px,6vw);bottom:28px;height:2px;background:rgba(255,255,255,.18);border-radius:2px;overflow:hidden}
.cine-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#06B6D4,#10B981);transform:scaleX(0);transform-origin:0 50%}
[dir=rtl] .cine-bar i{transform-origin:100% 50%}
.gnav.on-dark{background:rgba(10,11,13,.35);border-bottom-color:rgba(255,255,255,.08)}
.gnav.on-dark .logo{color:#fff}.gnav.on-dark .lm{box-shadow:inset 0 0 0 4px #15171a,0 0 0 1px rgba(255,255,255,.3)}
.gnav.on-dark .links a{color:rgba(255,255,255,.85);padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06)}
.gnav.on-dark .links{gap:8px}.gnav.on-dark .links a:hover{background:rgba(255,255,255,.16);color:#fff}
.gnav.on-dark .lang a{color:rgba(255,255,255,.75)}.gnav.on-dark .lang a[aria-current]{background:#fff;color:#1D1D1F}
.gnav.on-dark .pill{background:#fff;color:#1D1D1F}
.gnav{transition:background .4s,border-color .4s}
@media (max-width:760px){
 .cine{height:720vh}
 .cine-scrim,[dir=rtl] .cine-scrim{background:linear-gradient(0deg,rgba(5,6,8,.85) 0%,rgba(5,6,8,.55) 34%,rgba(5,6,8,0) 62%),linear-gradient(180deg,rgba(5,6,8,.45),rgba(5,6,8,0) 22%)}
 .cc{top:auto;bottom:64px;width:auto;inset-inline-end:22px;inset-inline-start:22px;transform:translateY(40px)}
 .cc.on{transform:none}.cc.past{transform:translateY(-40px)}
 .cc h1,.cc h2{font-size:clamp(32px,9vw,44px);margin-bottom:12px}[dir=rtl] .cc h1,[dir=rtl] .cc h2{font-size:clamp(28px,8vw,38px)}
 .cc .lead{font-size:15.5px}
 .c-hint{margin-top:18px}
 .cine-chips{top:72px;bottom:auto;inset-inline-end:16px;width:auto;inset-inline-start:16px;height:140px}
 .cg{inset:0 0 auto 0;align-items:flex-end;gap:8px}
 .cchip{font-size:13px;padding:7px 12px}
 .cine-bar{bottom:26px;inset-inline:22px}
}
@media (prefers-reduced-motion:reduce){
 .cine{height:auto}.cine-stick{position:relative;height:auto;overflow:visible}
 .cine-poster,.cine-cv,.cine-chips,.cine-bar,.cine-scrim,.c-hint{display:none}
 .cine-copy{position:relative}
 .cc{position:relative;inset:auto;width:auto;min-height:88vh;opacity:1;transform:none;display:flex;align-items:center;padding:96px max(24px,6vw);overflow:hidden}
 .cc-still{display:block;position:absolute;inset:0}.cc-still img{width:100%;height:100%;object-fit:cover}
 .cc::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(5,6,8,.75),rgba(5,6,8,.2) 70%)}
 [dir=rtl] .cc::before{background:linear-gradient(270deg,rgba(5,6,8,.75),rgba(5,6,8,.2) 70%)}
 .cc-t{position:relative;z-index:2;max-width:560px}
 .cc.past,.cc.on{transform:none}
}

/* --- timed chapter cards (JS sets opacity/transform from smoothed scroll progress) --- */
.cine-hint{position:absolute;left:50%;bottom:5.5vh;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.82);pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.cine-hint span{padding:8px 16px;border-radius:999px;background:rgba(14,16,20,.35);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.cine-hint i{display:block;width:1px;height:34px;background:linear-gradient(#fff,transparent);animation:chint 1.8s ease-in-out infinite}
.cine.js .cc{transition:none;opacity:0;will-change:opacity,transform;width:auto;top:auto;bottom:auto;inset-inline-start:auto;inset-inline-end:auto;
  padding:26px 28px;border-radius:26px;background:rgba(14,16,20,.42);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);box-shadow:0 24px 60px rgba(0,0,0,.28)}
.cine.js .cc .eyebrow{margin-bottom:10px}
.cine.js .cc h2{font-size:clamp(30px,3.3vw,48px);margin-bottom:12px}
[dir=rtl] .cine.js .cc h2{font-size:clamp(26px,2.9vw,42px)}
.cine.js .cc .lead{font-size:clamp(15px,1.15vw,18px)}
/* 1: centered glass headline */
.cine.js .cc[data-ch="0"]{left:50%;top:50%;translate:-50% -50%;width:min(780px,86vw);text-align:center;padding:40px 44px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.cine.js .cc[data-ch="0"] .lead{margin:0 auto}
/* 2 & 4: bottom-start card; 3 & 5: bottom-end card (mirrors in RTL) */
.cine.js .cc[data-ch="1"],.cine.js .cc[data-ch="3"]{inset-inline-start:max(20px,5vw);bottom:9vh;width:min(470px,42vw)}
.cine.js .cc[data-ch="2"],.cine.js .cc[data-ch="4"]{inset-inline-end:max(20px,5vw);bottom:9vh;width:min(470px,42vw)}
/* 6: centered CTA card scaling in */
.cine.js .cc[data-ch="5"]{left:50%;top:50%;translate:-50% -50%;width:min(640px,86vw);text-align:center;padding:40px 44px;background:rgba(14,16,20,.5);transform-origin:50% 50%}
.cine.js .cc[data-ch="5"] .lead{margin:0 auto}.cine.js .cc[data-ch="5"] .ctas{justify-content:center}
/* live chips move to the top so they never collide with the bottom cards */
.cine.js .cine-chips{top:13vh;bottom:auto;height:auto}
.cine.js .cg{inset:0 0 auto 0;transition:none}
.cine.js .cine-scrim{background:radial-gradient(120% 90% at 50% 45%,rgba(5,6,8,0) 40%,rgba(5,6,8,.45) 100%),linear-gradient(0deg,rgba(5,6,8,.5),rgba(5,6,8,0) 35%)}
@media (max-width:760px){
 .cine.js .cc[data-ch]{left:16px;right:16px;inset-inline-start:16px;inset-inline-end:16px;width:auto;bottom:5vh;top:auto;translate:none;padding:20px 20px;border-radius:22px}
 .cine.js .cc[data-ch="0"],.cine.js .cc[data-ch="5"]{top:50%;bottom:auto;translate:0 -50%}
 .cine.js .cc h1{font-size:clamp(34px,9vw,44px)}
 .cine.js .cc h2{font-size:clamp(26px,7.4vw,34px)}
 .cine.js .cine-chips{top:10vh;inset-inline-end:16px;width:auto}
 .cine-hint{bottom:3.5vh}
}
@media (prefers-reduced-motion:reduce){.cine-hint{display:none}}

/* ===== exploded smart home ===== */
.xpl{position:relative;height:460vh;background:#000;color:#fff}
.xpl-stick{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:4vw;padding:0 max(24px,6vw);overflow:hidden}
.xpl-text{position:relative;min-height:340px}
.xpl-text .eyebrow{color:#5EEAD4;font-size:14px;font-weight:600;letter-spacing:.02em;margin:0 0 14px}
.xt{position:absolute;inset:44px 0 auto 0;opacity:0;transform:translateY(36px);transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.xt.on{opacity:1;transform:none;pointer-events:auto}.xt.past{transform:translateY(-36px)}
.xt h2{font-family:var(--fh);font-weight:800;font-size:clamp(34px,4.2vw,60px);line-height:var(--lh);letter-spacing:var(--ls);margin:0 0 18px;text-wrap:balance}
.xt p{font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:rgba(255,255,255,.72);margin:0;max-width:42ch}
.xt .btn{display:inline-block;margin-top:26px;background:#fff;color:#1D1D1F}
.xpl-bar{position:absolute;left:0;right:0;bottom:-40px;height:2px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden;max-width:300px}
.xpl-bar i{display:block;height:100%;background:linear-gradient(90deg,#06B6D4,#10B981);transform:scaleX(0);transform-origin:0 50%}
[dir=rtl] .xpl-bar i{transform-origin:100% 50%}
.xpl-stage{position:relative;width:min(84svh,100%);aspect-ratio:1;justify-self:center}
.xpl-stage::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(20,184,166,.16),rgba(20,184,166,0));opacity:var(--glow,1)}
.xhouse{position:absolute;height:auto;opacity:0;transform:scale(.92);will-change:opacity,transform}
.xp{position:absolute;transform:translate(-50%,-50%);will-change:transform,opacity}
.xp img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.xpl.in .xp img{animation:xbob 6s ease-in-out infinite}
.xp-thermo img{animation-delay:-1s!important}.xp-sensor img{animation-delay:-2s!important}.xp-plug img{animation-delay:-3s!important}.xp-camera img{animation-delay:-4s!important}.xp-charger img{animation-delay:-5s!important}
@keyframes xbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.xl{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:6px;white-space:nowrap;text-align:center;font-size:13px;line-height:1.3;opacity:var(--lab,0);transition:opacity .2s}
.xl b{display:block;font-weight:600;color:#fff}.xl span{color:rgba(255,255,255,.6);font-size:12px}
.xl::before{content:"";display:block;width:1px;height:14px;margin:0 auto 6px;background:linear-gradient(rgba(94,234,212,0),#5EEAD4)}
.xpins{position:absolute;inset:0;opacity:var(--pins,0)}
.xpin{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px}
.xpin i{width:10px;height:10px;border-radius:50%;background:#5EEAD4;box-shadow:0 0 0 4px rgba(94,234,212,.25),0 0 18px #5EEAD4}
.xpl.in .xpin i{animation:xpulse 2.4s ease-out infinite}
@keyframes xpulse{0%{box-shadow:0 0 0 0 rgba(94,234,212,.5),0 0 18px #5EEAD4}100%{box-shadow:0 0 0 14px rgba(94,234,212,0),0 0 18px #5EEAD4}}
.xpin b{font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.18);white-space:nowrap;color:#fff}
.xkit{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);opacity:var(--pins,0)}
@media (max-width:760px){
 .xpl{height:420vh}
 .xpl-stick{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:0;padding:72px 20px 20px}
 .xpl-text{min-height:200px}.xt{inset:34px 0 auto 0}.xt h2{font-size:30px;margin-bottom:10px}.xt p{font-size:15px}.xt .btn{margin-top:14px}
 .xpl-bar{display:none}
 .xpl-stage{width:min(100%,56svh);align-self:center}
 .xl{font-size:11px}.xl span{display:none}.xpin b{display:none}
}
@media (prefers-reduced-motion:reduce){
 .xpl{height:auto}.xpl-stick{position:relative;height:auto;min-height:100svh;padding-top:90px;padding-bottom:60px}
 .xpl-text{min-height:0}.xt{position:relative;inset:auto;opacity:1;transform:none;margin-top:28px;pointer-events:auto}.xpl-bar{display:none}
 .xhouse{opacity:1;transform:none}.xp{display:none}.xpins,.xkit{opacity:1}
 .xpin b{display:inline-block!important}
}

/* ===== try a smart home yourself (lazy 3D) ===== */
.td{padding:clamp(80px,10vw,140px) max(20px,5vw);background:#F5F5F7;color:#1D1D1F}
.td-head{max-width:820px;margin:0 auto 40px;text-align:center}
.td-head .eyebrow{color:#0E7C66;font-weight:600;font-size:15px;margin:0 0 10px}
.td-head h2{font-family:var(--fh);font-weight:800;font-size:clamp(36px,5vw,64px);line-height:var(--lh);letter-spacing:var(--ls);margin:0 0 16px}
.td-head .lead{font-size:clamp(17px,1.5vw,21px);color:#515154;margin:0 auto;max-width:46ch}
.td-stage{position:relative;max-width:1180px;margin:0 auto;aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:#0b0d12;box-shadow:0 30px 80px rgba(0,0,0,.18);touch-action:none}
.td-poster img,.td-video,.td-cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.td-cv{outline:none;cursor:grab}
.td-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(#1b1f27,#0b0d11);color:#f5f5f7;font-size:15px;z-index:3;transition:opacity .6s;pointer-events:none}
.td-load i{width:min(260px,60%);height:4px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.td-load b{display:block;height:100%;width:0;background:#2997ff;border-radius:2px;transition:width .25s}
.td-load.done{opacity:0}
.td.live .td-poster,.td.vid .td-poster{display:none}
.td-start{position:absolute;inset:auto 0 0 0;padding:28px;display:flex;flex-direction:column;align-items:center;gap:8px;background:linear-gradient(0deg,rgba(5,6,8,.75),rgba(5,6,8,0));color:#fff;text-align:center}
.td-start .btn{background:#fff;color:#1D1D1F;font-size:17px;padding:14px 26px}
.td-note{margin:0;font-size:13px;color:rgba(255,255,255,.75)}.td-msg{margin:0;font-size:14px;min-height:1px}
.td-start .link{background:none;border:0;color:#fff;font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;padding:4px}
.td.live .td-start,.td.vid .td-start .btn,.td.vid .td-start .td-note{display:none}
.td.vid .td-start{inset:0 0 auto 0;background:none;padding:12px;align-items:flex-end}
.td [hidden]{display:none!important}
.td-ui,.td-help,.td-toast,.td-joy,.td-start{z-index:2}
.td-ui{position:absolute;inset:auto 14px 14px 14px;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.td-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;pointer-events:auto;padding:8px;border-radius:20px;background:rgba(20,22,26,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12)}
.td-b{font:inherit;font-size:14px;font-weight:600;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 14px;cursor:pointer}
.td-b[aria-pressed=true]{background:#fff;color:#1D1D1F}
.td-b:focus-visible,.td-r input:focus-visible{outline:2px solid #5EEAD4;outline-offset:2px}
.td-leave{background:#E5484D;border-color:#E5484D}
.td-r{display:flex;align-items:center;gap:8px;color:#fff;font-size:13px;padding:0 6px}
.td-r input{accent-color:#14B8A6;width:110px}.td-tr input{width:min(320px,40vw)}
.td-time{font-weight:700;margin-inline-start:4px}
.td-help{position:absolute;top:14px;left:50%;transform:translateX(-50%);margin:0;padding:6px 12px;border-radius:999px;background:rgba(20,22,26,.55);color:#fff;font-size:12px;white-space:nowrap;pointer-events:none}
.td-toast{position:absolute;top:54px;left:50%;transform:translate(-50%,-8px);margin:0;padding:8px 14px;border-radius:12px;background:#fff;color:#1D1D1F;font-size:14px;font-weight:600;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;max-width:90%;text-align:center}
.td-toast.on{opacity:1;transform:translate(-50%,0)}
.td-joy{position:absolute;left:18px;bottom:150px;width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);touch-action:none}
.td-joy i{position:absolute;left:30px;top:30px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.85)}
@media (max-width:760px){
 .td-stage{aspect-ratio:3/4.4;border-radius:22px}
 .td-b{font-size:13px;padding:7px 11px}.td-r input{width:80px}.td-tr input{width:150px}
 .td-help{white-space:normal;width:86%;text-align:center}
 .td-joy{top:auto;bottom:178px;left:14px;width:84px;height:84px}.td-joy i{left:24px;top:24px}
 .td-row{padding:6px;gap:6px}
}

.tb{position:relative;height:clamp(150px,24vh,230px);overflow:hidden;color:#fff;background:linear-gradient(120deg,#0b1a24,#123a3f 55%,#0d2b2a);transition:height .5s cubic-bezier(.4,0,.2,1)}
.tb-media,.tb-s{position:absolute;inset:0}
.tb-s{opacity:0;transition:opacity .7s ease}
.tb-s.on{opacity:1}
.tb-s img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease;transform:scale(1.04)}
.tb-s img.ld{opacity:1}
.tb-s.on img.ld{animation:tbkb 3.2s ease-out both}
@keyframes tbkb{from{transform:scale(1.1)}to{transform:scale(1.02)}}
.tb-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,10,14,.72),rgba(4,10,14,.28) 55%,rgba(4,10,14,.05))}
[dir=rtl] .tb-media::after{background:linear-gradient(270deg,rgba(4,10,14,.72),rgba(4,10,14,.28) 55%,rgba(4,10,14,.05))}
.tb-t{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;max-width:1100px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.tb-t .eyebrow{margin:0;color:#5EEAD4;font-size:13px}
.tb-t h1{margin:0;font-size:clamp(22px,3.1vw,42px);line-height:1.08;letter-spacing:-.02em;font-weight:800;max-width:16ch;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.tb-cta{margin-top:6px;padding:8px 16px;font-size:14px}
.tb-chips{position:absolute;z-index:2;bottom:14px;inset-inline-end:clamp(14px,4vw,40px)}
.tb-c{position:absolute;bottom:0;inset-inline-end:0;white-space:nowrap;display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.9);color:#1d1d1f;font-size:13px;font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,.18);opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s}
.tb-c.on{opacity:1;transform:none}
.tb-c b{font-variant-numeric:tabular-nums}
.tb-c .dot{width:8px;height:8px;border-radius:50%;background:#10B981;box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:tbp 1.4s infinite}
.tb-c .dot.sun{background:#F59E0B}
@keyframes tbp{70%{box-shadow:0 0 0 7px rgba(16,185,129,0)}}
.tb-c .sep{width:1px;height:14px;background:#d2d2d7}
.tb-c .bt{display:inline-block;width:26px;height:12px;border:1.5px solid #1d1d1f;border-radius:3px;padding:1px;position:relative}
.tb-c .bf{display:block;height:100%;width:var(--bw,80%);background:#10B981;border-radius:1px}
.tb-c .tg{display:inline-flex;background:#e8e8ed;border-radius:999px;padding:2px;font-size:11px;position:relative}
.tb-c .tg span{padding:2px 7px;border-radius:999px;position:relative;z-index:1;transition:color .4s}
.tb-c .tg::before{content:"";position:absolute;top:2px;bottom:2px;width:calc(50% - 2px);inset-inline-start:2px;border-radius:999px;background:#fff;transition:inset-inline-start .5s cubic-bezier(.4,0,.2,1),background .5s}
.tb-c.on.nt .tg::before{inset-inline-start:50%;background:#1d1d1f}
.tb-c.on.nt .tg span:last-child{color:#fff}
.tb-dots{position:absolute;z-index:2;top:12px;inset-inline-end:52px;display:flex;gap:6px}
.tb-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.45);transition:width .3s,background .3s}
.tb-dots i.on{width:18px;background:#fff}
.tb-x{position:absolute;z-index:3;top:6px;inset-inline-end:10px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(0,0,0,.35);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.tb-x:focus-visible{outline:2px solid #5EEAD4;outline-offset:2px}
.tb.out .tb-media,.tb.out .tb-t,.tb.out .tb-chips,.tb.out .tb-dots,.tb.out .tb-x{opacity:0;transition:opacity .35s}
.tb.gone{height:0!important}
@media (max-width:760px){.tb-t .eyebrow{font-size:12px}.tb-t h1{max-width:13ch}.tb-cta{padding:7px 13px;font-size:13px}.tb-chips{bottom:10px}.tb-c{font-size:12px;padding:6px 10px}.tb-c .tg{display:none}}
.tb-c .c2{display:inline-flex;align-items:center;gap:7px}
@media (max-width:420px){.tb-c .c2{display:none}}
@media (prefers-reduced-motion:reduce){.tb,.tb-s,.tb-s img,.tb-c,.tb-c .dot{transition:none!important;animation:none!important}.tb-dots{display:none}}