/* =========================================================
   MUHAMMAD ABDULLAH · PORTFOLIO
   Round 3 — "Aurora Glass" — Awwwards-grade refinement
   ========================================================= */

:root {
  /* ===== Background scale (deep -> elevated) ===== */
  --bg-deep:     #04050a;
  --bg-mid:      #07080f;
  --bg-surface:  #0b0d16;
  --bg-card:     #0f1220;
  --bg-card-h:   #141832;
  --bg-glass:    rgba(15, 18, 32, 0.82);  /* was .55 + blur(9px) */

  /* ===== Brand palette — extended ===== */
  --indigo:      #6366f1;
  --indigo-l:    #818cf8;
  --indigo-d:    #4f46e5;
  --cyan:        #22d3ee;
  --cyan-d:      #06b6d4;
  --emerald:     #10b981;
  --emerald-l:   #34d399;
  --rose:        #f43f5e;
  --rose-l:      #fb7185;
  --amber:       #f59e0b;
  --amber-l:     #fbbf24;
  --violet:      #a855f7;
  --violet-l:    #c084fc;
  --pink:        #ec4899;
  --orange:      #fb923c;
  --lime:        #84cc16;

  /* Accent gradients per token (used with [data-accent="x"]) */
  --grad-cyan:    linear-gradient(135deg, #22d3ee, #06b6d4 60%, #0891b2);
  --grad-indigo:  linear-gradient(135deg, #818cf8, #6366f1 60%, #4f46e5);
  --grad-violet:  linear-gradient(135deg, #c084fc, #a855f7 60%, #9333ea);
  --grad-emerald: linear-gradient(135deg, #34d399, #10b981 60%, #059669);
  --grad-rose:    linear-gradient(135deg, #fb7185, #f43f5e 60%, #e11d48);
  --grad-amber:   linear-gradient(135deg, #fbbf24, #f59e0b 60%, #d97706);
  --grad-pink:    linear-gradient(135deg, #f472b6, #ec4899 60%, #db2777);

  /* ===== Text ===== */
  --text-1:      #f1f4fb;
  --text-2:      #aab3c5;
  --text-3:      #727c94;
  --text-4:      #475065;

  /* ===== Borders & overlays ===== */
  --border:      rgba(129, 140, 248, 0.08);
  --border-h:    rgba(129, 140, 248, 0.22);
  --border-bright: rgba(129, 140, 248, 0.45);
  --inner-hl:    rgba(255, 255, 255, 0.05);

  /* ===== Gradients ===== */
  --grad-aurora: linear-gradient(135deg, #818cf8 0%, #22d3ee 50%, #10b981 100%);
  --grad-soft:   linear-gradient(135deg, rgba(129,140,248,.15), rgba(34,211,238,.12), rgba(16,185,129,.10));
  --grad-conic:  conic-gradient(from 0deg, #818cf8, #22d3ee, #10b981, #f43f5e, #818cf8);

  /* ===== Type ===== */
  --font-display: 'Geist', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-serif:   'Instrument Serif', Georgia, serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ===== Easings ===== */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-back:   cubic-bezier(.34, 1.56, .64, 1);
  --ease-expo:   cubic-bezier(.16, 1, .3, 1);
  --ease-smooth: cubic-bezier(.4, 0, .2, 1);

  /* ===== Duration tiers (use for new transitions; old code stays unified on ease-out) ===== */
  --t-fast:  180ms;
  --t-base:  280ms;
  --t-slow:  480ms;

  /* ===== Layout ===== */
  --container:   1240px;
  --container-narrow: 820px;
  --radius-sm:   10px;
  --radius:      16px;
  --radius-lg:   24px;
  --radius-xl:   32px;

  /* ===== Shadows ===== */
  --shadow-glow:   0 0 60px -10px rgba(129,140,248,.45);
  --shadow-card:   0 1px 0 var(--inner-hl) inset, 0 24px 60px -20px rgba(0,0,0,.6);
  --shadow-hover:  0 1px 0 var(--inner-hl) inset, 0 30px 80px -20px rgba(129,140,248,.25);
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: clamp(76px, 8vw, 92px); }
html, body { overflow-x: hidden; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-1);
  background: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  min-height: 100vh;
}

::selection { background: rgba(129,140,248,.35); color: white; }

/* Reveal gate — cinematic rise: lift + settle-in scale + de-blur on expo easing */
body.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(38px) scale(.985);
  filter: blur(7px);
}
body.js-ready [data-reveal].visible {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity .8s var(--ease-expo), transform 1s var(--ease-expo), filter .7s var(--ease-out);
}

/* =========================================================
   ATMOSPHERIC LAYERS
   ========================================================= */
.noise {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: .025;   /* no blend mode: a full-screen blend over the animated aurora
                      forced a GPU re-blend every frame — plain alpha is ~free */
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/></svg>");
}

.aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.aurora-layer {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .55;
  will-change: transform;
}
.aurora-1 {
  width: 780px; height: 780px;
  background: radial-gradient(circle, rgba(129,140,248,.65), transparent 70%);
  top: -200px; left: -150px;
  animation: drift1 28s ease-in-out infinite alternate;
}
.aurora-2 {
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(34,211,238,.55), transparent 70%);
  top: 30%; right: -200px;
  animation: drift2 32s ease-in-out infinite alternate;
}
.aurora-3 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(244,63,94,.4), transparent 70%);
  bottom: -150px; left: 30%;
  animation: drift3 26s ease-in-out infinite alternate;
}
@keyframes drift1 { 0% { transform: translate(0,0); } 100% { transform: translate(120px, 80px); } }
@keyframes drift2 { 0% { transform: translate(0,0); } 100% { transform: translate(-100px, 100px); } }
@keyframes drift3 { 0% { transform: translate(0,0); } 100% { transform: translate(80px, -120px); } }

.grid-bg {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(129,140,248,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129,140,248,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
}

/* Starfield — two canvases painted ONCE in JS (zero per-frame work).
   The slow opacity breathe is GPU-composited; layers counter-phase so the
   sky always feels alive without a single rAF tick. */
#stars-far, #stars-near {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block;
  pointer-events: none;
}
/* Static layers: painted once, cached, composited for free. (The old "breathe"
   opacity animation forced two full-viewport layers to recomposite every frame —
   a real cost on weak GPUs for an effect nobody consciously sees.) */
#stars-far  { opacity: .8; }
#stars-near { opacity: .95; }

/* Shooting stars — a brief streak every ~13–17s. Transform/opacity only, so it's
   a single composited layer; invisible (opacity 0) for ~96% of the cycle. */
.shooting-star {
  position: fixed; z-index: 1; pointer-events: none;
  width: 90px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(199,214,255,0));
  opacity: 0;
  transform: rotate(-32deg) translateX(0);
  will-change: transform, opacity;
}
.shooting-star.s1 { top: 12%; left: 70%; animation: shoot 13s linear 3s infinite; }
.shooting-star.s2 { top: 26%; left: 22%; animation: shoot 17s linear 9s infinite; }
@keyframes shoot {
  0%   { opacity: 0;  transform: rotate(-32deg) translateX(0); }
  1%   { opacity: .9; }
  4%   { opacity: 0;  transform: rotate(-32deg) translateX(-360px); }
  100% { opacity: 0;  transform: rotate(-32deg) translateX(-360px); }
}

@media (prefers-reduced-motion: reduce) {
  #stars-far, #stars-near { animation: none; }
  .shooting-star { display: none; }
  /* The glyph field is never started under reduced motion (glyphfield.js bails
     before allocating anything); this is belt and braces. */
  #glyph-field { display: none; }
}

#cursor-glow {
  position: fixed; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(129,140,248,.15), transparent 60%);
  border-radius: 50%; pointer-events: none; z-index: 3;
  transform: translate(-50%, -50%); opacity: 0;
  transition: opacity .4s var(--ease-out); mix-blend-mode: screen;
}

.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  background: var(--grad-aurora);
  transform-origin: 0 50%; transform: scaleX(0);
  z-index: 1000; will-change: transform;
}

/* =========================================================
   LAYOUT
   ========================================================= */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  position: relative; z-index: 5;
}
.container-narrow { max-width: var(--container-narrow); }

section {
  position: relative; z-index: 5;
  padding: clamp(84px, 9vw, 128px) 0;   /* premium breathing room that scales with viewport */
}
section:first-of-type { padding-top: 0; }

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text-1);
}
h2.display {
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
em.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.gradient-text {
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.gradient-bg { background: var(--grad-aurora); }
.dim { color: var(--text-3); }

.kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}

.section-head {
  margin-bottom: clamp(40px, 5vw, 62px);
  max-width: 880px;
}
.section-head .section-sub {
  margin-top: 24px;
  font-size: 1.05rem;
  color: var(--text-2);
  max-width: 600px;
  line-height: 1.6;
}

/* =========================================================
   NAV
   ========================================================= */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 20px 32px;
  background: linear-gradient(180deg, rgba(4,5,10,.85) 0%, rgba(4,5,10,0) 100%);
  transition: padding .4s var(--ease-out), background .4s var(--ease-out), border-color .4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
#navbar.scrolled {
  padding: 14px 32px;
  background: rgba(7, 8, 15, 0.85);
  border-bottom-color: var(--border);
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}

/* Brand */
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--text-1);
  transition: transform .25s var(--ease-out);
}
.brand:hover { transform: translateY(-1px); }
.brand-mark {
  position: relative; display: grid; place-items: center;
  filter: drop-shadow(0 4px 18px rgba(129,140,248,.3));
  transition: transform .4s var(--ease-back), filter .4s var(--ease-out);
}
.brand:hover .brand-mark {
  transform: rotate(-5deg) scale(1.08);
  filter: drop-shadow(0 6px 24px rgba(129,140,248,.55));
}
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--font-display);
  font-size: 0.98rem; font-weight: 700;
  letter-spacing: -0.01em;
}
.brand-role {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 3px;
}

/* Nav links */
.nav-links {
  display: flex; gap: 6px;
  background: rgba(15, 18, 32, 0.6);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px;
}
.nav-links a {
  position: relative;
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.86rem; font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  transition: color .25s var(--ease-out), background .25s var(--ease-out);
}
.nav-links a:hover { color: var(--text-1); background: rgba(129,140,248,.08); }
.nav-links a.active { color: var(--text-1); background: rgba(129,140,248,.14); }

/* Nav CTA — matches end-of-page primary button */
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px 10px 16px;
  background: var(--grad-aurora);
  border: 1px solid transparent;
  border-radius: 999px;
  color: white;
  font-family: var(--font-display);
  font-size: 0.86rem; font-weight: 600;
  text-decoration: none;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 30px -8px rgba(129,140,248,.6);
  transition: transform .3s var(--ease-back), box-shadow .3s var(--ease-out);
}
.nav-cta::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .7s var(--ease-out);
}
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px -8px rgba(129,140,248,.85);
}
.nav-cta:hover::after { transform: translateX(100%); }
.nav-cta .pulse-dot { background: white; }
.nav-cta .pulse-dot::after { border-color: rgba(255,255,255,.75); }

.pulse-dot {
  position: relative;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald);
}
/* Expanding "live" ring — transform + opacity only, so it composites on the GPU.
   (The old version animated box-shadow spread, which repaints every frame from
   page load — the exact paint loop that tripped the perf governor before.) */
