/* ── Reset ─────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: "Source Sans 3", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
    body.locked { overflow: hidden; }

    /* ── Animations ─────────────────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeLeft {
      from { opacity: 0; transform: translateX(24px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .fi { opacity: 0; animation: fadeUp .75s ease forwards; }
    .fi:nth-child(1) { animation-delay: .05s; }
    .fi:nth-child(2) { animation-delay: .18s; }
    .fi:nth-child(3) { animation-delay: .30s; }
    .fi:nth-child(4) { animation-delay: .42s; }
    .fi:nth-child(5) { animation-delay: .54s; }
    .fi-r { opacity: 0; animation: fadeLeft .8s .32s ease forwards; }

    /* ── Scroll reveal ──────────────────────────────────── */
    .reveal {
      opacity: 0; transform: translateY(28px);
      transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
    }
    .reveal.in { opacity: 1; transform: none; }
    .reveal-kids > * {
      opacity: 0; transform: translateY(18px);
      transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
    }
    .reveal-kids.in > *:nth-child(1) { opacity:1; transform:none; transition-delay:.04s; }
    .reveal-kids.in > *:nth-child(2) { opacity:1; transform:none; transition-delay:.14s; }
    .reveal-kids.in > *:nth-child(3) { opacity:1; transform:none; transition-delay:.24s; }
    .reveal-kids.in > *:nth-child(4) { opacity:1; transform:none; transition-delay:.34s; }
    .reveal-kids.in > *:nth-child(5) { opacity:1; transform:none; transition-delay:.44s; }
    .reveal-kids.in > *:nth-child(6) { opacity:1; transform:none; transition-delay:.54s; }

    /* ── Nav ────────────────────────────────────────────── */
    #main-nav { transition: box-shadow .3s; }
    #main-nav.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,.25); }
    .nav-link { position: relative; }
    .nav-link::after {
      content: ''; position: absolute; bottom: -3px; left: 0;
      width: 100%; height: 1.5px; background: #C8A96E;
      transform: scaleX(0); transform-origin: left;
      transition: transform .25s ease;
    }
    .nav-link:hover::after { transform: scaleX(1); }

    /* ── Off-canvas ─────────────────────────────────────── */
    #oc-overlay {
      position: fixed; inset: 0; z-index: 100;
      background: rgba(10,21,32,.7);
      opacity: 0; pointer-events: none;
      transition: opacity .32s ease;
      backdrop-filter: blur(4px);
    }
    #oc-overlay.open { opacity: 1; pointer-events: all; }
    #offcanvas {
      position: fixed; top: 0; right: 0; bottom: 0; z-index: 101;
      width: min(340px, 88vw);
      background: #0A1520;
      transform: translateX(100%);
      transition: transform .38s cubic-bezier(.32,.72,0,1);
      display: flex; flex-direction: column;
      box-shadow: -8px 0 40px rgba(0,0,0,.4);
      border-left: 1px solid rgba(200,169,110,.12);
    }
    #offcanvas.open { transform: translateX(0); }

    /* Hamburger */
    .hline { display: block; width: 22px; height: 1.5px; background: #C8A96E; transition: all .26s; margin: 4px 0; }
    .ham-open .hline:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
    .ham-open .hline:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .ham-open .hline:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

    /* ── Hero grid background ───────────────────────────── */
    .hero-grid {
      background-image:
        linear-gradient(rgba(200,169,110,0.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,169,110,0.024) 1px, transparent 1px);
      background-size: 64px 64px;
    }

    /* ── Workflow nodes ──────────────────────────────────── */
    .wf-node {
      padding: 14px 16px; cursor: pointer;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      transition: background .2s, border-color .2s;
      position: relative;
    }
    .wf-node:hover { background: rgba(255,255,255,0.06); border-color: rgba(200,169,110,0.25); }
    .wf-node.integration { border: 1.5px dashed rgba(91,138,110,0.45); }
    .wf-node.integration:hover { background: rgba(91,138,110,0.07); }
    .wf-arrow {
      position: absolute; right: -13px; top: 50%;
      transform: translateY(-50%); z-index: 10;
      display: flex; align-items: center;
    }
    .wf-col { flex: 1 1 0%; display: flex; flex-direction: column; gap: 8px; position: relative; }

    /* ── Metric rows ─────────────────────────────────────── */
    .metric-row {
      display: grid; grid-template-columns: 1fr 120px 120px;
      border-top: 1px solid #E8E8E4; padding: 12px 0;
      cursor: pointer; transition: background .15s;
    }
    .metric-row:hover { background: #F5F3EE; }

    /* ── Partner / feature cards ─────────────────────────── */
    .partner-card {
      border: 1px solid #E2E2DC; padding: 32px 28px;
      background: white; transition: border-color .2s, box-shadow .2s;
    }
    .partner-card:hover { border-color: #1A3A5C; box-shadow: 0 4px 20px rgba(26,58,92,.07); }

    .feature-card {
      background: #FAFAF7; border: 1px solid #E2E2DC;
      padding: 28px 24px; transition: border-color .2s, transform .2s;
    }
    .feature-card:hover { border-color: #C8A96E; transform: translateY(-2px); }

    /* ── Stack item ─────────────────────────────────────── */
    .stack-item {
      background: #FAFAF7; border: 1px solid #E8E8E4; padding: 12px 14px;
      transition: border-color .15s, background .15s;
    }
    .stack-item:hover { border-color: #1A3A5C; background: #EEF2F7; }

    /* ── Dark integration steps ──────────────────────────── */
    .int-step { padding: 28px 24px; transition: opacity .2s; }
    .int-step:hover { opacity: .9; }

    /* ── Buttons ─────────────────────────────────────────── */
    .btn-gold   { background: #C8A96E; color: #0A1520; border: none; cursor: pointer; transition: background .18s, transform .14s, box-shadow .18s; }
    .btn-gold:hover { background: #b8996e; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(200,169,110,.35); }
    .btn-ghost-dark { background: transparent; color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.18); cursor: pointer; transition: border-color .18s, color .18s; }
    .btn-ghost-dark:hover { border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.85); }
    .btn-ghost-navy { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.25); cursor: pointer; transition: border-color .18s; }
    .btn-ghost-navy:hover { border-color: rgba(255,255,255,.6); }
    .btn-navy { background: #1A3A5C; color: #fff; border: none; cursor: pointer; transition: background .18s, transform .14s; }
    .btn-navy:hover { background: #153250; transform: translateY(-1px); }