*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#000;
  --fg:#fff;
  --fg-2:rgba(255,255,255,.52);
  --fg-3:rgba(255,255,255,.28);
  --fg-4:rgba(255,255,255,.14);
  --brd:rgba(255,255,255,.07);
  --brd-2:rgba(255,255,255,.12);
  --green:#86efac;
  --green-d:#22c55e;
  --ac:#60a5fa;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --hd-h:72px;
}
html{
  scroll-behavior:smooth;background:#000;
  /* Hero and catalog are the only two stops. Proximity, not mandatory:
     mandatory fights free scrolling inside the (very long) catalog. */
  scroll-snap-type:y proximity;
  scroll-padding-top:var(--hd-h);
}
html,body{
  background:#000;color:var(--fg);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body{
  display:flex;flex-direction:column;position:relative;min-height:100vh;
}
/* (The old body.landing-leaving leave-fade is gone — scrolling reveals the
   inline market now, nothing navigates away from the landing on scroll.) */

.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── Header ── */
.hd{
  position:fixed;top:0;left:0;right:0;height:var(--hd-h);z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:0 clamp(14px,3vw,48px);
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:saturate(140%) blur(16px);
  backdrop-filter:saturate(140%) blur(16px);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.hd::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,197,94,.2),transparent);
  pointer-events:none;
}
.lo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;transition:opacity .2s}
.lo:hover{opacity:.85}
.lo-t{font-weight:800;font-size:16.5px;color:#fff;white-space:nowrap;letter-spacing:-.3px}
.lo-t span,.lo-t .lo-sq{
  color:#60a5fa;font-weight:inherit;-webkit-text-fill-color:#60a5fa;
  text-shadow:0 0 10px rgba(96,165,250,.55);
}
.nv{
  display:flex;gap:2px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);border-radius:999px;padding:4px;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
}
.nv a{
  padding:8px 16px;border-radius:999px;color:var(--fg-3);text-decoration:none;
  font-size:13.5px;font-weight:600;letter-spacing:.1px;white-space:nowrap;
  transition:color .2s var(--ease-soft),background .2s var(--ease-soft);
}
.nv a:hover{color:#fff;background:rgba(255,255,255,.05)}
.nv a.act{
  color:#0b1220;background:#fff;font-weight:700;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.hd-r{display:flex;gap:8px;align-items:center;flex-shrink:0}
.lang{
  display:flex;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);border-radius:999px;padding:3px;
}
.lang button{
  border:0;padding:6px 11px;font-size:11px;font-weight:700;font-family:inherit;
  background:transparent;color:var(--fg-3);border-radius:999px;cursor:pointer;letter-spacing:.5px;
  transition:color .15s,background .15s;
}
.lang button.active{color:#0b1220;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.lang button:not(.active):hover{color:#fff;background:rgba(255,255,255,.05)}
.menu-btn{
  display:none;width:38px;height:38px;background:transparent;
  border:1px solid rgba(255,255,255,.08);border-radius:10px;cursor:pointer;position:relative;
}
.menu-btn span{
  position:absolute;left:9px;right:9px;height:1.5px;background:var(--fg);border-radius:1px;
  transition:transform .25s,opacity .2s,top .25s,bottom .25s;
}
.menu-btn span:nth-child(1){top:12px}
.menu-btn span:nth-child(2){top:50%;margin-top:-1px}
.menu-btn span:nth-child(3){bottom:12px}
.menu-btn.active span:nth-child(1){top:50%;margin-top:-1px;transform:rotate(45deg)}
.menu-btn.active span:nth-child(2){opacity:0}
.menu-btn.active span:nth-child(3){bottom:50%;margin-bottom:-1px;transform:rotate(-45deg)}

/* Header fav/cart removed — live only in userpod dropdown (see polish.css). */

@media(max-width:760px){
  :root{--hd-h:64px}
  .hd{height:var(--hd-h);padding:0 12px}
  .nv{display:none}
  .menu-btn{display:block}
  .lo-t{font-size:15px}
  .market-section .wrap{padding-top:16px}
}

.mobile-nav{
  position:fixed;inset:var(--hd-h) 0 0 0;background:rgba(0,0,0,.97);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  z-index:90;display:none;flex-direction:column;padding:28px 20px;gap:6px;
  opacity:0;transform:translateY(-10px);transition:opacity .25s,transform .25s;
}
.mobile-nav.active{display:flex;opacity:1;transform:translateY(0)}
.mobile-nav a{
  padding:16px;font-size:17px;font-weight:600;color:var(--fg-2);text-decoration:none;
  border-radius:10px;text-align:center;transition:color .15s,background .15s;
}
.mobile-nav a:hover,.mobile-nav a.active{color:#fff;background:rgba(255,255,255,.05)}

/* ── Shell: pure black, soft vignette only ── */
.landing-main{position:relative;z-index:10;flex:1}
.landing-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;background:#000;
}
.landing-bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 55% at 50% 42%,rgba(255,255,255,.035),transparent 70%);
}

