:root {
  --ink:#0a0a0a;
  --paper:#f1f0eb;
  --acid:#b7ff3c;
  --muted:#9b9b94;
  --line:rgba(255,255,255,.16);
  --pad:clamp(24px,5vw,80px);
  --section-y:106px;
  --cyber:#63d8ff;
  --cyber-rgb:99,216,255;
  --commerce:#b7ff3c;
  --commerce-rgb:183,255,60;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body { margin:0; overflow-x:hidden; background:var(--ink); color:var(--paper); font-family:"Manrope",sans-serif; }
body::selection { background:var(--acid); color:var(--ink); }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
.section-pad { position:relative; padding-inline:var(--pad); scroll-margin-top:72px; }

.nav-wrap {
  position:fixed;
  inset:0 0 auto;
  z-index:15;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(18px,3vw,42px);
  height:88px;
  padding-inline:var(--pad);
  border-bottom:1px solid transparent;
  transition:height .3s ease,background-color .3s ease,border-color .3s ease;
}
.nav-wrap.scrolled { height:68px; border-color:var(--line); background:rgba(10,10,10,.96); }
.brand,footer>a:first-child { font-size:24px; font-weight:800; letter-spacing:-.08em; }
.brand span,footer>a:first-child span { color:var(--acid); }
.nav-wrap>nav { display:flex; justify-content:center; gap:clamp(18px,2.3vw,32px); }
.nav-wrap nav a { color:#c6c6c0; font:500 10px "DM Mono",monospace; letter-spacing:.09em; text-transform:uppercase; transition:color .2s ease; }
.nav-wrap nav a:hover,.nav-wrap nav a.active { color:var(--acid); }
.nav-actions { display:flex; align-items:center; gap:12px; }
.nav-cta { padding:11px 16px; border:1px solid #444; font:500 10px "DM Mono",monospace; letter-spacing:.05em; text-transform:uppercase; }
.nav-cta span { margin-left:8px; color:var(--acid); }
.lang-switch { display:flex; align-items:center; gap:3px; padding:4px; border:1px solid #343434; font:500 9px "DM Mono",monospace; letter-spacing:.08em; }
.lang-switch a,.lang-switch span { display:grid; min-width:28px; height:26px; place-items:center; }
.lang-switch span[aria-current="page"] { background:var(--paper); color:var(--ink); }
.lang-switch a { color:#777; }
.mobile-nav-toggle,.mobile-nav-only { display:none; }

.scroll-progress { position:fixed; inset:0 0 auto; z-index:30; height:2px; pointer-events:none; }
.scroll-progress span { display:block; width:100%; height:100%; background:linear-gradient(90deg,var(--commerce),var(--cyber)); transform:scaleX(var(--scroll-p,0)); transform-origin:left; }
.site-pointer-glow {
  position:fixed;
  inset:0 auto auto 0;
  z-index:14;
  width:clamp(300px,34vw,520px);
  aspect-ratio:1;
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  contain:strict;
  background:radial-gradient(circle,rgba(var(--commerce-rgb),.17),transparent 69%);
  filter:blur(6px);
  mix-blend-mode:screen;
  transform:translate3d(calc(var(--pointer-x,-600px) - 50%),calc(var(--pointer-y,-600px) - 50%),0);
  transition:opacity .22s ease;
}
.site-pointer-glow.is-visible { opacity:.68; }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .68s ease,transform .68s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.to-top { position:fixed; right:20px; bottom:20px; z-index:12; opacity:0; pointer-events:none; }
.to-top.show { opacity:1; pointer-events:auto; }
footer { min-height:110px; padding-inline:var(--pad); border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; color:#777; font:400 10px "DM Mono",monospace; text-transform:uppercase; }

@media (max-width:1050px) {
  .nav-wrap { grid-template-columns:auto 1fr auto; }
  .work-page .nav-wrap>nav { display:none; }
  .mobile-nav-toggle {
    position:relative;
    display:grid;
    width:42px;
    height:42px;
    flex:0 0 42px;
    place-content:center;
    gap:6px;
    padding:0;
    border:1px solid rgba(255,255,255,.22);
    background:#0b0d0c;
    color:var(--paper);
    cursor:pointer;
  }
  .mobile-nav-toggle span { display:block; width:18px; height:1px; background:currentColor; transition:transform .25s ease; }
  .nav-actions { justify-self:end; }
  .nav-actions .mobile-nav-toggle { display:grid; }
  .nav-wrap.mobile-menu-open { border-color:rgba(255,255,255,.16); background:#090b0a; }
  .nav-wrap.mobile-menu-open .mobile-nav-toggle span:first-child { transform:translateY(3.5px) rotate(45deg); }
  .nav-wrap.mobile-menu-open .mobile-nav-toggle span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
  .work-page .nav-wrap.mobile-menu-open>nav {
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:flex;
    max-height:calc(100svh - 68px);
    flex-direction:column;
    gap:0;
    padding:18px var(--pad) 26px;
    overflow-y:auto;
    border-block:1px solid rgba(255,255,255,.14);
    background:#0a0c0b;
    box-shadow:0 24px 70px rgba(0,0,0,.42);
  }
  .nav-wrap.mobile-menu-open nav a { display:flex; min-height:52px; align-items:center; border-bottom:1px solid rgba(255,255,255,.1); color:#e5e5df; font-size:11px; }
  .mobile-nav-only { display:flex!important; }
  body.mobile-nav-open { overflow:hidden; }
  body.mobile-nav-open::after { content:""; position:fixed; inset:0; z-index:14; background:rgba(6,7,7,.72); pointer-events:none; }
}

@media (max-width:760px) {
  :root { --section-y:64px; }
  .nav-wrap { grid-template-columns:auto 1fr; gap:10px; height:68px; }
  .nav-actions { gap:8px; }
  .work-page .nav-actions .lang-switch { display:none; }
  .nav-cta { padding:9px 10px; font-size:8px; }
  .site-pointer-glow { display:none; }
  footer { min-height:auto; padding-block:34px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .site-pointer-glow { display:none; }
}

/* A centred content frame prevents Shopify pages from stretching on ultra-wide displays. */
@media (min-width:1800px) {
  :root { --pad:max(96px,calc((100vw - 1720px)/2)); }
  .nav-wrap nav a { font-size:10.5px; }
}