/* ─── fonts (self-hosted, OFL) ──────────────────────────────────── */
@font-face {
  font-family: "Titan One";
  src: url("../assets/fonts/titan-one-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../assets/fonts/rubik-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}

/* ─── tokens: flat inks, fat keylines, cut-paper shadows ───────── */
:root {
  --red: #e0190f;
  --red-deep: #b3120a;      /* red text on milk */
  --blue: #0b4fd8;
  --yolk: #ffd400;
  --orange: #ff7a00;
  --ink: #111214;
  --milk: #fffaf0;
  --ink-soft: #4a4540;      /* secondary text on milk */
  --ink-hint: #6b645c;      /* placeholders on milk */

  --font-display: "Titan One", "Rubik", system-ui, sans-serif;
  --font-body: "Rubik", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  --line: 3px;
  --keyline: var(--line) solid var(--ink);
  --lift: 6px;
  --shadow: var(--lift) var(--lift) 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --shadow-lg: 10px 10px 0 var(--ink);

  --fs-shout: clamp(46px, 6.6vw, 96px);
  --fs-h2: clamp(32px, 4.4vw, 56px);
  --fs-body: 17px;

  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 20px;
  --gap-lg: 32px;
  --gap-xl: 56px;
  --gap-2xl: 96px;
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 40px);

  --radius: 16px;
  --radius-lg: 28px;
  --radius-pill: 9999px;

  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
}

/* ─── reset & base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; scrollbar-color: var(--ink) var(--yolk); }
body {
  margin: 0;
  background: var(--yolk);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--blue); color: var(--milk); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
:focus-visible { outline: var(--line) solid var(--blue); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ─── layout primitives ─────────────────────────────────────────── */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(72px, 10vw, var(--gap-2xl)); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-lg); }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; gap: var(--gap-md); } }

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  max-width: 18ch;
  margin-bottom: var(--gap-xl);
}

/* ─── keys: capsule-shaped remote buttons that press into their shadow ── */
.key {
  --key-bg: var(--milk);
  --key-fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px;
  padding: 14px 28px;
  border: var(--keyline);
  border-radius: var(--radius-pill);
  background: var(--key-bg);
  color: var(--key-fg);
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: var(--shadow);
  transition: transform .18s var(--spring), box-shadow .18s var(--spring), background-color .12s linear, color .12s linear;
}
.key:hover { transform: translate(-2px, -2px) rotate(-1.5deg); box-shadow: 8px 8px 0 var(--ink); }
.key:active { transform: translate(var(--lift), var(--lift)); box-shadow: 0 0 0 var(--ink); transition-duration: .06s; }
.key-red { --key-bg: var(--red); --key-fg: var(--milk); }
.key-yolk { --key-bg: var(--yolk); }
.key-yolk:hover { --key-bg: var(--orange); }
.key-red:hover { --key-bg: var(--blue); }
.key-sm { min-height: 44px; padding: 10px 18px; font-size: 15px; box-shadow: var(--shadow-sm); }
.key-sm:hover { box-shadow: 5px 5px 0 var(--ink); }
.key-sm:active { transform: translate(3px, 3px); }
.key-lg { min-height: 64px; padding-inline: 36px; font-size: 22px; }
.key:disabled { cursor: progress; --key-bg: var(--milk); color: var(--ink-soft); transform: translate(var(--lift), var(--lift)); box-shadow: 0 0 0 var(--ink); }

/* ─── chrome: nav + footer ──────────────────────────────────────── */
.topnav { position: sticky; top: 0; z-index: 20; padding-top: 14px; pointer-events: none; }
.topnav-inner {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md);
  margin-inline: auto;
  padding: 10px 10px 10px 16px;
  max-width: calc(var(--container) - 2 * var(--gutter));
  width: calc(100% - 2 * var(--gutter));
  background: var(--milk);
  border: var(--keyline);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
}
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 22px; letter-spacing: 0.01em; }
.logo .mark { width: 32px; height: 32px; object-fit: contain; transition: transform .4s var(--spring); }
.logo:hover .mark { transform: rotate(-20deg) scale(1.15); }
.topnav nav { display: flex; gap: var(--gap-sm); }

