/* ============================================================
   CATECH CUSTOMS — Design System
   Clean / premium / light. Contrast to dark-RGB competitors.
   ============================================================ */

/* DARK IS THE DEFAULT THEME. Light is opt-in via [data-theme="light"],
   set by the toggle in the nav and remembered in localStorage. */
:root{
  --bg:        #0b0d10;
  --surface:   #151920;
  --ink:       #f3f5f8;
  --muted:     #98a2b3;
  --hairline:  #272d38;
  --accent:    #4da3ff;
  --accent-ink:#06121f;
  --blue-key:  #4da3ff;
  /* product shots are photographed on white, so their backdrop stays light
     in both themes or the cut-outs disappear */
  --photo-bg:  #e9edf2;
  --grid-line: rgba(255,255,255,.055);
  --ok-bg:#10321f; --ok-fg:#4ade80;
  --bad-bg:#3a1417; --bad-fg:#fb7185;
  --warn-bg:#3a2c10; --warn-fg:#fbbf24;
  --neutral-bg:#232a34; --neutral-fg:#9aa3af;
  --card-shadow: 0 24px 48px rgba(0,0,0,.55);
}
:root[data-theme="light"]{
  --bg:        #fafafa;
  --surface:   #ffffff;
  --ink:       #0b0b0c;
  --muted:     #6e6e73;
  --hairline:  #e4e4e7;
  --accent:    #0071e3;
  --accent-ink:#ffffff;
  --blue-key:  #3b82f6;
  --photo-bg:  #f4f4f5;
  --grid-line: rgba(0,0,0,.035);
  --ok-bg:#e8f6ec; --ok-fg:#1a7f37;
  --bad-bg:#fdebec; --bad-fg:#c01c28;
  --warn-bg:#fef3e2; --warn-fg:#9a6700;
  --neutral-bg:#ececee; --neutral-fg:#6e6e73;
  --card-shadow: 0 24px 48px rgba(0,0,0,.07);
}
:root{
  --radius:    18px;
  --pill:      980px;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --ease:      cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--accent); color:#fff }

/* ---------- layout ---------- */
.wrap{ max-width:1152px; margin:0 auto; padding:0 24px }
section{ padding:112px 0 }
@media(max-width:720px){ section{ padding:72px 0 } }

/* ---------- nav ---------- */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  border:1px solid var(--hairline); background:transparent; color:var(--ink);
  transition:border-color .2s, transform .2s; flex:none;
}
.theme-toggle:hover{ border-color:var(--accent); transform:translateY(-1px) }
.theme-toggle svg{ width:16px; height:16px }
.theme-toggle .i-sun{ display:none }
.theme-toggle .i-moon{ display:block }
:root[data-theme="light"] .theme-toggle .i-sun{ display:block }
:root[data-theme="light"] .theme-toggle .i-moon{ display:none }

.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(18px);
  -webkit-backdrop-filter:saturate(1.4) blur(18px);
  border-bottom:1px solid var(--hairline);
}
.nav .bar{
  max-width:1152px; margin:0 auto; padding:0 24px;
  height:60px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.04em; font-size:14px }
.brand span{ white-space:nowrap }
.brand img{ height:30px; width:auto }
.nav-links{ display:flex; align-items:center; gap:28px; font-size:14px; color:var(--muted) }
.nav-links a{ transition:color .2s var(--ease) }
.nav-links a:hover{ color:var(--ink) }
@media(max-width:720px){
  .nav .bar{ height:52px; padding:0 14px; gap:8px }
  .brand{ font-size:11px; gap:7px }
  .brand img{ height:24px }
  .nav-links{ gap:13px; font-size:12px }
  .nav-links .btn{ display:none }
}
/* narrow phones: the wordmark and the links share a single row, so both are
   pulled in far enough that the two can never run into each other */