.pulse-dot::after, .badge-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(16,185,129,.7);
  animation: dot-ping 2s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes dot-ping {
  0%   { transform: scale(1);   opacity: .8; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  background: transparent; border: 1px solid var(--border-h);
  border-radius: 12px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 0;
}
.nav-toggle span {
  width: 18px; height: 1.5px; background: var(--text-1);
  transition: transform .25s var(--ease-out), opacity .25s var(--ease-out);
}
.nav-toggle.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; top: 0; right: -100%; width: 80%; max-width: 360px; height: 100vh;
  background: rgba(7,8,15,.96);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 90px 32px 32px;
  gap: 8px; z-index: 99;
  transition: right .45s var(--ease-out);
}
.mobile-menu.active { right: 0; }
.mobile-menu a {
  color: var(--text-1); text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 600;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.mobile-menu .mm-cta {
  margin-top: 16px;
  background: var(--grad-aurora);
  color: white; border-radius: 12px;
  text-align: center; padding: 14px 20px;
  border-bottom: none;
}

/* =========================================================
   HERO
   ========================================================= */
#hero {
  min-height: 100vh;
  padding: 140px 0 80px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
  overflow: hidden;
}

/* --- Deep field ------------------------------------------------------------
   A single star crop sitting behind the glyph grid, filling the empty upper
   right of the hero. The dimming and the indigo duotone are baked into the
   file, so at runtime this is one static bitmap that only ever gets translated
   by the parallax — no filter, no blur, nothing to recompute per frame. The
   radial mask keeps it edgeless so it never reads as "an image on the page". */
.hero-deep {
  position: absolute; z-index: 0; pointer-events: none;
  top: -16%; right: -8%; width: 46%; height: 62%;
  background: url("/images/space/deep-field.webp") center / cover no-repeat;
  opacity: .38;
  -webkit-mask-image: radial-gradient(closest-side at 58% 52%, #000 4%, rgba(0,0,0,.46) 44%, transparent 80%);
  mask-image: radial-gradient(closest-side at 58% 52%, #000 4%, rgba(0,0,0,.46) 44%, transparent 80%);
}
@media (max-width: 768px) { .hero-deep { display: none; } }

/* --- Glyph field -----------------------------------------------------------
   Character-grid backdrop, painted by glyphfield.js. Sits above the fixed
   grid/aurora (z1) and below the noise + content.

   The mask does the composition work. It's an aperture: the field is hollowed
   out across the middle where the headline and proof cards sit, and only comes
   up to full strength out at the edges. That keeps every glyph off the copy
   while still filling the frame, and it holds regardless of how the hero grid
   reflows. Top and bottom fade to nothing so the field never collides with the
   navbar or the horizon arc. */
.gf {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; user-select: none; overflow: hidden;
  font-family: var(--font-mono);
}
.gf canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Ambient noise layer — aperture-masked, so it never sits on the copy. */
.gf-noise {
  -webkit-mask-image:
    radial-gradient(74% 68% at 44% 50%, transparent 0%, rgba(0,0,0,.10) 32%, rgba(0,0,0,.62) 64%, #000 88%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 78%, transparent 100%);
  mask-image:
    radial-gradient(74% 68% at 44% 50%, transparent 0%, rgba(0,0,0,.10) 32%, rgba(0,0,0,.62) 64%, #000 88%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Decoded lines get their own layer. The aperture that keeps the ambient field
   off the headline would also swallow the one thing worth reading, so this
   layer takes only a soft top/bottom fade. Placement is handled in JS, which
   keeps lines in the two horizontal bands the layout leaves clear. */
.gf-msg {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 84%, transparent 100%);
}

/* Decode progress: a hairline that fills left-to-right as a line resolves. */
.gf-bar {
  position: absolute; left: 0; top: 0; width: 0; height: 2px;
  transform-origin: left center; transform: scaleX(0);
  opacity: 0;
  background: linear-gradient(90deg, var(--cyan), var(--emerald));
  transition: transform 90ms linear, opacity 260ms linear;
}

/* Phones don't get the field at all. At 390px the aperture mask leaves the
   ambient layer essentially invisible, while the stacked layout drops the
   message lane straight onto the proof cards — whose backgrounds are
   semi-transparent, so decoded text bled through them. All cost, no payoff, on
   the device least able to afford it. glyphfield.js also refuses to start
   below this width, so nothing is allocated either. */
@media (max-width: 640px) {
  #glyph-field { display: none; }
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 56px;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 12px;
  background: rgba(15,18,32,.8);
  border: 1px solid var(--border-h);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem; font-weight: 500;
  color: var(--text-2);
  margin-bottom: 32px;
}
.badge-dot {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 12px var(--emerald);   /* static glow — painted once, free */
}

.hero-title {
  font-size: clamp(2.8rem, 7.5vw, 6.2rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.96;
  margin-bottom: 32px;
}
.title-row { display: block; }
.title-row em.serif { font-size: 1.05em; font-weight: 400; }
/* Signature accent — a soft, end-faded gradient rule under the keyword. Static. */
.hero-title .gradient-text { position: relative; }
.hero-title .gradient-text::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.015em;
  height: 0.07em; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--cyan) 22%, var(--emerald) 78%, transparent);
  opacity: .7;
}

/* Hero headline reveals line-by-line — compositor-only (transform + opacity),
   one-shot when the block flips to .visible. The block's own [data-reveal]
   motion is switched off so the two don't stack. */
body.js-ready .hero-title[data-reveal] { opacity: 1; transform: none; filter: none; }
body.js-ready .hero-title[data-reveal] .title-row { opacity: 0; transform: translateY(26px); }
body.js-ready .hero-title[data-reveal].visible .title-row {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-expo), transform .9s var(--ease-expo);
}
body.js-ready .hero-title[data-reveal].visible .title-row:nth-child(2) { transition-delay: .10s; }
body.js-ready .hero-title[data-reveal].visible .title-row:nth-child(3) { transition-delay: .20s; }
/* Fallbacks: never leave a line hidden when motion is shed. */
@media (prefers-reduced-motion: reduce) {
  body.js-ready .hero-title[data-reveal] .title-row { opacity: 1 !important; transform: none !important; }
}
html.lite .hero-title[data-reveal] .title-row { opacity: 1 !important; transform: none !important; transition: none !important; }
.cursor-blink {
  display: inline-block;
  width: 0.08em; height: 0.85em;
  background: var(--cyan);
  margin-left: 0.06em;
  border-radius: 2px;
  animation: blink 1s step-end infinite;
  vertical-align: -8%;
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.hero-sub {
  font-size: clamp(1.02rem, 1.2vw, 1.18rem);
  color: var(--text-2);
  max-width: 540px;
  line-height: 1.6;
  margin-bottom: 40px;
}

.hero-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 36px;
}

.hero-meta { display: flex; gap: 10px; flex-wrap: nowrap; }
.meta-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px;
  background: rgba(15,18,32,.72);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-3);
  white-space: nowrap;
}
.meta-pill svg { color: var(--cyan); }

/* === Hero right — proof stack === */
.hero-right {
  position: relative;
  height: 480px;
  display: grid; place-items: center;
}
.proof-stack {
  position: relative;
  width: 100%; max-width: 440px;
  transform-style: preserve-3d;
}
.proof-card {
  position: relative;
  display: block;
  background: rgba(15,18,32,.86);
  border: 1px solid var(--border-h);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.proof-card:hover {
  border-color: var(--border-bright);
  box-shadow: 0 1px 0 var(--inner-hl) inset, 0 30px 80px -20px rgba(129,140,248,.4);
}
.proof-top:hover    { transform: rotate(-1.5deg) translateY(-4px); }
.proof-mid:hover    { transform: translateX(20px) rotate(2deg) translateY(-4px); }
.proof-bottom:hover { transform: translateX(-12px) rotate(-1deg) translateY(-4px); }
.proof-card::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%);
  pointer-events: none;
}
.proof-top {
  padding: 18px;
  transform: rotate(-1.5deg);
}
.proof-mid {
  margin-top: 12px;
  padding: 14px 16px;
  transform: translateX(20px) rotate(2deg);
}
.proof-bottom {
  margin-top: 12px;
  padding: 14px 16px;
  transform: translateX(-12px) rotate(-1deg);
}

.pc-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.pc-avatar {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: 0.82rem; color: white;
  flex-shrink: 0;
  letter-spacing: -0.02em;
  line-height: 1;
}
.pc-avatar span {
  display: inline-block;
  line-height: 1;
  transform: translateY(0.5px);
}
.pc-head > div:nth-of-type(2) {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
}
.pc-head strong { font-size: 0.9rem; font-weight: 600; color: var(--text-1); }
.pc-head span { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-3); }
.pc-status {
  font-family: var(--font-mono);
  font-size: 0.66rem; font-weight: 600;
  color: var(--emerald);
}

.pc-body { padding-top: 14px; }
.pc-line {
  display: flex; gap: 10px; align-items: baseline;
  margin-bottom: 14px;
}
.pc-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.pc-name {
  font-size: 0.92rem; font-weight: 500;
  color: var(--text-1);
}
.pc-stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px; margin-bottom: 14px;
  background: rgba(7,8,15,.6);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.pc-stat-row > div { display: flex; flex-direction: column; gap: 4px; }
.pc-stat-row span {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 700;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pc-stat-row small {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pc-waveform {
  display: flex; align-items: center; gap: 3px;
  height: 32px;
}
.pc-waveform span {
  flex: 1; width: 2px;
  background: var(--cyan);
  border-radius: 2px;
  animation: wave 1.4s ease-in-out infinite;
  transform-origin: center;
}
.pc-waveform span:nth-child(2n)  { animation-delay: -0.2s; height: 40%; }
.pc-waveform span:nth-child(3n)  { animation-delay: -0.4s; height: 80%; }
.pc-waveform span:nth-child(4n)  { animation-delay: -0.6s; height: 30%; }
.pc-waveform span:nth-child(5n)  { animation-delay: -0.3s; height: 70%; }
.pc-waveform span:nth-child(7n)  { animation-delay: -0.5s; height: 95%; }
.pc-waveform span:nth-child(11n) { animation-delay: -0.1s; height: 25%; }
@keyframes wave {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

.pc-mini { display: flex; align-items: center; gap: 10px; }
.pc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--indigo-l);
  box-shadow: 0 0 10px var(--indigo-l);
}
.pc-dot.cyan { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.pc-mini strong { font-size: 0.88rem; font-weight: 600; color: var(--text-1); }
.pc-mini > span:not(.pc-dot):not(.pc-arrow) {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-3);
  flex: 1;
}
.pc-arrow { color: var(--text-3); font-size: 1rem; transition: transform .25s var(--ease-out); }
.proof-card:hover .pc-arrow { color: var(--cyan); transform: translate(2px,-2px); }

.floating-tag {
  position: absolute;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: rgba(15,18,32,.85);
  border: 1px solid var(--border-h);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
  color: var(--text-1);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  z-index: 10;
}
.floating-tag svg { color: var(--amber); }
.tag-1 { top: -16px; right: -20px; }
.tag-2 { bottom: -10px; left: -16px; }
.ft-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 8px var(--emerald);
}

/* === Hero stats === */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 36px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.hero-stats::before, .hero-stats::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-h), transparent);
}
.hero-stats::before { top: -1px; }
.hero-stats::after { bottom: -1px; }
.stat {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 20px;
  border-right: 1px solid var(--border);
}
.stat:last-child { border-right: none; }
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  display: flex; align-items: baseline; gap: 2px;
}
.stat-number {
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-suffix { color: var(--cyan); font-weight: 600; font-size: 0.85em; }
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: transform .3s var(--ease-back), box-shadow .3s var(--ease-out), background .3s var(--ease-out);
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  will-change: transform;
}
.btn-primary {
  background: var(--grad-aurora);
  color: white;
  box-shadow: 0 8px 30px -8px rgba(129,140,248,.6);
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .7s var(--ease-out);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px -8px rgba(129,140,248,.85);
}
.btn-primary:hover::after { transform: translateX(100%); }

.btn-ghost {
  background: rgba(15,18,32,.72);
  color: var(--text-1);
  border-color: var(--border-h);
}
.btn-ghost:hover {
  background: rgba(15,18,32,.86);
  border-color: var(--border-bright);
  transform: translateY(-2px);
}
.btn-lg { padding: 18px 32px; font-size: 1rem; }

