:root {
      --bg:#08090A; --panel:#0F1011; --elevated:#16181C;
      --line:rgba(255,255,255,0.06); --line-bright:rgba(255,255,255,0.10);
      --ink:#F7F7F8; --muted:#8A8F98; --dim:#62666D;
      --amber:#E89A1C; --amber-start:#F19C00; --amber-end:#D98D02; --amber-glow:#F5B547;
      --amber-glow-rgb: 245, 181, 71;
      --amber-mid-rgb: 241, 156, 0;
      --ease: cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* SVG logo gradient stops driven by CSS vars */
    #lumio-nav-grad stop:nth-of-type(1),
    #lumio-foot-grad stop:nth-of-type(1) { stop-color: var(--amber-start); }
    #lumio-nav-grad stop:nth-of-type(2),
    #lumio-foot-grad stop:nth-of-type(2) { stop-color: var(--amber-end); }

    /* Tailwind class overrides so runtime palette swaps work */
    .text-amber-glow { color: var(--amber-glow) !important; }
    .bg-amber-glow { background-color: var(--amber-glow) !important; }
    html { scroll-padding-top: 80px; }
    html, body { background: var(--bg); color: var(--ink); }
    body {
      font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
      font-feature-settings: 'cv11','ss01','ss03';
      -webkit-font-smoothing: antialiased;
      letter-spacing: -0.011em;
      line-height: 1.6;
      overflow-x: hidden;
    }
    ::selection { background: rgba(var(--amber-mid-rgb), 0.25); color: #fff; }

    .display { font-family: 'Hanken Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.022em; line-height: 1.02; }
    .display-sm { font-family: 'Hanken Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 600; letter-spacing: -0.018em; line-height: 1.08; }
    .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
    .mono-label {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 400;
    }
    .mono-label--dim { color: var(--dim); }

    .accent-grad {
      background: linear-gradient(90deg, var(--amber-start) 0%, var(--amber-glow) 50%, var(--amber-end) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .noise {
      pointer-events: none;
      position: fixed; inset: 0; z-index: 1;
      opacity: 0.02; mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    }
    .grid-bg {
      position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
      -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    }
    .glow-amber {
      position: absolute; pointer-events: none;
      width: 720px; height: 420px;
      left: 50%; top: 38%; transform: translate(-50%, -50%);
      background: radial-gradient(closest-side, rgba(var(--amber-glow-rgb), 0.18), rgba(var(--amber-mid-rgb), 0.08) 40%, transparent 70%);
      filter: blur(40px);
      z-index: 0;
    }

    .card {
      position: relative;
      background: linear-gradient(180deg, rgba(22,24,28,0.85), rgba(15,16,17,0.85));
      border: 1px solid var(--line);
      border-radius: 14px;
      transition: border-color 280ms var(--ease), transform 280ms var(--ease), background 280ms var(--ease);
    }
    .card::before {
      content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0.08) 80%, transparent);
      pointer-events: none;
    }
    .card-hover:hover { border-color: var(--line-bright); transform: translateY(-1px); }

    .hairline-y { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .hairline-t { border-top: 1px solid var(--line); }
    .hairline-b { border-bottom: 1px solid var(--line); }
    .divider-grad {
      height: 1px; width: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
    }

    .pill {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 4px 10px 4px 8px;
      border: 1px solid var(--line-bright);
      border-radius: 999px;
      background: rgba(255,255,255,0.02);
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--muted);
    }
    .pill .dot {
      width: 6px; height: 6px; border-radius: 999px;
      background: var(--amber-glow); box-shadow: 0 0 12px rgba(var(--amber-glow-rgb), 0.7);
      position: relative;
    }
    .pill .dot::after {
      content:""; position:absolute; inset:-3px; border-radius:999px;
      background: radial-gradient(closest-side, rgba(var(--amber-glow-rgb), 0.45), transparent);
      animation: pulse 2.2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%,100% { opacity: 0.4; transform: scale(0.95); }
      50% { opacity: 1; transform: scale(1.4); }
    }

    .btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 8px; font-size: 0.875rem; font-weight: 500; transition: all 220ms var(--ease); white-space: nowrap; }
    .btn-amber {
      background: linear-gradient(180deg, var(--amber-start), var(--amber-end));
      color: #1a0f00;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 0 1px rgba(var(--amber-mid-rgb), 0.4), 0 6px 24px -8px rgba(var(--amber-mid-rgb), 0.45);
    }
    .btn-amber:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 0 1px rgba(var(--amber-glow-rgb), 0.6), 0 10px 32px -8px rgba(var(--amber-glow-rgb), 0.55); }
    .btn-ghost {
      color: var(--ink);
      border: 1px solid var(--line-bright);
      background: rgba(255,255,255,0.015);
    }
    .btn-ghost:hover { background: #322819; color: #fff; }
    .btn-pill {
      padding: 6px 12px; font-size: 0.78rem; border-radius: 999px;
      background: linear-gradient(180deg, var(--amber-start), var(--amber-end)); color: #1a0f00;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 0 1px rgba(var(--amber-mid-rgb), 0.35);
    }
    .btn-pill:hover { filter: brightness(1.1); }

    .nav-link {
      font-size: 0.875rem; color: var(--muted); padding: 6px 10px; border-radius: 6px;
      transition: color 200ms var(--ease), background 200ms var(--ease);
    }
    .nav-link:hover { color: var(--ink); background: rgba(255,255,255,0.03); }
    .nav-link[data-active="true"] { color: var(--ink); }

    .field {
      width: 100%; background: transparent; color: var(--ink);
      border: none; border-bottom: 1px solid var(--line-bright);
      padding: 12px 0; font-size: 0.95rem;
      transition: border-color 220ms var(--ease);
      font-family: inherit;
    }
    .field:focus { outline: none; border-bottom-color: var(--amber); }
    .field::placeholder { color: var(--dim); }

    .arrow { transition: transform 280ms var(--ease); }
    .row-link:hover .arrow { transform: translateX(4px); color: var(--amber-glow); }
    .row-link:hover .row-title { color: var(--amber-glow); }
    .row-title { transition: color 280ms var(--ease); }

    .bar { width: 8px; border-radius: 2px; background: linear-gradient(180deg, rgba(var(--amber-glow-rgb), 0.9), rgba(var(--amber-mid-rgb), 0.5)); }
    .bar.dim { background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)); }
    .meter { height: 4px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
    .meter > span { display: block; height: 100%; background: linear-gradient(90deg, var(--amber-start), var(--amber-glow)); }

    .service-row { transition: background 280ms var(--ease); }
    .service-row:hover { background: rgba(255,255,255,0.015); }

    .logo-svg { display:block; }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
    }

    /* ==================== ELEVATED COMPONENTS ==================== */

    /* Hero ambient grid (subtle scrolling dots) */
    .dot-field {
      position: absolute; inset: 0; pointer-events: none;
      background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: radial-gradient(ellipse 90% 60% at center 35%, black 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 90% 60% at center 35%, black 30%, transparent 80%);
    }
    .aurora {
      position: absolute; pointer-events: none; z-index: 0;
      width: 1100px; height: 600px;
      left: 50%; top: 0; transform: translate(-50%, -20%);
      background:
        radial-gradient(closest-side, rgba(var(--amber-glow-rgb), 0.22), transparent 70%) 30% 30% / 60% 80% no-repeat,
        radial-gradient(closest-side, rgba(var(--amber-mid-rgb), 0.14), transparent 70%) 70% 50% / 55% 70% no-repeat;
      filter: blur(40px);
      animation: aurora-drift 18s ease-in-out infinite;
    }
    @keyframes aurora-drift {
      0%, 100% { transform: translate(-50%, -20%) scale(1); opacity: 0.95; }
      50%      { transform: translate(-48%, -18%) scale(1.05); opacity: 1; }
    }

    /* Beam, vertical accent that bleeds down through hero */
    .beam {
      position: absolute; left: 50%; top: 0; transform: translateX(-50%);
      width: 1px; height: 60vh; pointer-events: none;
      background: linear-gradient(180deg, transparent, rgba(var(--amber-glow-rgb), 0.55) 30%, rgba(var(--amber-glow-rgb), 0.18) 70%, transparent);
      opacity: 0.55;
    }

    /* Activity card on hero */
    .activity {
      position: relative;
      background: linear-gradient(180deg, rgba(22,24,28,0.92), rgba(15,16,17,0.92));
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 16px 18px;
      box-shadow: 0 24px 80px -24px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04);
      backdrop-filter: blur(10px);
    }
    .activity-row {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 0;
      border-top: 1px solid var(--line);
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.75rem;
      color: var(--muted);
    }
    .activity-row:first-of-type { border-top: none; }
    .activity-row .dot-s {
      width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0;
    }
    .dot-s.live { background: var(--amber-glow); box-shadow: 0 0 10px rgba(var(--amber-glow-rgb), 0.7); animation: blink 1.4s ease-in-out infinite; }
    .dot-s.done { background: #4ade80; }
    .dot-s.idle { background: #62666D; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.35} }
    .activity-row .label { color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .activity-row .tag { font-size: 0.65rem; color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase; }

    /* Trust strip */
    .stat-cell {
      display: flex; flex-direction: column; gap: 6px;
      padding: 28px 24px;
    }
    .stat-num {
      font-family: 'Hanken Grotesk', 'Inter', sans-serif;
      font-weight: 600;
      font-size: 2.5rem;
      letter-spacing: -0.02em;
      line-height: 1;
      color: var(--ink);
    }
    .stat-num .unit { color: var(--amber-glow); font-weight: 500; }

    /* Service card v2 */
    .service-card {
      position: relative;
      padding: 28px 0;
      border-top: 1px solid var(--line);
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: start;
      transition: background 280ms var(--ease);
    }
    .service-card:hover { background: rgba(255,255,255,0.012); }
    .service-card .idx {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      color: var(--dim);
      padding-top: 8px;
    }
    .service-card .deliverables {
      display: flex; flex-wrap: wrap; gap: 6px;
      margin-top: 14px;
    }
    .chip {
      display: inline-flex; align-items: center; padding: 4px 10px;
      border: 1px solid var(--line-bright);
      border-radius: 999px;
      background: rgba(255,255,255,0.018);
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.68rem;
      letter-spacing: 0.06em;
      color: var(--muted);
    }
    .chip:hover { color: var(--ink); border-color: rgba(255,255,255,0.18); }
    .engagement-tag {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.68rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--dim);
      white-space: nowrap;
    }

    /* Selected work cards */
    .work-card {
      position: relative;
      background: linear-gradient(180deg, rgba(22,24,28,0.85), rgba(15,16,17,0.85));
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 28px;
      display: flex; flex-direction: column;
      min-height: 360px;
      transition: transform 320ms var(--ease), border-color 280ms var(--ease), background 280ms var(--ease);
      overflow: hidden;
    }
    .work-card:hover { transform: translateY(-3px); border-color: var(--line-bright); }
    .work-card::before {
      content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10) 30%, rgba(255,255,255,0.10) 70%, transparent);
    }
    .work-card .ribbon {
      position: absolute; right: -1px; top: 22px;
      padding: 4px 12px 4px 10px;
      background: linear-gradient(180deg, var(--amber-start), var(--amber-end));
      color: #1a0f00;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
      border-radius: 4px 0 0 4px;
      font-weight: 600;
    }
    .work-card .placeholder-art {
      height: 130px;
      border-radius: 10px;
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 8px, transparent 8px 16px),
        linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
      border: 1px solid var(--line);
      display: flex; align-items: center; justify-content: center;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--dim);
      margin-bottom: 22px;
    }
    .metric-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 0;
      margin-top: auto;
      border-top: 1px solid var(--line);
      padding-top: 18px;
    }
    .metric-row > div:first-child { border-right: 1px solid var(--line); padding-right: 16px; }
    .metric-row > div:last-child { padding-left: 16px; }
    .metric-num {
      font-family: 'Hanken Grotesk', 'Inter', sans-serif;
      font-weight: 600;
      font-size: 1.75rem;
      line-height: 1;
      letter-spacing: -0.02em;
      color: var(--ink);
    }
    .metric-num .accent-grad { display: inline; }

    /* Process timeline */
    .process-rail {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
    .process-rail::before {
      content: ""; position: absolute;
      left: 18px; right: 18px; top: 14px; height: 1px;
      background: linear-gradient(90deg, var(--line), var(--line-bright), var(--line));
    }
    .process-step {
      position: relative;
      padding-top: 36px;
    }
    .process-step::before {
      content: ""; position: absolute;
      left: 0; top: 7px;
      width: 14px; height: 14px;
      border-radius: 999px;
      background: var(--bg);
      border: 1px solid var(--line-bright);
      box-shadow: inset 0 0 0 3px var(--bg);
    }
    .process-step.active::before {
      border-color: var(--amber-glow);
      box-shadow: inset 0 0 0 3px var(--bg), 0 0 16px rgba(var(--amber-glow-rgb), 0.6);
      background: var(--amber-glow);
    }
    .process-step .num {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.68rem; letter-spacing: 0.14em;
      color: var(--dim);
      position: absolute; left: 22px; top: 6px;
    }
    @media (max-width: 768px) {
      .process-rail { grid-template-columns: 1fr; gap: 16px; }
      .process-rail::before { display: none; }
    }

    /* Testimonial */
    .quote-card {
      position: relative;
      background: linear-gradient(180deg, rgba(22,24,28,0.6), rgba(15,16,17,0.6));
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 32px;
    }
    .quote-mark {
      position: absolute; top: 18px; right: 22px;
      font-family: 'Hanken Grotesk', serif;
      font-size: 4rem; line-height: 1; color: var(--line-bright);
      font-weight: 700;
    }
    .quote-text {
      font-family: 'Hanken Grotesk', 'Inter', sans-serif;
      font-weight: 500;
      font-size: 1.4rem; line-height: 1.35;
      letter-spacing: -0.012em;
      color: var(--ink);
      text-wrap: pretty;
    }
    .quote-author {
      display: flex; align-items: center; gap: 12px;
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }
    .avatar {
      width: 34px; height: 34px; border-radius: 999px;
      background: linear-gradient(135deg, rgba(var(--amber-glow-rgb),0.4), rgba(var(--amber-mid-rgb),0.2));
      border: 1px solid var(--line-bright);
      flex-shrink: 0;
    }

    /* FAQ accordion */
    .faq-item {
      border-top: 1px solid var(--line);
    }
    .faq-item:last-child { border-bottom: 1px solid var(--line); }
    .faq-q {
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px;
      padding: 24px 0;
      cursor: pointer;
      list-style: none;
      transition: color 220ms var(--ease);
    }
    .faq-q::-webkit-details-marker { display: none; }
    .faq-q .q-text {
      font-family: 'Hanken Grotesk', 'Inter', sans-serif;
      font-weight: 600;
      font-size: 1.15rem;
      letter-spacing: -0.012em;
      color: var(--ink);
      transition: color 220ms var(--ease);
    }
    .faq-item:hover .q-text { color: var(--amber-glow); }
    .faq-icon {
      width: 22px; height: 22px; flex-shrink: 0;
      border: 1px solid var(--line-bright);
      border-radius: 999px;
      display: flex; align-items: center; justify-content: center;
      transition: transform 280ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
      color: var(--muted);
    }
    .faq-item[open] .faq-icon { transform: rotate(45deg); border-color: var(--amber-glow); color: var(--amber-glow); }
    .faq-a {
      color: var(--muted);
      max-width: 65ch;
      padding-bottom: 24px;
      line-height: 1.65;
    }

    /* Contact topic chips */
    .topic-chip {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 13px;
      border: 1px solid var(--line-bright);
      border-radius: 999px;
      background: rgba(255,255,255,0.018);
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.72rem; letter-spacing: 0.06em;
      color: var(--muted);
      cursor: pointer;
      transition: all 200ms var(--ease);
      user-select: none;
    }
    .topic-chip:hover { color: var(--ink); border-color: rgba(255,255,255,0.22); }
    .topic-chip.on {
      background: linear-gradient(180deg, var(--amber-start), var(--amber-end));
      color: #1a0f00;
      border-color: var(--amber-glow);
      box-shadow: 0 0 0 1px rgba(var(--amber-mid-rgb), 0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    }

    /* Reveal on scroll */
    .reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
    .reveal.in { opacity: 1; transform: none; }

    .sec-num { display: none; }

    /* ===== HERO V2, cinematic ===== */

    .hero-cinema {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      min-height: 64vh;
      padding-top: 3rem;
    }

    /* Sun, massive soft glow centered low */
    .sun {
      position: absolute; left: 50%; bottom: -25%;
      width: 1400px; height: 1400px;
      transform: translateX(-50%);
      border-radius: 999px;
      background:
        radial-gradient(closest-side, rgba(var(--amber-glow-rgb), 0.55), rgba(var(--amber-mid-rgb), 0.25) 38%, transparent 70%);
      filter: blur(60px);
      z-index: -2;
      animation: sun-breathe 8s ease-in-out infinite;
    }
    @keyframes sun-breathe {
      0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.95; }
      50%      { transform: translateX(-50%) scale(1.06); opacity: 1; }
    }
    .sun-core {
      position: absolute; left: 50%; bottom: 6%;
      width: 220px; height: 220px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: radial-gradient(closest-side, rgba(255,240,210,0.9), rgba(var(--amber-glow-rgb), 0.5) 40%, transparent 80%);
      filter: blur(20px);
      z-index: -1;
      mix-blend-mode: screen;
    }

    /* Perspective grid floor */
    .floor-grid {
      position: absolute;
      left: 50%; bottom: 0;
      transform: translateX(-50%) perspective(900px) rotateX(62deg);
      transform-origin: center bottom;
      width: 220%; height: 70%;
      background-image:
        linear-gradient(rgba(var(--amber-glow-rgb), 0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--amber-glow-rgb), 0.18) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
      animation: floor-pan 16s linear infinite;
      z-index: -3;
      opacity: 0.7;
    }
    @keyframes floor-pan {
      0%   { background-position: 0 0, 0 0; }
      100% { background-position: 0 80px, 0 0; }
    }

    /* Horizon line */
    .horizon {
      position: absolute;
      left: 0; right: 0; top: 58%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(var(--amber-glow-rgb), 0.5), transparent);
      z-index: -2;
      box-shadow: 0 0 30px rgba(var(--amber-glow-rgb), 0.4);
    }

    /* Drifting particles */
    .particles { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
    .particle {
      position: absolute;
      width: 2px; height: 2px;
      border-radius: 999px;
      background: rgba(var(--amber-glow-rgb), 0.7);
      box-shadow: 0 0 6px rgba(var(--amber-glow-rgb), 0.6);
      animation: drift linear infinite;
      opacity: 0;
    }
    @keyframes drift {
      0%   { transform: translateY(0) translateX(0); opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: 0.8; }
      100% { transform: translateY(-110vh) translateX(var(--dx, 20px)); opacity: 0; }
    }

    /* HUD corner brackets */
    .hud-corner {
      position: absolute;
      width: 32px; height: 32px;
      border: 1px solid rgba(var(--amber-glow-rgb), 0.45);
      pointer-events: none;
      z-index: 2;
    }
    .hud-corner.tl { top: 84px; left: 24px; border-right: none; border-bottom: none; }
    .hud-corner.tr { top: 84px; right: 24px; border-left: none; border-bottom: none; }
    .hud-corner.bl { display: none; }
    .hud-corner.br { display: none; }
    .hud-text {
      position: absolute;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.62rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(var(--amber-glow-rgb), 0.7);
      z-index: 2;
      pointer-events: none;
    }
    .hud-text.tl { top: 92px; left: 64px; }
    .hud-text.tr { top: 92px; right: 64px; text-align: right; }
    .hud-text.bl { display: none; }
    .hud-text.br { display: none; }

    /* Big headline with staggered reveal */
    .hero-h1 {
      font-family: 'Coolvetica', 'Hanken Grotesk', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: clamp(52px, 9.2vw, 142px);
      line-height: 1.0;
      letter-spacing: -0.02em;
      text-wrap: balance;
      text-transform: none;
    }
    .hero-h1 .cycle > span,
    .hero-h1 .accent-grad {
      font-style: normal;
    }
    .hero-line {
      display: block;
    }

    /* Ghost outline word behind */
    .hero-ghost {
      position: absolute;
      left: 50%;
      top: 32%;
      transform: translate(-50%, -50%);
      font-family: 'Harabara Mais Demo', 'Harabara Mais', 'Russo One', 'Hanken Grotesk', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: clamp(180px, 28vw, 460px);
      letter-spacing: -0.02em;
      line-height: 0.85;
      color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,0.05);
      text-stroke: 1px rgba(255,255,255,0.05);
      pointer-events: none;
      z-index: -1;
      white-space: nowrap;
    }

    /* 3D stack visual */
    .stack-3d {
      position: relative;
      width: 100%;
      height: 460px;
      perspective: 1400px;
      perspective-origin: 60% 40%;
    }
    .stack-plane {
      position: absolute;
      left: 50%; top: 50%;
      width: 320px; height: 200px;
      transform-style: preserve-3d;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(22,24,28,0.95), rgba(15,16,17,0.95));
      border: 1px solid var(--line-bright);
      box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
      animation: stack-float 6s ease-in-out infinite;
    }
    .stack-plane::before {
      content: ""; position: absolute; inset: 0;
      border-radius: inherit;
      background:
        radial-gradient(ellipse at top left, rgba(var(--amber-glow-rgb), 0.18), transparent 60%),
        linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
      pointer-events: none;
    }
    .stack-plane.p1 {
      transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-22deg) translateZ(-90px);
      width: 360px; height: 220px;
      opacity: 0.55;
    }
    .stack-plane.p2 {
      transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-22deg) translateZ(-30px);
      opacity: 0.78;
    }
    .stack-plane.p3 {
      transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-22deg) translateZ(30px);
      opacity: 0.92;
    }
    .stack-plane.p4 {
      transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-22deg) translateZ(90px);
      border-color: rgba(var(--amber-glow-rgb), 0.4);
      box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(var(--amber-glow-rgb), 0.25), inset 0 1px 0 rgba(255,255,255,0.08);
    }
    @keyframes stack-float {
      0%, 100% { margin-top: 0; }
      50%      { margin-top: -10px; }
    }
    .stack-plane.p1 { animation-delay: 0s; }
    .stack-plane.p2 { animation-delay: 0.3s; }
    .stack-plane.p3 { animation-delay: 0.6s; }
    .stack-plane.p4 { animation-delay: 0.9s; }

    /* Plane content */
    .plane-content {
      position: absolute;
      inset: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .plane-bar {
      height: 6px; border-radius: 2px;
      background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
      width: var(--w, 70%);
    }
    .plane-bar.accent { background: linear-gradient(90deg, var(--amber-glow), rgba(var(--amber-glow-rgb), 0.2)); }
    .plane-header {
      display: flex; align-items: center; justify-content: space-between;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.6rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .plane-num {
      font-family: 'Hanken Grotesk', sans-serif;
      font-weight: 700;
      font-size: 2.2rem;
      line-height: 1;
      color: var(--ink);
      letter-spacing: -0.02em;
    }
    .plane-num .accent-grad { display: inline; }

    /* Ticker / marquee */
    .ticker-wrap {
      position: relative;
      overflow: hidden;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: rgba(0,0,0,0.25);
      backdrop-filter: blur(6px);
    }
    .ticker-wrap::before, .ticker-wrap::after {
      content: ""; position: absolute; top: 0; bottom: 0; width: 100px;
      pointer-events: none; z-index: 2;
    }
    .ticker-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
    .ticker-wrap::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
    .ticker {
      display: flex;
      gap: 56px;
      padding: 14px 0;
      animation: ticker-scroll 40s linear infinite;
      width: max-content;
    }
    @keyframes ticker-scroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .ticker-item {
      display: inline-flex; align-items: center; gap: 14px;
      font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
      font-size: 0.875rem;
      font-weight: 500;
      letter-spacing: 0;
      color: var(--ink);
      white-space: nowrap;
      text-transform: none;
    }
    .ticker-item .dot-s { width: 7px; height: 7px; border-radius: 999px; }
    .ticker-item .star {
      color: var(--amber-glow);
      font-size: 0.95rem;
    }

    /* ===== HERO V3, atelier ===== */

    /* Mouse spotlight */
    .spotlight {
      position: absolute;
      pointer-events: none;
      inset: 0;
      z-index: -1;
      background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 30%), rgba(var(--amber-glow-rgb), 0.13), transparent 60%);
      transition: opacity 400ms var(--ease);
    }

    /* Constellation canvas */
    .constellation {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      opacity: 0.7;
      pointer-events: none;
    }

    /* Morphing word carousel */
    .cycle {
      display: inline-grid;
      grid-template-areas: "stack";
      vertical-align: baseline;
      position: relative;
    }
    .cycle > span {
      grid-area: stack;
      opacity: 0;
      transform: translateY(28px);
      filter: blur(8px);
      transition: opacity 600ms var(--ease), transform 600ms var(--ease), filter 600ms var(--ease);
      will-change: opacity, transform, filter;
      white-space: nowrap;
    }
    .cycle > span.show {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
    .cycle > span.hide {
      opacity: 0;
      transform: translateY(-28px);
      filter: blur(8px);
    }
    .cycle .accent-grad { display: inline; }

    /* Cycle underline */
    .cycle::after {
      content: "";
      position: absolute;
      left: 0; right: 0;
      bottom: -6px;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(var(--amber-glow-rgb), 0.6), transparent);
      grid-area: stack;
      align-self: end;
      transform: translateY(14px);
    }

    /* Studio Index, editorial masthead module (hero) */
    .studio-index {
      margin-top: 56px;
      width: 100%;
      display: grid;
      grid-template-columns: 132px minmax(0, 1fr) 280px;
      gap: 0;
      align-items: stretch;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(22,24,28,0.55), rgba(15,16,17,0.55));
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    @media (max-width: 1024px) {
      .studio-index { grid-template-columns: 96px minmax(0, 1fr); }
      .studio-index .si-aside { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding: 22px 26px 24px; }
    }
    @media (max-width: 560px) {
      .studio-index { grid-template-columns: 1fr; }
      .studio-index .si-spine { flex-direction: row; align-items: center; justify-content: space-between; border-right: 0; border-bottom: 1px solid var(--line); padding: 14px 20px; }
      .studio-index .si-spine-rule, .studio-index .si-spine-foot { display: none; }
    }

    /* Spine */
    .si-spine {
      border-right: 1px solid var(--line);
      padding: 22px 18px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
    }
    .si-vol { display: flex; flex-direction: column; line-height: 1; }
    .si-vol-label {
      font-size: 0.62rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--dim);
    }
    .si-vol-num {
      font-family: 'Harabara Mais Demo', 'Coolvetica', 'Hanken Grotesk', sans-serif;
      font-size: 4.6rem;
      line-height: 0.85;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin-top: 4px;
      background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 50%, var(--amber-glow) 50%, var(--amber-glow) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .si-spine-meta {
      font-size: 0.6rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      line-height: 1.6;
    }
    .si-spine-meta > div + div { color: var(--dim); }
    .si-spine-rule {
      flex: 1;
      min-height: 24px;
      background:
        linear-gradient(180deg, transparent 0%, var(--line-bright) 50%, transparent 100%);
      width: 1px;
      margin-left: 4px;
      opacity: 0.6;
    }
    .si-spine-foot {
      display: flex; align-items: center; gap: 8px;
      font-size: 0.58rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .si-bullet {
      width: 6px; height: 6px; border-radius: 999px;
      background: var(--amber-glow);
      box-shadow: 0 0 10px rgba(var(--amber-glow-rgb), 0.7);
      animation: blink 1.6s ease-in-out infinite;
    }

    /* Index list */
    .si-list {
      list-style: none;
      padding: 18px 28px 22px;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .si-row {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) minmax(40px, 1fr) auto;
      align-items: baseline;
      gap: 14px;
      padding: 14px 0;
      border-bottom: 1px dashed rgba(255,255,255,0.06);
      position: relative;
      transition: background 220ms var(--ease), padding 220ms var(--ease);
    }
    .si-row:last-child { border-bottom: 0; }
    .si-row:hover { padding-left: 6px; padding-right: 6px; }
    .si-idx {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.7rem;
      letter-spacing: 0.16em;
      color: var(--dim);
      align-self: start;
      padding-top: 2px;
    }
    .si-row:hover .si-idx { color: var(--amber-glow); }
    .si-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .si-title {
      font-family: 'Hanken Grotesk', 'Inter', sans-serif;
      font-weight: 600;
      font-size: 1.55rem;
      letter-spacing: -0.018em;
      line-height: 1.1;
      color: var(--ink);
    }
    .si-title em {
      font-style: italic;
      font-weight: 400;
      color: var(--muted);
      letter-spacing: 0;
    }
    .si-sub {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.66rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--dim);
      margin-top: 4px;
    }
    .si-leaders {
      flex: 1;
      align-self: center;
      height: 1px;
      background-image: radial-gradient(circle, var(--line-bright) 1px, transparent 1px);
      background-size: 5px 1px;
      background-repeat: repeat-x;
      background-position: 0 50%;
      opacity: 0.7;
      min-width: 30px;
    }
    .si-out {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.78rem;
      letter-spacing: 0.06em;
      color: var(--ink);
      white-space: nowrap;
      display: inline-flex; align-items: center; gap: 8px;
      justify-self: end;
    }
    .si-row--now .si-out { color: var(--amber-glow); }
    .si-now-dot {
      width: 7px; height: 7px; border-radius: 999px;
      background: var(--amber-glow);
      box-shadow: 0 0 0 4px rgba(var(--amber-glow-rgb), 0.12), 0 0 12px rgba(var(--amber-glow-rgb), 0.55);
      animation: blink 1.5s ease-in-out infinite;
    }

    /* Aside */
    .si-aside {
      border-left: 1px solid var(--line);
      padding: 22px 22px 24px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      justify-content: space-between;
    }
    .si-quote {
      position: relative;
      margin: 0;
      padding-left: 22px;
    }
    .si-quote-mark {
      position: absolute;
      left: -2px;
      top: -16px;
      font-family: 'Hanken Grotesk', serif;
      font-size: 3.6rem;
      line-height: 1;
      color: var(--amber-glow);
      opacity: 0.55;
    }
    .si-quote blockquote {
      font-family: 'Hanken Grotesk', 'Inter', sans-serif;
      font-weight: 500;
      font-size: 0.98rem;
      line-height: 1.4;
      letter-spacing: -0.005em;
      color: var(--ink);
      margin: 0;
    }
    .si-quote figcaption {
      margin-top: 10px;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.6rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--dim);
    }

    /* Sprint cadence */
    .si-sprint { display: flex; flex-direction: column; gap: 10px; }
    .si-sprint-head {
      display: flex; align-items: baseline; justify-content: space-between;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.6rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .si-sprint-head span + span { color: var(--dim); }
    .si-sprint-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 5px;
      padding: 6px 0 2px;
    }
    .si-sprint-grid .d {
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 2px;
      transform: scale(0.6);
      opacity: 0;
      animation: si-pop 480ms var(--ease) forwards;
    }
    .si-sprint-grid .d-done {
      background: rgba(var(--amber-glow-rgb), 0.55);
      box-shadow: inset 0 0 0 1px rgba(var(--amber-glow-rgb), 0.7);
    }
    .si-sprint-grid .d-now {
      background: var(--amber-glow);
      box-shadow: 0 0 0 2px rgba(var(--amber-glow-rgb), 0.18), 0 0 8px rgba(var(--amber-glow-rgb), 0.7);
      animation: si-pop 480ms var(--ease) forwards, blink 1.6s ease-in-out 600ms infinite;
    }
    .si-sprint-grid .d-todo {
      background: transparent;
      box-shadow: inset 0 0 0 1px var(--line-bright);
    }
    @keyframes si-pop {
      to { transform: scale(1); opacity: 1; }
    }
    .si-sprint-legend {
      display: flex; gap: 12px;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.56rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--dim);
    }
    .si-sprint-legend span { display: inline-flex; align-items: center; gap: 6px; }
    .si-sprint-legend .d { width: 8px; height: 8px; border-radius: 2px; }
    .si-sprint-legend .d-done { background: rgba(var(--amber-glow-rgb), 0.55); }
    .si-sprint-legend .d-now { background: var(--amber-glow); }
    .si-sprint-legend .d-todo { background: transparent; box-shadow: inset 0 0 0 1px var(--line-bright); }

    /* Bento dashboard (legacy, kept for fallback) */
    .dashboard {
      position: relative;
      background: linear-gradient(180deg, rgba(22,24,28,0.88), rgba(15,16,17,0.92));
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 16px 18px 18px;
      min-height: 200px;
      overflow: hidden;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .panel::before {
      content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10) 30%, rgba(255,255,255,0.10) 70%, transparent);
    }
    .panel-head {
      display: flex; align-items: center; justify-content: space-between;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.6rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
      padding-bottom: 12px;
      margin-bottom: 12px;
      border-bottom: 1px solid var(--line);
    }
    .panel-head .live-dot {
      display: inline-flex; align-items: center; gap: 6px;
      color: var(--amber-glow);
    }
    .panel-head .live-dot::before {
      content: ""; width: 6px; height: 6px; border-radius: 999px;
      background: var(--amber-glow);
      box-shadow: 0 0 8px rgba(var(--amber-glow-rgb), 0.7);
      animation: blink 1.4s ease-in-out infinite;
    }

    /* Terminal */
    .term {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.72rem;
      line-height: 1.6;
      color: var(--muted);
    }
    .term .l { display: block; min-height: 1.6em; white-space: pre; }
    .term .prompt { color: var(--amber-glow); }
    .term .ok { color: #4ade80; }
    .term .ink { color: var(--ink); }
    .term .dim { color: var(--dim); }
    .term .caret {
      display: inline-block;
      width: 7px; height: 12px;
      background: var(--amber-glow);
      vertical-align: middle;
      margin-left: 1px;
      animation: caret 1s steps(1) infinite;
    }
    @keyframes caret { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }

    /* Stream */
    .stream-body {
      font-family: 'Hanken Grotesk', sans-serif;
      font-size: 0.95rem;
      line-height: 1.45;
      color: var(--ink);
      letter-spacing: -0.005em;
    }
    .stream-body .think {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--dim);
      display: block;
      margin-bottom: 6px;
    }
    .stream-body .typed::after {
      content: "▮";
      color: var(--amber-glow);
      animation: caret 1s steps(1) infinite;
      margin-left: 2px;
    }

    /* Stats counter */
    .stat-big {
      font-family: 'Hanken Grotesk', sans-serif;
      font-weight: 700;
      font-size: 3.2rem;
      letter-spacing: -0.03em;
      line-height: 1;
      color: var(--ink);
    }
    .stat-big .delta {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--amber-glow);
      letter-spacing: 0.04em;
      margin-left: 6px;
      vertical-align: middle;
    }
    .stat-sub {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--dim);
      margin-top: 4px;
    }
    .sparkline {
      margin-top: 12px;
      width: 100%; height: 44px;
      display: block;
    }
    .sparkline path.line {
      fill: none;
      stroke: var(--amber-glow);
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 6px rgba(var(--amber-glow-rgb), 0.5));
    }
    .sparkline path.area {
      fill: url(#sparkGrad);
      opacity: 0.6;
    }

    /* Eval list */
    .eval {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.72rem;
      color: var(--muted);
    }
    .eval-row {
      display: flex; align-items: center; gap: 8px;
      padding: 4px 0;
    }
    .eval-row .check {
      width: 14px; height: 14px;
      border-radius: 999px;
      flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 0.65rem;
      font-weight: 700;
    }
    .eval-row.done .check {
      background: rgba(74, 222, 128, 0.12);
      border: 1px solid rgba(74, 222, 128, 0.4);
      color: #4ade80;
    }
    .eval-row.run .check {
      border: 1px solid rgba(var(--amber-glow-rgb), 0.5);
      color: var(--amber-glow);
      animation: spin 1.4s linear infinite;
    }
    .eval-row.idle .check {
      border: 1px solid var(--line-bright);
      color: var(--dim);
    }
    @keyframes spin { to { transform: rotate(360deg) } }
    .eval-row .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
    .eval-row .count { color: var(--dim); font-size: 0.66rem; }
    .eval-bar {
      margin-top: 12px;
      height: 4px; border-radius: 999px;
      background: rgba(255,255,255,0.06);
      overflow: hidden;
    }
    .eval-bar > span {
      display: block; height: 100%;
      background: linear-gradient(90deg, var(--amber-start), var(--amber-glow));
      box-shadow: 0 0 12px rgba(var(--amber-glow-rgb), 0.5);
      transition: width 600ms var(--ease);
    }

    /* Avail dot in nav */
    .avail {
      display: inline-flex; align-items: center; gap: 7px;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--muted);
      padding-right: 14px;
      margin-right: 6px;
      border-right: 1px solid var(--line);
    }
    .avail .dot-mini { width: 6px; height: 6px; border-radius: 999px; background: #4ade80; box-shadow: 0 0 10px rgba(74, 222, 128, 0.7); }
    @media (max-width: 880px) { .avail { display: none; } }

    /* Palette widget */
    .palette-widget {
      display: none !important;
      position: fixed;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 60;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
      padding: 14px 12px;
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(22,24,28,0.85), rgba(15,16,17,0.85));
      border: 1px solid var(--line);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 18px 60px -12px rgba(0,0,0,0.7);
    }
    .palette-widget::before {
      content:""; position:absolute; inset: 0 0 auto 0; height:1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0.08) 80%, transparent);
      pointer-events:none; border-radius: 14px 14px 0 0;
    }
    .palette-widget .palette-label {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.62rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 700;
      padding: 0 2px 4px;
      width: 100%;
      text-align: center;
    }
    .palette-swatch {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.10);
      cursor: pointer;
      padding: 0;
      background: linear-gradient(135deg, var(--s), var(--e));
      transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
      position: relative;
    }
    .palette-swatch:hover { transform: scale(1.12); border-color: rgba(255,255,255,0.25); }
    .palette-swatch.active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px rgba(255,255,255,0.55); }
    .palette-swatch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px rgba(255,255,255,0.7); }

    @media (max-width: 640px) {
      .palette-widget { right: 10px; padding: 10px 8px; gap: 8px; }
      .palette-swatch { width: 18px; height: 18px; }
      .palette-widget .palette-label { font-size: 0.55rem; }
    }

    /* ============ MOBILE OPTIMIZATIONS ============ */
    @media (max-width: 768px) {
      html { scroll-padding-top: 64px; }

      /* Tighter section padding */
      section .max-w-\[1200px\].pt-28 { padding-top: 4.5rem; }
      section .max-w-\[1200px\].pb-28,
      section .max-w-\[1200px\].pb-32 { padding-bottom: 4.5rem; }

      /* Hero: tame the ghost so it doesn't push horizontal scroll */
      .hero-cinema { min-height: auto; }
      .hero-ghost {
        font-size: clamp(140px, 38vw, 220px);
        top: 28%;
      }
      .hero-h1 {
        font-size: clamp(44px, 12vw, 72px);
      }
      .hero-cinema .relative.max-w-\[1300px\] {
        padding-top: 1.5rem;
        padding-bottom: 2.5rem;
      }
      .hero-cinema p {
        font-size: 1rem;
      }
      .hero-cinema .btn { padding: 11px 16px; font-size: 0.95rem; }
      .hero-cinema .flex.flex-wrap.gap-3 .btn { flex: 1 1 auto; justify-content: center; }
      .hud-corner { transform: scale(0.7); }

      /* Section display headings step down */
      .display.text-4xl { font-size: 2rem; line-height: 1.05; }
      h2.display.text-4xl.md\:text-6xl { font-size: 2.25rem; }

      /* Service cards */
      .service-card { padding: 22px 0; gap: 14px; }
      .service-card h3 { font-size: 1.5rem; }

      /* Process rail already stacks at 768. Tighten spacing */
      .process-step { padding-top: 26px; }

      /* Product cards: shrink interior padding */
      #products .card { padding: 1.5rem; }
      #products .card .card { padding: 1.25rem; }
      #products .display.text-3xl { font-size: 1.6rem; }
      #products .display.text-5xl { font-size: 2.75rem; }
      #products .display.text-6xl { font-size: 3rem; }
      #products .grid.grid-cols-3 .mono.text-lg { font-size: 0.95rem; }

      /* About: tighten value grid borders */
      #about .hairline-t.grid > div { padding: 1.5rem 0 !important; border-right: 0 !important; }

      /* Contact form */
      #contact form .grid.sm\:grid-cols-2 { grid-template-columns: 1fr; gap: 1.75rem; }
      #contact aside { padding-left: 0 !important; border-left: 0 !important; padding-top: 2rem; border-top: 1px solid var(--line); }
      #contact .display.text-2xl { font-size: 1.35rem; }

      /* Faq questions */
      .faq-q .q-text { font-size: 1rem; }
      .faq-q { padding: 22px 0; }

      /* Footer cleanup */
      footer .grid.md\:grid-cols-12 { gap: 2rem; }
      footer .grid.grid-cols-3 { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
      footer .py-5.flex { flex-direction: column; gap: 10px; align-items: flex-start !important; }

      /* Ticker padding */
      .ticker { gap: 36px; }
      .ticker-item { font-size: 0.85rem; }
      .ticker-wrap::before, .ticker-wrap::after { width: 48px; }

      /* Nav pill smaller */
      header .btn-pill { padding: 6px 10px; font-size: 0.72rem; }
    }

    @media (max-width: 480px) {
      .hero-h1 { font-size: clamp(40px, 11.5vw, 56px); }
      .hero-ghost { font-size: clamp(120px, 42vw, 180px); }
      h2.display.text-4xl.md\:text-6xl { font-size: 1.9rem; }
      .display.text-4xl { font-size: 1.75rem; }
      #products .display.text-3xl { font-size: 1.4rem; }
      #products .display.text-5xl { font-size: 2.4rem; }
      #products .grid.grid-cols-3 > div { padding: 0.6rem; }
      #products .grid.grid-cols-3 .mono.text-lg { font-size: 0.85rem; }
      .pill { padding: 4px 10px; font-size: 0.7rem; }
    }