/* ============================================================
   VERTEX — "TECHY" THEME LAYER
   Loads AFTER style.css and re-skins the same components using
   VERTEX'S EXISTING CORPORATE PALETTE (navy + teal + steel) —
   no new brand colors are introduced. The techy/cyberpunk feel
   comes from glow, motion, monospace/pixel type and notched
   "HUD" panel shapes, not from a different color scheme.
   ============================================================ */

:root{
  /* ---- Re-map "light section" tokens onto the existing navy scale ----
     (previously these were white/light-gray for a light-mode site;
     the whole site is now one consistent dark surface, built only
     from navy-950/900/800/700/600 that already exist in style.css) */
  --paper-0:#0f2033;      /* = navy-800: section-light background   */
  --paper-50:#0c1a29;     /* between navy-800/900: section-tint bg  */
  --paper-100:#0c1a29;

  /* Text that used to assume a white background now reuses the
     corporate "on-dark" text tokens already defined in style.css. */
  --slate-600:#c6d3de;    /* = mist-300: primary body text   */
  --slate-500:#a9bccb;    /* = on-dark-300: secondary text    */

  /* Hairline borders converge to the same soft teal-tinted line
     used on dark sections — again, an existing token, not a new one. */
  --line-on-light:rgba(255,255,255,.12);

  /* ---- New type tokens for the techy accent moments only ----
     Body copy and real headline sentences stay on Inter / Poppins
     (unchanged) for readability; these two are used sparingly. */
  --font-pixel:'Press Start 2P','Courier New',monospace;
  --font-mono:'Space Mono','Courier New',monospace;

  --glow-teal-soft: rgba(23,195,189,.35);
  --glow-teal-strong: rgba(23,195,189,.6);
}

/* ---------- Base surface ---------- */
body{ background:var(--navy-950); }

/* Headings default to navy-900 in style.css (correct for a WHITE
   background). The page is dark now, so point the base rule at the
   same light color already used for headings on dark sections. */
h1,h2,h3,h4{ color:var(--on-dark-100); }
.card-light h3,.person h4,.rate-table caption,.rate-table td:last-child,.field label{
  color:var(--on-dark-100);
}
.btn-outline-dark{ border-color:var(--on-dark-100); color:var(--on-dark-100); }
.btn-outline-dark:hover{ background:var(--on-dark-100); color:var(--navy-950); }

/* ---------- Type texture: pixel font for numerals & tags,
   monospace for structural labels — body/headline sentences
   stay exactly as they were (Inter / Poppins) for readability. ---------- */
.eyebrow{
  font-family:var(--font-pixel);
  font-size:.62rem;
  letter-spacing:.12em;
  line-height:1.6;
}
.card .num{ font-family:var(--font-pixel); font-size:.92rem; }
.hero-stats .stat b,.stat-tile b{
  font-family:var(--font-pixel);
  text-shadow:0 0 18px var(--glow-teal-soft);
}
.nav-links a{
  font-family:var(--font-mono);
  text-transform:uppercase;
  font-size:.76rem;
  letter-spacing:.06em;
}
.footer-grid h5{ font-family:var(--font-mono); letter-spacing:.1em; }
.person .role{ font-family:var(--font-mono); }
.retainer .price small{ font-family:var(--font-mono); }
.rate-table caption{ font-family:var(--font-mono); }

/* ---------- Scanline + grid texture (reuses the existing
   .circuit-bg hook already applied across hero/CTA sections —
   swaps the old dot-pattern SVG for an animated teal grid). ---------- */
.circuit-bg::before{
  background-image:
    linear-gradient(var(--glow-teal-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--glow-teal-soft) 1px, transparent 1px);
  background-size:38px 38px;
  opacity:.14;
  animation:grid-pan 24s linear infinite;
}
@keyframes grid-pan{
  from{ background-position:0 0,0 0; }
  to{ background-position:38px 38px,38px 38px; }
}

