/* ==========================================================================
   YNTR — by the DoubleSlit Project, iViRTH
   Design system: two forces in one system — GOLD (particle / precision)
   and VIOLET (wave / possibility) — interfering throughout the page.
   Light mode: --paper is the page (the light the pattern falls on),
   --ink is the mark it leaves.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* ---- color: named tokens ---- */
  --paper:      #FAF7F0;   /* base background, warm ivory */
  --paper-soft: #F1EBDC;   /* alternate section background */
  --surface:    #FFFFFF;   /* card / panel surface */
  --surface-2:  #FCFAF4;   /* slightly warm surface (nested panels) */
  --line:       #E4DDCB;   /* hairline borders */
  --line-strong:#D6CBAF;   /* more visible borders (cards, tables) */
  --ink:        #17181C;   /* primary text */
  --heading:    #211F22;   /* headline text, near-black warm */
  --muted:      #5C5F6C;   /* secondary text, cool grey */
  --faint:      #8B8D97;   /* tertiary text, captions */
  --gold:       #93641F;   /* primary accent — text-safe (AA) */
  --gold-bright:#CE9C42;   /* decorative gold — gradients, icons, glows */
  --gold-dim:   #6E4C18;   /* recessed gold — active/pressed states */
  --gold-wash:  #F4E6C8;   /* pale gold background wash */
  --violet:     #5A4FD1;   /* secondary accent — text-safe (AA) */
  --violet-bright:#7C6FE8; /* decorative violet — gradients, icons */
  --violet-soft:#DAD3F8;   /* pale violet background wash */
  --good:       #3E7D4C;   /* status: shipping / available */
  --pending:    #A9681B;   /* status: in development */

  /* ---- shadows (soft, warm — not harsh black) ---- */
  --shadow-xs:  0 1px 2px rgba(35,26,10,.05);
  --shadow-sm:  0 4px 14px rgba(35,26,10,.06);
  --shadow-md:  0 18px 40px -16px rgba(35,26,10,.16);
  --shadow-lg:  0 34px 72px -28px rgba(35,26,10,.22);
  --shadow-gold: 0 20px 44px -18px rgba(147,100,31,.35);
  --shadow-violet: 0 20px 44px -18px rgba(90,79,209,.28);

  /* ---- type ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-hero: clamp(2.5rem, 5vw + 1rem, 5.1rem);
  --fs-h2:   clamp(1.9rem, 2.4vw + 1rem, 3.2rem);
  --fs-h3:   clamp(1.3rem, 1vw + 1rem, 1.8rem);
  --fs-h4:   1.1rem;
  --fs-lead: clamp(1.05rem, 0.4vw + 1rem, 1.2rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* ---- layout ---- */
  --container: min(1180px, 92vw);
  --col-text: min(640px, 88vw);
  --radius-hard: 6px;     /* particle: sharp edges */
  --radius-soft: 28px;    /* wave: soft, blurred edges */
  --radius-card: 16px;
  --radius-pill: 999px;

  --ease-wave: cubic-bezier(.22,.68,.32,1);
  --ease-spring: cubic-bezier(.34,1.4,.4,1);
  --dur-fast: .22s;
  --dur-med: .5s;
  --dur-slow: .9s;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
/* subtle paper grain — pure CSS, no image asset */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
h1,h2,h3,h4,p,figure{ margin: 0; }
::selection{ background: var(--gold-bright); color: var(--ink); }

/* visible keyboard focus, always */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--gold-dim);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link{
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--ink);
  color: var(--paper);
  padding: .6rem 1rem;
  border-radius: var(--radius-hard);
  font-weight: 600;
  z-index: 1000;
  transition: top var(--dur-fast) var(--ease-wave);
}
.skip-link:focus{ top: 1rem; }

.container{
  width: var(--container);
  margin-inline: auto;
}

/* ==========================================================================
   Scroll progress bar
   ========================================================================== */
.scroll-progress{
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  z-index: 700;
  background: transparent;
  pointer-events: none;
}
.scroll-progress span{
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-bright), var(--violet-bright));
  transform-origin: left;
  transition: width .08s linear;
}

/* ==========================================================================
   Custom cursor (desktop, fine-pointer only)
   ========================================================================== */