@media(max-width:440px){
  .nav .bar{ padding:0 12px; gap:6px }
  .brand{ font-size:10px; letter-spacing:.02em; gap:6px; flex:0 0 auto }
  .brand img{ height:21px }
  .nav-links{ gap:10px; font-size:11px }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:var(--pill);
  font-size:15px; font-weight:600; line-height:1;
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn:active{ transform:scale(.97) }
.btn-solid{ background:var(--accent); color:var(--accent-ink) }
.btn-solid:hover{ background:#0077ed; box-shadow:0 8px 24px rgba(0,113,227,.28); transform:translateY(-1px) }
.btn-ghost{ border-color:var(--hairline); color:var(--ink); background:transparent }
.btn-ghost:hover{ border-color:var(--ink) }
.btn-small{ padding:9px 18px; font-size:13px }
.btn-dark{ background:var(--ink); color:#fff }
.btn-dark:hover{ background:#000; box-shadow:0 8px 24px rgba(0,0,0,.25); transform:translateY(-1px) }
.btn-ondark-ghost{ border-color:rgba(255,255,255,.28); color:#fff }
.btn-ondark-ghost:hover{ border-color:#fff }

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:20px;
}
h1.display{
  font-size:clamp(44px, 7.2vw, 92px);
  line-height:1.03; font-weight:700; letter-spacing:-.033em;
}
h2.headline{
  font-size:clamp(32px, 4.6vw, 56px);
  line-height:1.06; font-weight:700; letter-spacing:-.028em;
}
.sub{
  font-size:clamp(17px, 1.6vw, 21px);
  color:var(--muted); max-width:640px; margin-top:24px;
}

/* ---------- hero ---------- */
.hero{ min-height:calc(100svh - 60px); display:flex; align-items:center; position:relative; overflow:hidden }
.hero .wrap{ width:100% }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center }
.hero-visual{ position:relative }
#hero3dGL{ width:100%; aspect-ratio:1/1; display:none; cursor:grab }
@media(max-width:960px){
  /* the model is the hero on phones, so let it run full width and taller */
  .hero-visual{ max-width:none }
  #hero3dGL{ aspect-ratio:4/5 }
}
#hero3dGL.gl-ready{ display:block }
#hero3dGL canvas{ width:100% !important; height:100% !important; display:block }
.hero-visual img.gl-on{ display:none }
.hero-visual img{
  width:100%; border-radius:24px;
  box-shadow:0 32px 64px rgba(0,0,0,.14);
  animation:heroFloat 7s ease-in-out infinite;
}
@keyframes heroFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
@media(max-width:960px){
  .hero-grid{ grid-template-columns:1fr; gap:28px }
  .hero-visual{ max-width:520px; width:100%; margin:0 auto }
  .hero-visual img{ animation:none }
}
@media (prefers-reduced-motion: reduce){ .hero-visual img{ animation:none } }
.hero-actions{ display:flex; gap:14px; margin-top:40px; flex-wrap:wrap }
.typed-line{ min-height:1.06em }
.typed{ color:var(--accent) }
.caret{
  display:inline-block; width:.08em; min-width:3px; height:.92em;
  background:var(--blue-key); vertical-align:-.06em; margin-left:.06em;
  animation:blink 1.06s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0 } }

/* dark-theme fixes for styles declared inside individual pages */
:root:not([data-theme="light"]) .stage3d img{ mix-blend-mode:normal }
:root:not([data-theme="light"]) .cfg-preview,
:root:not([data-theme="light"]) .build-card .photo{ background:var(--photo-bg) }
:root:not([data-theme="light"]) .compat-item.ok .ic{ background:var(--ok-bg); color:var(--ok-fg) }
:root:not([data-theme="light"]) .compat-item.bad .ic{ background:var(--bad-bg); color:var(--bad-fg) }
:root:not([data-theme="light"]) .compat-item.bad{ color:var(--bad-fg) }
:root:not([data-theme="light"]) .badge.available{ background:var(--ok-bg); color:var(--ok-fg) }
:root:not([data-theme="light"]) .badge.reserved{ background:var(--warn-bg); color:var(--warn-fg) }
:root:not([data-theme="light"]) .badge.sold{ background:var(--neutral-bg); color:var(--neutral-fg) }
:root:not([data-theme="light"]) .pw-track{ background:var(--hairline) }
:root:not([data-theme="light"]) .pw-fill.alt{ background:var(--muted) }
:root:not([data-theme="light"]) .build-card:hover,
:root:not([data-theme="light"]) .product:hover{ box-shadow:var(--card-shadow) }
:root:not([data-theme="light"]) .cfg-field select{ color-scheme:dark }

.sound-chip{
  position:absolute; top:28px; right:24px; z-index:5;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--hairline); border-radius:var(--pill);
  padding:8px 14px; cursor:pointer; background:var(--surface);
  transition:color .2s, border-color .2s;
}
.sound-chip:hover{ color:var(--ink); border-color:var(--ink) }
.sound-chip .dot{ width:7px; height:7px; border-radius:50%; background:#d4d4d8; transition:background .2s }
.sound-chip.on .dot{ background:var(--blue-key); box-shadow:0 0 8px rgba(59,130,246,.7) }

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-cue::after{
  content:""; width:1px; height:34px; background:var(--hairline);
  animation:cue 1.8s var(--ease) infinite;
}
@keyframes cue{ 0%{ transform:scaleY(0); transform-origin:top } 45%{ transform:scaleY(1); transform-origin:top } 55%{ transform:scaleY(1); transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }

/* ---------- promo banner (fixed + dismissible) ---------- */
.promo-bar{
  position:fixed; top:0; left:0; right:0; z-index:70;
  background:var(--accent); color:#fff; text-align:center;
  font-family:var(--font-sans); font-size:16px; font-weight:600; letter-spacing:.01em;
  padding:16px 56px 16px 24px;
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.promo-close{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.2); border:none; color:#fff; cursor:pointer;
  width:28px; height:28px; border-radius:50%; font-size:15px; line-height:1;
  font-family:var(--font-sans);
}
.promo-close:hover{ background:rgba(255,255,255,.34) }
body{ padding-top:var(--promo-h, 0px) }
.nav{ top:var(--promo-h, 0px) }
@media(max-width:720px){
  .promo-bar{ font-size:13px; letter-spacing:0; padding:11px 40px 11px 14px; line-height:1.4 }
  .promo-close{ width:24px; height:24px; right:9px; font-size:14px }
}

/* ---------- 3D assembly (scroll-driven) ---------- */
.assembly-track{ height:420vh; position:relative }
.assembly-intro{ padding:96px 0 8px; text-align:center }
.assembly-stage{
  position:sticky; top:calc(61px + var(--promo-h, 0px)); height:calc(100svh - 61px - var(--promo-h, 0px));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; gap:12px;
  perspective:1400px;
}
.stage3d{
  position:relative; width:min(520px, 78vw, 60svh); aspect-ratio:1;
  transform-style:preserve-3d;
  transition:transform .15s linear;
}
.stage3d img{ position:absolute; top:50%; left:50%; mix-blend-mode:multiply; will-change:transform, opacity; backface-visibility:hidden }
.stage-case{ width:72%; transform:translate(-50%, -50%); z-index:1 }
.stage-part{ width:34%; opacity:0; z-index:2; transform:translate(-50%, -50%); filter:drop-shadow(0 18px 28px rgba(0,0,0,.18)) }
.stage3d.gl-on{ display:none }
#stage3dGL{ position:relative; width:min(560px, 84vw, 62svh); aspect-ratio:1; display:none }
#stage3dGL.gl-ready{ display:block }
#stage3dGL canvas{ width:100% !important; height:100% !important; display:block }
.model-credit{ font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; color:var(--muted); opacity:.75; text-align:center; margin-top:2px }
@media(max-width:720px){ #stage3dGL{ width:82vw } }
.stage-shadow{
  position:absolute; left:50%; top:80%; width:56%; height:7%;
  transform:translateX(-50%); z-index:0;
  background:radial-gradient(ellipse, rgba(0,0,0,.22), transparent 68%);
  filter:blur(6px);
}
.assembly-caption{
  font-family:var(--font-sans);
  font-size:clamp(24px, 3.6vw, 42px);
  font-weight:700; letter-spacing:-.02em; line-height:1.1;
  color:var(--ink); min-height:1.15em; text-align:center;
}
.assembly-caption span{ display:inline-block; animation:capIn .45s var(--ease) both }
@keyframes capIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){ .assembly-caption span{ animation:none } }
@media(max-width:720px){
  .assembly-track{ height:340vh }
  .assembly-intro{ padding:64px 0 4px }
  .assembly-stage{ top:calc(52px + var(--promo-h, 0px)); height:calc(100svh - 52px - var(--promo-h, 0px)); gap:8px }
  .stage3d{ width:76vw }
  .assembly-head .headline{ font-size:26px }
  .assembly-caption{ font-size:clamp(20px, 6vw, 28px); letter-spacing:-.01em; padding:0 14px }
}

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease) }
.reveal.in{ opacity:1; transform:none }
.reveal-d1{ transition-delay:.08s } .reveal-d2{ transition-delay:.16s } .reveal-d3{ transition-delay:.24s }

/* ---------- stat strip ---------- */
.stats{ border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); background:var(--surface) }
.stats .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding-top:48px; padding-bottom:48px }
@media(max-width:820px){ .stats .wrap{ grid-template-columns:repeat(2,1fr) } }
.stat .num{ font-size:clamp(28px,3.4vw,44px); font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.stat .lbl{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:6px }

/* ---------- scroll-scrubbed video section ---------- */
.build-types{ position:relative; overflow:hidden; isolation:isolate }
.scrub-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-2; pointer-events:none;
}
/* veil keeps the copy readable over whatever footage the owner uploads */
.scrub-veil{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 88%, transparent) 0%,
    color-mix(in srgb, var(--bg) 74%, transparent) 45%,
    color-mix(in srgb, var(--bg) 92%, transparent) 100%);
}
.build-types .card{ backdrop-filter:blur(6px); background:color-mix(in srgb, var(--surface) 82%, transparent) }