.pagefoot { background: var(--ink); color: var(--milk); padding-block: var(--gap-xl); font-weight: 600; }
.pagefoot a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--yolk); }
.pagefoot a:hover { color: var(--yolk); }

/* ─── hero ──────────────────────────────────────────────────────── */
.hero { position: relative; z-index: 2; padding-top: clamp(40px, 6vw, 72px); isolation: isolate; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--gap-lg);
  align-items: center;
  padding-bottom: clamp(88px, 11vw, 150px);
}
.shout {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-shout);
  line-height: .98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: var(--gap-xl);
}
.shout .w {
  display: inline-block;
  transform: rotate(var(--r, 0deg));
  animation: word-pop .7s var(--spring) both;
  animation-delay: calc(var(--i, 0) * 55ms + 80ms);
}
.shout .w:nth-child(1) { --r: -3deg; --i: 0; }
.shout .w:nth-child(2) { --r: 1.5deg; --i: 1; }
.shout .w:nth-child(3) { --r: -2deg; --i: 2; }
.shout .w:nth-child(4) { --r: 2.5deg; --i: 3; }
.shout .w:nth-child(5) { --r: -1deg; --i: 4; }
.shout .w:nth-child(6) { --r: 1.5deg; --i: 5; }
.shout .w:nth-child(7) { --r: -3deg; --i: 6; }
.shout .w-red, .shout .w-blue {
  -webkit-text-stroke: 7px var(--ink);
  paint-order: stroke fill;
  text-shadow: 5px 6px 0 var(--ink);
}
.shout .w-red { color: var(--red); }
.shout .w-blue { color: var(--blue); }
@keyframes word-pop {
  from { transform: translateY(.35em) rotate(calc(var(--r) * -3)) scale(.85); }
  to   { transform: rotate(var(--r)) scale(1); }
}
.hero-cta { display: flex; gap: var(--gap-md); flex-wrap: wrap; }

/* capsule on a starburst */
.capsule-stage { position: relative; display: grid; place-items: center; aspect-ratio: 1 / .9; }
.burst {
  position: absolute; inset: 0; margin: auto;
  width: 100%; height: 100%;
  fill: var(--orange); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round;
  transform: rotate(var(--spin, 0deg));
  filter: drop-shadow(8px 8px 0 var(--ink));
}
.capsule {
  position: relative;
  width: 112%; max-width: none;
  height: auto;
  user-select: none; -webkit-user-drag: none;
  transform: translateY(var(--drift, 0px)) rotate(calc(-8deg + var(--tip, 0deg)));
  /* sticker cut: milk die-line, then an ink cut-paper shadow */
  filter:
    drop-shadow(3px 0 0 var(--milk)) drop-shadow(-3px 0 0 var(--milk))
    drop-shadow(0 3px 0 var(--milk)) drop-shadow(0 -3px 0 var(--milk))
    drop-shadow(10px 12px 0 var(--ink));
  animation: capsule-drop 1.1s var(--out) both .2s;
}
.capsule { transition: rotate .5s var(--spring); }
.capsule-stage:hover .capsule { rotate: 7deg; }
@keyframes capsule-drop {
  0%   { translate: 0 -60px; scale: .92 1.1; }
  45%  { translate: 0 0;     scale: 1.12 .86; }
  70%  { translate: 0 -10px; scale: .97 1.04; }
  100% { translate: 0 0;     scale: 1 1; }
}

