/* ============================================================
   ndrws — futuristic technology consulting
   Design tokens + layout. Visuals driven by CSS vars + [data-direction].
   ============================================================ */

:root {
  /* palette */
  --teal: #00bfb3;
  --teal-bright: #1ad9cb;
  --coral: #f06449;
  --coral-bright: #ff7a5e;

  /* dark (hero) surface */
  --ink: #090b0f;
  --ink-2: #0e1117;
  --ink-3: #161a22;
  --line-dark: rgba(232, 238, 247, 0.10);
  --text-dark: #e9edf3;
  --text-dark-dim: #8b94a3;

  /* light (section) surface */
  --paper: #f2f3f1;
  --paper-2: #e9ebe7;
  --line-light: rgba(16, 20, 26, 0.12);
  --text-light: #12151b;
  --text-light-dim: #5a626c;

  /* accent system — swapped by Tweaks */
  --accent: var(--teal);
  --accent-2: var(--coral);
  --accent-soft: rgba(0, 191, 179, 0.14);

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 72px);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* in-page anchors land below the fixed nav, not under it */
#top, #capabilities, #work, #about, #contact { scroll-margin-top: 88px; }

body {
  margin: 0;
  font-family: var(--font-display);
  background: var(--ink);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

::selection { background: var(--accent); color: #04070a; }

a { color: inherit; text-decoration: none; }

/* ---------- shared layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--gutter);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
    color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
  /* stable compositing layer + isolated stacking context
     — prevents backdrop-filter repaint flicker when layers scroll behind it */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: transform;
  isolation: isolate;
}
.nav.scrolled {
  background: color-mix(in oklab, var(--ink) 84%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--line-dark);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 40px);
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--text-dark-dim);
  transition: color 0.25s var(--ease);
  position: relative;
}
.nav-links a:hover { color: var(--text-dark); }
.nav-links a.cta {
  color: var(--text-dark);
  border: 1px solid var(--line-dark);
  padding: 9px 16px;
  border-radius: 999px;
}
.nav-links a.cta:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 24px -8px var(--accent);
}
.nav-links .hide-sm { }

/* ---------- LOGO ---------- */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo svg { display: block; height: 26px; width: auto; overflow: visible; }
.logo .word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 23px;
  letter-spacing: -0.01em;
  line-height: 1;
}
.logo .caret {
  display: inline-block;
  width: 9px; height: 19px;
  margin-left: 3px;
  background: var(--accent);
  transform: translateY(2px);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* animated canvas bg */
#bg-canvas {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  display: block;
}

/* gradient + vignette overlays, varied per direction */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.hero-overlay .glow-a,
.hero-overlay .glow-b {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}
.hero-overlay .glow-a {
  width: 46vw; height: 46vw;
  left: -8vw; top: -10vw;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 60%, transparent), transparent 70%);
}
.hero-overlay .glow-b {
  width: 40vw; height: 40vw;
  right: -6vw; bottom: -14vw;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent-2) 55%, transparent), transparent 70%);
}
/* bottom fade into the light section */
.hero-fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 220px;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--ink));
  pointer-events: none;
}

.hero-inner {
  position: relative;
  width: 100%;
  padding-top: 96px;
  padding-bottom: 64px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: var(--text-dark-dim);
  padding: 7px 13px 7px 11px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: color-mix(in oklab, var(--ink-2) 60%, transparent);
  backdrop-filter: blur(6px);
  margin-bottom: clamp(22px, 4vh, 40px);
}
.hero-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px 1px var(--teal);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.hero h1 {
  font-weight: 500;
  font-size: clamp(40px, 7.4vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
.hero h1 .line2 { display: block; }
/* typed rotating phrase */
.type-wrap {
  display: inline;
  color: var(--accent);
}
.type-wrap .caret {
  display: inline-block;
  width: 0.5ch;
  margin-left: 2px;
  background: var(--accent-2);
  color: transparent;
  animation: blink 1.05s steps(1) infinite;
  transform: translateY(0.06em);
}
.type-bracket { color: var(--text-dark-dim); font-weight: 400; }

.hero-sub {
  margin: clamp(26px, 4vh, 38px) 0 0;
  max-width: 56ch;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--text-dark-dim);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: clamp(30px, 5vh, 46px);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  padding: 15px 22px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease),
    background 0.3s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn-primary {
  background: var(--accent);
  color: #04070a;
  box-shadow: 0 0 0 0 var(--accent);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -12px var(--accent), 0 0 0 1px color-mix(in oklab, var(--accent) 60%, transparent);
}
.btn-primary .arrow { transition: transform 0.3s var(--ease); }
.btn-primary:hover .arrow { transform: translateX(4px); }
.btn-ghost {
  color: var(--text-dark);
  border-color: var(--line-dark);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--text-dark-dim); transform: translateY(-2px); }