.cursor-dot, .cursor-ring{
  position: fixed;
  left: 0; top: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  will-change: transform;
}
.cursor-dot{
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-dim);
}
.cursor-ring{
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(110,76,24,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width var(--dur-fast) var(--ease-wave), height var(--dur-fast) var(--ease-wave),
              border-radius var(--dur-fast) var(--ease-wave), border-color var(--dur-fast);
}
.cursor-ring.is-active{
  width: 14px; height: 14px;
  border-radius: 2px;
  border-color: var(--violet);
}
.cursor-ring .cursor-label{
  position: absolute;
  top: 130%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--surface);
  background: var(--ink);
  padding: .3rem .55rem;
  border-radius: var(--radius-pill);
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.cursor-ring.is-labeled .cursor-label{ opacity: 1; }
.has-custom-cursor, .has-custom-cursor *{ cursor: none !important; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-fast) var(--ease-wave), background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
  white-space: nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #211505;
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 26px 50px -18px rgba(147,100,31,.45); }
.btn-ghost{
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: var(--surface);
}
.btn-ghost:hover{
  border-color: var(--gold);
  color: var(--gold-dim);
  transform: translateY(-2px);
}
.btn-small{ padding: .6rem 1.1rem; font-size: .85rem; }

/* magnetic wrapper (JS adds transform) */
.magnetic{ display: inline-block; }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 610;
  padding: 1.35rem 0;
  transition: padding var(--dur-med) var(--ease-wave), background var(--dur-med), border-color var(--dur-med), backdrop-filter var(--dur-med), box-shadow var(--dur-med);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled{
  padding: .8rem 0;
  background: rgba(250,247,240,.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(35,26,10,.02), var(--shadow-sm);
}
.nav .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.nav-brand{
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: .01em;
  color: var(--heading);
}
.nav-brand img{ width: 26px; height: auto; }
.nav-links{
  display: flex;
  align-items: center;
  gap: 1.65rem;
}
.nav-links a{
  font-size: .9rem;
  color: var(--muted);
  position: relative;
  padding: .2rem 0;
  transition: color var(--dur-fast);
}
.nav-links a:hover, .nav-links a.is-active{ color: var(--ink); }
.nav-links a::after{
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-wave);
}
.nav-links a:hover::after, .nav-links a.is-active::after{ transform: scaleX(1); }
.nav-actions{ display: flex; align-items: center; gap: 1rem; }
.nav-cta{ display: inline-flex; }

