/* ---------- fonts ---------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/SpaceGrotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/SpaceGrotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF;
}

/* ---------- tokens ---------- */
:root{
  --bg: #05090e;
  --bg-soft: #0b1420;
  --panel: #0e1b2e;
  --line: rgba(245,247,250,0.10);
  --fg: #f4f7fa;
  --muted: #8b98ac;
  --accent: #00aeef;
  --accent-2: #00d4ff;
  --grad: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  --display: 'Space Grotesk', 'Inter', sans-serif;
  --body: 'Inter', sans-serif;
  --ease: cubic-bezier(.16,.84,.24,1);
  --container: 1400px;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ background: var(--bg); }
html.lenis{ height:auto; }
body{
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  cursor: none;
}
a{ color: inherit; text-decoration: none; }
img,video{ max-width:100%; display:block; }
::selection{ background: var(--accent); color:#05090e; }

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
}

/* ---------- grain overlay ---------- */
.grain{
  position: fixed; inset:0; z-index: 60; pointer-events:none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- custom cursor ---------- */
.cursor-dot, .cursor-ring{
  position: fixed; top:0; left:0; z-index: 90; pointer-events:none;
  border-radius: 50%; transform: translate(-50%,-50%);
  will-change: transform;
}
.cursor-dot{ width:6px; height:6px; background: var(--accent-2); }
.cursor-ring{
  width:38px; height:38px; border:1px solid rgba(245,247,250,0.35);
  transition: width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.cursor-ring.is-active{
  width:64px; height:64px; background: rgba(0,174,239,0.08); border-color: var(--accent-2);
}
@media (hover:none), (pointer:coarse){
  .cursor-dot, .cursor-ring{ display:none; }
  body{ cursor:auto; }
}

/* ---------- preloader ---------- */
.preloader{
  position: fixed; inset:0; z-index: 100; background: var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
}
.preloader__word{
  font-family: var(--display); font-weight:600; font-size: clamp(14px,2vw,18px);
  letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
}
.preloader__bar{ width: min(280px, 60vw); height:1px; background: var(--line); position:relative; overflow:hidden; }
.preloader__fill{ position:absolute; inset:0 100% 0 0; background: var(--grad); }
.preloader__pct{ font-family: var(--display); font-size: 13px; color: var(--fg); font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 26px clamp(20px,5vw,64px);
  mix-blend-mode: difference;
}
.brand{ font-family: var(--display); font-weight:700; font-size: 18px; letter-spacing:.02em; }
.site-nav{ display:flex; gap: clamp(16px,3vw,40px); }
.site-nav a{
  font-family: var(--display); font-size: 13px; letter-spacing:.08em; text-transform:uppercase;
  position:relative; padding-bottom:2px;
}
.site-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease);
}
.site-nav a:hover::after{ transform: scaleX(1); transform-origin: left; }
.site-nav{ display: none; }
@media (min-width: 720px){ .site-nav{ display:flex; } }

/* ---------- hero ---------- */
.hero{
  position: relative; min-height: 100svh; display:flex; align-items:flex-end;
  overflow:hidden; padding-bottom: clamp(40px,6vw,80px);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media video{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,9,14,.35) 0%, rgba(5,9,14,.55) 55%, rgba(5,9,14,.95) 100%),
    linear-gradient(90deg, rgba(5,9,14,.55) 0%, rgba(5,9,14,0) 40%);
}
.hero__content{ position:relative; z-index:2; width:100%; }
.hero__eyebrow{
  font-family: var(--display); font-size: 13px; letter-spacing:.35em; text-transform:uppercase;
  color: var(--accent-2); margin-bottom: 18px; display:flex; align-items:center; gap:10px;
}
.hero__eyebrow::before{ content:''; width:28px; height:1px; background: var(--accent-2); display:inline-block; }
.hero__title{
  font-family: var(--display); font-weight:700; text-transform:uppercase;
  font-size: clamp(52px, 11vw, 168px); line-height:.86; letter-spacing:-.01em;
}
.hero__title .line{ overflow:hidden; }
.hero__title .line span{ display:inline-block; will-change: transform; }
.hero__sub{
  margin-top: 26px; max-width: 620px; font-size: clamp(16px,1.6vw,20px); color: var(--muted); font-weight:400;
}
.hero__meta{
  margin-top: 44px; display:flex; flex-wrap:wrap; gap: clamp(20px,4vw,56px);
  font-family: var(--display); font-size: 12px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted);
}
.hero__meta b{ color: var(--fg); font-weight:600; display:block; margin-bottom:4px; font-size:11px; letter-spacing:.2em; color:var(--accent-2); }

