:root{
    --ink:#06070c;
    --ink-2:#0a0b12;
    --ink-3:#0f1018;
    --line: rgba(255,255,255,0.06);
    --line-2: rgba(255,255,255,0.1);
    --text: #ECECF0;
    --muted: rgba(236,236,240,0.55);
    --muted-2: rgba(236,236,240,0.35);
    --violet: oklch(0.72 0.17 290);
    --violet-deep: oklch(0.55 0.20 285);
    --violet-glow: oklch(0.72 0.17 290 / 0.18);
  }
  html, body { background: var(--ink); color: var(--text); }
  body {
    font-family: 'Geist', Inter, system-ui, sans-serif;
    font-feature-settings: "ss01","cv11";
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  ::selection { background: var(--violet-glow); color: #fff; }

  .serif { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
  .mono { font-family: 'Geist Mono', ui-monospace, monospace; }

  /* Background atmospherics */
  .bg-grain::before {
    content:"";
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.45'/></svg>");
    opacity: 0.04;
    pointer-events: none;
    z-index: 1;
    /* mix-blend-mode: overlay was forcing a full-viewport reblend on every */
    /* star animation / scroll tick — extremely expensive. Dropped for fluidity. */
  }

  .vignette {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
      radial-gradient(60% 50% at 50% 0%, oklch(0.72 0.17 290 / 0.10), transparent 70%),
      radial-gradient(80% 60% at 100% 100%, oklch(0.55 0.20 285 / 0.08), transparent 70%),
      radial-gradient(60% 50% at 0% 50%, oklch(0.45 0.15 250 / 0.06), transparent 70%);
  }

  /* Starfield layers */
  .stars-layer {
    position: fixed; inset: -10%;
    pointer-events: none; z-index: 0;
  }
  .star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    /* will-change removed — was promoting hundreds of stars to their own GPU */
    /* layers, blowing up video memory. Parent layer is promoted instead. */
  }
  .stars-layer { will-change: transform; transform: translateZ(0); }
  @keyframes twinkle {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 1; }
  }
  .star.tw { animation: twinkle 6s ease-in-out infinite; }

  /* Shooting-star comet that tracks scroll */
  #comet {
    position: fixed;
    left: 0; top: 0;
    width: 560px; height: 560px;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
    transform: translate3d(-50vw, -50vh, 0) rotate(28deg);
    /* No left/top transition — JS updates a transform inside a rAF loop, */
    /* which is buttery and avoids fighting CSS transitions on every scroll. */
  }
  /* Soft violet halo glow */
  #comet::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 50%, oklch(0.78 0.17 290 / 0.28) 0%, oklch(0.55 0.20 285 / 0.08) 30%, transparent 65%);
    /* blur(38px) on a 560px element rasterized every frame was a major cost. */
    filter: blur(22px);
    animation: cometPulse 4.5s ease-in-out infinite;
  }
  /* Trail + bright head */
  #comet::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 420px; height: 2px;
    transform: translate(-50%, -50%);
    background:
      /* head spark */
      radial-gradient(ellipse 18px 6px at calc(100% - 6px) 50%, #fff 0%, oklch(0.92 0.10 290 / 0.95) 35%, transparent 75%),
      /* tail */
      linear-gradient(90deg,
        transparent 0%,
        oklch(0.78 0.14 290 / 0.0) 8%,
        oklch(0.82 0.14 290 / 0.35) 45%,
        oklch(0.92 0.12 290 / 0.85) 88%,
        #fff 100%);
    border-radius: 999px;
    /* Single drop-shadow instead of stacked — stacked drop-shadows are very */
    /* expensive (each is a separate raster pass). */
    filter: drop-shadow(0 0 10px oklch(0.75 0.17 290 / 0.8));
    animation: cometStreak 4.5s ease-in-out infinite;
  }
  @keyframes cometPulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.06); }
  }
  @keyframes cometStreak {
    0%, 100% { opacity: 0.85; width: 380px; }
    50%      { opacity: 1;    width: 460px; }
  }

  /* Portrait — small violet ripples on click */
  #portraitCard { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
  #portraitCard:active { transform: scale(0.99); }

  .energy-ripple {
    position: absolute;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
    border-radius: 50%;
    border: 2px solid oklch(0.85 0.16 290 / 0.85);
    box-shadow: 0 0 16px oklch(0.78 0.17 290 / 0.6), inset 0 0 12px oklch(0.85 0.14 290 / 0.4);
    pointer-events: none;
    will-change: transform, opacity;
    transform: scale(0.3);
    opacity: 0;
    animation: rippleOut .8s cubic-bezier(.22,.61,.36,1) forwards;
  }
  @keyframes rippleOut {
    0%   { transform: scale(0.3); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: scale(2.8); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .energy-ripple { animation: none; opacity: 0; }
    .star.tw, .spin-slow, .spin-rev, .marquee-track, .float-slow,
    #comet::before, #comet::after, .live-dot { animation: none !important; }
  }

  /* Scroll-to-top button */
  #scrollTop {
    position: fixed;
    right: 1.75rem;
    bottom: 1.75rem;
    z-index: 60;
    width: 48px; height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
    border: 1px solid var(--line-2);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .35s ease, transform .35s ease, border-color .25s ease, background .25s ease;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,0.6);
  }
  #scrollTop.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  #scrollTop:hover {
    border-color: oklch(0.72 0.17 290 / 0.6);
    background: linear-gradient(180deg, oklch(0.72 0.17 290 / 0.18), rgba(255,255,255,0.02));
    box-shadow: 0 0 0 1px oklch(0.72 0.17 290 / 0.25), 0 20px 50px -20px oklch(0.55 0.20 285 / 0.6);
  }
  #scrollTop:hover svg { transform: translateY(-2px); }
  #scrollTop svg { transition: transform .25s ease; position: relative; z-index: 1; }
  #scrollTop .st-ring {
    position: absolute;
    inset: -1px;
    border-radius: 999px;
    pointer-events: none;
    background: conic-gradient(from 0deg, transparent 0%, oklch(0.72 0.17 290 / 0.55) var(--p,0%), transparent calc(var(--p,0%) + 0.5%));
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%);
            mask: radial-gradient(circle, transparent 60%, #000 62%);
  }

  /* Generic */
  .glass {
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
    border: 1px solid var(--line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .hairline { border: 1px solid var(--line); }
  .hairline-2 { border: 1px solid var(--line-2); }
  .ring-violet { box-shadow: 0 0 0 1px oklch(0.72 0.17 290 / 0.25), 0 30px 80px -30px oklch(0.55 0.20 285 / 0.5); }

  .text-grad {
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.55) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .violet-grad {
    background: linear-gradient(180deg, oklch(0.85 0.13 290), oklch(0.65 0.18 285));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }

  /* Buttons */
  .btn-primary {
    position: relative;
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.95rem 1.4rem;
    background: linear-gradient(180deg, #fff, #d9d9e1);
    color: #06070c;
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: -0.01em;
    font-size: 14px;
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 20px 50px -20px rgba(255,255,255,0.25);
  }
  .btn-primary:hover { transform: translateY(-1px); }
  .btn-ghost {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.95rem 1.4rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line-2);
    color: #fff;
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: -0.01em;
    font-size: 14px;
    transition: background .25s, border-color .25s;
  }
  .btn-ghost:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2); }
  .btn-violet {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(180deg, oklch(0.72 0.17 290), oklch(0.55 0.20 285));
    color: #fff;
    border-radius: 999px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.01em;
    box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 20px 50px -20px oklch(0.55 0.20 285 / 0.8);
    transition: transform .25s ease;
  }
  .btn-violet:hover { transform: translateY(-1px); }

  /* Cards */
  .card {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
    border: 1px solid var(--line);
    border-radius: 24px;
    transition: border-color .35s ease, transform .35s ease, background .35s ease;
  }
  .card:hover {
    border-color: rgba(167,139,250,0.25);
    background: linear-gradient(180deg, rgba(167,139,250,0.04), rgba(255,255,255,0.005));
  }
  .card-aura::before {
    content: "";
    position: absolute; inset: -1px;
    border-radius: inherit;
    background: radial-gradient(120px 80px at var(--mx,50%) var(--my,0%), oklch(0.72 0.17 290 / 0.22), transparent 60%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
  }
  .card-aura:hover::before { opacity: 1; }

  /* Marquee */
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .marquee-track { animation: marquee 60s linear infinite; }

  /* Reveal */
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
  .reveal.in { opacity: 1; transform: translateY(0); }

  /* Tag pill */
  .pill {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    background: rgba(255,255,255,0.025);
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: 'Geist Mono', monospace;
    font-weight: 500;
  }
  .pill .dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: oklch(0.78 0.16 145);
    box-shadow: 0 0 10px oklch(0.78 0.16 145 / 0.8);
  }

  /* Form */
  .field {
    width: 100%;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    color: #fff;
    font-size: 15px;
    transition: border-color .2s, background .2s, box-shadow .2s;
  }
  .field:focus { outline: none; border-color: oklch(0.72 0.17 290 / 0.6); background: rgba(167,139,250,0.04); box-shadow: 0 0 0 4px oklch(0.72 0.17 290 / 0.1); }
  .field::placeholder { color: var(--muted-2); }
  select.field { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.5'/></svg>"); background-repeat: no-repeat; background-position: right 1.1rem center; }

  /* Page views — each page is now its own standalone HTML file, so the
     view wrapper is always visible (no SPA show/hide switching). */
  .page-view { display: block; }

  /* Cursor blink */
  .cursor-bar {
    display: inline-block;
    width: 2px; height: 0.85em;
    background: oklch(0.72 0.17 290);
    margin-left: 6px;
    transform: translateY(2px);
    animation: blink 1.05s steps(2) infinite;
    box-shadow: 0 0 12px oklch(0.72 0.17 290 / 0.8);
  }
  @keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

  /* Subtle grid overlay for hero */
  .grid-bg {
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(60% 60% at 50% 40%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, #000 30%, transparent 80%);
  }

  /* Orbit ring */
  .orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.04);
  }
  @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
  .spin-slow { animation: spin 80s linear infinite; }
  .spin-rev { animation: spin 120s linear infinite reverse; }

  /* Service number */
  .svc-num {
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    color: var(--muted-2);
    letter-spacing: 0.1em;
  }

  /* Services grid \u2014 force every card to identical height.
     `grid-auto-rows: 1fr` alone isn't reliable when the grid is
     content-sized; pairing it with an explicit min-height per row
     guarantees a clean, balanced 2x3 layout regardless of copy length. */
  .services-grid { grid-auto-rows: 1fr; }
  @media (min-width: 768px) {
    .services-grid > * { min-height: 320px; }
  }

  /* Logomark */
  .logomark {
    width: 28px; height: 28px;
    border-radius: 8px;
    background:
      radial-gradient(circle at 30% 30%, #fff 0%, transparent 35%),
      linear-gradient(135deg, oklch(0.72 0.17 290), oklch(0.45 0.18 280));
    box-shadow: 0 0 24px oklch(0.55 0.20 285 / 0.5), inset 0 0 0 1px rgba(255,255,255,0.15);
    position: relative;
  }
  .logomark::after {
    content:""; position:absolute; inset: 6px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.25);
  }

  /* Section labels */
  .eyebrow {
    display: inline-flex; align-items: center; gap: 0.65rem;
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .eyebrow::before {
    content: "";
    width: 18px; height: 1px;
    background: linear-gradient(90deg, transparent, oklch(0.72 0.17 290));
  }

  /* Headings */
  h1, h2, h3 { letter-spacing: -0.03em; }
  .h-display {
    font-size: clamp(48px, 8.2vw, 128px);
    line-height: 0.92;
    font-weight: 500;
    letter-spacing: -0.045em;
  }
  .h-section {
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.035em;
  }
  .h-card {
    font-size: 22px;
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -0.025em;
  }

  /* Project hover */
  .proj-img { transition: transform .9s cubic-bezier(.22,.61,.36,1), filter .9s ease; }
  .project-card:hover .proj-img { transform: scale(1.04); filter: saturate(1.1) brightness(1.05); }
  .project-card .arrow { transition: transform .4s ease; }
  .project-card:hover .arrow { transform: translate(4px,-4px); }

  /* Footer */
  footer a:hover { color: #fff; }

  /* Status dot */
  .live-dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: oklch(0.78 0.18 145);
    box-shadow: 0 0 0 0 oklch(0.78 0.18 145 / 0.7);
    animation: pulseDot 2.2s ease-out infinite;
  }
  @keyframes pulseDot {
    0% { box-shadow: 0 0 0 0 oklch(0.78 0.18 145 / 0.7); }
    100% { box-shadow: 0 0 0 12px transparent; }
  }

  /* Subtle floating */
  @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  .float-slow { animation: float 9s ease-in-out infinite; }

  /* Marquee fade edges */
  .marquee-mask {
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }

  /* Mobile burger */
  .burger-bars {
    position: relative;
    width: 18px; height: 12px;
    display: inline-block;
  }
  .burger-bars span {
    position: absolute;
    left: 0; right: 0;
    height: 1.5px;
    background: #fff;
    border-radius: 2px;
    transition: transform .3s cubic-bezier(.22,.61,.36,1), top .3s cubic-bezier(.22,.61,.36,1), opacity .2s;
  }
  .burger-bars span:nth-child(1) { top: 2px; }
  .burger-bars span:nth-child(2) { top: 9px; }
  #navBurger[aria-expanded="true"] .burger-bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
  #navBurger[aria-expanded="true"] .burger-bars span:nth-child(2) { top: 5px; transform: rotate(-45deg); }

  /* Mobile menu sheet open state */
  #mobileMenu.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Reduce hero vertical breathing on small phones so the stat-bar */
  /* doesn't get pushed off screen on landing */
  @media (max-width: 640px) {
    section.relative.min-h-screen { padding-top: 7rem; padding-bottom: 4rem; }
    section.py-32 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
    .h-display { letter-spacing: -0.035em; }
  }



    .seg-row { display:flex; gap:6px; background: rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07); border-radius:14px; padding:5px; }
    .seg-btn { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px; border-radius:10px; font-size:13px; line-height:1; color:rgba(255,255,255,0.55); cursor:pointer; transition:background .25s, color .25s, border-color .25s; border:1px solid transparent; background:transparent; font-family:inherit; }
    .seg-btn:hover { color:rgba(255,255,255,0.9); }
    .seg-btn .seg-off { font-size:9px; letter-spacing:.05em; font-family:'JetBrains Mono',ui-monospace,monospace; color:oklch(0.82 0.14 290); opacity:.9; }
    .seg-btn[data-active="true"] { color:#fff; background:oklch(0.62 0.19 290 / 0.20); border-color:oklch(0.72 0.17 290 / 0.42); }
    .seg-btn[data-active="true"] .seg-off { color:#fff; }
    .supp-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
    @media (min-width:640px){ .supp-grid { grid-template-columns:repeat(4,1fr); } }
    .supp-opt { display:flex; align-items:center; justify-content:center; text-align:center; padding:13px 8px; border-radius:12px; border:1px solid rgba(255,255,255,0.09); background:rgba(255,255,255,0.02); color:rgba(255,255,255,0.6); font-size:14px; cursor:pointer; transition:color .2s, background .2s, border-color .2s; user-select:none; }
    .supp-opt:hover { color:#fff; border-color:rgba(255,255,255,0.2); }
    .supp-opt input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
    .supp-opt > span { display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1.2; }
    .supp-hint { font-size:9px; letter-spacing:.05em; font-family:'JetBrains Mono',ui-monospace,monospace; text-transform:uppercase; color:rgba(255,255,255,0.35); }
    .supp-opt:has(input:checked) { color:#fff; background:oklch(0.62 0.19 290 / 0.16); border-color:oklch(0.72 0.17 290 / 0.45); }
    .supp-opt:has(input:checked) .supp-hint { color:oklch(0.82 0.14 290); }
    .supp-opt:has(input:focus-visible) { outline:2px solid oklch(0.72 0.17 290 / 0.6); outline-offset:2px; }
  


  .legal { }
  .legal section + section { margin-top: 2.75rem; }
  .legal h2 { font-size: 19px; font-weight: 500; color: #fff; margin-bottom: 0.9rem; letter-spacing: -0.01em; }
  .legal h2 .num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: oklch(0.78 0.14 290); margin-right: 0.6rem; }
  .legal p, .legal li { color: rgba(255,255,255,0.62); line-height: 1.75; font-size: 15px; }
  .legal p + p { margin-top: 0.85rem; }
  .legal ul { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; padding-left: 1.1rem; }
  .legal li { list-style: disc; }
  .legal a { color: oklch(0.82 0.14 290); text-decoration: none; border-bottom: 1px solid oklch(0.72 0.17 290 / 0.35); }
  .legal a:hover { color: #fff; }
  .legal strong { color: rgba(255,255,255,0.9); font-weight: 500; }
  .legal .fill { color: oklch(0.84 0.13 290); border-bottom: 1px dashed oklch(0.72 0.17 290 / 0.55); font-style: normal; }
  .legal-back { display: inline-flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.55); transition: color .2s; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 3rem; }
  .legal-back:hover { color: #fff; }