/* Ported verbatim from source <head> <style> blocks. */

    html, body { background: #0C0B0A; color: #F5F0E8; font-family: 'Inter Tight', sans-serif; }
    .font-display { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 144, 'SOFT' 80, 'wght' 500; letter-spacing: -0.02em; }
    .font-mono { font-family: 'IBM Plex Mono', monospace; }

    .grain::before { content:""; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); opacity:0.05; pointer-events:none; z-index:1; mix-blend-mode:overlay; }

    #heroCanvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

    .drift { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; opacity:0.5; will-change:transform; }
    @keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(80px,-40px) scale(1.15); } }
    @keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-60px,50px) scale(0.85); } }
    .drift-a { animation: drift1 14s ease-in-out infinite; }
    .drift-b { animation: drift2 18s ease-in-out infinite; }

    .scanline { position:absolute; left:0; right:0; height:1px; background: linear-gradient(90deg, transparent, #00D68F, transparent); opacity:0.5; will-change:transform; }

    .card { background: linear-gradient(180deg, rgba(245,240,232,0.02) 0%, rgba(245,240,232,0) 100%); border: 1px solid #2A2620; transition: border-color 250ms ease, background 250ms ease; }
    .card:hover { border-color: #3A342B; }
    .bento-card { background: linear-gradient(180deg, rgba(245,240,232,0.02) 0%, rgba(245,240,232,0) 100%); border: 1px solid #2A2620; overflow: hidden; transition: all 300ms cubic-bezier(0.22, 1, 0.36, 1); }
    .bento-card:hover { border-color: #00D68F; transform: translateY(-2px); box-shadow: 0 24px 60px -20px rgba(0,214,143,0.18); }

    .ticker { animation: ticker 40s linear infinite; }
    @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    .reveal { opacity: 0; transform: translateY(14px); }
    .divider { height:1px; background: linear-gradient(90deg, transparent, #2a2620, transparent); }
    ::selection { background: #00D68F; color: #0C0B0A; }

    .mega-panel { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(-6px); opacity:0; pointer-events:none; transition:opacity 220ms ease, transform 220ms ease; }
    .mega-panel::before { content:""; position:absolute; top:-28px; left:-48px; right:-48px; height:32px; }
    .mega-trigger { }
    .mega-trigger:hover .mega-panel,
    .mega-trigger:focus-within .mega-panel,
    .mega-trigger.is-open .mega-panel,
    .mega-panel:hover { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }.kinetic-letter { display:inline-block; font-family:'Fraunces', serif; font-style:italic; font-variation-settings:'opsz' 144, 'SOFT' 30, 'wght' 500; transition:font-variation-settings 400ms cubic-bezier(0.22, 1, 0.36, 1), color 400ms ease; will-change:font-variation-settings; }

    .magnet { will-change: transform; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }

    .spotlight { position:relative; overflow:hidden; }
    .spotlight::before { content:""; position:absolute; inset:0; opacity:0; background:radial-gradient(400px circle at var(--x, 50%) var(--y, 50%), rgba(0,214,143,0.18), transparent 50%); transition:opacity 300ms ease; pointer-events:none; }
    .spotlight:hover::before { opacity:1; }

    .tab-indicator { transition:transform 500ms cubic-bezier(0.22, 1, 0.36, 1), width 500ms cubic-bezier(0.22, 1, 0.36, 1); }
    .tab-btn { color: #9B968C; }
    .tab-btn:hover { color: #F5F0E8; }
    .tab-btn[aria-selected="true"] { color: #F5F0E8; }
    .tab-btn[aria-selected="true"] .tab-dot { opacity: 1; box-shadow: 0 0 8px rgba(0,214,143,0.7); }

    /* Flow pipeline node highlight */
    .flow-node-active { fill: rgba(0,214,143,0.18) !important; stroke: #00D68F !important; transition: fill 250ms ease, stroke 250ms ease; }
    .ai-core-ping { filter: drop-shadow(0 0 14px #5DECB3) drop-shadow(0 0 6px #00D68F); }

    /* Systems map */
    .sys-edge { stroke: rgba(0,214,143,0.22); stroke-width: 1; fill: none; transition: stroke 400ms ease, stroke-width 400ms ease; }
    .sys-edge-active { stroke: rgba(0,214,143,0.9); stroke-width: 1.5; }
    .sys-node { stroke: rgba(0,214,143,0.35); stroke-width: 1.2; transition: stroke 400ms ease, stroke-width 400ms ease; }
    .sys-node-halo { transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1); }
    .sys-node-label { transition: fill 400ms ease; }
    .sys-node-group:hover .sys-node { stroke: #00D68F; stroke-width: 2; }
    .sys-node-group:hover .sys-node-halo { opacity: 1; }
    .sys-node-group:hover .sys-node-label { fill: #F5F0E8; }
    .sys-hub-text { pointer-events: none; }
    .sys-pulse { fill: #5DECB3; }

    /* Hub subtle pulse */
    .sys-hub {
      transform-origin: 200px 200px;
      animation: hubPulse 4s ease-in-out infinite;
    }
    .sys-hub-glow {
      transform-origin: 200px 200px;
      animation: hubGlow 4s ease-in-out infinite;
    }
    @keyframes hubPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.03); }
    }
    @keyframes hubGlow {
      0%, 100% { opacity: 0.18; transform: scale(1); }
      50% { opacity: 0.32; transform: scale(1.1); }
    }

    /* Slowly rotating dashed ring */
    .sys-ring-rotate {
      animation: sysRotate 80s linear infinite;
    }
    @keyframes sysRotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Hub surface shine rotating subtly */
    .sys-hub-ring {
      transform-origin: 200px 200px;
      animation: sysHubRing 24s linear infinite;
    }
    @keyframes sysHubRing {
      from { transform: rotate(0deg); }
      to { transform: rotate(-360deg); }
    }

    /* Ambient concentric ripples from hub */
    .sys-ripple {
      transform-origin: 200px 200px;
      animation: sysRipple 4s ease-out infinite;
    }
    .sys-ripple-2 {
      animation-delay: -2s;
    }
    @keyframes sysRipple {
      0% { r: 44; opacity: 0.5; stroke-width: 1.5; }
      100% { r: 160; opacity: 0; stroke-width: 0.5; }
    }

    /* Node subtle breathing */
    .sys-node-group .sys-node {
      transform-origin: center;
    }

    /* =========================
       LIVE AUTOMATION FLOW CARD
       ========================= */
    .flow-section { padding: 40px 0 120px; position: relative; }
    .flow-card {
      border-radius: 32px;
      background: radial-gradient(ellipse at 20% 0%, #1A1714, #14120F 60%, #0E0C0A);
      padding: 56px 48px 40px;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(0,214,143,0.1);
    }
    .flow-card::before {
      content: "";
      position: absolute; inset: 0;
      background-image:
        linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 80%);
      pointer-events: none;
      z-index: 0;
    }
    .flow-card::after {
      content: "";
      position: absolute; inset: 0;
      background:
        radial-gradient(circle at 90% 0%, rgba(0,214,143,0.22), transparent 40%),
        radial-gradient(circle at 5% 100%, rgba(93,236,179,0.12), transparent 35%);
      pointer-events: none;
      z-index: 0;
    }
    .flow-head {
      display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: end;
      padding-bottom: 40px;
      position: relative; z-index: 2;
    }
    .flow-eyebrow {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
      color: #00D68F;
      margin-bottom: 14px;
    }
    .flow-title {
      font-family: 'Inter Tight', sans-serif;
      font-size: clamp(36px, 4.5vw, 60px);
      letter-spacing: -0.03em; line-height: 0.98; font-weight: 500;
      color: #F5F0E8;
    }
    .flow-title em {
      font-family: 'Fraunces', serif;
      font-style: italic;
      color: #00D68F;
      font-variation-settings: 'wght' 500, 'SOFT' 80;
    }
    .flow-sub { color: #9B968C; font-size: 15px; max-width: 46ch; line-height: 1.6; }

    .flow-scenarios {
      display: flex; gap: 0;
      position: relative; z-index: 2;
      border-top: 1px solid rgba(255,255,255,0.08);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      flex-wrap: wrap;
    }
    /* On narrow screens: single horizontal row, scroll + snap, active auto-centers */
    @media (max-width: 900px) {
      .flow-scenarios {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px; /* room for the accent underline */
      }
      .flow-scenarios::-webkit-scrollbar { display: none; }
      .flow-scenario {
        scroll-snap-align: center;
        white-space: nowrap;
        margin-right: 22px;
        padding: 16px 18px 16px 0;
        flex-shrink: 0;
      }
      .flow-scenario::after { right: 22px; }
    }
    .flow-scenario {
      appearance: none;
      padding: 18px 26px 18px 0; margin-right: 28px;
      border: 0; background: transparent;
      font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(245,240,232,0.45);
      cursor: pointer; transition: color .25s;
      position: relative;
      display: inline-flex; align-items: center; gap: 10px;
      border-radius: 0;
    }
    .flow-scenario:last-child { margin-right: 0; }
    .flow-scenario:hover { color: rgba(245,240,232,0.9); }
    .flow-scenario::after {
      content: "";
      position: absolute; left: 0; right: 28px; bottom: -1px;
      height: 2px; background: #00D68F;
      transform: scaleX(0); transform-origin: left;
      transition: transform .35s cubic-bezier(.2,.8,.2,1);
    }
    .flow-scenario.active { color: #00D68F; }
    .flow-scenario.active::after { transform: scaleX(1); }
    .flow-scenario .scen-num { font-size: 10px; opacity: 0.7; letter-spacing: 0.08em; }
    .flow-scenario.active .scen-num { opacity: 1; color: #00D68F; }

    .flow-timer {
      position: relative; z-index: 2;
      height: 2px;
      background: rgba(255,255,255,0.05);
      overflow: hidden;
    }
    .flow-timer-fill {
      height: 100%; width: 0;
      background: linear-gradient(90deg, #00D68F, #5DECB3);
      will-change: width, opacity;
      transition: opacity 250ms ease;
    }
    .flow-timer-fill.paused { opacity: 0.3; }

    .flow-stage-wrap {
      position: relative;
      padding: 40px 0 32px;
      z-index: 2;
    }
    .flow-svg {
      position: absolute;
      inset: 40px 0 32px 0;
      width: 100%; height: calc(100% - 72px);
      z-index: 1;
      pointer-events: none;
    }
    .flow-svg .wire {
      fill: none;
      stroke: rgba(255,255,255,0.1);
      stroke-width: 1.5;
      stroke-dasharray: 4 6;
    }
    .flow-svg .wire-flow {
      fill: none;
      stroke: #00D68F;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-dasharray: 8 12;
      opacity: 0;
      transition: opacity .3s;
    }
    .flow-svg .wire-flow.on {
      opacity: 1;
      animation: wireMove 1s linear infinite;
      filter: drop-shadow(0 0 6px rgba(0,214,143,0.75));
    }
    @keyframes wireMove { to { stroke-dashoffset: -20; } }

    .flow-stage {
      display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
      position: relative; z-index: 2;
    }
    .flow-node {
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 16px;
      padding: 18px 16px 16px;
      min-height: 180px;
      position: relative;
      display: flex; flex-direction: column; gap: 8px;
      transition: all .5s cubic-bezier(.2,.8,.2,1);
      backdrop-filter: blur(10px);
      color: rgba(245,240,232,0.9);
    }
    .flow-node.active {
      background: rgba(255,255,255,0.055);
      border-color: #00D68F;
      box-shadow:
        0 0 0 4px rgba(0,214,143,0.18),
        0 20px 40px -12px rgba(0,214,143,0.38);
      transform: translateY(-6px) scale(1.015);
    }
    .flow-node.done {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.22);
    }
    .flow-node .node-head {
      display: flex; justify-content: space-between; align-items: center;
      font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
      color: rgba(245,240,232,0.45);
    }
    .flow-node.active .node-head, .flow-node.done .node-head { color: #00D68F; }
    .flow-node .node-head .tick { color: rgba(245,240,232,0.3); font-size: 11px; }
    .flow-node.done .node-head .tick { color: #5DECB3; }
    .flow-node.active .node-head .tick { color: #00D68F; }
    .flow-node .node-icon {
      width: 40px; height: 40px; border-radius: 10px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      display: grid; place-items: center;
      margin: 2px 0 4px;
      transition: all .4s;
      position: relative;
    }
    .flow-node.active .node-icon {
      background: rgba(0,214,143,0.18);
      border-color: #00D68F;
      box-shadow: 0 0 16px rgba(0,214,143,0.4);
    }
    .flow-node.done .node-icon {
      background: rgba(255,255,255,0.07);
      border-color: rgba(255,255,255,0.2);
    }
    .flow-node .node-icon svg { width: 20px; height: 20px; stroke: rgba(245,240,232,0.8); transition: stroke .4s; }
    .flow-node.active .node-icon svg { stroke: #00D68F; }
    .flow-node.done .node-icon svg { stroke: #F5F0E8; }
    .flow-node.active .node-icon::before {
      content: "";
      position: absolute; inset: -1px; border-radius: inherit;
      border: 1px solid #00D68F;
      animation: iconScan 1.6s ease-out infinite;
    }
    @keyframes iconScan {
      0%   { opacity: 1; transform: scale(1); }
      100% { opacity: 0; transform: scale(1.8); }
    }
    .flow-node h4 {
      font-family: 'Inter Tight', sans-serif;
      font-size: 19px; letter-spacing: -0.015em; font-weight: 500; line-height: 1.1;
      color: #F5F0E8;
    }
    .flow-node h4 em {
      font-family: 'Fraunces', serif;
      font-style: italic; color: #00D68F;
      font-variation-settings: 'wght' 500, 'SOFT' 80;
    }
    .flow-node p {
      font-size: 11.5px; color: rgba(245,240,232,0.55); line-height: 1.45;
      margin-top: auto;
    }
    .flow-node.active p, .flow-node.done p { color: rgba(245,240,232,0.72); }

    /* firing pulse between nodes */
    .flow-node::after {
      content: "";
      position: absolute;
      right: -12px; top: 50%;
      width: 8px; height: 8px; border-radius: 50%;
      background: #00D68F;
      transform: translateY(-50%) scale(0);
      box-shadow: 0 0 12px #00D68F;
      z-index: 3;
      opacity: 0;
      transition: opacity .2s;
    }
    .flow-node.firing::after {
      opacity: 1;
      animation: firingPulse .9s cubic-bezier(.5,0,.5,1) forwards;
    }
    .flow-node:last-child::after { display: none; }
    @keyframes firingPulse {
      0%   { transform: translate(0, -50%) scale(0); opacity: 1; }
      60%  { transform: translate(14px, -50%) scale(1); opacity: 1; }
      100% { transform: translate(24px, -50%) scale(0.4); opacity: 0; }
    }

    /* hover lift on node */
    .flow-node.is-hovered {
      border-color: #00D68F;
      background: rgba(255,255,255,0.07);
      transform: translateY(-8px) scale(1.03);
      box-shadow:
        0 0 0 4px rgba(0,214,143,0.2),
        0 30px 60px -16px rgba(0,214,143,0.48);
      cursor: pointer;
      z-index: 4;
    }
    .flow-node.is-hovered .node-icon { background: rgba(0,214,143,0.24); border-color: #00D68F; }
    .flow-node.is-hovered .node-icon svg { stroke: #00D68F; }

    /* status ticker */
    .flow-status {
      position: relative; z-index: 2;
      display: flex; justify-content: space-between; align-items: center;
      padding: 14px 18px;
      margin-top: 20px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px;
      background: rgba(0,0,0,0.3);
      font-family: 'IBM Plex Mono', monospace; font-size: 11px;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: rgba(245,240,232,0.58);
      backdrop-filter: blur(8px);
    }
    .flow-status .status-l { display: flex; align-items: center; gap: 10px; }
    .flow-status .status-l .live {
      display: inline-block; width: 6px; height: 6px; border-radius: 50%;
      background: #5DECB3;
      box-shadow: 0 0 10px rgba(93,236,179,0.85);
      animation: livePulse 1.4s ease-in-out infinite;
    }
    @keyframes livePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }
    .flow-status .status-r { color: #00D68F; }

    .flow-foot {
      display: flex; justify-content: space-between; align-items: center;
      padding-top: 28px; margin-top: 24px;
      border-top: 1px solid rgba(255,255,255,0.08);
      position: relative; z-index: 2;
      gap: 24px; flex-wrap: wrap;
    }
    .flow-foot .controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    .flow-foot .ctrl-btn {
      padding: 10px 18px;
      border-radius: 999px;
      background: #00D68F; color: #0C0B0A;
      border: 0; cursor: pointer;
      font-size: 13px; font-weight: 500;
      display: inline-flex; align-items: center; gap: 8px;
      transition: transform .2s, background .2s;
      font-family: 'Inter Tight', sans-serif;
    }
    .flow-foot .ctrl-btn:hover { transform: translateY(-1px); }
    .flow-foot .ctrl-btn.ghost {
      background: transparent; color: rgba(245,240,232,0.8);
      border: 1px solid rgba(255,255,255,0.18);
    }
    .flow-foot .ctrl-btn.ghost:hover { background: rgba(255,255,255,0.06); color: #F5F0E8; }

    .flow-foot .outcome {
      font-family: 'Inter Tight', sans-serif;
      font-size: 20px; letter-spacing: -0.015em; line-height: 1.28;
      color: rgba(245,240,232,0.95);
      max-width: 48ch;
      font-weight: 500;
    }
    .flow-foot .outcome em {
      font-family: 'Fraunces', serif;
      font-style: italic; color: #00D68F;
      font-variation-settings: 'wght' 500, 'SOFT' 80;
    }

    .flow-cta {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 14px 22px;
      border-radius: 999px;
      background: #00D68F; color: #0C0B0A !important;
      font-size: 13px; font-weight: 600;
      transition: transform .2s;
      white-space: nowrap;
    }
    .flow-cta:hover { transform: translateY(-2px); }
    .flow-cta .arr {
      display: inline-grid; place-items: center;
      width: 20px; height: 20px; border-radius: 50%;
      background: #0C0B0A; color: #00D68F;
      font-size: 11px;
      transition: transform .2s;
    }
    .flow-cta:hover .arr { transform: rotate(-45deg); }

    .flow-card.is-hovered { border-color: rgba(0,214,143,0.3); }

    @media (max-width: 900px) {
      .flow-card { padding: 36px 22px 28px; border-radius: 24px; }
      .flow-head { grid-template-columns: 1fr; gap: 22px; padding-bottom: 28px; }
      .flow-stage { grid-template-columns: 1fr 1fr; }
      .flow-svg { display: none; }
      .flow-foot { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 560px) {
      .flow-stage { grid-template-columns: 1fr; }
      .flow-node { min-height: auto; }
    }

    /* Brand layout inside flow-stage (replaces 5-node pipeline) */
    .flow-stage.brand-layout { display: block; min-height: 300px; }
    .brand-stage {
      display: grid;
      grid-template-columns: 1fr 1.2fr 1.3fr;
      gap: 20px;
    }
    .brand-panel {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 16px;
      padding: 18px 18px 20px;
      min-height: 260px;
      display: flex; flex-direction: column;
      transition: border-color .5s, background .5s;
      position: relative;
      overflow: hidden;
    }
    .brand-panel-head {
      display: flex; justify-content: space-between; align-items: center;
      font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
      color: rgba(245,240,232,0.55);
      margin-bottom: 14px;
    }
    .brand-panel-head .brand-tick { color: #00D68F; }
    .brand-caption {
      margin-top: auto;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px; letter-spacing: 0.08em;
      color: rgba(245,240,232,0.6);
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }

    /* Type panel */
    .brand-aa {
      flex: 1;
      display: grid; place-items: center;
      font-size: clamp(120px, 14vw, 180px);
      line-height: 0.8;
      color: #F5F0E8;
      transition: font-variation-settings 700ms cubic-bezier(.2,.8,.2,1), color 700ms ease, letter-spacing 700ms ease;
      will-change: font-variation-settings;
      user-select: none;
    }

    /* Palette panel */
    .brand-swatches {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      flex: 1;
    }
    .brand-swatch {
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.08);
      transition: background 700ms cubic-bezier(.2,.8,.2,1);
      position: relative;
      min-height: 70px;
    }

    /* Voice panel */
    .brand-lockup {
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 12px;
    }
    .brand-mark {
      font-size: 44px; line-height: 1;
      color: #00D68F;
      display: inline-block;
      transition: transform 700ms cubic-bezier(.2,.8,.2,1), color 700ms ease;
    }
    .brand-wordmark {
      font-family: 'Fraunces', serif;
      font-size: 30px; line-height: 1;
      color: #F5F0E8;
      transition: font-variation-settings 700ms cubic-bezier(.2,.8,.2,1), color 700ms ease, letter-spacing 700ms ease;
    }
    .brand-wordmark em {
      font-style: italic; color: #00D68F;
      font-variation-settings: 'wght' 500, 'SOFT' 80;
    }
    .brand-tagline {
      flex: 1;
      display: grid; align-items: center;
      font-family: 'Fraunces', serif;
      font-style: italic;
      font-size: 22px; line-height: 1.25;
      color: rgba(245,240,232,0.88);
      font-variation-settings: 'wght' 400, 'SOFT' 80, 'opsz' 144;
      letter-spacing: -0.01em;
      padding: 12px 0;
      transition: color 700ms ease;
    }

    @media (max-width: 900px) {
      .brand-stage { grid-template-columns: 1fr 1fr; }
      .brand-voice-panel { grid-column: 1 / -1; }
    }
    @media (max-width: 560px) {
      .brand-stage { grid-template-columns: 1fr; }
      .brand-voice-panel { grid-column: auto; }
    }

    /* Shop layout (Web & Shopify) */
    .flow-stage.shop-layout { display: block; min-height: 300px; }
    .shop-intro {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 18px;
      padding: 12px 18px;
      border: 1px solid rgba(0,214,143,0.18);
      background: rgba(0,214,143,0.05);
      border-radius: 12px;
      font-family: 'Inter Tight', sans-serif;
      font-size: 14px;
      color: rgba(245,240,232,0.88);
    }
    .shop-intro::before {
      content: "";
      width: 6px; height: 6px; border-radius: 50%;
      background: #5DECB3;
      box-shadow: 0 0 10px rgba(93,236,179,0.85);
      animation: livePulse 1.4s ease-in-out infinite;
    }
    .shop-stage {
      display: grid;
      grid-template-columns: 1.2fr 1.1fr 1fr;
      gap: 20px;
    }
    .shop-stage.shop-stage-2col { grid-template-columns: 1.1fr 1.2fr; }
    .shop-metric-delta {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px; letter-spacing: 0.08em;
      color: #5DECB3;
      margin-top: 4px;
    }
    .shop-panel {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 16px;
      padding: 18px 18px 20px;
      min-height: 300px;
      display: flex; flex-direction: column;
      transition: border-color .5s, background .5s;
      position: relative;
    }
    .shop-panel-head {
      display: flex; justify-content: space-between; align-items: center;
      font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
      color: rgba(245,240,232,0.55);
      margin-bottom: 14px;
    }

    /* Storefront browser preview */
    .shop-browser {
      flex: 1;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 12px;
      overflow: hidden;
      background: #0C0B0A;
      display: flex; flex-direction: column;
    }
    .shop-browser-bar {
      display: flex; align-items: center; gap: 5px;
      padding: 8px 12px;
      background: rgba(255,255,255,0.04);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .shop-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: rgba(245,240,232,0.22);
    }
    .shop-url {
      margin-left: 8px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px; color: rgba(245,240,232,0.55);
      letter-spacing: 0.02em;
      transition: color .7s ease;
    }
    .shop-browser-body {
      flex: 1;
      display: flex; flex-direction: column;
      padding: 12px;
      gap: 12px;
    }
    .shop-hero {
      flex: 1; min-height: 90px;
      border-radius: 10px;
      transition: background 900ms cubic-bezier(.2,.8,.2,1);
      background: linear-gradient(135deg, #2A2620 0%, #9B968C 100%);
    }
    .shop-product-row {
      display: flex; justify-content: space-between; align-items: flex-end;
      gap: 12px;
    }
    .shop-wordmark {
      font-family: 'Fraunces', serif;
      font-style: italic;
      font-size: 11px;
      color: rgba(245,240,232,0.6);
      letter-spacing: 0.04em;
      font-variation-settings: 'wght' 500, 'SOFT' 80;
      margin-bottom: 2px;
      transition: color .6s ease;
    }
    .shop-product-name {
      font-family: 'Inter Tight', sans-serif;
      font-size: 14px; font-weight: 500;
      color: #F5F0E8;
      transition: color .6s ease;
    }
    .shop-product-price {
      font-family: 'Fraunces', serif;
      font-size: 20px; font-weight: 600;
      color: #00D68F;
      font-variation-settings: 'wght' 600;
      letter-spacing: -0.02em;
      transition: color .6s ease;
    }

    /* Metrics grid */
    .shop-metrics-grid {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .shop-metric {
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      padding: 12px 14px;
      display: flex; flex-direction: column; gap: 4px;
      transition: border-color .6s ease, background .6s ease;
    }
    .shop-metric-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(245,240,232,0.5);
    }
    .shop-metric-value {
      font-family: 'Fraunces', serif;
      font-size: 22px;
      font-variation-settings: 'wght' 500;
      letter-spacing: -0.02em;
      color: #F5F0E8;
      line-height: 1;
      transition: color .6s ease;
    }

    /* Stack pills */
    .shop-stack-list {
      flex: 1;
      display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start;
    }
    .shop-stack-pill {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px; letter-spacing: 0.08em;
      color: rgba(245,240,232,0.75);
      background: rgba(0,214,143,0.08);
      border: 1px solid rgba(0,214,143,0.25);
      border-radius: 8px;
      padding: 6px 10px;
      transition: background .5s ease, border-color .5s ease, opacity .5s ease;
      animation: shopPillIn .5s ease both;
    }
    @keyframes shopPillIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 900px) {
      .shop-stage { grid-template-columns: 1fr 1fr; }
      .shop-stage.shop-stage-2col { grid-template-columns: 1fr; }
      .shop-stack { grid-column: 1 / -1; }
    }
    @media (max-width: 560px) {
      .shop-stage { grid-template-columns: 1fr; }
    }

    /* CRM layout (Sales & CRM): tools converging into one pipeline */
    .flow-stage.crm-layout { display: block; min-height: 300px; }
    .crm-stage {
      display: grid;
      grid-template-columns: 0.9fr 1.4fr;
      gap: 20px;
    }
    .crm-tools-panel, .crm-pipeline-panel {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 16px;
      padding: 18px 18px 20px;
      min-height: 320px;
      display: flex; flex-direction: column;
      position: relative;
    }
    .crm-tools-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
    .crm-tool {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 12px;
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      background: rgba(255,255,255,0.015);
      opacity: 0.45;
      transition: opacity .6s ease, border-color .6s ease, background .6s ease, transform .6s ease;
    }
    .crm-tool.on {
      opacity: 1;
      border-color: rgba(0,214,143,0.5);
      background: rgba(0,214,143,0.06);
    }
    .crm-tool-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: rgba(245,240,232,0.2);
      transition: background .4s ease, box-shadow .4s ease;
      flex-shrink: 0;
    }
    .crm-tool.on .crm-tool-dot {
      background: #00D68F;
      box-shadow: 0 0 10px rgba(0,214,143,0.8);
    }
    .crm-tool-main { flex: 1; min-width: 0; }
    .crm-tool-name {
      font-family: 'Inter Tight', sans-serif;
      font-size: 13px; font-weight: 500;
      color: #F5F0E8;
    }
    .crm-tool-note {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
      color: rgba(245,240,232,0.45);
      margin-top: 2px;
    }
    .crm-tool-state {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
      color: transparent;
      transition: color .4s ease;
    }
    .crm-tool.on .crm-tool-state { color: #00D68F; }

    /* Pipeline */
    .crm-pipeline {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
      gap: 8px;
      align-items: stretch;
      margin-bottom: 16px;
      flex: 1;
    }
    .crm-col {
      display: flex; flex-direction: column; gap: 6px;
      padding: 12px 10px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      min-width: 0;
    }
    .crm-col-won { border-color: rgba(0,214,143,0.4); background: rgba(0,214,143,0.06); }
    .crm-col-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(245,240,232,0.55);
    }
    .crm-col-val {
      font-family: 'Fraunces', serif;
      font-variation-settings: 'wght' 500;
      font-size: 22px; line-height: 1;
      color: #F5F0E8;
      transition: color .4s ease;
    }
    .crm-col-won .crm-col-val { color: #5DECB3; }
    .crm-col-bar {
      height: 3px; border-radius: 999px;
      background: rgba(255,255,255,0.06);
      overflow: hidden;
      margin-top: auto;
    }
    .crm-col-bar-fill {
      height: 100%; width: 0;
      background: linear-gradient(90deg, #00D68F, #5DECB3);
      transition: width .9s cubic-bezier(.2,.8,.2,1);
    }
    .crm-arrow {
      display: grid; place-items: center;
      font-family: 'IBM Plex Mono', monospace;
      color: rgba(0,214,143,0.5); font-size: 14px;
    }
    .crm-pipeline-foot {
      display: flex; justify-content: space-between;
      padding-top: 14px; margin-top: auto;
      border-top: 1px solid rgba(255,255,255,0.08);
      gap: 16px; flex-wrap: wrap;
    }
    .crm-foot-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(245,240,232,0.55);
      margin-right: 8px;
    }
    .crm-foot-val {
      font-family: 'Fraunces', serif;
      font-variation-settings: 'wght' 500;
      font-size: 17px;
      color: #F5F0E8;
    }

    @media (max-width: 900px) {
      .crm-stage { grid-template-columns: 1fr; }
      .crm-pipeline { grid-template-columns: 1fr 1fr 1fr 1fr; }
      .crm-arrow { display: none; }
    }

    details > summary { list-style:none; cursor:pointer; }
    details > summary::-webkit-details-marker { display:none; }
    details[open] .acc-icon { transform:rotate(45deg); }
    .acc-icon { transition:transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }

    .chat-scroll { scrollbar-width:thin; scrollbar-color:#2a2620 transparent; }
    .chat-scroll::-webkit-scrollbar { width:6px; }
    .chat-scroll::-webkit-scrollbar-thumb { background:#2a2620; border-radius:999px; }
    .typing-dot { animation:blink 1.4s infinite both; }
    .typing-dot:nth-child(2) { animation-delay:0.2s; }
    .typing-dot:nth-child(3) { animation-delay:0.4s; }
    @keyframes blink { 0%,20% { opacity:0.2; } 50% { opacity:1; } 100% { opacity:0.2; } }

    /* Systems map */
    .sys-edge { stroke:#2A2620; stroke-width:1; fill:none; }
    .sys-edge-active { stroke:#00D68F; stroke-width:1.2; }
    .sys-node { fill:#1B1815; stroke:#2A2620; stroke-width:1.5; transition:stroke 400ms ease, fill 400ms ease; }
    .sys-node-center { fill:#0C0B0A; stroke:#00D68F; stroke-width:1.5; }
    .sys-pulse { fill:#00D68F; }

    /* Flow diagram for AI tab */
    .flow-node { fill:#141210; stroke:#2A2620; stroke-width:1; }
    .flow-node-ai { fill:rgba(0,214,143,0.12); stroke:#00D68F; stroke-width:1.2; }
    .flow-edge { stroke:#2A2620; stroke-width:1; fill:none; }
    .flow-pulse { fill:#00D68F; }

    /* Bar animation for CRM */
    @keyframes barFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .crm-bar { transform-origin: left; animation: barFill 1.6s cubic-bezier(0.22,1,0.36,1) infinite alternate; }

    /* Palette morph */
    @keyframes palette { 0% { background:#00D68F; } 20% { background:#5DECB3; } 40% { background:#CCFF00; } 60% { background:#F5F0E8; } 80% { background:#6B6761; } 100% { background:#00D68F; } }
    .palette-swatch { animation: palette 10s linear infinite; }

    /* Aa weight cycle */
    @keyframes aaMorph { 0%,100% { font-variation-settings:'wght' 300, 'SOFT' 0, 'opsz' 72; } 50% { font-variation-settings:'wght' 900, 'SOFT' 100, 'opsz' 144; } }
    .aa-morph { animation: aaMorph 4s ease-in-out infinite; }

    /* Demo badge pulse */
    .demo-badge { animation: demoPulse 2s ease-in-out infinite; }
    @keyframes demoPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

    /* Floating nav chip marquee for hero nodes */
    .sys-label { font-family:'Inter Tight', sans-serif; font-size:10px; fill:#9B968C; font-weight:500; letter-spacing:0.05em; text-transform:uppercase; }
    .sys-label-center { font-family:'Fraunces', serif; font-style:italic; font-size:13px; fill:#F5F0E8; font-variation-settings:'wght' 500; }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
      .reveal { opacity:1; transform:none; }
    }

    a:focus-visible, button:focus-visible, [tabindex="0"]:focus-visible, input:focus-visible, details > summary:focus-visible { outline:2px solid #00D68F; outline-offset:3px; border-radius:6px; }
  