/* ===== CTA dropdown menu (Book → Calendly / WhatsApp / Email) ===== */
.cta-menu { position: relative; display: inline-flex; }
.cta-trigger { cursor: pointer; }
.cta-chev { margin-left: 1px; opacity: .9; transition: transform .3s var(--ease-out); }
.cta-menu.open .cta-chev { transform: rotate(180deg); }

.cta-options {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px) scale(.98);
  transform-origin: top center;
  min-width: max(100%, 224px);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-card);
  border: 1px solid var(--border-h);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility .25s;
  z-index: 60;
}
.cta-menu.open .cta-options {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}
/* Right-aligned variant (nav button near the top-right edge) */
.cta-menu--right .cta-options {
  left: auto; right: 0;
  transform-origin: top right;
  transform: translateY(-6px) scale(.98);
}
.cta-menu--right.open .cta-options {
  transform: translateY(0) scale(1);
}
.cta-options a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.cta-options a:hover, .cta-options a:focus-visible {
  background: var(--bg-card-h);
  color: var(--text-1);
  outline: none;
}
.cta-options a svg { flex-shrink: 0; opacity: .7; }
.cta-options a:hover svg { opacity: 1; }
.cta-options a .ico-wa { color: #25d366; opacity: .9; }

/* =========================================================
   TRUSTED — more prominent
   ========================================================= */
.trusted {
  padding: 80px 0 40px;
  position: relative; z-index: 5;
}
.trusted-label {
  width: 100%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.78rem; font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 auto 40px;
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  max-width: 700px;
}
.trusted-bar {
  flex: 1 1 auto; height: 1px; min-width: 40px; max-width: 200px;
  background: linear-gradient(90deg, transparent, var(--border-bright));
  display: inline-block;
}
.trusted-label .trusted-bar:last-child {
  background: linear-gradient(90deg, var(--border-bright), transparent);
}
.trusted-row {
  display: block;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 0;
  background: var(--bg-glass);
  border: 1px solid var(--border-h);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.trusted-row::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 0% 50%, rgba(129,140,248,.08), transparent),
    radial-gradient(ellipse 60% 80% at 100% 50%, rgba(34,211,238,.08), transparent),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 35%);
  pointer-events: none;
}
.t-name {
  display: inline-grid; place-items: center;
  padding: 13px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  color: var(--text-2);
  background: rgba(15,18,32,.78);
  border: 1px solid var(--border);
  border-radius: 999px;
  text-align: center;
  transition: all .3s var(--ease-back);
  white-space: nowrap;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.t-name::before {
  content: ''; position: absolute; inset: 0;
  background: var(--grad-aurora);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
  z-index: -1;
}
.t-name:hover {
  color: white;
  border-color: transparent;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 30px -10px rgba(129,140,248,.6);
}
.t-name:hover::before { opacity: 1; }
/* Rotate accent colours per pill (each pill gets a different brand-accent hue on hover) */
.t-name:nth-child(6n+1)::before { background: var(--grad-indigo); }
.t-name:nth-child(6n+2)::before { background: var(--grad-cyan); }
.t-name:nth-child(6n+3)::before { background: var(--grad-emerald); }
.t-name:nth-child(6n+4)::before { background: var(--grad-amber); }
.t-name:nth-child(6n+5)::before { background: var(--grad-rose); }
.t-name:nth-child(6n+6)::before { background: var(--grad-violet); }
@media (max-width: 768px) {
  .trusted-row { padding: 13px 0; }
  .t-name { font-size: 0.85rem; padding: 10px 16px; }
  .trusted-bar { max-width: 60px; min-width: 20px; }
  .trusted-label { font-size: 0.7rem; letter-spacing: 0.1em; }
}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee-section {
  padding: 36px 0;
  overflow: hidden;
  position: relative; z-index: 5;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}
.marquee-track {
  display: flex; align-items: center; gap: 36px;
  width: max-content;
  animation: marquee-scroll 45s linear infinite;
}
.m-item {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--text-2);
  white-space: nowrap;
  transition: color .3s var(--ease-out);
}
.m-item:hover { color: var(--text-1); }
.m-d { color: var(--indigo-l); font-size: 0.7rem; opacity: 0.6; }
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =========================================================
   ABOUT — BENTO
   ========================================================= */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 20px;
}
.bento-card {
  position: relative;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out);
  overflow: hidden;
}
.bento-card::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 35%);
  pointer-events: none;
}
.bento-card:hover { border-color: var(--border-h); transform: translateY(-3px); }
.b-bio { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; gap: 16px; }
.b-bio p { color: var(--text-2); font-size: 1.02rem; line-height: 1.7; }
.b-bio strong { color: var(--text-1); font-weight: 600; }

/* Lead paragraph — larger, brighter intro to anchor the bio */
.b-bio .lead { font-size: 1.16rem; line-height: 1.6; color: var(--text-1); }
.b-bio .lead strong { font-weight: 700; }

/* Inline prose links — on-brand aurora underline (replaces default blue) */
.b-bio p a {
  color: var(--cyan);
  font-weight: 500;
  text-decoration: none;
  background-image: var(--grad-aurora);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1.5px;
  padding-bottom: 1px;
  transition: background-size .3s var(--ease-out), filter .25s var(--ease-out);
}
.b-bio p a:hover { background-size: 100% 3px; filter: brightness(1.2); }
.b-bio p a strong { color: inherit; font-weight: 600; }

/* Reusable colored keyword highlights */
.hl-cyan    { color: var(--cyan);      font-weight: 600; }
.hl-indigo  { color: var(--indigo-l);  font-weight: 600; }
.hl-violet  { color: var(--violet-l);  font-weight: 600; }
.hl-emerald { color: var(--emerald-l); font-weight: 600; }
.hl-amber   { color: var(--amber-l);   font-weight: 600; }
.hl-rose    { color: var(--rose-l);    font-weight: 600; }

.b-stat { display: flex; flex-direction: column; gap: 12px; }
.b-stat p { color: var(--text-2); font-size: 0.92rem; line-height: 1.5; }
.b-stat strong { color: var(--text-1); }
.big-num {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}
.b-stat-1 { background: linear-gradient(135deg, rgba(129,140,248,.08), rgba(34,211,238,.04)); }
.b-stat-2 { background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(244,63,94,.04)); }

.b-info { grid-column: span 2; padding: 28px 32px; display: flex; flex-direction: column; gap: 2px; }
.info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
.info-row:last-child { border-bottom: none; }
.info-key {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.info-key::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px -1px currentColor;
  color: var(--cyan);
  flex-shrink: 0;
}
.info-row:nth-child(1) .info-key::before { color: var(--cyan); }
.info-row:nth-child(2) .info-key::before { color: var(--indigo-l); }
.info-row:nth-child(3) .info-key::before { color: var(--violet-l); }
.info-row:nth-child(4) .info-key::before { color: var(--emerald-l); }
.info-row:nth-child(5) .info-key::before { color: var(--amber-l); }
.info-val {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-1);
  text-align: right;
}
.info-val a { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--text-3); }
.info-val a:hover { color: var(--cyan); border-color: var(--cyan); }

.b-quote {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(129,140,248,.06), rgba(244,63,94,.04));
  position: relative;
  display: flex; align-items: center;
}
.b-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--text-1);
  padding-left: 12px;
}
.quote-mark {
  position: absolute; top: 24px; left: 28px;
  color: var(--indigo-l); opacity: 0.4;
}

/* =========================================================
   SERVICES
   ========================================================= */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.svc-card {
  position: relative;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 16px;
  transition: all .35s var(--ease-out);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.svc-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-aurora);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s var(--ease-out);
}
.svc-card::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%);
  pointer-events: none;
}
.svc-card:hover {
  border-color: var(--border-h);
  transform: translateY(-4px);
  background: rgba(20, 24, 50, 0.55);
  box-shadow: var(--shadow-hover);
}
.svc-card:hover::before { transform: scaleX(1); }

.svc-no {
  font-family: var(--font-mono);
  font-size: 0.78rem; font-weight: 600;
  color: var(--cyan);
  letter-spacing: 0.1em;
}
.svc-card h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.svc-card p { color: var(--text-2); font-size: 0.94rem; line-height: 1.6; flex: 1; }
.svc-stack {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-3);
  padding: 8px 12px;
  background: rgba(7,8,15,.5);
  border: 1px solid var(--border);
  border-radius: 8px;
  align-self: flex-start;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out);
}
.svc-stack:hover {
  background: rgba(129,140,248,.12);
  border-color: var(--border-h);
  color: var(--indigo-l);
  transform: translateY(-1px);
}
.svc-card:hover .svc-stack {
  color: var(--text-2);
  border-color: var(--border-h);
}
.svc-stat {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--emerald);
  margin-top: 4px;
}

/* =========================================================
   WORK — featured + grid
   ========================================================= */
.featured-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}
.featured-card {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 32px;
  overflow: hidden;
  isolation: isolate;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .4s var(--ease-out);
  box-shadow: var(--shadow-card);
}
/* Conic gradient animated border via mask */
.featured-card::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from 0deg, var(--indigo-l), var(--cyan), var(--emerald), var(--rose), var(--indigo-l));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.7;
  /* masked + rotating = per-frame repaint of 3 card-sized gradients; the ring
     now spins only while the visitor is actually on the card */
  animation: rotate-conic 10s linear infinite;
  animation-play-state: paused;
  z-index: -1;
}
.featured-card:hover::before { animation-play-state: running; }
@keyframes rotate-conic {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.featured-card::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%);
  pointer-events: none;
}
.featured-card:hover { transform: translateY(-4px); }