.scroll-cue{
  position:absolute; right: clamp(20px,5vw,64px); bottom: 40px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family: var(--display); font-size:11px; letter-spacing:.25em; color: var(--muted);
  writing-mode: vertical-rl;
}
.scroll-cue__line{ width:1px; height:60px; background: var(--line); position:relative; overflow:hidden; writing-mode:horizontal-tb; }
.scroll-cue__line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--grad);
  animation: cueMove 1.8s ease-in-out infinite;
}
@keyframes cueMove{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ---------- marquee ---------- */
.marquee{
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 22px 0; overflow:hidden; white-space:nowrap; background: var(--bg-soft);
}
.marquee__track{ display:inline-flex; gap: 48px; animation: marquee 28s linear infinite; will-change: transform; }
.marquee__track span{
  font-family: var(--display); font-weight:600; font-size: clamp(20px,3vw,34px);
  text-transform:uppercase; letter-spacing:.02em; color: var(--muted); display:inline-flex; align-items:center; gap:48px;
}
.marquee__track span em{ font-style:normal; color: var(--accent-2); }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- section shell ---------- */
section{ position:relative; padding: clamp(90px,12vw,160px) 0; }
.eyebrow{
  font-family: var(--display); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color: var(--accent-2);
  display:flex; align-items:center; gap:10px; margin-bottom: 22px;
}
.eyebrow::before{ content: attr(data-num); color: var(--muted); }
.eyebrow::after{ content:''; flex:1; height:1px; background: var(--line); }
.section-title{
  font-family: var(--display); font-weight:700; text-transform:uppercase;
  font-size: clamp(32px, 5.4vw, 72px); line-height: 1.02; letter-spacing:-.01em; max-width: 16ch;
}

/* ---------- about ---------- */
.about__grid{ display:grid; grid-template-columns: 1fr; gap: 48px; margin-top: 48px; }
@media (min-width: 900px){ .about__grid{ grid-template-columns: 1.1fr .9fr; gap: 80px; } }
.about__lead{
  font-family: var(--display); font-weight:500; font-size: clamp(22px,2.6vw,34px); line-height:1.35; color: var(--fg);
}
.about__lead .hl{ color: var(--accent-2); }
.about__aside{ display:flex; flex-direction:column; gap: 28px; }
.about__aside p{ color: var(--muted); font-size:15px; line-height:1.75; }
.stat-row{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; padding-top:10px; border-top:1px solid var(--line); }
.stat{ display:flex; flex-direction:column; gap:6px; }
.stat b{ font-family: var(--display); font-size: clamp(26px,3vw,38px); }
.stat span{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); }