.nav-toggle{
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  z-index: 620;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content: '';
  display: block;
  width: 20px; height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur-fast) var(--ease-wave), opacity var(--dur-fast);
  position: relative;
}
.nav-toggle span::before{ position: absolute; top: -6px; }
.nav-toggle span::after{ position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span{ background: transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform: translateY(-6px) rotate(-45deg); }

.mobile-panel{
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 8vw;
  transform: translateY(-100%);
  transition: transform var(--dur-med) var(--ease-wave);
}
.mobile-panel.is-open{ transform: translateY(0); }
.mobile-panel a{
  font-family: var(--font-display);
  font-size: 2rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--heading);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease-wave), transform .5s var(--ease-wave);
}
.mobile-panel.is-open a{ opacity: 1; transform: translateY(0); }
.mobile-panel.is-open a:nth-child(1){ transition-delay: .06s; }
.mobile-panel.is-open a:nth-child(2){ transition-delay: .11s; }
.mobile-panel.is-open a:nth-child(3){ transition-delay: .16s; }
.mobile-panel.is-open a:nth-child(4){ transition-delay: .21s; }
.mobile-panel.is-open a:nth-child(5){ transition-delay: .26s; }
.mobile-panel.is-open a:nth-child(6){ transition-delay: .31s; }
.mobile-panel .btn{ margin-top: 1.6rem; align-self: flex-start; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 6rem;
  overflow: hidden;
}
.hero-blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  opacity: .55;
  z-index: 0;
}
.hero-blob-a{
  width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  top: -12%; right: -10%;
  background: radial-gradient(circle, var(--gold-wash), transparent 70%);
  animation: driftA 22s ease-in-out infinite;
}
.hero-blob-b{
  width: 38vw; height: 38vw; max-width: 520px; max-height: 520px;
  bottom: -14%; left: -8%;
  background: radial-gradient(circle, var(--violet-soft), transparent 70%);
  animation: driftB 26s ease-in-out infinite;
}
@keyframes driftA{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-4%, 5%) scale(1.06); }
}
@keyframes driftB{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(5%, -4%) scale(1.08); }
}
.hero-canvas{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1.4s var(--ease-wave);
  z-index: 1;
}
.hero-canvas.is-ready{ opacity: 1; }
.hero-veil{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(250,247,240,.1) 0%, rgba(250,247,240,.55) 62%, var(--paper) 100%);
  pointer-events: none;
  z-index: 1;
}
.hero-inner{
  position: relative;
  z-index: 2;
  width: var(--container);
  margin-inline: auto;
}
.hero-kicker{
  font-size: .95rem;
  color: var(--muted);
  margin-bottom: 1.6rem;
  opacity: 0;
  transform: translateY(8px);
}
.hero-kicker strong{ color: var(--gold-dim); font-weight: 500; }
.hero h1{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1.06;
  max-width: 17ch;
  color: var(--heading);
}
.hero h1 span{
  display: block;
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
}
.hero-lead{
  margin-top: 1.8rem;
  max-width: 46ch;
  font-size: var(--fs-lead);
  color: var(--muted);
  opacity: 0;
  transform: translateY(8px);
}
.hero-actions{
  margin-top: 2.6rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(8px);
}
.hero-scroll{
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  color: var(--faint);
  font-size: .78rem;
  z-index: 2;
}
.hero-scroll i{
  width: 1px; height: 34px;
  background: linear-gradient(var(--gold), transparent);
  display: block;
  animation: scrollHint 2.2s ease-in-out infinite;
}
@keyframes scrollHint{
  0%{ transform: scaleY(0); transform-origin: top; opacity: 0; }
  35%{ transform: scaleY(1); transform-origin: top; opacity: 1; }
  55%{ transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100%{ transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* hero load sequence — one orchestrated moment */
.hero.is-resolved .hero-kicker,
.hero.is-resolved .hero-lead,
.hero.is-resolved .hero-actions{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .9s var(--ease-wave), transform .9s var(--ease-wave);
}
.hero.is-resolved .hero-kicker{ transition-delay: .05s; }
.hero.is-resolved h1 span{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity 1s var(--ease-wave), transform 1s var(--ease-wave), filter 1s var(--ease-wave);
}
.hero.is-resolved h1 span:nth-child(1){ transition-delay: .15s; }
.hero.is-resolved h1 span:nth-child(2){ transition-delay: .32s; }
.hero.is-resolved .hero-lead{ transition-delay: .55s; }
.hero.is-resolved .hero-actions{ transition-delay: .7s; }

/* ==========================================================================
   Section scaffolding + reveal utilities
   ========================================================================== */
section{ position: relative; padding: clamp(4.5rem, 9vw, 8.5rem) 0; }
.section-head{
  max-width: var(--col-text);
  margin-bottom: 3.2rem;
}
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 1rem;
}
.eyebrow::before{
  content: '';
  width: 16px; height: 1px;
  background: var(--gold);
}
.section-head h2{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.14;
  color: var(--heading);
}
.section-head p{
  margin-top: 1.1rem;
  font-size: var(--fs-lead);
  color: var(--muted);
  max-width: 56ch;
}

.fade-el, [data-reveal]{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease-wave), transform .8s var(--ease-wave);
  transition-delay: var(--reveal-delay, 0s);
}
.fade-el.is-visible, [data-reveal].is-visible{ opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Approach / manifesto (asymmetric two-column)
   ========================================================================== */
.approach{ background: var(--paper-soft); }
.approach .container{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 4vw;
  align-items: start;
}
.approach .container > *, .research .container > *, .developers .container > *,
.languages .container > *, .doubleslit .container > *{ min-width: 0; }
.approach-text p{
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 56ch;
  margin-top: 1.1rem;
}
.approach-text p:first-of-type{ margin-top: 0; }
.pull{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2.1rem);
  line-height: 1.35;
  color: var(--heading);
  margin: 2.1rem 0;
  max-width: 22ch;
}
.approach-visual{
  position: sticky;
  top: 7rem;
  aspect-ratio: 1 / 1.05;
  border-radius: var(--radius-soft);
  border: 1px solid var(--line);
  background: radial-gradient(circle at 30% 20%, rgba(147,100,31,.09), transparent 55%),
              radial-gradient(circle at 75% 75%, rgba(90,79,209,.1), transparent 55%),
              var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.approach-visual svg{ width: 100%; height: 100%; }

/* ==========================================================================
   Models / spectrum
   ========================================================================== */
.spectrum-axis{
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: var(--col-text);
  margin: -1.4rem 0 2.6rem;
  color: var(--faint);
  font-size: .82rem;
  font-family: var(--font-mono);
}
.spectrum-axis .bar{
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-bright), var(--violet-bright));
  border-radius: 2px;
}

