:root {
    --ink:   #031a33;
    --navy:  #063969;
    --blue:  #1f7ae0;
    --ice:   #8fd3ff;
    --paper: #f4f8fc;
    --slate: #9db4cc;
    --rec:   #ff3b30;
    --line:  rgba(143,211,255,.22);
    --font:  "Outfit", "Segoe UI", system-ui, sans-serif;
    --serif: "DM Serif Display", Georgia, serif;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html { scroll-padding-top: env(safe-area-inset-top, 0px); scroll-behavior: smooth; }
  *, *::before, *::after { box-sizing: inherit; }
  body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--ice); outline-offset: 3px; border-radius: 4px; }

  #stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
  .no-webgl body { background: radial-gradient(circle at 70% 35%, #0b4a8f, var(--ink) 62%); }

  #loader { position: fixed; inset: 0; z-index: 50; background: var(--ink); display: grid; place-items: center; transition: opacity .6s ease, visibility .6s; }
  #loader.done { opacity: 0; visibility: hidden; }
  #loader svg { width: 64px; height: auto; fill: var(--paper); animation: pulse 1.2s ease-in-out infinite alternate; }
  @keyframes pulse { from { opacity: .35; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

  nav { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 1rem clamp(1.25rem, 4vw, 3rem); }
  .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
  .brand svg { height: 34px; width: auto; fill: var(--paper); }
  .brand .word { font-weight: 700; letter-spacing: .06em; font-size: 1.15rem; line-height: 1; }
  .brand .word i { font-family: var(--serif); font-style: normal; font-weight: 400; letter-spacing: 0; font-size: 1.25rem; margin-left: .3rem; color: var(--ice); }
  nav .links { display: flex; gap: 1.5rem; font-size: .95rem; }
  nav .links a { text-decoration: none; color: var(--slate); transition: color .2s; }
  nav .links a:hover { color: var(--paper); }
  @media (max-width: 640px) { nav .links a:not(.keep) { display: none; } }

  main { position: relative; z-index: 1; }
  section { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 7rem clamp(1.25rem, 4vw, 3rem) 5rem; }
  .col { max-width: 38rem; width: 100%; padding: 2rem 2rem 2rem 0; background: linear-gradient(90deg, rgba(3,26,51,.92) 0%, rgba(3,26,51,.72) 70%, rgba(3,26,51,0) 100%); }
  @media (max-width: 760px) { .col { background: rgba(3,26,51,.8); padding: 1.5rem; border-radius: 12px; } }
  h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.04; }
  h1 { font-size: clamp(2.8rem, 7.2vw, 5.4rem); font-weight: 800; }
  h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 700; margin-bottom: 1.25rem; }
  h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
  p { margin: 0 0 1rem; max-width: 34rem; }
  .lede { font-size: 1.2rem; color: #d3e2f2; margin-top: 1.5rem; }
  .badge { display: inline-flex; align-items: center; gap: .6rem; font-size: .95rem; color: var(--slate); margin-bottom: 1.5rem; }
  .rec-dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--rec); animation: blink 1.1s steps(2, jump-none) infinite; }
  @keyframes blink { 50% { opacity: .15; } }

  .btns { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
  .btn { display: inline-block; padding: .95rem 1.5rem; border-radius: 999px; font-weight: 600; text-decoration: none; font-family: var(--font); font-size: 1rem; border: 1.5px solid var(--line); cursor: pointer; background: transparent; color: var(--paper); transition: transform .2s ease, background .2s ease, border-color .2s ease; }
  .btn:hover { transform: translateY(-2px); border-color: var(--ice); }
  .btn.primary { background: var(--paper); color: var(--navy); border-color: var(--paper); }
  .btn.primary:hover { background: var(--ice); border-color: var(--ice); }

  .hero h1, .hero .lede, .hero .btns, .hero .badge { animation: rise 1.1s cubic-bezier(.2,.7,.2,1) both; }
  .hero .badge { animation-delay: .5s; } .hero h1 { animation-delay: .7s; }
  .hero .lede { animation-delay: .95s; } .hero .btns { animation-delay: 1.1s; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  .rows { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--line); }
  .rows li { padding: 1.1rem .5rem 1.1rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .15rem; transition: padding-left .25s ease, background .25s ease; }
  .rows li:hover { padding-left: 1rem; background: linear-gradient(90deg, rgba(143,211,255,.16), transparent); }
  .rows li p { margin: 0; color: var(--slate); font-size: .98rem; }

  .work { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-top: 2rem; perspective: 1100px; }
  .tile { aspect-ratio: 9 / 16; border-radius: 12px; position: relative; overflow: hidden; background: linear-gradient(160deg, #0b2a4f, #05162b); border: 1px solid var(--line); display: flex; align-items: flex-end; cursor: pointer; transform-style: preserve-3d; transition: transform .4s cubic-bezier(.2,.7,.2,1), filter .4s ease, box-shadow .4s ease; will-change: transform; }
  .tile video, .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
  .work.has-focus .tile { filter: brightness(.42) saturate(.55); transform: scale(.97); }
  .work.has-focus .tile.focus { filter: none; transform: translateZ(60px) scale(1.08) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); z-index: 3; box-shadow: 0 26px 50px rgba(0,0,0,.55), 0 0 0 1.5px rgba(143,211,255,.75); }
  .tile .snd { position: absolute; top: .6rem; right: .6rem; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(3,26,51,.72); color: var(--paper); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: none; }
  .tile .snd svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .tile .snd .on { display: none; }
  .tile.sound .snd { background: var(--ice); color: var(--navy); }
  .tile.sound .snd .on { display: block; }
  .tile.sound .snd .off { display: none; }
  .tip { font-size: .88rem; color: var(--slate); margin: 1rem 0 0; }
  .tile .cap { position: relative; padding: .9rem; width: 100%; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
  .tile .cap strong { display: block; font-size: 1.05rem; font-weight: 600; }
  .tile .cap span { font-size: .85rem; color: var(--slate); }
  .tile.empty::before { content: ""; position: absolute; left: 50%; top: 42%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--ice); opacity: .7; }
  .tile.empty::after { content: ""; position: absolute; left: 50%; top: 42%; margin: -7px 0 0 -4px; border-left: 12px solid var(--ice); border-top: 7px solid transparent; border-bottom: 7px solid transparent; opacity: .7; }

  .chips { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
  .chips li { padding: .45rem .95rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(6,57,105,.4); font-size: .95rem; }
  .reach { list-style: none; margin: 1.25rem 0 1.75rem; padding: 0; }
  .reach li { margin: .4rem 0; }
  .reach .lbl { color: var(--slate); margin-right: .6rem; }
  .reach a { color: var(--ice); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .steps { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: step; }
  .steps li { counter-increment: step; display: grid; grid-template-columns: 3rem 1fr; gap: .5rem 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
  .steps li::before { content: counter(step); font-size: 2rem; font-weight: 800; color: var(--ice); line-height: 1; }
  .steps li p { margin: .25rem 0 0; color: var(--slate); font-size: .98rem; }

  .rail { position: fixed; right: max(.75rem, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column; gap: .6rem; }
  .rail a { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.4); transition: transform .2s ease; }
  .rail a:hover { transform: scale(1.1); }
  .rail a[hidden] { display: none; }
  .rail svg { width: 24px; height: 24px; }
  .rail .wa { background: #25d366; }
  .rail .ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
  .rail .fb { background: #1877f2; }
  @media (max-width: 640px) { .rail a { width: 42px; height: 42px; } .rail svg { width: 22px; height: 22px; } }
  .field { display: grid; gap: .35rem; margin-bottom: 1rem; }
  label { font-size: .95rem; color: var(--slate); }
  input, select, textarea { width: 100%; padding: .85rem 1rem; border-radius: 10px; border: 1.5px solid var(--line); background: rgba(6,57,105,.35); color: var(--paper); font: inherit; }
  select option { color: #031a33; }
  textarea { min-height: 6rem; resize: vertical; }
  input::placeholder, textarea::placeholder { color: #6f8aa8; }
  #formNote { font-size: .95rem; color: var(--ice); min-height: 1.4em; margin-top: .75rem; }

  footer { position: relative; z-index: 1; padding: 2rem clamp(1.25rem, 4vw, 3rem); color: var(--slate); font-size: .9rem; background: rgba(3,26,51,.9); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .work.has-focus .tile.focus { transform: none; }
    .tile { transition: none; }
    .hero h1, .hero .lede, .hero .btns, .hero .badge, .rec-dot, #loader svg { animation: none; }
  }