/* ==========================================================================
   Macro-Hacker Tech
   Dark theme, one accent (phosphor lime), one radius scale (6px everywhere).
   Native CSS, no framework. Fonts: Geist + Geist Mono (self-hosted).
   z-index scale: nav 40, grain 60. Nothing else sets z-index above 1.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --bg: #0b0c0b;
  --surface: #121412;
  --surface-2: #171a17;
  --line: rgb(255 255 255 / 0.09);
  --line-strong: rgb(255 255 255 / 0.22);
  --text: #ecefe8;
  --muted: #a0a69a;
  --accent: #b9de5a;
  --accent-hover: #c9ea72;
  --on-accent: #0b0c0b;
  --error: #ff9b8c;

  --r: 6px;
  --nav-h: 68px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Lenis drives scroll smoothing in JS; native smooth-scroll would fight it. */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Film grain: fixed, non-interactive, never on a scrolling container */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r);
}

.wrap {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r);
  font-weight: 600;
}
.skip:focus { top: 1rem; z-index: 40; }

.ico {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: currentColor;
}
.ico--lg { width: 2rem; height: 2rem; }
.ico--xl { width: 2.75rem; height: 2.75rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: 48px;
  padding: 0 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  font: 600 0.95rem/1 var(--font-sans);
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }

.btn--ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { background: rgb(255 255 255 / 0.06); }