.fc-tag {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.fc-type {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.fc-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem; font-weight: 600;
  padding: 4px 10px;
  background: rgba(129,140,248,.1);
  border: 1px solid var(--border-h);
  border-radius: 999px;
  color: var(--text-2);
  white-space: nowrap;
  flex-shrink: 0;
}
.fc-badge.live {
  background: rgba(16,185,129,.1);
  border-color: rgba(16,185,129,.3);
  color: var(--emerald);
}
.fc-badge.building {
  background: rgba(245,158,11,.1);
  border-color: rgba(245,158,11,.32);
  color: var(--amber-l);
}
.featured-card h3 {
  font-size: 1.45rem; font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
}
.featured-card > p { color: var(--text-2); font-size: 0.94rem; line-height: 1.65; }
.fc-meta {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.fc-meta > div {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 0.85rem;
  color: var(--text-1);
}
.fc-meta span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  min-width: 52px;
  flex-shrink: 0;
}
.fc-meta a { color: var(--cyan); text-decoration: none; border-bottom: 1px dashed currentColor; }
.fc-meta a:hover { color: var(--text-1); }

/* Outcome metrics — scannable proof band on featured cards (static, zero runtime) */
.fc-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 15px 14px;
  background: rgba(7,8,15,.5);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.fc-metrics > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fc-metrics b {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad-aurora);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.fc-metrics span {
  font-family: var(--font-mono); font-size: 0.6rem;
  color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em;
  line-height: 1.25;
}
/* Tint the metric numbers to each card's accent for cohesion */
.featured-card[data-accent="cyan"]   .fc-metrics b { background: var(--grad-cyan);   -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.featured-card[data-accent="violet"] .fc-metrics b { background: var(--grad-violet); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.featured-card[data-accent="rose"]   .fc-metrics b { background: var(--grad-rose);   -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.fc-tags, .wc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-tags span, .wc-tags span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 4px 9px;
  background: rgba(15,18,32,.8);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-2);
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out);
}
.fc-tags span:hover, .wc-tags span:hover {
  background: rgba(129,140,248,.12);
  border-color: var(--border-h);
  color: var(--indigo-l);
  transform: translateY(-1px);
}

/* Work grid */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.work-card {
  position: relative;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 26px 22px;
  display: flex; flex-direction: column; gap: 14px;
  transition: all .35s var(--ease-out);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.work-card::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%);
  pointer-events: none;
}
.work-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--grad-aurora);
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.work-card:hover {
  border-color: var(--border-h);
  background: rgba(20, 24, 50, 0.5);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.work-card:hover::after { opacity: 1; }

/* Rotating conic ring on the three lead work cards — hover-driven, matching the featured row */
.work-card.wc-ringed { isolation: isolate; }
.work-card.wc-ringed::before {
  inset: -1px;
  padding: 1.5px;
  background: conic-gradient(from 0deg, var(--indigo-l), var(--cyan), var(--emerald), var(--rose), var(--indigo-l));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .55;
  animation: rotate-conic 10s linear infinite;
  animation-play-state: paused;
  z-index: -1;
}
.work-card.wc-ringed:hover::before { animation-play-state: running; }

.wc-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
}
.wc-type {
  font-family: var(--font-mono);
  font-size: 0.66rem; font-weight: 600;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.wc-badge {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  padding: 3px 8px;
  background: rgba(15,18,32,.8);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  white-space: nowrap;
  flex-shrink: 0;
}
.wc-badge.live {
  background: rgba(16,185,129,.1);
  border-color: rgba(16,185,129,.3);
  color: var(--emerald);
}
.wc-icon {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  color: var(--text-3);
  background: rgba(15,18,32,.76);
  border: 1px solid var(--border);
  transition: all .25s var(--ease-out);
}
.wc-icon:hover { color: var(--cyan); border-color: var(--border-h); }

.work-card h3 {
  font-size: 1.1rem; font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.work-card p { color: var(--text-2); font-size: 0.88rem; line-height: 1.6; flex: 1; }
.wc-foot {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.wc-link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--cyan);
  text-decoration: none;
  display: inline-block;
}
.wc-link:hover { color: var(--text-1); }

/* =========================================================
   PROCESS
   ========================================================= */
.process-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: step;
  position: relative;
}
.process-track::before {
  content: ''; position: absolute;
  top: 28px; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-h), transparent);
  z-index: 0;
}
.proc-step {
  position: relative;
  padding: 28px 24px;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 12px;
  transition: all .3s var(--ease-out);
}
.proc-step:hover { border-color: var(--border-h); transform: translateY(-3px); }
.proc-no {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.03em;
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.proc-step h3 { font-size: 1.1rem; font-weight: 700; }
.proc-step p { color: var(--text-2); font-size: 0.9rem; line-height: 1.55; }

/* =========================================================
   RESULTS
   ========================================================= */
.results-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.res-card {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: left;
  position: relative; overflow: hidden;
  transition: all .3s var(--ease-out);
}
.res-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%);
  pointer-events: none;
}
.res-card:hover { border-color: var(--border-h); transform: translateY(-3px); }
.res-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 10px;
}
.res-val span { font-size: 0.7em; }
.res-unit {
  font-family: var(--font-mono);
  font-size: 0.78rem; font-weight: 600;
  color: var(--text-2);
  margin-bottom: 8px;
}
.res-lbl { font-size: 0.85rem; color: var(--text-3); line-height: 1.5; }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.review-screenshot {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  transition: all .3s var(--ease-out);
  position: relative; overflow: hidden;
  text-align: left;
  cursor: zoom-in;
  color: inherit;
  font: inherit;
  width: 100%;
  display: block;
}
.review-screenshot:hover {
  border-color: var(--border-h);
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.review-screenshot:hover img { transform: scale(1.02); }
.review-screenshot img {
  width: 100%; height: auto;
  border-radius: 12px;
  display: block;
  transition: transform .4s var(--ease-out);
}
.rs-verified {
  display: flex; align-items: center; gap: 8px;
  padding-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-3);
}
.rs-verified > span:first-child {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 8px var(--emerald);
  flex-shrink: 0;
}
.rs-zoom {
  margin-left: auto;
  color: var(--cyan);
  transition: color .25s var(--ease-out);
}
.review-screenshot:hover .rs-zoom { color: var(--text-1); }

.quote-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.quote-card {
  padding: 28px;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 18px;
  transition: all .3s var(--ease-out);
}
.quote-card:hover { border-color: var(--border-h); transform: translateY(-3px); }
.quote-card p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-1);
}
.quote-card footer {
  display: flex; flex-direction: column; gap: 3px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.quote-card footer strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-1);
}
.quote-card footer span {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-3);
}

/* =========================================================
   CERTIFICATIONS — image-preview cards
   ========================================================= */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.cert-card {
  position: relative;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-h);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
  transition: all .4s var(--ease-out);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  width: 100%;
}
.cert-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--a-g, var(--grad-aurora));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .5s var(--ease-out);
  z-index: 3;
}
.cert-card:hover::before { transform: scaleX(1); }
.cert-card:hover {
  border-color: color-mix(in srgb, var(--a, var(--indigo-l)) 50%, transparent);
  transform: translateY(-5px);
  box-shadow: 0 1px 0 var(--inner-hl) inset,
              0 30px 80px -20px color-mix(in srgb, var(--a, var(--indigo-l)) 30%, transparent);
}

/* Featured certs (AWS + n8n) get a wider gradient glow */
.cert-feat {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--a, var(--indigo-l)) 8%, transparent), transparent 60%),
    var(--bg-card);
}

/* Thumbnail image — fills top half with subtle frame */
.cert-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #fff;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.cert-thumb::after {
  /* Gradient fade from image to card so the join feels seamless */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(15,18,32,.15) 100%);
  pointer-events: none;
}
.cert-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .6s var(--ease-out), filter .4s var(--ease-out);
  filter: saturate(0.92);
}
.cert-card:hover .cert-thumb img {
  transform: scale(1.05);
  filter: saturate(1.1);
}

/* Body — issuer + title + id */
.cert-body {
  padding: 18px 20px 14px;
  display: flex; flex-direction: column; gap: 4px;
  flex: 1;
}
.cert-issuer {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--a-l, var(--cyan));
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.cert-card h3 {
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text-1);
}
.cert-id {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-3);
  margin-top: 2px;
}

/* "View certificate ↗" footer strip */
.cert-zoom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--a-l, var(--cyan));
  background: rgba(7,8,15,.4);
  transition: all .3s var(--ease-out);
}
.cert-card:hover .cert-zoom {
  background: color-mix(in srgb, var(--a, var(--indigo-l)) 10%, rgba(7,8,15,.4));
  color: var(--text-1);
}

/* =========================================================
   EXPERIENCE TIMELINE
   ========================================================= */
.timeline {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}
.timeline::before {
  content: ''; position: absolute;
  left: 11px; top: 16px; bottom: 16px; width: 1px;
  background: linear-gradient(180deg, var(--border-h), var(--border), transparent);
}
.tl-item {
  position: relative;
  padding: 0 0 36px 50px;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: 5px; top: 14px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--indigo-l);
  box-shadow: 0 0 12px rgba(129,140,248,.5), inset 0 0 0 2px var(--bg-deep);
  z-index: 2;
}
.tl-item:hover .tl-dot {
  background: var(--indigo);
  box-shadow: 0 0 16px rgba(129,140,248,.85), inset 0 0 0 2px var(--bg-deep);
}
.tl-card {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 26px;
  transition: all .3s var(--ease-out);
}
.tl-card:hover { border-color: var(--border-h); transform: translateX(4px); }
.tl-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 8px;
}
.tl-card h3 {
  font-size: 1.1rem; font-weight: 700;
  letter-spacing: -0.015em;
}
.tl-date {
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 500;
  color: var(--cyan);
}
.tl-company {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-3);
  display: block;
  margin: 6px 0 12px;
}
.tl-card p { color: var(--text-2); font-size: 0.92rem; line-height: 1.6; }

/* --- Live "current role" indicator ---
   Pulse is a transform/opacity ring (compositor-only — no per-frame paint),
   so it never burdens the main thread or trips the perf governor. */
.tl-item.current .tl-dot {
  background: var(--emerald);
  border-color: var(--emerald-l);
  box-shadow: inset 0 0 0 2px var(--bg-deep);
}
.tl-item.current .tl-dot::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(16,185,129,.5);
  opacity: 0;
  pointer-events: none;
  animation: tl-pulse 2.4s var(--ease-out) infinite;
}
.tl-item.current:hover .tl-dot {
  background: var(--emerald-l);
}
@keyframes tl-pulse {
  0%   { transform: scale(.65); opacity: .7; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
.tl-live {
  display: inline-flex; align-items: center;
  margin-right: 8px; padding: 1px 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--emerald-l);
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.3);
  vertical-align: middle;
}

/* =========================================================
   SKILLS
   ========================================================= */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.skill-group {
  padding: 26px;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all .3s var(--ease-out);
}
.skill-group:hover { border-color: var(--border-h); transform: translateY(-2px); }
.skill-group h3 {
  font-family: var(--font-mono);
  font-size: 0.78rem; font-weight: 600;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.skill-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-tags span {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 6px 11px;
  background: rgba(15,18,32,.8);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-1);
  transition: all .25s var(--ease-out);
}
.skill-tags span:hover {
  border-color: var(--border-h);
  background: rgba(129,140,248,.1);
  color: var(--indigo-l);
  transform: translateY(-1px);
}