/* ---------- cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px }
@media(max-width:900px){ .cards{ grid-template-columns:1fr } }
.card{
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:36px 32px; display:flex; flex-direction:column; gap:14px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--card-shadow); border-color:var(--accent) }
.card .icon{ width:44px; height:44px; color:var(--accent) }
.card h3{ font-size:22px; font-weight:700; letter-spacing:-.015em }
.card p{ color:var(--muted); font-size:15px; flex:1 }
.card .link{ font-size:14px; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:6px }
.card .link::after{ content:""; width:6px; height:6px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); transition:transform .25s var(--ease) }
.card:hover .link::after{ transform:rotate(45deg) translate(3px,-3px) }

/* ---------- data / charts section (Obys-flavoured) ---------- */
.data-section{ background:var(--surface); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); position:relative }
.data-section::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 40%, #000 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 40%, #000 40%, transparent 100%);
}
.data-section .wrap{ position:relative }
.mono-note{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--muted) }

.chart-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:64px; margin-top:64px; align-items:start }
@media(max-width:900px){ .chart-grid{ grid-template-columns:1fr } }

.barchart{ display:flex; flex-direction:column; gap:22px }
.bar-row{ display:grid; grid-template-columns:200px 1fr 64px; align-items:center; gap:16px }
@media(max-width:560px){ .bar-row{ grid-template-columns:1fr; gap:6px } }
.bar-name{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.bar-name strong{ color:var(--ink) }
.bar-track{ height:34px; background:transparent; border-left:1px solid var(--hairline); position:relative }
.bar-fill{
  height:100%; width:0%;
  background:repeating-linear-gradient(-45deg, var(--ink) 0 1px, transparent 1px 5px);
  position:relative;
  transition:width 1.4s var(--ease);
}
.bar-row.hero-bar .bar-fill{ background:var(--accent) }
.bar-val{ font-family:var(--font-mono); font-size:13px; font-variant-numeric:tabular-nums; text-align:right }
.bar-row.hero-bar .bar-val{ color:var(--accent); font-weight:600 }

.donuts{ display:flex; flex-direction:column; gap:40px }
.donut-block{ display:flex; align-items:center; gap:24px }
.donut{ width:132px; height:132px; flex:none }
.donut svg{ width:100%; height:100%; transform:rotate(-90deg) }
.donut .track{ fill:none; stroke:var(--hairline); stroke-width:6 }
.donut .val{ fill:none; stroke:var(--accent); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:0 999; transition:stroke-dasharray 1.6s var(--ease) }
.donut-meta .big{ font-size:30px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.donut-meta .big small{ font-size:15px; font-weight:500; color:var(--muted) }
.donut-meta .lbl{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:4px }

/* ---------- dark band ---------- */
.dark-band{ background:#0b0b0c; color:#fff; overflow:hidden; position:relative }
.dark-band::before{
  content:""; position:absolute; width:720px; height:720px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,113,227,.32), transparent 62%);
  top:-260px; right:-180px; pointer-events:none;
}
.dark-band .sub{ color:#a1a1a6 }
.dark-band .eyebrow{ color:#7dd3fc }

/* ---------- process ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:56px }
@media(max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:560px){ .steps{ grid-template-columns:1fr } }
.step .n{ font-family:var(--font-mono); font-size:12px; color:var(--accent); letter-spacing:.14em }
.step h4{ font-size:18px; font-weight:700; margin-top:10px; letter-spacing:-.01em }
.step p{ font-size:14px; color:var(--muted); margin-top:8px }
.step{ border-top:1px solid var(--hairline); padding-top:20px }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--hairline); background:var(--surface) }
footer .wrap{ padding:48px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap }
footer .fine{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--muted) }
footer nav{ display:flex; gap:22px; font-size:13px; color:var(--muted) }
footer nav a:hover{ color:var(--ink) }

/* ---------- forms (contact) ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:56px }
@media(max-width:820px){ .contact-grid{ grid-template-columns:1fr } }
.info-card{
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:32px; display:flex; flex-direction:column; gap:8px;
}
.info-card .k{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }
.info-card .v{ font-size:20px; font-weight:600; letter-spacing:-.01em }
.info-card .d{ font-size:14px; color:var(--muted) }

/* ---------- store grid ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px }
@media(max-width:900px){ .product-grid{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:560px){ .product-grid{ grid-template-columns:1fr } }
.product{
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:28px; transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.product:hover{ transform:translateY(-6px); box-shadow:var(--card-shadow) }
.product .ph{
  aspect-ratio:4/3; border-radius:12px; background:
    repeating-linear-gradient(-45deg, rgba(0,0,0,.04) 0 1px, transparent 1px 7px), var(--photo-bg);
  display:grid; place-items:center; color:var(--muted);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:18px;
}
.product h3{ font-size:18px; font-weight:700; letter-spacing:-.01em }
.product .p{ font-family:var(--font-mono); font-size:13px; color:var(--muted); margin-top:6px }

/* ---------- our work gallery ---------- */
.work{ padding:104px 0 96px }
.work .wrap{ margin-bottom:34px }
.work-strip{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 24px 22px; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--hairline) transparent;
}
.work-strip::-webkit-scrollbar{ height:8px }
.work-strip::-webkit-scrollbar-thumb{ background:var(--hairline); border-radius:99px }
.work-card{
  flex:0 0 auto; width:340px; margin:0; scroll-snap-align:center; cursor:zoom-in;
  border:1px solid var(--hairline); border-radius:var(--radius); overflow:hidden;
  background:var(--surface); transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.work-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 45%, var(--hairline)) }
.work-card img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block }
.work-card figcaption{ padding:14px 16px; font-size:13px; color:var(--muted) }
@media(min-width:1100px){ .work-strip{ padding-left:max(24px, calc((100vw - 1120px) / 2)) } }
@media(max-width:640px){ .work{ padding:72px 0 64px } .work-card{ width:76vw } }

.lightbox{
  position:fixed; inset:0; z-index:120; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; padding:32px;
  background:rgba(6,8,12,.92); backdrop-filter:blur(6px);
}
.lightbox[hidden]{ display:none }
.lightbox img{ max-width:min(92vw, 900px); max-height:78vh; object-fit:contain; border-radius:12px }
.lb-cap{ color:#e8ecf2; font-size:14px; text-align:center; margin:0 }
.lb-close{
  position:absolute; top:18px; right:22px; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:#fff;
  font-size:26px; line-height:1; cursor:pointer;
}
.lb-close:hover{ background:rgba(255,255,255,.18) }