.model-track-wrap{
  position: relative;
  width: 100%;
}
.model-track{
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: .5rem max(1.2rem, calc((100vw - var(--container)) / 2)) 2.4rem;
  scrollbar-width: none;
  cursor: grab;
}
.model-track.is-dragging{ cursor: grabbing; scroll-snap-type: none; }
.model-track::-webkit-scrollbar{ display: none; }

.model-card{
  flex: 0 0 auto;
  width: min(340px, 78vw);
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 2rem 1.8rem 2.2rem;
  transition: transform var(--dur-med) var(--ease-wave), border-color var(--dur-med), box-shadow var(--dur-med);
  user-select: none;
  transform-style: preserve-3d;
  will-change: transform;
}
.model-card:hover, .model-card:focus-within{
  border-color: var(--card-tint, var(--gold));
  box-shadow: var(--shadow-md);
}
.model-orb{
  width: 44px; height: 44px;
  border-radius: 50%;
  margin-bottom: 1.6rem;
  background: radial-gradient(circle at 35% 30%, var(--card-tint, var(--gold)), transparent 70%),
              var(--paper-soft);
  border: 1px solid var(--card-tint, var(--gold));
  position: relative;
}
.model-name{
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--heading);
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
}
.model-name .tag{
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--card-tint, var(--gold));
  border: 1px solid var(--card-tint, var(--gold));
  border-radius: var(--radius-pill);
  padding: .15rem .55rem;
}
.model-role{
  margin-top: .5rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--card-tint, var(--gold-dim));
}
.model-card p.desc{
  margin-top: 1rem;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
}
.model-nav{
  display: flex;
  gap: .7rem;
  margin-top: -.8rem;
  margin-bottom: 2.2rem;
}
.model-nav button{
  width: 38px; height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast), transform var(--dur-fast), color var(--dur-fast);
  color: var(--ink);
}
.model-nav button:hover{ border-color: var(--gold); transform: translateY(-2px); color: var(--gold-dim); }
.model-nav svg{ width: 16px; height: 16px; }

/* ==========================================================================
   Hardware — overview cards
   ========================================================================== */
.hardware{ background: var(--paper); }
.hardware-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
.hw-card{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-med) var(--ease-wave), border-color var(--dur-med);
  transform-style: preserve-3d;
  will-change: transform;
  display: flex;
  flex-direction: column;
}
.hw-card:hover{ box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.hw-card-media{
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
  background: var(--paper-soft);
}
.hw-card-media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-wave);
}
.hw-card:hover .hw-card-media img{ transform: scale(1.06); }
.hw-card-body{ padding: 1.8rem 1.9rem 2.1rem; display: flex; flex-direction: column; flex: 1; }
.hw-card-body h3{
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--heading);
  margin-top: .9rem;
}
.hw-card-role{ font-size: .88rem; color: var(--gold-dim); font-weight: 500; margin-top: .3rem; }
.hw-card-body p.desc{ margin-top: .9rem; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.hw-chip-row{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.3rem; }
.hw-chip{
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: .32rem .7rem;
}
.hw-card-foot{
  margin-top: auto;
  padding-top: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.hw-explore{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
  transition: gap var(--dur-fast) var(--ease-wave), color var(--dur-fast);
}
.hw-explore svg{ width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-wave); }
.hw-card:hover .hw-explore{ gap: .65rem; color: var(--gold-dim); }
.hw-card:hover .hw-explore svg{ transform: translateX(2px); }

/* status badge */
.status-badge{
  position: absolute;
  top: 1.1rem; left: 1.1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .03em;
  padding: .4rem .8rem .4rem .65rem;
  border-radius: var(--radius-pill);
  background: rgba(250,247,240,.92);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--line);
  color: var(--ink);
}
.status-badge .dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-badge.is-live .dot{ background: var(--good); box-shadow: 0 0 0 3px rgba(62,125,76,.18); }
.status-badge.is-dev .dot{ background: var(--pending); animation: pulseDot 1.8s ease-in-out infinite; }
@keyframes pulseDot{
  0%,100%{ box-shadow: 0 0 0 0 rgba(169,104,27,.35); }
  50%{ box-shadow: 0 0 0 5px rgba(169,104,27,0); }
}
.status-badge.static{ position: static; background: var(--surface); }