/* floating cut-paper bits */
.hero-bits { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bit { position: absolute; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; transform: translateY(var(--par, 0px)) rotate(var(--rot, 0deg)); }
.bit-squiggle { width: 120px; left: 4%; top: 8%; fill: none; stroke: var(--blue); stroke-width: 7; --rot: -12deg; }
.bit-dot { width: 44px; left: 46%; top: 12%; fill: var(--red); filter: drop-shadow(4px 4px 0 var(--ink)); }
.bit-tri { width: 54px; left: 40%; bottom: 26%; fill: var(--blue); --rot: 14deg; filter: drop-shadow(4px 4px 0 var(--ink)); }
.bit-spark { width: 56px; right: 6%; top: 6%; fill: var(--milk); filter: drop-shadow(4px 4px 0 var(--ink)); }

/* ticker band */
.ticker {
  position: absolute; left: -4%; right: -4%; bottom: 0; z-index: 3;
  transform: translateY(50%) rotate(-2.2deg);
  background: var(--ink); color: var(--milk);
  border-block: var(--line) solid var(--ink);
  overflow: hidden;
  box-shadow: 0 8px 0 var(--blue);
}
.ticker-track { display: flex; align-items: center; gap: 28px; width: max-content; padding-block: 16px; transform: translateX(var(--tick, 0px)); will-change: transform; }
.ticker-track span { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 34px); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.ticker-track svg { width: 28px; height: 28px; flex: none; fill: var(--yolk); }

/* ─── links section ─────────────────────────────────────────────── */
.section-links { background: var(--blue); color: var(--milk); padding-top: clamp(120px, 14vw, 180px); overflow: hidden; }
.section-links .section-title { position: relative; }
/* confined to the band above the heading: arc never crosses the title */
.flight { position: absolute; left: 0; top: 16px; width: 100%; height: calc(clamp(120px, 14vw, 180px) - 44px); pointer-events: none; }
.flight path { fill: none; stroke: var(--yolk); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 18; opacity: .9; }

.link-card {
  --tile: var(--milk);
  position: relative;
  display: flex; align-items: center; gap: var(--gap-md);
  min-height: 116px;
  padding: 22px 24px;
  background: var(--tile);
  color: var(--ink);
  border: var(--keyline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform .25s var(--spring), box-shadow .25s var(--spring), background-color .15s linear;
}
.link-card:nth-child(odd) { --tilt: -1deg; }
.link-card:nth-child(even) { --tilt: 1deg; }
.link-card { transform: rotate(var(--tilt, 0deg)); }
.link-card.is-lit { --tile: var(--yolk); transform: rotate(calc(var(--tilt) * -2)) scale(1.02); }
.link-card:hover, .link-card:focus-visible { --tile: var(--yolk); transform: translate(-3px, -3px) rotate(calc(var(--tilt) * -2.5)); box-shadow: 13px 13px 0 var(--ink); }
.link-card:active { transform: translate(8px, 8px); box-shadow: 2px 2px 0 var(--ink); transition-duration: .06s; }
.link-card .platform-icon {
  width: 64px; height: 64px; flex: none;
  display: grid; place-items: center;
  border: var(--keyline); border-radius: 50%;
  background: var(--chip); color: var(--milk);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--spring);
}
.link-card:hover .platform-icon, .link-card.is-lit .platform-icon { transform: rotate(-14deg) scale(1.08); }
.link-card .platform-icon svg { width: 30px; height: 30px; }
.link-card .platform-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.link-card .platform-name { font-family: var(--font-display); font-size: clamp(28px, 3vw, 38px); line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.link-card .platform-handle { color: var(--ink-soft); font-weight: 600; font-size: 16px; margin-top: 6px; overflow-wrap: anywhere; }
.link-card .platform-arrow {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  border: var(--keyline); border-radius: 50%; background: var(--milk);
  transition: transform .3s var(--spring), background-color .15s linear, color .15s linear;
}
.link-card .platform-arrow svg { width: 24px; height: 24px; }
.link-card:hover .platform-arrow, .link-card.is-lit .platform-arrow { background: var(--ink); color: var(--yolk); transform: translateX(6px); }

/* ─── contact section ───────────────────────────────────────────── */
.section-contact { background: var(--red); color: var(--milk); }
.wave { position: absolute; left: 0; right: 0; top: -39px; width: 100%; height: 40px; fill: var(--red); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--gap-xl); align-items: start; }
@media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-intro .section-title { text-shadow: 4px 5px 0 var(--ink); }
.contact-email-btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); flex-wrap: wrap;
  max-width: 460px;
  padding: 16px 16px 16px 24px;
  background: var(--milk); color: var(--ink);
  border: var(--keyline); border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  transform: rotate(-1.5deg);
}
.contact-email-btn .label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; }
.contact-email-btn .value { display: block; font-size: 19px; font-weight: 700; margin-top: 2px; overflow-wrap: anywhere; }
.copy-btn.copied { --key-bg: var(--blue); --key-fg: var(--milk); }