body::after{
  content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
  opacity:.5;
}

/* ---------- Hero: keep the corporate gradient, add a soft teal
   glow wash rather than a new color. ---------- */
.hero{
  background:
    radial-gradient(46% 55% at 18% -8%, var(--glow-teal-soft), transparent 65%),
    radial-gradient(120% 140% at 15% -10%, #163654 0%, var(--navy-900) 45%, var(--navy-950) 100%);
}

/* ---------- Notched "HUD panel" shape for cards, buttons and
   stat blocks — a shape change, not a color change. ---------- */
.card,.card-light,.stat-tile,.t-item,.terms-box,.retainer,.live-counter{
  border-radius:4px;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.card{ transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease); }
.card:hover,.card-light:hover{
  border-color:var(--teal-500);
  box-shadow:0 0 0 1px var(--glow-teal-soft), 0 16px 40px -18px rgba(0,0,0,.6), 0 0 32px -8px var(--glow-teal-soft);
}

.btn{
  border-radius:2px;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.btn-primary{ box-shadow:0 0 0 1px var(--glow-teal-soft), 0 10px 26px -10px var(--glow-teal-strong); }
.btn-primary:hover{ box-shadow:0 0 0 1px var(--glow-teal-strong), 0 0 26px var(--glow-teal-strong), 0 0 52px var(--glow-teal-soft); }
.btn-ghost{ border-color:var(--teal-400); }
.btn-ghost:hover{ background:rgba(23,195,189,.12); box-shadow:0 0 22px var(--glow-teal-soft); }

/* ---------- Fix the one hard-coded (non-variable) light
   background left in style.css so it follows the dark theme. ---------- */
.logo-cloud .cell{ background:var(--navy-800); }
.logo-cloud .cell img{ filter:grayscale(1) contrast(1.1) brightness(1.4); }
.logo-cloud .cell:hover img{ filter:none; }

.rc-hero{
  background:
    radial-gradient(50% 60% at 20% -10%, var(--glow-teal-soft), transparent 60%),
    linear-gradient(155deg,#0c2233,#0a1826 60%);
}

/* ---------- Terminal typewriter line (hero) ---------- */
.terminal-line{
  display:flex;align-items:center;gap:.55em;
  font-family:var(--font-mono);
  font-size:.82rem;
  letter-spacing:.02em;
  color:var(--teal-400);
  margin:0 0 1rem;
}
.terminal-line .prompt{ color:var(--on-dark-500); }
.terminal-line .cursor{
  display:inline-block;width:.5em;color:var(--teal-400);
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* ---------- Live "experiences delivered" counter ---------- */
.live-counter{
  display:inline-flex;align-items:center;gap:.9rem;
  margin-top:clamp(1.75rem,3vw,2.5rem);
  padding:.85rem clamp(1rem,2.5vw,1.4rem);
  background:rgba(23,195,189,.06);
  border:1px solid var(--line-on-dark);
  max-width:100%;
}
.live-dot{
  width:8px;height:8px;border-radius:50%;background:#ff4d5e;flex:none;
  animation:live-pulse 1.7s ease-out infinite;
}
@keyframes live-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,77,94,.55); }
  70%{ box-shadow:0 0 0 8px rgba(255,77,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,77,94,0); }
}
.live-counter-value{
  font-family:var(--font-pixel);
  font-size:clamp(1.05rem,.95rem + .8vw,1.55rem);
  color:var(--teal-400);
  text-shadow:0 0 14px var(--glow-teal-soft);
  line-height:1;
  font-variant-numeric:tabular-nums;
  transition:color .15s ease;
}
.live-counter-value.tick{ color:#fff; }
.live-counter-copy{ line-height:1.35; }
.live-counter-label{
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--on-dark-300);
  display:block;
}
.live-counter-label small{ color:var(--on-dark-500); display:block; font-size:.92em; letter-spacing:.03em; }

/* ---------- Small extras ---------- */
::selection{ background:var(--glow-teal-strong); color:#04211f; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--teal-400); outline-offset:3px;
}
@media (max-width:640px){
  .live-counter{ flex-wrap:wrap; }
}

/* A touch more cyberpunk: slightly stronger grid + neon glow on accent text */
.circuit-bg::before{ opacity:.18; }
.accent{ text-shadow:0 0 16px rgba(23,195,189,.35); }

/* ---------- Hero stat row: bigger + glowing so it lands as the user scrolls ----------
   Grid (not flex-wrap) so the three stats always keep their own equal-width
   column: bigger digits no longer force the whole row to wrap the way
   flex-wrap did once the numbers got large enough to outgrow the narrower
   hero column at desktop widths. */
.hero-stats{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:.25rem clamp(1rem,3vw,2rem);
  flex-wrap:unset;
}
.hero-stats .stat b{
  font-size:clamp(2.1rem,1.5rem + 2vw,3.2rem);
  letter-spacing:-.015em;
  text-shadow:0 0 22px var(--glow-teal-soft), 0 0 48px rgba(23,195,189,.2);
  opacity:0; transform:translateY(10px) scale(.94);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.hero-stats .stat b.is-counting{ opacity:1; transform:translateY(0) scale(1); }
.hero-stats .stat span{
  display:block; margin-top:.3rem;
  font-size:.86rem; font-weight:600;
  color:var(--on-dark-100); letter-spacing:.02em;
}
@media (max-width:760px){
  .hero-stats .stat b{ font-size:clamp(1.7rem,1.3rem + 3vw,2.4rem); }
  .hero-stats .stat span{ font-size:.72rem; }
}

/* ============================================================
   1. SCROLL PROGRESS BAR
   ============================================================ */
.scroll-progress{
  position:fixed; top:0; left:0; height:7px; width:0%;
  background:linear-gradient(90deg,var(--teal-500),var(--teal-300));
  box-shadow:0 0 16px var(--glow-teal-strong), 0 0 4px var(--glow-teal-strong);
  z-index:10000; pointer-events:none;
}

/* ============================================================
   2. ANIMATED COUNT-UP STATS — no extra visual styling needed,
   the numbers already use --font-pixel via .hero-stats .stat b;
   this just keeps layout stable while the value is "0".
   ============================================================ */
[data-count-to]{ font-variant-numeric:tabular-nums; }

/* ============================================================
   3. GLITCH HOVER (hero H1 + section H2s)
   ============================================================ */
.hero h1,.section-head h2{ position:relative; }
.hero h1.glitch,.section-head h2.glitch{ cursor:default; }
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute; left:0; top:0; width:100%; height:100%;
  overflow:hidden;
  opacity:0; pointer-events:none;
  background:inherit;
}
.glitch:hover::before,.glitch:hover::after{ opacity:.85; }
.glitch:hover::before{
  color:#ff2d6b; mix-blend-mode:screen;
  animation:glitch-shift-1 .32s steps(2,end) infinite;
  clip-path:polygon(0 2%,100% 2%,100% 40%,0 40%);
}
.glitch:hover::after{
  color:var(--teal-300); mix-blend-mode:screen;
  animation:glitch-shift-2 .32s steps(2,end) infinite;
  clip-path:polygon(0 60%,100% 60%,100% 98%,0 98%);
}
@keyframes glitch-shift-1{
  0%{ transform:translate(0,0); } 50%{ transform:translate(-3px,1px); } 100%{ transform:translate(2px,-1px); }
}
@keyframes glitch-shift-2{
  0%{ transform:translate(0,0); } 50%{ transform:translate(3px,-1px); } 100%{ transform:translate(-2px,1px); }
}

/* ============================================================
   4. MAGNETIC BUTTONS — JS sets --mx/--my per mousemove;
   CSS just applies the transform with a snappy transition.
   ============================================================ */
.btn{ transform:translate(var(--mx,0),var(--my,0)); transition:transform .15s var(--ease),background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease); }