.btn--sm { height: 40px; padding: 0 1.1rem; font-size: 0.875rem; }
.btn--block { width: 100%; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s, border-color 0.3s, backdrop-filter 0.3s;
}
.nav.is-scrolled {
  background: rgb(11 12 11 / 0.78);
  border-bottom-color: var(--line);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
@media (prefers-reduced-transparency: reduce) {
  .nav.is-scrolled { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.brand__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.04em;
}
.brand__name { font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.brand__name span { font-family: var(--font-mono); font-weight: 400; color: var(--muted); font-size: 0.9em; }

.nav__links { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem); }

/* Phone menu: the button and panel only appear on small screens, and only when scripts are running. */
.nav__toggle, .nav__panel { display: none; }
.nav__toggle svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav__toggle .ico-close, .nav__toggle[aria-expanded="true"] .ico-menu { display: none; }
.nav__toggle[aria-expanded="true"] .ico-close { display: block; }
.nav__links > a:not(.btn) { color: var(--muted); font-size: 0.925rem; transition: color 0.2s; }
.nav__links > a:not(.btn):hover { color: var(--text); }

/* ---------- Hero: a website building itself inside a browser window ---------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--nav-h) + 2rem) 3rem;
  background: #07080a;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Still image doubles as the fallback (no video support, reduced motion). */
  background: #07080a url("assets/hero-bg.webp") center / cover no-repeat;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Left-weighted dark scrim keeps the copy legible; the right side stays vivid. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(7 8 10 / 0.82) 0%, rgb(7 8 10 / 0.6) 38%, rgb(7 8 10 / 0.12) 70%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* ---------- Hero layout: copy left, build stage right (stacks on mobile) ---------- */
.hero__layout {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  width: 100%;
}

.hero__content { max-width: 32rem; }
.hero__eyebrow {
  font: 500 0.8rem/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero__title {
  margin-top: 1.4rem;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--text);
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.55);
}
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.hero__title .line > span { display: block; }
.hero__title em { font-style: normal; color: var(--accent); }

.hero__sub {
  margin-top: 1.5rem;
  max-width: 30rem;
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: #d3d8cc;
  text-shadow: 0 1px 14px rgb(0 0 0 / 0.6);
}
.hero__cta { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero__mail {
  margin-top: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 500 0.9rem/1.2 var(--font-mono);
  color: #d3d8cc;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.6);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--line-strong);
  transition: color 0.25s, border-color 0.25s;
}
.hero__mail:hover { color: var(--accent); border-color: rgb(185 222 90 / 0.5); }
.hero__mail .ico { width: 0.95rem; height: 0.95rem; transition: transform 0.3s var(--ease); }
.hero__mail:hover .ico { transform: translate(2px, -2px); }

.hero__scroll {
  position: absolute;
  bottom: clamp(1.25rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font: 500 0.7rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.25s;
}
.hero__scroll:hover { color: var(--accent); }
.hero__scroll-line {
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, currentColor, transparent);
  overflow: hidden;
  position: relative;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: translateY(-100%);
  animation: scroll-cue 2.2s ease-in-out infinite;
}
@keyframes scroll-cue {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* ---------- Build stage: floating cards + the browser mockup ---------- */
.hero__stage {
  position: relative;
  width: 100%;
  perspective: 1200px;
}

.browser {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 90px -25px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(255 255 255 / 0.04);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.browser__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.browser__dot--r { background: #ff6259; }
.browser__dot--y { background: #ffbd2e; }
.browser__dot--g { background: #28c840; }
.browser__url {
  margin-left: 0.6rem;
  flex: 1;
  padding: 0.3rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  font: 400 0.72rem/1 var(--font-mono);
  color: var(--muted);
  text-align: center;
}
.browser__viewport {
  position: relative;
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
  padding: clamp(1rem, 2.6vw, 1.7rem);
  background: linear-gradient(160deg, var(--surface), var(--bg));
}

/* Mini-site pieces: visible by default (a finished, static preview) so the
   page still looks complete without JS, with reduced motion, or if the
   build-loop script fails to load. hero-scene.js adds .is-building to the
   viewport only when it's actually about to run the GSAP timeline, and only
   then do these start hidden so the loop can reveal them. */
.mini-nav { display: flex; align-items: center; gap: 0.5rem; margin-bottom: clamp(0.7rem, 2vw, 1.1rem); }
.mini-nav__mark { width: 12px; height: 12px; border-radius: 4px; background: var(--accent); flex: none; }
.mini-nav__link { width: 30px; height: 6px; border-radius: 3px; background: rgb(255 255 255 / 0.16); }
.mini-nav__link--btn { margin-left: auto; width: 42px; height: 15px; border-radius: 4px; background: var(--accent); opacity: 0.85; }

.mini-headline {
  margin: 0 0 clamp(0.7rem, 2vw, 1.1rem);
  font: 700 clamp(0.95rem, 2.6vw, 1.4rem)/1.25 var(--font-sans);
  color: var(--text);
  white-space: nowrap;
}
.mini-headline__text { display: inline-block; vertical-align: bottom; }
.mini-caret { display: inline-block; width: 2px; height: 0.9em; background: var(--accent); vertical-align: text-bottom; margin-left: 2px; opacity: 0; }

.mini-hero-img {
  height: clamp(28px, 6.5vw, 50px);
  border-radius: 6px;
  margin-bottom: clamp(0.7rem, 2vw, 1.1rem);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, var(--surface)), var(--surface-2));
}

.mini-text-block { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: clamp(0.7rem, 2vw, 1.1rem); }
.mini-line { display: block; height: 6px; border-radius: 3px; background: rgb(255 255 255 / 0.14); }
.mini-line--short { width: 55%; }

.mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.4rem, 1.4vw, 0.6rem); margin-bottom: clamp(0.7rem, 2vw, 1.1rem); }
.mini-card { padding: clamp(0.4rem, 1.4vw, 0.6rem); border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); }
.mini-card__ico { display: block; width: 12px; height: 12px; border-radius: 4px; background: var(--accent); margin-bottom: 0.4rem; opacity: 0.85; }
.mini-card__line { display: block; height: 5px; border-radius: 3px; background: rgb(255 255 255 / 0.16); margin-bottom: 0.3rem; }
.mini-card__line--short { width: 55%; margin-bottom: 0; }

.mini-buttons { display: flex; gap: 0.5rem; }
.mini-btn { display: block; width: 58px; height: 18px; border-radius: 5px; background: rgb(255 255 255 / 0.12); }
.mini-btn--primary { width: 76px; background: var(--accent); }

.build-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  color: #fff;
  opacity: 0;
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.5));
  pointer-events: none;
  will-change: transform;
}