/* =========================================================
   FAQ
   ========================================================= */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .3s var(--ease-out);
}
.faq-item:hover { border-color: var(--border-h); }
.faq-item.open { border-color: var(--border-bright); }
.faq-trigger {
  width: 100%;
  padding: 20px 24px;
  background: transparent;
  border: none;
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 500;
  text-align: left;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  cursor: pointer;
}
.faq-icon {
  color: var(--cyan);
  transition: transform .35s var(--ease-out);
  flex-shrink: 0;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height .4s var(--ease-out);
}
.faq-item.open .faq-answer { max-height: 240px; }
.faq-answer p {
  padding: 0 24px 22px;
  color: var(--text-2);
  font-size: 0.94rem;
  line-height: 1.6;
}
.faq-answer a { color: var(--cyan); text-decoration: none; border-bottom: 1px dashed currentColor; }
.faq-answer a:hover { color: var(--text-1); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-block {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 60px 40px;
  background: var(--bg-glass);
  border: 1px solid var(--border-h);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.contact-block::before {
  content: ''; position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: conic-gradient(from 180deg at 50% 50%, transparent, rgba(129,140,248,.06), transparent 30%);
  /* static — this pseudo is ~200% of the section (≈2800px square); rotating it
     forever was one of the heaviest per-frame costs on the whole page */
  z-index: -1;
}
.contact-block .kicker { justify-content: center; }
.contact-block h2 {
  margin: 0 0 24px;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
}
.contact-block > p {
  color: var(--text-2);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 32px;
}
.contact-note {
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--text-3);
  text-wrap: pretty;
}
.contact-avail {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-2);
}
.contact-links {
  margin-top: 24px;
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
}
.contact-links a {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-2);
  text-decoration: none;
  transition: color .25s var(--ease-out);
}
.contact-links a:hover { color: var(--cyan); }
.cl-dot { color: var(--text-4); }
.cl-wa { display: inline-flex; align-items: center; gap: 6px; }
.cl-wa svg { flex-shrink: 0; }
.cl-wa:hover { color: #25d366; }

/* =========================================================
   FOOTER
   ========================================================= */
footer {
  padding: 36px 0 28px;
  border-top: 1px solid var(--border);
  position: relative; z-index: 5;
}
.footer-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.brand-sm .brand-name { font-size: 0.88rem; }
.foot-credit {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-3);
}
.foot-links { display: flex; gap: 16px; }
.foot-links a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-3);
  text-decoration: none;
  transition: color .25s var(--ease-out);
}
.foot-links a:hover { color: var(--cyan); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 60px; }
  .hero-right { height: 420px; }
  .featured-row { grid-template-columns: 1fr 1fr; }
  .featured-card:first-child { grid-column: span 2; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-grid { grid-template-columns: repeat(3, 1fr); }
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .b-bio, .b-info, .b-quote { grid-column: span 2; }
  .b-bio { grid-row: auto; }
  .results-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .hero-stats .stat { padding: 12px; border-right: none; border-bottom: 1px solid var(--border); }
  .process-track { grid-template-columns: repeat(2, 1fr); }
  .process-track::before { display: none; }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  section { padding: 80px 0; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  #navbar { padding: 14px 20px; }
  #navbar.scrolled { padding: 12px 20px; }

  h2.display { font-size: clamp(2rem, 8vw, 3rem); }
  .hero-title { font-size: clamp(2.2rem, 12vw, 4rem); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid, .quote-row { grid-template-columns: 1fr; }
  .featured-row { grid-template-columns: 1fr; }
  .featured-card:first-child { grid-column: span 1; }
  .work-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .skills-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .b-bio, .b-info, .b-quote { grid-column: span 1; }
  .b-stat { padding: 24px; }
  .results-grid { grid-template-columns: repeat(2, 1fr); }
  .process-track { grid-template-columns: 1fr; }
  .section-head { margin-bottom: 56px; }
  .contact-block { padding: 56px 24px; }
  .footer-row { flex-direction: column; text-align: center; }
  .hero-right { height: 380px; }
  .proof-stack { transform: scale(0.85); }
  .floating-tag { font-size: 0.65rem; padding: 5px 9px; }
}

@media (max-width: 480px) {
  .hero-title { font-size: clamp(2rem, 14vw, 3.4rem); }
  .hero-stats { grid-template-columns: 1fr; }
  .res-card { padding: 22px 18px; }
  .results-grid { grid-template-columns: 1fr 1fr; }
  .res-val { font-size: 1.9rem; }
  .hero-actions .btn { flex: 1; justify-content: center; }
  .trusted-row { font-size: 0.85rem; }
  .hero-meta { flex-wrap: wrap; }
}

/* =========================================================
   TIMELINE SUB-LABEL
   ========================================================= */
.tl-sub {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.02em;
  margin-left: 4px;
}

/* =========================================================
   COLOUR ACCENT SYSTEM — [data-accent]
   Each card opts into a colour theme via data-accent.
   Drives top-bar, number-text, hover halo, tag chip colours.
   ========================================================= */
[data-accent="cyan"]    { --a:    var(--cyan);    --a-l: var(--cyan);    --a-g: var(--grad-cyan); }
[data-accent="indigo"]  { --a:    var(--indigo);  --a-l: var(--indigo-l); --a-g: var(--grad-indigo); }
[data-accent="violet"]  { --a:    var(--violet);  --a-l: var(--violet-l); --a-g: var(--grad-violet); }
[data-accent="emerald"] { --a:    var(--emerald); --a-l: var(--emerald-l); --a-g: var(--grad-emerald); }
[data-accent="rose"]    { --a:    var(--rose);    --a-l: var(--rose-l);   --a-g: var(--grad-rose); }
[data-accent="amber"]   { --a:    var(--amber);   --a-l: var(--amber-l);  --a-g: var(--grad-amber); }
[data-accent="pink"]    { --a:    var(--pink);    --a-l: #f472b6;         --a-g: var(--grad-pink); }

/* Service cards inherit the accent on their top bar + number + stack pill + on-hover glow */
.svc-card[data-accent] .svc-no { color: var(--a-l); }
.svc-card[data-accent]::before { background: var(--a-g); }
.svc-card[data-accent]:hover {
  border-color: color-mix(in srgb, var(--a) 40%, transparent);
  box-shadow: 0 1px 0 var(--inner-hl) inset, 0 30px 80px -20px color-mix(in srgb, var(--a) 35%, transparent);
}
.svc-card[data-accent] .svc-stack {
  background: color-mix(in srgb, var(--a) 8%, rgba(7,8,15,.5));
  border-color: color-mix(in srgb, var(--a) 25%, var(--border));
  color: color-mix(in srgb, var(--a-l) 75%, var(--text-3));
}
.svc-card[data-accent] .svc-stack:hover,
.svc-card[data-accent]:hover .svc-stack {
  background: color-mix(in srgb, var(--a) 16%, rgba(7,8,15,.5));
  border-color: color-mix(in srgb, var(--a) 45%, var(--border));
  color: var(--a-l);
}
.svc-card[data-accent] .svc-stat { color: var(--a-l); }

/* Process steps — number gets accent */
.proc-step[data-accent] .proc-no {
  background: var(--a-g);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.proc-step[data-accent]:hover {
  border-color: color-mix(in srgb, var(--a) 40%, transparent);
}

/* Skill groups — header gets accent + accent line */
.skill-group[data-accent] h3 { color: var(--a-l); }
.skill-group[data-accent] {
  position: relative;
}
.skill-group[data-accent]::before {
  content: ''; position: absolute; top: 0; left: 26px; right: 26px;
  height: 2px;
  background: var(--a-g);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}
.skill-group[data-accent]:hover::before { opacity: 1; }
.skill-group[data-accent] .skill-tags span:hover {
  border-color: color-mix(in srgb, var(--a) 40%, transparent);
  background: color-mix(in srgb, var(--a) 10%, rgba(15,18,32,.8));
  color: var(--a-l);
}

/* Result cards — value uses accent gradient */
.res-card[data-accent] .res-val {
  background: var(--a-g);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.res-card[data-accent] .res-unit { color: var(--a-l); }
.res-card[data-accent]:hover {
  border-color: color-mix(in srgb, var(--a) 35%, transparent);
  box-shadow: 0 1px 0 var(--inner-hl) inset, 0 24px 60px -20px color-mix(in srgb, var(--a) 30%, transparent);
}

/* Featured cards — accent-tinted conic border + a soft accent glow */
.featured-card[data-accent]::before {
  background: conic-gradient(from 0deg, var(--a-l), var(--cyan), var(--emerald), var(--a-l));
}
.featured-card[data-accent]:hover {
  box-shadow: 0 30px 80px -20px color-mix(in srgb, var(--a) 30%, transparent);
}
.featured-card[data-accent] .fc-type { color: var(--a-l); }

/* Hero stats — rotate gradient per cell for colour variety */
.hero-stats .stat:nth-child(1) .stat-number { background: var(--grad-cyan); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-stats .stat:nth-child(2) .stat-number { background: var(--grad-violet); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-stats .stat:nth-child(3) .stat-number { background: var(--grad-emerald); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-stats .stat:nth-child(4) .stat-number { background: var(--grad-amber); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-stats .stat:nth-child(5) .stat-number { background: var(--grad-rose); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-stats .stat:nth-child(1) .stat-suffix { color: var(--cyan); }
.hero-stats .stat:nth-child(2) .stat-suffix { color: var(--violet-l); }
.hero-stats .stat:nth-child(3) .stat-suffix { color: var(--emerald-l); }
.hero-stats .stat:nth-child(4) .stat-suffix { color: var(--amber-l); }
.hero-stats .stat:nth-child(5) .stat-suffix { color: var(--rose-l); }

/* Cert issuer colour now driven by data-accent on the card */
/* (kept-empty section so subsequent rules retain offset) */

/* =========================================================
   LIGHTBOX — images & PDFs
   ========================================================= */
.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(4, 5, 10, 0.92);
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column;
  padding: 60px 32px 40px;
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}
.lightbox.open {
  display: flex;
  opacity: 1;
}
.lb-frame {
  display: grid; place-items: center;
  max-width: min(1100px, 92vw);
  max-height: 78vh;
  width: 100%;
  transform: scale(.94);
  transition: transform .45s var(--ease-back);
}
.lightbox.open .lb-frame { transform: scale(1); }
.lb-img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: var(--radius);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), 0 0 0 1px var(--border-h);
  object-fit: contain;
  display: block;
  background: var(--bg-card);
  transition: opacity .3s var(--ease-out);
}
/* Loading / error overlays so the user gets feedback while we resolve the image */
.lightbox.loading .lb-img { opacity: 0; }
.lightbox.loading::before {
  content: 'LOADING…';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--text-2);
  animation: lb-pulse 1.4s ease-in-out infinite;
  z-index: 1;
}
.lightbox.error .lb-img { opacity: 0; }
.lightbox.error::before {
  content: 'IMAGE FAILED TO LOAD';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 0.84rem; font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--rose-l);
  z-index: 1;
}
@keyframes lb-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
.lb-foot {
  margin-top: 18px;
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; justify-content: center;
}
.lb-caption {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--text-2);
  text-align: center;
}
.lb-open {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: rgba(129,140,248,.12);
  border: 1px solid var(--border-h);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
  color: var(--text-1);
  text-decoration: none;
  transition: all .25s var(--ease-out);
}
.lb-open:hover {
  background: var(--grad-aurora);
  border-color: transparent;
  color: white;
}
.lb-close {
  position: absolute; top: 24px; right: 24px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(15,18,32,.85);
  border: 1px solid var(--border-h);
  color: var(--text-1);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all .3s var(--ease-out);
  z-index: 2;
}
.lb-close:hover {
  background: rgba(244,63,94,.2);
  border-color: var(--rose);
  color: var(--rose-l);
  transform: rotate(90deg) scale(1.05);
}
@media (max-width: 768px) {
  .lightbox { padding: 50px 16px 24px; }
  .lb-close { top: 14px; right: 14px; width: 40px; height: 40px; }
}

/* =========================================================
   EXTRA POLISH — colourful section accents
   ========================================================= */
/* Section kickers — colour per section to add variety */
#about    .section-head .kicker { color: var(--cyan); }
#services .section-head .kicker { color: var(--violet-l); }
#work     .section-head .kicker { color: var(--amber-l); }
#process  .section-head .kicker { color: var(--rose-l); }
#results  .section-head .kicker { color: var(--emerald-l); }
#testimonials .section-head .kicker { color: var(--pink); }
#certs    .section-head .kicker { color: var(--amber); }
#experience .section-head .kicker { color: var(--violet); }
#skills   .section-head .kicker { color: var(--cyan); }
#faq      .section-head .kicker { color: var(--rose); }
#contact  .kicker { color: var(--emerald-l); }

/* Bigger more luxe section heads */
.section-head h2.display { line-height: 1.0; }
.section-head h2.display em.serif { font-size: 1.1em; }

/* Featured card heading colour-shift on hover */
.featured-card[data-accent="cyan"]:hover h3 em.serif    { color: var(--cyan); }
.featured-card[data-accent="violet"]:hover h3 em.serif  { color: var(--violet-l); }
.featured-card[data-accent="rose"]:hover h3 em.serif    { color: var(--rose-l); }
.featured-card h3 em.serif { transition: color .35s var(--ease-out); }

/* Marquee bigger + colourful dots */
.marquee-section { padding: 44px 0; }
.m-item { font-size: 1.6rem; font-weight: 700; }
.m-d:nth-child(4n+2)  { color: var(--cyan); }
.m-d:nth-child(4n+4)  { color: var(--violet-l); }
.m-d:nth-child(4n+6)  { color: var(--emerald-l); }
.m-d:nth-child(4n+8)  { color: var(--rose-l); }
.m-d { opacity: 1; }

/* (cert-tag rules superseded by the new cert-zoom design) */

/* Quote cards pop with subtle colour bg */
.quote-card:nth-child(1) { background: linear-gradient(135deg, rgba(34,211,238,.04), var(--bg-glass)); }
.quote-card:nth-child(2) { background: linear-gradient(135deg, rgba(244,63,94,.04), var(--bg-glass)); }
.quote-card:nth-child(3) { background: linear-gradient(135deg, rgba(168,85,247,.04), var(--bg-glass)); }

/* Big heading "serif" italics gradient pop on hero */
.hero-title em.serif {
  background: linear-gradient(135deg, var(--violet-l) 0%, var(--cyan) 60%, var(--emerald-l) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Add a luxe halo to the contact block */
.contact-block {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(168,85,247,.1), transparent 70%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(34,211,238,.08), transparent 70%),
    var(--bg-glass);
}

/* Floating tag gets gradient text */
.floating-tag {
  background: rgba(15,18,32,.92);
  border-color: var(--border-bright);
}
.floating-tag svg { color: var(--amber-l); filter: drop-shadow(0 0 6px var(--amber)); }
.tag-1 strong { color: var(--text-1); }

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body.js-ready [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* =========================================================
   AURORA GLASS · v4 (kept additions only)
   1. Constellation overlay behind hero
   2. Polaroid rotation + push-pin on testimonial reviews
   ========================================================= */

/* ----- 1. CONSTELLATION OVERLAY - agent-network visual ----- */

.constellation {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  animation: constellation-in 2.4s var(--ease-out) .4s forwards;
  mask-image: linear-gradient(180deg, black 30%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, black 30%, transparent 90%);
}
@keyframes constellation-in {
  from { opacity: 0; }
  to   { opacity: .55; }
}
.constellation .c-lines line {
  stroke: rgba(129, 140, 248, 0.16);
  stroke-width: 0.5;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: c-draw 3s var(--ease-out) .8s forwards;
}
@keyframes c-draw {
  to { stroke-dashoffset: 0; }
}
.constellation .c-nodes circle {
  fill: var(--indigo-l);
  opacity: 0;
  animation: c-fade 1.6s var(--ease-out) forwards;
}
.constellation .c-nodes circle:nth-child(2n)  { animation-delay: 1.1s; fill: var(--cyan); }
.constellation .c-nodes circle:nth-child(3n)  { animation-delay: 1.3s; fill: var(--indigo-l); }
.constellation .c-nodes circle:nth-child(5n)  { animation-delay: 1.5s; fill: var(--emerald); }
.constellation .c-nodes circle:nth-child(7n)  { animation-delay: 1.7s; fill: var(--rose); }
.constellation .c-nodes circle:nth-child(11n) { animation-delay: 1.9s; }
@keyframes c-fade {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: .85; transform: scale(1); }
}
.constellation .c-major {
  filter: drop-shadow(0 0 4px currentColor);
  animation: c-pulse 4s ease-in-out infinite;
}
@keyframes c-pulse {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.4); }
}

/* ----- 2. POLAROID rotation + push-pin on testimonial reviews ----- */

#testimonials .review-screenshot {
  padding: 16px 16px 8px;
  position: relative;
  transition: transform .5s var(--ease-back), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
#testimonials .review-screenshot:nth-child(1) { transform: rotate(-1.4deg); }
#testimonials .review-screenshot:nth-child(2) { transform: rotate(0.7deg); }
#testimonials .review-screenshot:nth-child(3) { transform: rotate(-0.6deg); }
#testimonials .review-screenshot:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.025);
  z-index: 4;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px var(--border-h);
}
/* Push-pin */
#testimonials .review-screenshot::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 14px; height: 14px;
  background: radial-gradient(circle at 35% 35%, var(--rose-l), var(--rose) 60%, #7a1d2d);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 8px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.4);
  z-index: 2;
}
@media (max-width: 900px) {
  #testimonials .review-screenshot,
  #testimonials .review-screenshot:nth-child(1),
  #testimonials .review-screenshot:nth-child(2),
  #testimonials .review-screenshot:nth-child(3) { transform: none; }
}

/* ----- Reduced motion respect ----- */
@media (prefers-reduced-motion: reduce) {
  .constellation { animation: none !important; opacity: .35; }
  .constellation .c-lines line,
  .constellation .c-nodes circle,
  .constellation .c-major { animation: none !important; opacity: .7; stroke-dashoffset: 0; transform: none; }
  #testimonials .review-screenshot,
  #testimonials .review-screenshot:nth-child(1),
  #testimonials .review-screenshot:nth-child(2),
  #testimonials .review-screenshot:nth-child(3) { transform: none !important; }
}

/* =========================================================
   INDEX · One-paragraph summary with inline jump-links.
   ========================================================= */

.index-section {
  padding: 56px 0 24px;
  position: relative;
}
.index-section .index-head {
  max-width: 820px;
  margin: 0 auto 28px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px;
}
.index-section .index-head .kicker {
  margin-bottom: 0;
}
.index-hint {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--text-2);
  text-transform: uppercase;
}
.index-hint .dim { color: var(--text-3); }

.index-para {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 54px;
  background: var(--bg-glass);
  border: 1px solid var(--border-h);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
/* Subtle aurora gradient bar on the left edge for editorial flair */
.index-para::before {
  content: '';
  position: absolute;
  top: 32px; bottom: 32px;
  left: 0; width: 2px;
  background: var(--grad-aurora);
  opacity: 0.6;
  border-radius: 0 2px 2px 0;
}
/* Inner highlight */
.index-para::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%);
  pointer-events: none;
}