/* ============================================================
   5. TILT CARDS — JS sets rotation vars per mousemove.
   ============================================================ */
.tilt{
  transform:perspective(700px) rotateX(var(--tx,0)) rotateY(var(--ty,0)) translateZ(0);
  transition:transform .25s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  will-change:transform;
}

/* ============================================================
   6. TRUSTED-BY MARQUEE (homepage)
   ============================================================ */
/* This one section intentionally breaks from the all-dark surface above:
   the client logo files carry their own opaque light background, so on
   a dark section they read as a row of little light boxes. Rather than
   re-export every logo with a transparent background, the section
   itself goes light (the site's original, pre-cyberpunk paper/slate
   tokens, used literally since --paper-50/--slate-500 were remapped to
   dark values for the rest of this page) so the tiles blend in. */
.marquee-section{
  padding-block:clamp(1.75rem,3vw,2.5rem);
  background:#f5f8fa;
  border-block:1px solid rgba(10,25,40,.1);
  overflow:hidden;
}
.marquee-label{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:#5b6b7c; text-align:center; margin-bottom:1.1rem;
}
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{
  display:flex; align-items:center; gap:clamp(2.5rem,5vw,4rem); width:max-content;
  animation:marquee-scroll 34s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
/* Logo files carry their own opaque light background — on the section's
   dark predecessor those read as little boxes, so the section itself is
   light instead, and the filter is toned down to a plain grayscale
   (no brightness boost) so the tiles blend into the page. */
.marquee-track img{ height:26px; width:auto; object-fit:contain; filter:grayscale(1) contrast(1.05); opacity:.75; transition:opacity .2s var(--ease),filter .2s var(--ease); mix-blend-mode:multiply; }
.marquee-track img:hover{ opacity:1; filter:none; mix-blend-mode:normal; }
@keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   7. HUD CORNER-BRACKET FRAME (used around the game canvas)
   ============================================================ */
.hud-frame{ position:relative; }
.hud-frame::before{
  /* Corner brackets sit just INSIDE the frame (positive inset) and above
     the canvas (z-index), since .game-frame's overflow:hidden clips
     anything drawn outside its own box and the canvas paints over
     anything behind it. Color follows --sponsor-rgb (see .game-frame),
     so the brackets tint with whichever client is currently showing. */
  content:""; position:absolute; inset:8px; z-index:2; pointer-events:none;
  background:
    linear-gradient(to right, rgba(var(--sponsor-rgb),1) 6px, transparent 6px) top left / 30px 6px no-repeat,
    linear-gradient(to bottom, rgba(var(--sponsor-rgb),1) 6px, transparent 6px) top left / 6px 30px no-repeat,
    linear-gradient(to left, rgba(var(--sponsor-rgb),1) 6px, transparent 6px) top right / 30px 6px no-repeat,
    linear-gradient(to bottom, rgba(var(--sponsor-rgb),1) 6px, transparent 6px) top right / 6px 30px no-repeat,
    linear-gradient(to right, rgba(var(--sponsor-rgb),1) 6px, transparent 6px) bottom left / 30px 6px no-repeat,
    linear-gradient(to top, rgba(var(--sponsor-rgb),1) 6px, transparent 6px) bottom left / 6px 30px no-repeat,
    linear-gradient(to left, rgba(var(--sponsor-rgb),1) 6px, transparent 6px) bottom right / 30px 6px no-repeat,
    linear-gradient(to top, rgba(var(--sponsor-rgb),1) 6px, transparent 6px) bottom right / 6px 30px no-repeat;
  opacity:.95;
  filter:drop-shadow(0 0 10px rgba(var(--sponsor-rgb),.9));
}

/* ============================================================
   8. GAME CANVAS
   ============================================================ */
.game-frame{
  position:relative; aspect-ratio:4/3; border-radius:var(--radius);
  background:var(--navy-950);
  /* Techy cyberpunk window: colored edge + soft outer glow + inner scan
     vignette, layered on top of the existing drop shadow. The color is
     driven by --sponsor-rgb, a plain "r,g,b" triplet that game.js/
     theme-cyber.js rotates through client brand colors (see
     .game-sponsor below); it defaults to Vertex teal until JS kicks in. */
  --sponsor-rgb:63,214,207;
  border:4px solid rgba(var(--sponsor-rgb),.75);
  box-shadow:
    var(--shadow-2),
    0 0 0 2px rgba(var(--sponsor-rgb),.2),
    0 0 60px 10px rgba(var(--sponsor-rgb),.55),
    0 0 110px 20px rgba(var(--sponsor-rgb),.28),
    inset 0 0 60px rgba(var(--sponsor-rgb),.14);
  overflow:hidden;
  transition:border-color 1.4s ease, box-shadow 1.4s ease;
  /* Pull the frame up so its top edge lines up with the second line of
     the hero H1: fixed offset for the terminal-line + eyebrow stack
     above it (measured constant across viewport widths) plus one H1
     line-height (which does scale with --fs-hero). */
  margin-top:calc(73.5px + (var(--fs-hero) * 1.08));
}
.game-frame canvas{
  position:absolute; z-index:1; inset:0; width:100%; height:100%; display:block;
  image-rendering:pixelated; cursor:pointer;
}
.game-frame canvas:focus-visible{ outline:2px solid var(--teal-400); outline-offset:-2px; }
.game-sponsor{
  /* "Sponsor bug" in the top-left corner, like a broadcast overlay. A
     rectangle (not square) gives the logo more breathing room — the
     wide Yamaha wordmark especially was cramped in a small square — and
     its own fill color reads as each brand's real color; the ring/glow
     around it tints with --sponsor-rgb so it also ties to the frame's
     current brand-color glow. */
  position:absolute; top:.5rem; left:.5rem; z-index:3;
  width:64px; height:42px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  --sponsor-bg:#f4f7fa; /* default light chip until JS sets the brand color */
  background:var(--sponsor-bg); border-radius:8px;
  border:2px solid rgba(var(--sponsor-rgb),.9);
  box-shadow:0 0 22px 3px rgba(var(--sponsor-rgb),.7);
  padding:6px; overflow:hidden;
  transition:border-color 1.4s ease, box-shadow 1.4s ease, background-color 1.4s ease;
}
.game-sponsor img{ width:100%; height:100%; object-fit:contain; display:block; transition:opacity .4s ease; }
.game-caption{
  position:absolute; left:.5rem; bottom:.5rem; z-index:3;
  width:42px; height:42px; flex:none; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2em;
  font-family:var(--font-pixel); font-size:.19rem; line-height:1.35; letter-spacing:.01em;
  color:var(--on-dark-100); text-align:center;
  background:rgba(7,15,26,.6); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18); padding:.25em; border-radius:6px;
  pointer-events:none;
}
.game-caption .live-dot.small{ width:4px; height:4px; flex:none; margin:0; }
.game-mute{
  position:absolute; top:.6rem; right:.6rem; z-index:3;
  width:30px; height:30px; padding:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(7,15,26,.6); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18); color:var(--on-dark-100);
  font-size:.9rem; line-height:1; cursor:pointer;
  transition:border-color .2s var(--ease);
}
.game-mute:hover,.game-mute:focus-visible{ border-color:var(--teal-400); }
@media (max-width:760px){
  /* Below this width .hero-grid collapses to a single column and the
     game frame stacks under the full text block, so the "align with
     the H1's second line" offset no longer applies. */
  .game-frame{ aspect-ratio:1/1; margin-top:1.5rem; }
  .game-caption{ width:34px; height:34px; font-size:.17rem; padding:.2em; }
  .game-sponsor{ width:52px; height:34px; padding:5px; }
}