:root{
    --indigo: #4D7CFF;
    --cyan: #7B5CFF;
    --violet: #7B5CFF;
    --bg-main: #030305;
    --bg-secondary: #070912;
    --glass: rgba(8, 12, 25, 0.60);
    --text-primary: #F5F7FF;
    --text-secondary: #8B93A7;
    --accent-primary: #4D7CFF;
    --accent-secondary: #7B5CFF;
    --bright: #8EA7FF;
    --line: rgba(120, 140, 255, 0.15);
  }
  html{ scroll-behavior: smooth; background:#030305; }
  body{
    position: relative;   /* + z-index below = body becomes a stacking context */
    z-index: 0;           /* so #beamsLayer (-2) and #beamsOverlay (-1) render */
    background: #030305;
    color: #F5F7FF;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
  }
  ::selection{ background: rgba(77,124,255,0.35); color: #fff; }

  /* Scrollbar */
  ::-webkit-scrollbar{ width: 10px; }
  ::-webkit-scrollbar-track{ background: #030305; }
  ::-webkit-scrollbar-thumb{ background: #242A45; border-radius: 8px; }
  ::-webkit-scrollbar-thumb:hover{ background: #2E3555; }

  .font-display{ font-family: 'Bricolage Grotesque', sans-serif; }
  .font-mono{ font-family: 'JetBrains Mono', monospace; }

  /* Ambient AI gradient mesh glows */
  .mesh-glow{
    position: absolute;
    border-radius: 999px;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
  }
  .noise{
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- Hero brand heading (Zevrion Studio) ---------- */
  /* One gradient definition, shared by the entrance letters and the settled
     heading, so the two states are pixel-identical and nothing shifts colour
     at the handover. First and last stop are the same blue, which makes the
     tile seamless when it loops. */
  #heroBrandHeading{
    --hb-grad: linear-gradient(100deg,
      #4D7CFF 0%, #7A9CFF 24%, #A6B6FF 48%, #7B5CFF 74%, #4D7CFF 100%);
  }
  .sr-only{
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  #heroBrandHeading.hero-brand{
    font-family: 'Fraunces', 'Bricolage Grotesque', serif;
    font-optical-sizing: auto;
    font-weight: 600;
    letter-spacing: 0.005em;
    text-wrap: balance;
  }

  .hb-visual{
    display: inline-block;          /* box hugs the text, not the container */
    position: relative;
    text-align: center;
    padding: 0 0.06em;
    background-image: var(--hb-grad);
    background-size: 200% 100%;
    background-position: 0% 50%;
    background-repeat: repeat;      /* required for the seamless loop below */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    transition: transform .7s cubic-bezier(.16,1,.3,1),
                filter .7s cubic-bezier(.16,1,.3,1),
                letter-spacing .7s cubic-bezier(.16,1,.3,1);
  }
  /* Word stacking without a <br>: block on phones, inline on desktop. */
  .hb-word{ display: block; }
  @media (min-width: 768px){
    .hb-word{ display: inline-block; }
    .hb-word + .hb-word{ margin-left: 0.26em; }
  }

  /* --- entrance: each letter rises out of blur. The letters carry the same
         gradient, but JS gives each one the slice that belongs to its own
         position, so together they read as one unbroken gradient instead of
         every letter repeating the full blue-to-violet ramp. --- */
  .hb-char{
    display: inline-block;
    opacity: 0;
    transform: translateY(0.34em) scale(0.97);
    filter: blur(12px);
    will-change: transform, opacity, filter;
    background-image: var(--hb-grad);
    background-repeat: repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .hero-brand.hb-in .hb-char{
    animation: hbCharIn 1.25s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay: calc(var(--i) * 46ms + 90ms);
  }
  @keyframes hbCharIn{
    0%{   opacity: 0; transform: translateY(0.34em) scale(0.97); filter: blur(12px); }
    58%{  filter: blur(0); }
    100%{ opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  }
  .hero-brand.hb-in .hb-visual{
    animation: hbTrackingIn 1.4s cubic-bezier(.16,1,.3,1) forwards;
  }
  @keyframes hbTrackingIn{
    0%{   letter-spacing: 0.055em; }
    100%{ letter-spacing: 0.005em; }
  }

  /* --- settled: the gradient drifts one direction forever. Travelling
         exactly 200% (one whole tile) against a repeating background means
         the end frame is identical to the start frame, so the loop never
         snaps back to a different colour. --- */
  .hero-brand.hb-done .hb-visual{
    animation: hbGradientFlow 30s linear infinite;
  }
  @keyframes hbGradientFlow{
    from{ background-position: 0% 50%; }
    to{   background-position: 200% 50%; }
  }
  /* Glow lives on the <h1>, not on .hb-visual — an animated filter would
     otherwise outrank the hover filter and kill the hover glow entirely. */
  .hero-brand.hb-done{
    animation: hbGlow 10s ease-in-out infinite;
  }
  @keyframes hbGlow{
    0%, 100%{ filter: drop-shadow(0 0 12px rgba(77,124,255,0.12)); }
    50%{      filter: drop-shadow(0 0 28px rgba(123,92,255,0.30)); }
  }

  /* hover only reacts over the letters themselves */
  .hb-visual:hover{
    transform: scale(1.012);
    letter-spacing: 0.018em;
    filter: drop-shadow(0 0 20px rgba(142,167,255,0.38));
  }

  /* Safety net: if a browser can't clip a background to text, transparent
     fill would leave the wordmark invisible. Fall back to solid colour. */
  @supports not ((-webkit-background-clip: text) or (background-clip: text)){
    .hb-visual, .hb-char{
      background-image: none !important;
      color: #A6B6FF !important;
      -webkit-text-fill-color: #A6B6FF !important;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .hero-brand, .hero-brand.hb-done,
    .hb-visual, .hero-brand.hb-in .hb-visual, .hero-brand.hb-done .hb-visual{
      animation: none !important;
      letter-spacing: 0.005em !important;
      filter: none !important;
      transform: none !important;
    }
    .hb-char, .hero-brand.hb-in .hb-char{
      animation: none !important; opacity: 1 !important;
      transform: none !important; filter: none !important;
    }
    .hb-visual:hover{ transform: none; filter: none; letter-spacing: 0.005em !important; }
  }

  /* Reveal on scroll */
  .reveal{
    opacity: 0;
    transform: translateY(28px) scale(0.985);
    filter: blur(6px);
    transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1), filter 0.9s cubic-bezier(.16,1,.3,1);
    will-change: transform, opacity, filter;
  }
  .reveal.in{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  .reveal-delay-1{ transition-delay: 0.08s; }
  .reveal-delay-2{ transition-delay: 0.16s; }
  .reveal-delay-3{ transition-delay: 0.24s; }
  .reveal-delay-4{ transition-delay: 0.32s; }

  /* Card hover */
  .grid-card{
    position: relative;
    background: rgba(18,18,26,0.55);
    border: 1px solid rgba(255,255,255,0.07);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
    transition: border-color 0.45s ease, transform 0.45s cubic-bezier(.16,1,.3,1), box-shadow 0.45s ease;
  }
  .grid-card::before{
    content:"";
    position:absolute; inset:-1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(77,124,255,0), rgba(123,92,255,0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: background 0.45s ease;
  }
  .grid-card:hover::before{
    background: linear-gradient(135deg, rgba(77,124,255,0.65), rgba(123,92,255,0.65));
  }
  .grid-card:hover{
    border-color: rgba(77,124,255,0.55);
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 20px 60px -20px rgba(77,124,255,0.35), 0 0 0 1px rgba(77,124,255,0.08) inset;
  }

  /* Buttons */
  .btn-primary{
    background: linear-gradient(135deg, #4D7CFF, #7B5CFF);
    box-shadow: 0 8px 30px -8px rgba(77,124,255,0.6);
    transition: transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.35s ease, filter .35s ease;
  }
  /* --mx/--my are written by the magnetic-cursor JS; --lift is the hover
     rise. Composing them here means JS no longer overwrites the hover
     transform (and vice versa). */
  .btn-primary, .btn-ghost, .social-btn{
    --mx: 0px; --my: 0px; --lift: 0px;
    transform: translate(var(--mx), calc(var(--my) + var(--lift)));
  }
  .btn-primary:hover{
    --lift: -2px;
    box-shadow: 0 14px 40px -10px rgba(123,92,255,0.6);
    filter: brightness(1.08);
  }
  .btn-ghost{
    border: 1px solid var(--line);
    background: rgba(18,18,26,0.6);
    backdrop-filter: blur(6px);
    transition: border-color .35s ease, background .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
  }
  .btn-ghost:hover{
    border-color: rgba(123,92,255,0.5);
    background: rgba(18,18,26,0.9);
    --lift: -2px;
  }

  /* Hero video viewport - wet reflection */
  .hero-frame-wrap{ position: relative; }
  .hero-frame{
    border: 1px solid var(--line);
    background: #070912;
    box-shadow:
      0 40px 100px -20px rgba(0,0,0,0.7),
      0 0 0 1px rgba(255,255,255,0.02) inset,
      0 60px 120px -40px rgba(77,124,255,0.35);
    position: relative;
    overflow: hidden;
    z-index: 2;
  }
  /* Play button pulse */
  .play-pulse{
    animation: pulseRing 2.4s ease-out infinite;
  }
  @keyframes pulseRing{
    0%{ box-shadow: 0 0 0 0 rgba(123,92,255,0.55); }
    70%{ box-shadow: 0 0 0 18px rgba(123,92,255,0); }
    100%{ box-shadow: 0 0 0 0 rgba(123,92,255,0); }
  }

  /* Portfolio thumbnail overlay */
  .thumb{ position: relative; overflow: hidden; cursor: pointer; }
  .thumb-overlay{
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,8,12,0.1) 0%, rgba(8,8,12,0.92) 100%);
    backdrop-filter: blur(0px);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(.16,1,.3,1), backdrop-filter 0.5s ease;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding: 1.25rem;
  }
  .thumb:hover .thumb-overlay{ opacity: 1; backdrop-filter: blur(2px); }
  .thumb-media{
    transition: transform 0.9s cubic-bezier(.16,1,.3,1), filter 0.9s ease;
  }
  .thumb:hover .thumb-media{ transform: scale(1.08); filter: saturate(1.15); }
  .thumb-text{
    transform: translateY(14px);
    filter: blur(6px);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(.16,1,.3,1) 0.05s, filter 0.5s ease 0.05s, opacity 0.5s ease 0.05s;
  }
  .thumb:hover .thumb-text{ transform: translateY(0); filter: blur(0); opacity: 1; }
  .play-indicator{
    width: 44px; height: 44px; border-radius: 999px;
    background: rgba(8,8,12,0.6);
    border: 1px solid rgba(123,92,255,0.5);
    display:flex; align-items:center; justify-content:center;
    position:absolute; top: 1rem; right: 1rem;
    opacity: 0; transform: scale(0.7);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.16,1,.3,1);
    z-index: 2;
  }
  .thumb:hover .play-indicator{ opacity: 1; transform: scale(1); }
  .play-indicator .bar{
    width: 3px; background: #8EA7FF; border-radius: 2px;
    animation: eq 0.9s ease-in-out infinite;
  }
  .bar:nth-child(1){ height: 10px; animation-delay: 0s; }
  .bar:nth-child(2){ height: 18px; animation-delay: 0.15s; }
  .bar:nth-child(3){ height: 8px; animation-delay: 0.3s; }
  @keyframes eq{
    0%,100%{ transform: scaleY(0.5); }
    50%{ transform: scaleY(1.2); }
  }

  /* Roster */
  .roster-card{
    position: relative;
    border: 1px solid rgba(255,255,255,0.07);
    background: linear-gradient(180deg, rgba(18,18,26,0.65), rgba(12,12,18,0.6));
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
    transition: transform 0.45s cubic-bezier(.16,1,.3,1), box-shadow 0.45s ease, border-color 0.45s ease;
  }
  .roster-card::before{
    content:"";
    position:absolute; inset:-1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(77,124,255,0), rgba(123,92,255,0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: background 0.45s ease;
  }
  .roster-card:hover::before{
    background: linear-gradient(135deg, rgba(77,124,255,0.5), rgba(123,92,255,0.5));
  }
  .roster-card:hover{
    transform: translateY(-6px);
    border-color: rgba(77,124,255,0.4);
    box-shadow: 0 20px 50px -20px rgba(77,124,255,0.3);
  }
  .roster-avatar{
    background: conic-gradient(from 180deg, #4D7CFF, #7B5CFF, #7B5CFF, #4D7CFF);
    padding: 1.5px;
  }

  /* Quote builder */
  .range-slider{
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #4D7CFF, #7B5CFF);
    outline: none;
  }
  .range-slider::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: 20px; height: 20px;
    border-radius: 999px;
    background: #F5F7FF;
    border: 3px solid #7B5CFF;
    cursor: pointer;
    box-shadow: 0 0 0 6px rgba(123,92,255,0.15);
    transition: box-shadow 0.25s ease;
  }
  .range-slider::-webkit-slider-thumb:hover{ box-shadow: 0 0 0 10px rgba(123,92,255,0.22); }
  .range-slider::-moz-range-thumb{
    width: 20px; height: 20px;
    border-radius: 999px;
    background: #F5F7FF;
    border: 3px solid #7B5CFF;
    cursor: pointer;
  }

  .tag-toggle{
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.02);
    transition: all 0.3s ease;
  }
  .tag-toggle.active{
    border-color: rgba(77,124,255,0.7);
    background: linear-gradient(135deg, rgba(77,124,255,0.18), rgba(123,92,255,0.12));
    box-shadow: 0 0 0 1px rgba(77,124,255,0.25) inset;
  }

  .switch-track{
    width: 46px; height: 26px; border-radius: 999px;
    background: #242A45;
    border: 1px solid #232A45;
    position: relative;
    transition: background 0.3s ease, border-color .3s ease;
    cursor: pointer;
  }
  .switch-track.active{
    background: linear-gradient(135deg, #4D7CFF, #7B5CFF);
    border-color: transparent;
  }
  .switch-thumb{
    position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 999px;
    background: #F5F7FF;
    transition: transform 0.3s cubic-bezier(.16,1,.3,1);
  }
  .switch-track.active .switch-thumb{ transform: translateX(20px); }

  .eyebrow{
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: #8B93A7;
  }
  .eyebrow .dot{
    display:inline-block; width:6px; height:6px; border-radius:999px;
    background: linear-gradient(135deg,#4D7CFF,#7B5CFF);
    margin-right: 8px;
  }

  .hairline-divider{
    height: 1px;
    background: linear-gradient(90deg, transparent, #242A45 20%, #242A45 80%, transparent);
  }

  /* Strikethrough "was $X" price shown next to a FREE offer */
  .offer-price-row{
    display:flex; align-items:center; justify-content:center; gap:0.75rem; flex-wrap:wrap;
  }
  .offer-was{
    font-family:'JetBrains Mono',monospace; font-size:1.05rem;
    color:#8B93A7; text-decoration:line-through; text-decoration-color:#7A8296;
  }
  .offer-free{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:1.35rem;
    color:#F5F7FF;
  }
  .offer-badge{
    padding:0.3rem 0.75rem; border-radius:999px;
    font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase;
    color:#8EA7FF;
    background: rgba(123,92,255,0.12);
    border:1px solid rgba(142,167,255,0.35);
  }

  @media (prefers-reduced-motion: reduce){
  }

  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
    .play-pulse{ animation: none; }
  }

  a:focus-visible, button:focus-visible, input:focus-visible{
    outline: 2px solid #7B5CFF;
    outline-offset: 3px;
  }

  /* =====================================================
     STATIC UTILITY CSS
     (replaces the Tailwind CDN <script>, which some iOS
     browsers/in-app previews block or fail to execute —
     that was why the page showed as unstyled raw HTML.
     Everything below is plain CSS, no JS required.)
  ===================================================== */

  *,*::before,*::after{ box-sizing: border-box; }
  h1,h2,h3,h4,p,figure{ margin: 0; }
  ul,ol{ margin:0; padding:0; list-style:none; }
  button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  a{ color: inherit; text-decoration: none; }
  img,svg{ display:block; max-width:100%; }
  input{ font: inherit; }
  .antialiased{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

  /* colors */
  .bg-obsidian{ background-color:#030305; }
  .bg-carbon{ background-color: var(--glass); }
  .bg-carbon\/70{ background-color: rgba(8,12,25,0.70); }
  .bg-carbon\/80{ background-color: rgba(8,12,25,0.82); }
  .bg-indigo{ background-color:#4D7CFF; }
  .bg-cyan{ background-color:#7B5CFF; }
  .bg-cyan-soft{ background-color:#8EA7FF; }
  .bg-violet{ background-color:#7B5CFF; }
  .text-bone{ color:#F5F7FF; }
  .text-mute{ color:#8B93A7; }
  .text-cyan-soft{ color:#8EA7FF; }
  .text-white{ color:#fff; }
  .text-transparent{ color: transparent; -webkit-text-fill-color: transparent; }
  .border-hairline{ border-color: var(--line); }
  .scroll-mt-28{ scroll-margin-top: 7rem; }
  html.nav-locked, body.nav-locked{ overflow: hidden; height: 100%; overscroll-behavior: contain; }

  /* ---------- Global Beams background (fixed, behind everything) ---------- */
  #beamsLayer{
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    background: #030305;
  }
  #beamsFallback{
    position: absolute;
    inset: -10%;
    z-index: 0;
    background:
      radial-gradient(58% 48% at 16% 6%, rgba(77,124,255,0.15), transparent 62%),
      radial-gradient(52% 44% at 86% 16%, rgba(123,92,255,0.13), transparent 62%),
      radial-gradient(64% 46% at 12% 52%, rgba(123,92,255,0.10), transparent 64%),
      radial-gradient(60% 44% at 90% 66%, rgba(77,124,255,0.09), transparent 64%),
      radial-gradient(80% 55% at 50% 104%, rgba(123,92,255,0.11), transparent 66%),
      linear-gradient(180deg, #06080f 0%, #04060c 50%, #030305 100%);
    animation: beamsFallbackDrift 22s ease-in-out infinite;
  }
  @keyframes beamsFallbackDrift{
    0%,100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(-1.5%,2%) scale(1.04); }
  }
  #beamsCanvas{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity 1.6s ease;
  }
  #beamsCanvas.ready{ opacity: 1; }
  #beamsOverlay{
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(3,3,5,0.30) 0%, rgba(3,3,5,0.44) 55%, rgba(3,3,5,0.62) 100%),
      radial-gradient(120% 70% at 50% 0%, rgba(3,3,5,0) 0%, rgba(3,3,5,0.38) 100%);
  }
  @media (prefers-reduced-motion: reduce){
    #beamsFallback{ animation: none !important; }
  }
  header{ transition: padding 0.35s ease; }
  header .relative.flex{
    transition: background-color 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
  }
  header.header-scrolled .relative.flex{
    background-color: rgba(8,12,25,0.86);
    border-color: rgba(120,140,255,0.28);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    box-shadow: 0 12px 40px -20px rgba(3,3,5,0.8);
  }
  header.header-scrolled{ padding-top: 0.5rem; }

  /* fonts */
  .font-display{ font-family:'Bricolage Grotesque', sans-serif; }
  .font-body{ font-family:'Inter', sans-serif; }
  .font-mono{ font-family:'JetBrains Mono', monospace; }
  .font-medium{ font-weight:500; }
  .font-semibold{ font-weight:600; }

  /* gradients */
  .bg-gradient-to-br{ background-image: linear-gradient(to bottom right, var(--tw-from,transparent), var(--tw-via,transparent), var(--tw-to,transparent)); }
  .bg-gradient-to-r{ background-image: linear-gradient(to right, var(--tw-from,transparent), var(--tw-via,transparent), var(--tw-to,transparent)); }
  .from-indigo{ --tw-from:#4D7CFF; }
  .from-indigo\/20{ --tw-from: rgba(77,124,255,0.2); }
  .from-bone{ --tw-from:#F5F7FF; }
  .via-cyan-soft{ --tw-via:#8EA7FF; }
  .to-indigo{ --tw-to:#4D7CFF; }
  .to-cyan{ --tw-to:#7B5CFF; }
  .to-cyan-soft{ --tw-to:#8EA7FF; }
  .to-cyan\/20{ --tw-to: rgba(123,92,255,0.2); }
  .from-\[\#1a1a2e\]{ --tw-from:#1a1a2e; }
  .via-\[\#0A0E1B\]{ --tw-via:#0A0E1B; }
  .to-\[\#070912\]{ --tw-to:#070912; }
  .from-\[\#161c46\]{ --tw-from:#161c46; }
  .via-\[\#0d1024\]{ --tw-via:#0d1024; }
  .from-\[\#0f1a3a\]{ --tw-from:#0f1a3a; }
  .via-\[\#0c1226\]{ --tw-via:#0c1226; }
  .from-\[\#141a3f\]{ --tw-from:#141a3f; }
  .via-\[\#0d1226\]{ --tw-via:#0d1226; }
  .from-\[\#131c3c\]{ --tw-from:#131c3c; }
  .via-\[\#0c1226\]{ --tw-via:#0c1226; }
  .from-\[\#101a3a\]{ --tw-from:#101a3a; }
  .via-\[\#0f1024\]{ --tw-via:#0f1024; }
  .bg-clip-text{ -webkit-background-clip: text; background-clip: text; }

  /* layout / position */
  .relative{ position:relative; }
  .absolute{ position:absolute; }
  .fixed{ position:fixed; }
  .inset-0{ inset:0; }
  .inset-x-0{ left:0; right:0; }
  .top-0{ top:0; } .bottom-0{ bottom:0; } .left-0{ left:0; } .right-0{ right:0; }
  .top-5{ top:1.25rem; } .bottom-5{ bottom:1.25rem; } .left-5{ left:1.25rem; } .right-5{ right:1.25rem; }
  .top-20{ top:5rem; }
  .top-1\/2{ top:50%; } .top-1\/3{ top:33.3333%; } .top-1\/4{ top:25%; }
  .left-1\/2{ left:50%; } .left-1\/3{ left:33.3333%; } .left-1\/4{ left:25%; }
  .right-1\/4{ right:25%; }
  .-top-40{ top:-10rem; } .-left-40{ left:-10rem; }
  .-translate-x-1\/2,.-translate-y-1\/2{ transform: translate(var(--tw-tx,0),var(--tw-ty,0)); }
  .-translate-x-1\/2{ --tw-tx:-50%; }
  .-translate-y-1\/2{ --tw-ty:-50%; }
  .z-10{ z-index:10; } .z-30{ z-index:30; }

  /* display / flex / grid */
  .flex{ display:flex; } .inline-block{ display:inline-block; } .block{ display:block; } .hidden{ display:none; }
  .grid{ display:grid; }
  .flex-col{ flex-direction:column; }
  .flex-wrap{ flex-wrap:wrap; }
  .items-center{ align-items:center; }
  .items-start{ align-items:flex-start; }
  .justify-center{ justify-content:center; }
  .justify-between{ justify-content:space-between; }
  .gap-1{ gap:0.25rem; } .gap-1\.5{ gap:0.375rem; } .gap-2{ gap:0.5rem; } .gap-2\.5{ gap:0.625rem; }
  .gap-3{ gap:0.75rem; }
  .gap-x-8{ column-gap:2rem; }
  .gap-4{ gap:1rem; } .gap-5{ gap:1.25rem; } .gap-6{ gap:1.5rem; } .gap-8{ gap:2rem; } .gap-16{ gap:4rem; }
  .grid-cols-1{ grid-template-columns:repeat(1,minmax(0,1fr)); }
  .grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .space-y-1\.5 > * + *{ margin-top:0.375rem; }
  .space-y-3 > * + *{ margin-top:0.75rem; }
  .space-y-10 > * + *{ margin-top:2.5rem; }
  .group:hover .group-hover\:text-cyan-soft{ color:#8EA7FF; }

  /* sizing */
  .w-full{ width:100%; } .h-full{ height:100%; }
  .w-1\.5{ width:0.375rem; } .h-1\.5{ height:0.375rem; }
  .w-2{ width:0.5rem; } .h-2{ height:0.5rem; }
  .w-4{ width:1rem; } .h-4{ height:1rem; }
  .w-5{ width:1.25rem; } .h-5{ height:1.25rem; }
  .w-6{ width:1.5rem; } .h-6{ height:1.5rem; }
  .w-11{ width:2.75rem; } .h-11{ height:2.75rem; }
  .w-20{ width:5rem; } .h-20{ height:5rem; }
  .w-\[300px\]{ width:300px; } .h-\[300px\]{ height:300px; }
  .w-\[350px\]{ width:350px; } .h-\[350px\]{ height:350px; }
  .w-\[450px\]{ width:450px; } .h-\[400px\]{ height:400px; }
  .w-\[500px\]{ width:500px; } .h-\[500px\]{ height:500px; }
  .w-\[550px\]{ width:550px; } .h-\[550px\]{ height:550px; }
  .w-\[600px\]{ width:600px; } .h-\[600px\]{ height:600px; }
  .w-\[700px\]{ width:700px; }
  .max-w-2xl{ max-width:42rem; }
  .max-w-3xl{ max-width:48rem; } .max-w-4xl{ max-width:56rem; } .max-w-5xl{ max-width:64rem; }
  .max-w-6xl{ max-width:72rem; }
  .max-w-7xl{ max-width:80rem; } .max-w-md{ max-width:28rem; } .max-w-sm{ max-width:24rem; } .max-w-xl{ max-width:36rem; }
  .aspect-video{ aspect-ratio:16/9; }
  .aspect-\[4\/5\]{ aspect-ratio:4/5; }
  .aspect-\[9\/16\]{ aspect-ratio:9/16; }
  .ml-1{ margin-left:0.25rem; }
  .mx-auto{ margin-left:auto; margin-right:auto; }
  .mt-1{ margin-top:0.25rem; } .mt-2{ margin-top:0.5rem; } .mt-3{ margin-top:0.75rem; } .mt-4{ margin-top:1rem; }
  .pt-2{ padding-top:0.5rem; }
  .mt-6{ margin-top:1.5rem; } .mt-8{ margin-top:2rem; } .mt-10{ margin-top:2.5rem; } .mt-16{ margin-top:4rem; } .mt-20{ margin-top:5rem; }
  .mb-2{ margin-bottom:0.5rem; } .mb-3{ margin-bottom:0.75rem; } .mb-4{ margin-bottom:1rem; } .mb-5{ margin-bottom:1.25rem; }
  .mb-9{ margin-bottom:2.25rem; } .mb-12{ margin-bottom:3rem; }
  .mt-5{ margin-top:1.25rem; }
  .mb-6{ margin-bottom:1.5rem; } .mb-8{ margin-bottom:2rem; } .mb-14{ margin-bottom:3.5rem; } .mb-16{ margin-bottom:4rem; }
  .my-6{ margin-top:1.5rem; margin-bottom:1.5rem; } .my-7{ margin-top:1.75rem; margin-bottom:1.75rem; } .my-16{ margin-top:4rem; margin-bottom:4rem; }
  .p-3{ padding:0.75rem; } .p-6{ padding:1.5rem; } .p-7{ padding:1.75rem; } .p-8{ padding:2rem; } .p-9{ padding:2.25rem; }
  .px-4{ padding-left:1rem; padding-right:1rem; } .px-5{ padding-left:1.25rem; padding-right:1.25rem; }
  .px-6{ padding-left:1.5rem; padding-right:1.5rem; } .px-7{ padding-left:1.75rem; padding-right:1.75rem; }
  .px-8{ padding-left:2rem; padding-right:2rem; }
  .py-2{ padding-top:0.5rem; padding-bottom:0.5rem; } .py-2\.5{ padding-top:0.625rem; padding-bottom:0.625rem; }
  .py-3\.5{ padding-top:0.875rem; padding-bottom:0.875rem; } .py-4{ padding-top:1rem; padding-bottom:1rem; }
  .py-20{ padding-top:5rem; padding-bottom:5rem; } .py-24{ padding-top:6rem; padding-bottom:6rem; } .py-28{ padding-top:7rem; padding-bottom:7rem; }
  .pt-44{ padding-top:11rem; } .pb-28{ padding-bottom:7rem; }

  /* typography */
  .text-xs{ font-size:0.75rem; line-height:1rem; } .text-sm{ font-size:0.875rem; line-height:1.25rem; }
  .text-lg{ font-size:1.125rem; line-height:1.75rem; } .text-xl{ font-size:1.25rem; line-height:1.75rem; }
  .text-2xl{ font-size:1.5rem; line-height:2rem; } .text-3xl{ font-size:1.875rem; line-height:2.25rem; }
  .text-4xl{ font-size:2.25rem; line-height:2.5rem; } .text-5xl{ font-size:3rem; line-height:1; } .text-6xl{ font-size:3.75rem; line-height:1; }
  .text-\[11px\]{ font-size:11px; } .text-\[15vw\]{ font-size:15vw; }
  .leading-\[0\.92\]{ line-height:0.92; } .leading-relaxed{ line-height:1.625; }
  .tracking-tight{ letter-spacing:-0.025em; } .tracking-widest{ letter-spacing:0.1em; }
  .uppercase{ text-transform:uppercase; }
  .text-center{ text-align:center; }
  .whitespace-nowrap{ white-space:nowrap; }
  .transition-colors{ transition:color .3s ease, background-color .3s ease, border-color .3s ease; }
  .hover\:text-bone:hover{ color:#F5F7FF; }
  .overflow-hidden{ overflow:hidden; }

  /* borders / radius */
  .border{ border-width:1px; border-style:solid; border-color: var(--line); }
  .border-t{ border-top-width:1px; border-top-style:solid; border-color: var(--line); }
  .rounded-xl{ border-radius:0.75rem; } .rounded-2xl{ border-radius:1rem; } .rounded-3xl{ border-radius:1.5rem; }
  .rounded-full{ border-radius:9999px; }

  /* effects */
  .backdrop-blur-xl{ -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
  .opacity-60{ opacity:0.6; }
  .animate-pulse{ animation: tw-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
  @keyframes tw-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.5; } }

  /* --- previously missing utilities (restored) --- */
  .w-10{ width:2.5rem; } .h-10{ height:2.5rem; }
  .gap-10{ gap:2.5rem; }
  .max-w-xs{ max-width:20rem; }
  .text-left{ text-align:left; }
  .bg-carbon\/60{ background-color: rgba(8,12,25,0.60); }
  .from-\[\#101a35\]{ --tw-from:#101a35; }
  .from-\[\#171b40\]{ --tw-from:#171b40; }

  /* responsive: sm >=640px, md >=768px, lg >=1024px */
  @media (min-width:640px){
    .sm\:inline-flex{ display:inline-flex; }
    .sm\:flex-row{ flex-direction:row; }
    .sm\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .sm\:w-auto{ width:auto; }
    .sm\:mt-0{ margin-top:0; }
  }
  @media (min-width:768px){
    .md\:flex{ display:flex; }
    .md\:items-start{ align-items:flex-start; }
    .md\:justify-start{ justify-content:flex-start; }
    .md\:mx-0{ margin-left:0; margin-right:0; }
    .md\:text-left{ text-align:left; }
    .md\:hidden{ display:none; }
    .md\:flex-row{ flex-direction:row; }
    .md\:items-end{ align-items:flex-end; }
    .md\:justify-between{ justify-content:space-between; }
    .md\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .md\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
    .md\:text-5xl{ font-size:3rem; line-height:1; }
    .md\:text-6xl{ font-size:3.75rem; line-height:1; }
    .md\:text-7xl{ font-size:4.5rem; line-height:1; }
    .md\:text-\[8\.5vw\]{ font-size:8.5vw; }
    .md\:p-8{ padding:2rem; } .md\:p-9{ padding:2.25rem; } .md\:text-4xl{ font-size:2.25rem; line-height:2.5rem; }
    .md\:pt-56{ padding-top:14rem; }
    .md\:pb-36{ padding-bottom:9rem; }
    .md\:py-36{ padding-top:9rem; padding-bottom:9rem; }
  }
  @media (min-width:1024px){
    .lg\:col-span-2{ grid-column:span 2 / span 2; }
    .lg\:col-span-3{ grid-column:span 3 / span 3; }
    .lg\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
    .lg\:grid-cols-6{ grid-template-columns:repeat(6,minmax(0,1fr)); }
    .lg\:grid-cols-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
    .lg\:px-10{ padding-left:2.5rem; padding-right:2.5rem; }
    .lg\:text-\[7\.2rem\]{ font-size:7.2rem; }
  }

  /* =====================================================
     PREMIUM UPGRADE — testimonials, contact, extra polish
  ===================================================== */

  .reveal-delay-5{ transition-delay: 0.40s; }
  .reveal-delay-6{ transition-delay: 0.48s; }

  /* Slow ambient drift on hero/section glows for a "living" background */
  .mesh-glow-float{ animation: meshFloat 14s ease-in-out infinite; }
  .mesh-glow-float.delay-1{ animation-delay: -4s; }
  .mesh-glow-float.delay-2{ animation-delay: -9s; }
  @keyframes meshFloat{
    0%,100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(2%,-3%) scale(1.06); }
  }

  /* Gradient-border glow used on premium cards (testimonials, contact) */
  .glow-card{
    position: relative;
    border: 1px solid rgba(255,255,255,0.07);
    background: linear-gradient(180deg, rgba(18,18,26,0.55), rgba(12,12,18,0.5));
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
    transition: transform 0.5s cubic-bezier(.16,1,.3,1), box-shadow 0.5s ease, border-color 0.5s ease;
  }
  .glow-card::before{
    content:"";
    position:absolute; inset:-1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(77,124,255,0), rgba(123,92,255,0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: background 0.5s ease;
  }
  .glow-card:hover{
    transform: translateY(-6px);
    border-color: rgba(77,124,255,0.4);
    box-shadow: 0 24px 60px -20px rgba(77,124,255,0.35), 0 0 40px -12px rgba(123,92,255,0.25);
  }
  .glow-card:hover::before{
    background: linear-gradient(135deg, rgba(77,124,255,0.7), rgba(123,92,255,0.7));
  }

  /* Stars */
  .star-rating{ color:#8EA7FF; letter-spacing: 2px; text-shadow: 0 0 16px rgba(123,92,255,0.45); }

  /* Testimonial avatar (smaller roster-avatar variant) */
  .testi-avatar{
    background: conic-gradient(from 180deg, #4D7CFF, #7B5CFF, #7B5CFF, #4D7CFF);
    padding: 1.5px;
    width: 3rem; height: 3rem;
    border-radius: 999px;
    flex-shrink: 0;
  }
  .testi-quote-mark{
    font-family:'Bricolage Grotesque', sans-serif;
    font-size: 3rem;
    line-height: 1;
    color: rgba(77,124,255,0.25);
    position:absolute;
    top: 1rem; right: 1.25rem;
    pointer-events:none;
  }

  /* Portfolio thumbnail: subtle tilt added on top of existing zoom */
  .thumb:hover .thumb-media{ transform: scale(1.08) rotate(0.4deg); filter: saturate(1.15); }

  /* Button ripple (pure CSS, no JS) */
  .btn-primary, .btn-ghost, .social-btn{ position: relative; overflow: hidden; }
  .btn-primary::after, .btn-ghost::after, .social-btn::after{
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.35), transparent 60%);
    opacity:0; transform: scale(0.4);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events:none;
  }
  .btn-primary:active::after, .btn-ghost:active::after, .social-btn:active::after{
    opacity:1; transform: scale(1.4);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  /* Contact form fields */
  .contact-field{ display:flex; flex-direction:column; gap:0.5rem; }
  .contact-field label{ font-family:'JetBrains Mono', monospace; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:#8B93A7; }
  .contact-input, .contact-select, .contact-textarea{
    width:100%;
    background: rgba(18,18,26,0.7);
    border: 1px solid var(--line);
    color: #F5F7FF;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-family:'Inter', sans-serif;
    font-size: 0.9rem;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
  }
  .contact-select{ -webkit-appearance:none; appearance:none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238A8A9B' stroke-width='1.6'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position: right 0.9rem center; background-size: 16px;
    padding-right: 2.5rem;
  }
  .contact-select option{ background:#0A0E1B; color:#F5F7FF; }
  .contact-input::placeholder, .contact-textarea::placeholder{ color:#7A8296; }
  .contact-input:focus, .contact-select:focus, .contact-textarea:focus{
    outline:none;
    border-color: rgba(123,92,255,0.6);
    box-shadow: 0 0 0 3px rgba(123,92,255,0.15);
    background: rgba(18,18,26,0.95);
  }
  .contact-textarea{ resize: vertical; min-height: 120px; font-family:'Inter', sans-serif; }

  /* Social / contact-method buttons */
  .social-btn{
    display:flex; align-items:center; gap:0.75rem;
    border: 1px solid var(--line);
    background: rgba(18,18,26,0.6);
    border-radius: 0.9rem;
    padding: 0.85rem 1rem;
    transition: border-color .35s ease, background .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
  }
  .social-btn:hover{
    border-color: rgba(123,92,255,0.5);
    background: rgba(18,18,26,0.9);
    --lift: -2px;
  }
  .social-icon{
    width: 2.25rem; height: 2.25rem; border-radius: 0.6rem;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, rgba(77,124,255,0.18), rgba(123,92,255,0.12));
    border: 1px solid var(--line);
    flex-shrink:0;
  }
  .form-success{
    display:none;
    align-items:center; gap:0.6rem;
    color:#8EA7FF;
    font-family:'JetBrains Mono', monospace;
    font-size: 0.8rem;
    margin-top: 0.75rem;
  }
  .form-success.show{ display:flex; }

  @media (prefers-reduced-motion: reduce){
    .mesh-glow-float{ animation:none; }
  }

  /* ---- Video lightbox (portfolio thumbnails) ---- */
  .vid-modal{
    position:fixed; inset:0; z-index:300;
    display:none; align-items:center; justify-content:center;
    padding:1.5rem;
    background: rgba(4,5,10,0.86);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    opacity:0; transition: opacity 0.35s ease;
  }
  .vid-modal.open{ display:flex; }
  .vid-modal.show{ opacity:1; }
  .vid-frame{
    position:relative; width:100%; max-width:1040px; aspect-ratio:16/9;
    max-height:86vh;
    border-radius:1.1rem; overflow:hidden; background:#000;
    border:1px solid rgba(255,255,255,0.12);
    box-shadow: 0 50px 140px -30px rgba(0,0,0,0.95), 0 0 80px -30px rgba(123,92,255,0.5);
    transform: scale(0.95) translateY(14px);
    transition: transform 0.5s cubic-bezier(.16,1,.3,1);
  }
  .vid-modal.show .vid-frame{ transform: scale(1) translateY(0); }
  .vid-frame.vertical{ max-width:min(430px, 92vw); aspect-ratio:9/16; }
  .vid-frame iframe, .vid-frame video{
    position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
  }
  .vid-close{
    position:absolute; top:1.25rem; right:1.25rem; z-index:2;
    width:44px; height:44px; border-radius:999px;
    display:flex; align-items:center; justify-content:center;
    color:#F5F7FF;
    background: rgba(18,18,26,0.6);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border:1px solid rgba(255,255,255,0.16);
    transition: transform 0.3s cubic-bezier(.16,1,.3,1), background 0.3s ease;
  }
  .vid-close:hover{ transform: rotate(90deg); background: rgba(123,92,255,0.35); }
  .thumb[data-video]:focus-visible{ outline:2px solid #8EA7FF; outline-offset:3px; }
  .thumb-media.has-poster{ background-size:cover; background-position:center; }

  /* ---------- Auth modal (Login / Sign Up) ---------- */
  .auth-modal{
    position:fixed; inset:0; z-index:300;
    display:none; align-items:center; justify-content:center;
    padding:1.5rem;
    background: rgba(4,5,10,0.86);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    opacity:0; transition: opacity 0.35s ease;
  }
  .auth-modal.open{ display:flex; }
  .auth-modal.show{ opacity:1; }
  .auth-panel{
    position:relative; width:100%; max-width:440px; max-height:88vh; overflow-y:auto;
    border-radius:1.25rem;
    background: var(--glass);
    border:1px solid var(--line);
    box-shadow: 0 50px 140px -30px rgba(0,0,0,0.95), 0 0 80px -30px rgba(123,92,255,0.5);
    padding: 2.5rem 2rem 2.25rem;
    transform: scale(0.95) translateY(14px);
    transition: transform 0.5s cubic-bezier(.16,1,.3,1);
  }
  .auth-modal.show .auth-panel{ transform: scale(1) translateY(0); }
  .auth-close{
    position:absolute; top:1rem; right:1rem; z-index:2;
    width:40px; height:40px; border-radius:999px;
    display:flex; align-items:center; justify-content:center;
    color:#F5F7FF;
    background: rgba(18,18,26,0.6);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border:1px solid rgba(255,255,255,0.16);
    transition: transform 0.3s cubic-bezier(.16,1,.3,1), background 0.3s ease;
  }
  .auth-close:hover{ transform: rotate(90deg); background: rgba(123,92,255,0.35); }
  .auth-eyebrow{ font-family:'JetBrains Mono', monospace; font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--bright); display:flex; align-items:center; gap:0.5rem; }
  .auth-eyebrow .dot{ width:6px; height:6px; border-radius:999px; background:linear-gradient(135deg, var(--indigo), var(--violet)); }
  .auth-view h3{ font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:1.5rem; color:#F5F7FF; margin-top:0.6rem; }
  .auth-view > p.auth-sub{ font-size:0.85rem; color: var(--text-secondary); margin-top:0.4rem; margin-bottom:1.75rem; }
  .auth-view form{ display:flex; flex-direction:column; gap:1.1rem; }
  .auth-password-wrap{ position:relative; }
  .auth-password-wrap .contact-input{ padding-right:2.75rem; }
  .auth-pw-toggle{
    position:absolute; right:0.6rem; top:50%; transform:translateY(-50%);
    width:28px; height:28px; display:flex; align-items:center; justify-content:center;
    color: var(--text-secondary); background:none; border:0; cursor:pointer; border-radius:0.4rem;
    transition: color 0.2s ease;
  }
  .auth-pw-toggle:hover{ color:#F5F7FF; }
  .auth-error{
    font-size:0.78rem; color:#FF8A8A; background:rgba(255,90,90,0.08);
    border:1px solid rgba(255,90,90,0.25); border-radius:0.6rem; padding:0.6rem 0.8rem;
  }
  .auth-note{
    font-size:0.78rem; color: var(--text-secondary); background:rgba(123,92,255,0.08);
    border:1px solid rgba(123,92,255,0.25); border-radius:0.6rem; padding:0.6rem 0.8rem;
  }
  .auth-submit{ margin-top:0.25rem; width:100%; justify-content:center; }
  .auth-switch{ margin-top:1.5rem; text-align:center; font-size:0.85rem; color: var(--text-secondary); }
  .auth-switch button{ color: var(--bright); font-weight:600; background:none; border:0; cursor:pointer; font-family:inherit; font-size:inherit; padding:0; }
  .auth-switch button:hover{ text-decoration:underline; }

  @media (max-width: 480px){
    .auth-panel{ padding:2.1rem 1.35rem 1.75rem; border-radius:1rem; }
    .auth-view h3{ font-size:1.3rem; }
  }
  @media (hover:none), (pointer:coarse){
    .auth-modal{ -webkit-backdrop-filter:none; backdrop-filter:none; background-color: rgba(4, 5, 10, 0.95); }
  }

  /* ================= ProfileCard (React Bits port — vanilla) =================
     Original: reactbits.dev  ·  converted from React + CSS to plain HTML/JS.
     All variables are scoped to .pc-card-wrapper so nothing leaks into the
     rest of the page. Holographic ramp retuned to the Zevrion palette.
     ========================================================================= */
  .pc-card-wrapper{
    --pointer-x: 50%;
    --pointer-y: 50%;
    --pointer-from-center: 0;
    --pointer-from-top: 0.5;
    --pointer-from-left: 0.5;
    --card-opacity: 0;
    --rotate-x: 0deg;
    --rotate-y: 0deg;
    --background-x: 50%;
    --background-y: 50%;
    --grain: none;
    --icon: none;
    --behind-glow-color: rgba(123, 92, 255, 0.55);
    --behind-glow-size: 50%;
    --inner-gradient: linear-gradient(145deg, rgba(77,124,255,0.22) 0%, rgba(123,92,255,0.30) 100%);
    /* brand-tuned holographic ramp (was rainbow) */
    --sunpillar-clr-1: hsl(228, 100%, 74%);
    --sunpillar-clr-2: hsl(252, 100%, 76%);
    --sunpillar-clr-3: hsl(283, 90%, 74%);
    --sunpillar-clr-4: hsl(196, 100%, 74%);
    --sunpillar-clr-5: hsl(216, 100%, 72%);
    --sunpillar-clr-6: hsl(266, 100%, 78%);
    --card-radius: 26px;

    position: relative;
    touch-action: none;
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Name sits above the frame, in normal page flow — not on the photo */
  .pc-name-block{
    text-align: center;
    margin-bottom: 14px;
    width: 100%;
  }
  .pc-name-block h3{
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700; margin: 0;
    font-size: clamp(1.2rem, 1.7vw + 0.8rem, 1.85rem);
    line-height: 1.2; color: #F5F7FF;
  }
  .pc-name-block p{
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500; font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: #8EA7FF;
    margin: 0.4rem 0 0;
  }

  /* Only the photo itself carries the 3D perspective + tilt */
  .pc-photo-wrap{
    position: relative;
    width: 100%;
    perspective: 700px;
    transform: translate3d(0, 0, 0.1px);
  }

  .pc-behind{
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(
      circle at var(--pointer-x) var(--pointer-y),
      var(--behind-glow-color) 0%,
      transparent var(--behind-glow-size)
    );
    filter: blur(50px) saturate(1.1);
    opacity: calc(0.8 * var(--card-opacity));
    transition: opacity 200ms ease;
  }
  .pc-card-wrapper:hover, .pc-card-wrapper.active{ --card-opacity: 1; }

  .pc-card-shell{ position: relative; z-index: 1; }

  .pc-card{
    height: 62svh; max-height: 470px; width: 100%;
    display: grid;
    aspect-ratio: 0.718;
    border-radius: var(--card-radius);
    position: relative;
    background-blend-mode: color-dodge, normal, normal, normal;
    box-shadow: rgba(0,0,0,0.8) calc((var(--pointer-from-left) * 10px) - 3px)
      calc((var(--pointer-from-top) * 20px) - 6px) 20px -5px;
    transition: transform 1s ease;
    transform: translateZ(0) rotateX(0deg) rotateY(0deg);
    background: rgba(3,3,5,0.92);
    backface-visibility: hidden;
    overflow: hidden;
  }
  .pc-card.active{
    transition: none;
    transform: translateZ(0) rotateX(var(--rotate-y)) rotateY(var(--rotate-x));
  }
  .pc-card-shell.entering .pc-card{ transition: transform 180ms ease-out; }

  .pc-card [hidden]{ display: none !important; }
  .pc-card *{
    display: grid; grid-area: 1/-1;
    border-radius: var(--card-radius);
    pointer-events: none;
  }

  .pc-inside{
    inset: 0; position: absolute;
    background-image: var(--inner-gradient);
    background-color: rgba(3,3,5,0.92);
    transform: none;
  }

  .pc-shine{
    display: none;
    --pc-mask: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      #000 0%, rgba(0,0,0,0.42) 34%, rgba(0,0,0,0.12) 58%, transparent 76%);
    mask-image: var(--pc-mask);
    -webkit-mask-image: var(--pc-mask);
    mask-mode: alpha; -webkit-mask-mode: alpha;
    mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
    mask-size: 100% 100%; -webkit-mask-size: 100% 100%;
    mask-position: center; -webkit-mask-position: center;
    transition: filter 0.8s ease;
    filter: brightness(0.42) contrast(1.15) saturate(0.55) opacity(0.34);
    animation: pc-holo-bg 18s linear infinite;
    mix-blend-mode: color-dodge;
  }
  /* if a real icon pattern is supplied, use the original masking behaviour */
  .pc-card-wrapper.has-icon .pc-shine{
    mask-image: var(--icon); -webkit-mask-image: var(--icon);
    mask-mode: luminance; -webkit-mask-mode: luminance;
    mask-repeat: repeat; -webkit-mask-repeat: repeat;
    mask-size: 150%; -webkit-mask-size: 150%;
    mask-position: top calc(200% - (var(--background-y) * 5)) left calc(100% - var(--background-x));
    -webkit-mask-position: top calc(200% - (var(--background-y) * 5)) left calc(100% - var(--background-x));
    filter: brightness(0.6) contrast(1.3) saturate(0.35) opacity(0.42);
  }
  .pc-shine, .pc-shine::after{
    --space: 5%; --angle: -45deg;
    transform: translate3d(0, 0, 1px);
    overflow: hidden; z-index: 3;
    background: transparent; background-size: cover; background-position: center;
    background-image:
      repeating-linear-gradient(0deg,
        var(--sunpillar-clr-1) calc(var(--space) * 1),
        var(--sunpillar-clr-2) calc(var(--space) * 2),
        var(--sunpillar-clr-3) calc(var(--space) * 3),
        var(--sunpillar-clr-4) calc(var(--space) * 4),
        var(--sunpillar-clr-5) calc(var(--space) * 5),
        var(--sunpillar-clr-6) calc(var(--space) * 6),
        var(--sunpillar-clr-1) calc(var(--space) * 7)),
      repeating-linear-gradient(var(--angle),
        #0e152e 0%, hsl(220, 12%, 58%) 3.8%, hsl(220, 30%, 66%) 4.5%,
        hsl(220, 12%, 58%) 5.2%, #0e152e 10%, #0e152e 12%),
      radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
        hsla(0,0%,0%,0.1) 12%, hsla(0,0%,0%,0.15) 20%, hsla(0,0%,0%,0.25) 120%);
    background-position: 0 var(--background-y), var(--background-x) var(--background-y), center;
    background-blend-mode: color, hard-light;
    background-size: 500% 500%, 300% 300%, 200% 200%;
    background-repeat: repeat;
  }
  .pc-shine::before, .pc-shine::after{
    content: ''; background-position: center; background-size: cover;
    grid-area: 1/1; opacity: 0; transition: opacity 0.8s ease;
  }
  .pc-card.active .pc-shine{
    filter: brightness(0.6) contrast(1.3) saturate(0.7) opacity(0.5);
    animation-play-state: paused;
  }
  .pc-card.active .pc-shine::before, .pc-card.active .pc-shine::after{ opacity: 1; }

  .pc-shine::before{
    background-image:
      linear-gradient(45deg, var(--sunpillar-clr-4), var(--sunpillar-clr-5),
        var(--sunpillar-clr-6), var(--sunpillar-clr-1), var(--sunpillar-clr-2), var(--sunpillar-clr-3)),
      radial-gradient(circle at var(--pointer-x) var(--pointer-y), hsl(0,0%,70%) 0%, hsla(0,0%,30%,0.2) 90%),
      var(--grain);
    background-size: 250% 250%, 100% 100%, 220px 220px;
    background-position: var(--pointer-x) var(--pointer-y), center,
      calc(var(--pointer-x) * 0.01) calc(var(--pointer-y) * 0.01);
    background-blend-mode: color-dodge;
    filter: brightness(calc(1.05 - var(--pointer-from-center) * 0.35))
      contrast(calc(var(--pointer-from-center) + 1.2))
      saturate(calc(0.4 + var(--pointer-from-center) * 0.6))
      opacity(0.5);
    mix-blend-mode: luminosity;
  }
  .pc-shine::after{
    background-position: 0 var(--background-y),
      calc(var(--background-x) * 0.4) calc(var(--background-y) * 0.5), center;
    background-size: 200% 300%, 700% 700%, 100% 100%;
    mix-blend-mode: difference;
    filter: brightness(0.5) contrast(1.2) opacity(0.55);
  }

  .pc-glare{
    display: none;
    transform: translate3d(0, 0, 1.1px); overflow: hidden;
    background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(248, 45%, 62%, 0.55) 10%, hsla(222, 55%, 12%, 0.9) 78%);
    mix-blend-mode: overlay;
    filter: brightness(0.6) contrast(1.05);
    z-index: 4;
  }

  .pc-avatar-content{
    mix-blend-mode: normal; overflow: visible;
    transform: translateZ(2px); backface-visibility: hidden;
  }
  .pc-avatar-content .avatar{
    width: 100%; position: absolute; left: 50%;
    transform-origin: 50% 100%;
    transform: translateX(calc(-50% + (var(--pointer-from-left) - 0.5) * 6px)) translateZ(0)
      scaleY(calc(1 + (var(--pointer-from-top) - 0.5) * 0.02))
      scaleX(calc(1 + (var(--pointer-from-left) - 0.5) * 0.01));
    bottom: -1px; backface-visibility: hidden; will-change: transform;
    transition: transform 120ms ease-out;
  }
  /* monogram shown when no avatar cut-out is supplied */
  .pc-fallback{
    position: absolute; inset: 0; z-index: 1;
    display: none; align-items: center; justify-content: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700; font-size: 5.5rem; letter-spacing: 0.02em;
    color: rgba(245,247,255,0.13);
    text-shadow: 0 0 60px rgba(123,92,255,0.35);
  }

  .pc-user-info{
    position: relative;
    width: 100%;
    margin-top: 14px;
    z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255,255,255,0.08);
    -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 10px 12px;
    pointer-events: auto;
  }
  .pc-user-details{ display: flex; align-items: center; gap: 10px; }
  .pc-mini-avatar{
    width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.14); flex-shrink: 0;
    background: rgba(8,12,25,0.9);
    display: flex !important; align-items: center; justify-content: center;
    font-family: 'Bricolage Grotesque', sans-serif; font-size: 0.8rem; color: #8EA7FF;
  }
  .pc-mini-avatar img{ width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  .pc-user-text{ display: flex; align-items: flex-start; flex-direction: column; gap: 5px; }
  .pc-handle{ font-size: 13px; font-weight: 500; color: rgba(245,247,255,0.92); line-height: 1; }
  .pc-status{
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: rgba(142,167,255,0.85); line-height: 1;
  }
  .pc-contact-btn{
    border: 1px solid rgba(255,255,255,0.14); border-radius: 9px;
    padding: 10px 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
    color: rgba(245,247,255,0.92);
    background: rgba(123,92,255,0.16);
    cursor: pointer; transition: all 0.25s ease;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    pointer-events: auto;
  }
  .pc-contact-btn:hover{
    border-color: rgba(142,167,255,0.55);
    background: rgba(123,92,255,0.34);
    transform: translateY(-1px);
  }



  @keyframes pc-holo-bg{
    0%{ background-position: 0 var(--background-y), 0 0, center; }
    100%{ background-position: 0 var(--background-y), 90% 90%, center; }
  }

  @media (max-width: 768px){
    .pc-card{ height: 58svh; max-height: 420px; }
    .pc-name-block{ margin-bottom: 10px; }
    .pc-name-block h3{ font-size: clamp(1.05rem, 4.6vw, 1.4rem); }
    .pc-name-block p{ font-size: 10px; }
    .pc-fallback{ font-size: 4.5rem; }
    .pc-user-info{ padding: 9px 10px; }
    .pc-mini-avatar{ width: 34px; height: 34px; }
    .pc-handle{ font-size: 12px; }
    .pc-status{ font-size: 10px; }
    .pc-contact-btn{ padding: 8px 11px; font-size: 10px; }
  }
  @media (prefers-reduced-motion: reduce){
    .pc-shine{ animation: none; }
    .pc-card{ transform: none !important; }
  }

  /* ================= LineSidebar (React Bits port — vanilla) =================
     Original: reactbits.dev · converted from React + CSS to plain HTML/JS.
     --effect (0..1) per item is driven by a rAF lerp in JS, so colour, shift
     and scale all read the same continuously-animating value and stay in step.
     ========================================================================== */
  .line-sidebar{
    --accent-color: #8EA7FF;
    --text-color: #8B93A7;
    --marker-color: rgba(120,140,255,0.35);
    --marker-length: 56px;
    --marker-gap: 0px;
    --tick-scale: 0.5;
    --max-shift: 18px;
    --item-gap: 20px;
    --font-size: 1rem;
    position: relative; display: flex; justify-content: flex-start;
  }
  .line-sidebar--markers{ padding-left: calc(var(--marker-length) + var(--marker-gap)); }
  .line-sidebar__list{
    list-style: none; margin: 0; padding: 0.5rem 0;
    display: flex; flex-direction: column; gap: var(--item-gap);
    width: 100%;
  }
  .line-sidebar__item{ position: relative; cursor: pointer; }
  .line-sidebar__item::before{ content: ''; position: absolute; inset: -8px -12px -8px -24px; }
  .line-sidebar__item:focus-visible{ outline: none; }
  .line-sidebar__item:focus-visible .line-sidebar__label{ text-decoration: underline; text-underline-offset: 5px; }

  .line-sidebar__label{
    position: relative; display: inline-flex; align-items: baseline;
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size); line-height: 1.25;
    color: var(--text-color);
    color: color-mix(in srgb, var(--accent-color) calc(var(--effect, 0) * 100%), var(--text-color));
    transform: translateX(calc(var(--effect, 0) * var(--max-shift)));
  }
  .line-sidebar__item[aria-current="true"] .line-sidebar__label{ font-weight: 600; }
  .line-sidebar__index{
    font-family: 'JetBrains Mono', monospace;
    margin-right: 0.65rem; font-size: 0.78em;
    opacity: calc(0.45 + var(--effect, 0) * 0.55);
  }
  .line-sidebar__text{ white-space: nowrap; }

  .line-sidebar__marker{
    position: absolute; top: 0.72em;
    left: calc(-1 * var(--marker-length) - var(--marker-gap));
    height: 1px; width: var(--marker-length);
    background-color: var(--marker-color);
    background-color: color-mix(in srgb, var(--accent-color) calc(var(--effect, 0) * 100%), var(--marker-color));
    transform-origin: left center;
    transform: translateY(-50%) scaleX(calc(0.7 + var(--effect, 0) * 0.5));
  }
  .line-sidebar--markers .line-sidebar__item:not(:last-child)::after{
    content: ''; position: absolute;
    top: calc(100% + var(--item-gap) / 2);
    left: calc(-1 * var(--marker-length) - var(--marker-gap));
    height: 1px; width: calc(var(--marker-length) * var(--tick-scale));
    background-color: var(--marker-color);
    opacity: 0.5; transform: translateY(-50%);
  }
  .line-sidebar--scale-tick .line-sidebar__item:not(:last-child)::after{
    transform-origin: left center;
    transform: translateY(-50%) scaleX(calc(0.7 + var(--effect, 0) * 0.6));
  }

  /* ---- rail + detail pane layout ---- */
  .ls-block{ display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
  @media (min-width: 900px){
    .ls-block{ grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 3.5rem; }
    .ls-block .line-sidebar{ position: sticky; top: 7rem; }
  }
  .ls-pane{ position: relative; min-height: 150px; }
  .ls-panel{
    display: none;
    border-left: 1px solid rgba(120,140,255,0.18);
    padding-left: 1.6rem;
  }
  .ls-panel.is-active{
    display: block;
    animation: ls-panel-in 0.5s cubic-bezier(.16,1,.3,1) both;
  }
  .ls-panel .ls-step{
    font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
    letter-spacing: 0.16em; text-transform: uppercase; color: #8EA7FF;
  }
  .ls-panel h3{
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.2;
    color: #F5F7FF; margin-top: 0.6rem;
  }
  .ls-panel p{ color: #8B93A7; font-size: 0.95rem; line-height: 1.75; margin-top: 0.9rem; max-width: 46ch; }
  @keyframes ls-panel-in{
    from{ opacity: 0; transform: translateY(12px); filter: blur(5px); }
    to{ opacity: 1; transform: none; filter: blur(0); }
  }
  @media (max-width: 899px){
    .line-sidebar{ --marker-length: 34px; --max-shift: 10px; --item-gap: 16px; --font-size: 0.94rem; }
    .ls-panel{ padding-left: 1.1rem; }
  }
  @media (prefers-reduced-motion: reduce){
    .ls-panel.is-active{ animation: none; }
    .line-sidebar__label{ transform: none; }
  }

  /* ---------- Verified review meta + endorsement chips ---------- */
  .testi-verified{
    display:inline-flex; align-items:center; gap:0.4rem;
    font-family:'JetBrains Mono', monospace; font-size:0.62rem;
    letter-spacing:0.09em; text-transform:uppercase;
    color:#8EA7FF;
  }
  .testi-verified svg{ width:13px; height:13px; flex-shrink:0; }
  .testi-tags{ display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:1rem; }
  .testi-tag{
    font-family:'JetBrains Mono', monospace; font-size:0.6rem;
    letter-spacing:0.05em; color:#8B93A7;
    padding:0.25rem 0.55rem; border-radius:999px;
    border:1px solid rgba(120,140,255,0.18);
    background:rgba(120,140,255,0.06);
    white-space:nowrap;
  }
  .testi-project{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:600;
    font-size:0.82rem; color:#F5F7FF; line-height:1.35;
  }

  /* Portfolio card overlays */
  .media-badge{
    position:absolute; top:1rem; left:1rem; z-index:2;
    padding:0.3rem 0.75rem; border-radius:999px;
    font-family:'JetBrains Mono',monospace; font-size:0.65rem; letter-spacing:0.08em; text-transform:uppercase;
    color:#F5F7FF;
    background: rgba(18,18,26,0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,0.12);
  }
  .media-duration{
    position:absolute; bottom:1rem; right:1rem; z-index:2;
    padding:0.25rem 0.6rem; border-radius:0.4rem;
    font-family:'JetBrains Mono',monospace; font-size:0.7rem;
    color:#F5F7FF;
    background: rgba(8,8,12,0.65);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .play-center{
    position:absolute; top:50%; left:50%; z-index:2;
    width:60px; height:60px; border-radius:999px;
    background: rgba(18,18,26,0.45);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border:1px solid rgba(255,255,255,0.16);
    display:flex; align-items:center; justify-content:center;
    transform: translate(-50%,-50%);
    transition: transform 0.4s cubic-bezier(.16,1,.3,1), background 0.4s ease, box-shadow 0.4s ease;
  }
  .play-center svg{ margin-left: 3px; }
  .thumb:hover .play-center{
    transform: translate(-50%,-50%) scale(1.12);
    background: rgba(18,18,26,0.8);
    box-shadow: 0 0 40px -6px rgba(123,92,255,0.65);
  }

  /* Magnetic buttons / tilt cards (transform applied via inline style from JS) */
  .btn-primary, .btn-ghost, .social-btn{ transition: transform 0.25s cubic-bezier(.16,1,.3,1), box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease; }
  .tilt-card{ transition: transform 0.25s cubic-bezier(.16,1,.3,1), border-color 0.45s ease, box-shadow 0.45s ease; }

  /* =====================================================
     PHASE 2 — CONVERSION FEATURES
  ===================================================== */

  @media (min-width:640px){ .sm\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
  @media (min-width:768px){
    .md\:grid-cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
    .md\:grid-cols-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
    .md\:grid-cols-6{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  }
  @media (min-width:1024px){ .lg\:grid-cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

  /* small conversion micro-copy pill */
  .section-badge{
    display:inline-flex; align-items:center; gap:0.5rem;
    padding:0.4rem 0.9rem; border-radius:999px;
    background: rgba(123,92,255,0.08);
    border:1px solid rgba(123,92,255,0.25);
    font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.05em;
    color:#8EA7FF;
  }
  .section-badge .dot{ width:6px; height:6px; border-radius:999px; background:#8EA7FF; box-shadow:0 0 8px #8EA7FF; animation: tw-pulse 2s ease-in-out infinite; }

  /* feature / why-choose cards reuse glow-card, add icon tile */
  .feature-icon{
    width:2.75rem; height:2.75rem; border-radius:0.85rem;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, rgba(77,124,255,0.2), rgba(123,92,255,0.12));
    border:1px solid rgba(255,255,255,0.08);
  }

  /* workflow timeline */
  .workflow-track{ position:relative; }
  .workflow-track::before{
    content:""; position:absolute; left:1.5rem; top:1.5rem; bottom:1.5rem; width:2px;
    background: linear-gradient(180deg, rgba(77,124,255,0.6), rgba(123,92,255,0.15));
  }
  .workflow-step{ position:relative; display:flex; gap:1.5rem; padding-bottom:2.75rem; }
  .workflow-step:last-child{ padding-bottom:0; }
  .workflow-num{
    position:relative; z-index:1; flex-shrink:0;
    width:3rem; height:3rem; border-radius:999px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Bricolage Grotesque',sans-serif; font-weight:600;
    background: linear-gradient(135deg, rgba(77,124,255,0.3), rgba(123,92,255,0.18));
    border:1px solid rgba(77,124,255,0.45);
    color:#F5F7FF;
    box-shadow: 0 0 24px -6px rgba(77,124,255,0.55);
  }

  /* before / after comparison */
  .ba-wrap{ position:relative; aspect-ratio:16/9; overflow:hidden; }
  .ba-layer{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:1.25rem; }
  .ba-after{ background: linear-gradient(135deg, #101a3a, #0f1024, #070912); }
  .ba-before{ background: linear-gradient(135deg, #101a3a, #0f1024, #070912); clip-path: inset(0 50% 0 0); }
  .ba-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; z-index:3; }
  .ba-handle{ position:absolute; top:0; bottom:0; left:50%; width:2px; background: rgba(255,255,255,0.6); transform: translateX(-50%); pointer-events:none; z-index:2; box-shadow: 0 0 20px rgba(123,92,255,0.6); }
  .ba-handle-dot{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:999px; background: rgba(18,18,26,0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; color:#8EA7FF; }

  /* FAQ accordion */
  .faq-item{
    border:1px solid rgba(255,255,255,0.08); border-radius:1rem;
    background: rgba(18,18,26,0.5);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    overflow:hidden; transition: border-color 0.35s ease;
  }
  .faq-item:hover{ border-color: rgba(77,124,255,0.35); }
  .faq-question{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:1.25rem 1.5rem; text-align:left;
    font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:1rem; color:#F5F7FF;
  }
  .faq-icon{
    flex-shrink:0; width:1.75rem; height:1.75rem; border-radius:999px;
    border:1px solid rgba(255,255,255,0.15);
    display:flex; align-items:center; justify-content:center;
    transition: transform 0.35s cubic-bezier(.16,1,.3,1), background 0.35s ease;
  }
  .faq-item.open .faq-icon{ transform: rotate(135deg); background: rgba(77,124,255,0.25); }
  .faq-answer-wrap{ display:grid; grid-template-rows:0fr; transition: grid-template-rows 0.45s cubic-bezier(.16,1,.3,1); }
  .faq-item.open .faq-answer-wrap{ grid-template-rows:1fr; }
  .faq-answer-inner{ overflow:hidden; }
  .faq-answer-inner p{ padding:0 1.5rem 1.25rem; color:#8B93A7; font-size:0.9rem; line-height:1.6; }

  /* trust badges */
  .trust-badge{
    display:flex; align-items:center; gap:0.6rem;
    padding:0.9rem 1rem; border-radius:0.9rem;
    background: rgba(18,18,26,0.5); border:1px solid rgba(255,255,255,0.07);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    font-size:0.85rem; color:#F5F7FF;
    transition: border-color 0.35s ease, transform 0.35s cubic-bezier(.16,1,.3,1);
  }
  .trust-badge:hover{ border-color: rgba(123,92,255,0.4); transform: translateY(-3px); }
  .trust-check{ flex-shrink:0; width:1.5rem; height:1.5rem; border-radius:999px; background: rgba(142,167,255,0.15); color:#8EA7FF; display:flex; align-items:center; justify-content:center; }

  /* =====================================================
     PHASE 2 PART 2 — PREMIUM ENHANCEMENTS
  ===================================================== */

  /* ---------- Skip link (a11y) ---------- */
  .skip-link{
    position:fixed; top:-3rem; left:1rem; z-index:100;
    background:#F5F7FF; color:#030305; font-weight:600;
    padding:0.75rem 1.25rem; border-radius:0.6rem; font-size:0.85rem;
    transition: top 0.25s ease;
  }
  .skip-link:focus{ top:1rem; }

  /* ---------- Preloader ---------- */
  #preloader{
    position:fixed; inset:0; z-index:200;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem;
    background: #030305;
    transition: opacity 0.6s cubic-bezier(.16,1,.3,1), visibility 0.6s;
  }
  #preloader::before{
    content:""; position:absolute; inset:0;
    background: radial-gradient(circle at 50% 40%, rgba(77,124,255,0.25), transparent 60%);
    filter: blur(60px);
  }
  #preloader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  .preloader-logo{
    position:relative; z-index:1;
    font-family:'Bricolage Grotesque', sans-serif; font-weight:600; font-size:1.5rem;
    letter-spacing:0.02em; color:#F5F7FF;
    display:flex; align-items:center; gap:0.6rem;
  }
  .preloader-logo .dot{
    width:10px; height:10px; border-radius:999px;
    background: linear-gradient(135deg,#4D7CFF,#7B5CFF);
    box-shadow: 0 0 24px rgba(77,124,255,0.8);
    animation: dotGlow 1.6s ease-in-out infinite;
  }
  @keyframes dotGlow{ 0%,100%{ opacity:0.6; transform:scale(0.85); } 50%{ opacity:1; transform:scale(1.15); } }
  .preloader-bar-track{
    position:relative; z-index:1;
    width:180px; height:2px; border-radius:999px;
    background: rgba(255,255,255,0.08); overflow:hidden;
  }
  .preloader-bar-fill{
    height:100%; width:0%; border-radius:999px;
    background: linear-gradient(90deg,#4D7CFF,#7B5CFF);
    box-shadow: 0 0 12px rgba(123,92,255,0.7);
    transition: width 0.2s ease-out;
  }
  .preloader-pct{
    position:relative; z-index:1;
    font-family:'JetBrains Mono', monospace; font-size:0.7rem; letter-spacing:0.15em;
    color:#8B93A7;
  }
  @media (prefers-reduced-motion: reduce){
    #preloader{ transition:none; }
    .preloader-logo .dot{ animation:none; }
  }

  /* ---------- Subtle premium cursor (replaces large glow follower) ---------- */
  .cursor-dot{
    position: fixed; top:0; left:0;
    width: 8px; height: 8px; border-radius:999px;
    background:#F5F7FF;
    pointer-events:none; z-index:60;
    transform: translate(-50%,-50%);
    opacity:0; transition: opacity 0.3s ease, width 0.25s cubic-bezier(.16,1,.3,1), height 0.25s cubic-bezier(.16,1,.3,1), background 0.25s ease;
    will-change: transform;
    mix-blend-mode: difference;
  }
  .cursor-dot.active{ opacity:1; }
  .cursor-dot.grow{
    width: 38px; height: 38px;
    background: rgba(237,237,244,0.35);
    box-shadow: 0 0 20px rgba(77,124,255,0.5);
  }
  @media (hover:none), (pointer:coarse){ .cursor-dot{ display:none; } }

  /* Tiny click ripple (JS-triggered, positioned at click point) */
  .click-ripple{
    position: fixed; z-index:59; pointer-events:none;
    width: 10px; height:10px; border-radius:999px;
    border: 1.5px solid rgba(123,92,255,0.7);
    transform: translate(-50%,-50%) scale(0.4);
    opacity: 0.9;
    animation: rippleOut 0.55s cubic-bezier(.16,1,.3,1) forwards;
  }
  @keyframes rippleOut{
    to{ transform: translate(-50%,-50%) scale(3.2); opacity:0; }
  }

  /* ---------- Floating action buttons ---------- */
  .fab-stack{
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index:50;
    display:flex; flex-direction:column; align-items:center; gap:0.75rem;
  }
  .fab{
    width:52px; height:52px; border-radius:999px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,0.1);
    background: rgba(18,18,26,0.75);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 12px 30px -10px rgba(0,0,0,0.6);
    transition: transform 0.3s cubic-bezier(.16,1,.3,1), box-shadow 0.3s ease, border-color 0.3s ease, opacity 0.35s ease, visibility 0.35s;
  }
  .fab:hover{ transform: translateY(-4px) scale(1.06); border-color: rgba(123,92,255,0.5); box-shadow: 0 16px 40px -10px rgba(123,92,255,0.45); }
  .fab-whatsapp{ background: linear-gradient(135deg, rgba(37,211,102,0.22), rgba(18,18,26,0.85)); border-color: rgba(37,211,102,0.4); }
  .fab-whatsapp:hover{ border-color: rgba(37,211,102,0.7); box-shadow: 0 16px 40px -10px rgba(37,211,102,0.5); }
  .fab-top{
    opacity:0; visibility:hidden; transform: translateY(12px) scale(0.9);
  }
  .fab-top.show{ opacity:1; visibility:visible; transform: translateY(0) scale(1); }

  /* ---------- Live counters ---------- */
  .counter-card{
    text-align:center; padding: 1.75rem 1rem; border-radius:1.25rem;
    background: rgba(18,18,26,0.5); border:1px solid rgba(255,255,255,0.07);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    transition: border-color 0.4s ease, transform 0.4s cubic-bezier(.16,1,.3,1);
  }
  .counter-card:hover{ border-color: rgba(77,124,255,0.4); transform: translateY(-4px); }
  .counter-value{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:600;
    font-size: clamp(2rem, 4vw, 2.75rem);
    background: linear-gradient(135deg, #F5F7FF, #8EA7FF);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .counter-label{ font-family:'JetBrains Mono', monospace; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:#8B93A7; margin-top:0.5rem; }

  /* ---------- Trust & social proof badges (new dedicated section) ---------- */
  .proof-badge{
    display:flex; flex-direction:column; gap:0.35rem;
    padding: 1.25rem 1.4rem; border-radius:1.1rem;
    background: rgba(18,18,26,0.5); border:1px solid rgba(255,255,255,0.07);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    transition: border-color 0.4s ease, transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s ease;
  }
  .proof-badge:hover{ border-color: rgba(123,92,255,0.4); transform: translateY(-4px); box-shadow: 0 20px 45px -20px rgba(123,92,255,0.3); }
  .proof-badge .proof-title{ font-family:'Bricolage Grotesque', sans-serif; font-weight:600; font-size:0.95rem; color:#F5F7FF; display:flex; align-items:center; gap:0.5rem; }
  .proof-badge .proof-sub{ font-size:0.8rem; color:#8B93A7; }
  .proof-live-dot{ width:7px; height:7px; border-radius:999px; background:#8EA7FF; box-shadow:0 0 10px #8EA7FF; animation: tw-pulse 2s ease-in-out infinite; flex-shrink:0; }

  /* ---------- Technology / software section ---------- */
  .tech-tile{
    display:flex; flex-direction:column; align-items:center; gap:0.75rem; text-align:center;
    padding: 1.5rem 1rem; border-radius:1.1rem;
    background: rgba(18,18,26,0.5); border:1px solid rgba(255,255,255,0.07);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    transition: transform 0.4s cubic-bezier(.16,1,.3,1), border-color 0.4s ease, box-shadow 0.4s ease;
  }
  .tech-tile:hover{ transform: translateY(-6px); border-color: rgba(77,124,255,0.45); box-shadow: 0 20px 45px -18px rgba(77,124,255,0.35); }
  .tech-icon{
    width:3rem; height:3rem; border-radius:0.9rem;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, rgba(77,124,255,0.22), rgba(123,92,255,0.14));
    border:1px solid rgba(255,255,255,0.1);
    transition: transform 0.4s cubic-bezier(.16,1,.3,1);
  }
  .tech-tile:hover .tech-icon{ transform: scale(1.1) rotate(-4deg); }
  .tech-name{ font-family:'Inter', sans-serif; font-weight:600; font-size:0.85rem; color:#F5F7FF; }
  .tech-proficiency{ font-family:'JetBrains Mono', monospace; font-size:0.65rem; letter-spacing:0.06em; text-transform:uppercase; color:#8EA7FF; }

  /* ---------- Client experience / post-contact timeline ---------- */
  .journey-track{ position:relative; padding-left:1.5rem; }
  .journey-track::before{
    content:""; position:absolute; left:0; top:0.6rem; bottom:0.6rem; width:2px;
    background: linear-gradient(180deg, rgba(123,92,255,0.7), rgba(77,124,255,0.15));
  }
  .journey-step{ position:relative; padding-left:2rem; padding-bottom:2.25rem; }
  .journey-step:last-child{ padding-bottom:0; }
  .journey-step::before{
    content:""; position:absolute; left:-0.5rem; top:0.15rem;
    width:14px; height:14px; border-radius:999px;
    background: linear-gradient(135deg,#4D7CFF,#7B5CFF);
    box-shadow: 0 0 0 4px #030305, 0 0 16px rgba(123,92,255,0.6);
  }
  .journey-step h3{ font-family:'Bricolage Grotesque', sans-serif; font-weight:600; font-size:1.05rem; }
  .journey-step p{ font-size:0.85rem; color:#8B93A7; margin-top:0.35rem; line-height:1.6; }

  /* ---------- Micro interactions: nav underline ---------- */
  .nav-link{ position:relative; padding-bottom:2px; }

  /* Navbar: slow-moving gradient sheen traveling around the pill border */
  .site-nav-bar{ position: relative; overflow: hidden; }
  .site-nav-bar::before{
    content: '';
    position: absolute; inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(90deg,
      transparent 0%, rgba(77,124,255,0.65) 22%, rgba(123,92,255,0.65) 40%, transparent 62%);
    background-size: 220% 100%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: navBorderSheen 7s linear infinite;
    pointer-events: none;
    z-index: 0;
  }
  @keyframes navBorderSheen{
    0%{ background-position: 0% 50%; }
    100%{ background-position: 220% 50%; }
  }
  @media (prefers-reduced-motion: reduce){
    .site-nav-bar::before{ animation: none; }
  }

  /* Logo mark: gentle continuous pulse */
  .brand-dot{ animation: brandDotPulse 2.6s ease-in-out infinite; }
  @keyframes brandDotPulse{
    0%, 100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(77,124,255,0.45); }
    50%{ transform: scale(1.2); box-shadow: 0 0 10px 3px rgba(123,92,255,0.4); }
  }
  @media (prefers-reduced-motion: reduce){
    .brand-dot{ animation: none; }
  }
  .nav-link::after{
    content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
    background: linear-gradient(90deg,#4D7CFF,#7B5CFF);
    transition: width 0.3s cubic-bezier(.16,1,.3,1);
  }
  .nav-link:hover::after{ width:100%; }

  /* Mobile nav */
  .mobile-nav-toggle{ display:flex; }
  @media (min-width:768px){ .mobile-nav-toggle{ display:none; } }
  .mobile-nav-panel{
    position:absolute; top:calc(100% + 0.5rem); left:0; right:0;
    background: rgba(12,12,18,0.96); border:1px solid rgba(255,255,255,0.08);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-radius:1rem; padding:0.5rem;
    display:flex; flex-direction:column; gap:0.25rem;
    opacity:0; visibility:hidden; transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.16,1,.3,1), visibility 0.3s;
  }
  .mobile-nav-panel.open{ opacity:1; visibility:visible; transform: translateY(0); }
  .mobile-nav-panel a{ padding:0.85rem 1rem; border-radius:0.6rem; font-size:0.9rem; color:#F5F7FF; transition: background 0.25s ease; }
  .mobile-nav-panel a:hover{ background: rgba(77,124,255,0.12); }
  .mobile-nav-panel button{
    padding:0.85rem 1rem; border-radius:0.6rem; font-size:0.9rem; color:#F5F7FF;
    text-align:left; background:none; border:0; font-family:'Inter', sans-serif; cursor:pointer;
    transition: background 0.25s ease;
  }
  .mobile-nav-panel button:hover{ background: rgba(77,124,255,0.12); }

  /* ---------- Button loading state (never freezes) ---------- */
  .btn-loading{ pointer-events:none; opacity:0.75; position:relative; }
  .btn-loading .btn-label{ visibility:hidden; }
  .btn-loading .btn-spinner{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  }
  .btn-spinner-ring{
    width:18px; height:18px; border-radius:999px;
    border: 2px solid rgba(255,255,255,0.35); border-top-color:#fff;
    animation: spin 0.7s linear infinite;
  }
  @keyframes spin{ to{ transform: rotate(360deg); } }

  /* ---------- Form error state ---------- */
  .contact-input.field-error, .contact-select.field-error, .contact-textarea.field-error{
    border-color: rgba(239,68,68,0.7);
    box-shadow: 0 0 0 3px rgba(239,68,68,0.15);
    animation: fieldShake 0.4s ease;
  }
  @keyframes fieldShake{
    0%,100%{ transform: translateX(0); }
    25%{ transform: translateX(-4px); }
    75%{ transform: translateX(4px); }
  }
  .form-error{
    display:none; align-items:center; gap:0.6rem;
    color:#F87171; font-family:'JetBrains Mono', monospace; font-size:0.8rem;
    margin-top:0.75rem;
  }
  .form-error.show{ display:flex; }

  @media (prefers-reduced-motion: reduce){
    .fab{ transition:none; }
    .counter-card, .proof-badge, .tech-tile{ transition:none; }
    .click-ripple, .btn-spinner-ring, .field-error{ animation:none; }
  }

  /* Mobile touch sizing */
  @media (max-width: 640px){
    .fab{ width:48px; height:48px; }
    .fab-stack{ right:1rem; bottom:1rem; gap:0.6rem; }
  }

  /* ===================================================================
     MOBILE PERFORMANCE LAYER
     Desktop is completely untouched — everything below is inside a
     max-width media query. The goal is to keep the exact same visual
     design while removing the three things that stall iOS Safari and
     stutter mid-range Android:
       a) blur(120px) on 14 separate mesh-glow blobs
       b) 43 backdrop-filter surfaces compositing on every scroll frame
       c) the ProfileCard holo layer, which rasterises 500%–700% sized
          gradients through blend modes
     Colours/opacities are re-tuned so the result looks the same, not dimmer.
     =================================================================== */
  @media (max-width: 900px){

    /* (a) Huge blur radii are the single biggest cost on mobile GPUs.
       Cut the radius hard and lift opacity so the glow reads identically. */
    .mesh-glow{
      filter: blur(72px);
      opacity: 0.20;
    }
    .mesh-glow-float{ animation: none; }

    /* Hero blobs were the brightest — hold them right back, the page-wide
       gradient already carries the colour there. */
    #top .mesh-glow{ opacity: 0.13; }

    /* Phones specifically (not just tablets) are the actual Android GPU-lag
       target — blur is one of the priciest filters to composite, so cut it
       again here on top of the 900px tier above. Opacity compensates so the
       glow still reads at the same visual weight, just cheaper to paint. */
    @media (max-width: 480px){
      .mesh-glow{
        filter: blur(46px);
        opacity: 0.26;
      }
      #top .mesh-glow{ opacity: 0.17; }
    }

    /* WebGL off on phones; the CSS gradient covers the whole page anyway. */
    #beamsCanvas{ display: none !important; }

    /* (b) backdrop-filter forces a readback of everything painted behind it.
       On a dark page a solid tint is visually indistinguishable. */
    header .relative.flex,
    .mobile-nav-panel,
    .grid-card,
    .btn-ghost,
    .thumb-overlay,
    .glow-card,
    .counter-card,
    .tech-tile,
    .trust-badge,
    .proof-badge,
    .faq-item,
    .backdrop-blur-xl,
    .media-badge,
    .media-duration,
    .play-center,
    .ba-handle-dot,
    .pc-user-info,
    .pc-contact-btn,
    .vid-modal,
    .vid-close,
    .fab{
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }
    /* solid tints so the glass panels read exactly as before on a dark page */
    header .relative.flex{ background-color: rgba(6, 9, 20, 0.94) !important; }
    .mobile-nav-panel{ background-color: rgba(4, 6, 14, 0.98) !important; }
    .media-badge{ background-color: rgba(18, 18, 26, 0.88); }
    .media-duration{ background-color: rgba(8, 8, 12, 0.9); }
    .play-center{ background-color: rgba(18, 18, 26, 0.82); }
    .pc-user-info{ background-color: rgba(16, 20, 38, 0.92); }
    .vid-modal{ background-color: rgba(4, 5, 10, 0.95); }
    .vid-close{ background-color: rgba(18, 18, 26, 0.9); }

    /* (c) ProfileCard holo: tilt, glow, layout and text all stay.
       Only the oversized gradient raster + blend stack is dropped —
       it needs a hover pointer to be visible anyway. */
    .pc-shine{ display: none; }
    .pc-glare{
      background-image: radial-gradient(farthest-corner circle at 50% 40%,
        rgba(123,92,255,0.22) 0%, rgba(8,10,24,0.75) 80%);
      mix-blend-mode: normal;
      filter: none;
    }
    .pc-behind{ filter: blur(30px); }

    /* Misc: shadows and reflections that repaint on scroll */
    .hero-frame{ box-shadow: 0 30px 70px -30px rgba(0,0,0,0.9); }
    .glow-card::before{ display: none; }
  }


  /* ===================================================================
     MOBILE LAYOUT COMPACTION  (phones only, <= 767px)
     Pure CSS — no markup changes, nothing removed, desktop untouched.
     Two things make the phone version feel endless:
       1. Desktop section rhythm (7rem top + 7rem bottom x 13 sections)
       2. Multi-column grids collapsing to one very tall column
     Fixed by tightening vertical rhythm and turning the two tallest
     grids into swipeable carousels.
     =================================================================== */
  @media (max-width: 767px){

    /* --- 1. Vertical rhythm. section[id] outranks the .py-28 utility, so
           no !important is needed and desktop values stay intact. --- */
    section[id]{ padding-top: 3.25rem; padding-bottom: 3.25rem; }
    section#top{ padding-top: 7.5rem; padding-bottom: 2.75rem; }
    section#stats{ padding-top: 2.5rem; padding-bottom: 2.5rem; }

    /* Section headers carry a 4rem gap on desktop — cut it hard on phones */
    section[id] .mb-16{ margin-bottom: 1.75rem; }
    section[id] .mb-14{ margin-bottom: 1.6rem; }
    section[id] .mt-20{ margin-top: 2.25rem; }
    section[id] .mt-10{ margin-top: 1.75rem; }

    /* Decorative blobs are absolute, but an oversized one still reads as a
       big empty coloured panel. Keep them small enough to sit behind content
       rather than becoming the content. */
    .mesh-glow{
      max-height: 34vh !important;
      max-width: 90vw !important;
    }

    /* --- 2. Swipeable carousels -------------------------------------
       Cards keep their exact styling; only the container becomes a
       horizontal snap scroller. 84% width leaves the next card peeking,
       which is the affordance that tells people it swipes. --- */
    #reviews .grid[class*="grid-cols"]{
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: visible;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      gap: 0.9rem;
      /* bleed past the section's px-6 so cards can reach the screen edge */
      margin-left: -1.5rem;
      margin-right: -1.5rem;
      padding: 0.25rem 1.5rem 1.25rem;
    }
    #reviews .grid[class*="grid-cols"]::-webkit-scrollbar{ display: none; }

    /* Core Roster: only 2 people — show them side by side, no swipe needed */
    #team .grid[class*="grid-cols"]{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.6rem;
      max-width: 100%;
    }
    #team .reveal.flex.justify-center{ min-width: 0; } /* let grid cell shrink below content's natural width */
    #team .pc-card-wrapper{ max-width: none; }
    #team .pc-card{
      height: auto;
      aspect-ratio: 0.718;
      max-height: none;
    }
    /* Two narrow columns leave too little room for the name/handle/button
       row to sit inline — tighten text and stack it instead of squeezing. */
    #team .pc-name-block h3{ font-size: clamp(0.92rem, 4.4vw, 1.15rem); }
    #team .pc-name-block p{ font-size: 9px; letter-spacing: 0.05em; }
    #team .pc-fallback{ font-size: 3.2rem; }
    #team .pc-user-info{
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      padding: 8px;
    }
    #team .pc-user-details{ min-width: 0; }
    #team .pc-user-text{ min-width: 0; flex: 1; }
    #team .pc-handle{
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
      font-size: 11px;
    }
    #team .pc-mini-avatar{ width: 28px; height: 28px; font-size: 0.68rem; }
    #team .pc-contact-btn{ width: 100%; text-align: center; padding: 9px 8px; }


    #reviews .grid[class*="grid-cols"] > *{
      flex: 0 0 84%;
      max-width: 84%;
      scroll-snap-align: center;
    }

    /* Reveal animation staggers each card; inside a scroller the ones
       off-screen would never trigger, so show them all together. */
    #reviews .reveal, #team .reveal{
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
    }

    /* Cards in a row look better with a shared height */
    #reviews .grid[class*="grid-cols"] > *{ height: auto; }

    /* --- 3. Smaller savings that add up --- */
    .ls-block{ gap: 1.75rem; }
    .ls-pane{ min-height: 0; }
    #work .mb-16{ margin-bottom: 2rem; }
    #free-sample, #start-project{ padding-top: 3.5rem; padding-bottom: 3.5rem; }
    .counter-card{ padding-top: 1.1rem; padding-bottom: 1.1rem; }

    /* --- 4. "No Risk, No Cost" / "Usually Replies Within 1 Hour" offer cards ---
       Same content, ~70% of the current visual scale on phone. --- */
    #free-sample .glow-card,
    #discovery .glow-card{
      padding: 1.5rem 1.25rem;
    }
    #free-sample h2, #discovery h2{
      font-size: clamp(1.5rem, 6.5vw, 1.9rem);
      margin-top: 0.6rem;
    }
    #free-sample p, #discovery > .relative p{
      font-size: 0.85rem;
      margin-top: 0.6rem;
    }
    #free-sample .offer-price-row, #discovery .offer-price-row{ margin-top: 1rem; }
    #free-sample .btn-primary,
    #discovery .btn-primary, #discovery .btn-ghost{
      padding: 0.8rem 1.4rem;
      font-size: 0.8rem;
      margin-top: 1.25rem;
    }
    #discovery .rounded-xl{ padding: 1rem; margin-top: 1.25rem; }
    #discovery .mt-8{ margin-top: 1.25rem; }

    /* --- 5. "Client Reviews" — same cards, tighter frame --- */
    #reviews h2{ font-size: clamp(1.7rem, 7.5vw, 2.1rem); }
    #reviews .star-rating{ margin-top: 0.4rem; }
    #reviews p.text-mute{ font-size: 0.8rem; }
    #reviews .glow-card{ padding: 1.25rem; }

    /* --- 6. "Get In Touch" contact section --- */
    #contact h2{ font-size: clamp(1.7rem, 7.5vw, 2.1rem); }
    #contact .mb-14{ margin-bottom: 1.75rem; }
    #contact form.glow-card, #contact .lg\:col-span-2 .glow-card{ padding: 1.25rem; }
    #contact .contact-field + .contact-field, #contact .grid.gap-5{ gap: 1rem; }
  }

  /* ===================================================================
     MOBILE: no blank bands, no sideways scroll
     Measured with a headless phone viewport (390x844):
       - scroll-reveal fades in over 0.9s. Scrolling a phone with a thumb
         outruns that, so whole sections read as empty space until they
         catch up. On desktop the same animation is fine because scrolling
         is slower and the viewport is taller.
       - decorative .mesh-glow blobs are 600-700px wide; in sections
         without overflow-hidden they pushed the document to 445px at a
         390px viewport, giving a sideways scroll.
     =================================================================== */
  @media (max-width: 767px){
    /* Content is visible immediately — nothing can ever read as a blank gap */
    .reveal,
    .reveal-delay-1, .reveal-delay-2, .reveal-delay-3,
    .reveal-delay-4, .reveal-delay-5, .reveal-delay-6{
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
      transition: none !important;
    }

    /* Decorative blobs: out of flow, and never wider than the screen */
    .mesh-glow{
      position: absolute !important;
      max-width: 100vw;
      max-height: 55vh;
    }

    /* Nothing decorative may extend the document horizontally */
    section[id]{ overflow-x: clip; }
    html, body{ max-width: 100%; overflow-x: hidden; }
  }

  /* ---------- Developer signature pill ---------- */
  .dev-credit-wrap{
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
  }
  .dev-credit-pill{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: rgba(8, 12, 25, 0.6);
    border: 1px solid var(--line);
    box-shadow: 0 0 0 1px rgba(77,124,255,0.05) inset, 0 12px 30px -18px rgba(123,92,255,0.55);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transition: transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.35s ease, border-color 0.35s ease;
    animation: dev-credit-pulse 5s ease-in-out infinite;
  }
  .dev-credit-wrap:hover .dev-credit-pill{
    transform: translateY(-2px);
    border-color: rgba(142,167,255,0.4);
    box-shadow: 0 0 0 1px rgba(77,124,255,0.08) inset, 0 18px 40px -18px rgba(123,92,255,0.75);
  }
  .dev-credit-dot{
    width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--indigo), var(--violet));
    box-shadow: 0 0 10px rgba(123,92,255,0.7);
  }
  .dev-credit-pill a{
    color: var(--bright);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.25s ease;
  }
  .dev-credit-pill a:hover{ color: #F5F7FF; }

  @keyframes dev-credit-pulse{
    0%, 100%{ box-shadow: 0 0 0 1px rgba(77,124,255,0.05) inset, 0 12px 30px -18px rgba(123,92,255,0.45); }
    50%{ box-shadow: 0 0 0 1px rgba(77,124,255,0.09) inset, 0 12px 34px -16px rgba(123,92,255,0.8); }
  }

  @media (max-width: 767px){
    .dev-credit-wrap{ margin-top: 1.75rem; }
    .dev-credit-pill{ padding: 0.55rem 0.9rem; font-size: 10px; gap: 0.4rem; }
  }

  @media (prefers-reduced-motion: reduce){
    .dev-credit-pill{ animation: none; }
  }