.index-para p {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.32rem;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--text-1);
  margin: 0;
  position: relative;
  z-index: 1;
}
.index-para strong {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--text-1);
  background: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.index-para em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cyan);
  font-weight: 400;
}
.index-para a {
  color: var(--text-1);
  text-decoration: none;
  background-image: linear-gradient(180deg, transparent 90%, var(--cyan) 90%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: color .3s var(--ease-out), background-color .3s var(--ease-out);
  padding: 0 1px;
}
.index-para a:hover {
  color: var(--cyan);
  background-color: rgba(34, 211, 238, 0.08);
  border-radius: 3px;
}

/* The final CTA inside the paragraph — gradient pill */
.index-para a.ip-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding: 4px 12px 5px;
  background: var(--grad-aurora);
  background-size: 200% 100%;
  color: var(--ink-1, #04050a);
  -webkit-text-fill-color: var(--ink-1, #04050a);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92em;
  line-height: 1;
  letter-spacing: -0.005em;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-position .35s var(--ease-out), transform .25s var(--ease-back), box-shadow .35s var(--ease-out);
  box-shadow: 0 6px 20px -8px rgba(129,140,248,.55);
}
.index-para a.ip-cta:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px rgba(129,140,248,.7);
  background-color: transparent;
}

/* Responsive */
@media (max-width: 768px) {
  .index-section { padding: 40px 0 16px; }
  .index-section .index-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .index-para {
    padding: 32px 28px;
  }
  .index-para p {
    font-size: 1.12rem;
    line-height: 1.55;
  }
  .index-para a.ip-cta {
    margin-top: 4px;
  }
}
@media (max-width: 480px) {
  .index-para { padding: 26px 22px; }
  .index-para p { font-size: 1.02rem; }
}

/* =========================================================
   FREE-EM · plain uppercase. Same color, same font as the
   surrounding button text. Just slightly bolder + caps.
   ========================================================= */
.free-em {
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

/* Reduced motion: kill the pulse */
@media (prefers-reduced-motion: reduce) {
  .free-em::after { animation: none; opacity: 0; }
}

/* =========================================================
   CUSTOM CURSOR — hollow ring + centre dot; ring expands to
   FILL the hovered element. (desktop / fine-pointer only)
   ========================================================= */
.has-custom-cursor, .has-custom-cursor * { cursor: none !important; }
/* hollow ring (trails, eases) */
#cursor {
  position: fixed; top: 0; left: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--indigo);
  pointer-events: none;
  z-index: 99998;
  opacity: 0;
  transition: background .3s var(--ease-out),
              border-color .3s var(--ease-out), opacity .25s var(--ease-out);
  will-change: transform, clip-path;
}
/* When glued to a target, the ring snaps to the element's bounds instantly, then
   a clip-path circle expands from the EXACT contact point — so the fill looks like
   it propagates across the surface from where the cursor touched, not from center. */
#cursor.filling {
  background: rgba(99, 102, 241, 0.14);
  border-color: rgba(99, 102, 241, 0.55);
  transition: clip-path .5s var(--ease-expo),
              background .35s var(--ease-out),
              border-color .35s var(--ease-out),
              opacity .25s var(--ease-out);
}
/* solid centre dot — exact 1:1 with the pointer, so it always feels instant */
#cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--indigo);
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  transition: opacity .2s var(--ease-out);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  #cursor { transition: opacity .2s, width .2s, height .2s, border-radius .2s; }
  #fx { display: none !important; }
}

/* Cursor contact-point particle bursts — transparent until a burst fires.
   Explicit CSS size is REQUIRED: the canvas buffer is innerWidth×DPR, and without
   a fixed display size the element would lay out at buffer size (off by the DPR
   factor on hi-dpi screens), throwing the burst far from the real cursor. */
#fx {
  position: fixed; inset: 0; z-index: 99997;
  width: 100%; height: 100%; display: block;
  pointer-events: none;
}

/* Whole-card click targets */
.is-clickable { cursor: pointer; }

/* =========================================================
   PARALLAX — transform driven by --px/--py vars (set in JS).
   Scale is static so the blurred bg layers rasterise once and
   are only translated (cheap on the GPU) instead of re-blurred.
   ========================================================= */
/* Amplitudes are deliberately signed. The starfield/constellation and the grid
   carry NEGATIVE values, so they drift against the cursor while the aurora and
   the foreground proof cards drift with it. Layers all sliding the same way
   just reads as the page shifting; layers sliding against each other is what
   actually reads as depth. */
[data-parallax] {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
}
[data-parallax-bg] {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.08);
}

/* Lenis smooth-scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* =========================================================
   MICRO-INTERACTIONS — press states, hover responses, arrows
   ========================================================= */

/* Press feedback on every interactive element */
.btn:active, .nav-cta:active, .mm-cta:active, .cta-trigger:active,
.svc-card:active, .work-card:active, .featured-card:active,
.proof-card:active, .cert-card:active, .faq-trigger:active {
  transform: translateY(1px) scale(.985);
  transition: transform 90ms var(--ease-smooth);
}

/* CTA chev: bounces down to signal "more options" */
.cta-trigger:hover .cta-chev:not([style*="rotate"]) { animation: chev-bounce .9s var(--ease-out) infinite; }
@keyframes chev-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* Arrow-link hover: arrow slides right + fades trail */
a:hover .arr,
.wc-link:hover .arr,
.pc-arrow,
.fc-link:hover .arr { transform: translateX(0); }
.arr {
  display: inline-block;
  transition: transform var(--t-base) var(--ease-back);
  will-change: transform;
}
.pc-arrow, .fc-link .arr, .wc-link .arr {
  transition: transform var(--t-base) var(--ease-back);
}
.pc-card:hover .pc-arrow, a:hover .pc-arrow { transform: translateX(3px) translateY(-3px); }
.wc-link:hover .arr { transform: translateX(4px); }

/* Brand-mark gentle tilt on hover (only when not on custom-cursor disabled) */
.brand:hover .brand-mark {
  transform: rotate(-6deg) scale(1.05);
  transition: transform var(--t-base) var(--ease-back);
}
.brand .brand-mark {
  display: inline-grid; place-items: center;
  transition: transform var(--t-base) var(--ease-back);
  will-change: transform;
}

/* Stat cards: number scrubs up subtly on hover, kicker brightens */
.stat { transition: transform var(--t-base) var(--ease-out); will-change: transform; }
.stat:hover { transform: translateY(-3px); }
.stat:hover .stat-value { color: var(--indigo-l); transition: color var(--t-base) var(--ease-out); }

/* Section kicker (eyebrow) — small pop on appearance is in reveal; add hover */
.kicker { transition: letter-spacing var(--t-slow) var(--ease-out); }
.section-head:hover .kicker { letter-spacing: 0.22em; }

/* Project card icons spin slightly on hover */
.wc-icon, .fc-icon {
  transition: transform var(--t-base) var(--ease-back), color var(--t-base) var(--ease-out);
  will-change: transform;
}
.work-card:hover .wc-icon { transform: rotate(8deg) scale(1.08); }
.featured-card:hover .fc-icon { transform: rotate(-6deg) scale(1.08); }

