@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&family=Cairo:wght@400;600;700&display=swap');
:root{
--void:#0e0d0c;--base:#121110;--base2:#1a1816;--panel:#1e1c1a;
--glassA:rgba(255,255,255,.045);--glassB:rgba(255,255,255,.012);
--line:rgba(200,190,175,.13);--line2:rgba(200,190,175,.07);--hair:rgba(255,255,255,.06);
--ink:#f0ece6;--ink2:#a9a298;--ink3:#8a847a;--ink4:#5c5854;
--o:#F15A24;--oG:#FF7A45;--cy:#c8b89a;--blue:#c8b89a;--vio:#c8b89a;--gold:#F9B233;--grn:#1AA37A;
--acc:var(--cy);--green:var(--grn);--teal:var(--cy);--tech:var(--blue);
--max:1440px;--pad:clamp(20px,4vw,64px);
--mono:'IBM Plex Mono',ui-monospace,monospace;
--glow:0 0 0 1px rgba(255,255,255,.045),0 24px 60px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.055);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--base);color:var(--ink);font-family:'Montserrat',sans-serif;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:
radial-gradient(58% 40% at 78% -6%,rgba(200,184,154,.13),transparent 62%),
radial-gradient(48% 38% at 6% 12%,rgba(200,184,154,.10),transparent 60%),
radial-gradient(70% 50% at 50% 108%,rgba(241,90,36,.09),transparent 62%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;background:
repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px)}
header,section,footer,.ctaband,.stats{position:relative;z-index:2}
img{max-width:100%;display:block}
a{color:var(--o);text-decoration:none;transition:color .2s}a:hover{color:var(--oG)}
svg{display:block}
::selection{background:rgba(200,184,154,.28);color:#fff}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:1080px}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.04em;line-height:1.02;text-wrap:balance;color:var(--ink)}
.d1{font-size:clamp(46px,7vw,100px);font-weight:600;letter-spacing:-.052em}
.d1,.d2{background:linear-gradient(174deg,#FFFFFF 6%,#d9d2c6 52%,#9a8e78 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.d2{font-size:clamp(34px,4.6vw,66px);font-weight:600;letter-spacing:-.045em}
.d3{font-size:clamp(24px,2.8vw,38px)}
p{color:var(--ink2);text-wrap:pretty}
.lede{font-size:clamp(18px,1.7vw,24px);line-height:1.45;font-weight:400;letter-spacing:-.012em;color:var(--ink2);max-width:46ch}
/* technical label language — mono */
.tl{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:9px}
.tl::before{content:"";width:5px;height:5px;flex:none;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px color-mix(in oklab,var(--acc) 22%,transparent)}
.tl.a{color:#F58A5E;--acc:var(--o)}
.tl.g{color:#8fd1b3;--acc:var(--grn)}
.tl.t{color:#c8b89a;--acc:var(--cy)}
.tl.b{color:#c8b89a;--acc:var(--blue)}
.tl.y{color:#F9B233;--acc:var(--gold)}
.tl span{color:inherit}
.num{font-family:var(--mono);font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:.9}
.rule{height:1px;background:var(--line);border:0}
.dash{height:0;border:0;border-top:1px dashed var(--line2)}
/* sections */
.s{padding:clamp(80px,9.5vw,164px) 0;position:relative}
.s+.s::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.s.white{background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.008));backdrop-filter:blur(2px)}
.s.dark{background:linear-gradient(180deg,#0e0d0c,#141210)}
.s.dark p{color:var(--ink2)}
.shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(44px,5vw,76px)}
.shead .lede{padding-bottom:6px}
@media(max-width:900px){.shead{grid-template-columns:1fr;align-items:start}}
/* nav */
header{position:fixed;inset:0 0 auto;z-index:90;border-bottom:1px solid transparent;transition:background .35s,border-color .35s,backdrop-filter .35s}
header.solid{background:rgba(8,11,15,.72);backdrop-filter:saturate(160%) blur(22px);border-bottom-color:var(--line2)}
.bar{display:flex;align-items:center;gap:32px;height:68px}
.bar .brand img{height:24px;width:auto;opacity:.96}
.nlinks{display:flex;gap:24px;align-items:center;margin-inline-start:auto}
.nlink{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.05em;color:var(--ink2);position:relative;padding:4px 0}
.nlink::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--cy);transition:right .3s cubic-bezier(.2,.7,.3,1)}
.nlink:hover{color:var(--ink)}.nlink:hover::after{right:0}
.burger{display:none;background:none;border:0;font-size:21px;cursor:pointer;color:var(--ink);margin-inline-start:auto}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 26px;border-radius:3px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;transition:transform .22s,box-shadow .3s,border-color .3s,color .3s,background .3s}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s cubic-bezier(.3,.7,.3,1)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(1px)}
.btn.p{background:linear-gradient(180deg,#F86A36,#E04E1B);color:#fff;box-shadow:0 0 0 1px rgba(241,120,80,.35),0 10px 30px -12px rgba(241,90,36,.75)}
.btn.p:hover{color:#fff;box-shadow:0 0 0 1px rgba(241,140,100,.5),0 14px 40px -12px rgba(241,90,36,.9)}
.btn.s{border-color:var(--line);color:var(--ink);background:var(--glassA)}
.btn.s:hover{border-color:rgba(200,184,154,.5);color:#fff;box-shadow:0 0 26px -10px rgba(200,184,154,.7)}
.s.dark .btn.s{border-color:var(--line);color:var(--ink)}
.btn.lg{padding:16px 32px;font-size:12.5px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.link{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--acc);display:inline-flex;gap:8px;align-items:center}
.link::after{content:"→";transition:transform .25s}.link:hover::after{transform:translateX(4px)}
/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1),filter .9s}
.rv:not(.in){filter:blur(6px)}
.rv.in{opacity:1;transform:none;filter:none}
.rv.x1{transition-delay:.08s}.rv.x2{transition-delay:.16s}.rv.x3{transition-delay:.24s}.rv.x4{transition-delay:.32s}.rv.x5{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;filter:none;transition:none}*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
/* ── panel primitive ── */
.panel,.wall,.lidc,.reelfig,.xrow,.chip,.ecoc,.stat{position:relative}
.wall,.lidc,.reelfig{background:linear-gradient(165deg,var(--glassA),var(--glassB));border:1px solid var(--line2);border-radius:4px;box-shadow:var(--glow);backdrop-filter:blur(6px)}
.wall::before,.lidc::before,.reelfig::before{content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.09),transparent 34%);mix-blend-mode:overlay}
/* ── CUP primitive — rendered object ── */
.cup{position:relative;width:var(--cw,220px);aspect-ratio:1/1.18;filter:drop-shadow(0 18px 34px rgba(0,0,0,.6))}
.cup .body{position:absolute;inset:5% 0 0;clip-path:polygon(13.5% 0,86.5% 0,74% 100%,26% 100%);background:
linear-gradient(96deg,rgba(200,184,154,.18) 0%,rgba(255,255,255,.03) 12%,transparent 26%),
linear-gradient(100deg,#2a2622 0%,#f3eee6 20%,#FFFFFF 42%,#d8d0c2 66%,#8e857a 86%,#33302b 100%)}
.cup .body::after{content:"";position:absolute;inset:0;background:linear-gradient(260deg,rgba(241,90,36,.22),transparent 40%);mix-blend-mode:screen}
.cup .band{position:absolute;inset:5% 0 0;clip-path:polygon(13.5% 0,86.5% 0,74% 100%,26% 100%);background:linear-gradient(180deg,transparent 22%,var(--bandc,var(--o)) 22%,var(--bandc,var(--o)) 62%,transparent 62%);opacity:var(--bando,0);transition:opacity .6s}
.cup .band::after{content:attr(data-brand);position:absolute;top:34%;left:0;right:0;text-align:center;color:#fff;font-family:var(--mono);font-size:calc(var(--cw,220px)*.068);font-weight:500;letter-spacing:.12em}
.cup .rim{position:absolute;top:2%;left:11.6%;right:11.6%;height:8.6%;border-radius:50%;background:linear-gradient(180deg,#FFFFFF,#a99f90);box-shadow:0 0 14px -3px rgba(200,184,154,.5)}
.cup .well{position:absolute;top:4%;left:14.4%;right:14.4%;height:5.6%;border-radius:50%;background:linear-gradient(180deg,#0e0d0c,#2a2826)}
.cup .sh{position:absolute;left:6%;right:6%;bottom:-4%;height:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(200,184,154,.32),transparent);filter:blur(10px)}
/* ── HERO ── */
.hero{min-height:100svh;display:flex;align-items:center;padding:118px 0 60px;position:relative;overflow:hidden;background:
radial-gradient(46% 46% at 72% 44%,rgba(200,184,154,.10),transparent 70%),
linear-gradient(180deg,#0e0d0c,#141210 60%,#161412)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;-webkit-mask-image:radial-gradient(70% 60% at 50% 44%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 44%,#000,transparent);background:
repeating-linear-gradient(0deg,rgba(200,190,175,.09) 0 1px,transparent 1px 72px),
repeating-linear-gradient(90deg,rgba(200,190,175,.09) 0 1px,transparent 1px 72px)}
.hero .wrap{width:100%;display:grid;grid-template-columns:1fr;gap:40px;position:relative;z-index:2}
.hero h1{margin:20px 0 0}
.herogrid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4vw,64px);align-items:center}
.heroL .lede{margin-top:24px}
.heroL .cta{margin-top:36px}
.herofig{position:relative;display:flex;align-items:center;justify-content:center;min-height:min(62vh,560px)}
.herostage{position:relative;width:min(100%,560px);aspect-ratio:1/.94;display:flex;align-items:center;justify-content:center}
.herostage::before{content:"";position:absolute;width:64%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(200,184,154,.16),transparent 72%);filter:blur(12px)}
.herostage::after{content:"";position:absolute;width:46%;aspect-ratio:1;border:1px solid rgba(200,184,154,.22);border-radius:50%;animation:halo 9s linear infinite}
@keyframes halo{to{transform:rotate(360deg) scale(1.04)}}
.herostage .cup{--cw:min(30vw,232px);transition:transform .5s cubic-bezier(.2,.7,.3,1);z-index:2}
.callouts{position:absolute;inset:0;pointer-events:none;z-index:3}
.callouts svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.callouts svg line{stroke:rgba(200,184,154,.42);stroke-width:1;fill:none}
.callouts svg circle{fill:none}
.callouts svg .dot{fill:var(--cy);stroke:none;filter:drop-shadow(0 0 6px rgba(200,184,154,.9))}
.co{position:absolute;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .7s,transform .7s}
.co i{display:block;font-style:normal;font-size:10px;letter-spacing:.06em;color:var(--ink3);margin-top:4px;text-transform:none}
.co.in{opacity:1;transform:none}
.scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink3);z-index:3}
.scrollcue::after{content:"";display:block;width:1px;height:36px;background:linear-gradient(rgba(200,184,154,.7),transparent);margin:10px auto 0}
/* stat strip */
.stats{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.stats .wrap{display:grid;grid-template-columns:repeat(5,1fr)}
.stat{padding:40px 10px 36px;border-inline-start:1px solid var(--line2)}
.stat:first-child{border-inline-start:0}
.stat::before{content:"";position:absolute;top:0;left:0;width:26px;height:1px;background:var(--cy);opacity:.8}
.stat .num{font-size:clamp(36px,4.2vw,58px);background:linear-gradient(170deg,#fff,#93A9BC);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .tl{margin-top:14px}
.stat small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink4);margin-top:8px;text-transform:uppercase}
@media(max-width:860px){.stats .wrap{grid-template-columns:repeat(2,1fr)}.stat{border-top:1px solid var(--line2)}.stat:nth-child(odd){border-inline-start:0}}
/* ── ECOSYSTEM ── */
.eco{position:relative;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line2);border-inline-start:1px solid var(--line2)}
.ecoc{padding:32px 22px 30px;border-inline-end:1px solid var(--line2);border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:16px;transition:background .35s,box-shadow .35s;color:inherit;overflow:hidden}
.ecoc::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 50% at 50% 0%,rgba(200,184,154,.14),transparent 70%);opacity:0;transition:opacity .4s}
.ecoc:hover{background:rgba(255,255,255,.03)}
.ecoc:hover::after{opacity:1}
.ecoc .fig{height:134px;display:flex;align-items:flex-end;justify-content:center}
.ecoc .fig svg{stroke:var(--ink2);transition:stroke .3s}
.ecoc:hover .fig svg{stroke:var(--cy)}
.ecoc h3{font-size:16px;letter-spacing:-.015em}
.ecoc p{font-size:13.5px;line-height:1.5;color:var(--ink3)}
.ecoc .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink4)}
.ecoc .link{font-size:10.5px;margin-top:auto;color:var(--ink3)}
.ecoc:hover .link{color:var(--cy)}
@media(max-width:1080px){.eco{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.eco{grid-template-columns:repeat(2,1fr)}}
/* ── FLOW ── */
.flow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:relative}
.fstep{position:relative;padding:0 18px;text-align:center}
.fstep .ic{height:80px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.fstep .ic svg{width:56px;height:56px;stroke:var(--acc);stroke-width:1.1;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 12px color-mix(in oklab,var(--acc) 45%,transparent))}
.fstep h4{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.fstep p{font-size:13px;line-height:1.55;margin-top:10px;color:var(--ink3)}
.fstep .n{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ink4);margin-bottom:12px}
.frail{position:relative;height:1px;background:var(--line2);margin:0 0 42px}
.frail i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,transparent,var(--acc));width:0;transition:width 1.6s cubic-bezier(.3,.7,.3,1);box-shadow:0 0 14px color-mix(in oklab,var(--acc) 60%,transparent)}
.frail.on i{width:100%}
.frail b{position:absolute;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--base);border:1px solid var(--line);transition:background .3s,box-shadow .3s,border-color .3s}
.frail.on b.hit{background:var(--acc);border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in oklab,var(--acc) 18%,transparent)}
@media(max-width:980px){.flow{grid-auto-flow:row;grid-auto-columns:auto}.fstep{text-align:start;display:grid;grid-template-columns:78px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--line2);align-items:center}.fstep .ic{margin:0;grid-column:1;grid-row:1/span 3}.fstep .n,.fstep h4,.fstep p{grid-column:2}.frail{display:none}}
/* ── REEL ── */
.nature{--acc:var(--grn)}
.reelfig{padding:clamp(24px,4vw,54px);overflow:hidden}
.reelfig svg{width:100%;height:auto}
.reelfig svg g[stroke]{stroke:var(--blue)!important;filter:drop-shadow(0 0 8px rgba(200,184,154,.4))}
.reelfig text{fill:var(--ink3)!important;font-family:var(--mono)!important;font-weight:500!important}
.reelfig g[fill="#9a8e78"] text{fill:#c8b89a!important}
/* ── EXPLODED ── */
.exp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:center}
.expstage{position:relative;height:min(78vh,660px);display:flex;align-items:center;justify-content:center}
.expstage::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(200,184,154,.13),transparent 70%);filter:blur(14px)}
.expcup{position:relative;width:min(72%,300px);aspect-ratio:1/1.2;z-index:2}
.el{position:absolute;left:0;right:0;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.el .lbl{position:absolute;left:calc(100% + 22px);top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--ink)}
.el .lbl::before{content:"";position:absolute;right:calc(100% + 8px);top:50%;width:var(--lw,60px);height:1px;background:linear-gradient(90deg,transparent,rgba(200,184,154,.75))}
.el .lbl em{display:block;font-style:normal;font-size:10px;letter-spacing:.05em;color:var(--ink3);margin-top:4px;text-transform:none}
.explist{display:flex;flex-direction:column}
.exprow{padding:20px 0;border-top:1px solid var(--line2);display:grid;grid-template-columns:44px 1fr;gap:18px;transition:background .3s;position:relative}
.exprow:last-child{border-bottom:1px solid var(--line2)}
.exprow:hover,.exprow.on{background:linear-gradient(90deg,rgba(200,184,154,.07),transparent)}
.exprow.on .n{color:var(--o)}
.exprow .n{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--blue);padding-top:5px}
.exprow h4{font-size:15.5px;letter-spacing:-.01em}
.exprow p{font-size:13.5px;line-height:1.55;margin-top:6px;color:var(--ink3)}
@media(max-width:940px){.exp{grid-template-columns:1fr}.expstage{height:420px}}
/* ── SIZE SCALE ── */
.scale{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(8px,2vw,26px);padding-bottom:8px;border-bottom:1px solid var(--line);position:relative}
.scale::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(241,90,36,.6),transparent)}
.sz{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:14px;cursor:pointer;background:none;border:0;font:inherit;padding:0;color:inherit}
.sz .cup{width:var(--cw,100%);transition:transform .35s,filter .35s;filter:grayscale(.5) brightness(.8)}
.sz:hover .cup,.sz.on .cup{transform:translateY(-10px);filter:none}
.sz .cap{font-family:var(--mono);font-size:clamp(14px,1.5vw,20px);font-weight:500;letter-spacing:-.01em;color:var(--ink2)}
.sz .app{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink4)}
.sz.on .cap{color:var(--o)}.sz.on .app{color:var(--ink2)}
.szspec{margin-top:36px;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line2)}
.szspec div{padding:24px 16px 0;border-inline-start:1px solid var(--line2);position:relative}
.szspec div:first-child{border-inline-start:0;padding-inline-start:0}
.szspec b{display:block;font-family:var(--mono);font-size:clamp(17px,1.9vw,25px);font-weight:500;letter-spacing:-.02em;margin-bottom:10px;color:var(--ink);text-shadow:0 0 24px rgba(241,90,36,.28)}
@media(max-width:760px){.scale{overflow-x:auto;padding-bottom:14px}.sz{min-width:96px}.szspec{grid-template-columns:repeat(2,1fr)}.szspec div{border-top:1px solid var(--line2);padding:18px 0 12px;border-inline-start:0}}
/* ── PRINT SLIDER ── */
.ba{position:relative;width:min(100%,560px);margin:0 auto;aspect-ratio:1/1.05;user-select:none;touch-action:none}
.ba::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(241,90,36,.14),transparent 72%);filter:blur(12px)}
.ba .half{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ba .half.after{clip-path:inset(0 0 0 var(--split,50%))}
.ba .half.before{clip-path:inset(0 calc(100% - var(--split,50%)) 0 0)}
.ba .cup{--cw:min(56vw,270px)}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--split,50%);width:1px;background:linear-gradient(180deg,transparent,var(--o),transparent);cursor:ew-resize;box-shadow:0 0 18px rgba(241,90,36,.55);z-index:3}
.ba .handle::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:linear-gradient(180deg,#161C24,#0B0F14);border:1px solid rgba(241,120,80,.45);color:#F58A5E;display:grid;place-items:center;font-size:15px;box-shadow:0 10px 30px -10px #000,0 0 24px -6px rgba(241,90,36,.6)}
.balbl{display:flex;justify-content:space-between;margin-top:18px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{border:1px solid var(--line2);padding:9px 16px;border-radius:3px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);background:linear-gradient(165deg,var(--glassA),var(--glassB));transition:border-color .3s,color .3s,box-shadow .3s}
.chip:hover{border-color:rgba(241,120,80,.45);color:#F58A5E;box-shadow:0 0 22px -10px rgba(241,90,36,.8)}
/* ── LIDS ── */
.lidfig{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,30px);margin-top:46px}
.lidc{padding:28px 20px;text-align:center}
.lidc .dia{margin:0 auto 20px;border-radius:50%;border:1px dashed rgba(200,184,154,.55);position:relative;display:grid;place-items:center}
.lidc .dia::after{content:"";position:absolute;inset:14%;border-radius:50%;background:linear-gradient(160deg,#2A343E,#101720);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 22px -8px rgba(200,184,154,.7)}
.lidc b{font-family:var(--mono);font-size:23px;font-weight:500;letter-spacing:-.02em;display:block;color:var(--ink)}
.lidc span{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink4);display:block;margin-top:10px}
@media(max-width:700px){.lidfig{grid-template-columns:repeat(2,1fr)}}
.lidstage{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 0 40px;min-height:420px;justify-content:flex-end}
.lidstage::before{content:"";position:absolute;bottom:8%;width:48%;aspect-ratio:1/.4;border-radius:50%;background:radial-gradient(closest-side,rgba(200,184,154,.16),transparent 70%);filter:blur(16px)}
.lidpart{width:min(72%,262px);transform:translateY(-120px);opacity:.4;transition:transform 1.1s cubic-bezier(.2,.7,.3,1),opacity 1.1s;z-index:2}
.lidpart svg ellipse{filter:drop-shadow(0 0 10px rgba(200,184,154,.35))}
.lidstage.on .lidpart{transform:translateY(14px);opacity:1}
.cuppart{margin-top:-6px;z-index:2}
/* ── MATERIALS ── */
.lifecycle{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line2);border-radius:4px;overflow:hidden;background:linear-gradient(165deg,var(--glassA),var(--glassB));box-shadow:var(--glow)}
.lc{padding:28px 20px;border-inline-end:1px solid var(--line2);position:relative}
.lc:last-child{border-inline-end:0}
.lc .bar{height:3px;background:var(--lc,var(--grn));margin-bottom:20px;box-shadow:0 0 16px var(--lc,var(--grn))}
.lc h4{font-family:var(--mono);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.13em;color:var(--ink)}
.lc p{font-size:12.5px;line-height:1.55;margin-top:10px;color:var(--ink3)}
@media(max-width:1000px){.lifecycle{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.lifecycle{grid-template-columns:repeat(2,1fr)}}
.xsec{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.xrow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:12px 16px;background:linear-gradient(165deg,var(--glassA),var(--glassB));border:1px solid var(--line2);border-radius:3px}
.xrow b{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.xrow span{font-family:var(--mono);font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}
/* ── WALLS ── */
.walls{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,40px);margin-top:48px}
.wall{padding:clamp(20px,3vw,34px)}
.wall .fig{display:flex;justify-content:center;padding:16px 0 28px}
.wall h3{font-size:20px;letter-spacing:-.03em}
.wall p{color:var(--ink3)}
.wall .specs{margin-top:18px;display:flex;flex-direction:column}
.wall .specs div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line2);font-family:var(--mono);font-size:11.5px}
.wall .specs b{font-weight:500;color:var(--ink2);letter-spacing:.08em;text-transform:uppercase}
.wall .specs span{color:var(--ink3)}
@media(max-width:720px){.walls{grid-template-columns:1fr}}
/* ── MAP ── */
.mapwrap{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(30px,5vw,70px);align-items:center}
.mapwrap svg{width:100%;height:auto;overflow:visible}
.uae{fill:rgba(200,184,154,.05);stroke:rgba(150,185,225,.4);stroke-width:1}
.route{fill:none;stroke:var(--gold);stroke-width:1.3;opacity:.95;filter:drop-shadow(0 0 6px rgba(255,194,77,.7))}
.pin{fill:var(--o);filter:drop-shadow(0 0 10px rgba(241,90,36,.95))}
.pulse{fill:none;stroke:var(--o);stroke-width:1;transform-origin:center;animation:pulse 2.8s ease-out infinite}
@keyframes pulse{0%{r:6;opacity:.9}100%{r:30;opacity:0}}
.maplbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;fill:var(--ink3)}
.maplbl.hi{fill:#FFD3B8}
.lanes{display:flex;flex-direction:column}
.lane{display:grid;grid-template-columns:1fr auto;gap:14px;padding:17px 0;border-top:1px solid var(--line2);align-items:baseline}
.lane:last-child{border-bottom:1px solid var(--line2)}
.lane b{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.lane span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--gold)}
@media(max-width:940px){.mapwrap{grid-template-columns:1fr}}
/* ── SOP ── */
.sop{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(30px,5vw,80px)}
.sopcol{border-top:1px solid var(--line2)}
.sopr{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--line2);align-items:start;position:relative;transition:background .3s}
.sopr:hover{background:linear-gradient(90deg,rgba(200,184,154,.07),transparent)}
.sopr .n{font-family:var(--mono);font-size:20px;font-weight:500;letter-spacing:-.03em;color:var(--ink4);font-variant-numeric:tabular-nums;transition:color .3s}
.sopr:hover .n{color:var(--vio)}
.sopr h4{font-size:16px;letter-spacing:-.02em}
.sopr p{font-size:13.5px;line-height:1.55;margin-top:7px;color:var(--ink3)}
.sopr .meta{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink4);margin-top:12px;display:flex;gap:16px;flex-wrap:wrap}
.sopr .meta em{font-style:normal;color:var(--vio)}
@media(max-width:860px){.sop{grid-template-columns:1fr}.sopcol+.sopcol{border-top:0}}
/* ── APPLICATIONS ── */
.appmap{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,44px);border-top:1px solid var(--line2);padding-top:36px}
.appcol{position:relative}
.apphead{display:flex;align-items:center;gap:16px;padding-bottom:22px}
.apphead h4{font-size:17px;letter-spacing:-.02em}
.appcol ul{list-style:none;border-top:1px solid var(--line2);padding-top:6px}
.appcol li{position:relative;padding:11px 0 11px 30px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink2);border-bottom:1px solid var(--line2)}
.appcol li::before{content:"";position:absolute;left:0;top:50%;width:18px;height:1px;background:linear-gradient(90deg,rgba(200,184,154,.15),rgba(200,184,154,.7))}
.appcol li::after{content:"";position:absolute;left:0;top:0;bottom:50%;width:1px;background:rgba(200,184,154,.25)}
.appcol li:last-child{border-bottom:0}
@media(max-width:820px){.appmap{grid-template-columns:1fr}.appcol+.appcol{border-top:1px solid var(--line2);padding-top:26px}}
@media(max-width:860px){.pgrid{grid-template-columns:1fr!important}}
/* travelling cup */
.travel{position:relative;height:66px;margin-bottom:6px}
.travel .cup{position:absolute;left:0;bottom:0;transition:left 1.6s cubic-bezier(.3,.7,.3,1)}
.travel.on .cup{left:calc(100% - 46px)}
@media(max-width:980px){.travel{display:none}}
/* CTA band */
.ctaband{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.ctaband .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:34px;flex-wrap:wrap}
.ctaband b{font-size:clamp(18px,2.1vw,27px);font-weight:600;letter-spacing:-.035em;color:var(--ink)}
/* footer */
footer{background:linear-gradient(180deg,#0e0d0c,#040608);color:var(--ink3);padding:74px 0 46px;font-size:13.5px;border-top:1px solid var(--line2)}
footer .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
footer h5{color:var(--ink);font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
footer a{color:var(--ink3);display:block;padding:5px 0;font-size:13px}footer a:hover{color:var(--cy)}
footer .btm{margin-top:54px;padding-top:24px;border-top:1px solid var(--line2);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.06em}
footer img{height:22px}
@media(max-width:840px){footer .cols{grid-template-columns:1fr 1fr}}
/* responsive nav + hero */
@media(max-width:1100px){.callouts{position:static;display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin-top:32px;width:100%;pointer-events:auto}
.callouts svg{display:none}
.co{position:static!important;transform:none!important;text-align:start!important;white-space:normal;opacity:1;left:auto;right:auto;top:auto;bottom:auto}
.herostage{flex-direction:column;aspect-ratio:auto;width:100%}
.herostage::after{display:none}
.herostage .cup{--cw:min(46vw,208px)}
.herofig{min-height:0}}
@media(max-width:520px){.callouts{grid-template-columns:1fr}}
@media(max-width:1060px){.burger{display:block}
.nlinks{display:none;position:absolute;top:68px;left:0;right:0;background:rgba(8,11,15,.96);backdrop-filter:blur(20px);flex-direction:column;align-items:flex-start;padding:20px var(--pad) 28px;border-bottom:1px solid var(--line2)}
.nlinks.open{display:flex}
.herogrid{grid-template-columns:1fr}}
[dir="rtl"] body,[dir="rtl"] .btn{font-family:'Cairo','Montserrat',sans-serif}
/* dark-theme remap for inline diagram fills */
.el svg [fill="#F1ECE2"]{fill:rgba(200,225,255,.07)}
.el svg [stroke="#8E887C"]{stroke:rgba(170,195,220,.55)}
.el svg [stroke="#C9C3B7"]{stroke:rgba(170,195,220,.35)}
.el svg [stroke="#F15A24"]{stroke:var(--o);filter:drop-shadow(0 0 8px rgba(241,90,36,.6))}
.el svg [fill="rgba(241,90,36,.14)"]{fill:rgba(241,90,36,.16)}
.el svg [stroke="#1AA37A"]{stroke:var(--grn)}
.el svg [fill="rgba(26,163,122,.13)"]{fill:rgba(57,217,138,.14)}
.el svg [stroke="#9a8e78"]{stroke:var(--blue);filter:drop-shadow(0 0 8px rgba(200,184,154,.6))}
.lidpart svg [fill="#F1ECE2"]{fill:rgba(200,225,255,.08)}
.lidpart svg [fill="#FAF8F3"]{fill:rgba(255,255,255,.05)}
.lidpart svg [stroke="#00695C"]{stroke:var(--cy)}
.ph{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink4)}
.ph::before{content:"◆ ";color:var(--gold);opacity:.7}

/* ═══════════════════════════════════════════════
   HOLOGRAPHIC LAYER — spaceship bridge edition
   ═══════════════════════════════════════════════ */
:root{
--iri1:#48F5D8;--iri2:#5AA8FF;--iri3:#B47BFF;--iri4:#FF6FD8;--iri5:#F9B233;
--holo:linear-gradient(115deg,var(--iri1) 0%,var(--iri2) 26%,var(--iri3) 48%,var(--iri4) 70%,var(--iri5) 92%);
--chrome:linear-gradient(168deg,#FFFFFF 0%,#D9E9F5 18%,#8FB6D4 38%,#F2F8FF 52%,#9FC6E4 70%,#5D7E99 88%,#EAF4FF 100%);
--base:#04060A;--base2:#06090E;
--line:rgba(120,230,225,.16);--line2:rgba(120,230,225,.09);
}
body{background:#04060A}
/* deep-space field + holo bloom */
body::before{background:
radial-gradient(52% 38% at 80% -8%,rgba(72,245,216,.16),transparent 62%),
radial-gradient(44% 34% at 4% 10%,rgba(90,168,255,.13),transparent 60%),
radial-gradient(40% 30% at 92% 62%,rgba(180,123,255,.11),transparent 62%),
radial-gradient(66% 46% at 46% 108%,rgba(255,111,216,.09),transparent 64%)}
/* interference scanlines + holo sweep */
body::after{opacity:1;background:
repeating-linear-gradient(0deg,rgba(140,235,255,.035) 0 1px,transparent 1px 3px),
repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 2px,transparent 2px 5px)}
.holoscan{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.holoscan::before{content:"";position:absolute;left:0;right:0;height:34vh;background:linear-gradient(180deg,transparent,rgba(120,235,255,.05) 45%,rgba(180,140,255,.05) 55%,transparent);animation:sweep 9s linear infinite}
@keyframes sweep{0%{top:-40vh}100%{top:110vh}}
@media(prefers-reduced-motion:reduce){.holoscan::before{animation:none;opacity:.35;top:30vh}}
/* ── HUD chrome frame ── */
.hud{position:fixed;inset:0;z-index:80;pointer-events:none}
.hud span{position:absolute;background:var(--holo);opacity:.5}
.hud-t,.hud-b{left:14px;right:14px;height:1px}
.hud-t{top:12px}.hud-b{bottom:12px}
.hud-l,.hud-r{top:14px;bottom:14px;width:1px}
.hud-l{left:12px}.hud-r{right:12px}
.hud-c{position:absolute;width:20px;height:20px;border:1px solid rgba(120,235,255,.6);box-shadow:0 0 12px rgba(90,200,255,.5)}
.tl-c{top:10px;left:10px;border-right:0;border-bottom:0}
.tr-c{top:10px;right:10px;border-left:0;border-bottom:0}
.bl-c{bottom:10px;left:10px;border-right:0;border-top:0}
.br-c{bottom:10px;right:10px;border-left:0;border-top:0}
.hud-stat{position:absolute;top:50%;right:16px;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-family:var(--mono);font-size:9px;letter-spacing:.34em;color:rgba(150,240,255,.55);font-style:normal;text-transform:uppercase}
@media(max-width:760px){.hud{display:none}}
/* ── holographic display type ── */
.d1,.d2{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative;filter:drop-shadow(0 0 26px rgba(120,220,255,.28))}
h1.d1{text-shadow:none}
.d3,.wall h3,.cnode h3,.ctaband b,.lane b{background:linear-gradient(170deg,#FFFFFF,#C6DFF0 55%,#8FB4CE);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ── holo panel material ── */
.wall,.lidc,.reelfig,.lifecycle,.xrow,.chip,.cnode,.cbrief,.fld{
background:linear-gradient(158deg,rgba(120,220,255,.075),rgba(180,140,255,.035) 46%,rgba(255,255,255,.012));
border-color:var(--line2);
box-shadow:0 0 0 1px rgba(140,235,255,.07),0 30px 70px -40px #000,inset 0 1px 0 rgba(200,245,255,.13),inset 0 0 40px -20px rgba(120,220,255,.3)}
.wall::before,.lidc::before,.reelfig::before{background:linear-gradient(150deg,rgba(180,240,255,.16),transparent 30%,rgba(255,111,216,.07))}
.wall::after,.lidc::after,.cnode::after,.reelfig::after{content:"";position:absolute;inset:-1px;border-radius:4px;pointer-events:none;background:var(--holo);opacity:.16;-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
/* iridescent accents on rails, bars, lines */
.frail i{background:var(--holo);box-shadow:0 0 18px rgba(120,220,255,.7)}
.frail.on b.hit{background:var(--iri1);border-color:var(--iri1);box-shadow:0 0 0 5px rgba(72,245,216,.16),0 0 18px rgba(72,245,216,.8)}
.lc .bar{background:var(--holo)!important;box-shadow:0 0 18px rgba(120,220,255,.55)!important}
.stat::before{background:var(--holo);width:34px;opacity:1}
.s+.s::before{background:linear-gradient(90deg,transparent,rgba(120,235,255,.35),rgba(180,140,255,.28),transparent)}
.scale::after{background:var(--holo);opacity:.7}
/* ── the cup as a holographic object ── */
.cup{filter:drop-shadow(0 20px 40px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(120,220,255,.22))}
.cup .body{background:
linear-gradient(96deg,rgba(72,245,216,.3) 0%,rgba(255,255,255,.06) 14%,transparent 28%),
linear-gradient(280deg,rgba(255,111,216,.22) 0%,transparent 34%),
linear-gradient(100deg,#111A24 0%,#DCEDF8 18%,#FFFFFF 40%,#B9D3E4 64%,#7793A8 86%,#1B2530 100%)}
.cup .body::after{background:linear-gradient(250deg,rgba(180,123,255,.28),transparent 42%),linear-gradient(20deg,rgba(72,245,216,.2),transparent 40%);mix-blend-mode:screen}
.cup .rim{background:var(--chrome);box-shadow:0 0 18px -2px rgba(120,235,255,.75)}
.cup .sh{background:radial-gradient(closest-side,rgba(120,220,255,.4),transparent)}
.cup .band::after{text-shadow:0 0 12px rgba(255,255,255,.55)}
/* holo pedestal glow under featured cups */
.herostage::before{background:radial-gradient(closest-side,rgba(72,245,216,.22),rgba(180,123,255,.1) 55%,transparent 74%)}
.herostage::after{border-color:rgba(120,235,255,.3);box-shadow:0 0 40px -14px rgba(120,220,255,.6),inset 0 0 40px -18px rgba(180,140,255,.6)}
.hero{background:radial-gradient(46% 46% at 72% 44%,rgba(72,245,216,.13),transparent 70%),linear-gradient(180deg,#04060A,#06090E 58%,#070B11)}
.hero::before{background:
repeating-linear-gradient(0deg,rgba(120,225,255,.11) 0 1px,transparent 1px 72px),
repeating-linear-gradient(90deg,rgba(120,225,255,.11) 0 1px,transparent 1px 72px)}
/* callouts as holo readouts */
.callouts svg line{stroke:rgba(120,235,255,.55)}
.callouts svg .dot{fill:var(--iri1);filter:drop-shadow(0 0 8px rgba(72,245,216,1))}
.co{color:#EAFBFF;text-shadow:0 0 16px rgba(120,220,255,.4)}
/* status dots pulse */
.tl::before{box-shadow:0 0 0 3px color-mix(in oklab,var(--acc) 22%,transparent),0 0 12px var(--acc);animation:blip 2.6s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.45}}
/* buttons — holo edge */
.btn.s{border-color:rgba(120,235,255,.28);background:linear-gradient(158deg,rgba(120,220,255,.09),rgba(180,140,255,.04))}
.btn.s:hover{border-color:rgba(120,245,255,.7);box-shadow:0 0 30px -8px rgba(120,235,255,.85)}
.btn.p{background:linear-gradient(180deg,#FF7A45,#E04E1B);box-shadow:0 0 0 1px rgba(255,170,130,.4),0 12px 34px -12px rgba(241,90,36,.85),0 0 40px -20px rgba(72,245,216,.7)}
/* nav underline iridescent */
.nlink::after{background:var(--holo)}
header.solid{background:rgba(4,6,10,.7);border-bottom-color:rgba(120,235,255,.14)}
/* ecosystem cards — holo hover bloom */
.ecoc::after{background:radial-gradient(70% 55% at 50% 0%,rgba(72,245,216,.18),rgba(180,123,255,.08) 55%,transparent 72%)}
.ecoc:hover .fig svg{stroke:var(--iri1);filter:drop-shadow(0 0 10px rgba(72,245,216,.9))}
.ecoc:hover .link{color:var(--iri1)}
.eco{border-color:var(--line2)}
/* map — holo projection */
.uae{fill:rgba(90,168,255,.07);stroke:rgba(150,240,255,.5);filter:drop-shadow(0 0 10px rgba(90,200,255,.35))}
.route{stroke:var(--iri5);filter:drop-shadow(0 0 8px rgba(255,194,77,.9))}
.pin{filter:drop-shadow(0 0 12px rgba(255,120,60,1))}
.maplbl.hi{fill:#DFFAFF}
/* SOP hover — violet holo wash */
.sopr:hover{background:linear-gradient(90deg,rgba(180,123,255,.1),transparent)}
.sopr:hover .n{color:var(--iri3)}
.sopr .meta em{color:var(--iri3)}
.exprow:hover{background:linear-gradient(90deg,rgba(90,168,255,.09),transparent)}
.appcol li::before{background:linear-gradient(90deg,rgba(72,245,216,.15),rgba(72,245,216,.85))}
.appcol li::after{background:rgba(72,245,216,.3)}
/* ══════════ CONTACT ══════════ */
.cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.cnode{position:relative;border:1px solid var(--line2);border-radius:4px;padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;overflow:hidden}
.cnode-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.cnode h3{font-size:23px;letter-spacing:-.035em}
.cnode>p{font-size:13.5px;line-height:1.6;margin-top:10px;color:var(--ink3)}
.stat-dot{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--iri1);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.stat-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--iri1);box-shadow:0 0 10px var(--iri1);animation:blip 2.2s ease-in-out infinite}
.crows{margin-top:22px;display:flex;flex-direction:column}
.crow{display:grid;grid-template-columns:88px 1fr;gap:16px;padding:11px 0;border-top:1px solid var(--line2);align-items:start}
.crow:last-child{border-bottom:1px solid var(--line2)}
.crow b{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4);padding-top:3px}
.crow span{font-size:13.5px;color:var(--ink2);line-height:1.5;word-break:break-word}
.crow span a{color:var(--iri1)}.crow span a:hover{color:#fff}
.cnode .link{margin-top:auto;padding-top:24px;color:var(--iri1)}
.chanlist{display:flex;flex-direction:column;margin-top:20px}
.chanrow{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--line2);color:inherit;transition:background .3s,padding-inline-start .3s}
.chanrow:last-child{border-bottom:1px solid var(--line2)}
.chanrow:hover{background:linear-gradient(90deg,rgba(72,245,216,.09),transparent);padding-inline-start:8px;color:inherit}
.ci{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line2);border-radius:3px;background:linear-gradient(158deg,rgba(120,220,255,.1),transparent)}
.ci svg{width:18px;height:18px;fill:none;stroke:var(--iri1);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.chanrow:hover .ci svg{filter:drop-shadow(0 0 8px rgba(72,245,216,.9))}
.chanrow b{display:block;font-family:var(--mono);font-size:12.5px;word-break:break-word;font-weight:500;letter-spacing:.02em;color:var(--ink)}
.chanrow em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--ink4);margin-top:4px;text-transform:uppercase}
.cbrief{margin-top:clamp(20px,3vw,32px);border:1px solid var(--line2);border-radius:4px;padding:clamp(24px,3.4vw,44px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center;position:relative;overflow:hidden}
.cbrief::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 90% at 100% 50%,rgba(180,123,255,.12),transparent 70%)}
.cbrief-l{position:relative}
.cbrief .cta{grid-column:1/-1}
.fields{display:flex;flex-direction:column;gap:8px}
.fld{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:center;padding:12px 16px;border:1px solid var(--line2);border-radius:3px}
.fld b{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--iri2);letter-spacing:.1em}
.fld span{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink2)}
.cnode.chan{grid-column:1/-1}
.cnode.chan{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start}
.cnode.chan .cnode-h,.cnode.chan h3{grid-column:1}
.cnode.chan .chanlist{grid-column:2;grid-row:1/span 3;margin-top:0}
.cnode.chan>.crows{grid-column:1;margin-top:16px}
@media(max-width:1040px){.cgrid{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.cnode.chan{grid-template-columns:1fr}.cnode.chan .chanlist{grid-column:1;grid-row:auto;margin-top:18px}}
@media(max-width:760px){.cgrid{grid-template-columns:1fr}.cbrief{grid-template-columns:1fr}}
footer a:hover{color:var(--iri1)}

/* ═══════════════════════════════════════════════
   HERO — LIVE HOLOGRAM STAGE
   ═══════════════════════════════════════════════ */
.hero{overflow:hidden;isolation:isolate}
/* generated aurora field, heavily attenuated */

@keyframes drift{0%{transform:scale(1.04) translate3d(-1.5%,1%,0)}100%{transform:scale(1.14) translate3d(2%,-1.5%,0)}}
/* particle canvas */
.hfield{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;opacity:.85}
/* volumetric beams from above */
.beams{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000,transparent 88%);mask-image:linear-gradient(180deg,#000,transparent 88%)}
.beams span{position:absolute;top:-12%;width:34vw;height:130%;transform-origin:50% 0;filter:blur(34px);opacity:.16;animation:beam 13s ease-in-out infinite alternate}
.beams span:nth-child(1){left:8%;background:linear-gradient(180deg,rgba(72,245,216,.85),transparent 72%);animation-delay:-2s}
.beams span:nth-child(2){left:46%;background:linear-gradient(180deg,rgba(90,168,255,.8),transparent 72%);animation-delay:-6s;animation-duration:17s}
.beams span:nth-child(3){right:6%;background:linear-gradient(180deg,rgba(180,123,255,.8),transparent 72%);animation-delay:-9s;animation-duration:19s}
@keyframes beam{0%{transform:rotate(-7deg) scaleX(.85);opacity:.1}50%{opacity:.22}100%{transform:rotate(6deg) scaleX(1.15);opacity:.13}}
/* projector pedestal */
.proj{position:absolute;left:50%;bottom:4%;translate:-50% 0;width:74%;aspect-ratio:1/.5;pointer-events:none;z-index:1;display:grid;place-items:end center}
.pdisc{position:absolute;bottom:0;left:12%;right:12%;height:26%;border-radius:50%;background:radial-gradient(closest-side,rgba(72,245,216,.5),rgba(90,168,255,.18) 48%,transparent 72%);filter:blur(9px);animation:discp 4.6s ease-in-out infinite}
@keyframes discp{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.pbeam{position:absolute;bottom:6%;left:26%;right:26%;height:230%;clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);background:linear-gradient(0deg,rgba(72,245,216,.3),rgba(120,220,255,.05) 58%,transparent);filter:blur(12px);opacity:.7;animation:beamflick 7s ease-in-out infinite}
@keyframes beamflick{0%,100%{opacity:.55}42%{opacity:.85}46%{opacity:.5}}
.pring{position:absolute;bottom:2%;left:50%;translate:-50% 0;width:56%;aspect-ratio:1/.28;border:1px solid rgba(120,235,255,.5);border-radius:50%;opacity:0;animation:ringup 4.2s cubic-bezier(.3,.7,.3,1) infinite}
.pring.r2{animation-delay:1.4s}.pring.r3{animation-delay:2.8s}
@keyframes ringup{0%{opacity:0;transform:translateY(0) scale(.62)}12%{opacity:.9}100%{opacity:0;transform:translateY(-190px) scale(1.25)}}
/* orbiting instrument rings */
.orbit{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.orbit circle,.orbit rect{fill:none;stroke:rgba(120,235,255,.3);stroke-width:1}
.orbit .otick rect{fill:rgba(120,235,255,.55);stroke:none}
.orbit .oring{transform-origin:200px 200px;animation:spin 44s linear infinite}
.orbit .oring2{transform-origin:200px 200px;animation:spin 30s linear reverse infinite}
.orbit .otick{transform-origin:200px 200px;animation:spin 90s linear infinite}
.orbit .oring circle{stroke-dasharray:180 26;filter:drop-shadow(0 0 6px rgba(120,235,255,.7))}
@keyframes spin{to{transform:rotate(360deg)}}
/* the cup: hologram float, flicker, glitch slices */
.cup.holo{animation:levitate 7.5s ease-in-out infinite;will-change:transform}
@keyframes levitate{0%,100%{transform:var(--tilt,none) translateY(0) rotateZ(-.4deg)}50%{transform:var(--tilt,none) translateY(-16px) rotateZ(.4deg)}}
.cup.holo{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.herostage:hover .cup.holo{animation-play-state:paused}
.cup.holo .body,.cup.holo .band{animation:holoflick 6.4s steps(1,end) infinite}
@keyframes holoflick{0%,88%,100%{opacity:1}89%{opacity:.72}90%{opacity:1}93%{opacity:.84}94%{opacity:1}}
.cup.holo::before{content:"";position:absolute;inset:5% 0 0;z-index:4;pointer-events:none;clip-path:polygon(13.5% 0,86.5% 0,74% 100%,26% 100%);background:repeating-linear-gradient(0deg,rgba(180,245,255,.13) 0 1px,transparent 1px 4px);mix-blend-mode:screen;animation:scanroll 3.2s linear infinite}
@keyframes scanroll{to{background-position:0 -40px}}
.cup.holo::after{content:"";position:absolute;left:0;right:0;height:12%;z-index:5;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(180,250,255,.3),transparent);filter:blur(2px);mix-blend-mode:screen;animation:scanband 5.4s cubic-bezier(.4,0,.6,1) infinite}
@keyframes scanband{0%{top:-12%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
/* headline — holo boot-in per line */
.hx{margin:20px 0 0}
.hl{display:block;overflow:hidden;line-height:1.02;padding-bottom:.02em}
.hl>span{display:block;transform:translateY(105%) skewY(4deg);opacity:0;animation:bootline 1.1s cubic-bezier(.16,.9,.24,1) forwards;filter:blur(8px)}
.hl:nth-of-type(1)>span{animation-delay:.15s}
.hl:nth-of-type(2)>span{animation-delay:.31s}
.hl:nth-of-type(3)>span{animation-delay:.47s}
@keyframes bootline{60%{filter:blur(0)}100%{transform:none;opacity:1;filter:blur(0)}}
/* telemetry ticker */
.telem{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;border-top:1px solid var(--line2);padding-top:18px}
.telem span{display:flex;flex-direction:column;gap:5px;padding-inline-end:22px;border-inline-end:1px solid var(--line2)}
.telem span:last-child{border-inline-end:0;padding-inline-end:0}
.telem em{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--ink4);text-transform:uppercase}
.telem b{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--iri1);text-shadow:0 0 12px rgba(72,245,216,.55)}
/* callout leader lines draw + pulse travel */
.callouts svg line{stroke-dasharray:var(--ll,160);stroke-dashoffset:var(--ll,160);animation:drawline 1.1s cubic-bezier(.3,.7,.3,1) forwards;animation-delay:calc(.75s + var(--i,0)*.14s)}
@keyframes drawline{to{stroke-dashoffset:0}}
.callouts svg .dot{opacity:0;animation:dotin .5s ease forwards,dotpulse 2.8s ease-in-out infinite;animation-delay:calc(1.6s + var(--i,0)*.14s),calc(2s + var(--i,0)*.3s)}
@keyframes dotin{to{opacity:1}}
@keyframes dotpulse{0%,100%{r:3}50%{r:4.6}}
.scrollcue{animation:cuefade 2.6s ease-in-out infinite}
@keyframes cuefade{0%,100%{opacity:.5}50%{opacity:1}}
@media(max-width:1100px){.proj,.orbit{display:none}}
@media(prefers-reduced-motion:reduce){
.hero::after,.beams span,.pdisc,.pbeam,.pring,.orbit .oring,.orbit .oring2,.orbit .otick,.cup.holo,.cup.holo .body,.cup.holo .band,.cup.holo::before,.cup.holo::after,.scrollcue,.callouts svg line,.callouts svg .dot{animation:none!important}
.hl>span{transform:none;opacity:1;filter:none;animation:none}
.callouts svg line{stroke-dashoffset:0}.callouts svg .dot{opacity:1}
.hfield{display:none}}

/* ── double-wall cup geometry: near-straight jacket, overhanging rolled rim, jacket step above base ── */
.cup.dw{aspect-ratio:1/1.06}
.cup.dw .body,.cup.dw .band{clip-path:polygon(10.5% 0,89.5% 0,82.5% 100%,17.5% 100%)}
.cup.dw .rim{top:1.2%;left:6.5%;right:6.5%;height:10%}
.cup.dw .well{top:3.4%;left:10.5%;right:10.5%;height:6.4%}
.cup.dw .body::before{content:"";position:absolute;left:0;right:0;bottom:8.5%;border-top:1px solid rgba(10,16,22,.34);box-shadow:0 3px 7px -3px rgba(0,0,0,.5);z-index:3}
.cup.dw .sh{left:12%;right:12%}

/* ═══════════ BILINGUAL ═══════════ */
.lang{background:linear-gradient(158deg,rgba(120,220,255,.09),rgba(180,140,255,.04));border:1px solid rgba(120,235,255,.28);color:#BFE9F5;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;padding:9px 14px;border-radius:3px;cursor:pointer;transition:border-color .3s,color .3s,box-shadow .3s;white-space:nowrap}
.lang:hover{border-color:rgba(120,245,255,.75);color:#fff;box-shadow:0 0 24px -8px rgba(120,235,255,.9)}
body.ar .lang{font-family:'Cairo',sans-serif;letter-spacing:0}
/* Arabic typography */
body.ar,body.ar .btn,body.ar h1,body.ar h2,body.ar h3,body.ar h4,body.ar p,body.ar .lede,body.ar .tl,body.ar .num,body.ar .nlink,body.ar .link,body.ar .chip,body.ar .cap,body.ar .app,body.ar .fld span,body.ar .chanrow b,body.ar .chanrow em,body.ar .crow b,body.ar .crow span,body.ar .lane span,body.ar .telem b,body.ar .telem em,body.ar .sopr .n,body.ar .sopr .meta,body.ar .wall .specs div,body.ar .lc h4,body.ar .xrow b,body.ar .xrow span,body.ar .szspec b,body.ar .lidc b,body.ar .lidc span,body.ar .stat small,body.ar .ph,body.ar .fstep h4,body.ar .fstep .n,body.ar .el .lbl,body.ar .exprow .n,body.ar .appcol li,body.ar .maplbl,body.ar .co,body.ar .hud-stat{font-family:'Cairo','Montserrat',sans-serif}
body.ar .tl,body.ar .fstep h4,body.ar .fstep .n,body.ar .el .lbl,body.ar .chanrow em,body.ar .crow b,body.ar .lidc span,body.ar .stat small,body.ar .ph,body.ar .appcol li,body.ar .telem em,body.ar .sopr .meta,body.ar .wall .specs b,body.ar .lc h4,body.ar .xrow b,body.ar .co,body.ar .nlink,body.ar .link,body.ar .chip,body.ar .btn,body.ar .lane span,body.ar .app,body.ar .fld span,body.ar .hud-stat,body.ar .maplbl{letter-spacing:0}
body.ar h1,body.ar h2,body.ar .d1,body.ar .d2,body.ar .d3{letter-spacing:0;line-height:1.14}
body.ar .hl{line-height:1.1;padding-bottom:.08em}
body.ar .lede{line-height:1.65}
body.ar .num,body.ar .szspec b,body.ar .lidc b,body.ar .stat .num{letter-spacing:0}
/* RTL fixes for physically-positioned pieces */
[dir="rtl"] .hud-stat{right:auto;left:16px}
[dir="rtl"] .el .lbl{left:auto;right:calc(100% + 22px)}
[dir="rtl"] .el .lbl::before{right:auto;left:calc(100% + 8px)}
[dir="rtl"] .link::after{content:"←"}
[dir="rtl"] .link:hover::after{transform:translateX(-4px)}
[dir="rtl"] .ba .half.after{clip-path:inset(0 var(--split,50%) 0 0)}
[dir="rtl"] .ba .half.before{clip-path:inset(0 0 0 calc(100% - var(--split,50%)))}
[dir="rtl"] .frail i{inset:0 0 0 auto}
[dir="rtl"] .frail.on i{width:100%}
[dir="rtl"] .travel .cup{left:auto;right:0}
[dir="rtl"] .travel.on .cup{right:calc(100% - 46px);left:auto}
[dir="rtl"] .co{text-align:start}
[dir="rtl"] .exprow:hover,[dir="rtl"] .sopr:hover,[dir="rtl"] .chanrow:hover{background:linear-gradient(270deg,rgba(72,245,216,.09),transparent)}
[dir="rtl"] .appcol li{padding:11px 30px 11px 0}
[dir="rtl"] .appcol li::before,[dir="rtl"] .appcol li::after{left:auto;right:0}
[dir="rtl"] .appcol li::before{background:linear-gradient(270deg,rgba(72,245,216,.15),rgba(72,245,216,.7))}
[dir="rtl"] .xrow[style*="border-inline-start"]{border-inline-start:0}

/* isolate Latin+sign runs (phone numbers) so bidi keeps the + on the left */
[dir="rtl"] .chanrow b,[dir="rtl"] .crow span a[href^="tel:"],[dir="rtl"] .crow span a[href^="mailto:"]{direction:ltr;unicode-bidi:isolate;display:inline-block}
/* mobile-reachable language toggle */
.langm{display:none}
@media(max-width:1060px){
.langm{display:inline-flex;margin-inline-start:auto;margin-inline-end:12px}
.burger{margin-inline-start:0}
.nlinks .lang{display:none}
}

/* watch-the-film controls */
.navplay{background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--ink2);padding:4px 0;position:relative}
.playbtn{display:inline-flex;align-items:center;gap:12px;margin-top:30px;padding:11px 20px 11px 14px;border-radius:100px;cursor:pointer;background:linear-gradient(158deg,rgba(120,220,255,.1),rgba(180,140,255,.04));border:1px solid rgba(120,235,255,.26);color:var(--ink);font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;transition:border-color .3s,box-shadow .3s,color .3s}
.playbtn:hover{border-color:rgba(120,245,255,.7);box-shadow:0 0 30px -10px rgba(120,235,255,.9);color:#fff}
.playbtn i{width:24px;height:24px;flex:none;border-radius:50%;background:var(--holo);display:grid;place-items:center;position:relative;box-shadow:0 0 16px -4px rgba(120,235,255,.9)}
.playbtn i::after{content:"";width:0;height:0;border-left:7px solid #04070B;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;margin-left:2px}
.playbtn em{font-style:normal;color:var(--ink4);letter-spacing:.14em}
[dir="rtl"] .playbtn{padding:11px 14px 11px 20px}
[dir="rtl"] .playbtn i::after{transform:scaleX(-1);margin-left:0;margin-right:2px}
body.ar .playbtn,body.ar .navplay{font-family:'Cairo',sans-serif;letter-spacing:0}
.telem{margin-top:26px}

/* ═══════════ CUP — deeper 3D shading + GPC branding ═══════════ */
.cup{--cupg:
 radial-gradient(115% 62% at 50% 104%,rgba(6,10,14,.5) 0%,rgba(6,10,14,.16) 42%,transparent 66%),
 linear-gradient(90deg,rgba(4,8,12,.55) 0%,rgba(4,8,12,.1) 7%,transparent 17%,transparent 83%,rgba(4,8,12,.2) 93%,rgba(4,8,12,.62) 100%),
 linear-gradient(96deg,rgba(72,245,216,.26) 0%,rgba(255,255,255,.06) 14%,transparent 28%),
 linear-gradient(280deg,rgba(255,111,216,.18) 0%,transparent 34%),
 linear-gradient(100deg,#0E161F 0%,#93AFC4 9%,#E6F3FB 20%,#FFFFFF 39%,#F2F8FC 48%,#BBD4E6 66%,#7C97AC 84%,#37444F 94%,#111A23 100%);
 --cuppos:50% 100%,0 0,0 0,0 0,0 0;
 --cupblend:normal,normal,screen,screen,normal;
 filter:drop-shadow(0 26px 44px rgba(0,0,0,.72)) drop-shadow(0 6px 14px rgba(0,0,0,.5)) drop-shadow(0 0 24px rgba(120,220,255,.18))}
.cup .body{background-image:url(GPC-logo.png),var(--cupg);background-repeat:no-repeat;
 background-position:50% 40%,var(--cuppos);background-size:46% auto,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;
 background-blend-mode:multiply,var(--cupblend);border-radius:0 0 46% 46%/0 0 9% 9%}
/* rolled rim gains real thickness */
.cup .rim{background:linear-gradient(180deg,#FFFFFF 0%,#F0F6FA 26%,#C2D3DF 58%,#8497A5 82%,#5C6D7A 100%);box-shadow:0 0 18px -2px rgba(120,235,255,.6),inset 0 -2px 3px rgba(0,0,0,.3),inset 0 2px 2px rgba(255,255,255,.85)}
.cup .well{background:radial-gradient(120% 150% at 50% 0%,#020406 0%,#0A1118 55%,#1E2A34 100%);box-shadow:inset 0 3px 6px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.28)}
.cup .sh{background:radial-gradient(closest-side,rgba(0,0,0,.68),rgba(0,0,0,.28) 52%,transparent 76%);filter:blur(9px);height:9%;bottom:-3.4%}
.cup .band{mix-blend-mode:multiply;opacity:.92}
.cup.dw .body{background-position:50% 36%,var(--cuppos)}
/* one brand mark per cup: a cup already printed with GPC drops the word, a "your brand" demo keeps its band and drops the mark */
.cup:has(.band[data-brand="GPC"]):not(.eco *):not(.travel *):not(.apphead *) .band::after{content:""}
.cup:has(.band[data-brand]:not([data-brand=""]):not([data-brand="GPC"])) .body,
.travel .cup .body,.eco .cup .body,.apphead .cup .body{background-image:var(--cupg);background-position:var(--cuppos);background-size:100% 100%;background-blend-mode:var(--cupblend)}

/* size-scale cups: printed mark, scaled down so it stays legible on the small sizes */
.sz .cup .body{background-size:52% auto,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;background-position:50% 42%,var(--cuppos)}

/* ═══════════ ICE CREAM CUPS ═══════════ */
.icec{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.icc{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px 24px 22px;border:1px solid var(--line2);border-radius:4px;background:linear-gradient(165deg,var(--glassA),var(--glassB));box-shadow:var(--glow,none)}
.icc .fig{height:132px;display:flex;align-items:flex-end;justify-content:center}
.icc .cup{width:auto;height:var(--ch)}
.icc>b{font-family:var(--mono);font-size:clamp(20px,2vw,28px);font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.icc>.tl{color:var(--ink2)}
.icc dl{display:flex;flex-direction:column;gap:0;margin-top:4px}
.icc dl div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line2)}
.icc dt{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink2)}
.icc dd{font-family:var(--mono);font-size:12px;color:var(--ink);text-align:end}
/* squat tub geometry: wide rim, shallow taper */
.cup.ice .body,.cup.ice .band{clip-path:polygon(9% 0,91% 0,79% 100%,21% 100%)}
.cup.ice .rim{top:1.6%;left:5.5%;right:5.5%;height:13%}
.cup.ice .well{top:5%;left:9%;right:9%;height:8.5%}
.cup.ice .body{background-position:50% 46%,var(--cuppos);background-size:42% auto,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%}
@media(max-width:1000px){.icec{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.icec{grid-template-columns:1fr}}

/* ═══════════ PAPER LIDS — rendered artwork ═══════════ */
.lidpart .lidsvg{display:block;width:100%;filter:drop-shadow(0 16px 26px rgba(0,0,0,.7))}
.lidpart svg ellipse,.lidpart svg path{filter:none}
.lidpart svg [fill="#F1ECE2"],.lidpart svg [fill="#FAF8F3"]{fill:url(#ltop)}
.lidpart svg [stroke="#00695C"]{stroke:#00695C}
/* top-down lid on the size cards */
.lidtop{width:var(--d);height:var(--d);margin:0 auto 22px;position:relative;border-radius:50%;
 background:radial-gradient(circle at 36% 28%,#FFFEFB 0%,#F7F2E9 38%,#E9E1D1 66%,#CFC6B3 86%,#B3AA98 100%);
 box-shadow:0 14px 24px -10px rgba(0,0,0,.8),0 2px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(120,110,92,.35),inset 0 -3px 6px rgba(120,110,92,.28),inset 0 3px 5px rgba(255,255,255,.75)}
.lidtop::before{content:"";position:absolute;inset:8%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,105,92,.42),0 1px 0 rgba(255,255,255,.5)}
.lidtop i{position:absolute;inset:20%;border-radius:50%;
 background:radial-gradient(circle at 38% 30%,#FFFFFE,#F2ECE1 62%,#DED5C4 100%);
 box-shadow:inset 0 0 0 1px rgba(120,110,92,.28),inset 0 4px 7px -3px rgba(120,110,92,.5),0 -1px 0 rgba(255,255,255,.6)}
.lidtop u{position:absolute;left:50%;top:33%;width:26%;height:13%;transform:translateX(-50%);border-radius:44% 44% 50% 50%/60% 60% 40% 40%;
 background:radial-gradient(ellipse at 40% 25%,#3A2E21,#15100B 70%);
 box-shadow:0 1px 0 rgba(255,255,255,.72),inset 0 2px 3px rgba(0,0,0,.9)}
.lidtop.dome{background:radial-gradient(circle at 34% 24%,#FFFFFF 0%,#FBF7F0 30%,#EFE8DB 58%,#D5CCBA 84%,#B8AF9D 100%)}
.lidtop.dome i{inset:16%;background:radial-gradient(circle at 36% 26%,rgba(255,255,255,.98),rgba(240,234,224,.9) 60%,rgba(214,205,190,.92))}
.lidtop.flat i{inset:26%}
.lidc .dia{display:none}

/* seat the lid on the cup at true relative scale */
.lidpart{width:min(56%,214px);transform:translateY(-140px)}
.lidstage.on .lidpart{transform:translateY(34px)}
.cuppart{margin-top:-38px}

.lidpart{z-index:5}
.lidstage.on .lidpart{transform:translateY(24px)}
.cuppart{margin-top:-30px;z-index:2}

/* ═══════════ NAV SUBMENU ═══════════ */
.ndrop{position:relative;display:flex;align-items:center}
.ndrop>.nlink em{display:inline-block;width:0;height:0;margin-inline-start:6px;vertical-align:middle;border-inline-start:3.5px solid transparent;border-inline-end:3.5px solid transparent;border-top:4px solid currentColor;opacity:.7;transition:transform .25s}
.ndrop:hover>.nlink em,.ndrop:focus-within>.nlink em{transform:translateY(1px) rotate(180deg)}
.nsub{position:absolute;top:calc(100% + 14px);inset-inline-start:-16px;min-width:176px;padding:8px;display:flex;flex-direction:column;gap:2px;
 background:rgba(8,11,15,.94);backdrop-filter:blur(20px);border:1px solid var(--line2);border-radius:4px;
 box-shadow:0 0 0 1px rgba(140,235,255,.07),0 26px 60px -30px #000,inset 0 1px 0 rgba(200,245,255,.12);
 opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s,transform .22s,visibility .22s;z-index:60}
.nsub::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.ndrop:hover .nsub,.ndrop:focus-within .nsub{opacity:1;visibility:visible;transform:none}
.nsub a{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--ink2);padding:9px 12px;border-radius:3px;white-space:nowrap;transition:background .2s,color .2s}
.nsub a:hover{background:rgba(120,220,255,.09);color:var(--ink)}
body.ar .nsub a{font-family:'Cairo',sans-serif;letter-spacing:0}
@media(max-width:1060px){
.ndrop{display:block;width:100%}
.nsub{position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;box-shadow:none;backdrop-filter:none;padding:6px 0 2px;margin-inline-start:14px;border-inline-start:1px solid var(--line2)}
.ndrop>.nlink em{display:none}
}

/* ═══════════ GPC PRINTED WRAP — signature wave bands + mark ═══════════ */
.cup .body{background-image:url(GPC-logo.png),url(gpc-wave.svg),var(--cupg);
 background-position:50% 30%,50% 101%,var(--cuppos);
 background-size:42% auto,124% auto,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;
 background-blend-mode:multiply,normal,var(--cupblend)}
.cup.dw .body{background-position:50% 27%,50% 101%,var(--cuppos)}
.cup.ice .body{background-position:50% 34%,50% 103%,var(--cuppos);background-size:44% auto,132% auto,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%}
.sz .cup .body{background-size:50% auto,126% auto,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;background-position:50% 30%,50% 101%,var(--cuppos)}
/* small cups: wrap band only, no mark */
.cup:has(.band[data-brand]:not([data-brand=""]):not([data-brand="GPC"])) .body,
.travel .cup .body,.eco .cup .body,.apphead .cup .body{background-image:url(gpc-wave.svg),var(--cupg);
 background-position:50% 101%,var(--cuppos);
 background-size:126% auto,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;
 background-blend-mode:normal,var(--cupblend)}
/* ═══════════ PLEATED PAPER LID ═══════════ */
.lidtop::before{background:repeating-conic-gradient(from 0deg,rgba(96,86,68,.17) 0deg 1.3deg,rgba(255,255,255,.24) 1.3deg 2.6deg);border-radius:50%;box-shadow:none;
 -webkit-mask:radial-gradient(circle,transparent 60%,#000 65%,#000 100%);mask:radial-gradient(circle,transparent 60%,#000 65%,#000 100%);inset:0}
.lidtop::after{content:"";position:absolute;inset:19%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,105,92,.3),0 1px 0 rgba(255,255,255,.45)}
.lidtop u{top:39%;width:15%;height:8%;background:radial-gradient(ellipse at 40% 25%,#C89A5E,#7A5629 70%)}

/* wrap: bands run to the base, mark sits above them */
.cup .body{background-position:50% 28%,50% 104%;background-size:46% auto,134% auto}
.cup.dw .body{background-position:50% 25%,50% 104%}
.cup.ice .body{background-position:50% 32%,50% 106%;background-size:48% auto,142% auto}
.sz .cup .body{background-position:50% 28%,50% 104%;background-size:54% auto,136% auto}

.cup .body{background-position:50% 26%,50% 102%;background-size:44% auto,128% auto}
.cup.dw .body{background-position:50% 24%,50% 102%}
.cup.ice .body{background-position:50% 30%,50% 104%;background-size:46% auto,136% auto}
.sz .cup .body{background-position:50% 26%,50% 102%;background-size:52% auto,130% auto}

/* wave scaled against the cup's own height so squat and tall cups both read right */
.cup .body{background-position:50% 30%,50% 100%;background-size:44% auto,128% 40%}
.cup.dw .body{background-position:50% 27%,50% 100%;background-size:44% auto,128% 38%}
.cup.ice .body{background-position:50% 30%,50% 100%;background-size:44% auto,136% 46%}
.sz .cup .body{background-position:50% 29%,50% 100%;background-size:52% auto,130% 40%}

.cup.ice .body{background-position:50% 24%,50% 100%}

/* ═══════════ FINAL CUP WRAP — full 7-layer lists (logo, wave, 5 shading layers) ═══════════ */
.cup .body{background-image:url(GPC-logo.png),url(gpc-wave.svg),var(--cupg);
 background-repeat:no-repeat;
 background-position:50% 30%,50% 100%,var(--cuppos);
 background-size:44% auto,128% 40%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;
 background-blend-mode:multiply,normal,var(--cupblend)}
.cup.dw .body{background-position:50% 27%,50% 100%,var(--cuppos);
 background-size:44% auto,128% 38%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%}
.cup.ice .body{background-position:50% 24%,50% 100%,var(--cuppos);
 background-size:44% auto,136% 46%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%}
.sz .cup .body{background-image:url(GPC-logo.png),url(gpc-wave.svg),var(--cupg);
 background-position:50% 29%,50% 100%,var(--cuppos);
 background-size:52% auto,130% 40%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;
 background-blend-mode:multiply,normal,var(--cupblend)}
/* small cups: printed wrap only, no mark (6 layers) */
.cup:has(.band[data-brand]:not([data-brand=""]):not([data-brand="GPC"])) .body,
.travel .cup .body,.eco .cup .body,.apphead .cup .body{background-image:url(gpc-wave.svg),var(--cupg);
 background-position:50% 100%,var(--cuppos);
 background-size:130% 42%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;
 background-blend-mode:normal,var(--cupblend)}

/* ═══════════ REVERT: back to the pre-pattern cup + lid treatment ═══════════ */
.cup .body,.sz .cup .body{background-image:url(GPC-logo.png),var(--cupg);
 background-repeat:no-repeat;
 background-position:50% 40%,var(--cuppos);
 background-size:46% auto,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;
 background-blend-mode:multiply,var(--cupblend)}
.sz .cup .body{background-size:52% auto,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;background-position:50% 42%,var(--cuppos)}
.cup.dw .body{background-position:50% 36%,var(--cuppos);background-size:46% auto,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%}
.cup.ice .body{background-position:50% 46%,var(--cuppos);background-size:42% auto,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%}
.cup:has(.band[data-brand]:not([data-brand=""]):not([data-brand="GPC"])) .body,
.travel .cup .body,.apphead .cup .body{background-image:var(--cupg);
 background-position:var(--cuppos);background-size:100% 100%;background-blend-mode:var(--cupblend)}
.eco .cup .body{background-image:url(GPC-logo.png),var(--cupg);background-position:50% 42%,var(--cuppos);background-size:52% auto,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;background-blend-mode:multiply,var(--cupblend)}
.eco .cup.ice .body{background-position:50% 46%,var(--cuppos);background-size:46% auto,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%}
/* lids: plain embossed rings, no fluting */
.lidtop::before{background:none;-webkit-mask:none;mask:none;inset:8%;box-shadow:inset 0 0 0 1px rgba(0,105,92,.42),0 1px 0 rgba(255,255,255,.5)}
.lidtop::after{content:none}
.lidtop u{top:33%;width:26%;height:13%;background:radial-gradient(ellipse at 40% 25%,#3A2E21,#15100B 70%)}

.wall .fig.spin{padding:0;display:grid;place-items:center;min-height:0}
.wall .fig.spin video{width:min(100%,320px);aspect-ratio:1/1;object-fit:cover;display:block;background:#0b0e12;-webkit-mask-image:radial-gradient(ellipse 74% 74% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 74% 74% at 50% 50%,#000 58%,transparent 100%)}

/* ═══════ ROTATING CUPS — printed wrap turns around the cylinder ═══════ */
.cup.rot .body{background-image:var(--cupg);background-position:var(--cuppos);background-size:100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;background-repeat:no-repeat;background-blend-mode:var(--cupblend)}
.cup.rot .body::before{content:"";position:absolute;inset:0;z-index:2;background:url(GPC-logo.png) no-repeat 50% 40%;background-size:48% auto;mix-blend-mode:multiply;transform-origin:50% 50%;animation:cupturn 7s linear infinite;animation-delay:var(--rd,0s);will-change:transform,opacity}
.sz .cup.rot .body::before{background-size:54% auto;background-position:50% 40%}
.cup.ice.rot .body::before{background-position:50% 27%;background-size:46% auto}
.cup.rot .body::after{animation:cuplight 7s linear infinite;animation-delay:var(--rd,0s)}
@keyframes cupturn{0%{transform:translateX(0) scaleX(1);opacity:1}18%{transform:translateX(26%) scaleX(.56);opacity:.92}26%{transform:translateX(38%) scaleX(.12);opacity:.3}30%,70%{transform:translateX(40%) scaleX(.02);opacity:0}74%{transform:translateX(-38%) scaleX(.12);opacity:.3}82%{transform:translateX(-26%) scaleX(.56);opacity:.92}100%{transform:translateX(0) scaleX(1);opacity:1}}
@keyframes cuplight{0%{opacity:.55}25%{opacity:1}50%{opacity:.55}75%{opacity:.14}100%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.cup.rot .body::before,.cup.rot .body::after{animation:none}.cup.rot .body::before{transform:none;opacity:1}}