/* ==========================================================================
   Product detail sections (Smart Solar Bench / Robotic Totem)
   ========================================================================== */
.product-detail.alt{ background: var(--paper-soft); }
.product-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.6rem;
}
.product-head .heading-block{ max-width: var(--col-text); }
.product-head h2{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  color: var(--heading);
  line-height: 1.1;
}
.product-lead{ margin-top: 1.1rem; font-size: var(--fs-lead); color: var(--muted); max-width: 60ch; }

.product-layout{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 4vw;
  align-items: start;
  margin-top: 3rem;
}

/* gallery */
.gallery{ position: sticky; top: 6.5rem; }
.gallery-main{
  aspect-ratio: 4/3;
  border-radius: var(--radius-soft);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  position: relative;
  cursor: zoom-in;
}
.gallery-main img{
  width: 100%; height: 100%; object-fit: cover;
  opacity: 1;
  transition: opacity .35s var(--ease-wave), transform .6s var(--ease-wave);
}
.gallery-main.is-swapping img{ opacity: 0; }
.gallery-main:hover img{ transform: scale(1.03); }
.gallery-zoom-hint{
  position: absolute;
  right: 1rem; bottom: 1rem;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(250,247,240,.9);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}
.gallery-zoom-hint svg{ width: 16px; height: 16px; }
.gallery-caption{
  margin-top: .9rem;
  font-size: .85rem;
  color: var(--faint);
  font-family: var(--font-mono);
}
.gallery-thumbs{
  display: flex;
  gap: .7rem;
  margin-top: .9rem;
}
.gallery-thumbs button{
  width: 64px; height: 64px;
  border-radius: var(--radius-hard);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  opacity: .68;
  transition: opacity var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
  flex-shrink: 0;
}
.gallery-thumbs button img{ width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs button:hover{ opacity: 1; transform: translateY(-2px); }
.gallery-thumbs button.is-active{ opacity: 1; border-color: var(--gold); }

/* feature grid */
.feature-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem 1.6rem;
  margin-top: 2.2rem;
}
.feature-item{ display: flex; gap: .9rem; }
.feature-icon{
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-wash);
  color: var(--gold-dim);
}
.feature-icon svg{ width: 18px; height: 18px; }
.feature-item h4{ font-size: .98rem; font-weight: 600; color: var(--heading); }
.feature-item p{ margin-top: .3rem; font-size: .88rem; color: var(--muted); line-height: 1.55; }

/* roadmap / version timeline */
.roadmap{ margin-top: 3rem; }
.roadmap h3{
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--heading);
  margin-bottom: 1.6rem;
}
.roadmap-track{
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}
.roadmap-track::before{
  content: '';
  position: absolute;
  top: 22px; left: 0; right: 0;
  height: 2px;
  background: var(--line-strong);
  z-index: 0;
}
.roadmap-track.stage-4{ grid-template-columns: repeat(4,1fr); }
.roadmap-step{ position: relative; z-index: 1; }
.roadmap-step .rs-dot{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--faint);
  transition: border-color var(--dur-med), color var(--dur-med), background var(--dur-med), box-shadow var(--dur-med);
}
.roadmap-step.is-done .rs-dot{ border-color: var(--good); color: var(--good); background: var(--surface); }
.roadmap-step.is-current .rs-dot{
  border-color: var(--pending);
  color: var(--pending);
  background: var(--surface);
  box-shadow: 0 0 0 5px rgba(169,104,27,.14);
}
.roadmap-step h4{ margin-top: 1rem; font-size: .98rem; font-weight: 600; color: var(--heading); }
.roadmap-step .rs-tag{
  display: inline-block;
  margin-top: .35rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--faint);
}
.roadmap-step.is-done .rs-tag{ color: var(--good); }
.roadmap-step.is-current .rs-tag{ color: var(--pending); }
.roadmap-step p{ margin-top: .5rem; font-size: .86rem; color: var(--muted); line-height: 1.55; max-width: 34ch; }

.roadmap-track.reveal-line::before{
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-wave);
}
.roadmap-track.reveal-line.is-visible::before{ transform: scaleX(1); }

