/* ============================================================================
VENDIFYS STORE — design system
A light, premium retail architecture: warm walls, recessed machines,
brushed metal, glass, soft realistic shadows. No dark / sci-fi styling.
========================================================================== */
/* ---------- 1. Tokens ---------------------------------------------------- */
/* LIGHT (default): white page + jet black / dark grey chrome */
:root{
--wall-0:#FFFFFF;
--wall-1:#FFFFFF;
--wall-2:#F4F4F6;
--recess:#EFEFF1;
--recess-deep:#E1E1E5;
--floor-1:#F7F7F8;
--floor-2:#E9E9EC;
--ink:#0A0A0B;
--ink-2:#31313A;
--muted:#71717A;
--line:rgba(10,10,11,.13);
--line-soft:rgba(10,10,11,.07);
--shadow-rgb:10,10,11;
/* chrome = the jet black / dark grey furniture of the theme */
--chrome:#0A0A0B;
--chrome-2:#18181B;
--chrome-3:#26262B;
--chrome-ink:#FAFAFA;
--chrome-muted:rgba(255,255,255,.64);
--chrome-line:rgba(255,255,255,.13);
--brand:#9AA0A6;
--brand-ink:#E5E7EB;
--brand-soft:rgba(154,160,166,.15);
--panel:#FFFFFF;
--panel-2:#FAFAFA;
--mach-ink:rgba(10,10,11,.72);
--metal-1:#F7F8F9;
--metal-2:#E6E8EB;
--metal-3:#C6CAD0;
--glass:rgba(255,255,255,.55);
--sand:#C9A227;
--r-xs:6px; --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:28px;
--sh-s:0 1px 2px rgba(var(--shadow-rgb),.07), 0 2px 6px rgba(var(--shadow-rgb),.05);
--sh-m:0 4px 12px rgba(var(--shadow-rgb),.08), 0 14px 30px rgba(var(--shadow-rgb),.07);
--sh-l:0 10px 28px rgba(var(--shadow-rgb),.11), 0 34px 64px rgba(var(--shadow-rgb),.10);
--font-d:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-b:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--nav-h:84px;
--ease:cubic-bezier(.22,.61,.36,1);
}
/* DARK: jet black / dark grey site with glass machines */
[data-theme="dark"]{
--wall-0:#0B0B0C;
--wall-1:#0E0E10;
--wall-2:#151518;
--recess:#1A1A1E;
--recess-deep:#050506;
--floor-1:#111114;
--floor-2:#08080A;
--ink:#F5F5F6;
--ink-2:#C9C9D1;
--muted:#8B8B95;
--line:rgba(255,255,255,.13);
--line-soft:rgba(255,255,255,.07);
--shadow-rgb:0,0,0;
--chrome:#000000;
--chrome-2:#0C0C0E;
--chrome-3:#1B1B1F;
--chrome-ink:#FAFAFA;
--chrome-muted:rgba(255,255,255,.60);
--chrome-line:rgba(255,255,255,.12);
--brand:#9AA0A6;
--brand-ink:#E5E7EB;
--brand-soft:rgba(154,160,166,.15);
--panel:#141417;
--panel-2:#1A1A1E;
--metal-1:#26262B;
--metal-2:#17171B;
--metal-3:#0B0B0D;
--glass:rgba(20,24,30,.55);
--sh-s:0 1px 2px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
--sh-m:0 4px 14px rgba(0,0,0,.55), 0 16px 34px rgba(0,0,0,.45);
--sh-l:0 12px 30px rgba(0,0,0,.6), 0 40px 70px rgba(0,0,0,.5);
}
/* ---------- 2. Base ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overscroll-behavior:contain; overflow-x:clip}
body{
margin:0; background:var(--wall-1); color:var(--ink);
font-family:var(--font-b); font-size:16px; line-height:1.6;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
overflow-x:hidden;
overflow-x:clip;
overscroll-behavior:contain;
}
img,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-d); font-weight:800; letter-spacing:-.02em; line-height:1.1; margin:0}
p{margin:0}
::selection{background:var(--brand-soft); color:var(--brand-ink)}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:4px}
.wrap{width:min(1090px,100% - 96px); margin-inline:auto}
.wrap-wide{width:min(1270px,100% - 72px); margin-inline:auto}
.section{padding:96px 0}
.section--tight{padding:64px 0}
#wall.section{padding-top:0}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* ---------- 3. Typography helpers --------------------------------------- */
.eyebrow{
display:inline-flex; align-items:center; gap:9px;
font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
color:var(--muted);
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--brand); opacity:.7}
.h-display{font-size:clamp(40px,5.6vw,74px); line-height:1.03}
.h1{font-size:clamp(34px,4.4vw,56px)}
.h2{font-size:clamp(28px,3.2vw,42px)}
.h3{font-size:clamp(21px,2vw,27px)}
.lead{font-size:clamp(16.5px,1.35vw,19.5px); color:var(--ink-2); line-height:1.65}
.small{font-size:13.5px; color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; letter-spacing:.02em}
.section-head{display:flex; gap:32px; align-items:flex-end; justify-content:space-between; margin-bottom:38px; flex-wrap:wrap}
.section-head .lead{max-width:620px}
.section-head p.lead{margin-top:14px}
/* ---------- 4. Buttons --------------------------------------------------- */
.btn{
--bg:var(--ink); --fg:#fff;
display:inline-flex; align-items:center; justify-content:center; gap:9px;
height:50px; padding:0 26px; border-radius:999px; border:1px solid transparent;
background:var(--bg); color:var(--fg);
font-weight:650; font-size:15px; letter-spacing:-.01em;
transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .2s, color .2s, border-color .2s;
box-shadow:var(--sh-s); white-space:nowrap;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--sh-m)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px; height:17px; flex:none}
.btn--brand{--bg:var(--ink); box-shadow:0 6px 18px rgba(0,0,0,.35); background:linear-gradient(145deg,#0A0A0B 0%,#1A1B20 50%,#0A0A0B 100%); border:1px solid rgba(255,255,255,.22); color:#E5E7EB; animation:metallicWhiteShadow 2.5s infinite}
.btn--brand:hover{box-shadow:0 12px 26px rgba(154,160,166,.34)}
.btn--ghost{--bg:transparent; --fg:var(--ink); border-color:rgba(255,255,255,.25); box-shadow:none; backdrop-filter:blur(6px); background:rgba(255,255,255,.06)}
.btn--ghost:hover{border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.12)}
.btn--sm{height:40px; padding:0 18px; font-size:14px}
.btn--lg{height:56px; padding:0 32px; font-size:16px}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.link-arrow{
display:inline-flex; align-items:center; gap:7px; font-weight:650; font-size:14.5px;
color:var(--brand-ink); transition:gap .25s var(--ease);
}
.link-arrow:hover{gap:12px}
/* ---------- 5. Chips, badges, tags -------------------------------------- */
.chip{
display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px;
border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.72);
font-size:13.5px; font-weight:600; color:var(--ink-2); cursor:pointer;
transition:all .25s var(--ease); white-space:nowrap;
}
.chip:hover{border-color:var(--line); background:var(--panel); transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.chip .dot{width:7px; height:7px; border-radius:50%; background:var(--brand)}
.badge{
display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px;
border-radius:6px; background:rgba(255,255,255,.9); border:1px solid var(--line);
font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
}
.badge--live{background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.35); color:#15803D}
.badge--brand{background:var(--brand-soft); border-color:rgba(154,160,166,.3); color:var(--brand-ink)}
.badge--plan{background:var(--wall-2); border-color:transparent; color:var(--ink-2)}
/* ---------- 6. Navigation ------------------------------------------------ */
.nav{
position:sticky; top:0; z-index:80; height:var(--nav-h);
background:rgba(252,251,248,.82); backdrop-filter:saturate(1.4) blur(14px);
border-bottom:1px solid transparent; transition:border-color .3s, background .3s, box-shadow .3s;
}
.nav.is-stuck{border-bottom-color:var(--line-soft); box-shadow:0 1px 0 rgba(255,255,255,.7) inset, var(--sh-s)}
.nav .wrap{width:min(1330px, 100% - 64px)}
.nav__in{height:100%; display:flex; align-items:center; gap:28px}
.brand{display:flex; align-items:center; gap:12px; flex:none}
.brand__mark{width:38px; height:38px; border-radius:10px; background:var(--ink); display:grid; place-items:center; overflow:hidden}
.brand__mark img{width:24px; height:24px; object-fit:contain; filter:brightness(0) invert(1)}
.brand__word{height:26px; filter:brightness(0); opacity:.92}
.nav__links{display:flex; align-items:center; gap:4px; margin-left:6px}
.nav__link{
position:relative; padding:9px 13px; border-radius:9px; font-size:16px; font-weight:600; color:var(--ink-2); white-space:nowrap;
transition:color .2s, background .2s;
}
.nav__link:hover{color:var(--ink); background:rgba(var(--shadow-rgb),.06)}
.nav__link.is-active{color:var(--ink)}
.nav__link.is-active::after{
content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px; border-radius:2px; background:var(--brand);
}
.nav__right{margin-left:auto; display:flex; align-items:center; gap:12px}
.nav__login{font-size:16px; font-weight:600; color:var(--ink-2); padding:9px 12px; border-radius:9px; white-space:nowrap}
.nav__login:hover{background:rgba(var(--shadow-rgb),.06); color:var(--ink)}
.nav__burger{
display:none; width:42px; height:42px; border-radius:11px; border:1px solid var(--line);
background:var(--panel); place-items:center;
}
.nav__burger span{display:block; width:17px; height:1.6px; background:var(--ink); border-radius:2px; position:relative}
.nav__burger span::before,.nav__burger span::after{content:""; position:absolute; left:0; width:17px; height:1.6px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease)}
.nav__burger span::before{top:-5.5px} .nav__burger span::after{top:5.5px}
.nav.is-open .nav__burger span{background:transparent}
.nav.is-open .nav__burger span::before{transform:translateY(5.5px) rotate(45deg)}
.nav.is-open .nav__burger span::after{transform:translateY(-5.5px) rotate(-45deg)}
.mobile-menu{
position:fixed; inset:var(--nav-h) 0 auto 0; z-index:79; background:var(--wall-0);
border-bottom:1px solid var(--line); padding:14px 22px 26px;
transform:translateY(calc(-100% - var(--nav-h) - 8px)); transition:transform .45s var(--ease); box-shadow:var(--sh-l);
}
.mobile-menu.is-open{transform:translateY(0)}
.mobile-menu a{display:flex; align-items:center; justify-content:space-between; padding:15px 4px; border-bottom:1px solid var(--line-soft); font-weight:650; font-size:17px}
.mobile-menu .btn{width:100%; margin-top:18px}
/* ---------- 7. Store architecture (wall / ceiling / floor) -------------- */
.scene{
position:relative; isolation:isolate; overflow:hidden;
background:
radial-gradient(120% 60% at 50% -10%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
linear-gradient(180deg, var(--wall-0) 0%, var(--wall-1) 55%, var(--wall-2) 100%);
border-top:1px solid var(--line-soft);
}
.scene--inset{border-radius:var(--r-xl); border:1px solid var(--line-soft); box-shadow:var(--sh-m)}
/* ceiling + recessed lights */
.scene__ceiling{
position:relative; height:74px;
background:linear-gradient(180deg,#FFFFFF,#F5F5F7);
border-bottom:1px solid var(--line-soft);
box-shadow:0 10px 26px -18px rgba(var(--shadow-rgb),.5);
}
.scene__ceiling::after{
content:""; position:absolute; inset:auto 0 -14px 0; height:14px;
background:linear-gradient(180deg, rgba(var(--shadow-rgb),.10), transparent);
}
.light-rig{
position:absolute; inset:0;
display:flex; justify-content:space-around; align-items:flex-start;
padding:0 6%;
}
/* Luxury spotlight housing — recessed ceiling downlight */
.light{
position:relative; width:42px; height:42px; border-radius:50%;
background:
radial-gradient(circle at 50% 40%, #FFFFFF 0%, #F0F0F2 60%, #E0E0E4 100%);
box-shadow:
0 0 0 1px rgba(var(--shadow-rgb),.08) inset,
0 2px 4px rgba(var(--shadow-rgb),.12),
0 0 0 3px rgba(var(--shadow-rgb),.04);
display:flex; align-items:center; justify-content:center;
}
/* Inner ring — polished chrome bezel */
.light::before{
content:""; position:absolute; inset:3px;
border-radius:50%;
background:radial-gradient(circle at 50% 35%, #FFFFFF 0%, #E8E8EC 60%, #D0D0D6 100%);
box-shadow:0 1px 2px rgba(var(--shadow-rgb),.15) inset;
}
/* Precise spotlight beam — warm golden cone */
.light::after{
content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
width:0; height:0;
border-left:38px solid transparent;
border-right:38px solid transparent;
border-top:180px solid rgba(255,236,196,.08);
pointer-events:none;
filter:blur(2px);
transform-origin:top center;
}
/* Light pool on floor beneath each spotlight */
.light-spot{
position:absolute; left:50%; transform:translateX(-50%);
width:120px; height:16px; bottom:-160px;
background:radial-gradient(ellipse at 50% 50%, rgba(255,214,120,.25) 0%, rgba(255,214,120,0) 70%);
pointer-events:none;
}
/* Warm glow effect around spotlight */
.light-glow{
position:absolute; inset:-4px;
border-radius:50%;
background:radial-gradient(circle, rgba(255,236,196,.3) 0%, transparent 70%);
pointer-events:none;
animation:spotlight-pulse 4s ease-in-out infinite;
}
@keyframes spotlight-pulse{
0%,100%{opacity:.6; transform:scale(.95)}
50%{opacity:1; transform:scale(1.05)}
}
/* wall */
.scene__wall{
position:relative; padding:56px 0 14px;
background:
repeating-linear-gradient(90deg, transparent 0 258px, rgba(var(--shadow-rgb),.05) 258px 259px),
linear-gradient(180deg,var(--wall-0),var(--wall-2));
}
.scene__wall::before{
content:""; position:absolute; left:0; right:0; top:0; height:70px;
background:linear-gradient(180deg, rgba(var(--shadow-rgb),.09), transparent); pointer-events:none;
}
.scene__sign{
position:absolute; top:16px; left:50%; transform:translateX(-50%);
font-family:var(--font-d); font-size:11px; font-weight:800; letter-spacing:.34em; text-transform:uppercase;
color:var(--muted); opacity:.75;
}
/* floor */
.scene__floor{
position:relative; height:104px;
background:linear-gradient(180deg,var(--floor-1),var(--floor-2));
border-top:1px solid var(--line-soft);
}
.scene__floor::before{
content:""; position:absolute; inset:0;
background:repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 120px, rgba(var(--shadow-rgb),.05) 120px 121px);
opacity:.7;
}
.scene__floor::after{
content:""; position:absolute; left:0; right:0; top:0; height:44px;
background:linear-gradient(180deg, rgba(var(--shadow-rgb),.12), transparent);
}
.baseboard{
position:absolute; left:0; right:0; top:-13px; height:13px;
background:linear-gradient(180deg,#FFFFFF,#E9E9EC);
border-top:1px solid var(--line-soft);
box-shadow:0 2px 6px rgba(var(--shadow-rgb),.07);
}
/* ---------- 8. The niche (architectural recess) ------------------------- */
.wall-row{
display:flex; gap:26px; align-items:stretch; justify-content:center;
padding:0 clamp(16px,3vw,44px);
}
.wall-row--scroll{
justify-content:flex-start; overflow-x:auto; scroll-snap-type:x mandatory;
padding-bottom:14px; scrollbar-width:thin;
overscroll-behavior-x:contain;
}
.wall-row--scroll::-webkit-scrollbar{height:7px}
.wall-row--scroll::-webkit-scrollbar-thumb{background:rgba(var(--shadow-rgb),.25); border-radius:8px}
.wall-row--scroll::-webkit-scrollbar-track{background:transparent}
.wall-row--hero{justify-content:safe center}
.wall-row .niche{width:clamp(150px,15vw,206px)}
.wall-row .machine{aspect-ratio:9/20.9}
.wall-row--hero .niche{width:clamp(176px,17.5vw,236px)}
.wall-row--hero .machine{aspect-ratio:8/22.8}
/* sub-page header */
.pagehead{background:linear-gradient(180deg,var(--wall-0),var(--wall-1)); padding:56px 0 34px; border-bottom:1px solid var(--line-soft)}
.pagehead .lead{max-width:640px; margin-top:16px}
.crumbs{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); margin-bottom:18px}
.crumbs a:hover{color:var(--brand-ink)}
.toolbar{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:26px}
.niche{
position:relative; flex:none; scroll-snap-align:center;
padding:14px; border-radius:6px;
background:linear-gradient(180deg,var(--recess),var(--recess-deep));
box-shadow:
inset 0 3px 0 rgba(255,255,255,.9),
inset 0 18px 28px -16px rgba(var(--shadow-rgb),.55),
inset 0 -14px 24px -16px rgba(var(--shadow-rgb),.45),
0 1px 0 rgba(255,255,255,.95);
transition:box-shadow .4s var(--ease);
}
[data-theme="dark"] .niche{
box-shadow:
inset 0 3px 0 rgba(255,255,255,.06),
inset 0 18px 30px -16px rgba(0,0,0,.9),
inset 0 -14px 24px -16px rgba(0,0,0,.8);
}
.niche::after{
content:""; position:absolute; inset:-1px; border-radius:7px; pointer-events:none;
border:1px solid rgba(var(--shadow-rgb),.12);
box-shadow:0 0 0 1px rgba(255,255,255,.85);
}
[data-theme="dark"] .niche::after{border-color:rgba(255,255,255,.09); box-shadow:0 0 0 1px rgba(0,0,0,.7)}
.niche:hover,.niche:focus-within{
box-shadow:
inset 0 3px 0 rgba(255,255,255,.95),
inset 0 24px 36px -18px rgba(var(--shadow-rgb),.6),
inset 0 -16px 26px -16px rgba(var(--shadow-rgb),.45),
0 1px 0 rgba(255,255,255,.95);
}
/* contact shadow on the floor */
.scene__floor .contact{
position:absolute; top:-16px; height:30px; border-radius:50%;
background:radial-gradient(50% 50% at 50% 50%, rgba(48,40,30,.42), rgba(48,40,30,0) 70%);
filter:blur(3px);
}
/* ---------- 9. The vending machine (realistic shop machine) -------------- */
.machine{
--accent:#9AA0A6;
position:relative; display:flex; flex-direction:column;
width:100%; border-radius:calc(var(--radius,24px) * .40);
background:
linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,0) 18%),
repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 1px, rgba(var(--shadow-rgb),.035) 1px 4px),
linear-gradient(178deg, var(--metal-1) 0%, var(--metal-2) 62%, var(--metal-3) 100%);
border:1px solid rgba(var(--shadow-rgb),.20);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset -1px 0 0 rgba(var(--shadow-rgb),.07),
0 20px 34px -20px rgba(var(--shadow-rgb),.55),
0 46px 74px -44px rgba(var(--shadow-rgb),.55);
overflow:hidden;
transition:transform .45s var(--ease), box-shadow .45s var(--ease);
transform:translateZ(0);
}
.niche:hover .machine,.machine:hover{
transform:translateY(-6px);
overflow:visible;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 26px 44px -20px rgba(var(--shadow-rgb),.55),
0 58px 92px -46px rgba(var(--shadow-rgb),.55);
}
.machine__frame{padding:7px 7px 0; display:flex; flex-direction:column; height:100%; gap:5px}
/* backlit brand / ad topper */
.machine__banner{
position:relative; flex:0 0 clamp(54px, 23%, 96px); overflow:hidden; border-radius:7px;
background:#0C0D10;
box-shadow:0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(0,0,0,.55), 0 6px 16px -10px rgba(0,0,0,.7);
}
.machine__banner img,.machine__banner video{width:100%; height:100%; object-fit:cover}
.machine__banner::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(180deg, rgba(255,255,255,.14), transparent 34%, rgba(0,0,0,.34));
}
.banner-logo{
position:absolute; inset:0; margin:auto; z-index:3; display:grid; place-items:center; padding:7px;
}
.banner-logo img{max-height:52px; width:auto; object-fit:contain; filter:drop-shadow(0 4px 14px rgba(0,0,0,.55))}
.banner-word{
font-family:var(--font-d); font-weight:800; letter-spacing:.04em; color:#fff;
font-size:clamp(13px,1.5vw,19px); text-shadow:0 3px 14px rgba(0,0,0,.6); text-align:center;
}
.banner-tag{
position:absolute; left:6px; top:6px; z-index:3;
font-size:8.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
color:rgba(255,255,255,.9); background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.22);
padding:2px 6px; border-radius:4px; backdrop-filter:blur(4px);
}
/* ---- glass door ------------------------------------------------------- */
.machine__door{
position:relative; flex:1 1 auto; min-height:74px; overflow:hidden;
border-radius:8px;
background:linear-gradient(180deg, rgba(236,243,247,.85), rgba(226,233,238,.7));
border:1px solid rgba(var(--shadow-rgb),.16);
box-shadow:
inset 0 2px 10px rgba(var(--shadow-rgb),.16),
inset 0 0 0 3px rgba(255,255,255,.55);
}
[data-theme="dark"] .machine__door{
background:linear-gradient(180deg, rgba(28,34,42,.85), rgba(16,20,26,.78));
box-shadow:inset 0 2px 12px rgba(0,0,0,.7), inset 0 0 0 3px rgba(255,255,255,.06);
}
.machine__interior{
position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
padding:6px 5px 5px;
background:
linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0) 26%),
radial-gradient(120% 46% at 50% 0%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%),
linear-gradient(180deg, #F3F5F7 0%, #E9ECEF 58%, #DFE3E7 100%);
}
[data-theme="dark"] .machine__interior{
background:
linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 26%),
radial-gradient(120% 46% at 50% 0%, rgba(220,232,255,.32), rgba(255,255,255,0) 70%),
linear-gradient(180deg, #232833 0%, #1A1E26 58%, #11141A 100%);
}
/* interior LED strip */
.machine__ledbar{
flex:0 0 5px; border-radius:3px; margin:0 1px 4px;
background:linear-gradient(90deg, rgba(255,255,255,.2), #FFFFFF 22%, #FFFFFF 78%, rgba(255,255,255,.2));
box-shadow:0 0 8px rgba(255,255,255,.95), 0 1px 0 rgba(var(--shadow-rgb),.12);
}
[data-theme="dark"] .machine__ledbar{
background:linear-gradient(90deg, rgba(200,225,255,.15), #EAF4FF 22%, #EAF4FF 78%, rgba(200,225,255,.15));
box-shadow:0 0 10px rgba(214,236,255,.8);
}
/* shelves + products */
.shelfgrid{
display:grid; grid-template-columns:repeat(3,1fr); gap:3px; flex:1;
align-content:start; overflow:hidden; min-height:0;
}
.machine:hover .shelfgrid,.niche:hover .shelfgrid{overflow:visible}
.slot{
position:relative; display:flex; flex-direction:column; min-width:0;
border-radius:5px; overflow:hidden; cursor:pointer; padding:0;
background:transparent; border:1px solid rgba(var(--shadow-rgb),.10);
box-shadow:0 1px 0 rgba(255,255,255,.4) inset;
aspect-ratio:9/15;
transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .2s;
}
[data-theme="dark"] .slot{
background:transparent;
border-color:rgba(255,255,255,.10);
box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
/* Slot photo holder: transparent base so transparent product
PNGs sit on the section background; an extremely faint
radial glow keeps a soft merchandise-window shadow. */
.slot__pic{
position:relative; flex:1 1 auto; min-height:0; overflow:hidden; display:block;
background:
radial-gradient(110% 70% at 50% 0%, rgba(var(--shadow-rgb),.04), rgba(var(--shadow-rgb),0) 70%),
linear-gradient(180deg, rgba(var(--shadow-rgb),.04), rgba(var(--shadow-rgb),.02));
}
/* Cut-out product photo: contain so the whole product shows and the shelf
background reads through the transparent background. */
.slot__pic img{width:100%; height:100%; object-fit:contain; padding:3px; box-sizing:border-box; transition:transform .5s var(--ease)}
/* The decorative spiral coil used to sit here, drawn across the bottom of the
slot. With transparent product cut-outs it lay across the product itself, so
it was removed; the product now sits directly on the shelf. */
/* price rail + slot code */
.slot__tag{
flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:3px;
padding:2px 4px; background:linear-gradient(180deg,#FFFFFF,#F0F1F3);
border-top:1px solid rgba(var(--shadow-rgb),.14);
font-family:var(--font-d); line-height:1.1;
min-height:14px;
}
[data-theme="dark"] .slot__tag{background:linear-gradient(180deg,#1D1F24,#14161A); border-top-color:rgba(255,255,255,.12)}
.slot__tag b{
font-size:8px; font-weight:800; letter-spacing:.06em; color:var(--muted); text-transform:uppercase;
}
.slot__tag b{flex:0 0 auto}
.slot__tag em{
font-style:normal; font-size:10px; font-weight:800; color:var(--ink);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; text-align:right;
}
.slot:hover,.slot:focus-visible{
transform:translateY(-3px) scale(2); z-index:10;
border-color:var(--accent);
box-shadow:0 10px 20px -10px rgba(var(--shadow-rgb),.7), 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
overflow:visible;
}
.slot:hover .slot__pic,.machine:hover .slot__pic,.niche:hover .slot__pic{overflow:visible; z-index:10}
.slot:hover .slot__pic img,.machine:hover .slot__pic img,.niche:hover .slot__pic img{
cursor:zoom-in;
}
.slot:hover .slot__tag em{color:var(--brand-ink)}
.slot__name{
flex:0 0 auto;
display:flex; align-items:center; gap:6px;
padding:3px 5px;
background:linear-gradient(180deg,var(--panel-2),var(--panel));
color:var(--ink-2); font-size:10px; font-weight:700; line-height:1.15; letter-spacing:.01em;
border-top:1px solid var(--line-soft);
/* ensure name never overlaps the price tag */
position:relative; z-index:2;
/* truncate long names cleanly */
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
min-height:18px;
}
[data-theme="dark"] .slot__name{
background:linear-gradient(180deg,#14161A,#0F1115);
color:rgba(255,255,255,.92); border-top-color:rgba(255,255,255,.10);
}
.slot:hover .slot__name{color:var(--accent)}
.slot--empty{
background:
repeating-linear-gradient(135deg, rgba(var(--shadow-rgb),.05) 0 8px, rgba(var(--shadow-rgb),.02) 8px 16px);
border-style:dashed;
}
[data-theme="dark"] .slot--empty{
background:repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 8px, rgba(255,255,255,.02) 8px 16px);
}
/* glass surface: reflections + door edge + handle */
.glass__sheen{
position:absolute; inset:0; z-index:6; pointer-events:none; border-radius:inherit;
background:
linear-gradient(112deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.30) 40%, rgba(255,255,255,0) 50%),
linear-gradient(112deg, rgba(255,255,255,0) 56%, rgba(255,255,255,.16) 62%, rgba(255,255,255,0) 68%),
linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 22%);
mix-blend-mode:screen; opacity:.55;
}
[data-theme="dark"] .glass__sheen{
background:
linear-gradient(112deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.12) 40%, rgba(255,255,255,0) 50%),
linear-gradient(112deg, rgba(255,255,255,0) 56%, rgba(255,255,255,.07) 62%, rgba(255,255,255,0) 68%);
mix-blend-mode:screen; opacity:.4;
}
.glass__edge{
position:absolute; inset:0; z-index:7; pointer-events:none; border-radius:inherit;
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.7),
inset 0 0 0 3px rgba(var(--shadow-rgb),.14),
inset 0 -14px 22px -18px rgba(var(--shadow-rgb),.6);
}
[data-theme="dark"] .glass__edge{box-shadow:inset 0 0 0 2px rgba(255,255,255,.09), inset 0 -16px 24px -18px rgba(0,0,0,.9)}
.door__handle{
position:absolute; right:3px; top:12%; bottom:12%; width:7px; z-index:8; pointer-events:none;
border-radius:4px;
background:linear-gradient(90deg,#F2F3F5,#C9CDD3 45%,#9BA1A9 60%,#E7E9EC);
box-shadow:0 2px 5px rgba(var(--shadow-rgb),.45), inset 0 1px 0 rgba(255,255,255,.9);
}
[data-theme="dark"] .door__handle{
background:linear-gradient(90deg,#4A4E56,#2B2E34 45%,#1A1C21 60%,#3C4048);
box-shadow:0 2px 6px rgba(0,0,0,.7);
}
/* ---- control panel: screen, keypad, contactless ------------------------ */
.machine__panel{
flex:0 0 clamp(32px,11.5%,48px); display:flex; align-items:center; gap:6px;
padding:4px 6px; border-radius:6px;
background:linear-gradient(180deg,var(--chrome-3),var(--chrome));
border:1px solid rgba(var(--shadow-rgb),.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 3px 8px -5px rgba(var(--shadow-rgb),.6);
}
.machine__panel .panel__screen{
flex:1 1 auto; min-width:0; height:70%; border-radius:3px; position:relative; overflow:hidden;
background:linear-gradient(180deg,#0A1410,#06100C);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.machine__panel .panel__screen::after{
content:""; position:absolute; left:5px; top:50%; transform:translateY(-50%);
width:58%; height:4px; border-radius:2px;
background:linear-gradient(90deg, var(--accent), rgba(190,255,220,.9));
box-shadow:0 0 8px var(--accent);
animation:screenpulse 3.4s var(--ease) infinite;
}
@keyframes screenpulse{0%,100%{opacity:.6; width:44%}50%{opacity:1; width:66%}}
.machine__panel .panel__keys{
flex:0 0 auto; width:clamp(24px,32%,42px); height:78%; border-radius:4px;
background-color:#15161A;
background-image:radial-gradient(circle at 50% 50%, rgba(255,255,255,.62) 34%, rgba(255,255,255,0) 36%);
background-size:33.33% 25%;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 1px 2px rgba(0,0,0,.6);
}
.machine__panel .panel__pay{
flex:0 0 auto; width:clamp(20px,24%,32px); height:78%; border-radius:4px;
display:grid; place-items:center; color:#EDEFF2;
background:linear-gradient(180deg,#2A2C32,#141519);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.machine__panel .panel__pay svg{width:60%; height:60%; opacity:.9}
/* ---- pickup tray ------------------------------------------------------- */
.machine__tray{
flex:0 0 clamp(20px,7%,30px); display:grid; place-items:center; border-radius:5px;
background:linear-gradient(180deg,#1C1E23,#0B0C0F);
border:1px solid rgba(var(--shadow-rgb),.55);
box-shadow:inset 0 4px 8px rgba(0,0,0,.75), inset 0 -1px 0 rgba(255,255,255,.08);
}
.machine__tray .tray__flap{
font-family:var(--font-d); font-size:7.5px; font-weight:800; letter-spacing:.24em;
text-transform:uppercase; color:rgba(255,255,255,.55);
border-bottom:1px dashed rgba(255,255,255,.28); padding-bottom:1px;
}
/* accent LED glow around entire machine cabinet — all 4 sides */
.machine__led{
position:absolute;
inset:-2px;
border-radius:inherit;
pointer-events:none;
z-index:9;
box-shadow:
0 0 8px 2px var(--accent),
0 0 20px 4px color-mix(in srgb, var(--accent) 60%, transparent),
0 0 40px 8px color-mix(in srgb, var(--accent) 25%, transparent);
animation:
led-color-cycle 15s linear infinite,
led-glow-pulse 3s ease-in-out infinite;
}
@keyframes led-color-cycle{
0%,100%{box-shadow:
0 0 8px 2px #ff6b6b,
0 0 22px 5px rgba(255,107,107,.4),
0 0 44px 9px rgba(255,107,107,.15)}
16.66%{box-shadow:
0 0 8px 2px #ffd93d,
0 0 22px 5px rgba(255,217,61,.4),
0 0 44px 9px rgba(255,217,61,.15)}
33.33%{box-shadow:
0 0 8px 2px #6bcb77,
0 0 22px 5px rgba(107,203,119,.4),
0 0 44px 9px rgba(107,203,119,.15)}
50%{box-shadow:
0 0 8px 2px #4d96ff,
0 0 22px 5px rgba(77,150,255,.4),
0 0 44px 9px rgba(77,150,255,.15)}
66.66%{box-shadow:
0 0 8px 2px #9b59b6,
0 0 22px 5px rgba(155,89,182,.4),
0 0 44px 9px rgba(155,89,182,.15)}
83.33%{box-shadow:
0 0 8px 2px #e74c3c,
0 0 22px 5px rgba(231,76,60,.4),
0 0 44px 9px rgba(231,76,60,.15)}
}
@keyframes led-glow-pulse{
0%,100%{opacity:.55}
50%{opacity:1}
}
.no-anim .machine__led{animation:none}
.machine__brandbar{
flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:6px;
font-family:var(--font-d); font-size:8.5px; font-weight:800; letter-spacing:.26em;
text-transform:uppercase; color:rgba(var(--shadow-rgb),.42); padding:5px 0 6px;
}
[data-theme="dark"] .machine__brandbar{color:rgba(255,255,255,.38)}
.machine__brandbar img{height:10px; filter:brightness(0); opacity:.45}
[data-theme="dark"] .machine__brandbar img{filter:brightness(0) invert(1); opacity:.45}
/* hover info plate */
.machine__info{
position:absolute; left:7px; right:7px; bottom:7px; z-index:12;
background:rgba(255,255,255,.97); border:1px solid var(--line); border-radius:11px;
padding:12px 13px; box-shadow:var(--sh-m);
opacity:0; transform:translateY(12px);
transition:opacity .35s var(--ease), transform .35s var(--ease);
}
[data-theme="dark"] .machine__info{background:rgba(16,16,19,.97); border-color:var(--line)}
.niche:hover .machine__info,.niche:focus-within .machine__info{opacity:1; transform:translateY(0)}
.machine__info h4{font-size:15px; margin-bottom:3px}
.machine__info p{font-size:12.5px; color:var(--muted); line-height:1.45}
.machine__info .btn{height:34px; padding:0 14px; font-size:12.5px; margin-top:10px}
/* ---------- 10. Hero ----------------------------------------------------- */
.hero{position:relative; padding:calc(var(--nav-h) + 24px) 0 48px; background:linear-gradient(180deg,var(--wall-0),var(--wall-1))}
.hero__layout{
display:grid; grid-template-columns:380px 1fr; gap:40px;
align-items:start;
}
.hero__sidebar{
position:sticky; top:calc(var(--nav-h) + 28px);
display:flex; flex-direction:column; gap:32px;
padding-top:8px;
}
.hero__content{padding:0}
.hero__content .eyebrow{margin-bottom:14px; font-size:12px; letter-spacing:.12em}
.hero__content .h-display{font-size:clamp(30px,3.4vw,44px); line-height:1.08; margin:0}
.hero__content .lead{margin:16px 0 0; font-size:14px; line-height:1.65; color:var(--ink-2); max-width:360px}
.hero__content .hero__cta{margin-top:24px; gap:10px}
.hero__content .hero__meta{
display:flex; gap:20px; flex-wrap:wrap; margin-top:20px;
font-size:12px; color:var(--muted); font-weight:600;
}
.hero__meta span{display:inline-flex; align-items:center; gap:6px}
.hero__meta i{width:5px; height:5px; border-radius:50%; background:var(--brand); display:inline-block}
.hero__machines{position:relative}
/* Feature cards under hero text */
.hero__features{
display:flex; flex-direction:column; gap:14px;
border-top:1px solid var(--line-soft); padding-top:24px;
}
.hero-feature{
display:flex; gap:12px; align-items:flex-start;
padding:12px 14px; border-radius:12px; border:1px solid var(--line-soft);
background:var(--panel); transition:border-color .2s, box-shadow .2s;
}
.hero-feature:hover{border-color:var(--brand); box-shadow:0 4px 12px rgba(var(--shadow-rgb),.06)}
.hero-feature__icon{
width:36px; height:36px; border-radius:10px; flex:none;
background:var(--brand-soft); display:grid; place-items:center;
font-size:18px;
}
.hero-feature h4{font-size:13px; font-weight:700; margin:0 0 2px}
.hero-feature p{font-size:12px; color:var(--muted); margin:0; line-height:1.4}
/* Hero grid — 2 columns of machines */
.hero-grid{
display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
}
.hero-grid__item{position:relative}
.hero-grid__item .niche{width:100%}
.hero-grid__item .machine{aspect-ratio:8/18}
/* Spotlight above each machine */
.hero-spotlight{
position:absolute; top:-16px; left:50%; transform:translateX(-50%);
width:40px; height:40px; border-radius:50%; z-index:15;
background:radial-gradient(circle at 50% 40%, #FFFFFF 0%, #F0F0F2 60%, #E0E0E4 100%);
box-shadow:
0 0 0 1px rgba(var(--shadow-rgb),.08) inset,
0 2px 4px rgba(var(--shadow-rgb),.12);
}
.hero-spotlight::before{
content:""; position:absolute; inset:3px;
border-radius:50%;
background:radial-gradient(circle at 50% 35%, #FFFFFF 0%, #E8E8EC 60%, #D0D0D6 100%);
box-shadow:0 1px 2px rgba(var(--shadow-rgb),.15) inset;
}
/* Spotlight beam */
.hero-spotlight::after{
content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
width:0; height:0;
border-left:28px solid transparent;
border-right:28px solid transparent;
border-top:120px solid rgba(255,236,196,.12);
pointer-events:none;
filter:blur(4px);
}
[data-theme="dark"] .hero-spotlight{
background:radial-gradient(circle at 50% 40%, #2A2A30 0%, #1A1A1E 60%, #0A0A0D 100%);
box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 2px 4px rgba(0,0,0,.6);
}
[data-theme="dark"] .hero-spotlight::before{
background:radial-gradient(circle at 50% 35%, #3A3A40 0%, #2A2A30 60%, #1A1A1E 100%);
box-shadow:0 1px 2px rgba(0,0,0,.4) inset;
}
[data-theme="dark"] .hero-spotlight::after{border-top-color:rgba(255,236,196,.15)}
/* LED strip on hero machines — color-cycling glow around the machine */
.hero-grid__item .machine__led{
position:absolute; inset:-3px;
border-radius:inherit;
pointer-events:none; z-index:9;
box-shadow:
0 0 8px 2px #ff6b6b,
0 0 22px 5px rgba(255,107,107,.4),
0 0 44px 9px rgba(255,107,107,.15);
animation:
led-color-cycle 15s linear infinite,
led-glow-pulse 3s ease-in-out infinite;
}
.no-anim .hero-grid__item .machine__led{animation:none}
@media(max-width:900px){
.hero__layout{grid-template-columns:1fr; gap:32px}
.hero__sidebar{position:static}
.hero__content{text-align:center}
.hero__content .lead{max-width:none}
.hero__content .hero__cta{justify-content:center}
.hero__content .hero__meta{justify-content:center}
.hero__features{flex-direction:row; flex-wrap:wrap; justify-content:center}
.hero-feature{flex:0 1 calc(50% - 7px)}
.hero-grid{grid-template-columns:repeat(2,1fr); gap:18px}
}
@media(max-width:600px){
.hero-grid{grid-template-columns:1fr; gap:14px}
.hero-feature{flex:0 1 100%}
}
/* aisle / wayfinding label */
.aisle{
position:absolute; left:clamp(14px,3vw,42px); top:50%; transform:translateY(-50%) rotate(-90deg);
transform-origin:left center; font-family:var(--font-d); font-size:10.5px; font-weight:800;
letter-spacing:.3em; text-transform:uppercase; color:var(--muted); opacity:.8; pointer-events:none;
}
/* ---------- 11. Machine wall section ------------------------------------ */
.filters{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:30px}
.wall-rail{
position:relative;
/* The rail is a horizontal carousel at every width: a left-aligned
paging strip on wide screens, a centred single-card snap below
1100px. The prev/next nav buttons page it one card at a time. */
}
.wall-rail__nav{
position:absolute; top:50%; transform:translateY(-50%);
z-index:5;
width:44px; height:44px; border-radius:50%;
background:var(--panel); border:1px solid var(--line-soft);
color:var(--ink-2); font-size:22px; line-height:1; cursor:pointer;
display:grid; place-items:center;
transition:background .2s, border-color .2s, color .2s, transform .2s;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}
.wall-rail__nav--prev{left:-4px}
.wall-rail__nav--next{right:-4px}
.wall-rail__nav:hover:not(:disabled){
background:var(--panel-2); border-color:var(--line); color:var(--ink);
}
.wall-rail__nav:disabled{opacity:.4; cursor:default}
.wall-grid{
--wg-card:clamp(260px, 24vw, 320px);
display:flex; gap:26px; flex-wrap:nowrap;
overflow-x:auto; overflow-y:hidden;
scroll-snap-type:x mandatory;
padding-bottom:20px;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
overscroll-behavior-x:contain;
min-width:0;
}
.wall-grid .niche{
flex:0 0 var(--wg-card);
width:var(--wg-card); min-width:0;
scroll-snap-align:start; scroll-snap-stop:always;
}
.wall-grid .machine{aspect-ratio:9/26.4}
.wall-grid::-webkit-scrollbar{height:6px}
.wall-grid::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px}
[data-theme="dark"] .wall-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15)}
/* Narrow viewports: the carousel switches to a centred single-card
snap so one machine fills the strip with equal peek on both sides.
padding-inline pads half a card on each side so the active card
sits centred in the viewport. */
@media (max-width: 1100px){
.wall-rail__nav{
width:42px; height:42px; font-size:21px;
}
.wall-grid{
--wg-card: clamp(220px, calc(100vw - 80px), 380px);
gap:14px;
scroll-padding-inline:max(20px, calc((100% - var(--wg-card)) / 2));
padding-inline:max(20px, calc((100% - var(--wg-card)) / 2));
background-clip:padding-box;
}
/* Each niche takes the full card-width so all four rows have
a predictable column distribution. */
.wall-grid .niche{
flex:0 0 var(--wg-card);
width:var(--wg-card);
min-width:0;
scroll-snap-align:center; scroll-snap-stop:always;
}
.wall-grid::-webkit-scrollbar{height:6px}
.wall-grid::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px}
[data-theme="dark"] .wall-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15)}
}
/* ---------- 12. Product shelf / product experience ---------------------- */
.exhibit{
display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:34px; align-items:stretch;
}
.panel{
background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-l);
box-shadow:var(--sh-m); overflow:hidden;
}
.panel__head{
display:flex; align-items:center; justify-content:space-between; gap:14px;
padding:16px 20px; border-bottom:1px solid var(--line-soft); background:linear-gradient(180deg,var(--panel),var(--panel-2));
}
.panel__title{display:flex; align-items:center; gap:11px; font-weight:750; font-size:15px}
.panel__title img{height:22px; width:auto}
.panel__body{padding:20px}
.shelf{display:grid; grid-template-columns:repeat(auto-fill,minmax(146px,1fr)); gap:16px}
.pcard{
position:relative; background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-m);
overflow:hidden; cursor:pointer; text-align:left; padding:0; width:100%;
transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s;
}
.pcard:hover{transform:translateY(-4px); box-shadow:var(--sh-m); border-color:var(--line)}
.pcard.is-selected{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft), var(--sh-m)}
.pcard__img{display:block; aspect-ratio:1/1; background:var(--wall-2); overflow:hidden; position:relative}
.pcard__img img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.pcard:hover .pcard__img img{transform:scale(1.06)}
.pcard__badges{position:absolute; left:8px; top:8px; display:flex; gap:5px; flex-wrap:wrap}
.pcard__body{display:block; padding:11px 12px 13px}
.pcard__name{font-size:13px; font-weight:650; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:35px}
.pcard__row{display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:8px}
.pcard__price{font-family:var(--font-d); font-weight:800; font-size:15.5px; letter-spacing:-.02em}
.pcard__stock{font-size:10.5px; font-weight:700; color:#15803D; letter-spacing:.04em; text-transform:uppercase}
.catalog{display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:18px}
a.pcard{display:block; text-decoration:none; color:inherit}
a.pcard .badge{background:rgba(255,255,255,.92)}
.detail{display:flex; flex-direction:column; height:100%}
.detail__img{aspect-ratio:4/3; background:var(--wall-2); position:relative; overflow:hidden}
.detail__img img{width:100%; height:100%; object-fit:cover}
.detail__tag{position:absolute; left:14px; top:14px}
.detail__info{padding:22px; display:flex; flex-direction:column; gap:14px; flex:1}
.detail__info h3{font-size:23px}
.detail__price{display:flex; align-items:baseline; gap:12px}
.detail__price b{font-family:var(--font-d); font-size:30px; font-weight:800; letter-spacing:-.02em}
.detail__price s{color:var(--muted); font-size:14px}
.spec{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.spec div{background:var(--panel-2); border:1px solid var(--line-soft); border-radius:9px; padding:10px 12px}
.spec dt{font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700}
.spec dd{margin:3px 0 0; font-size:13.5px; font-weight:650}
.detail .btn{width:100%}
/* ---------- 13. Journey (business customer journey) --------------------- */
.journey{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px}
.jcard{
position:relative; background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-l);
padding:24px 22px 22px; box-shadow:var(--sh-s); overflow:hidden;
transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.jcard:hover{transform:translateY(-5px); box-shadow:var(--sh-m)}
.jcard::before{
content:""; position:absolute; left:0; right:0; top:0; height:3px;
background:linear-gradient(90deg,var(--brand),rgba(154,160,166,.15));
transform:scaleX(.24); transform-origin:left; transition:transform .5s var(--ease);
}
.jcard:hover::before{transform:scaleX(1)}
.jcard__n{font-family:var(--font-d); font-size:12.5px; font-weight:800; letter-spacing:.16em; color:var(--brand-ink)}
.jcard h3{font-size:19px; margin:12px 0 8px}
.jcard p{font-size:14px; color:var(--muted); line-height:1.6}
.jcard .link-arrow{margin-top:14px; font-size:13.5px}
/* ---------- 14. Dashboard preview --------------------------------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center}
.dash{background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-l); box-shadow:var(--sh-l); overflow:hidden; max-width:100%}
.dash__bar{display:flex; align-items:center; gap:8px; padding:12px 16px; background:linear-gradient(180deg,#FBFAF7,#F5F2EC); border-bottom:1px solid var(--line-soft)}
.dash__dots{display:flex; gap:6px}
.dash__dots i{width:9px; height:9px; border-radius:50%; background:var(--recess-deep); display:block}
.dash__url{
flex:1; height:26px; border-radius:7px; background:var(--panel); border:1px solid var(--line);
display:flex; align-items:center; padding:0 10px; font-size:11.5px; color:var(--muted); gap:7px;
}
.dash__tabs{display:flex; gap:4px; padding:10px 12px 0; border-bottom:1px solid var(--line-soft); overflow-x:auto; overscroll-behavior-x:contain}
.dash__tab{
padding:8px 12px; font-size:12.5px; font-weight:650; color:var(--muted); border-radius:8px 8px 0 0;
border-bottom:2px solid transparent; white-space:nowrap;
}
.dash__tab.is-active{color:var(--ink); border-bottom-color:var(--brand); background:rgba(154,160,166,.05)}
.dash__body{padding:18px}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.kpi{background:#FAF9F6; border:1px solid var(--line-soft); border-radius:11px; padding:12px}
.kpi span{font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700}
.kpi b{display:block; font-family:var(--font-d); font-size:22px; font-weight:800; letter-spacing:-.02em; margin-top:5px}
.kpi em{font-style:normal; font-size:11px; font-weight:700; color:#15803D}
.chart{display:flex; align-items:flex-end; gap:6px; height:104px; margin-top:16px; padding-top:8px; border-top:1px dashed var(--line)}
.chart i{
flex:1; border-radius:4px 4px 2px 2px;
background:linear-gradient(180deg, rgba(154,160,166,.85), rgba(154,160,166,.35));
transform-origin:bottom; transform:scaleY(.05); transition:transform 1.1s var(--ease);
}
.is-visible .chart i{transform:scaleY(1)}
.health{margin-top:16px; display:grid; gap:8px}
.health li{
display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600;
background:#FAF9F6; border:1px solid var(--line-soft); border-radius:9px; padding:9px 12px;
}
.health li .tick{
width:18px; height:18px; border-radius:50%; background:rgba(34,197,94,.15); color:#15803D;
display:grid; place-items:center; font-size:11px; flex:none;
}
.dash__foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-top:1px solid var(--line-soft); background:#FBFAF7; font-size:12px; color:var(--muted)}
/* ---------- 15. Machine models / styles --------------------------------- */
.styles{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px}
.style-card{
background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-l); padding:20px;
box-shadow:var(--sh-s); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.style-card:hover{transform:translateY(-4px); box-shadow:var(--sh-m)}
.style-card .swatch{height:78px; border-radius:11px; margin-bottom:15px; border:1px solid var(--line-soft); position:relative; overflow:hidden}
.style-card h4{font-size:16.5px; margin-bottom:5px}
.style-card p{font-size:13px; color:var(--muted)}
/* ---------- 16. Plans ---------------------------------------------------- */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:20px; align-items:stretch}
.plan{
position:relative; display:flex; flex-direction:column; background:var(--panel);
border:1px solid var(--line-soft); border-radius:var(--r-l); padding:26px 24px 24px;
box-shadow:var(--sh-s); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.plan:hover{transform:translateY(-5px); box-shadow:var(--sh-m)}
.plan.is-popular{border-color:rgba(154,160,166,.5); box-shadow:0 12px 40px -18px rgba(154,160,166,.45), var(--sh-s)}
.plan__tag{
position:absolute; top:-11px; left:24px; height:23px; padding:0 11px; border-radius:999px;
background:var(--brand); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.1em;
text-transform:uppercase; display:grid; place-items:center;
}
.plan h3{font-size:21px}
.plan__desc{font-size:13.5px; color:var(--muted); margin-top:4px}
.plan__price{display:flex; align-items:baseline; gap:6px; margin:20px 0 6px}
.plan__price b{font-family:var(--font-d); font-size:46px; font-weight:800; letter-spacing:-.03em}
.plan__price span{font-size:13.5px; color:var(--muted); font-weight:650}
.plan__note{font-size:12.5px; color:var(--muted); background:var(--panel-2); border:1px solid var(--line-soft); border-radius:9px; padding:9px 11px}
.plan ul{list-style:none; margin:18px 0 22px; padding:0; display:grid; gap:9px}
.plan li{display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--ink-2)}
.plan li::before{
content:""; width:16px; height:16px; border-radius:50%; flex:none; margin-top:2px;
background:rgba(34,197,94,.15) url("data:image/svg+xml;utf8,") center/9px no-repeat;
}
.plan .btn{margin-top:auto; width:100%; background:linear-gradient(145deg,#0A0A0B 0%,#1A1B20 50%,#0A0A0B 100%) !important; color:#E5E7EB !important; height:48px; border-radius:9999px; font-weight:700; font-size:16px; border:1px solid rgba(255,255,255,.22)}
.plan.is-popular .btn{background:linear-gradient(145deg,#0A0A0B 0%,#1A1B20 50%,#0A0A0B 100%) !important; color:#E5E7EB !important; border:1px solid rgba(255,255,255,.22)}
/* ---------- 17. FAQ ------------------------------------------------------ */
.faq{display:grid; gap:12px}
.qa{
background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-m); overflow:hidden;
box-shadow:var(--sh-s); transition:box-shadow .3s, border-color .3s;
}
.qa[open]{box-shadow:var(--sh-m); border-color:var(--line)}
.qa summary{
list-style:none; cursor:pointer; padding:19px 22px; display:flex; align-items:center; gap:16px;
font-weight:700; font-size:16.5px; font-family:var(--font-d); letter-spacing:-.01em;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ico{
margin-left:auto; width:26px; height:26px; border-radius:50%; border:1px solid var(--line);
display:grid; place-items:center; flex:none; transition:transform .35s var(--ease), background .3s;
}
.qa[open] summary .ico{transform:rotate(45deg); background:var(--brand); border-color:var(--brand); color:#fff}
.qa__a{padding:0 22px 20px 22px; color:var(--muted); font-size:15px; line-height:1.68; max-width:900px}
/* ---------- 18. CTA band ------------------------------------------------- */
.cta-band{
position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(38px,5vw,66px);
background:linear-gradient(135deg,#1B1D22 0%,#24272E 55%,#2E3138 100%);
color:#fff; box-shadow:var(--sh-l);
}
.cta-band::after{
content:""; position:absolute; right:-70px; top:-70px; width:340px; height:340px; border-radius:50%;
background:radial-gradient(circle, rgba(154,160,166,.34), rgba(154,160,166,0) 68%);
}
.cta-band h2{max-width:660px; position:relative; z-index:2}
.cta-band p{max-width:560px; color:rgba(255,255,255,.7); margin-top:16px; position:relative; z-index:2}
.cta-band .btn-row{margin-top:30px; position:relative; z-index:2}
.cta-band .btn--ghost{--fg:#fff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.08)}
.cta-band .btn--ghost:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.55)}
/* ---------- 19. Category rail ------------------------------------------- */
.cats{display:flex; flex-wrap:nowrap; overflow-x:auto; gap:10px; overscroll-behavior-x:contain}
.cat{
position:relative; background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-m);
padding:12px 10px 10px; text-align:left; box-shadow:var(--sh-s); overflow:hidden;
transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .25s;
height:90px; min-width:140px; flex:0 0 auto; display:flex; flex-direction:column; justify-content:center;
}
.cat:hover{transform:translateY(-2px); box-shadow:var(--sh-s); outline:none}
.cat[aria-pressed="true"]{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); outline:none}
.cat:focus{outline:none}
.cat__ico{
width:28px; height:28px; border-radius:8px; display:grid; place-items:center; margin-bottom:6px;
background:linear-gradient(150deg,#F0F0F2,#E0E0E4); color:var(--brand-ink); border:1px solid rgba(154,160,166,.16);
}
.cat__ico svg{width:14px; height:14px}
.cat b{display:block; font-size:13px; font-weight:750}
.cat span{font-size:10.5px; color:var(--muted)}
/* ---------- 20. Steps / how it works ------------------------------------ */
.steps{display:grid; gap:0; counter-reset:s}
.step{
display:grid; grid-template-columns:64px 1fr auto; gap:24px; align-items:center;
padding:26px 0; border-top:1px solid var(--line-soft);
}
.step:last-child{border-bottom:1px solid var(--line-soft)}
.step__n{
width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
font-family:var(--font-d); font-weight:800; font-size:16px;
background:var(--panel); border:1px solid var(--line); box-shadow:var(--sh-s);
}
.step h3{font-size:21px; margin-bottom:7px}
.step p{color:var(--muted); font-size:15px; max-width:660px}
/* ---------- 21. Video showcase ------------------------------------------ */
.video-stage{
position:relative; border-radius:var(--r-l); overflow:hidden; background:#0C0D10;
box-shadow:var(--sh-l); border:1px solid var(--line);
}
.video-stage video{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/9}
.video-stage__play{
position:absolute; inset:0; display:grid; place-items:center; gap:14px;
background:linear-gradient(180deg, rgba(10,11,14,.28), rgba(10,11,14,.55)); border:0; width:100%;
color:#fff; transition:background .3s;
}
.video-stage__play:hover{background:linear-gradient(180deg, rgba(10,11,14,.18), rgba(10,11,14,.5))}
.play-ring{
width:74px; height:74px; border-radius:50%; display:grid; place-items:center;
background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(6px);
box-shadow:0 10px 34px rgba(0,0,0,.4); transition:transform .35s var(--ease);
}
.video-stage__play:hover .play-ring{transform:scale(1.07)}
.play-ring svg{width:26px; height:26px; margin-left:4px}
.video-stage__label{
position:absolute; left:20px; bottom:18px; text-align:left; z-index:3;
}
.video-stage__label b{display:block; font-family:var(--font-d); font-size:17px}
.video-stage__label span{font-size:12.5px; color:rgba(255,255,255,.7)}
/* ---------- 22. Forms ---------------------------------------------------- */
.form{display:grid; gap:16px}
.field{display:grid; gap:7px}
.field label{font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--ink-2)}
.field input,.field textarea,.field select{
width:100%; padding:13px 15px; border-radius:11px; border:1px solid var(--line);
background:var(--panel); font:inherit; font-size:15px; color:var(--ink);
transition:border-color .2s, box-shadow .2s;
}
.field textarea{min-height:132px; resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-note{font-size:12.5px; color:var(--muted)}
.form-ok{
display:none; align-items:center; gap:10px; padding:14px 16px; border-radius:11px;
background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3); color:#15803D; font-weight:650; font-size:14.5px;
}
.form-ok.is-on{display:flex}
/* ---------- 23. Footer --------------------------------------------------- */
.footer{background:var(--wall-0); border-top:1px solid var(--line-soft); padding:64px 0 30px; margin-top:20px}
.footer__grid{display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:34px}
.footer__brand p{font-size:14px; color:var(--muted); margin-top:16px; max-width:300px}
.footer h5{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 15px; font-weight:800}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.footer a{font-size:14.5px; color:var(--ink-2); transition:color .2s}
.footer a:hover{color:var(--brand-ink)}
.footer__bottom{
margin-top:46px; padding-top:22px; border-top:1px solid var(--line-soft);
display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
font-size:13px; color:var(--muted);
}
.lang{display:inline-flex; align-items:center; gap:8px; font-weight:650}
/* ---------- 24. Utility -------------------------------------------------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.grid-4 article.card{transition:transform .35s var(--ease, ease), box-shadow .35s var(--ease, ease)}
.grid-4 article.card img{transition:transform .4s var(--ease, ease)}
.grid-4 article.card:hover{transform:perspective(900px) rotateX(3deg) rotateY(-5deg) translateY(-6px); box-shadow:0 22px 44px rgba(0,0,0,.32)}
.grid-4 article.card:hover img{transform:scale(1.06)}
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid-4{grid-template-columns:1fr 1fr; gap:14px}}
.card{background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-l); padding:24px; box-shadow:var(--sh-s)}
.divider{height:1px; background:var(--line-soft); margin:0}
.stat{display:flex; gap:34px; flex-wrap:wrap; margin-top:30px}
.stat b{display:block; font-family:var(--font-d); font-size:34px; font-weight:800; letter-spacing:-.03em}
.stat span{font-size:13px; color:var(--muted); font-weight:600}
.notice{
background:var(--panel-2); border:1px solid rgba(201,162,39,.34); border-radius:11px;
padding:13px 16px; font-size:13.5px; color:#7A5B10; display:flex; gap:10px; align-items:flex-start;
}
.notice b{color:#5E4508}
/* reveal on scroll */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.no-anim .reveal,.no-anim .reveal[data-d]{opacity:1 !important; transform:none !important; transition:none !important}
.no-anim .machine__led{animation:none}
.reveal.is-visible{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
/* ---------- 25. Responsive ---------------------------------------------- */
.split > *,.grid-2 > *,.grid-3 > *,.exhibit > *{min-width:0}
@media (max-width:1340px){
.nav__in{gap:16px}
.nav__links{gap:0; margin-left:0}
.nav__link{padding:9px 9px; font-size:15px}
.nav__login{padding:9px 8px}
}
@media (max-width:1080px){
.footer__grid{grid-template-columns:repeat(4,1fr)}
.footer__brand{grid-column:1/-1}
.exhibit{grid-template-columns:1fr}
.kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1240px){
.nav__links,.nav__login{display:none}
.nav__burger{display:grid}
}
@media (max-width:900px){
:root{--nav-h:64px}
.nav .wrap{width:min(1330px, 100% - 40px)}
.nav__links,.nav__login{display:none}
.nav__right .btn--brand{display:none}
.nav__burger{display:grid}
.section{padding:66px 0}
.machine{max-width:100%}
.split,.grid-2,.grid-3{grid-template-columns:1fr}
.mv__layout{grid-template-columns:1fr; gap:36px}
.step{grid-template-columns:52px 1fr; gap:16px}
.step .btn{grid-column:2; justify-self:start}
.form-row{grid-template-columns:1fr}
.footer__grid{grid-template-columns:1fr 1fr}
.scene__wall{padding:34px 0 10px}
.scene__ceiling{height:54px}
.scene__floor{height:74px}
.wall-row{gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; justify-content:flex-start;
padding-inline:20px; margin-inline:-22px; padding-bottom:12px; overscroll-behavior-x:contain}
.wall-row .niche{scroll-snap-align:center; width:clamp(132px,42vw,178px)}
.aisle{display:none}
.hero{padding-top:46px}
.machine__info{position:static; opacity:1; transform:none; margin-top:10px; box-shadow:none; background:rgba(255,255,255,.7)}
}
@media (max-width:640px){
.wrap{width:min(1240px,100% - 32px)}
.h-display{font-size:clamp(33px,9vw,44px)}
.hero__cta .btn{width:100%}
.hero__meta{gap:14px; font-size:12px}
.shelf{grid-template-columns:repeat(2,1fr)}
.catalog{grid-template-columns:repeat(2,1fr); gap:14px}
.footer{padding:44px 0 26px}
.footer__grid{grid-template-columns:1fr 1fr; gap:26px 18px}
.footer__bottom{margin-top:32px; justify-content:center; text-align:center}
.plan__price b{font-size:38px}
.spec{grid-template-columns:1fr}
.cta-band{padding:32px 24px}
.btn{height:48px; padding:0 22px}
.machine__frame{gap:4px; padding:6px 6px 0}
.machine__banner{flex-basis:clamp(46px,23%,74px)}
.machine__door{min-height:64px}
.shelfgrid{gap:3px}
.slot__tag b{font-size:7px}
.slot__tag em{font-size:9px}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
html{scroll-behavior:auto}
.reveal{opacity:1; transform:none}
}
/* ---------- 26. Theme — jet black chrome (both themes) ------------------- */
:root{
--nav-bg:#0A0A0B;
--nav-ink:#FFFFFF;
--nav-ink-2:rgba(255,255,255,.74);
--nav-hover:rgba(255,255,255,.10);
--nav-line:rgba(255,255,255,.14);
--footer-ink:#F5F5F6;
--footer-ink-2:rgba(255,255,255,.66);
}
[data-theme="dark"]{ --nav-bg:#000000; --mach-ink:rgba(255,255,255,.74) }
/* nav = jet black bar */
.nav{
background:var(--nav-bg);
backdrop-filter:saturate(1.3) blur(14px);
border-bottom:1px solid var(--nav-line);
}
.nav.is-stuck{
border-bottom-color:var(--nav-line);
box-shadow:0 14px 34px -26px rgba(0,0,0,.9);
}
.nav .brand__mark{background:#FFFFFF}
.nav .brand__mark img{filter:none}
.nav .brand__word{filter:brightness(0) invert(1); opacity:.95}
.nav img[src*="logo-new"]{width:110px; height:70px; object-fit:contain;}
.nav .nav__link{color:var(--nav-ink-2)}
.nav .nav__link:hover{color:#FFFFFF; background:var(--nav-hover)}
.nav .nav__link.is-active{color:#FFFFFF}
.nav .nav__link.is-active::after{background:var(--brand)}
.nav .nav__login{color:var(--nav-ink-2)}
.nav .nav__login:hover{background:var(--nav-hover); color:#FFFFFF}
.nav__burger{background:transparent; border-color:var(--nav-line)}
.nav__burger span,.nav__burger span::before,.nav__burger span::after{background:#FFFFFF}
.nav__burger span::before,.nav__burger span::after{background:#FFFFFF}
/* theme switch */
.nav__theme{
width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex:none;
background:transparent; border:1px solid var(--nav-line); color:#FFFFFF;
transition:background .2s, border-color .2s;
}
.nav__theme:hover{background:var(--nav-hover)}
.nav__theme svg{width:18px; height:18px}
.nav__theme .ico-sun{display:none}
[data-theme="dark"] .nav__theme .ico-sun{display:block}
[data-theme="dark"] .nav__theme .ico-moon{display:none}
/* mobile menu on chrome */
.mobile-menu{background:var(--nav-bg); color:#FFFFFF; border-bottom-color:var(--nav-line)}
.mobile-menu a{color:rgba(255,255,255,.9); border-bottom-color:rgba(255,255,255,.10)}
.mobile-menu a:hover{color:#fff}
/* footer = jet black */
.footer{
background:var(--chrome); color:var(--footer-ink);
border-top:1px solid rgba(255,255,255,.10);
}
.footer h5{color:var(--footer-ink-2)}
.footer a{color:var(--footer-ink-2)}
.footer a:hover{color:#FFFFFF}
.footer__brand p{color:var(--footer-ink-2)}
.footer__bottom{border-top-color:rgba(255,255,255,.10); color:var(--footer-ink-2)}
.footer .brand img{width:110px; height:70px; object-fit:contain; filter:grayscale(1) brightness(1.3) contrast(1.2); mix-blend-mode:screen}
.footer .lang{color:var(--footer-ink-2)}
/* cta band = true jet black */
.cta-band{background:linear-gradient(135deg,#0A0A0B 0%,#141417 55%,#232429 100%); color:#fff}
[data-theme="dark"] .cta-band{background:linear-gradient(135deg,#000 0%,#0C0C0F 55%,#1A1B20 100%)}
/* page backgrounds stay white/true black */
body{background:var(--wall-1)}
::selection{background:rgba(154,160,166,.22); color:var(--ink)}
/* ---------- 27. Dark theme component overrides --------------------------- */
[data-theme="dark"] .panel__head{background:linear-gradient(180deg,var(--panel),var(--panel-2)); border-bottom-color:var(--line-soft)}
[data-theme="dark"] .badge--live{background:rgba(74,222,128,.14); border-color:rgba(74,222,128,.34); color:#86EFAC}
[data-theme="dark"] .pcard__stock,[data-theme="dark"] .kpi em,[data-theme="dark"] .form-ok{color:#86EFAC}
[data-theme="dark"] .form-ok{background:rgba(74,222,128,.12); border-color:rgba(74,222,128,.3)}
[data-theme="dark"] .plan li::before{
background:rgba(74,222,128,.16) url("data:image/svg+xml;utf8,") center/9px no-repeat;
}
[data-theme="dark"] .notice{color:#F3E7B8}
[data-theme="dark"] .notice b{color:#FBEFC4}
[data-theme="dark"] .scene{
background:
radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 60%),
linear-gradient(180deg, var(--wall-0) 0%, var(--wall-1) 55%, var(--wall-2) 100%);
}
[data-theme="dark"] .scene__ceiling{background:linear-gradient(180deg,#141417,#0C0C0E); box-shadow:0 10px 26px -18px rgba(0,0,0,.9)}
[data-theme="dark"] .scene__floor::before{
background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 120px, rgba(255,255,255,.16) 120px 121px);
opacity:.9;
}
[data-theme="dark"] .scene__floor::after{background:linear-gradient(180deg, rgba(0,0,0,.5), transparent)}
[data-theme="dark"] .baseboard{
background:linear-gradient(180deg,#1B1B1F,#0B0B0D);
border-top-color:rgba(255,255,255,.10);
box-shadow:0 2px 6px rgba(0,0,0,.7);
}
[data-theme="dark"] .light{
background:radial-gradient(circle at 50% 40%, #2A2A30 0%, #1A1A1E 60%, #0A0A0D 100%);
box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 2px 4px rgba(0,0,0,.6);
}
[data-theme="dark"] .light::before{
background:radial-gradient(circle at 50% 35%, #3A3A40 0%, #2A2A30 60%, #1A1A1E 100%);
box-shadow:0 1px 2px rgba(0,0,0,.4) inset;
}
[data-theme="dark"] .light::after{border-top-color:rgba(255,236,196,.12)}
[data-theme="dark"] .light-spot{background:radial-gradient(ellipse at 50% 50%, rgba(255,214,120,.3) 0%, rgba(255,214,120,0) 70%)}
[data-theme="dark"] .light-glow{background:radial-gradient(circle, rgba(255,236,196,.4) 0%, transparent 70%)}
[data-theme="dark"] .baseboard{background:linear-gradient(180deg,#1A1A1E,#0B0B0D); border-top-color:rgba(255,255,255,.08); box-shadow:0 2px 6px rgba(0,0,0,.6)}
[data-theme="dark"] .machine{
background:
linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 18%),
repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.25) 1px 4px),
linear-gradient(178deg, #2A2A30 0%, #1A1A1F 62%, #0D0D10 100%);
border-color:rgba(255,255,255,.12);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.14),
0 22px 38px -20px rgba(0,0,0,.9),
0 50px 80px -44px rgba(0,0,0,.9);
}
[data-theme="dark"] .niche:hover .machine,[data-theme="dark"] .machine:hover{
box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 28px 46px -20px rgba(0,0,0,.95), 0 60px 96px -46px rgba(0,0,0,.9);
}
[data-theme="dark"] .slot__name{background:rgba(250,250,252,.95); color:#0A0A0B}
[data-theme="dark"] .machine__info{color:var(--ink)}
.machine__brandline{
display:flex; align-items:center; justify-content:space-between; gap:8px;
padding:0 2px; font-size:11.5px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--mach-ink);
}
[data-theme="dark"] .machine__panel{border-color:rgba(255,255,255,.10)}
[data-theme="dark"] .style-card,[data-theme="dark"] .cat,[data-theme="dark"] .chip{background:var(--panel)}
[data-theme="dark"] .cat[aria-pressed="true"],[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--chrome-3); color:#fff; border-color:transparent}
[data-theme="dark"] .dash__bar{background:linear-gradient(90deg,var(--brand),#B8BABE)}
[data-theme="dark"] .scrollbar-thumb::-webkit-scrollbar-thumb,
[data-theme="dark"] .wall-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}
/* theme flash guard */
html[data-theme="dark"]{color-scheme:dark}
/* ---------- 28. Segmented toggle ---------------------------------------- */
.segmented-toggle{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg-btn{padding:8px 16px;font-size:13px;font-weight:600;border:none;background:transparent;color:var(--ink-2);cursor:pointer;transition:all .2s}
.seg-btn.active{background:var(--ink);color:#fff}
/* ---------- 29. Metallic grey + animated white shadow ------------------- */
@keyframes metallicWhiteShadow{
0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0.7), 0 0 20px rgba(255,255,255,0.3)}
50%{box-shadow:0 0 0 4px rgba(255,255,255,0.4), 0 0 30px rgba(255,255,255,0.5)}
}
/* Header fix — ensure fully visible, no cropping (height follows --nav-h) */
.nav{
position:sticky !important; top:0 !important; left:0 !important; right:0 !important;
z-index:1000 !important; height:var(--nav-h) !important;
display:flex !important; align-items:center !important;
background:rgba(8,8,8,0.9) !important;
backdrop-filter:blur(16px) !important;
-webkit-backdrop-filter:blur(16px) !important;
}
/* Metallic grey for all brand buttons, badges, tags */
.btn--brand{
background:linear-gradient(145deg,#0A0A0B 0%,#1A1B20 50%,#0A0A0B 100%) !important;
color:#E5E7EB !important; border:1px solid rgba(255,255,255,.22) !important;
animation:metallicWhiteShadow 2.5s infinite !important;
}
.btn--brand:hover{
box-shadow:0 0 0 4px rgba(255,255,255,0.15), 0 0 40px rgba(255,255,255,0.12) !important;
}
.badge--brand{
background:rgba(154,160,166,.15) !important;
border-color:rgba(154,160,166,.3) !important;
color:#E5E7EB !important;
}
.plan__tag{
background:linear-gradient(145deg,#9AA0A6,#B8BABE) !important;
color:#0A0A0B !important;
}
.plan.is-popular{
border-color:rgba(154,160,166,.5) !important;
box-shadow:0 12px 40px -18px rgba(154,160,166,.45) !important;
}
.plan.is-popular .plan__tag{
background:linear-gradient(145deg,#9AA0A6,#B8BABE) !important;
color:#0A0A0B !important;
}
.nav__link.is-active::after{
background:linear-gradient(145deg,#9AA0A6,#B8BABE) !important;
}
.chip[aria-pressed="true"]{
background:linear-gradient(145deg,#9AA0A6,#B8BABE) !important;
color:#0A0A0B !important;
}
.cat[aria-pressed="true"]{
border-color:#9AA0A6 !important;
box-shadow:0 0 0 1px #9AA0A6 !important;
}
.banner-tag{
background:rgba(154,160,166,.5) !important;
border-color:rgba(154,160,166,.3) !important;
}
.tray__flap{
background:linear-gradient(145deg,#9AA0A6,#B8BABE) !important;
-webkit-background-clip:text !important;
-webkit-text-fill-color:transparent !important;
}
.panel__screen::after{
background:linear-gradient(90deg,#9AA0A6,rgba(190,255,220,.9)) !important;
box-shadow:0 0 8px #9AA0A6 !important;
}
.cta-band::after{
background:radial-gradient(circle, rgba(154,160,166,.34), rgba(154,160,166,0) 68%) !important;
}
.hero__meta i{
background:#9AA0A6 !important;
}
html:not([data-theme="dark"]){color-scheme:light}
/* ============================================================================
26. IMMERSIVE 3D HERO + COMMERCE (hero_3d / shop_grid / merchant_value,
cart drawer, quick view, checkout)
========================================================================== */
.hero3d{position:relative; overflow:hidden; padding:78px 0 30px}
.hero3d::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(52% 44% at 74% 42%, rgba(154,160,166,.16), transparent 70%),
radial-gradient(40% 36% at 16% 20%, rgba(154,160,166,.08), transparent 72%);
}
.hero3d__layout{
position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1.1fr);
gap:52px; align-items:center;
}
.hero3d__copy .eyebrow{margin-bottom:16px}
.hero3d__copy .lead{margin-top:18px; max-width:520px}
.hero3d__cta{margin-top:30px}
.hero3d__chips{display:flex; flex-wrap:wrap; gap:9px 22px; margin-top:26px}
.hero3d__chips span{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink-2)}
.hero3d__chips i{width:7px; height:7px; border-radius:50%; background:linear-gradient(145deg,#9AA0A6,#C0C2C5); box-shadow:0 0 0 3px var(--brand-soft)}
.hero3d__stage{display:flex; justify-content:center; min-width:0}
/* Hero futuristic headline + typewriter.
The headline uses Orbitron (futuristic) on a unicode monospace
caret for the typewriter effect. Each character inside
`.hero__typewriter` is animated in via JS with per-letter
reveal; the "rainbow" variant paints the chrome + amber-glow
treatment of the Vendifys logo instead of a colour cycle. */
.hero__h1{
font-family:"Orbitron", "Manrope", "Manrope-fallback", ui-sans-serif, system-ui, sans-serif;
letter-spacing:.01em;
}
.hero__typewriter{
display:inline-block; position:relative;
font-family:inherit; font-weight:800; letter-spacing:.02em;
white-space:nowrap; min-height:1em;
}
.hero__typewriter[data-color="rainbow"]{
background:linear-gradient(105deg,#FFFEFB 0%,#E4E9EF 15%,#98A0AC 30%,#F9FAFC 43%,#5C6570 56%,#E2E7ED 70%,#A9B0BB 84%,#FDFEFE 100%);
background-size:260% 100%;
background-position:40% 50%;
-webkit-background-clip:text; background-clip:text;
color:transparent; -webkit-text-fill-color:transparent;
animation:chromeSweep 6s ease-in-out infinite alternate;
filter:drop-shadow(0 1px 4px rgba(16,20,26,.35)) drop-shadow(0 0 16px rgba(255,174,70,.42)) drop-shadow(0 0 44px rgba(255,146,40,.22));
}
.hero__typewriter[data-color="rainbow"] .twcaret{display:inline-block; background:#F2A33E}
.hero__typewriter[data-color="rainbow"] span{display:inline}
.hero__typewriter[data-color="plain"] span{display:inline}
.hero__typewriter .twchar{
display:inline-block; opacity:0; transform:translateY(.06em);
animation:twchar .35s ease forwards;
}
.hero__typewriter .twcaret{
display:inline-block; width:.55ch; height:1em;
vertical-align:-.10em; background:currentColor;
color:inherit;
margin-left:.06em;
animation:twcursor .9s steps(2,end) infinite;
}
[data-typewriter-root].is-typed{display:none}
[data-typewriter-root].is-restored{display:inline-block}
.hero__typewriter.is-empty::before{
content:"\00a0";
visibility:visible;
}
@keyframes twchar{ to{opacity:1; transform:translateY(0)} }
@keyframes twcursor{ 50%{opacity:0} }
@keyframes chromeSweep{ from{background-position:0% 50%} to{background-position:100% 50%} }
@media (prefers-reduced-motion: reduce){
.hero__typewriter .twchar{animation-duration:.001ms}
.hero__typewriter .twcaret, .hero__typewriter[data-color="rainbow"]{animation:none}
}
/* ---------- the 3D machine ------------------------------------------------ */
.s3{position:relative; width:100%; max-width:520px; margin-inline:auto; text-align:center; --s3depth:150px}
.s3__room{position:relative; perspective:1400px; perspective-origin:50% 42%; padding:14px 0 4px; touch-action:pan-y}
.s3__rig{
position:relative; width:326px; height:570px; margin-inline:auto;
transform-style:preserve-3d; transform:rotateX(-4deg) rotateY(-16deg);
will-change:transform;
}
.s3.is-dragging .s3__rig{cursor:grabbing}
.s3__room{cursor:grab}
.s3.is-dragging .s3__room{cursor:grabbing}
.s3__body{
position:absolute; inset:0; transform-style:preserve-3d;
animation:s3float 7s ease-in-out infinite;
}
@keyframes s3float{0%,100%{translate:0 0}50%{translate:0 -9px}}
/* LED strip frame — muted multicolour band running around the cabinet */
.s3__strip{position:absolute; inset:7px; border-radius:19px; z-index:6; pointer-events:none; transform:translateZ(47px); animation:s3hue 18s linear infinite}
.s3__strip-core,.s3__strip-glow em{
position:absolute; inset:0; border-radius:inherit; padding:3px;
background:repeating-linear-gradient(90deg,
#9E5252 0 34px, #A57C4C 34px 68px, #A19A55 68px 102px, #58905F 102px 136px,
#4F8496 136px 170px, #66709E 170px 204px, #8F6390 204px 238px, #96607E 238px 272px);
background-size:272px 100%;
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite:exclude;
}
.s3__strip-core{filter:saturate(.9) brightness(.95)}
.s3__strip-glow{position:absolute; inset:-9px; border-radius:28px; filter:blur(11px) saturate(1.15); opacity:.8}
.s3__strip-glow em{padding:7px}
@keyframes s3hue{to{filter:hue-rotate(360deg)}}
.no-anim .s3__strip,.no-anim .s3__led{animation:none}
.s3--static .s3__room{cursor:default}
/* box faces — front proud, sides + cap extending back for real depth */
.s3__front{
position:absolute; inset:0; transform:translateZ(46px);
background:
linear-gradient(115deg, rgba(255,255,255,0) 13%, rgba(255,255,255,.15) 25%, rgba(255,255,255,.02) 35%, rgba(255,255,255,0) 43%),
linear-gradient(115deg, rgba(255,255,255,0) 57%, rgba(255,255,255,.06) 65%, rgba(255,255,255,0) 72%),
linear-gradient(165deg, #2B2E34 0%, #14161A 18%, #0A0B0E 52%, #191C21 86%, #07080A 100%);
border:1px solid rgba(255,255,255,.11);
border-radius:26px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(255,255,255,.05),
inset 0 0 60px rgba(0,0,0,.5),
0 44px 90px rgba(0,0,0,.45), 0 12px 26px rgba(0,0,0,.3);
display:flex; flex-direction:column; overflow:hidden; z-index:3;
}
.s3__side{
position:absolute; top:0; bottom:0; width:var(--s3depth);
background:linear-gradient(105deg,#1C1F24 0%, #0B0C0F 45%, #050608 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.13), inset -1px 0 0 rgba(255,255,255,.05);
border-radius:10px;
}
.s3__side--r{left:100%; transform-origin:0 50%; transform:translateZ(46px) rotateY(90deg); border-radius:0 8px 8px 0}
.s3__side--l{right:100%; transform-origin:100% 50%; transform:translateZ(46px) rotateY(-90deg); border-radius:8px 0 0 8px}
.s3__cap{
position:absolute; left:0; right:0; bottom:100%; height:var(--s3depth);
transform-origin:50% 100%; transform:translateZ(46px) rotateX(90deg);
background:
linear-gradient(100deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.11) 48%, rgba(255,255,255,0) 62%),
linear-gradient(90deg,#31343B,#17191E 55%, #0A0B0E);
box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
border-radius:8px 8px 0 0;
}
/* closed back + base — glossy black cabinet */
.s3__back{
position:absolute; inset:0;
transform:translateZ(calc(46px - var(--s3depth))) rotateY(180deg);
background:
linear-gradient(125deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.07) 56%, rgba(255,255,255,0) 67%),
linear-gradient(160deg, #17191E 0%, #0B0C0F 45%, #06070A 100%);
border:1px solid rgba(255,255,255,.07);
border-radius:26px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 60px rgba(0,0,0,.65);
}
.s3__back-vent{
position:absolute; left:9%; top:7%; width:34%; height:24%;
border-radius:8px;
background:repeating-linear-gradient(180deg, rgba(4,5,7,.9) 0 3px, rgba(34,37,43,.75) 3px 6px);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), 0 1px 0 rgba(255,255,255,.06);
}
.s3__back-plate{
position:absolute; left:11%; bottom:13%; width:26%; height:11%;
border-radius:4px; background:linear-gradient(180deg,#C9CDD3,#9DA3AB);
opacity:.75; box-shadow:0 1px 3px rgba(0,0,0,.6);
}
.s3__cord{position:absolute; right:16px; bottom:-18px; pointer-events:none}
.s3__bottom{
position:absolute; left:0; right:0; top:100%; height:var(--s3depth);
transform-origin:50% 0; transform:translateZ(46px) rotateX(-90deg);
background:linear-gradient(180deg,#0A0B0E,#000);
box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
border-radius:2px 2px 8px 8px;
}
/* marquee */
.s3__marquee{
flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:8px;
margin:14px 14px 0; padding:10px 12px; border-radius:14px;
background:linear-gradient(180deg,#0B0B0D,#16171B);
box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -8px 18px rgba(0,0,0,.55);
}
.s3__marquee span{
font-family:var(--font-d); font-size:13px; font-weight:800; letter-spacing:.34em;
text-transform:uppercase; color:#EDEFF2;
text-shadow:0 0 14px rgba(154,160,166,.8);
}
.s3__marquee em{
font-style:normal; font-size:9px; font-weight:800; letter-spacing:.2em;
color:#7DE0A8; text-shadow:0 0 10px rgba(125,224,168,.7);
}
/* glass + interior */
.s3__glass{
position:relative; flex:1 1 auto; min-height:0; margin:12px 14px;
border-radius:16px; overflow:hidden;
background:linear-gradient(170deg,#101318 0%, #0A0C10 55%, #0E1116 100%);
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.10),
inset 0 14px 34px rgba(0,0,0,.65),
inset 0 -10px 26px rgba(0,0,0,.5);
}
.s3:hover .s3__glass{overflow:visible}
.s3__interior{position:absolute; inset:0; padding:14px 12px 12px; display:flex; flex-direction:column; gap:10px}
.s3__led{
flex:0 0 auto; height:5px; border-radius:99px;
background:repeating-linear-gradient(90deg,
#9E5252 0 34px, #A57C4C 34px 68px, #A19A55 68px 102px, #58905F 102px 136px,
#4F8496 136px 170px, #66709E 170px 204px, #8F6390 204px 238px, #96607E 238px 272px);
background-size:272px 100%;
box-shadow:0 0 10px rgba(120,160,200,.28), 0 0 20px rgba(190,130,160,.16);
animation:s3hue 18s linear infinite;
}
@keyframes s3led{to{background-position:238px 0}}
.no-anim .s3__led{animation:none}
/* Machine interior: 3 columns × 4 rows = 12 slots. Rows are 1fr, so the
cabinet keeps exactly the same size and design - only the shelf layout and
the slot size change. */
.s3__slots{flex:1 1 auto; min-height:0; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:9px}
.s3--mini .s3__slots,
.s3--wall .s3__slots{grid-template-columns:repeat(3,1fr)}
.s3__slot{
position:relative; display:flex; flex-direction:column; min-height:0; padding:0;
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
border-radius:10px; overflow:hidden; cursor:pointer;
transition:transform .25s var(--ease), border-color .2s, box-shadow .25s, background .2s;
}
.s3__slot:hover, .s3__slot:focus-visible{
transform:translateY(-3px) scale(2);
border-color:rgba(154,160,166,.65);
background:rgba(154,160,166,.14);
box-shadow:0 8px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(154,160,166,.35);
overflow:visible; z-index:10;
}
.s3__slot.is-vending{animation:s3slotpulse .8s ease}
@keyframes s3slotpulse{0%{transform:translateY(-3px)}30%{transform:translateY(2px) scale(.97)}100%{transform:translateY(-3px)}}
.s3__slot-pic{position:relative; flex:1 1 auto; min-height:0; overflow:hidden; display:block}
/* Product photos are cut-outs (transparent background), so the whole product
must stay visible and the shelf shows through: contain, never cover.
No filter here on purpose - the scene can hold 60 slots and this runs on
the showroom's hot path. */
.s3__slot-pic img{
width:100%; height:100%; object-fit:contain; padding:3px; box-sizing:border-box;
transition:transform .45s var(--ease);
}
.s3__slot:hover .s3__slot-pic,.machine:hover .s3__slot-pic{overflow:visible; z-index:10}
.s3__slot:hover .s3__slot-pic img,.machine:hover .s3__slot-pic img{
cursor:zoom-in;
}
/* The decorative spiral coil that used to be drawn across each slot was
removed: with transparent cut-outs it cut through the product. */
.s3__slot-tag{
flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:3px;
padding:3px 5px; background:linear-gradient(180deg,#FDFDFE,#ECEEF1);
border-top:1px solid rgba(var(--shadow-rgb),.16); line-height:1.1;
}
[data-theme="dark"] .s3__slot-tag{background:linear-gradient(180deg,#1B1D22,#121317); border-top-color:rgba(255,255,255,.12)}
.s3__slot-tag b{font-family:var(--font-d); font-size:8.5px; font-weight:800; letter-spacing:.05em; color:var(--muted); text-transform:uppercase}
.s3__slot-tag em{font-style:normal; font-family:var(--font-d); font-size:10.5px; font-weight:800; color:var(--ink)}
[data-theme="dark"] .s3__slot-tag em{color:#F4F4F5}
/* glass overlays */
.s3__sheen{
position:absolute; inset:0; pointer-events:none; z-index:4;
background:linear-gradient(112deg,
rgba(255,255,255,0) 28%, rgba(255,255,255,.16) 40%, rgba(255,255,255,.03) 47%,
rgba(255,255,255,0) 58%,
rgba(255,255,255,0) 78%, rgba(255,255,255,.10) 86%, rgba(255,255,255,0) 94%);
}
.s3__handle{
position:absolute; right:7px; top:50%; translate:0 -50%; width:7px; height:86px;
border-radius:99px; z-index:5;
background:linear-gradient(90deg,#8A9099,#D6D9DE 45%, #9AA0A6);
box-shadow:0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.8);
}
/* keypad panel */
.s3__panel{
flex:0 0 auto; display:flex; align-items:center; gap:12px;
margin:0 14px; padding:11px 13px; border-radius:14px;
background:linear-gradient(180deg,#26272C,#121317);
box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -8px 16px rgba(0,0,0,.5);
}
.s3__screen{
flex:0 0 auto; min-width:86px; padding:7px 9px; border-radius:8px;
background:#04120B; color:#4ADE80;
font-family:var(--font-d); font-size:10.5px; font-weight:800; letter-spacing:.14em;
text-align:center; text-transform:uppercase;
box-shadow:inset 0 2px 6px rgba(0,0,0,.8), 0 0 10px rgba(74,222,128,.14);
}
.s3__keys{flex:1 1 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:5px; max-width:110px}
.s3__keys i{
height:11px; border-radius:3px;
background:linear-gradient(180deg,#3A3C42,#202227);
box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.6);
}
.s3__pay{
flex:0 0 auto; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
background:rgba(255,255,255,.07); color:#9AA0A6; margin-left:auto;
}
.s3__pay svg{width:19px; height:19px}
/* dispense tray */
.s3__tray{
position:relative; flex:0 0 auto; margin:12px 14px 12px; height:52px; border-radius:13px;
background:linear-gradient(180deg,#0A0B0E,#14151A);
box-shadow:inset 0 8px 18px rgba(0,0,0,.75), inset 0 -2px 5px rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.5);
display:grid; place-items:center; overflow:hidden;
}
.s3__flap{
display:grid; place-items:center; width:82%; height:30px; border-radius:8px;
background:linear-gradient(180deg,#2B2D33,#17181D);
color:rgba(255,255,255,.5);
font-family:var(--font-d); font-size:9px; font-weight:800; letter-spacing:.4em; text-transform:uppercase;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 4px 8px rgba(0,0,0,.5);
transition:transform .3s var(--ease);
}
.s3__tray.is-vending .s3__flap{animation:s3flap .85s var(--ease)}
@keyframes s3flap{
0%{transform:rotateX(0)}
35%{transform:perspective(240px) rotateX(48deg)}
100%{transform:perspective(240px) rotateX(0)}
}
.s3__brandbar{
flex:0 0 auto; text-align:center; padding:0 0 11px;
font-family:var(--font-d); font-size:8.5px; font-weight:800; letter-spacing:.3em;
text-transform:uppercase; color:rgba(255,255,255,.34);
}
/* stage atmosphere */
.s3__shadow{
position:absolute; left:50%; bottom:-26px; translate:-50% 0;
width:330px; height:44px; border-radius:50%;
background:radial-gradient(closest-side, rgba(var(--shadow-rgb),.34), rgba(var(--shadow-rgb),0) 74%);
filter:blur(6px);
}
.s3__hint{
display:inline-flex; align-items:center; gap:8px; margin-top:34px;
padding:9px 16px; border-radius:99px;
background:var(--panel); border:1px solid var(--line-soft);
font-size:12.5px; font-weight:600; color:var(--muted);
box-shadow:var(--sh-s);
}
.s3__fly{will-change:transform,opacity}
/* ---------- shop grid ----------------------------------------------------- */
.shop__filters{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px}
.shop__filters .chip span{opacity:.6; font-weight:700; margin-left:2px}
.shop__grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px}
.sg{
position:relative; background:var(--panel); border:1px solid var(--line-soft);
border-radius:var(--r-l); overflow:hidden; display:flex; flex-direction:column;
transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .2s;
}
.sg:hover{transform:translateY(-7px); box-shadow:var(--sh-l); border-color:var(--line)}
.sg__media{
position:relative; display:block; width:100%; aspect-ratio:1/.92; padding:0; border:0;
background:var(--wall-2); overflow:hidden; cursor:pointer;
}
.sg__media img{width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease)}
.sg:hover .sg__media img{transform:scale(1.07)}
.sg__media::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.5));
opacity:0; transition:opacity .3s;
}
.sg:hover .sg__media::after{opacity:1}
.sg__machine{
position:absolute; left:10px; bottom:10px; z-index:2;
padding:5px 11px; border-radius:99px; font-size:10.5px; font-weight:700;
letter-spacing:.05em; text-transform:uppercase; color:#fff;
background:rgba(10,10,11,.62); backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.18);
opacity:0; transform:translateY(6px); transition:all .3s var(--ease);
}
.sg:hover .sg__machine{opacity:1; transform:none}
.sg__body{display:flex; flex-direction:column; gap:10px; padding:16px 16px 17px; flex:1}
.sg__name{font-size:14.5px; font-weight:700; line-height:1.35; letter-spacing:-.01em}
.sg__row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto}
.sg__price{font-family:var(--font-d); font-size:18px; font-weight:800; letter-spacing:-.02em}
.sg__add{
width:40px; height:40px; border-radius:12px; border:1px solid #B8BABE;
background:linear-gradient(145deg,#9AA0A6 0%,#C0C2C5 25%,#8A8D93 50%,#B8BABE 75%,#9AA0A6 100%);
color:#0A0A0B; font-size:22px; font-weight:700; line-height:1;
display:grid; place-items:center;
transition:transform .25s var(--ease), box-shadow .25s;
}
.sg__add:hover{transform:scale(1.09); box-shadow:0 8px 20px rgba(154,160,166,.42)}
.sg__add:active{transform:scale(.94)}
/* ---------- merchant value ------------------------------------------------ */
.mv__layout{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:64px; align-items:center}
.mv__copy .lead{margin-top:16px}
.mv__features{display:grid; gap:16px; margin:30px 0 32px}
.mv__feature{display:flex; gap:15px; align-items:flex-start}
.mv__ico{
flex:0 0 auto; width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
font-size:21px; background:var(--brand-soft); border:1px solid var(--line-soft);
}
.mv__feature h4{font-size:15.5px; font-weight:800; margin-bottom:3px}
.mv__feature p{font-size:13.5px; color:var(--muted); line-height:1.55}
.mv__card{
background:linear-gradient(165deg, var(--panel), var(--panel-2));
border:1px solid var(--line); border-radius:var(--r-xl);
padding:30px; box-shadow:var(--sh-l); position:relative; overflow:hidden;
}
.mv__card::before{
content:""; position:absolute; inset:0 0 auto; height:3px;
background:linear-gradient(90deg,#9AA0A6,#E5E7EB 45%,#8A8D93);
}
.mv__card-head{display:flex; align-items:center; gap:14px; margin-bottom:24px}
.mv__card-logo{
flex:0 0 auto; width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
background:linear-gradient(145deg,#9AA0A6,#B8BABE); color:#0A0A0B;
font-family:var(--font-d); font-size:24px; font-weight:800;
}
.mv__card-head h3{font-size:17px}
.mv__card-head p{font-size:12.5px; color:var(--muted); overflow-wrap:anywhere}
.mv__card-head .badge{margin-left:auto}
.mv__stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:20px}
.mv__stat{background:var(--wall-2); border:1px solid var(--line-soft); border-radius:var(--r-m); padding:14px 10px; text-align:center; min-width:0}
.mv__stat b{display:block; font-family:var(--font-d); font-size:24px; font-weight:800; letter-spacing:-.02em}
.mv__stat span{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; font-weight:700; overflow-wrap:anywhere}
.mv__chart{
display:flex; align-items:flex-end; gap:7px; height:118px;
background:var(--wall-2); border:1px solid var(--line-soft); border-radius:var(--r-m);
padding:14px 14px 0; overflow:hidden;
}
.mv__chart i{
flex:1; border-radius:5px 5px 0 0; min-height:8px;
background:linear-gradient(180deg,#C0C2C5,#9AA0A6 60%, #7E838A);
animation:mvgrow .9s var(--ease) both;
}
.mv__chart i:nth-child(2n){animation-delay:.08s}
.mv__chart i:nth-child(3n){animation-delay:.16s}
@keyframes mvgrow{from{height:0 !important; opacity:.4}}
.mv__ticks{list-style:none; display:grid; gap:9px; margin-top:20px; padding:0}
.mv__ticks li{display:flex; gap:10px; align-items:center; font-size:13.5px; color:var(--ink-2)}
.mv__ticks span{
flex:0 0 auto; width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
font-size:11px; font-weight:800; color:#0A0A0B;
background:linear-gradient(145deg,#9AA0A6,#C0C2C5);
}
/* ---------- commerce chrome ---------------------------------------------- */
.vfy-veil{
position:fixed; inset:0; z-index:1150;
background:rgba(8,9,11,.52); backdrop-filter:blur(4px);
opacity:0; transition:opacity .35s var(--ease);
}
.vfy-veil.is-on{opacity:1}
.iconbtn{
width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
background:transparent; border:1px solid var(--line); color:var(--ink-2);
transition:background .2s, transform .2s;
}
.iconbtn:hover{background:var(--wall-2); transform:rotate(90deg)}
.btn.is-busy{opacity:.75; pointer-events:none}
.cart-fab, .nav__cart{
position:relative; display:grid; place-items:center;
border:1px solid var(--line); background:var(--panel); color:var(--ink);
transition:transform .3s var(--ease), box-shadow .3s;
}
.cart-fab{
position:fixed; right:26px; bottom:26px; z-index:1100;
width:60px; height:60px; border-radius:50%;
box-shadow:var(--sh-l);
}
.cart-fab svg{width:25px; height:25px}
.cart-fab:hover{transform:translateY(-4px) scale(1.04)}
.nav__cart{
width:42px; height:42px; border-radius:13px; flex:0 0 auto;
}
.nav__cart svg{width:20px; height:20px}
.nav__cart:hover{transform:translateY(-2px)}
.cart-fab__n, .nav__cart-n{
position:absolute; top:-6px; right:-6px; min-width:21px; height:21px; padding:0 5px;
border-radius:99px; display:grid; place-items:center;
background:linear-gradient(145deg,#9AA0A6,#C0C2C5); color:#0A0A0B;
font-family:var(--font-d); font-size:11px; font-weight:800;
box-shadow:0 3px 8px rgba(0,0,0,.25);
transition:transform .3s var(--ease);
}
.cart-fab__n.is-zero, .nav__cart-n.is-zero{background:var(--wall-2); color:var(--muted); border:1px solid var(--line)}
.is-bump{animation:cartbump .45s var(--ease)}
@keyframes cartbump{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
/* ---------- cart drawer --------------------------------------------------- */
.cartd{
position:fixed; top:0; right:0; bottom:0; z-index:1160;
width:min(440px, 100%); display:flex; flex-direction:column;
background:var(--panel); border-left:1px solid var(--line);
box-shadow:-30px 0 70px rgba(var(--shadow-rgb),.24);
transform:translateX(103%); transition:transform .45s var(--ease);
visibility:hidden;
}
.cartd.is-open{transform:none; visibility:visible}
.cartd__head{
display:flex; align-items:center; justify-content:space-between;
padding:22px 24px; border-bottom:1px solid var(--line-soft);
}
.cartd__head h3{font-size:20px; display:flex; align-items:center; gap:10px}
.cartd__n{
min-width:26px; height:26px; padding:0 7px; border-radius:99px; display:grid; place-items:center;
background:var(--brand-soft); color:var(--ink-2); font-size:13px; font-weight:800;
}
.cartd__items{flex:1 1 auto; overflow-y:auto; padding:18px 24px}
.cartd__machine{
display:flex; align-items:center; gap:9px;
font-family:var(--font-d); font-size:11px; font-weight:800; letter-spacing:.12em;
text-transform:uppercase; color:var(--muted);
margin:14px 0 10px;
}
.cartd__machine:first-child{margin-top:0}
.cartd__machine-dot{
width:8px; height:8px; border-radius:50%;
background:linear-gradient(145deg,#9AA0A6,#C0C2C5);
box-shadow:0 0 0 3px var(--brand-soft);
}
.cartd__item{
display:flex; gap:13px; align-items:center;
padding:12px; margin-bottom:10px;
background:var(--panel-2); border:1px solid var(--line-soft); border-radius:var(--r-m);
}
.cartd__item-img{
flex:0 0 auto; width:62px; height:62px; border-radius:10px; overflow:hidden;
background:var(--wall-2); border:1px solid var(--line-soft);
}
.cartd__item-img img{width:100%; height:100%; object-fit:cover}
.cartd__item-info{flex:1 1 auto; min-width:0; display:grid; gap:5px}
.cartd__item-name{font-size:13.5px; font-weight:700; line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.cartd__item-price{font-family:var(--font-d); font-size:14px; font-weight:800; color:var(--ink-2)}
.cartd__qty{
display:inline-flex; align-items:center; gap:2px;
background:var(--wall-0); border:1px solid var(--line); border-radius:99px; padding:2px;
width:max-content;
}
.cartd__qty button{
width:26px; height:26px; border-radius:50%; border:0; background:transparent;
font-size:15px; font-weight:700; color:var(--ink-2); line-height:1;
display:grid; place-items:center;
}
.cartd__qty button:hover{background:var(--brand-soft)}
.cartd__qty b{min-width:24px; text-align:center; font-family:var(--font-d); font-size:13px; font-weight:800}
.cartd__qty--lg button{width:34px; height:34px; font-size:17px}
.cartd__qty--lg b{min-width:32px; font-size:15px}
.cartd__rm{
flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:0;
background:transparent; color:var(--muted); display:grid; place-items:center;
transition:background .2s, color .2s;
}
.cartd__rm:hover{background:rgba(239,68,68,.12); color:#E11D48}
.cartd__empty{
height:100%; min-height:260px; display:flex; flex-direction:column;
align-items:center; justify-content:center; text-align:center; gap:8px; color:var(--muted);
}
.cartd__empty p{font-family:var(--font-d); font-size:17px; font-weight:800; color:var(--ink)}
.cartd__empty span{font-size:13.5px}
.cartd__empty b{color:var(--ink)}
.cartd__foot{padding:20px 24px 24px; border-top:1px solid var(--line-soft); background:var(--panel-2)}
.cartd__sum{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.cartd__sum span{font-size:14px; color:var(--muted); font-weight:600}
.cartd__sum b{font-family:var(--font-d); font-size:26px; font-weight:800; letter-spacing:-.02em}
.cartd__note{font-size:11.5px; color:var(--muted); margin-bottom:16px}
.cartd__go{width:100%}
.cartd.is-open ~ .cart-fab, .is-open ~ .cart-fab{display:none}
/* ---------- quick view ---------------------------------------------------- */
.qv, .ck{
position:fixed; inset:0; z-index:1170;
display:grid; place-items:center; padding:20px;
opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.qv.is-open, .ck.is-open{opacity:1; visibility:visible}
.qv__panel{
position:relative; width:min(860px, 100%); max-height:min(92vh, 640px);
background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl);
box-shadow:0 40px 100px rgba(var(--shadow-rgb),.4);
overflow:auto; display:grid; grid-template-columns:1fr 1fr;
transform:translateY(26px) scale(.97); transition:transform .35s var(--ease);
}
.qv.is-open .qv__panel{transform:none}
.qv__x{position:absolute; top:16px; right:16px; z-index:5; background:var(--panel)}
.qv__media{position:relative; background:var(--wall-2); min-height:300px}
.qv__media img{width:100%; height:100%; object-fit:cover}
.qv__machine{
position:absolute; left:16px; bottom:16px;
padding:7px 14px; border-radius:99px; font-size:11px; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; color:#fff;
background:rgba(10,10,11,.66); backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.2);
}
.qv__info{padding:34px 32px; display:flex; flex-direction:column; gap:14px}
.qv__info h3{font-size:27px; letter-spacing:-.025em}
.qv__price{font-family:var(--font-d); font-size:32px; font-weight:800; letter-spacing:-.03em}
.qv__ticks{list-style:none; display:grid; gap:8px; margin:2px 0 4px; padding:0}
.qv__ticks li{display:flex; gap:9px; align-items:center; font-size:13.5px; color:var(--ink-2)}
.qv__ticks span{
width:19px; height:19px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
font-size:10.5px; font-weight:800; color:#0A0A0B;
background:linear-gradient(145deg,#9AA0A6,#C0C2C5);
}
.qv__row{display:flex; gap:12px; align-items:center; margin-top:auto}
.qv__row .btn{flex:1}
.qv__info > .btn--ghost{width:100%; justify-content:center}
.detail__buy{display:flex; gap:12px; flex-wrap:wrap}
.detail__buy .btn{flex:1; min-width:170px; justify-content:center}
/* ---------- checkout ------------------------------------------------------ */
.ck{z-index:1180}
.ck__panel{
width:min(600px, 100%); max-height:94vh; overflow:auto;
background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl);
box-shadow:0 40px 110px rgba(var(--shadow-rgb),.45);
display:flex; flex-direction:column;
transform:translateY(26px) scale(.97); transition:transform .35s var(--ease);
}
.ck.is-open .ck__panel{transform:none}
.ck__head{
display:flex; align-items:center; justify-content:space-between; gap:14px;
padding:22px 26px 0;
}
.ck__steps{display:flex; gap:6px; flex-wrap:wrap}
.ck__steps span{
padding:8px 14px; border-radius:99px; font-size:12.5px; font-weight:700;
color:var(--muted); background:var(--wall-2); border:1px solid var(--line-soft);
transition:all .3s var(--ease);
}
.ck__steps span.is-on{
background:linear-gradient(145deg,#9AA0A6,#C0C2C5); color:#0A0A0B;
border-color:#B8BABE; box-shadow:0 4px 14px rgba(154,160,166,.3);
}
.ck__body{padding:22px 26px 6px; display:grid; gap:18px}
.ck__msg{
padding:12px 15px; border-radius:11px; font-size:13.5px; font-weight:600;
background:rgba(225,29,72,.09); border:1px solid rgba(225,29,72,.3); color:#BE123C;
}
[data-theme="dark"] .ck__msg{color:#FB7185}
.ck__grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.ck__grid .field[style*="1/-1"]{grid-column:1/-1}
.ck__opts{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.ck__opts--pay{grid-template-columns:1fr}
.ck__opt{
display:flex; gap:12px; align-items:flex-start; cursor:pointer;
padding:14px 16px; border-radius:var(--r-m);
background:var(--panel-2); border:1.5px solid var(--line-soft);
transition:border-color .2s, background .2s, box-shadow .2s;
}
.ck__opt:hover{border-color:var(--line)}
.ck__opt.is-on{
border-color:#9AA0A6; background:var(--brand-soft);
box-shadow:0 0 0 3px rgba(154,160,166,.16);
}
.ck__opt input{accent-color:#9AA0A6; margin-top:3px}
.ck__opt b{display:block; font-size:14.5px; font-weight:800}
.ck__opt em{display:block; font-style:normal; font-size:12.5px; color:var(--muted); margin-top:2px}
.ck__group{
background:var(--panel-2); border:1px solid var(--line-soft);
border-radius:var(--r-m); padding:14px 16px; margin-bottom:10px;
}
.ck__group h4{
font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
color:var(--muted); margin-bottom:9px;
}
.ck__group ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.ck__group li{display:flex; justify-content:space-between; gap:14px; font-size:14px}
.ck__group li b{font-family:var(--font-d); font-weight:800}
.ck__meta{display:grid; gap:9px; padding:15px 16px; background:var(--wall-2); border-radius:var(--r-m); border:1px solid var(--line-soft)}
.ck__meta div{display:flex; justify-content:space-between; gap:16px; font-size:13.5px}
.ck__meta span{color:var(--muted)}
.ck__meta b{text-align:right; font-weight:700}
.ck__total{
display:flex; align-items:center; justify-content:space-between;
padding:16px 4px 2px; border-top:1px dashed var(--line);
}
.ck__total span{font-size:15px; font-weight:700; color:var(--muted)}
.ck__total b{font-family:var(--font-d); font-size:30px; font-weight:800; letter-spacing:-.03em}
.ck__foot{
display:flex; gap:12px; justify-content:flex-end; align-items:center;
padding:16px 26px 24px; border-top:1px solid var(--line-soft); margin-top:8px;
}
.ck__foot .btn--ghost{margin-right:auto}
.ck__done{text-align:center; padding:14px 6px 10px; display:grid; gap:10px; justify-items:center}
.ck__done h3{font-size:26px}
.ck__tick{color:#16A34A; animation:tickpop .6s var(--ease)}
.ck__tick svg path{stroke-dasharray:48; stroke-dashoffset:48; animation:tickdraw .7s .25s var(--ease) forwards}
@keyframes tickpop{0%{transform:scale(.5); opacity:0}100%{transform:scale(1); opacity:1}}
@keyframes tickdraw{to{stroke-dashoffset:0}}
.ck__refs{font-size:14.5px; color:var(--ink-2)}
.ck__refs b{font-family:var(--font-d); font-weight:800; color:var(--ink)}
/* ---------- responsive ---------------------------------------------------- */
@media (max-width:1180px){
.shop__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1024px){
.hero3d__layout{grid-template-columns:1fr; gap:44px; text-align:center}
.hero3d__copy .lead{margin-inline:auto}
.hero3d__cta{justify-content:center}
.hero3d__chips{justify-content:center}
.mv__layout{grid-template-columns:1fr; gap:44px}
.qv__panel{grid-template-columns:1fr; max-height:94vh}
.qv__media{min-height:230px; max-height:290px}
}
@media (max-width:820px){
.shop__grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.ck__grid, .ck__opts{grid-template-columns:1fr}
.s3{--s3depth:120px}
.s3__rig{width:284px; height:506px}
}
@media (max-width:560px){
.hero3d{padding:52px 0 64px}
.cart-fab{right:16px; bottom:16px; width:54px; height:54px}
.s3{--s3depth:96px}
.s3__rig{width:252px; height:455px}
.s3__marquee span{font-size:11px; letter-spacing:.26em}
.s3__screen{min-width:70px; font-size:9px}
.qv__info{padding:24px 20px}
.ck__head, .ck__body, .ck__foot{padding-inline:18px}
.detail__buy .btn{min-width:0; width:100%}
}
@media (prefers-reduced-motion: reduce){
.s3__body{animation:none}
.s3__led{animation:none}
.s3__strip{animation:none}
.mv__chart i{animation:none}
.s3__rig{transition:none}
}
/* ---------- commerce fixes ----------------------------------------------- */
.ck [hidden], [data-veil][hidden]{display:none !important}
section[data-ckpanel]{display:grid; gap:18px}
.ck__done{gap:10px}
.qv__panel > [data-qv-body]{display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-width:0}
.qv__media{min-height:340px}
@media (max-width:1024px){
.qv__panel > [data-qv-body]{grid-template-columns:1fr}
}
.qv__panel{display:block; grid-template-columns:none}
.qv__media{min-height:340px; height:100%}
/* ============================================================================
27. DIGITAL DARK DEFAULT · LUXURY SPOTLIGHT · MACHINE LANDING
========================================================================== */
/* ---------- dark page: grid + top glow (digital showroom) ----------------- */
[data-theme="dark"]{
--wall-0:rgba(8,9,12,.55);
--wall-1:rgba(10,11,15,.72);
--wall-2:#14151A;
--recess:#15161B;
}
[data-theme="dark"] body{
background-color:#08090C;
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
radial-gradient(1000px 460px at 50% -150px, rgba(154,160,166,.15), transparent 65%);
background-size:64px 64px, 64px 64px, 100% 100%;
}
[data-theme="dark"] .mobile-menu{backdrop-filter:blur(16px)}
[data-theme="dark"] .nav{backdrop-filter:saturate(1.3) blur(16px)}
/* ---------- luxury spotlight: rays from top onto the machine -------------- */
.s3__hint{position:relative; z-index:2}
/* ---------- bigger machine for machine landing pages ---------------------- */
.s3--xl{max-width:600px}
.s3--xl .s3__rig{width:388px; height:710px}
.s3--xl .s3__room{padding-top:24px}
@media (max-width:600px){
.s3--xl .s3__rig{width:min(340px, 84vw); height:min(624px, 156vw)}
.s3--xl{max-width:100%}
}
/* ---------- mini 3D machine cards (store wall) ---------------------------- */
.s3--mini{cursor:pointer; --s3depth:96px}
.s3--mini .s3__shadow{width:min(190px, 86%)}
.s3--mini .s3__hint{display:none}
.s3--mini .s3__cord{display:none}
.s3--mini .s3__rig{width:min(214px, calc(100% - 72px)); height:396px}
/* Variant of the mini 3D machine used inside the Interactive store
wall: bigger than the hero-grid mini so the LED strip and the
3×3 product grid both register clearly. */
.s3--wall{--s3depth:120px}
.s3--wall .s3__rig{width:min(282px, 100%); height:516px}
.s3--wall .s3__shadow{width:min(240px, 84%)}
.s3--wall .s3__marquee span{font-size:11px}
.s3--wall .s3__marquee em{font-size:9px}
.s3--wall .s3__back-plate{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.4))}
.s3--wall .s3__strip-glow{filter:blur(14px) saturate(1.25); opacity:.95}
.s3--wall .s3__strip-glow em{padding:9px}
.s3--wall .s3__strip-core{filter:saturate(1.05) brightness(1.05)}
.s3--mini .s3__led{height:4px}
.s3--mini .s3__slots{gap:6px; grid-template-columns:repeat(3,1fr)}
.s3--mini .s3__slot-tag{padding:2px 4px; font-size:8.5px}
.s3--mini .s3__slot-tag em{font-size:8.5px}
.s3--mini .s3__panel{margin:0 9px; padding:8px 9px; border-radius:10px}
.s3--mini .s3__tray{margin:8px 9px; height:38px; border-radius:10px}
.s3--mini .s3__flap{height:22px; font-size:8px}
.s3--mini .s3__brandbar{padding:0 0 7px; font-size:7px; letter-spacing:.24em}
.niche--3d{
padding:26px 18px 18px; border-radius:16px;
background:linear-gradient(180deg, var(--wall-1), var(--wall-0));
border:1px solid var(--line-soft); box-shadow:var(--sh-s);
}
.niche--3d::after{display:none}
.niche--3d:hover{
border-color:color-mix(in srgb, var(--accent, #9AA0A6) 55%, transparent);
box-shadow:0 18px 44px rgba(0,0,0,.34);
}
[data-theme="light"] .niche--3d:hover{box-shadow:0 18px 44px rgba(var(--shadow-rgb),.22)}
.mini3d__info{text-align:center; margin-top:20px}
.mini3d__info h4{font-size:16px; font-weight:800; letter-spacing:-.01em}
.mini3d__info p{font-size:12.5px; color:var(--muted); margin:5px 0 13px}
/* Slide a card underneath the 3D machine so the Explore button is
reliably visible on every card in the Interactive store wall.
Slot grid uses 3 rows × 3 cols = 9 so each card stays compact. */
.wall-grid .niche--3d{
display:flex; flex-direction:column; align-items:stretch;
padding:18px 14px 14px; gap:0;
width:100%;
min-height:480px;
}
.wall-grid .mini3d__info{margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft)}
/* Wall cards are static (no rotation), so their stage must not
restrict touch panning: the ancestor chain would otherwise
intersect to "none" and kill both the page's vertical scroll and
the carousel's horizontal swipe over the machine. */
.wall-grid .s3__room{touch-action:auto}
/* ---------- machine landing hero (mhero) ---------------------------------- */
.mhero{position:relative; overflow:hidden; padding:62px 0 54px}
.mhero::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(54% 46% at 72% 42%, color-mix(in srgb, var(--stage-accent,#9AA0A6) 17%, transparent), transparent 70%),
radial-gradient(120% 66% at 50% -8%, rgba(255,255,255,.05), transparent 60%);
}
.mhero__grid{
position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
gap:54px; align-items:center;
}
.mhero__copy .eyebrow{margin-bottom:16px}
.mhero__copy h1{
font-family:var(--font-d); font-size:clamp(34px,4.4vw,54px); font-weight:800;
line-height:1.04; letter-spacing:-.02em; margin:0;
}
.mhero__tag{
font-family:var(--font-d); font-weight:700; font-size:19px; line-height:1.45;
color:var(--ink); margin:16px 0 0;
}
.mhero .lead{margin-top:14px; max-width:540px}
.mhero__feat{list-style:none; display:grid; gap:12px; margin:26px 0 0; padding:0}
.mhero__feat li{display:flex; align-items:center; gap:12px; font-size:15.5px; font-weight:600; color:var(--ink-2)}
/* Hero background banner media */
.mhero__bg{
position:absolute; inset:0; overflow:hidden; z-index:0;
pointer-events:none;
}
.mhero__bgimg,
.mhero__bgvideo{
width:100%; height:100%; object-fit:cover; object-position:center top;
filter:saturate(1.08);
}
.mhero__bgscrim{
position:absolute; inset:0;
background:radial-gradient(140% 90% at 30% 0%, rgba(8,8,10,0.14) 0%, rgba(8,8,10,0.62) 70%, rgba(8,8,10,0.92) 100%);
/* Overlay opacity controlled by --mhero-bg-overlay (0-1) */
background:linear-gradient(180deg, rgba(8,8,10, calc(0.38 * var(--mhero-bg-overlay, 0.5))) 0%, rgba(8,8,10, calc(0.78 * var(--mhero-bg-overlay, 0.5))) 68%, rgba(8,8,10, calc(0.98 * var(--mhero-bg-overlay, 0.5))) 100%);
}
.mhero__bg + .mhero__grid{z-index:1; position:relative}
.mhero__bg::after{
content:""; position:absolute; inset:0;
background:radial-gradient(70% 48% at 78% 40%, color-mix(in srgb, var(--stage-accent,#9AA0A6) 16%, transparent), transparent 72%);
}
.mhero__feat i{
flex:none; width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
background:var(--brand-soft); color:var(--ink); border:1px solid rgba(154,160,166,.4);
}
.mhero__cta{margin-top:30px}
.mhero__meta{
display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:28px;
font-size:13.5px; color:var(--muted);
}
.mhero__meta b{color:var(--ink-2); font-weight:700}
.mhero__dot{
width:9px; height:9px; border-radius:50%;
box-shadow:0 0 0 4px var(--brand-soft), 0 0 16px var(--stage-accent, var(--brand));
}
.mhero__sep{width:1px; height:14px; background:var(--line)}
.mhero__stage{position:relative; display:flex; justify-content:center; min-width:0}
.s3-halo{
position:absolute; left:50%; top:46%; translate:-50% -50%;
width:min(560px, 98%); aspect-ratio:1; pointer-events:none;
background:radial-gradient(circle, color-mix(in srgb, var(--stage-accent,#9AA0A6) 20%, transparent) 0%, transparent 62%);
}
@media (max-width:1024px){
.mhero__grid{grid-template-columns:1fr; gap:44px}
.mhero__copy{text-align:center}
.mhero .lead{margin-inline:auto}
.mhero__cta{justify-content:center}
.mhero__feat li{justify-content:center}
.mhero__meta{justify-content:center}
.mhero{padding-top:48px}
}
@media (max-width:460px){
.brand{gap:8px}
.brand__mark{width:32px; height:32px; border-radius:9px}
.brand__word{height:20px}
.nav__in{gap:10px}
.nav__right{gap:8px}
}
/* ---------- customer account ---------------------------------------------- */
.acct__tabs{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:18px 0 22px}
[data-wish][aria-pressed="true"]{color:#F43F5E; border-color:#F43F5E; background:rgba(244,63,94,.08)}
[data-wish]{display:inline-flex;align-items:center;justify-content:center;gap:6px}
/* ---------- 27. Walk-in store room (CSS-3D showroom) --------------------- */
@property --focus-x{syntax:"";inherits:true;initial-value:0px}
@property --focus-y{syntax:"";inherits:true;initial-value:0px}
@property --focus-z{syntax:"";inherits:true;initial-value:0px}
@property --focus-ry{syntax:"";inherits:true;initial-value:0deg}
.storeroom{position:relative; width:100vw; margin-left:calc(50% - 50vw)}
.storeroom__scene{
position:relative; overflow:hidden;
perspective:940px; perspective-origin:50% 44%;
background:#07080B;
padding:clamp(64px,9vw,120px) 0 clamp(150px,22vw,300px);
transition:perspective .6s var(--ease);
}
.storeroom__room{
--depth:640px; --walk:-210px; --rx:0deg; --ry:0deg;
--focus-x:0px; --focus-y:0px; --focus-z:0px; --focus-ry:0deg;
--cell-min:130px; --cols:8;
position:relative; width:100%; transform-style:preserve-3d;
/* room's own box lives AT the back-wall plane so it never occludes the machines behind it
(Chrome hit-tests 3D front-to-back by z) */
transform:
rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--focus-ry)))
translateZ(calc(var(--depth) * -1 + var(--walk) + var(--focus-z)))
translateX(var(--focus-x)) translateY(var(--focus-y));
transition:
--focus-x .6s var(--ease), --focus-y .6s var(--ease),
--focus-z .6s var(--ease), --focus-ry .6s var(--ease);
}
/* solver mode — lets the focus routine sample camera states without animating */
.storeroom.is-instant .storeroom__room,
.storeroom.is-instant .storeroom__scene{transition:none !important}
/* back wall — machines are recessed in this plane and stand ON the floor
(room box = wall plane, so no extra Z here) */
.storeroom__back{
position:relative; transform-style:preserve-3d;
padding:2px clamp(14px,2vw,26px) 14px;
background:
radial-gradient(52% 30% at 50% 3%, rgba(214,226,242,.12), transparent 72%),
linear-gradient(90deg, rgba(0,0,0,.55), transparent 13%, transparent 87%, rgba(0,0,0,.55)),
repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 172px),
repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 124px),
linear-gradient(180deg, #161A20 0%, #0F1216 55%, #090B0E 100%);
box-shadow:inset 0 -46px 70px -30px rgba(0,0,0,.85);
}
.storeroom__back::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:64px; pointer-events:none;
background:linear-gradient(to top, rgba(198,212,232,.2), rgba(198,212,232,0));
}
.storeroom__sign{
text-align:center; font-family:var(--font-d); font-weight:800;
font-size:clamp(14px,1.5vw,21px); letter-spacing:.44em; text-indent:.44em;
color:#F0F2F5; margin:0 0 10px;
text-shadow:0 0 8px rgba(255,255,255,.5), 0 0 26px rgba(174,182,192,.55), 0 0 72px rgba(154,160,166,.4);
animation:signHum 7s ease-in-out infinite;
}
@keyframes signHum{0%,100%{opacity:.94}45%{opacity:1}60%{opacity:.9}75%{opacity:1}}
.storeroom__grid{
display:grid; grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));
gap:14px 12px; position:relative; z-index:1; transform-style:preserve-3d;
transition:opacity .17s ease, transform .17s ease;
}
.storeroom__grid.is-swapping{opacity:0; transform:translateX(-16px)}
.storeroom__cell{
position:relative; width:100%;
display:flex; flex-direction:column; gap:7px;
transform-style:preserve-3d;
}
/* merchant nameplate above each machine */
.storeroom__name{
width:100%; padding:6px 8px; border-radius:6px;
font:700 clamp(10px,.85vw,13px)/1.2 var(--font-d);
letter-spacing:.16em; text-transform:uppercase; text-align:center;
color:#E8EBEF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
background:linear-gradient(180deg, rgba(24,28,36,.9), rgba(12,14,18,.9));
box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), 0 6px 16px -6px rgba(0,0,0,.8);
text-shadow:0 0 12px color-mix(in srgb, var(--accent,#9AA0A6) 55%, transparent);
transform:translateZ(2px);
transition:transform .5s var(--ease), opacity .45s var(--ease);
}
/* the name rides along with the machine when it pops / focuses */
.storeroom__cell:has(.niche:hover) .storeroom__name,
.storeroom__cell:has(.niche:focus-within) .storeroom__name{transform:translateZ(150px)}
.storeroom__cell.is-focus .storeroom__name{transform:translateZ(230px)}
/* downlight above each niche + contact shadow under it — depth cue on the wall */
.storeroom__cell::before{
content:""; position:absolute; left:-8%; right:-8%; top:-11px; height:24px; pointer-events:none;
transform:translateZ(1px);
background:radial-gradient(50% 100% at 50% 100%, rgba(222,233,248,.17), transparent 74%);
}
.storeroom__cell::after{
content:""; position:absolute; left:2%; right:2%; bottom:-7px; height:16px; pointer-events:none;
transform:translateZ(1px);
background:radial-gradient(50% 0% at 50% 0%, rgba(0,0,0,.62), transparent 72%);
}
.storeroom__cell .niche{
width:100%; padding:9px; border-radius:9px;
background:linear-gradient(180deg,#090B0E,#06070A);
box-shadow:
inset 0 3px 10px rgba(0,0,0,.95),
inset 0 -1px 0 rgba(255,255,255,.05),
inset 0 0 0 1px rgba(255,255,255,.05),
0 0 26px -8px color-mix(in srgb, var(--accent,#9AA0A6) 40%, transparent);
transform:translateZ(2px);
transition:transform .5s var(--ease), box-shadow .5s var(--ease), opacity .45s var(--ease);
}
.storeroom__cell .niche::after{border-color:rgba(255,255,255,.07); box-shadow:0 0 0 1px rgba(0,0,0,.85)}
.storeroom__cell .niche:hover,.storeroom__cell .niche:focus-within{
transform:translateZ(150px);
box-shadow:
inset 0 3px 10px rgba(0,0,0,.9),
0 40px 64px -20px rgba(0,0,0,.9),
0 0 0 1px color-mix(in srgb, var(--accent) 65%, transparent),
0 0 52px -6px color-mix(in srgb, var(--accent) 60%, transparent);
z-index:20;
}
.storeroom__cell .machine{aspect-ratio:9/20.4}
.storeroom .niche:hover .machine,.storeroom .machine:hover{transform:none}
/* Go-closer floor marks — one decal per machine, click to walk up close */
.storeroom__marks{
position:absolute; left:0; right:0; top:44px;
display:grid; grid-template-columns:repeat(var(--cols,8),minmax(0,1fr));
gap:14px 12px; transform:translateZ(8px);
}
.storeroom__mark{
position:relative; justify-self:center;
width:130px; height:80px; padding:0; border:0; background:none; cursor:pointer;
filter:drop-shadow(0 0 16px rgba(224,234,248,.8)) drop-shadow(0 6px 14px rgba(0,0,0,.7));
transition:filter .3s var(--ease), transform .3s var(--ease);
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}
.storeroom__mark-glyph{
position:absolute; left:50%; top:2px; width:44px; height:42px;
transform:translateX(-50%);
background:linear-gradient(180deg, #FFFFFF, #D0D7E0 62%, #9AA5B5);
clip-path:polygon(50% 4%, 96% 92%, 66% 74%, 50% 96%, 34% 74%, 4% 92%);
animation:markNudge 2.2s ease-in-out infinite;
animation-delay:calc(var(--d, 0) * 1ms);
filter:drop-shadow(0 0 5px rgba(255,255,255,.8));
}
.storeroom__mark-text{
position:absolute; left:50%; bottom:0; transform:translateX(-50%);
display:block; padding:5px 14px;
background:rgba(8,10,14,.88); border:1px solid rgba(255,255,255,.22);
color:#fff; font:700 12px/1 var(--font-d); letter-spacing:.1em;
border-radius:999px; white-space:nowrap;
backdrop-filter:blur(4px);
transition:transform .3s var(--ease);
}
.storeroom__mark:hover,.storeroom__mark:focus-visible{
filter:drop-shadow(0 0 16px rgba(255,255,255,.9)) drop-shadow(0 8px 14px rgba(0,0,0,.65));
}
.storeroom__mark:hover .storeroom__mark-glyph,
.storeroom__mark:focus-visible .storeroom__mark-glyph{animation-play-state:paused}
.storeroom__mark:hover .storeroom__mark-text,
.storeroom__mark:focus-visible .storeroom__mark-text{
transform:translateX(-50%) translateY(-3px);
border-color:rgba(255,255,255,.3);
}
@keyframes markNudge{
0%,100%{transform:translateX(-50%) translateY(0); opacity:.7}
50% {transform:translateX(-50%) translateY(-6px); opacity:1}
}
/* focused state — camera moved in, siblings recede */
.storeroom.is-focused .storeroom__cell:not(.is-focus){pointer-events:none}
.storeroom.is-focused .storeroom__cell:not(.is-focus) .niche{opacity:.28}
.storeroom.is-focused .storeroom__cell:not(.is-focus) .storeroom__name{opacity:.4}
/* side-wall close-up: the walked-to machine is everything, the room recedes */
.storeroom__back,.storeroom__floor,.storeroom__ceil{transition:opacity .45s var(--ease)}
/* closeup: the merchant subdomain hero machine (s3--xl) swapped into the cell */
.storeroom__xl{ pointer-events:auto; }
.storeroom__xl .s3{ margin:0 auto; }
.storeroom__xl .s3__rig{ filter:drop-shadow(0 50px 80px rgba(0,0,0,.95)); }
.storeroom.is-focused .storeroom__xl{ z-index:25; }
.storeroom__cell.is-focus .niche{
transform:translateZ(230px);
box-shadow:
inset 0 3px 10px rgba(0,0,0,.9),
0 50px 80px -24px rgba(0,0,0,.95),
0 0 0 1.5px color-mix(in srgb, var(--accent) 80%, transparent),
0 0 70px -6px color-mix(in srgb, var(--accent) 72%, transparent);
z-index:25;
}
/* sticky control dock under the room — exit + pager + music stay reachable while scrolling */
.storeroom__dock{
position:sticky; bottom:16px; z-index:50;
display:flex; gap:10px; justify-content:center; align-items:center;
width:max-content; max-width:calc(100% - 32px);
margin:18px auto 0;
}
.storeroom__dock:not(:has(> :not([hidden]))){display:none}
.storeroom__exit{
display:inline-flex; align-items:center; gap:8px;
padding:11px 20px; border-radius:999px; cursor:pointer;
background:rgba(8,10,14,.85); border:1px solid rgba(255,255,255,.24);
color:#EDEFF2; font:600 13px/1 var(--font-d); letter-spacing:.03em;
backdrop-filter:blur(6px);
box-shadow:0 12px 34px rgba(0,0,0,.55), 0 0 0 4px rgba(255,255,255,.04);
animation:roomIn .35s var(--ease) both;
}
.storeroom__exit:hover{background:rgba(24,28,36,.92); border-color:rgba(255,255,255,.4)}
.storeroom__exit[hidden],.storeroom__pager[hidden],.storeroom__sound[hidden]{display:none}
.storeroom.is-focused .storeroom__pager{display:none}
/* Mobile HUD: shown when the camera walks to a machine on phones.
Sits centred just below the dock and surfaces the machine's
name + category + a one-line hint, so the user knows what they're
looking at without rotating the 3D scene. */
.storeroom__hud{
position:absolute; left:50%; bottom:96px; transform:translateX(-50%);
display:flex; align-items:center; gap:10px;
padding:10px 16px; border-radius:999px;
background:rgba(8,10,14,.86); border:1px solid rgba(255,255,255,.18);
color:#EDEFF2; font:600 13px/1 var(--font-d); letter-spacing:.02em;
box-shadow:0 12px 34px rgba(0,0,0,.5), 0 0 0 4px rgba(255,255,255,.04);
backdrop-filter:blur(6px);
max-width:calc(100% - 32px);
animation:roomIn .35s var(--ease) both;
z-index:30;
}
.storeroom__hud[hidden]{display:none}
.storeroom__hud-name{font-size:14px; font-weight:800; color:#fff}
.storeroom__hud-cat{
padding:3px 8px; border-radius:99px;
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
color:rgba(255,255,255,.78);
}
.storeroom__hud-hint{
font-size:11.5px; font-weight:600; color:rgba(255,255,255,.7);
letter-spacing:.04em;
}
@media (max-width: 720px){
.storeroom__hud{
flex-direction:column; align-items:flex-start; gap:5px;
bottom:120px; padding:12px 16px; border-radius:14px;
text-align:left;
}
.storeroom__hud-name{font-size:15px}
.storeroom__hud-cat{align-self:flex-start}
}
/* Mobile: keep the dock reachable on smaller screens and prevent
the HUD from sliding off. */
@media (max-width: 720px){
.storeroom__dock{gap:8px; bottom:20px; max-width:calc(100% - 32px)}
.storeroom__exit{padding:14px 18px; font-size:13px; min-height:48px}
.storeroom__sound,.storeroom__pgbtn{width:48px; height:48px; font-size:18px}
}
/* ambient music toggle */
.storeroom__sound{
width:40px; height:40px; border-radius:50%; cursor:pointer;
display:grid; place-items:center; padding:0;
background:rgba(8,10,14,.85); border:1px solid rgba(255,255,255,.24);
color:#C9CFD8; font-size:17px; line-height:1;
backdrop-filter:blur(6px);
box-shadow:0 12px 34px rgba(0,0,0,.55), 0 0 0 4px rgba(255,255,255,.04);
transition:color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.storeroom__sound:hover{color:#fff; border-color:rgba(255,255,255,.4)}
.storeroom__sound.is-on{
color:#fff;
border-color:color-mix(in srgb, var(--accent,#9AA0A6) 75%, transparent);
box-shadow:0 12px 34px rgba(0,0,0,.55), 0 0 18px -2px color-mix(in srgb, var(--accent,#9AA0A6) 65%, transparent);
animation:soundPulse 2.6s ease-in-out infinite;
}
@keyframes soundPulse{0%,100%{box-shadow:0 12px 34px rgba(0,0,0,.55), 0 0 14px -2px color-mix(in srgb, var(--accent,#9AA0A6) 55%, transparent)}50%{box-shadow:0 12px 34px rgba(0,0,0,.55), 0 0 26px -2px color-mix(in srgb, var(--accent,#9AA0A6) 85%, transparent)}}
/* pager — shown only when machines exceed 2 wall rows */
.storeroom__pager{
display:flex; align-items:center; gap:4px;
padding:6px 8px; border-radius:999px;
background:rgba(8,10,14,.8); border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(6px);
box-shadow:0 12px 34px rgba(0,0,0,.5);
}
.storeroom__pgbtn{
width:34px; height:34px; border-radius:50%; cursor:pointer;
display:grid; place-items:center; padding:0;
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
color:#E8EAEE; font-size:19px; line-height:1;
transition:background .25s var(--ease), border-color .25s var(--ease);
}
.storeroom__pgbtn:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4)}
.storeroom__pgnum{
font:600 12px/1 var(--font-d); color:#C9CED6;
min-width:46px; text-align:center; letter-spacing:.06em;
}
/* floor — lies flat from the wall base, extending past the camera plane so it fills the bottom */
.storeroom__floor{
position:absolute; left:0; right:0; top:100%; height:calc(var(--depth) + 700px);
transform-origin:top center; transform:rotateX(90deg);
transform-style:preserve-3d;
background:
linear-gradient(180deg, transparent 7%, rgba(224,235,250,.085) 14%, transparent 21%),
linear-gradient(180deg, transparent 37%, rgba(224,235,250,.085) 44%, transparent 51%),
linear-gradient(180deg, transparent 67%, rgba(224,235,250,.07) 74%, transparent 81%),
linear-gradient(180deg, rgba(0,0,0,.72), transparent 24%),
repeating-conic-gradient(#141922 0% 25%, #0B0E13 0% 50%) 0 0/150px 150px,
linear-gradient(180deg,#0E1116,#090B0E);
box-shadow:inset 0 34px 60px -22px rgba(205,218,238,.18);
}
/* ceiling — above the wall, extending back over the viewer's head */
.storeroom__ceil{
position:absolute; left:0; right:0; bottom:100%; height:calc(var(--depth) + 700px);
transform-origin:bottom center; transform:rotateX(-90deg);
background:linear-gradient(180deg,#090B0F,#0E1116 60%,#12161C);
}
.storeroom__ceil i{
position:absolute; left:14%; right:14%; height:9px; border-radius:8px;
background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92) 14%, #fff 50%, rgba(255,255,255,.92) 86%, rgba(255,255,255,0));
box-shadow:0 0 22px rgba(255,255,255,.55), 0 0 80px rgba(214,224,238,.32);
}
.storeroom__ceil i:nth-child(1){top:14%}
.storeroom__ceil i:nth-child(2){top:44%}
.storeroom__ceil i:nth-child(3){top:74%}
/* atmosphere overlays (flat, painted over the room) */
.storeroom__vignette{
position:absolute; inset:0; pointer-events:none;
background:radial-gradient(118% 86% at 50% 44%, transparent 44%, rgba(2,3,5,.8) 100%);
}
.storeroom__door{position:absolute; inset:0; pointer-events:none}
.doorjamb{
position:absolute; top:0; bottom:0; width:clamp(22px,3.6vw,54px);
background:linear-gradient(90deg,#05060A 0%,#151920 58%,#0B0D11 100%);
}
.doorjamb--l{left:0; border-right:1px solid rgba(255,255,255,.18); box-shadow:6px 0 30px rgba(0,0,0,.8), inset 1px 0 0 rgba(255,255,255,.1)}
.doorjamb--r{right:0; transform:scaleX(-1); border-right:1px solid rgba(255,255,255,.18); box-shadow:6px 0 30px rgba(0,0,0,.8), inset 1px 0 0 rgba(255,255,255,.1)}
.doorhead{
position:absolute; top:0; left:0; right:0; height:clamp(18px,2.6vw,40px);
background:linear-gradient(180deg,#181C23,#0A0C10);
box-shadow:0 10px 34px rgba(0,0,0,.75), inset 0 -1px 0 rgba(255,255,255,.1);
}
.doorsheen{
position:absolute; inset:0;
background:linear-gradient(103deg, transparent 28%, rgba(255,255,255,.05) 36%, transparent 44%, transparent 62%, rgba(255,255,255,.03) 70%, transparent 78%);
}
/* staggered machine entrance when the room becomes visible / filters change */
.storeroom.is-visible .storeroom__cell{
animation:roomIn .55s var(--ease) both;
animation-delay:calc(var(--i,0) * 65ms + 130ms);
}
@keyframes roomIn{from{opacity:0; transform:translateY(30px) scale(.94)} to{opacity:1; transform:none}}
@media (max-width:820px){
.storeroom__scene{perspective:800px; padding-top:56px; padding-bottom:170px}
.storeroom__room{--depth:390px; --cell-min:72px}
.storeroom__grid{gap:12px 8px}
.storeroom__cell .niche{padding:7px}
.doorjamb{width:16px} .doorhead{height:13px}
}
@media (max-width:480px){
.storeroom__scene{perspective:700px; padding-bottom:140px}
.storeroom__room{--depth:310px; --cell-min:68px}
}
@media (prefers-reduced-motion:reduce){
.storeroom__room{--walk:0px}
}
/* ---------- 11. Mobile parity pass -------------------------------
Touch targets ≥ 44 px; tap-stable sticky-hover lift; FAQ/contact
form on mobile; cart-fab clears chat-fab; smooth-scroll anchor
offset for the sticky nav; focus rings restored where outline:none
hid them. The 3D /showroom scene is intentionally excluded. */
html{scroll-padding-top:calc(var(--nav-h, 64px) + 8px)}
/* Chat-fab and cart-fab both anchored at bottom-right on mobile.
Lift the cart-fab above the chat-fab so taps don't collide. */
@media (max-width: 520px){
.cart-fab{bottom:90px; width:54px; height:54px; right:14px}
/* Hide the cart-fab's lift-on-hover on touch (sticky-hover shield) */
.cart-fab:hover{transform:none}
}
/* Focus visibility: pull back outline:none that hid keyboard focus
on category pills; bring a brand-soft ring back. */
.cat:focus{outline:none}
.cat:focus-visible{outline:2px solid var(--brand); outline-offset:3px}
.field input:focus,.field textarea:focus,.field select:focus{
/* brand focus ring stays the same — made a touch more visible */
box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent)
}
/* FAQ accordion: block emits .faq__item, CSS historically targeted .qa.
Apply the same look to .faq__item so it doesn't fall back to UA. */
.faq{display:grid; gap:10px}
.faq__item{
border:1px solid var(--line);
background:var(--panel-2); border-radius:var(--r-m);
transition:border-color .2s, box-shadow .2s;
overflow:hidden;
}
.faq__item[open]{box-shadow:var(--sh-m); border-color:var(--line)}
.faq__item > summary{
list-style:none; cursor:pointer;
display:flex; align-items:center; justify-content:space-between; gap:14px;
padding:14px 16px; font-weight:700; font-size:14.5px;
color:var(--ink);
min-height:48px;
user-select:none;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}
.faq__item > summary::-webkit-details-marker{display:none}
.faq__item > .faq__a{padding:0 16px 14px; color:var(--ink-2); font-size:13.6px; line-height:1.6}
/* Contact form (custom_html block, inline-style inputs/textarea/button).
Reinforce tap-target sizing on mobile without disturbing the inline
styles. */
.card input,.card textarea,.card button[type="submit"]{
font-size:15px;
}
@media (max-width: 520px){
.card input,
.card textarea,
.card button{ padding:14px 14px }
.card button[type="submit"]{ min-height:48px }
}
/* CTA band: keep buttons full-width on phone so they don't overflow */
@media (max-width: 640px){
.cta-band .btn-row{flex-direction:column; align-items:stretch}
.cta-band .btn-row > .btn{width:100%}
}
/* kpis: keep 4-col desktop, 2-col tablet, but force single column
on phones so the cards aren't squeezed. */
@media (max-width: 520px){
.kpis{grid-template-columns:1fr; gap:8px}
.hero-feature{padding:14px 14px; min-height:48px}
.hero-feature h4{font-size:13.5px}
.hero-feature p{font-size:12.5px; line-height:1.45}
.mhero__cta .btn{width:100%; min-height:48px}
/* mhero features already flex-wrap; keep buttons usable when stacked. */
}
/* Cart drawer touch targets */
.cartd__qty button{
/* keep 26-px compact on desktop, but ≥44 px on touch */
}
@media (max-width: 520px){
.cartd__qty button{width:44px; height:44px; font-size:18px}
.cartd__qty--lg button{width:44px; height:44px; font-size:18px}
.cartd__rm{width:44px; height:44px}
.iconbtn{width:44px; height:44px}
}
/* Touch-action:manipulation + tap-highlight removal on small icons
so taps feel native and tunnellers don't capture long-press */
.nav__burger,.nav__cart,.nav__theme,.nav__login,
.cart-fab,.cat,.niche,.cta-band .btn, .btn,
.storeroom__exit,.storeroom__pgbtn,.storeroom__sound,
.faq__item > summary{
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}
/* Hover-only decorations: only lift on devices that hover. The base
styles stay so non-hover devices don't get an unresponsive state
when the user releases a tap. */
@media (hover: hover){
.hero-feature:hover{border-color:var(--brand); box-shadow:0 4px 12px rgba(var(--shadow-rgb),.06)}
.cart-fab:hover{transform:translateY(-4px) scale(1.04)}
.pcard:hover,
.sg:hover,
.niche:hover,
.jcard:hover,
.plan:hover,
.cat:hover,
.hero-feature:hover{transform:translateY(-4px)}
}
@media (hover: none){
/* Strip any transform-based hover decorations on touch devices. */
.hero-feature:hover,
.cart-fab:hover,
.pcard:hover,
.sg:hover,
.niche:hover,
.jcard:hover,
.plan:hover,
.cat:hover{transform:none}
}
/* ---------- end mobile parity pass -------------------------------- */
/* ---------- 12. Mobile parity pass: showroom 3D room ----------
Touch targets ≥ 44 px, tap-action manipulation, calmer nudge
animation on small screens. Hover transforms behind hover:hover;
no transform animation drift on touch devices (the arrows don't
hold a "pressed" state when sticky-hover never decays). */
@media (hover: hover){
.storeroom__exit:hover,
.storeroom__pgbtn:hover,
}
@media (hover: none){
/* keep nudging but pause on touch to avoid constant repaints */
.storeroom__pgbtn:hover,
.storeroom__exit:hover,
.storeroom__sound:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.32);color:#fff}
}
/* Larger tap targets so fingers don't miss the dock */
@media (max-width: 520px){
.storeroom__pgbtn{width:44px; height:44px; font-size:20px}
.storeroom__sound{width:48px; height:48px; font-size:18px}
.storeroom__dock{gap:14px; padding-inline:20px}
.storeroom__exit{padding:14px 22px; min-height:48px; font-size:14px}
}
/* Touch-action on entire scene so two-finger pinches / taps don't
chain-scroll into machine parallax unexpectedly. */
.storeroom__scene,
.s3,
.s3__room,
.storeroom__mark,
.storeroom__pgbtn,
.storeroom__exit,
.storeroom__sound{
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}
/* The default focus-visible outline (2 px brand) is hard to see on
the dark 3D scene. Brighten the strokes for the showroom cluster. */
.storeroom__mark:focus-visible,
.storeroom__pgbtn:focus-visible,
.storeroom__exit:focus-visible,
.storeroom__sound:focus-visible{
outline:2px solid #FFFFFF; outline-offset:4px;
}
/* iOS notch / safe area — push the dock above home indicator. */
@supports(padding: max(0px)){
.storeroom__dock{
bottom:calc(16px + env(safe-area-inset-bottom));
padding-bottom:max(0px, env(safe-area-inset-bottom));
}
}
/* ---------- end showroom mobile parity pass --------------------- */
/* ==========================================================================
Cabinet recess (opt-in per machine with data-depth, currently the home
hero). No 3D is applied to the products themselves any more - they are flat
transparent cut-outs. What is left describes the CABINET, which is what
makes an empty dark slot read as a real compartment:
1. a recessed compartment per slot (occlusion in the corners)
2. a shelf floor with a lit front lip for the product to stand on
3. a glass pane over the whole interior, so products sit behind glass
========================================================================== */
.s3--depth .s3__slot-pic{
background:
linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 34%),
linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 72%, rgba(0,0,0,.55) 100%),
linear-gradient(180deg, #0D1117 0%, #080A0E 58%, #0A0D12 100%);
box-shadow:
inset 0 12px 18px -8px rgba(0,0,0,.9),
inset 0 -10px 16px -10px rgba(0,0,0,.75),
inset 3px 0 10px -6px rgba(0,0,0,.7),
inset -3px 0 10px -6px rgba(0,0,0,.7);
}
/* shelf floor + lit front lip, painted behind the product */
.s3--depth .s3__slot-pic::before{
content:""; position:absolute; left:0; right:0; bottom:0; height:38%; z-index:1; pointer-events:none;
background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 58%, rgba(0,0,0,.68) 100%);
border-top:1px solid rgba(255,255,255,.07);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
/* the product sits on the floor */
.s3--depth .s3__slot-pic img{position:relative; z-index:2}
/* the front pane: everything below now reads as being behind glass */
.s3--depth .s3__glass::after{
content:""; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit;
background:
linear-gradient(101deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 60%, rgba(255,255,255,.07) 76%, rgba(255,255,255,0) 100%),
linear-gradient(180deg, rgba(198,220,255,.06) 0%, rgba(255,255,255,0) 24%, rgba(0,0,0,.05) 74%, rgba(0,0,0,.14) 100%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 20px 34px -20px rgba(255,255,255,.12);
}
/* Hero showcase: curated products, no prices and no slot codes. Hiding the
tag also gives the whole slot height to the product.
The compartments are squared off. The interior is roughly square overall,
so a 3x4 grid leaves each compartment wider than it is tall; deriving the
width from the row height (aspect-ratio) makes them 1:1 and centres each
one in its column. Products that are taller than they are wide - which is
most retail packaging - then fill the compartment instead of being fenced
in by empty space either side. */
.s3--showcase .s3__slot-tag{display:none}
.s3--showcase .s3__slots{justify-items:center}
.s3--showcase .s3__slot{
background:rgba(255,255,255,.035);
height:100%; max-height:100%; width:auto; max-width:100%; aspect-ratio:1/1;
justify-self:center;
}
.s3--showcase .s3__slot-pic{padding:7px}
/* Attribution line for the openly licensed showcase photography */
.hero3d__credits{opacity:.5;line-height:1.7;font-size:10px;letter-spacing:.01em;margin-inline:auto}