/* capability ticker under hero */
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: clamp(34px, 6vh, 56px);
}
.hero-tags span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--text-dark-dim);
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  padding: 6px 10px;
}
.hero-tags span b { color: var(--accent); font-weight: 500; }

/* scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: var(--text-dark-dim);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
}
.scroll-cue .bar {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: drop 2s var(--ease) infinite;
  transform-origin: top;
}
@keyframes drop {
  0% { transform: scaleY(0); opacity: 0; }
  40% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; transform-origin: bottom; }
}

/* ============================================================
   SERVICES (light section)
   ============================================================ */
.services {
  position: relative;
  background: var(--paper);
  color: var(--text-light);
  padding: clamp(90px, 13vh, 168px) 0 clamp(80px, 11vh, 150px);
  z-index: 1;
}
/* faint blueprint grid on the light section */
.services::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-light) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  opacity: 0.5;
  pointer-events: none;
}

.sec-head {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: clamp(48px, 7vh, 88px);
  max-width: 920px;
}
.sec-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text-light-dim);
}
.sec-kicker::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--accent-2);
}
.sec-head h2 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.sec-head h2 .em { color: var(--text-light-dim); }
.sec-head p {
  margin: 0;
  max-width: 60ch;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--text-light-dim);
  text-wrap: pretty;
}

.svc-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-light);
  border: 1px solid var(--line-light);
  border-radius: 16px;
  overflow: hidden;
}
.svc-card {
  position: relative;
  background: var(--paper);
  padding: clamp(26px, 3vw, 40px) clamp(24px, 2.6vw, 36px) clamp(30px, 3.4vw, 44px);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  transition: background 0.45s var(--ease);
  overflow: hidden;
}
.svc-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.svc-card:hover { background: #fff; }
.svc-card:hover::after { transform: scaleX(1); }

.svc-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent-2);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.svc-num .gt { color: var(--accent); font-weight: 700; }
.svc-card h3 {
  margin: 0 0 12px;
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 25px);
  letter-spacing: -0.015em;
  line-height: 1.12;
}
.svc-card p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-light-dim);
  text-wrap: pretty;
}
.svc-offers {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.svc-offers span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--text-light-dim);
  background: var(--paper-2);
  border-radius: 5px;
  padding: 5px 9px;
}