/* Floating craft cards: parallax + 3D tilt live on the outer element (both JS-driven,
   so they share one transform); the ambient bob lives on the inner element instead,
   as a separate CSS animation, so the two never fight over the same property. */
.float-card {
  position: absolute;
  z-index: 4;
  width: clamp(120px, 15vw, 168px);
  padding: 0.75rem 0.85rem;
  border-radius: 8px;
  background: rgb(18 20 18 / 0.75);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px -18px rgb(0 0 0 / 0.6);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) perspective(700px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}
.float-card__bob { display: block; animation: card-bob 6.5s ease-in-out infinite; }
.float-card__label {
  margin: 0 0 0.5rem;
  font: 500 0.62rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.float-card--layout { top: -6%; left: -14%; }
.float-card--design { bottom: 6%; left: -10%; }
.float-card--responsive { top: 4%; right: -12%; }

.wire-row { display: flex; gap: 0.35rem; margin-bottom: 0.35rem; }
.wire-row:last-child { margin-bottom: 0; }
.wire-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 0.5rem;
  flex: 1;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font: 400 0.6rem/1 var(--font-mono);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}
.wire-chip--sm { flex: 0 0 20px; padding: 0; }

.swatch-row { display: flex; gap: 0.35rem; margin-bottom: 0.55rem; }
.swatch { width: 20px; height: 20px; border-radius: 5px; background: var(--sw); border: 1px solid rgb(255 255 255 / 0.15); }
.type-sample { margin: 0; font: 600 1.4rem/1 var(--font-sans); color: var(--text); }

.device-row { display: flex; align-items: flex-end; gap: 0.6rem; color: var(--muted); }
.device-ico { width: 40px; height: 28px; }
.device-ico--phone { width: 16px; height: 28px; }

@keyframes card-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(5rem, 11vw, 9.5rem); scroll-margin-top: var(--nav-h); }
.section__head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section__head h2 {
  max-width: 26ch;
  font-size: clamp(2rem, 4.3vw, 3.9rem);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.038em;
}
.section__head p {
  margin-top: 1.25rem;
  max-width: 34rem;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--muted);
}

/* ---------- Services: 3 equal tiles ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.tile__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin-bottom: 1.4rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--accent);
}
.tile__media--grain {
  background-color: var(--surface);
  background-image: radial-gradient(circle, rgb(255 255 255 / 0.5) 0.6px, transparent 0.9px);
  background-size: 6px 6px;
}
.tile__media--dots {
  background-color: var(--surface);
  background-image: radial-gradient(rgb(255 255 255 / 0.16) 1px, transparent 1.3px);
  background-size: 18px 18px;
}
.tile__media--grad {
  background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), var(--surface) 70%);
}
.tile h3 { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.tile p { margin-top: 0.6rem; color: var(--muted); font-size: 0.975rem; }

/* ---------- How it works ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.step {
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color 0.3s;
}
.step:hover { border-color: rgb(185 222 90 / 0.4); }
.step__num { font: 500 0.85rem/1 var(--font-mono); color: var(--accent); }
.step h3 { margin-top: 1rem; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; }
.step p { margin-top: 0.5rem; color: var(--muted); font-size: 0.95rem; }

/* ---------- Approach: split (text list + spotlight image) ---------- */
.split__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.split__copy h2 {
  max-width: 20ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  font-size: clamp(2rem, 4.3vw, 3.9rem);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.038em;
}
.split__item + .split__item { margin-top: 1.75rem; }
.split__item h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; }
.split__item p { margin-top: 0.5rem; max-width: 34ch; color: var(--muted); font-size: 0.975rem; }
.split__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.5) brightness(0.7); }