.product-note{
  margin-top: 2.4rem;
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius-hard);
  background: var(--gold-wash);
  border: 1px solid rgba(147,100,31,.18);
  color: var(--gold-dim);
  font-size: .88rem;
  display: flex;
  gap: .7rem;
  align-items: flex-start;
}
.product-note.violet{ background: var(--violet-soft); border-color: rgba(90,79,209,.18); color: #3A2FA0; }
.product-note svg{ width: 17px; height: 17px; flex-shrink: 0; margin-top: .1rem; }

.product-actions{ margin-top: 2.2rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* concept-art tag on totem gallery */
.concept-flag{
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: rgba(23,24,28,.82);
  color: var(--paper);
  padding: .35rem .7rem;
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 4vw;
  background: rgba(23,24,28,.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-wave), visibility var(--dur-med);
}
.lightbox.is-open{ opacity: 1; visibility: visible; }
.lightbox-frame{
  position: relative;
  max-width: 1100px;
  width: 100%;
  transform: scale(.96);
  transition: transform var(--dur-med) var(--ease-spring);
}
.lightbox.is-open .lightbox-frame{ transform: scale(1); }
.lightbox-frame img{
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--radius-hard);
  background: var(--ink);
}
.lightbox-caption{
  margin-top: 1rem;
  color: var(--paper);
  opacity: .75;
  font-size: .85rem;
  font-family: var(--font-mono);
  text-align: center;
}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(250,247,240,.12);
  border: 1px solid rgba(250,247,240,.25);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background: rgba(250,247,240,.22); }
.lightbox-close{ top: -.5rem; right: -.5rem; transform: translate(50%,-50%); }
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg{ width: 18px; height: 18px; }
.lightbox-prev{ left: -1.4rem; top: 50%; transform: translateY(-50%); }
.lightbox-next{ right: -1.4rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 720px){
  .lightbox-prev{ left: .3rem; }
  .lightbox-next{ right: .3rem; }
  .lightbox-close{ top: .3rem; right: .3rem; transform: none; }
}

/* ==========================================================================
   Process (legitimate sequence — numbered)
   ========================================================================== */
.process{ background: var(--paper-soft); }
.process-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-hard);
  overflow: hidden;
}
.process-item{
  background: var(--surface);
  padding: 2.4rem 2rem;
  transition: background var(--dur-med);
}
.process-item:hover{ background: var(--surface-2); }
.process-num{
  font-family: var(--font-mono);
  color: var(--gold);
  font-size: .9rem;
}
.process-item h3{
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  margin-top: .9rem;
  color: var(--heading);
}
.process-item p{
  margin-top: .8rem;
  color: var(--muted);
  font-size: .92rem;
}

/* ==========================================================================
   Research / safety (two differentiated sub-blocks, not identical cards)
   ========================================================================== */
.research .container{
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 4vw;
}
.research-block + .research-block{
  margin-top: 3.2rem;
  padding-top: 3.2rem;
  border-top: 1px solid var(--line);
}
.research-block h3{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--heading);
}
.research-block p{
  margin-top: .9rem;
  color: var(--muted);
  max-width: 58ch;
}

/* ==========================================================================
   Developers / API
   ========================================================================== */