/* Service card number pops */
.svc-no { transition: transform var(--t-base) var(--ease-back), letter-spacing var(--t-base) var(--ease-out); }
.svc-card:hover .svc-no { transform: translateY(-2px); letter-spacing: 0.16em; }

/* Live-ring pseudo animates transform only — hint the compositor there, not on
   the (now static) dots. (Round-1 left a stale box-shadow hint here.) */
.pulse-dot::after, .badge-dot::after { will-change: transform; }

/* Focus rings for keyboard users */
:focus-visible {
  outline: 2px solid var(--indigo-l);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible, .nav-cta:focus-visible { outline-offset: 4px; }

/* Selection — already there; nothing to change */

/* Typography polish — tabular numerals on stats/numbers */
.stat-value, .stat-number, .pc-stat-row, .loader-pct, .svc-stat, .svc-no,
.meta-pill, .pc-line, .pc-stat-row > div span {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* Headings — finer rendering */
h1, h2, h3, .display, .hero-title, .section-head h2 {
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" 1, "ss02" 1, "cv11" 1;
  text-wrap: balance;   /* no lonely orphan words in headings */
}
/* Even out ragged body copy + prevent single-word last lines. Purely a
   line-breaking hint — zero layout/paint cost, ignored by old browsers. */
p, li, blockquote, figcaption, .hero-sub, .lead, .section-sub { text-wrap: pretty; }

/* Better link hover transitions for inline links */
.hero-sub a, .bio a, p a {
  transition: color var(--t-base) var(--ease-out);
}

/* =========================================================
   PREMIUM CRAFT — signature polish (cursor spotlight + hovers)
   ========================================================= */

/* --- Hero cursor spotlight: a soft light that follows the pointer, giving the
   hero physical depth. Driven by --mx/--my (set in JS); fades in once primed. --- */
#hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 60%) var(--my, 40%),
              rgba(129,140,248,.10), rgba(34,211,238,.05) 40%, transparent 70%);
  opacity: 0; transition: opacity .8s var(--ease-out);
}
#hero.lit::before { opacity: 1; }

/* --- Headline: gentle cursor parallax (JS sets --hx/--hy), composited --- */
.hero-left { transform: translate3d(var(--hx, 0px), var(--hy, 0px), 0); will-change: transform; }

/* --- Primary button: lift + glow + a light sheen that sweeps across on hover --- */
.btn-primary { position: relative; overflow: hidden; transition:
    transform var(--t-base) var(--ease-back), box-shadow var(--t-base) var(--ease-out); }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); transition: left .7s var(--ease-out); pointer-events: none;
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -14px rgba(99,102,241,.7), 0 0 0 1px rgba(129,140,248,.35) inset;
}
.btn-primary:hover::after { left: 130%; }

/* --- Ghost button: subtle fill + lift on hover --- */
.btn-ghost { transition: transform var(--t-base) var(--ease-back), background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); }
.btn-ghost:hover { transform: translateY(-3px); }

/* --- Nav links: underline that grows from the left, brightens text --- */
.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%;
  background: var(--grad-aurora); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .4s var(--ease-expo);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

/* --- Cards: a soft top inner-highlight + lifted shadow on hover (composes with
   the JS tilt, which only sets transform) --- */
.work-card, .featured-card, .svc-card, .cert-card, .proof-card {
  transition: box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.work-card:hover, .featured-card:hover, .svc-card:hover, .cert-card:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 30px 70px -24px rgba(99,102,241,.4);
  border-color: var(--border-bright);
}

/* --- Gradient shimmer — hero headline + loader only. (Running it on every
   .gradient-text repainted ~10 text runs every frame, forever.) --- */
.hero-title .gradient-text, .loader-name {
  background-size: 220% 220%;
  animation: grad-shimmer 9s ease-in-out infinite;
}
@keyframes grad-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  #hero::before { display: none; }
  .hero-left { transform: none !important; }
  .btn-primary::after { display: none; }
  .gradient-text, .loader-name { animation: none; }
}

/* =========================================================
   PERFORMANCE
   ========================================================= */

/* (content-visibility REMOVED — it caused the catastrophic scroll lockups:
   sections constantly re-laid-out as they crossed the viewport while scroll
   handlers read geometry, forcing full-page layout every scroll tick.) */

/* Phones / touch devices: backdrop blur is the single most expensive thing to
   composite per frame. Drop it entirely and make the glass panels a touch more
   opaque so they stay legible without it. Also calm the big blurred orbs. */
@media (max-width: 820px), (pointer: coarse) {
  *, *::before, *::after {
  }
  :root { --bg-glass: rgba(11, 14, 26, 0.88); }
  #navbar.scrolled { background: rgba(7, 8, 15, 0.94); }   /* a bit more opaque sans blur */
  .aurora-layer { filter: blur(70px); opacity: .4; }
}

/* =========================================================
   EDITORIAL CRAFT — static, zero-runtime-cost visual layer
   ========================================================= */

/* --- Hero horizon arc: a vast planet-curve of light grounding the hero.
   One static gradient ellipse clipped by the hero — painted once, never animated. --- */
#hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; bottom: max(-44vw, -780px); transform: translateX(-50%);
  width: 165vw; max-width: 2600px; aspect-ratio: 2.4 / 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(99,102,241,.16), rgba(99,102,241,.05) 56%, transparent 72%);
  border-top: 1px solid rgba(165,180,252,.28);
  box-shadow: 0 -36px 110px -24px rgba(129,140,248,.30);
}

/* --- Ghost section numbers: huge outlined numerals behind each section head
   (uses the same number as the kicker via data-no). Pure CSS, no paint churn. --- */
.section-head { position: relative; }
.section-head[data-no]::before {
  content: attr(data-no);
  position: absolute; top: -0.34em; left: -0.045em; z-index: -1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(100px, 13vw, 176px);
  line-height: 1; letter-spacing: -0.05em;
  color: rgba(129,140,248,.025);
  -webkit-text-stroke: 1px rgba(129,140,248,.10);
  pointer-events: none; user-select: none;
}

/* --- Section rhythm: a centred gradient hairline at the top of every section --- */
#about::before, .trusted::before, #services::before, #work::before, #process::before,
#results::before, #testimonials::before, #certs::before, #experience::before,
#skills::before, #faq::before, #contact::before {
  content: ""; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1140px, calc(100% - 64px)); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(129,140,248,.22) 30%, rgba(34,211,238,.18) 50%, rgba(129,140,248,.22) 70%, transparent);
  pointer-events: none;
}

/* --- Serif ink: section-head italics get a quiet white→periwinkle duotone --- */
.section-head h2.display em.serif {
  background: linear-gradient(120deg, #f4f6ff 8%, #c7d2fe 60%, #9db1f7 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Client row: STATIC, centered, wrapping pills (marquee removed). --- */
.marq-clip { overflow: visible; }
.marq-track { display: block; padding: 0 16px; }
.marq-set {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.marq-set[aria-hidden="true"] { display: none; }   /* drop the duplicate set */

/* --- Themed scrollbar (Chrome 121+/Firefox via scrollbar-color; WebKit fallback) --- */
html { scrollbar-color: #272d58 #07080f; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #07080f; }
::-webkit-scrollbar-thumb {
  background: #272d58; border-radius: 8px;
  border: 2.5px solid #07080f;
}
::-webkit-scrollbar-thumb:hover { background: #333b72; }

@media (max-width: 640px) {
  .section-head[data-no]::before { display: none; }   /* ghost numbers clutter phones */
  #hero::after { bottom: -58vw; width: 220vw; }       /* keep the arc low + wide */
}

/* =========================================================
   PRODUCT FEATURES — palette · dot-rail · smart nav · toast
   ========================================================= */

/* --- Navbar stays put (always visible); just compacts on scroll --- */

/* --- ⌘K hint chip in the nav --- */
.kbd-hint {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  background: rgba(15,18,32,.76);
  border: 1px solid var(--border); border-radius: 10px;
  color: var(--text-3); cursor: pointer;
  font-family: var(--font-mono); font-size: 10.5px;
  transition: color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.kbd-hint kbd {
  font-family: inherit; font-size: 10px; line-height: 1;
  padding: 3px 5px; border-radius: 5px;
  background: rgba(129,140,248,.10);
  border: 1px solid var(--border);
  color: var(--text-2);
}
.kbd-hint:hover { color: var(--text-1); border-color: var(--border-h); background: rgba(15,18,32,.8); }
@media (max-width: 1024px) { .kbd-hint { display: none; } }

/* --- Section dot-rail (desktop) --- */
.dot-rail {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 13px;
  z-index: 90;
}
.dot-rail a { position: relative; display: grid; place-items: center; width: 14px; height: 14px; }
.dot-rail a i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(129,140,248,.22);
  border: 1px solid rgba(129,140,248,.28);
  transition: transform var(--t-base) var(--ease-back), background var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.dot-rail a:hover i { transform: scale(1.45); background: rgba(129,140,248,.5); }
.dot-rail a.on i {
  transform: scale(1.55);
  background: var(--grad-aurora);
  border-color: transparent;
  box-shadow: 0 0 12px -2px rgba(129,140,248,.8);
}
.dot-rail a::after {
  content: attr(data-label);
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%) translateX(4px);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2); background: rgba(10,12,22,.92);
  border: 1px solid var(--border); border-radius: 7px;
  padding: 4px 9px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.dot-rail a:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 1180px) { .dot-rail { display: none; } }

/* --- Command palette --- */
html.k-open, html.k-open body { overflow: hidden; }
.kpal { position: fixed; inset: 0; z-index: 9990; display: none; }
.kpal.open { display: block; }
.kpal-backdrop {
  position: absolute; inset: 0;
  background: rgba(4,5,10,.62);
  animation: kpal-fade .22s var(--ease-out);
}
.kpal-panel {
  position: relative; margin: 16vh auto 0;
  width: min(560px, calc(100vw - 40px));
  background: rgba(12,14,26,.96);
  border: 1px solid var(--border-h);
  border-radius: 18px;
  box-shadow: 0 1px 0 var(--inner-hl) inset, 0 40px 120px -24px rgba(0,0,0,.85), 0 0 80px -30px rgba(99,102,241,.5);
  overflow: hidden;
  animation: kpal-in .26s var(--ease-expo);
}
@keyframes kpal-fade { from { opacity: 0; } }
@keyframes kpal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.kpal-head {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
}
.kpal-head input {
  flex: 1; background: none; border: none; outline: none;
  font-family: var(--font-display); font-size: 15px;
  color: var(--text-1); caret-color: var(--indigo-l);
}
.kpal-head input::placeholder { color: var(--text-3); }
.kpal-esc {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  padding: 3px 7px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-3);
}
.kpal-list { max-height: 318px; overflow-y: auto; padding: 8px; }
.kpal-group {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-4); padding: 10px 10px 5px;
}
.kpal-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  padding: 10px 12px; border: 0; border-radius: 11px;
  background: none; cursor: pointer;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 500;
  color: var(--text-2);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.kpal-item.sel { background: rgba(99,102,241,.14); color: var(--text-1); }
.kpal-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--indigo-l); opacity: .55; flex: 0 0 auto;
}
.kpal-dot.act { background: var(--emerald-l); }
.kpal-dot.page { background: var(--cyan); }
.kpal-item.sel .kpal-dot { opacity: 1; box-shadow: 0 0 8px -1px currentColor; }

