/* MIDNYTE v2 — shared design system.
   Tokens, the per-section background engine's styles, panels, tiles, type,
   controls, case rows, lead-form styling, the intro loader and reveals.
   Pair with assets/midnyte-v2.js. Link this BEFORE assets/midnyte-shell.css. */

    /* ================= RESET & TOKENS ================= */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    :root {
      --bg: #050505;
      --fg: #f5f5f5;
      --muted: rgba(245,245,245,0.6);
      --muted-2: rgba(245,245,245,0.4);
      --line: rgba(255,255,255,0.08);
      --accent: #643cff;
      --accent-lt: #9678ff;
      --accent-pale: #c3b0ff;
      --shell: clamp(22px, 6vw, 120px);
      --max: 1200px;
    }
    html { scroll-behavior: smooth; }
    [hidden] { display: none !important; }
    body {
      background: var(--bg); color: var(--fg);
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      font-size: 16px; line-height: 1.5; overflow-x: clip;
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    }
    a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
    img { max-width: 100%; height: auto; display: block; }
    p, li, dd, td, th, blockquote, figcaption, label, .lede { overflow-wrap: break-word; }
    /* emails and URLs are the usual culprits — break them rather than the layout */
    a[href^="mailto:"], a[href^="http"], code, pre, kbd, samp { overflow-wrap: anywhere; }
    pre { max-width: 100%; overflow-x: auto; }
    table { max-width: 100%; }
    ul, li { list-style: none; }
    .shell { max-width: var(--max); margin: 0 auto; position: relative; }

    /* ================= MOTION ================= */
    @keyframes driftA { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(90px,-60px) scale(1.18); } 66% { transform: translate(-50px,50px) scale(0.9); } }
    @keyframes driftB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-110px,70px) scale(1.25); } }
    @keyframes driftC { 0%,100% { transform: translate(0,0) scale(1.05); } 40% { transform: translate(70px,80px) scale(0.85); } 75% { transform: translate(-60px,-40px) scale(1.2); } }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes gridPan { to { background-position: 68px 68px, 68px 68px; } }
    @keyframes gridPanSm { to { background-position: 46px 46px, 46px 46px; } }
    @keyframes shimmer { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
    @keyframes shine { 0% { left: -130%; } 55%,100% { left: 130%; } }
    @keyframes marquee { to { transform: translateX(calc(-50% - var(--mq-half, 0px))); } }
    @keyframes pulse { 0%,100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.09); } }
    @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

    /* scroll reveal — transition-based so hover transforms stay free */
    .rv { opacity: 0; translate: 0 30px;
      transition: opacity 0.95s cubic-bezier(0.16,1,0.3,1), translate 0.95s cubic-bezier(0.16,1,0.3,1); }
    .rv.in { opacity: 1; translate: 0 0; }
    .d1 { transition-delay: 0.10s; } .d2 { transition-delay: 0.22s; } .d3 { transition-delay: 0.34s; }
    .d4 { transition-delay: 0.46s; } .d5 { transition-delay: 0.58s; }

    /* ================= ATMOSPHERE ================= */
    .noise { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.05;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
    .grid { position: absolute; inset: 0; pointer-events: none;
      background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
      background-size: 68px 68px, 68px 68px;
      -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 42%, #000 0%, transparent 78%);
      mask-image: radial-gradient(ellipse 72% 62% at 50% 42%, #000 0%, transparent 78%);
      animation: gridPan 26s linear infinite; }
    .orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(70px);
      -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,0.45) 34%, transparent 58%);
      mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,0.45) 34%, transparent 58%); }
    .orb-a { animation: driftA 26s ease-in-out infinite; }
    .orb-b { animation: driftB 32s ease-in-out infinite; }
    .orb-c { animation: driftC 38s ease-in-out infinite; }
    .halo { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px); opacity: 0.5;
      background: conic-gradient(from 0deg, rgba(100,60,255,0.42), rgba(0,180,220,0.24), rgba(220,50,120,0.22), rgba(100,60,255,0.42));
      -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 30%, #000 58%, transparent 82%);
      mask-image: radial-gradient(circle at 50% 50%, transparent 30%, #000 58%, transparent 82%);
      animation: spin 24s linear infinite; }
    .dot-pulse { animation: pulse 7s ease-in-out infinite; }
    .logo-mark { animation: float 6s ease-in-out infinite; }

    /* ================= SURFACES ================= */
    .glass { background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 55%, rgba(255,255,255,0.035) 100%);
      backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
      border: 1px solid rgba(255,255,255,0.09); position: relative; overflow: hidden;
      transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), border-color 0.5s, box-shadow 0.5s; }
    .glass::before { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); }
    .card:hover { transform: translateY(-6px); border-color: rgba(150,120,255,0.35); box-shadow: 0 24px 60px rgba(100,60,255,0.16); }
    .gcard { position: relative; padding: 1px; border-radius: 20px; height: 100%;
      background: linear-gradient(160deg, rgba(150,120,255,0.65) 0%, rgba(0,180,220,0.3) 38%, rgba(255,255,255,0.07) 72%, rgba(220,50,120,0.28) 100%); }
    .gcard-inner { border-radius: 19px; background: linear-gradient(160deg, #100e1a, #08080c);
      backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); position: relative; overflow: hidden; height: 100%; }
    .rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(150,120,255,0.45), rgba(255,255,255,0.12), transparent); }

    /* ================= TYPE ================= */
    .grad {
      background: linear-gradient(100deg, #ffffff 0%, #d8ccff 26%, #a98cff 44%, #ffffff 62%, #c3b0ff 82%, #ffffff 100%);
      background-size: 260% 100%; -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      animation: shimmer 11s linear infinite; }
    .dim { color: rgba(245,245,245,0.34); }
    .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(150,120,255,0.9); }
    h1 { font-size: clamp(28px, 6.4vw, 92px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.03; text-transform: uppercase; }
    h2 { font-size: clamp(28px, 3.6vw, 48px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.22; }
    h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.025em; }
    .lede { font-size: clamp(15px, 1.3vw, 18px); font-weight: 300; color: var(--muted); line-height: 1.75; }

    /* ================= CONTROLS ================= */
    .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      padding: 16px clamp(20px, 5vw, 34px); border-radius: 50px; font-size: 14px; font-weight: 600; letter-spacing: 0.03em;
      min-height: 52px; max-width: 100%; text-align: center; overflow-wrap: anywhere;
      transition: transform 0.4s cubic-bezier(0.25,0.1,0.25,1), box-shadow 0.4s, border-color 0.4s; }
    .btn::after { content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; transform: skewX(-18deg); pointer-events: none; }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(100,60,255,0.28); }
    /* Vertical, not 140deg: on a wide button a diagonal sweep travels mostly
       left-to-right, so one end reads white and the other lilac. Top-to-bottom
       looks the same at any width. */
    .btn-primary { background: linear-gradient(180deg, #ffffff, #e4ddff); color: #050505; border: 1px solid transparent; }
    /* The shine is a dark band crossing the button. On a narrow pill it reads as
       a highlight; on a full-width one it reads as a smudge, so keep it faint. */
    .btn-primary::after { background: linear-gradient(100deg, transparent, rgba(5,5,5,0.09), transparent); animation: shine 5.5s ease-in-out infinite; }
    /* a button stretched to the container is too wide for the sweep to read as
       anything but a defect — drop it there */
    .btn-primary.btn-block::after, .lead .btn-primary::after, .mn-cta::after { display: none; }
    .btn-ghost { color: var(--fg); border: 1px solid rgba(255,255,255,0.16); font-weight: 500; }
    .btn-ghost::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,0.16), transparent); animation: shine 6.5s ease-in-out infinite 1.2s; }

    /* ================= TOP BAR ================= */
    .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
      padding: 16px var(--shell); position: sticky; top: 0; z-index: 60;
      background: rgba(5,5,5,0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.06); }
    .brand { display: flex; align-items: center; flex-shrink: 0; min-height: 44px; }
    .brand img { height: 19px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.95;
      transition: opacity 0.3s; }
    .brand:hover img { opacity: 1; }
    .nav-cta { padding: 12px 22px; min-height: 44px; font-size: 13px; flex-shrink: 0; }
    .navpill { display: flex; align-items: center; border-radius: 50px; padding: 6px 8px; max-width: 100%;
      overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
    .navpill::-webkit-scrollbar { display: none; }
    .navpill a { display: inline-flex; align-items: center; min-height: 44px;
      padding: 10px 20px; border-radius: 40px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
      text-transform: uppercase; color: rgba(245,245,245,0.7); white-space: nowrap; transition: background 0.3s, color 0.3s; }
    .navpill a:hover { background: rgba(255,255,255,0.06); color: #fff; }
    .navpill a.active { background: rgba(255,255,255,0.12); color: #fff; }

    /* ================= HERO ================= */
    .hero { position: relative; min-height: min(840px, 92vh); display: flex; align-items: center; justify-content: center;
      overflow: hidden; padding: clamp(56px, 9vw, 90px) var(--shell) clamp(64px, 9vw, 100px); text-align: center; }
    .hero-inner { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; }
    .badge { display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px 9px 14px; border-radius: 50px; margin-bottom: clamp(22px, 3vw, 34px); }
    .badge span:last-child { font-size: clamp(11px, 1vw, 12px); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,245,245,0.75); }
    .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-lt); box-shadow: 0 0 14px 3px rgba(150,120,255,0.8); flex-shrink: 0; }
    .hero .lede { margin-top: clamp(22px, 2.4vw, 34px); max-width: 580px; }
    .cta-row { display: flex; align-items: center; gap: 16px; margin-top: clamp(30px, 3.2vw, 46px); flex-wrap: wrap; justify-content: center; }

    /* ================= MARQUEE ================= */
    .marquee-wrap { position: relative; padding: clamp(18px, 2vw, 26px) 0; border-top: 1px solid rgba(255,255,255,0.07);
      border-bottom: 1px solid rgba(255,255,255,0.07); overflow: hidden;
      background: linear-gradient(90deg, rgba(100,60,255,0.06), rgba(0,180,220,0.04), rgba(220,50,120,0.05));
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
    .marquee { display: flex; width: max-content; align-items: center; gap: clamp(26px, 3vw, 44px);
      --mq-half: clamp(13px, 1.5vw, 22px); animation: marquee 34s linear infinite; }
    .marquee b { font-size: clamp(19px, 2.1vw, 30px); font-weight: 600; letter-spacing: -0.02em; color: rgba(245,245,245,0.5); white-space: nowrap; }
    .marquee i { font-style: normal; font-size: clamp(13px, 1.3vw, 18px); }

    /* ================= CLIENT LOGO SLIDER ================= */
    .clients-sec { position: relative; padding: clamp(44px, 5vw, 70px) 0 0; }
    .clients-sec .eyebrow { text-align: center; color: rgba(245,245,245,0.35); letter-spacing: 0.3em; }
    .clients-wrap { margin-top: clamp(20px, 2.2vw, 28px); }
    .clients-track { gap: clamp(44px, 5vw, 88px); --mq-half: clamp(22px, 2.5vw, 44px); animation-duration: 46s; }
    .clients-wrap:hover .clients-track { animation-play-state: paused; }
    .client-logo { display: flex; align-items: center; flex-shrink: 0; }
    .client-logo img { width: auto; display: block; opacity: 0.45;
      filter: brightness(0) invert(1); transition: opacity 0.4s ease; }
    .client-logo:hover img { opacity: 0.95; }

    /* ================= SECTIONS ================= */
    section { position: relative; overflow: hidden; }
    .sec-pad { padding: clamp(72px, 8.5vw, 130px) var(--shell); }
    .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
    .card { border-radius: 20px; display: flex; flex-direction: column; }
    .work-card { padding: clamp(26px, 2.4vw, 34px) clamp(22px, 2vw, 30px); gap: 16px; min-height: 240px; }
    .work-card > * { position: relative; }
    .work-card .link { font-size: 13px; font-weight: 500; letter-spacing: 0.03em; color: rgba(245,245,245,0.8); }
    .work-card p { font-size: 15px; font-weight: 300; color: rgba(245,245,245,0.55); line-height: 1.7; flex-grow: 1; }
    .way { padding: clamp(30px, 2.9vw, 42px) clamp(24px, 2.4vw, 34px) clamp(28px, 2.4vw, 34px); gap: 20px; min-height: 440px; }
    .way > * { position: relative; }
    .quote { font-size: clamp(16px, 1.3vw, 17px); font-weight: 300; font-style: italic; color: rgba(245,245,245,0.5); line-height: 1.6; }
    .way p.body { font-size: 15px; font-weight: 300; color: var(--muted); line-height: 1.75; flex-grow: 1; }
    .terms { font-size: 13px; font-weight: 500; letter-spacing: 0.03em; color: rgba(150,120,255,0.95); }
    .way .btn { align-self: flex-start; padding: 14px 28px; min-height: 48px; }
    .ladder { margin-top: clamp(30px, 3.5vw, 52px); padding: clamp(22px, 2.4vw, 30px) clamp(24px, 3vw, 40px);
      border-radius: 50px; display: flex; align-items: center; justify-content: center; text-align: center; }
    .ladder span { position: relative; font-size: clamp(14px, 1.2vw, 16px); font-weight: 300; color: var(--muted); line-height: 1.65; }
    .ladder b { color: var(--fg); font-weight: 500; }

    /* ================= CAPABILITIES ================= */
    .cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(34px, 4vw, 56px); }
    .cap { border-radius: 20px; padding: clamp(26px, 2.4vw, 34px) clamp(22px, 2vw, 30px); display: flex; flex-direction: column; gap: 14px; }
    .cap > * { position: relative; }
    .cap-ico { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
      background: linear-gradient(150deg, rgba(150,120,255,0.22), rgba(255,255,255,0.04));
      border: 1px solid rgba(255,255,255,0.10); flex-shrink: 0; }
    .cap h3 { font-size: clamp(18px, 1.5vw, 20px); font-weight: 600; letter-spacing: -0.015em; }
    .cap p { font-size: 14.5px; font-weight: 300; color: rgba(245,245,245,0.55); line-height: 1.7; }

    /* ================= PROCESS ================= */
    .steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); margin-top: clamp(40px, 5vw, 68px); }
    .steps::before { content: ''; position: absolute; top: 26px; left: 4%; right: 4%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(150,120,255,0.5), rgba(255,255,255,0.14), rgba(150,120,255,0.5), transparent); }
    .step { position: relative; display: flex; flex-direction: column; gap: 14px; }
    .step-n { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: var(--accent-pale);
      background: #0a0a0f; border: 1px solid rgba(150,120,255,0.4); box-shadow: 0 0 0 6px #050505, 0 0 26px rgba(100,60,255,0.35); }
    .step h3 { font-size: clamp(19px, 1.7vw, 22px); font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; }
    .step .when { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(150,120,255,0.85); }
    .step p { font-size: 14.5px; font-weight: 300; color: rgba(245,245,245,0.55); line-height: 1.75; }

    /* ================= WHY ================= */
    .why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 4vw, 56px) clamp(30px, 5vw, 72px); margin-top: clamp(36px, 4.5vw, 60px); }
    .why-item { display: flex; flex-direction: column; gap: 14px; }
    .why-item h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; }
    .why-item p { font-size: clamp(14.5px, 1.2vw, 16px); font-weight: 300; color: var(--muted); line-height: 1.8; }

    @media (max-width: 1000px) {
      .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; }
      .steps::before { display: none; }
    }
    @media (max-width: 620px) {
      .cap-grid { grid-template-columns: 1fr; }
      .steps { grid-template-columns: 1fr; }
      .why-grid { grid-template-columns: 1fr; }
    }

    /* ================= CASE ROWS ================= */
    .cases { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 110px); margin-top: clamp(40px, 5vw, 72px); }
    .case { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
    .case > .case-media { order: 1; } .case > .case-copy { order: 2; }
    .case:nth-child(even) { grid-template-columns: 0.95fr 1.05fr; }
    .case:nth-child(even) > .case-media { order: 2; } .case:nth-child(even) > .case-copy { order: 1; }
    .case-media { position: relative; border-radius: 24px; padding: 1px;
      background: linear-gradient(160deg, rgba(150,120,255,0.5) 0%, rgba(255,255,255,0.07) 45%, rgba(220,50,120,0.22) 100%); }
    .case-glow { position: absolute; inset: 6% 10%; border-radius: 50%; filter: blur(60px); pointer-events: none;
      background: rgba(100,60,255,0.28); transition: opacity 0.6s; opacity: 0.7; }
    .frame { position: relative; border-radius: 23px; overflow: hidden; background: #0a0a0e; aspect-ratio: 4 / 3; }
    .frame img { width: 100%; height: 100%; object-fit: cover; display: block;
      transition: transform 1.2s cubic-bezier(0.16,1,0.3,1), opacity 0.7s ease; }
    .frame img.alt { position: absolute; inset: 0; opacity: 0; }
    .case:hover .frame img { transform: scale(1.05); }
    .case:hover .frame img.alt { opacity: 1; }
    .case:hover .case-glow { opacity: 1; }
    .case-copy { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px); }
    .case-num { font-size: 12px; font-weight: 600; letter-spacing: 0.28em; color: rgba(150,120,255,0.9); }
    .case-copy h2, .case-copy h3 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.03em; line-height: 1.14; }
    .case-copy p { font-size: clamp(15px, 1.25vw, 17px); font-weight: 300; color: var(--muted); line-height: 1.75; }
    .case-tags { font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,245,245,0.42); }
    .case-link { position: relative; display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; margin-top: 4px;
      font-size: 14px; font-weight: 500; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.22);
      transition: color 0.35s, border-color 0.35s; }
    /* the visible rule stays tight to the type; the touch area is grown behind it */
    .case-link::before { content: ''; position: absolute; left: -6px; right: -6px; top: 50%;
      height: 46px; transform: translateY(-50%); }
    .case-link:hover { color: var(--accent-pale); border-color: var(--accent-pale); }
    @media (max-width: 900px) {
      .case { grid-template-columns: 1fr; gap: 24px; }
      .case > .case-media, .case:nth-child(even) > .case-media { order: 1; }
      .case > .case-copy, .case:nth-child(even) > .case-copy { order: 2; }
      .frame { aspect-ratio: 16 / 10; }
    }

    /* ================= CTA ================= */
    .cta-card { padding: clamp(52px, 7vw, 100px) clamp(26px, 5vw, 60px); display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: 29px; }
    .cta-card > .inner { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
    .cta-card h2 { font-size: clamp(30px, 4.4vw, 58px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.14; }
    .fineprint { font-size: 13px; font-weight: 300; color: rgba(245,245,245,0.35); margin-top: 26px; letter-spacing: 0.03em; }

    /* ================= LEAD FORM ================= */
    .lead { display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: 760px; margin: 0 auto; text-align: left; }
    .lead-q { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(245,245,245,0.45); margin-bottom: 12px; display: block; }
    .track-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .track { position: relative; min-height: 44px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03);
      border-radius: 14px; padding: 18px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
      transition: background 0.35s, border-color 0.35s, box-shadow 0.35s, transform 0.35s; }
    .track:hover { border-color: rgba(150,120,255,0.42); transform: translateY(-2px); }
    .track input { position: absolute; opacity: 0; pointer-events: none; }
    .track .t { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
    .track .d { font-size: 12.5px; overflow-wrap: anywhere; font-weight: 300; color: rgba(245,245,245,0.5); line-height: 1.5; }
    .track.on { border-color: rgba(150,120,255,0.6);
      background: linear-gradient(150deg, rgba(150,120,255,0.18), rgba(255,255,255,0.04));
      box-shadow: 0 0 0 1px rgba(150,120,255,0.22), 0 12px 34px rgba(100,60,255,0.18); }
    .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .f label { font-size: 12px; overflow-wrap: anywhere; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(245,245,245,0.45); margin-bottom: 9px; display: block; }
    .f input, .f select, .f textarea { width: 100%; max-width: 100%; display: block;
      background: rgba(255,255,255,0.04); color: var(--fg);
      border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 14px 16px; min-height: 52px;
      font-family: inherit; font-size: 16px; font-weight: 300; color-scheme: dark;
      transition: border-color 0.3s, background 0.3s, box-shadow 0.3s; }
    .f textarea { min-height: 108px; resize: vertical; line-height: 1.65; }
    .f input::placeholder, .f textarea::placeholder { color: rgba(245,245,245,0.28); }
    .f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: rgba(150,120,255,0.65);
      background: rgba(255,255,255,0.06); box-shadow: 0 0 0 3px rgba(100,60,255,0.16); }
    .lead .btn { width: 100%; }
    .lead-alt { font-size: 13px; font-weight: 300; color: rgba(245,245,245,0.4); text-align: center; }
    .lead-alt a { border-bottom: 1px solid rgba(255,255,255,0.2); }
    .lead-alt a:hover { color: var(--accent-pale); border-color: var(--accent-pale); }
    .lead-done { display: none; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 30px 0; }
    .lead-done.on { display: flex; }
    /* the failure twin of .lead-done — same layout, warmer edge so it doesn't read as success */
    .lead-err h3 { color: #ffd9d9; }
    .lead-err { border: 1px solid rgba(255,140,140,0.28); border-radius: 16px;
      background: rgba(255,90,90,0.05); padding: 26px 22px; margin-top: 8px; }
    /* inline "that didn't send" line for the wizards */
    .wizard-send-error { margin-top: 16px; font-size: 14px; line-height: 1.6; color: #ffd9d9;
      border: 1px solid rgba(255,140,140,0.28); border-radius: 12px;
      background: rgba(255,90,90,0.06); padding: 12px 14px; }
    .wizard-send-error a { color: #ffd9d9; text-decoration: underline; text-underline-offset: 3px; }
    .lead-done .tick { width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
      border: 1px solid rgba(150,120,255,0.45); background: rgba(100,60,255,0.14); }
    .quote-link { position: relative; display: inline-block; font-size: 13.5px; font-weight: 500;
      color: rgba(195,176,255,0.9); align-self: flex-start;
      border-bottom: 1px solid rgba(195,176,255,0.3); padding-bottom: 2px; transition: color 0.3s, border-color 0.3s; }
    .quote-link::before { content: ''; position: absolute; left: -6px; right: -6px; top: 50%;
      height: 46px; transform: translateY(-50%); }
    .quote-link:hover { color: #fff; border-color: #fff; }
    @media (max-width: 760px) {
      .track-grid { grid-template-columns: 1fr; }
      .f-row { grid-template-columns: 1fr; }
    }

    /* ================= RANGE CONTROLS =================
       A 3-4px track is a 3-4px touch target. Keep the visible rail thin but give
       the control a full-height hit area. */
    input[type="range"] { height: 46px; background: transparent; touch-action: none; }
    input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.12); }
    input[type="range"]::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.12); }

    /* ================= FOOTER ================= */
    .legacy-footer { position: relative; padding: clamp(34px, 4vw, 46px) var(--shell) clamp(40px, 4vw, 56px); }
    .foot-rule { position: absolute; top: 0; left: var(--shell); right: var(--shell); }
    .foot { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
    .foot nav { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; font-size: 13px; font-weight: 500; color: rgba(245,245,245,0.55); }
    .foot nav a { display: inline-block; min-height: 44px; line-height: 44px; overflow-wrap: anywhere; }
    .foot nav a:hover { color: var(--accent-pale); }
    .copy { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 300; color: var(--muted-2); }

    /* ================= RESPONSIVE ================= */
    @media (max-width: 1000px) {
      .cards { grid-template-columns: 1fr; }
      .way, .work-card { min-height: 0; }
      .way .btn { align-self: stretch; }
      .ladder { border-radius: 20px; }
    }
    @media (max-width: 900px) {
      .topbar { flex-wrap: wrap; }
      .navpill { order: 3; width: 100%; justify-content: flex-start; }
      .grid { background-size: 46px 46px, 46px 46px; animation-name: gridPanSm; animation-duration: 18s; }
    }
    @media (max-width: 400px) {
      :root { --shell: 16px; }
      .btn { padding-left: 18px; padding-right: 18px; }
      .ladder { padding-left: 18px; padding-right: 18px; }
    }
    @media (max-width: 620px) {
      .cta-row { flex-direction: column; align-items: stretch; width: 100%; }
      .cta-row .btn { width: 100%; }
      .hero .eyebrow { letter-spacing: 0.18em; }
      .foot { flex-direction: column; align-items: flex-start; gap: 10px; }
      .foot nav { gap: 16px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .rv { opacity: 1 !important; translate: none !important; transition: none !important; }
      .orb, .grid, .halo, .marquee, .dot-pulse, .logo-mark, .grad, .btn::after { animation: none !important; }
      .grad { background-position: 0 0; }
      .case-link, .quote-link { transition: none !important; }
      html { scroll-behavior: auto; }
    }
  
    /* ================================================================
       PANEL LANGUAGE — glass panels floating over defocused bloom
       ================================================================ */
    @keyframes bloomDrift {
      0%,100% { transform:translate(-50%,-50%) scale(1) rotate(0deg); }
      50%     { transform:translate(-48%,-52%) scale(1.12) rotate(8deg); }
    }
    /* a defocused ring of light — the out-of-focus object, not a sharp one */
    .bloom { position:absolute; left:50%; top:50%; pointer-events:none;
      width:min(1080px,118vw); height:min(760px,80vw);
      transform:translate(-50%,-50%); border-radius:50%;
      background:radial-gradient(closest-side,
        transparent 30%, rgba(186,150,255,.92) 47%, rgba(140,92,255,.62) 58%,
        rgba(96,56,215,.30) 70%, rgba(58,32,140,.12) 82%, transparent 92%);
      filter:blur(42px); opacity:.95;
      animation:bloomDrift 26s ease-in-out infinite; }
    .bloom.b-sm { width:min(760px,96vw); height:min(560px,66vw); filter:blur(34px); opacity:.80;
      animation-duration:34s; animation-direction:reverse; }
    .bloom.b-cool { background:radial-gradient(closest-side,
        transparent 32%, rgba(130,205,255,.62) 50%, rgba(74,132,246,.34) 63%,
        rgba(40,70,180,.14) 78%, transparent 90%); }

    .panel-sec { position:relative; padding:clamp(56px,7vw,110px) var(--shell); overflow:hidden; }
    .pnl { position:relative; z-index:2; max-width:1200px; margin:0 auto;
      border-radius:clamp(20px,2.4vw,30px); padding:clamp(28px,3.6vw,52px);
      background:rgba(12,11,19,.86); backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
      border:1px solid rgba(255,255,255,.09);
      box-shadow:0 40px 120px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); }
    .pnl-head { display:flex; align-items:flex-start; justify-content:space-between;
      gap:clamp(24px,4vw,64px); flex-wrap:wrap; margin-bottom:clamp(26px,3vw,42px); }
    .pnl-head h2 { flex:0 1 auto; max-width:min(46%,460px); font-size:clamp(24px,2.9vw,38px);
      font-weight:600; letter-spacing:-.03em; line-height:1.2; }
    .pnl-head p { flex:1 1 340px; font-size:clamp(14.5px,1.2vw,16px); font-weight:300; color:var(--muted);
      line-height:1.75; max-width:560px; padding-top:6px; }
    .pnl-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px); }
    .tile { border-radius:16px; padding:clamp(22px,2.2vw,30px); display:flex; flex-direction:column; gap:11px;
      background:rgba(255,255,255,.028); border:1px solid rgba(255,255,255,.07);
      transition:background .45s, border-color .45s, transform .45s cubic-bezier(.16,1,.3,1); }
    .tile:hover { background:rgba(255,255,255,.05); border-color:rgba(150,120,255,.32); transform:translateY(-4px); }
    .tile .n { font-size:12px; font-weight:600; letter-spacing:.22em; color:rgba(150,120,255,.9); }
    .tile h3 { font-size:clamp(17px,1.5vw,20px); font-weight:600; letter-spacing:-.015em; }
    .tile p { font-size:14px; font-weight:300; color:rgba(245,245,245,.55); line-height:1.7; flex-grow:1; }
    .tile .t { font-size:12.5px; font-weight:500; letter-spacing:.02em; color:rgba(195,176,255,.95); }
    .tile a.go { position:relative; font-size:13px; font-weight:500; color:rgba(245,245,245,.8);
      border-bottom:1px solid rgba(255,255,255,.18); align-self:flex-start; padding-bottom:2px;
      transition:color .3s, border-color .3s; }
    /* the rule stays tight to the type; the tap area is grown behind it to 44px */
    .tile a.go::before { content:''; position:absolute; left:-6px; right:-6px; top:50%;
      height:46px; transform:translateY(-50%); }
    .tile a.go:hover { color:#fff; border-color:#c3b0ff; }
    .tile .ico { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
      background:linear-gradient(150deg,rgba(150,120,255,.20),rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.09); margin-bottom:3px; }

    /* ---- statement + stats ---- */
    .say-sec { position:relative; padding:clamp(70px,9vw,140px) var(--shell); overflow:hidden; text-align:center; }
    .say { position:relative; z-index:2; max-width:1000px; margin:0 auto; }
    .say p { font-size:clamp(22px,3.1vw,40px); font-weight:600; letter-spacing:-.028em; line-height:1.32; }
    .say p b { font-weight:600; color:#fff; }
    .say p span { color:rgba(196,182,240,.34); }
    .statrow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
      gap:clamp(22px,4vw,64px); margin-top:clamp(34px,4.5vw,64px); }
    .statrow .v { font-size:clamp(30px,3.8vw,52px); font-weight:700; letter-spacing:-.035em; }
    .statrow .l { font-size:13px; font-weight:300; color:var(--muted-2); margin-top:8px; }
    .say .btn { margin-top:clamp(30px,4vw,50px); }

    /* ---- process ---- */
    .flow { position:relative; z-index:2; max-width:1200px; margin:0 auto;
      display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,2.6vw,36px); }
    .flow::before { content:''; position:absolute; top:25px; left:5%; right:5%; height:1px;
      background:linear-gradient(90deg,transparent,rgba(150,120,255,.5),rgba(255,255,255,.14),rgba(150,120,255,.5),transparent); }
    .step2 { position:relative; display:flex; flex-direction:column; gap:13px; }
    .step2 .dot { width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;
      font-size:14px; font-weight:700; color:var(--accent-pale); background:#0a0a10;
      border:1px solid rgba(150,120,255,.42); box-shadow:0 0 0 7px #050505, 0 0 26px rgba(100,60,255,.34); }
    .step2 .w { font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(150,120,255,.85); margin-top:4px; }
    .step2 h3 { font-size:clamp(18px,1.7vw,21px); font-weight:600; letter-spacing:-.02em; }
    .step2 p { font-size:14px; font-weight:300; color:rgba(245,245,245,.55); line-height:1.75; }

    @media (max-width:1000px) {
      .pnl-head h2 { max-width:100%; }
      .pnl-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .flow { grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px 26px; }
      .flow::before { display:none; }
    }
    @media (max-width:660px) {
      .pnl-grid { grid-template-columns:1fr; }
      .flow { grid-template-columns:1fr; }
      .statrow { grid-template-columns:1fr; gap:26px; }
    }
    @media (prefers-reduced-motion:reduce) { .bloom { animation:none !important; } }

    /* ================================================================
       CONTINUOUS FIELD — one atmosphere layer behind the whole document,
       so light crosses section boundaries instead of stopping at them.
       ================================================================ */
    /* ===== BACKGROUND — one continuous surface that changes character per section ===== */
    .bgx { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:#050505; }
    .bgx-a, .bgx-b { position:absolute; inset:-12%; }
    .bgx-a { background: radial-gradient(78% 70% at var(--ax,50%) var(--ay,45%),
              rgba(var(--ac, 96,62,200), var(--ao, .40)) 0%,
              rgba(var(--ac, 96,62,200), 0) 72%); }
    .bgx-b { background: radial-gradient(62% 58% at var(--bx,30%) var(--by,70%),
              rgba(var(--bc, 40,60,150), var(--bo, .24)) 0%,
              rgba(var(--bc, 40,60,150), 0) 66%); }
    /* two textures, crossfaded — some stretches are stippled, some are ruled, some are bare */
    .bgx-dots { position:absolute; inset:0; opacity:var(--dop,0); will-change:opacity;
      background-image: radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.5px);
      background-size: 30px 30px;
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 12%, transparent 76%);
      mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 12%, transparent 76%); }
    .bgx-lines { position:absolute; inset:0; opacity:var(--lop,0); will-change:opacity;
      background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 74px);
      -webkit-mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
      mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent); }
    .bgx-vig { position:absolute; inset:0;
      background: radial-gradient(ellipse 104% 92% at 50% 48%, transparent 52%, rgba(0,0,0,.40) 100%); }

    /* content must sit above the fixed .bgx layer. [data-bg] and main are included so a page
       built from divs rather than <section> elements can't silently render underneath it. */
    section, .clients-sec, footer, .mn-footer, [data-bg] { position:relative; z-index:1; }
    /* main is positioned so it paints above .bgx, but must NOT take a z-index:
       that makes it a stacking context and traps modal overlays beneath the header. */
    main { position:relative; }

    /* ================================================================
       MOTION — one idea: everything arrives out of focus and settles.
       ================================================================ */
    .rv { opacity:0; translate:0 34px; scale:.985; filter:blur(9px);
      transition:opacity .9s cubic-bezier(.16,1,.3,1), translate .9s cubic-bezier(.16,1,.3,1),
                 scale .9s cubic-bezier(.16,1,.3,1), filter .8s cubic-bezier(.16,1,.3,1); }
    .rv.in { opacity:1; translate:0 0; scale:1; filter:blur(0); }

    /* headline: word by word, out of focus into focus */
    .wsplit { display:inline-block; overflow:hidden; vertical-align:top; }
    .wsplit > span { display:inline-block; opacity:0; transform:translateY(0.5em); filter:blur(12px);
      transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1),
                 filter .85s cubic-bezier(.16,1,.3,1); }
    .in .wsplit > span, .wsplit.in > span { opacity:1; transform:translateY(0); filter:blur(0); }

    /* panels: a cursor-tracked sheen, and a slow gradient edge */
    .pnl, .tile { position:relative; overflow:hidden; }
    .pnl::after, .tile::after { content:''; position:absolute; inset:0; pointer-events:none;
      opacity:0; transition:opacity .5s;
      background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
        rgba(168,138,255,.14), transparent 62%); }
    .pnl:hover::after, .tile:hover::after { opacity:1; }
    .edge-lit::before { content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
      background:conic-gradient(from var(--a,0deg), rgba(150,120,255,.85), rgba(0,180,220,.35) 25%,
        rgba(255,255,255,.06) 50%, rgba(220,50,120,.4) 75%, rgba(150,120,255,.85));
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude; animation:edgeSpin 14s linear infinite; }
    @keyframes edgeSpin { to { --a:360deg; } }
    @property --a { syntax:'<angle>'; initial-value:0deg; inherits:false; }

    /* stagger inside grids */
    .pnl-grid > *:nth-child(1),.flow > *:nth-child(1){ transition-delay:.04s }
    .pnl-grid > *:nth-child(2),.flow > *:nth-child(2){ transition-delay:.12s }
    .pnl-grid > *:nth-child(3),.flow > *:nth-child(3){ transition-delay:.20s }
    .pnl-grid > *:nth-child(4),.flow > *:nth-child(4){ transition-delay:.28s }
    .pnl-grid > *:nth-child(5){ transition-delay:.36s }
    .pnl-grid > *:nth-child(6){ transition-delay:.44s }

    /* stats: a line draws in under each */
    .statrow > div { position:relative; padding-bottom:16px; }
    .statrow > div::after { content:''; position:absolute; left:50%; bottom:0; height:1px; width:0;
      transform:translateX(-50%); transition:width 1.1s cubic-bezier(.16,1,.3,1) .25s;
      background:linear-gradient(90deg,transparent,rgba(150,120,255,.7),transparent); }
    .statrow > div.in::after { width:78%; }

    /* the clients band shouldn't announce itself with hard rules */
    .marquee-wrap { border-top:none !important; border-bottom:none !important;
      background:none !important;
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),
                         linear-gradient(#000,#000);
      mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),
                 linear-gradient(#000,#000); }

    /* soften every seam: sections bleed into each other */
    .panel-sec, .say-sec, .sec-pad { padding-top:clamp(64px,8vw,124px); padding-bottom:clamp(64px,8vw,124px); }

    @media (prefers-reduced-motion:reduce) {
      .rv, .wsplit > span { opacity:1 !important; translate:none !important; transform:none !important;
        filter:none !important; scale:none !important; transition:none !important; }
      .edge-lit::before { animation:none !important; }
      .statrow > div::after { width:78%; transition:none; }
    }
  
    /* ================= HX LOADER — the aperture ================= */
    html.hx-loading, html.hx-loading body { overflow: hidden !important; height: 100%; }

    .hx-load { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
    .hx-load.done { pointer-events: none; }
    .hx-load.gone { display: none; }

    /* two opaque sheets that part like a lens shutter */
    .hx-load-p { position: fixed; left: 0; right: 0; height: 50.2%; background: #050505; will-change: transform;
      transition: transform 1.05s cubic-bezier(0.76, 0, 0.24, 1); }
    .hx-load-t { top: 0; }
    .hx-load-b { bottom: 0; }
    .hx-load.done .hx-load-t { transform: translateY(-100%); }
    .hx-load.done .hx-load-b { transform: translateY(100%); }

    /* the mark and the wire sit on the seam */
    .hx-load-c { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
      display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 2vw, 22px);
      transition: opacity 0.42s ease, filter 0.42s ease; }
    .hx-load.done .hx-load-c { opacity: 0; filter: blur(6px); }
    .hx-load-c img { width: clamp(108px, 13vw, 150px); height: auto; opacity: 0;
      filter: brightness(0) invert(1) blur(8px);
      animation: hxMark 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards; }
    @keyframes hxMark { from { opacity: 0; filter: brightness(0) invert(1) blur(8px); transform: translateY(6px); }
                        to   { opacity: 1; filter: brightness(0) invert(1) blur(0);   transform: translateY(0); } }

    /* the wire IS the progress bar — it grows from the centre outward */
    .hx-wire { position: relative; width: min(420px, 58vw); height: 1px; background: rgba(255,255,255,0.09); overflow: hidden; }
    .hx-wire span { position: absolute; inset: 0; background: linear-gradient(90deg,
        rgba(150,120,255,0.55), rgba(255,255,255,0.92) 50%, rgba(150,120,255,0.55));
      transform: scaleX(var(--p, 0)); transform-origin: 50% 50%; will-change: transform; }
    .hx-wire i { position: absolute; top: 0; left: 0; width: 34%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
      animation: hxScan 1.5s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
    @keyframes hxScan { 0% { transform: translateX(-120%); } 100% { transform: translateX(420%); } }

    /* the loader readout sits exactly where the hero readout will be, so the swap is seamless */
    .hx-load-hud { position: fixed; z-index: 2; left: var(--shell); right: var(--shell); bottom: clamp(20px, 3vw, 34px);
      display: flex; align-items: center; justify-content: space-between; gap: 18px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 0.22em;
      text-transform: uppercase; color: rgba(245,245,245,0.30);
      transition: opacity 0.34s ease; }
    .hx-load.done .hx-load-hud { opacity: 0; }
    .hx-load-hud i { font-style: normal; font-variant-numeric: tabular-nums; color: rgba(245,245,245,0.46); }

    @media (max-width: 720px) {
      .hx-load-hud { font-size: 11px; letter-spacing: 0.12em; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hx-load-p { transition: opacity 0.3s ease; }
      .hx-load.done .hx-load-t, .hx-load.done .hx-load-b { transform: none; opacity: 0; }
      .hx-wire i { animation: none; }
      .hx-load-c img { animation: none; opacity: 1; filter: brightness(0) invert(1); }
    }

  
    /* ================= TESTIMONIALS ================= */
    .tq-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); }
    .tq-grid.q1 { grid-template-columns:minmax(0,1fr); max-width:760px; margin:0 auto; }
    .tq { position:relative; display:flex; flex-direction:column;
      padding:clamp(24px,2.6vw,36px); border-radius:18px;
      background:rgba(255,255,255,0.028); border:1px solid rgba(255,255,255,0.10);
      transition:border-color .45s, background .45s, transform .45s cubic-bezier(.16,1,.3,1); }
    .tq:hover { border-color:rgba(150,120,255,0.34); background:rgba(255,255,255,0.045); transform:translateY(-4px); }
    .tq::before { content:'\201C'; position:absolute; top:clamp(6px,0.8vw,12px); right:clamp(16px,1.8vw,26px);
      font-size:clamp(54px,5vw,78px); line-height:1; color:rgba(150,120,255,0.20); pointer-events:none; }
    .tq blockquote { margin:0; font-style:normal; font-size:clamp(14.5px,1.12vw,16.5px); font-weight:300; line-height:1.75;
      color:rgba(245,245,245,0.80); }
    .tq figcaption { display:flex; align-items:center; gap:13px; margin-top:clamp(20px,2.2vw,28px);
      padding-top:clamp(18px,2vw,24px); border-top:1px solid rgba(255,255,255,0.09); }
    .tq .av { font-style:normal; flex-shrink:0; width:42px; height:42px; border-radius:50%; display:flex;
      align-items:center; justify-content:center; font-size:12.5px; font-weight:700; letter-spacing:.04em;
      color:#0b0a12; background:linear-gradient(150deg,#ffffff,#c8b8ff); }
    .tq .who { display:flex; flex-direction:column; gap:3px; min-width:0; }
    .tq .who b { font-style:normal; font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--fg); }
    .tq .who span { font-style:normal; font-size:12px; font-weight:300; color:var(--muted-2); }
    @media (max-width:900px) { .tq-grid { grid-template-columns:minmax(0,1fr); } }
    @media (prefers-reduced-motion:reduce) { .tq:hover { transform:none; } }