.developers{ background: var(--paper-soft); }
.developers .container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  align-items: center;
}
.code-window{
  background: #17181C;
  border: 1px solid #2B2C33;
  border-radius: var(--radius-hard);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.code-bar{
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid #2B2C33;
}
.code-bar span{ width: 9px; height: 9px; border-radius: 50%; background: #3A3B42; }
.code-bar span:nth-child(1){ background: #E5675F; }
.code-bar span:nth-child(2){ background: #E5B95F; }
.code-bar span:nth-child(3){ background: #6FBF77; }
.code-bar em{
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: #8A8C96;
  margin-left: .6rem;
}
pre.code{
  margin: 0;
  padding: 1.6rem 1.5rem;
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.75;
  overflow-x: auto;
  color: #EDEBE3;
}
.tok-key{ color: #A79CF2; }
.tok-str{ color: #F2CE7C; }
.tok-com{ color: #8A8C96; }
.tok-fn{ color: #7FD8C9; }

.dev-features{ margin-top: 2.2rem; display: grid; gap: 1.1rem; }
.dev-features li{
  display: flex;
  gap: .9rem;
  color: var(--muted);
  font-size: .95rem;
}
.dev-features svg{ flex-shrink: 0; width: 18px; height: 18px; margin-top: .15rem; color: var(--gold); }

/* ==========================================================================
   Languages
   ========================================================================== */
.languages .container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  align-items: center;
}
.lang-cloud{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .7rem;
}
.lang-cloud span{
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: .45rem .95rem;
  background: var(--surface);
  transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
  display: inline-block;
}
.lang-cloud span:hover{ color: var(--gold-dim); border-color: var(--gold); transform: translateY(-2px); }

/* ==========================================================================
   DoubleSlit Project / about
   ========================================================================== */
.doubleslit{ background: var(--paper-soft); }
.doubleslit .container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4vw;
  align-items: center;
}
.ds-visual{
  aspect-ratio: 4/3;
  border-radius: var(--radius-soft);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.ds-visual canvas{ width: 100%; height: 100%; display: block; }
.byline{
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 2rem;
}
.byline img{ width: 26px; opacity: .9; }
.byline span{ font-size: .88rem; color: var(--muted); }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{
  text-align: left;
}
.cta-panel{
  border: 1px solid var(--line);
  border-radius: var(--radius-soft);
  padding: clamp(2.4rem, 5vw, 5rem);
  background: radial-gradient(120% 140% at 15% 0%, rgba(147,100,31,.1), transparent 55%),
              radial-gradient(120% 140% at 90% 100%, rgba(90,79,209,.1), transparent 55%),
              var(--surface);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2.2rem;
}
.cta-panel h2{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  max-width: 14ch;
  color: var(--heading);
}
.cta-actions{ display: flex; gap: 1rem; flex-wrap: wrap; }

/* ==========================================================================
   Footer
   ========================================================================== */
footer{
  padding: 4.5rem 0 2.2rem;
  border-top: 1px solid var(--line);
  background: var(--paper-soft);
}
.footer-top{
  display: grid;
  grid-template-columns: 1.3fr repeat(4, .9fr);
  gap: 2.4rem;
}
.footer-brand{ max-width: 30ch; }
.footer-brand .nav-brand{ margin-bottom: 1rem; }
.footer-brand p{ color: var(--muted); font-size: .9rem; }
.footer-col h4{
  font-size: .85rem;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 1.1rem;
}
.footer-col ul{ display: grid; gap: .75rem; }
.footer-col a{
  color: var(--muted);
  font-size: .88rem;
  transition: color var(--dur-fast);
}
.footer-col a:hover{ color: var(--gold-dim); }
.footer-bottom{
  margin-top: 3.4rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .82rem;
  color: var(--faint);
}
.footer-socials{ display: flex; gap: 1rem; }
.footer-socials a{
  width: 34px; height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.footer-socials a:hover{ border-color: var(--gold); color: var(--gold-dim); transform: translateY(-2px); }
.footer-socials svg{ width: 15px; height: 15px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px){
  .nav-links{ gap: 1.2rem; }
  .nav-links a{ font-size: .85rem; }
}

@media (max-width: 1024px){
  .approach .container, .research .container, .developers .container,
  .languages .container, .doubleslit .container{
    grid-template-columns: 1fr;
  }
  .approach-visual{ position: static; order: -1; aspect-ratio: 16/9; }
  .process-list{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .hardware-grid{ grid-template-columns: 1fr; }
  .product-layout{ grid-template-columns: 1fr; }
  .gallery{ position: static; }
  .feature-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px){
  .nav-links, .nav-actions .btn-ghost{ display: none; }
  .nav-toggle{ display: flex; }
  .has-custom-cursor .cursor-dot, .has-custom-cursor .cursor-ring{ display: none; }
}

@media (max-width: 640px){
  .hero h1{ max-width: 12ch; }
  .research .container{ gap: 2rem; }
  .cta-panel{ flex-direction: column; align-items: flex-start; }
  .footer-top{ grid-template-columns: 1fr 1fr; gap: 2rem 1.4rem; }
  .footer-brand{ grid-column: 1 / -1; max-width: none; }
  .model-card{ width: 84vw; }
  .feature-grid{ grid-template-columns: 1fr; }
  .roadmap-track.stage-4{ grid-template-columns: repeat(2,1fr); row-gap: 2rem; }
  .roadmap-track.stage-4::before{ display: none; }
  .product-head{ align-items: flex-start; }
}

@media (hover: none) and (pointer: coarse){
  .has-custom-cursor .cursor-dot, .has-custom-cursor .cursor-ring{ display: none; }
  body{ cursor: auto !important; }
  .has-custom-cursor, .has-custom-cursor *{ cursor: auto !important; }
  .hw-card, .model-card{ transform: none !important; }
}