/* ---------- Our promise ---------- */
.promises {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.promise__card {
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color 0.3s;
}
.promise__card:hover { border-color: rgb(185 222 90 / 0.4); }
.promise__card .ico { color: var(--accent); }
.promise__card h3 { margin-top: 1.1rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.promise__card p { margin-top: 0.5rem; color: var(--muted); font-size: 0.975rem; }

/* ---------- Pricing ---------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.6vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color 0.3s;
}
.tier:hover { border-color: var(--line-strong); }
.tier--featured {
  border-color: rgb(185 222 90 / 0.55);
  background: linear-gradient(180deg, rgb(185 222 90 / 0.08), var(--surface) 45%);
  box-shadow: 0 0 0 1px rgb(185 222 90 / 0.14), 0 28px 60px -34px rgb(185 222 90 / 0.3);
}
.tier--featured:hover { border-color: var(--accent); }
.tier__badge {
  position: absolute;
  top: -0.8rem;
  left: clamp(1.6rem, 2.6vw, 2.25rem);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: 500 0.7rem/1.2 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tier__name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.tier__price { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.tier__from { font: 400 0.75rem/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tier__amount { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.tier__for { margin-top: 1rem; color: var(--muted); font-size: 0.975rem; }
.tier__lead { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.9rem; font-weight: 500; }
.tier__list { margin: 1.1rem 0 1.75rem; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.tier__list li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.95rem; }
.tier__list .ico { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.22rem; color: var(--accent); }
.tier .btn { margin-top: auto; }

.addon {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.5rem;
  padding: 1.4rem clamp(1.4rem, 2.6vw, 2rem);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.addon__eyebrow { font: 400 0.7rem/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.addon__label h3 { margin-top: 0.25rem; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; }
.addon__price { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--accent); white-space: nowrap; }
.addon__text { flex: 1 1 18rem; color: var(--muted); font-size: 0.95rem; }

/* ---------- Work ---------- */
.projects {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: clamp(3.5rem, 7vw, 6.5rem);
}
.project { min-width: 0; }
.project__img {
  position: relative;
  aspect-ratio: 16 / 10; /* one shared frame shape for every cover, on every screen size */
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.project__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: rgb(11 12 11 / 0.72);
  backdrop-filter: blur(4px);
  font: 400 0.7rem/1.2 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.project__img img,
.project__img video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.8) brightness(0.92);
  transition: transform 1.1s var(--ease), filter 0.6s;
}
.project:hover .project__img img,
.project:hover .project__img video { transform: scale(1.045); filter: saturate(1) brightness(1); }

/* The link must fill the frame, otherwise the image keeps its own shape and leaves a gap below it. */
.project__img-link { position: relative; display: block; width: 100%; height: 100%; }

/* Looping preview sits on top of the still image and fades in once it is actually playing. */
.project__img .project__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease, transform 1.1s var(--ease), filter 0.6s;
}
.project__img .project__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .project__img .project__video { display: none; } }
.project h3 {
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  transition: color 0.25s;
}
.project h3 a { color: inherit; text-decoration: none; }
.project h3 a:hover, .project h3 a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.project:hover h3 { color: var(--accent); }
.project__text p { margin-top: 0.75rem; max-width: 40ch; color: var(--muted); }
/* Tier tag: shows which pricing tier a sample site is built to, and links to the Pricing section. */
.tier-tag {
  display: flex;
  width: fit-content;
  margin-bottom: 0.9rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid rgb(185 222 90 / 0.45);
  border-radius: 999px;
  background: rgb(185 222 90 / 0.08);
  color: var(--accent);
  font: 500 0.7rem/1.2 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s;
}
.tier-tag:hover, .tier-tag:focus-visible { border-color: var(--accent); background: rgb(185 222 90 / 0.16); }
.tags { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tags li {
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font: 400 0.78rem/1.2 var(--font-mono);
  color: var(--muted);
}
.project__cta {
  margin-top: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: 500 0.85rem/1.2 var(--font-mono);
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgb(185 222 90 / 0.4);
  padding-bottom: 0.2rem;
  transition: border-color 0.25s;
}
.project__cta .ico { width: 1rem; height: 1rem; transition: transform 0.3s var(--ease); }
.project__cta:hover { border-color: var(--accent); }
.project__cta:hover .ico { transform: translate(2px, -2px); }

.project--feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  align-items: end;
}
.project--feature .project__img { grid-column: 1 / 9; grid-row: 1; }
.project--feature .project__text { grid-column: 9 / 13; grid-row: 1; }
.project--flip .project__img { grid-column: 5 / 13; }
.project--flip .project__text { grid-column: 1 / 5; }