/* ── Hero ── */
.hero-section{
  position:relative;z-index:1;
  min-height:100svh;min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--hd-h) + 24px) 24px 100px;
  text-align:center;
  scroll-snap-align:start;
}
.hero{max-width:860px;width:100%}
.hero .title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:clamp(56px,11vw,120px);font-weight:600;line-height:.95;
  letter-spacing:-.05em;color:#fff;margin:0;
  opacity:0;animation:fadeUp .9s var(--ease) .06s forwards;
}
.hero .title b{
  font-weight:700;
  background:linear-gradient(180deg,#fff 0%,#fff 55%,#a3a3a3 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero .title .ac{
  /* Real period — baseline, tight against letters, brand blue. */
  display:inline;
  margin:0;padding:0;border:0;
  background:none;
  color:var(--ac);
  -webkit-text-fill-color:var(--ac);
  font-style:normal;font-weight:700;
  text-shadow:0 0 .18em rgba(96,165,250,.55);
}
.hero .title .ac::before,
.hero .title .ac::after{content:none;display:none}
.cta-row{
  display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;
  opacity:0;animation:fadeUp .9s var(--ease) .18s forwards;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:48px;padding:0 22px;border-radius:999px;
  font-size:14px;font-weight:500;font-family:inherit;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .22s var(--ease-soft),background .22s,border-color .22s,color .22s,box-shadow .22s;
  letter-spacing:-.01em;line-height:1;box-sizing:border-box;
}
.btn-primary{
  background:#fff;color:#0a0c10;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 10px 28px -12px rgba(255,255,255,.45);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 16px 36px -12px rgba(255,255,255,.55);
}
.btn-primary:active{transform:translateY(0) scale(.985)}
.btn-arrow{width:16px;height:16px;flex-shrink:0;transition:transform .24s var(--ease-soft)}
.btn-primary .btn-arrow{stroke:#0a0c10}
.btn-primary:hover .btn-arrow{transform:translateX(4px)}
.btn-ghost{
  background:transparent;color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.14);
}
.btn-ghost:hover{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.28);
  color:#fff;transform:translateY(-2px);
}
.btn-ghost svg{width:15px;height:15px;flex-shrink:0;stroke:currentColor}
.btn-ghost .btn-arrow-dl{transition:transform .3s var(--ease-soft)}
.btn-ghost:hover .btn-arrow-dl{transform:translateY(2px)}

.scroll-hint{
  position:absolute;left:50%;bottom:32px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:none;border:0;color:var(--fg-3);cursor:pointer;padding:14px;
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  opacity:0;animation:fadeUp .8s var(--ease) .5s forwards;
  transition:color .2s,opacity .45s var(--ease-soft);
  -webkit-tap-highlight-color:transparent;
}
.scroll-hint:hover{color:#fff}
/* Once the user starts scrolling, the hint has done its job. !important is
   required to beat the fadeUp fill-forwards animation that owns opacity. */
body.hero-passed .scroll-hint{opacity:0!important;pointer-events:none}
.scroll-hint-line{
  width:1px;height:36px;
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);
  animation:linePulse 1.8s var(--ease) infinite;
}
.scroll-hint svg{
  width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;
  animation:scrollBounce 1.8s var(--ease) infinite;
}
@keyframes scrollBounce{
  0%,100%{transform:translateY(0);opacity:.4}
  50%{transform:translateY(6px);opacity:1}
}
@keyframes linePulse{
  0%,100%{opacity:.35;transform:scaleY(1)}
  50%{opacity:.8;transform:scaleY(1.08)}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Inline market: the shared /market catalog right below the hero ──
   Tile/filter/card styles come from market.css (the SAME file /market
   links, same ?v token). Rules here only knit the section into the
   landing: an opaque backdrop that covers the fixed WebGL field, a soft
   top seam, and a padding fix for .wrap (its own padding-top assumes it
   starts under the fixed header, which isn't true inside this section). */
.market-section{
  position:relative;z-index:1;
  /* No scroll-margin here: html already carries scroll-padding-top for the
     fixed header, and the two would stack into a double gap. */
  scroll-snap-align:start;
  background:linear-gradient(180deg,rgba(5,5,5,0) 0,rgba(5,5,5,.78) 120px,#050505 260px);
}
.market-section::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(880px,88vw);height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(96,165,250,.30) 30%,rgba(255,255,255,.35) 50%,rgba(96,165,250,.30) 70%,transparent);
}
/* Catalog opens straight under the fixed header. 24px is exactly the gap
   /market leaves (its .wrap pads header height + 24). */
.market-section .wrap{padding-top:24px}

.ftr{
  position:relative;z-index:10;flex-shrink:0;
  max-width:1280px;width:100%;margin:0 auto;margin-top:auto;
  padding:20px clamp(16px,3vw,48px);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:10px;color:rgba(255,255,255,.28);
  border-top:1px solid rgba(255,255,255,.06);box-sizing:border-box;
}
.ftr a{color:rgba(255,255,255,.28);text-decoration:none;margin-left:12px;transition:color .15s}
.ftr a:hover{color:rgba(255,255,255,.55)}

@media(max-width:768px){
  .ftr{font-size:9px;padding:14px clamp(14px,3vw,48px);flex-direction:column;gap:6px;text-align:center}
  .ftr a{margin-left:8px}
  .hero-section{padding:calc(var(--hd-h) + 16px) 16px 92px}
}
@media(max-width:420px){
  .hero .title{font-size:50px;letter-spacing:-.04em}
  .cta-row{flex-direction:column;width:100%;max-width:280px;margin:0 auto}
  .btn{width:100%;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:none}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .hero .title,.cta-row,.scroll-hint{opacity:1;transform:none;animation:none}
  .scroll-hint svg,.scroll-hint-line{animation:none}
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none!important}
}
@media(hover:none){
  a:hover,button:hover,[role="button"]:hover{transform:none!important}
}