/* closing strip / contact tease */
.sec-foot {
  margin-top: clamp(48px, 7vh, 80px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 34px;
  border-top: 1px solid var(--line-light);
}
.sec-foot .label { color: var(--text-light-dim); }
.sec-foot h4 {
  margin: 8px 0 0;
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.02em;
}
.sec-foot .mail {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 15px 22px;
  border-radius: 10px;
  background: var(--text-light);
  color: var(--paper);
  transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease);
}
.sec-foot .mail:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(0,0,0,0.5); }
.sec-foot .mail .gt { color: var(--accent); }

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.06s; }
.reveal[data-d="2"] { transition-delay: 0.12s; }
.reveal[data-d="3"] { transition-delay: 0.18s; }
.reveal[data-d="4"] { transition-delay: 0.24s; }
.reveal[data-d="5"] { transition-delay: 0.30s; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 980px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .nav-links .hide-sm { display: none; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card { min-height: 0; }
  .hero h1 { font-size: clamp(38px, 11vw, 64px); }
  /* reserve a stable two-line box for the typed phrase so changing word
     length (and its wrapping) never reflows the page below the hero */
  .hero h1 .line2 {
    min-height: 1.96em;
    align-content: start;
  }
}

/* direction tweaks toggle a class on <html> for canvas + overlay flavor.
   colors handled in JS; here we adjust overlay intensity per direction. */
html[data-direction="aurora"] .hero-overlay .glow-a,
html[data-direction="aurora"] .hero-overlay .glow-b { opacity: 0.7; }
html[data-direction="grid"] .hero-overlay .glow-a,
html[data-direction="grid"] .hero-overlay .glow-b { opacity: 0.32; }
html[data-direction="mesh"] .hero-overlay .glow-a,
html[data-direction="mesh"] .hero-overlay .glow-b { opacity: 0.4; }
html[data-direction="dots"] .hero-overlay .glow-a,
html[data-direction="dots"] .hero-overlay .glow-b { opacity: 0.45; }

/* tweak toggles */
html.no-caret .logo .caret { display: none; }
html.no-grid .services::before { display: none; }
/* mono headline reads tighter — pull the line height in */
html.mono-headline .hero h1 { letter-spacing: -0.04em; line-height: 0.96; font-size: clamp(34px, 6.2vw, 86px); }
html.mono-headline .sec-head h2 { letter-spacing: -0.03em; }

/* ============================================================
   BACK TO TOP
   ============================================================ */
.to-top {
  position: fixed;
  right: clamp(18px, 3vw, 34px);
  bottom: clamp(18px, 3vw, 34px);
  z-index: 40;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line-dark);
  background: color-mix(in oklab, var(--ink-2) 90%, transparent);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--text-dark);
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px) scale(0.92);
  pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease),
    border-color 0.25s var(--ease), box-shadow 0.3s var(--ease), color 0.25s var(--ease);
}
.to-top.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.to-top:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -12px var(--accent);
}
.to-top:active { transform: translateY(-1px) scale(0.96); }
.to-top svg {
  width: 20px;
  height: 20px;
  display: block;
}
.to-top svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   MOBILE PERFORMANCE — keep only the heavy GPU work disabled
   Isolation testing showed the overheating/jank comes from a few
   expensive COMPOSITING features, not animation in general. So on
   phones we disable just those three, and leave all the lightweight
   animation (typing, blinking carets, scroll reveals, marquee, hover
   transitions) running. Desktop is completely untouched.
   ============================================================ */
@media (max-width: 820px), (pointer: coarse) {
  /* 1. full-screen hero canvas — off (JS skips it too) */
  #bg-canvas { display: none !important; }

  /* 2. blur(90px) glow layers — keep the soft glow, drop the blur pass
        (a radial gradient is already soft, so it looks the same) */
  .hero-overlay .glow-a,
  .hero-overlay .glow-b {
    filter: none !important;
    -webkit-filter: none !important;
    will-change: auto !important;
    opacity: 0.4;
  }

  /* 3. live backdrop-filters re-sample the page every frame — off,
        replaced with solid-ish fills so the chrome still reads */
  .nav.scrolled, .hero-eyebrow, .contact-card, .to-top {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  .nav.scrolled { background: color-mix(in oklab, var(--ink) 92%, transparent); }
  .hero-eyebrow { background: color-mix(in oklab, var(--ink-2) 90%, transparent); }
  .contact-card { background: color-mix(in oklab, var(--ink-2) 94%, var(--ink)); }
  .to-top { background: color-mix(in oklab, var(--ink-2) 94%, var(--ink)); }

  /* The hero typing effect stays ON for mobile, but `text-wrap: balance`
     re-balances the WHOLE headline on every keystroke (~16x/sec) — that
     line-breaking recompute + repaint was the real cost. Switch the
     headline to normal wrapping on phones so each keystroke is cheap. */
  .hero h1 { text-wrap: normal !important; }
}