.project--tall { grid-column: 1 / 6; }
.project--tall .project__img { margin-bottom: 1.5rem; }
.project--wide { grid-column: 6 / 13; margin-top: clamp(0px, 9vw, 8rem); }
.project--wide .project__img { margin-bottom: 1.5rem; }

/* ---------- Contact ---------- */
.contact {
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}
.contact__copy h2 {
  font-size: clamp(2.2rem, 4.8vw, 4.4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.042em;
}
.contact__copy p { margin-top: 1.5rem; max-width: 26rem; color: var(--muted); font-size: 1.1rem; }
.contact__mail {
  margin-top: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font: 500 clamp(1rem, 1.6vw, 1.2rem)/1.2 var(--font-mono);
  color: var(--accent);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgb(185 222 90 / 0.4);
  transition: border-color 0.25s;
  overflow-wrap: anywhere;
}
.contact__mail:hover { border-color: var(--accent); }
.contact__mail .ico { transition: transform 0.3s var(--ease); }
.contact__mail:hover .ico { transform: translate(3px, -3px); }

/* Copy email: a quiet button for visitors whose device has no default email app. */
.copy-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 32px;
  padding: 0 0.8rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--muted);
  font: 400 0.75rem/1 var(--font-mono);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.copy-mail[hidden] { display: none; }
.copy-mail:hover { color: var(--text); border-color: var(--accent); }
.copy-mail:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.copy-mail .ico { width: 0.95rem; height: 0.95rem; }
.copy-mail.is-copied { color: var(--accent); border-color: rgb(185 222 90 / 0.5); }
.copy-mail--inline { margin: 0 0 0 1rem; vertical-align: 0.15rem; }

/* ---------- Form ---------- */
.form {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.field { display: grid; gap: 0.5rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend {
  padding: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}
.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: var(--r);
  color: var(--text);
  font: 400 1rem/1.5 var(--font-sans);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { resize: vertical; min-height: 8.5rem; }
.field ::placeholder { color: #8b9186; opacity: 1; }
.form__note { margin: 0 0 1.25rem; color: var(--muted); font-size: 0.9rem; }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(185 222 90 / 0.25);
}
.field__help { font-size: 0.85rem; color: var(--muted); }
.field__error {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--error);
}
.field.is-invalid .field__error { display: flex; }
.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--error); }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; cursor: pointer; }
.chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: inline-block;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-size: 0.925rem;
  color: var(--text);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.chip:hover span { border-color: rgb(255 255 255 / 0.45); }
.chip input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

.form__status {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.9rem 1rem;
  border: 1px solid rgb(185 222 90 / 0.45);
  border-radius: var(--r);
  background: rgb(185 222 90 / 0.08);
  font-size: 0.925rem;
}
.form__status[hidden] { display: none; }
.form__status .ico { color: var(--accent); margin-top: 0.15rem; }
.form__status a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.btn[disabled] { opacity: 0.7; cursor: progress; }

