:root {
    --bg: #0a0e17;
    --bg-2: #0f1420;
    --surface: #141a28;
    --line: rgba(255,255,255,0.08);
    --line-strong: rgba(255,255,255,0.16);
    --fg: #e8ecf5;
    --fg-dim: #8590a8;
    --fg-mute: #5b6478;
    --cyan: #25d4f2;
    --blue: #3b82ff;
    --navy: #1a2540;
    --accent: var(--cyan);
    --radius: 14px;
    --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --font-serif: "Instrument Serif", Georgia, serif;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
  body { overflow-x: hidden; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  img { max-width: 100%; display: block; }
  ::selection { background: var(--cyan); color: #000; }

  /* Theme variants */
  body[data-theme="light"] {
    --bg: #f7f6f2;
    --bg-2: #efede6;
    --surface: #ffffff;
    --line: rgba(10,14,23,0.08);
    --line-strong: rgba(10,14,23,0.18);
    --fg: #0a0e17;
    --fg-dim: #5b6478;
    --fg-mute: #8590a8;
    --navy: #0a1a3a;
  }
  body[data-theme="hybrid"] {
    --bg: #0a0e17;
    --bg-2: #0f1420;
    --surface: #141a28;
    /* sections can opt-in light */
  }
  body[data-theme="hybrid"] .band-light {
    background: #f5f3ec;
    color: #0a0e17;
    --fg: #0a0e17;
    --fg-dim: #5b6478;
    --line: rgba(10,14,23,0.1);
    --line-strong: rgba(10,14,23,0.2);
    --surface: #ffffff;
  }

  /* Density */
  body[data-density="cozy"] { --pad-y: 72px; }
  body[data-density="comfy"] { --pad-y: 120px; }
  body[data-density="spacious"] { --pad-y: 180px; }

  /* Shared */
  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
  .rule { height: 1px; background: var(--line); width: 100%; }
  .rule-strong { height: 1px; background: var(--line-strong); width: 100%; }
  .mono { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-dim); }
  .serif { font-family: var(--font-serif); font-weight: 400; font-style: italic; }
  .h-display {
    font-family: var(--font-sans);
    font-size: clamp(48px, 7.5vw, 112px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    font-weight: 500;
    margin: 0;
  }
  .h-section {
    font-size: clamp(36px, 4.2vw, 64px);
    line-height: 1;
    letter-spacing: -0.025em;
    font-weight: 500;
    margin: 0;
  }
  .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-dim); }
  .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 22px; border-radius: 999px;
    font-weight: 500; font-size: 15px;
    transition: transform .2s ease, background .2s ease, color .2s ease;
  }
  .btn-primary { background: var(--fg); color: var(--bg); }
  .btn-ghost { border: 1px solid var(--line-strong); color: var(--fg); }
  .btn-cyan { background: var(--cyan); color: #001018; }

  /* Hover styles — driven by [data-hover] on body, default = lift */
  body[data-hover="lift"] .btn-primary:hover,
  body[data-hover="lift"] .btn-cyan:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37,212,242,0.25);
  }
  body[data-hover="lift"] .btn-ghost:hover { border-color: var(--fg); transform: translateY(-2px); }

  body[data-hover="swap"] .btn-primary:hover { background: var(--cyan); color: #001018; }
  body[data-hover="swap"] .btn-ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  body[data-hover="swap"] .btn-cyan:hover { background: var(--fg); color: var(--bg); }

  body[data-hover="glow"] .btn-primary:hover,
  body[data-hover="glow"] .btn-cyan:hover { box-shadow: 0 0 0 3px color-mix(in oklab, var(--cyan) 30%, transparent), 0 0 24px var(--cyan); }
  body[data-hover="glow"] .btn-ghost:hover { border-color: var(--cyan); box-shadow: 0 0 16px color-mix(in oklab, var(--cyan) 30%, transparent); }

  body[data-hover="underline"] .btn:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }

  body[data-hover="none"] .btn:hover { opacity: 0.85; }

  /* Navbar */
  .nav {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(16px);
    background: color-mix(in oklab, var(--bg) 75%, transparent);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
  .nav-logo { display: flex; align-items: center; gap: 10px; }
  .nav-logo img { height: 28px; width: auto; }
  .nav-links { display: flex; gap: 28px; font-size: 14px; color: var(--fg-dim); }
  .nav-links a:hover { color: var(--fg); }
  .nav-right { display: flex; gap: 12px; align-items: center; }

  /* Footer */
  .foot { border-top: 1px solid var(--line); padding: 56px 0 40px; }
  .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
  .foot h5 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-dim); margin: 0 0 14px; font-weight: 500; }
  .foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
  .foot-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 56px; font-size: 13px; color: var(--fg-mute); }

  /* Grid overlay (techy) */
  .grid-bg {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(to right, var(--line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--line) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
  }

  /* Animated dot pulse */
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .6; transform: scale(0.85); }
  }
  .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: pulse 2s ease-in-out infinite; }

  /* Workflow canvas */
  .wf-node {
    position: absolute;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    display: flex; align-items: center; gap: 8px;
    color: var(--fg);
    white-space: nowrap;
  }
  .wf-node .dot { width: 6px; height: 6px; border-radius: 50%; }

  @keyframes flow {
    0% { stroke-dashoffset: 200; }
    100% { stroke-dashoffset: 0; }
  }
  .wf-line { stroke-dasharray: 6 6; animation: flow 2s linear infinite; }

  @keyframes travel {
    0% { offset-distance: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
  }

  /* Marquee */
  @keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .marquee { display: flex; gap: 48px; animation: marquee 30s linear infinite; width: max-content; }

  /* Scroll reveal */
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity: 1; transform: translateY(0); }

  /* Service card */
  .svc {
    position: relative;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color .2s ease, transform .2s ease;
    overflow: hidden;
  }
  .svc:hover { border-color: var(--line-strong); }
  .svc-num { font-family: var(--font-mono); font-size: 11px; color: var(--fg-mute); }
  .svc h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin: 10px 0 8px; }
  .svc p { margin: 0; color: var(--fg-dim); font-size: 14.5px; line-height: 1.55; }
  .svc-list { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-dim); }
  .svc-list li::before { content: "▸ "; color: var(--cyan); }

  /* Section */
  .section { padding: var(--pad-y, 120px) 0; position: relative; }

  /* Large number stat */
  .stat-num { font-family: var(--font-sans); font-weight: 500; font-size: clamp(56px, 8vw, 120px); line-height: 1; letter-spacing: -0.04em; }

  /* Input */
  .inp {
    background: var(--bg-2); border: 1px solid var(--line-strong); color: var(--fg);
    padding: 14px 16px; border-radius: 10px; font: inherit; font-size: 14.5px;
    width: 100%;
  }
  .inp:focus { outline: none; border-color: var(--cyan); }

  /* Responsive */
  @media (max-width: 900px) {
    .wrap { padding: 0 20px; }
    .nav-links { display: none; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  }