.panel {
  display: flex; flex-direction: column; gap: var(--gap-md);
  padding: clamp(24px, 3vw, 36px);
  background: var(--milk); color: var(--ink);
  border: var(--keyline); border-radius: var(--radius-lg);
  box-shadow: 14px 14px 0 var(--ink);
  transform: rotate(1deg);
}
.panel .key { align-self: flex-start; }

/* ─── form field ────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 15px; font-weight: 700; }
.input, .textarea {
  width: 100%; padding: 15px 18px;
  border: var(--keyline); border-radius: var(--radius);
  background: #fff; color: var(--ink);
  font: inherit; font-weight: 500; font-size: 17px;
  caret-color: var(--red);
  box-shadow: inset 0 3px 0 rgb(17 18 20 / .08);
  transition: background-color .12s linear, box-shadow .2s var(--out);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-hint); }
.input:focus, .textarea:focus { outline: none; background: #fff; box-shadow: var(--shadow-sm), 0 0 0 0 var(--blue); border-color: var(--blue); }
.input.error, .textarea.error { border-color: var(--red-deep); background: #fff1ef; }
.field-error { font-size: 14px; font-weight: 700; color: var(--red-deep); min-height: 18px; }
.textarea { min-height: 140px; resize: vertical; line-height: 1.45; }
.form-success, .form-error {
  display: none; align-items: center; gap: 12px;
  border: var(--keyline); border-radius: var(--radius);
  padding: 14px 18px; font-weight: 700; font-size: 16px;
  color: var(--milk); box-shadow: var(--shadow-sm);
}
.form-success { background: var(--blue); }
.form-error { background: var(--red-deep); }
.form-success.show, .form-error.show { display: flex; animation: note-pop .45s var(--spring); }
.form-success svg, .form-error svg { width: 22px; height: 22px; flex: none; }
@keyframes note-pop { from { transform: scale(.9) rotate(-2deg); } to { transform: none; } }
.field-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ─── responsive ────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--gap-md); }
  .capsule-stage { max-width: 520px; width: 100%; margin-inline: auto; }
  .capsule { width: 100%; }
  .bit-dot { left: 80%; top: 44%; }
  .bit-tri { left: 6%; bottom: 20%; }
}
@media (max-width: 520px) {
  :root { --fs-shout: clamp(40px, 13vw, 60px); }
  .topnav-inner { padding: 8px 8px 8px 12px; }
  .logo { font-size: 18px; gap: 8px; }
  .logo .mark { width: 26px; height: 26px; }
  .key-sm { min-height: 40px; padding: 8px 14px; font-size: 14px; }
  .hero-cta .key { flex: 1 1 auto; }
  .shout .w-red, .shout .w-blue { -webkit-text-stroke-width: 5px; text-shadow: 3px 4px 0 var(--ink); }
  .link-card { padding: 16px 18px; gap: 14px; min-height: 96px; }
  .link-card .platform-icon { width: 52px; height: 52px; }
  .link-card .platform-arrow { width: 44px; height: 44px; }
  .bit-squiggle { width: 64px; left: auto; right: 22%; top: 2%; }
  .bit-tri { left: 2%; bottom: 34%; width: 40px; }
  .bit-dot { display: none; }
  .bit-spark { width: 40px; right: 3%; top: auto; bottom: 17%; }
}
@media (max-width: 400px) {
  .logo .logo-word { display: none; }
}

/* ─── reduced motion: everything already in place ──────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}