/* ---------- work ---------- */
.work-list{ margin-top: 40px; border-top: 1px solid var(--line); }
.work-item{
  display:grid; grid-template-columns: 60px 1fr; align-items:center; gap: 24px;
  padding: clamp(28px,4vw,44px) 0; border-bottom: 1px solid var(--line);
  position: relative; cursor: pointer;
}
.work-item__index{ font-family: var(--display); color: var(--muted); font-size:14px; }
.work-item__body{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap: 12px; }
.work-item__name{
  font-family: var(--display); font-weight:600; text-transform:uppercase;
  font-size: clamp(24px,4vw,48px); transition: transform .4s var(--ease), color .4s var(--ease);
}
.work-item__meta{ display:flex; align-items:center; gap: 28px; }
.work-item__tag{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); max-width: 30ch; text-align:right; }
.work-item__arrow{ width:44px; height:44px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease); }
.work-item__arrow svg{ width:16px; height:16px; }
.work-item:hover .work-item__arrow{ background: var(--accent-2); border-color: var(--accent-2); transform: rotate(45deg); }
.work-item:hover .work-item__arrow svg{ stroke:#05090e; }
.work-item:hover .work-item__name{ color: var(--accent-2); transform: translateX(10px); }

.work-preview{
  position: fixed; top:0; left:0; z-index: 45; width: 320px; height: 220px; pointer-events:none;
  border-radius: 4px; overflow:hidden; opacity:0; will-change: transform, opacity;
  transform: translate(-50%,-50%) scale(.92);
}
.work-preview__inner{ width:100%; height:100%; background: var(--panel); position:relative; }
.work-preview__inner::before{
  content:''; position:absolute; inset:0; background: var(--grad); opacity:.85; mix-blend-mode: normal;
}
.work-preview__inner::after{
  content: attr(data-label); position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family: var(--display); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#05090e; text-align:center; padding: 20px;
}

/* ---------- approach ---------- */
.approach-grid{ margin-top: 48px; display:grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 800px){ .approach-grid{ grid-template-columns: repeat(4,1fr); } }
.approach-step{ background: var(--bg); padding: clamp(28px,3vw,40px) clamp(20px,2.4vw,32px); display:flex; flex-direction:column; gap:16px; }
.approach-step__num{ font-family: var(--display); font-size:13px; color: var(--accent-2); letter-spacing:.1em; }
.approach-step h3{ font-family: var(--display); font-size: clamp(19px,2vw,22px); text-transform:uppercase; }
.approach-step p{ color: var(--muted); font-size: 14px; line-height:1.7; }

/* ---------- signal (webgl) ---------- */
.signal{ padding: 0; }
.signal__frame{ position:relative; height: clamp(360px,52vw,560px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.signal__canvas{ position:absolute; inset:0; }
.signal__text{
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; pointer-events:none;
}
.signal__text span{ font-family: var(--display); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color: var(--muted); }
.signal__text h2{ font-family: var(--display); font-weight:700; text-transform:uppercase; font-size: clamp(30px,5vw,64px); }

/* ---------- contact ---------- */
.contact{ text-align:center; }
.contact .eyebrow{ justify-content:center; }
.contact .eyebrow::before, .contact .eyebrow::after{ display:none; }
.contact__title{ font-family: var(--display); font-weight:700; text-transform:uppercase; font-size: clamp(40px,9vw,120px); line-height:.95; }
.contact__link{
  display:inline-block; margin-top: 34px; font-family: var(--display); font-weight:500;
  font-size: clamp(18px,2.4vw,26px); border-bottom: 1px solid var(--line); padding-bottom: 6px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.contact__link:hover{ color: var(--accent-2); border-color: var(--accent-2); }
.contact__socials{ margin-top: 56px; display:flex; justify-content:center; gap: 32px; flex-wrap:wrap; }
.contact__socials a{ font-family: var(--display); font-size:12px; letter-spacing:.15em; text-transform:uppercase; color: var(--muted); transition: color .3s; }
.contact__socials a:hover{ color: var(--accent-2); }

/* ---------- footer ---------- */
.site-footer{
  border-top: 1px solid var(--line); padding: 28px clamp(20px,5vw,64px);
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  font-family: var(--display); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted);
}
.site-footer a{ transition: color .3s; }
.site-footer a:hover{ color: var(--accent-2); }

/* ---------- magnetic ---------- */
.magnetic{ display:inline-block; will-change: transform; }

/* ---------- reveal utility ---------- */
.reveal{ opacity:0; transform: translateY(28px); }