/* Content results — two lines: title (+ which section) and a snippet w/ the hit */
.kpal-item--content { align-items: flex-start; padding: 9px 12px; }
.kpal-item--content .kpal-dot { margin-top: 6px; }
.kpal-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpal-title { font-size: 13.5px; font-weight: 600; color: var(--text-1); }
.kpal-in {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; margin-left: 4px;
}
.kpal-snip {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 400;
  color: var(--text-3); line-height: 1.45;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.kpal-snip mark { background: rgba(34,211,238,.22); color: var(--cyan); border-radius: 3px; padding: 0 2px; }

.kpal-empty { padding: 26px 14px; text-align: center; color: var(--text-3); font-size: 13px; }

/* Search target pulse — when a content result is opened, flag where it landed */
.kpal-flash { animation: kpal-flash 1.4s var(--ease-out); }
@keyframes kpal-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); }
  18%      { box-shadow: 0 0 0 3px rgba(34,211,238,.55), 0 0 40px -6px rgba(34,211,238,.6); }
}
@media (prefers-reduced-motion: reduce) { .kpal-flash { animation: none; } }
.kpal-foot {
  display: flex; gap: 16px; justify-content: flex-end;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px; color: var(--text-4);
}
@media (prefers-reduced-motion: reduce) {
  .kpal-backdrop, .kpal-panel { animation: none; }
}

/* --- Toast --- */
.toast {
  position: fixed; left: 50%; bottom: 30px; z-index: 9992;
  transform: translateX(-50%) translateY(14px);
  padding: 11px 18px;
  background: rgba(12,14,26,.96);
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  font-family: var(--font-display); font-size: 13px; font-weight: 500; color: var(--text-1);
  box-shadow: 0 14px 44px -12px rgba(0,0,0,.8), 0 0 36px -14px rgba(99,102,241,.6);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-back);
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================================================
   CONVERSION LAYER — skip link · ROI calculator · blueprint
   ========================================================= */

/* Skip link — invisible until keyboard-focused */
.skip-link {
  position: fixed; top: 14px; left: 14px; z-index: 99990;
  padding: 10px 16px; border-radius: 10px;
  background: var(--indigo); color: #fff; font-weight: 600; font-size: 13px;
  transform: translateY(-300%);
  transition: transform .25s var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* --- ROI calculator --- */
.roi-card {
  margin-top: 26px;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px;
  padding: 34px 38px;
  background: var(--bg-glass);
  border: 1px solid var(--border-h); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
}
.roi-card::before {                      /* faint aurora wash in the corner */
  content: ""; position: absolute; top: -120px; right: -120px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.16), transparent 70%);
  pointer-events: none;
}
.roi-left .kicker { display: block; margin-bottom: 6px; }
.roi-left h3 {
  font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 700; letter-spacing: -0.02em; margin-bottom: 22px;
}
.roi-left h3 em.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.roi-field { display: block; margin-bottom: 18px; }
.roi-lbl {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 9px;
}
.roi-lbl b { color: var(--cyan); font-size: 13px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.roi-field input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--indigo) 0%, var(--cyan) var(--fill, 30%), rgba(129,140,248,.16) var(--fill, 30%));
  outline: none; cursor: pointer;
}
.roi-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  border: 4px solid var(--indigo);
  box-shadow: 0 0 14px -2px rgba(99,102,241,.9);
  transition: transform var(--t-fast) var(--ease-back);
}
.roi-field input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.18); }
.roi-field input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 4px solid var(--indigo);
  box-shadow: 0 0 14px -2px rgba(99,102,241,.9);
}
.roi-right {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  border-left: 1px solid var(--border); padding-left: 40px;
}
.roi-figure {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(38px, 4.6vw, 58px); letter-spacing: -0.03em; line-height: 1;
  background: var(--grad-aurora);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.roi-cur { font-size: .62em; vertical-align: 14%; }
.roi-sub { color: var(--text-3); font-size: 13.5px; margin: 10px 0 20px; max-width: 30ch; }
.roi-btn { white-space: nowrap; }
@media (max-width: 860px) {
  .roi-card { grid-template-columns: 1fr; gap: 26px; padding: 26px 22px; }
  .roi-right { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 24px; }
}

/* --- Live system blueprint (Emma card) --- */
.blueprint {
  display: flex; align-items: center; justify-content: flex-start;
  flex-wrap: wrap; gap: 7px 6px;
  margin: 16px 0 2px;
}
.bp-node {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2);
  padding: 5px 8px; border-radius: 7px;
  background: rgba(34,211,238,.06);
  border: 1px solid rgba(34,211,238,.22);
  white-space: nowrap;
}
.bp-link {
  position: relative; flex: 0 0 30px; height: 1px;
  background: linear-gradient(90deg, rgba(34,211,238,.35), rgba(129,140,248,.35));
  overflow: visible;
}
.bp-link i {
  position: absolute; left: 0; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px 1px rgba(34,211,238,.8);
  opacity: 0;
  animation: bp-pulse 2.4s linear infinite paused;
}
.bp-run .bp-link i { animation-play-state: running; }
.bp-link:nth-of-type(2) i { animation-delay: 0s; }
.bp-link:nth-of-type(4) i { animation-delay: .6s; }
.bp-link:nth-of-type(6) i { animation-delay: 1.2s; }
.bp-link:nth-of-type(8) i { animation-delay: 1.8s; }
@keyframes bp-pulse {
  0%   { transform: translateX(0);    opacity: 0; }
  6%   { opacity: 1; }
  22%  { transform: translateX(25px); opacity: 1; }
  26%  { transform: translateX(25px); opacity: 0; }
  100% { transform: translateX(25px); opacity: 0; }
}
/* Accent-tinted blueprints for the violet + rose featured cards */
.featured-card[data-accent="violet"] .bp-node {
  background: rgba(139,92,246,.07);
  border-color: rgba(139,92,246,.24);
}
.featured-card[data-accent="violet"] .bp-link {
  background: linear-gradient(90deg, rgba(139,92,246,.35), rgba(99,102,241,.35));
}
.featured-card[data-accent="violet"] .bp-link i {
  background: var(--violet-l);
  box-shadow: 0 0 8px 1px rgba(139,92,246,.8);
}
.featured-card[data-accent="rose"] .bp-node {
  background: rgba(244,63,94,.07);
  border-color: rgba(244,63,94,.24);
}
.featured-card[data-accent="rose"] .bp-link {
  background: linear-gradient(90deg, rgba(244,63,94,.35), rgba(251,113,133,.35));
}
.featured-card[data-accent="rose"] .bp-link i {
  background: var(--rose-l);
  box-shadow: 0 0 8px 1px rgba(244,63,94,.8);
}
@media (max-width: 560px) { .blueprint { display: none; } }
@media (prefers-reduced-motion: reduce) { .bp-link i { animation: none; opacity: 0; } }

/* =========================================================
   PHONE HERO — the hero was laid out for a laptop and merely
   allowed to stack. Measured on a 390x844 viewport it came to
   2072px: two and a half swipes of hero before the page even
   started, with desktop padding, desktop gaps and five stats
   in a single column. These rules are about density, not size.
   ========================================================= */
@media (max-width: 640px) {
  /* svh, not vh: on a phone `100vh` is the height with the URL bar hidden, so
     a "full screen" hero is taller than the screen you can actually see. */
  #hero { min-height: 100svh; padding: 96px 0 56px; }

  .hero-grid { gap: 34px; margin-bottom: 34px; }
  .hero-badge { margin-bottom: 20px; padding: 7px 12px 7px 10px; font-size: 0.72rem; }
  .hero-sub { margin-bottom: 26px; }

  /* Sized so each authored line of the headline still fits on one line.
     Letting them re-wrap turned "that work while" into a two-line orphan. */
  .hero-title { font-size: clamp(1.85rem, 10.4vw, 3rem); margin-bottom: 22px; }

  /* Three stacked pills cost 126px for reassurance copy, not the pitch. */
  .hero-meta { flex-wrap: wrap; gap: 8px; }
  .meta-pill { padding: 6px 10px; font-size: 0.67rem; }

  /* Five stats in one column ran to 573px, most of a screen. Two up, with the
     last spanning, is ~250px and still scannable. */
  .hero-stats { grid-template-columns: repeat(2, 1fr); padding: 20px 0; }
  .stat {
    padding: 12px 14px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .stat:nth-child(2n) { border-right: none; }
  .stat:nth-child(5) { grid-column: 1 / -1; border-bottom: none; }
  .stat-value { font-size: 1.55rem; }
  .stat-label { font-size: 0.66rem; }
}

/* Narrow phones: the availability badge is one long line of mono that wrapped
   into a two-line pill. A notch smaller keeps it on one line at 390px. */
@media (max-width: 430px) {
  .hero-badge { font-size: 0.655rem; gap: 8px; padding: 7px 11px 7px 9px; }
}

/* =========================================================
   GPU DIET — live backdrop blur is the most expensive thing
   the compositor does, and we had 32 of them stacked over an
   animated background. Glass now works via opacity everywhere;
   real blur survives only on the two surfaces where it sells:
   the scrolled navbar and the palette backdrop.
   ========================================================= */
*, *::before, *::after {
}
#navbar.scrolled, .kpal-backdrop {
}
:root { --bg-glass: rgba(13, 16, 29, 0.82); }   /* more opaque so panels stay legible */

/* Mobile fix (found in QA): the two hero CTAs sat side-by-side at 390px and
   "See the work" clipped off-screen — stack them full-width instead. */
@media (max-width: 560px) {
  .hero-actions .btn, .hero-actions .cta-menu { flex: 1 1 100%; }
  .hero-actions .cta-menu .cta-trigger { width: 100%; justify-content: center; }
}

/* =========================================================
   CARD SPOTLIGHT — a soft accent glow that tracks the cursor
   inside grid cards. Position arrives as --sx/--sy from one
   delegated pointermove per grid (see main.js); the card only
   carries .spot while the cursor is actually inside it.

   Deliberately NOT a backdrop-filter: this is a single radial
   gradient fill on a pseudo-element, so it costs one paint and
   no offscreen buffer. It sits at z-index 0 with the real
   content lifted to 1, so it tints the card, never the copy.
   ========================================================= */
.skill-group, .proc-step { isolation: isolate; }
.skill-group::after,
.proc-step::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .34s var(--ease-out);
  background: radial-gradient(
    240px circle at var(--sx, 50%) var(--sy, 50%),
    color-mix(in srgb, var(--a, var(--indigo)) 15%, transparent),
    transparent 68%
  );
}
.skill-group.spot::after,
.proc-step.spot::after { opacity: 1; }
.skill-group > *, .proc-step > * { position: relative; z-index: 1; }

/* Marquee holds still while you're reading it. */
.marquee-section:hover .marquee-track { animation-play-state: paused; }

/* =========================================================
   LITE MODE — set automatically by the JS performance
   governor when the machine can't hold ~33fps (or via ?lite).
   The site becomes fully static: every ambient animation dies,
   the OS cursor returns, scroll is native. Content, layout and
   colors are identical — only the motion layer is shed.
   ========================================================= */
html.lite *, html.lite *::before, html.lite *::after {
  animation: none !important;
  backdrop-filter: none !important;            /* no exceptions in lite — not even the navbar */
}
html.lite, html.lite * { cursor: auto !important; }
html.lite a, html.lite button, html.lite [role="button"],
html.lite .is-clickable, html.lite input[type="range"] { cursor: pointer !important; }
html.lite #hero::before { display: none; }              /* cursor spotlight off */
html.lite .hero-left { transform: none !important; }    /* headline parallax off */
html.lite [data-parallax] { transform: none !important; }
html.lite #cursor, html.lite #cursor-dot, html.lite #fx { display: none !important; }
html.lite #glyph-field { display: none !important; }    /* never allocated in lite anyway */
html.lite .skill-group::after, html.lite .proc-step::after { display: none !important; }

/* The background stack STAYS VISIBLE in lite — aurora, stars, grid, noise are
   all static cached layers once their animations stop (the blanket rule above).
   Only continuous motion is shed; the site looks the same, it just holds still. */
html.lite #navbar, html.lite #navbar.scrolled { background: rgba(7, 8, 15, 0.97); }
html.lite .kpal-backdrop { background: rgba(4, 5, 10, 0.88); }

/* Reveals become instant — no blur filters, no transition work, content just IS. */
html.lite [data-reveal] {
  opacity: 1 !important; transform: none !important;
  filter: none !important; transition: none !important;
}