/* ---------- Footer ---------- */
.footer {
  overflow: hidden;
  padding-top: clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid var(--line);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 3rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
.footer__brand p { margin-top: 0.85rem; max-width: 22ch; color: var(--muted); font-size: 0.925rem; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.footer__col h3 {
  margin: 0 0 0.15rem;
  font: 500 0.78rem/1.2 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer__col a { color: var(--text); font-size: 0.925rem; transition: color 0.2s; }
.footer__col a:hover { color: var(--accent); }
.footer__social { display: flex; gap: 0.9rem; margin-top: 0.4rem; }
.footer__social a { color: var(--muted); transition: color 0.2s; }
.footer__social a:hover { color: var(--accent); }

.footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}
.footer__word {
  margin-top: 3rem;
  font-size: clamp(3rem, 14vw, 13.5rem);
  font-weight: 700;
  line-height: 0.78;
  letter-spacing: -0.065em;
  color: var(--surface-2);
  white-space: nowrap;
  user-select: none;
}

/* ---------- Motion ---------- */
/* GSAP/ScrollTrigger animates .reveal elements in (see main.js); this is just the pre-animation state. */
.js .reveal { opacity: 0; }

@keyframes rise { from { transform: translateY(112%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes card-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .hero__eyebrow { animation: fade-up 0.9s var(--ease) 0.15s both; }
  .hero__title .line > span {
    transform: translateY(112%);
    animation: rise 1.1s var(--ease) forwards;
    animation-delay: calc(0.3s + var(--i, 0) * 0.1s);
  }
  .hero__title .line:nth-child(2) > span { --i: 1; }
  .hero__sub { animation: fade-up 0.9s var(--ease) 0.6s both; }
  .hero__cta { animation: fade-up 0.9s var(--ease) 0.75s both; }
  .hero__mail { animation: fade-up 0.9s var(--ease) 0.9s both; }
  .hero__scroll { animation: fade-up 0.9s var(--ease) 1.1s both; }

  .browser { animation: settle 1s var(--ease) 0.3s both; }
  .float-card { opacity: 0; animation: card-fade-in 0.8s var(--ease) forwards; }
  .float-card--layout { animation-delay: 0.7s; }
  .float-card--design { animation-delay: 0.85s; }
  .float-card--responsive { animation-delay: 1s; }

  /* Only hidden once hero-scene.js is about to drive the build-loop; see the
     .mini-* comment above the browser__viewport rule. */
  .is-building .mini-nav { opacity: 0; transform: translateY(-16px); }
  .is-building .mini-caret { opacity: 1; animation: caret-blink 0.8s steps(1) infinite; }
  .is-building .mini-hero-img { opacity: 0; transform: translateY(14px); }
  .is-building .mini-line { opacity: 0; transform: translateY(10px); }
  .is-building .mini-card { opacity: 0; transform: translateY(16px); }
  .is-building .mini-btn { opacity: 0; transform: scale(0.6); }
}
@keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .project__img img { transition: none; }

  /* Calm, static reading of the finished mini-site: no drift, no bob, no build-loop */
  .float-card__bob, .hero__scroll-line::after { animation: none; }
  .float-card { opacity: 1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  /* Copy spans the full width once stacked, so the scrim covers it evenly. */
  .hero__bg::after {
    background: linear-gradient(180deg, rgb(7 8 10 / 0.78) 0%, rgb(7 8 10 / 0.6) 55%, rgb(7 8 10 / 0.25) 100%);
  }
  .hero__layout { grid-template-columns: minmax(0, 1fr); }
  .hero__content { max-width: none; }
  .hero__stage { max-width: 30rem; margin-inline: auto; margin-top: clamp(2rem, 6vw, 3rem); }
  .float-card { width: clamp(108px, 22vw, 140px); }

  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .split__grid { grid-template-columns: minmax(0, 1fr); }
  .split__media { order: -1; aspect-ratio: 16 / 9; }

  .contact__grid { grid-template-columns: minmax(0, 1fr); }

  .tiers { grid-template-columns: minmax(0, 1fr); gap: 2rem; }

  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

/* Tablet widths: five links plus the button no longer fit beside the logo, so the menu button takes over here too. */
@media (max-width: 900px) {
  html.js .nav__links > a:not(.btn) { display: none; }
  html.js .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: 0.5rem;
    background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r);
    color: var(--text); cursor: pointer;
  }
  html.js .nav__panel {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; padding: 0.25rem clamp(1rem, 4vw, 3rem) 1rem;
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  html.js .nav__panel.is-open { display: flex; }
  .nav__panel a { padding: 1rem 0; border-top: 1px solid var(--line); color: var(--text); font-size: 1rem; }
}

@media (max-width: 767px) {
  :root { --nav-h: 60px; }
  .nav__links > a:not(.btn) { display: none; }
  html.js .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: 0.5rem;
    background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r);
    color: var(--text); cursor: pointer;
  }
  html.js .nav__panel {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; padding: 0.25rem 1.25rem 1rem;
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  html.js .nav__panel.is-open { display: flex; }
  .nav__panel a { padding: 1rem 0; border-top: 1px solid var(--line); color: var(--text); font-size: 1rem; }
  .hero__scroll { display: none; }
  .brand__name span { display: none; }

  .hero { padding-block: calc(var(--nav-h) + 1.5rem) 2rem; }
  /* Phones: the three cards stop floating over the mockup. They sit in one row
     below it, fully inside the screen, so nothing can cover the mockup headline
     or run off the left or right edge. Desktop and tablet are untouched. */
  .hero, .hero__layout { overflow-x: hidden; }
  .hero__stage { max-width: 22rem; display: flex; flex-wrap: wrap; gap: 0.65rem; }
  .browser { order: 1; flex: 0 0 100%; }
  .float-card {
    order: 2;
    position: relative;
    inset: auto;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding: 0.55rem 0.6rem;
    transform: none;
  }
  .float-card__bob { animation: none; }
  .float-card__label { font-size: 0.56rem; letter-spacing: 0.04em; line-height: 1.25; }
  .swatch-row { flex-wrap: wrap; gap: 0.25rem; }
  .swatch { width: 16px; height: 16px; }
  .device-row { gap: 0.4rem; }
  .device-ico { width: 32px; height: 22px; }
  .device-ico--phone { width: 13px; height: 22px; }
  .hero__scroll { bottom: 1.25rem; }
  .hero__scroll-line { height: 24px; }

  .tiles { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .promises { grid-template-columns: minmax(0, 1fr); }
  .footer__top { grid-template-columns: minmax(0, 1fr); }

  .project--feature { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; }
  .project--feature .project__img,
  .project--feature .project__text,
  .project--flip .project__img,
  .project--flip .project__text { grid-column: 1 / -1; grid-row: auto; }
  .project--flip .project__text { order: 2; }
  .project--tall, .project--wide { grid-column: 1 / -1; margin-top: 0; }

  .hero__cta .btn { flex: 1 1 auto; }
  .footer__word { margin-top: 2rem; }
}

/* ---------- Get a Quote page ---------- */
.nav__links > a[aria-current="page"], .nav__panel a[aria-current="page"] { color: var(--text); }

.quote { padding-block: calc(var(--nav-h) + clamp(2rem, 5vw, 4rem)) clamp(4rem, 9vw, 7rem); }
.quote__head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.quote__head h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.042em;
}
.quote__head p { margin-top: 1.25rem; max-width: 34rem; color: var(--muted); font-size: 1.1rem; }

.quote .form { max-width: 46rem; gap: 1.75rem; }
.quote .form[hidden] { display: none; }
.quote .form__note { margin: 0; }
.form__group { display: grid; gap: 1.5rem; }
.form__group + .form__group { padding-top: 1.75rem; border-top: 1px solid var(--line); }
.form__group h2 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; }
.quote .field input[type="tel"] {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: var(--r);
  color: var(--text);
  font: 400 1rem/1 var(--font-sans);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field__help a, .form__note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.form__status--error { border-color: rgb(255 155 140 / 0.5); background: rgb(255 155 140 / 0.08); }
.form__status--error .ico { color: var(--error); }

.quote__done {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  max-width: 46rem;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  border: 1px solid rgb(185 222 90 / 0.45);
  border-radius: var(--r);
  background: rgb(185 222 90 / 0.08);
  font-size: 1.15rem;
}
.quote__done[hidden] { display: none; }
.quote__done .ico { color: var(--accent); margin-top: 0.1rem; }
.quote__done:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Hidden trap field for spam bots. People never see it or reach it with the keyboard. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Privacy page and other plain text pages */
.legal__body { max-width: 46rem; }
.legal__body h2 { margin-top: 2.5rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.legal__body p, .legal__body li { margin-top: 0.75rem; color: var(--muted); font-size: 1.05rem; }
.legal__body ul { padding-left: 1.25rem; list-style: disc; }
.legal__body strong { color: var(--text); font-weight: 600; }
.legal__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.footer__row a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer__row a:hover { color: var(--accent); }