/* ============================================================================
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}
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;
}
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}
.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(--brand); box-shadow:0 6px 18px rgba(154,160,166,.28); background:linear-gradient(145deg,#9AA0A6 0%,#C0C2C5 25%,#8A8D93 50%,#B8BABE 75%,#9AA0A6 100%); border:1px solid #B8BABE; 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:var(--line); box-shadow:none; backdrop-filter:blur(6px); background:rgba(255,255,255,.6)}
.btn--ghost:hover{border-color:var(--line); background:var(--panel)}
.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;
}
.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/17.4}
.wall-row--hero .niche{width:clamp(176px,17.5vw,236px)}
.wall-row--hero .machine{aspect-ratio:9/18}
/* 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);
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,.10), rgba(255,255,255,0) 26%),
radial-gradient(120% 46% at 50% 0%, rgba(220,232,255,.20), rgba(255,255,255,0) 70%),
linear-gradient(180deg, #1B1F26 0%, #14171C 58%, #0D0F13 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:4px; flex:1;
align-content:start; overflow:hidden; min-height:0;
}
.slot{
position:relative; display:flex; flex-direction:column; min-width:0;
border-radius:5px; overflow:hidden; cursor:pointer; padding:0;
background:linear-gradient(180deg,#FFFFFF,#F4F5F7);
border:1px solid rgba(var(--shadow-rgb),.13);
box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 3px 6px -4px rgba(var(--shadow-rgb),.4);
aspect-ratio:1/1.24;
transition:transform .26s var(--ease), box-shadow .26s var(--ease), border-color .2s;
}
[data-theme="dark"] .slot{
background:linear-gradient(180deg,#22242A,#15171B);
border-color:rgba(255,255,255,.12);
box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 4px 8px -5px rgba(0,0,0,.8);
}
.slot__pic{position:relative; flex:1; min-height:0; overflow:hidden; display:block}
.slot__pic img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
/* spiral coil in front of the product */
.slot__coil{
position:absolute; left:4px; right:4px; bottom:5px; height:9px; z-index:3; pointer-events:none;
background:repeating-linear-gradient(104deg,
rgba(210,214,220,.95) 0 2px, rgba(255,255,255,.95) 2px 4px, rgba(160,166,174,.9) 4px 6px);
border-radius:2px;
box-shadow:0 1px 2px rgba(var(--shadow-rgb),.35);
opacity:.9;
}
[data-theme="dark"] .slot__coil{
background:repeating-linear-gradient(104deg,
rgba(120,126,136,.9) 0 2px, rgba(190,196,206,.9) 2px 4px, rgba(80,86,96,.9) 4px 6px);
}
/* price rail + slot code */
.slot__tag{
flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:3px;
padding:2px 3px; background:linear-gradient(180deg,#FFFFFF,#F0F1F3);
border-top:1px solid rgba(var(--shadow-rgb),.14);
font-family:var(--font-d); line-height:1.1;
}
[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:9.5px; 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); z-index:5;
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);
}
.slot:hover img{transform:scale(1.06)}
.slot:hover .slot__tag em{color:var(--brand-ink)}
.slot__name{
position:absolute; left:0; right:0; bottom:100%; z-index:6;
background:rgba(10,10,11,.92); color:#fff; font-size:9.5px; font-weight:600; line-height:1.25;
padding:4px 5px; border-radius:5px 5px 0 0;
opacity:0; transform:translateY(4px); pointer-events:none;
transition:opacity .22s var(--ease), transform .22s var(--ease);
max-height:52px; overflow:hidden;
}
.slot:hover .slot__name,.slot:focus-visible .slot__name{opacity:1; transform:translateY(0)}
.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,.62) 40%, rgba(255,255,255,0) 50%),
linear-gradient(112deg, rgba(255,255,255,0) 56%, rgba(255,255,255,.34) 62%, rgba(255,255,255,0) 68%),
linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 22%);
mix-blend-mode:screen; opacity:.85;
}
[data-theme="dark"] .glass__sheen{
background:
linear-gradient(112deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.24) 40%, rgba(255,255,255,0) 50%),
linear-gradient(112deg, rgba(255,255,255,0) 56%, rgba(255,255,255,.14) 62%, rgba(255,255,255,0) 68%);
mix-blend-mode:screen; opacity:.7;
}
.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-ambient 5s ease-in-out infinite;
}
@keyframes led-ambient{
0%,100%{
box-shadow:
0 0 6px 1px var(--accent),
0 0 14px 3px color-mix(in srgb, var(--accent) 40%, transparent),
0 0 28px 6px color-mix(in srgb, var(--accent) 15%, transparent);
}
50%{
box-shadow:
0 0 10px 3px var(--accent),
0 0 28px 6px color-mix(in srgb, var(--accent) 65%, transparent),
0 0 52px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}
}
.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:9/17}
/* 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 — visible RGB strip around the machine */
.hero-grid__item .machine__led{
position:absolute; inset:-3px;
border-radius:inherit;
pointer-events:none; z-index:9;
background:
repeating-linear-gradient(
90deg,
#FF0000 0px, #FF0000 4px,
#FF7700 4px, #FF7700 8px,
#FFFF00 8px, #FFFF00 12px,
#00FF00 12px, #00FF00 16px,
#0077FF 16px, #0077FF 20px,
#8800FF 20px, #8800FF 24px,
#FF00FF 24px, #FF00FF 28px
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
padding:3px;
animation:led-strip-move 2s linear infinite;
box-shadow:
0 0 8px 2px rgba(255,0,100,.25),
0 0 16px 4px rgba(0,100,255,.18),
0 0 24px 6px rgba(0,255,100,.12);
}
@keyframes led-strip-move{
0%{background-position:0 0}
100%{background-position:28px 0}
}
.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-grid{
display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:26px;
}
.wall-grid .niche{width:100%}
.wall-grid .machine{aspect-ratio:9/17}
/* ---------- 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}
.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:#FFFFFF !important; color:#000000 !important; height:48px; border-radius:9999px; font-weight:700; font-size:16px; border:1px solid var(--line)}
.plan.is-popular .btn{background:linear-gradient(145deg,#9AA0A6,#B8BABE) !important; color:#0A0A0B !important; border:1px solid #B8BABE}
/* ---------- 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,.28); background:rgba(255,255,255,.08)}
.cta-band .btn--ghost:hover{background:rgba(255,255,255,.16)}
/* ---------- 19. Category rail ------------------------------------------- */
.cats{display:flex; flex-wrap:nowrap; overflow-x:auto; gap:10px}
.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}
.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:1fr 1fr 1fr}
.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}
.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}
.wall-grid{grid-template-columns:1fr}
.footer__grid{grid-template-columns:1fr}
.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 .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__mark{background:#FFFFFF}
.footer .brand__mark img{filter:none}
.footer .brand__word{filter:brightness(0) invert(1); opacity:.95}
.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,#9AA0A6 0%,#C0C2C5 25%,#8A8D93 50%,#B8BABE 75%,#9AA0A6 100%) !important;
color:#E5E7EB !important; border:1px solid #B8BABE !important;
animation:metallicWhiteShadow 2.5s infinite !important;
}
.btn--brand:hover{
box-shadow:0 0 0 4px rgba(255,255,255,0.5), 0 0 40px rgba(255,255,255,0.4) !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 90px}
.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}
/* ---------- the 3D machine ------------------------------------------------ */
.s3{position:relative; width:100%; max-width:520px; margin-inline:auto; text-align:center}
.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:496px; 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}}
/* box faces — front proud, sides + cap extending back for real depth */
.s3__front{
position:absolute; inset:0; transform:translateZ(46px);
background:
linear-gradient(160deg, #FDFDFE 0%, #EDEEF1 18%, #D7DAE0 52%, #ECEDEF 82%, #C9CDD4 100%);
border:1px solid rgba(var(--shadow-rgb),.14);
border-radius:26px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 6px rgba(var(--shadow-rgb),.16),
0 44px 90px rgba(var(--shadow-rgb),.30), 0 12px 26px rgba(var(--shadow-rgb),.16);
display:flex; flex-direction:column; overflow:hidden; z-index:3;
}
[data-theme="dark"] .s3__front{
background:linear-gradient(160deg, #2A2B31 0%, #1B1C21 40%, #101116 70%, #232429 100%);
border-color:rgba(255,255,255,.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 44px 90px rgba(0,0,0,.7), 0 12px 26px rgba(0,0,0,.5);
}
.s3__side{
position:absolute; top:0; bottom:0; width:150px;
background:linear-gradient(180deg,#B9BEC6,#8F959E 40%, #6E747D);
border-radius:10px;
}
[data-theme="dark"] .s3__side{background:linear-gradient(180deg,#1D1E23,#0B0C0F 60%, #17181D)}
.s3__side--r{left:100%; transform-origin:0 50%; transform:rotateY(90deg); border-radius:0 8px 8px 0}
.s3__side--l{right:100%; transform-origin:100% 50%; transform:rotateY(-90deg); border-radius:8px 0 0 8px}
.s3__cap{
position:absolute; left:0; right:0; bottom:100%; height:150px;
transform-origin:50% 100%; transform:rotateX(90deg);
background:linear-gradient(90deg,#E9EBEE,#C9CDD4 55%, #AEB3BB);
border-radius:8px 8px 0 0;
}
[data-theme="dark"] .s3__cap{background:linear-gradient(90deg,#26272C,#141519 55%, #0C0D10)}
/* 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__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,
#FF3B3B 0 34px, #FF9F1C 34px 68px, #FFE45E 68px 102px, #37D67A 102px 136px,
#38BDF8 136px 170px, #A78BFA 170px 204px, #F472B6 204px 238px);
background-size:238px 100%;
box-shadow:0 0 12px rgba(120,190,255,.55), 0 0 26px rgba(255,120,180,.30);
animation:s3led 4s linear infinite;
}
@keyframes s3led{to{background-position:238px 0}}
.no-anim .s3__led{animation:none}
.s3__slots{flex:1 1 auto; min-height:0; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:9px}
.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);
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);
}
.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}
.s3__slot-pic img{width:100%; height:100%; object-fit:cover; transition:transform .45s var(--ease)}
.s3__slot:hover .s3__slot-pic img{transform:scale(1.08)}
.s3__coil{
position:absolute; left:4px; right:4px; bottom:4px; height:8px; z-index:3; pointer-events:none;
background:repeating-linear-gradient(104deg,
rgba(214,218,224,.95) 0 2px, rgba(255,255,255,.95) 2px 4px, rgba(160,166,174,.9) 4px 6px);
border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.5);
}
[data-theme="dark"] .s3__coil{
background:repeating-linear-gradient(104deg,
rgba(120,126,136,.9) 0 2px, rgba(190,196,206,.9) 2px 4px, rgba(80,86,96,.9) 4px 6px);
}
.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(var(--shadow-rgb),.40);
}
[data-theme="dark"] .s3__brandbar{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::before{ /* ceiling spot above the machine */
content:""; position:absolute; left:50%; top:-4px; translate:-50% 0;
width:38px; height:38px; border-radius:50%; z-index:6;
background:radial-gradient(circle at 50% 40%, #FFFFFF 0%, #EFEFF2 62%, #DFDFE4 100%);
box-shadow:0 0 0 1px rgba(var(--shadow-rgb),.08) inset, 0 3px 8px rgba(var(--shadow-rgb),.16),
0 20px 60px 26px rgba(255,255,255,.14);
}
[data-theme="dark"] .s3::before{
background:radial-gradient(circle at 50% 40%, #2C2C33 0%, #1A1A1F 62%, #0A0A0D 100%);
box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 3px 8px rgba(0,0,0,.6);
}
.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__rig{width:284px; height:440px}
.s3__side{width:120px}
.s3__cap{height:120px}
}
@media (max-width:560px){
.hero3d{padding:52px 0 64px}
.cart-fab{right:16px; bottom:16px; width:54px; height:54px}
.s3__rig{width:252px; height:396px}
.s3__side{width:96px}
.s3__cap{height:96px}
.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}
.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__spot{
position:absolute; left:50%; top:-44px; translate:-50% 0;
width:130%; height:calc(100% + 44px); pointer-events:none; z-index:0;
}
.s3__spot::before{ /* main light cone — fans down from the ceiling lamp */
content:""; position:absolute; left:50%; top:40px; bottom:70px; translate:-50% 0; width:94%;
background:linear-gradient(180deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,.15) 26%, rgba(255,255,255,.05) 60%, rgba(255,255,255,0) 94%);
clip-path:polygon(46% 0, 54% 0, 97% 100%, 3% 100%);
filter:blur(30px); mix-blend-mode:screen; opacity:.8;
}
.s3__spot::after{ /* floor light pool */
content:""; position:absolute; left:50%; bottom:5%; translate:-50% 0; width:78%; height:110px;
background:
radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.24), rgba(255,255,255,0) 66%),
radial-gradient(ellipse at 50% 62%, color-mix(in srgb, var(--stage-accent,#9AA0A6) 38%, transparent), transparent 72%);
filter:blur(14px); mix-blend-mode:screen;
}
.s3__spot i{ /* thin god rays from the fixture */
position:absolute; top:38px; left:50%; width:2px; height:56%; margin-left:-1px;
background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0));
transform-origin:top center; filter:blur(2px); opacity:.5; mix-blend-mode:screen;
}
.s3__spot i:nth-child(1){rotate:-17deg; margin-left:-74px}
.s3__spot i:nth-child(2){rotate:0deg}
.s3__spot i:nth-child(3){rotate:17deg; margin-left:74px}
.s3__hint{position:relative; z-index:2}
/* the ceiling fixture becomes a real light head in the dark theme */
[data-theme="dark"] .s3::before{
background:radial-gradient(circle at 50% 38%, #FFFFFF 0%, #E8EAEE 34%, #9AA0A6 72%, #4A4E55 100%);
box-shadow:
0 0 0 1px rgba(255,255,255,.28) inset,
0 0 22px 7px rgba(255,255,255,.42),
0 46px 90px 30px rgba(255,255,255,.16);
}
.hero3d .s3__spot::before{opacity:.85}
[data-theme="light"] .s3__spot::before{opacity:.35}
[data-theme="light"] .s3__spot i{opacity:.28}
/* ---------- bigger machine for machine landing pages ---------------------- */
.s3--xl{max-width:600px}
.s3--xl .s3__rig{width:388px; height:592px}
.s3--xl .s3__room{padding-top:24px}
@media (max-width:600px){
.s3--xl .s3__rig{width:min(340px, 84vw); height:min(520px, 130vw)}
.s3--xl{max-width:100%}
}
/* ---------- 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)}
.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}
}