/* Animation styles reused from /dxcomply/. */

    :root {
      /* Feroot brand tokens */
      --navy: #000247;          /* --feroot-navy */
      --accent: #6D3CCE;        /* --primary */
      --p600: #410AAC;          /* --primary-dark */
      --p550: #5A2AB8;
      --p500: #8B5CF6;
      --p450: #9B72E6;
      --p300: #C4A8F0;
      --muted: #6C757D;         /* --gray-600 */
      --lav: #ADB5BD;           /* --gray-400 */
      --lav150: #E3D6FF;        /* --primary-light */
      --lav100: #DEE2E6;        /* --border-default */
      --lav50: #F8F9FA;         /* --bg-page */
      --light600: #F7F4FF;      /* --primary-lightest */
      --light300: #ECE7F6;      /* --primary-lighter */
      --cta: #30A6D9;           /* --secondary (Feroot cyan) */
      --success: #30AE8C;       /* --green */
      --warning: #FEB415;       /* --yellow */
      --attention: #EB0028;     /* --red (for blocked / threat states) */
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
      background: #ffffff;
    }
    .hero { background: #ffffff; overflow: hidden; padding-top: 20px; padding-bottom: 16px; }
    .container { max-width: 1280px; margin: 0 auto; }

    /* ── Side-by-side hero layout ──────────────────────────────── */
    .hero-body { display: flex; align-items: center; gap: clamp(24px,3vw,52px); padding: clamp(6px,.8vw,12px) clamp(20px,4vw,64px) 0; }
    .hero-left { flex: 0 0 50%; display: flex; flex-direction: column; justify-content: flex-start; padding-top: clamp(8px,1vw,14px); }
    .hero-right { flex: 1; min-width: 0; }
    .hero-eyebrow { font-size: clamp(10px,.9vw,13px); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; font-family: 'Open Sans',system-ui; }
    .hero-h1 { font-size: clamp(20px,2.3vw,32px); font-weight: 800; color: var(--navy); line-height: 1.2; letter-spacing: -0.018em; font-family: 'Open Sans', system-ui, sans-serif; margin-bottom: 0; }
    .hero-h1 .hero-gradient-text { white-space: nowrap; }
    .hero-desc { display: block; max-width: 100%; margin-top: 12px; margin-bottom: 20px; }
    .hero-desc p { font-size: clamp(13px,1.1vw,15.5px); color: #1a1a3a; font-weight: 600; line-height: 1.7; }
    .hero-desc .accent { color: var(--accent); font-weight: 700; }

    /* ── Stage ─────────────────────────────────────────────────── */
    .tabs-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; }
    .stage { position: relative; width: 100%; }
    .tab-items { list-style: none; width: 100%; position: relative; height: clamp(260px,30vw,400px); z-index: 2; }

    /* persistent backdrop */
    .stage-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
    .bg-glow {
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 50% 46% at 50% 48%, rgba(155,114,230,.13), transparent 62%),
        radial-gradient(ellipse 28% 28% at 50% 48%, rgba(48,166,217,.07), transparent 70%);
      animation: glowBreathe 13s ease-in-out infinite;
    }
    @keyframes glowBreathe { 0%,100% { opacity:.85; transform: scale(1);} 50% { opacity:1; transform: scale(1.05);} }
    .bg-grid {
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(109,60,206,.015) 1px, transparent 1.4px);
      background-size: 30px 30px;
      -webkit-mask-image: radial-gradient(ellipse 58% 60% at 50% 48%, #000 30%, transparent 78%);
              mask-image: radial-gradient(ellipse 58% 60% at 50% 48%, #000 30%, transparent 78%);
    }
    .core-glow {
      position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%);
      width: 26px; height: 26px; border-radius: 50%;
      background: radial-gradient(circle, rgba(155,114,230,.55), rgba(109,60,206,0) 70%);
      animation: coreGlow 5.5s ease-in-out infinite;
    }
    @keyframes coreGlow { 0%,100% { opacity:.55; transform: translate(-50%,-50%) scale(1);} 50% { opacity:.9; transform: translate(-50%,-50%) scale(1.35);} }
    .pf { position: absolute; border-radius: 50%; opacity: 0; }
    .pf.p1 { width:6px; height:6px; background: var(--p450);   left:16%; top:30%; animation: drift 13s ease-in-out infinite; }
    .pf.p2 { width:4px; height:4px; background: var(--p300);   left:82%; top:26%; animation: drift 16s ease-in-out infinite 1.8s; }
    .pf.p3 { width:5px; height:5px; background: var(--cta);    left:76%; top:70%; animation: drift 15s ease-in-out infinite 3.4s; }
    .pf.p4 { width:3px; height:3px; background: var(--p500);   left:24%; top:72%; animation: drift 18s ease-in-out infinite 1s; }
    .pf.p5 { width:4px; height:4px; background: var(--p550);   left:50%; top:14%; animation: drift 14s ease-in-out infinite 2.6s; }
    .pf.p6 { width:5px; height:5px; background: var(--lav150); left:60%; top:86%; animation: drift 17s ease-in-out infinite 4.5s; }
    @keyframes drift {
      0% { opacity:0; transform: translate(0,0); } 15% { opacity:.5; }
      50% { opacity:.75; transform: translate(14px,-22px); } 85% { opacity:.45; }
      100% { opacity:0; transform: translate(-10px,-40px); }
    }

    /* ── Tab item cross-fade ─────────────────────────────────── */
    .tab-item {
      position: absolute; inset: 0;
      opacity: 0; transform: scale(.985); pointer-events: none;
      transition: opacity 1.4s ease, transform 1.6s cubic-bezier(.16,1,.3,1);
      display: flex; flex-direction: column;
    }
    .tab-item.active { opacity: 1; transform: scale(1); pointer-events: auto; }

    .scene-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: clamp(4px,.6vw,8px); }
    .scene { position: relative; width: 100%; height: 100%; }

    .tab-cta { display: none; }
    .hero-cta-wrap { display: flex; align-items: center; gap: 0; padding: 0; }
    .hero-cta-demo { display: inline-flex; align-items: center; gap: 9px; background: #010347; color: #fff; font-size: clamp(13px,1.1vw,15.5px); font-weight: 800; padding: clamp(10px,1.1vw,14px) clamp(22px,2.4vw,34px); border-radius: 9999px; text-decoration: none; box-shadow: 0 4px 0 #00021f, 0 8px 24px -8px rgba(1,3,71,.38); transition: transform .12s, box-shadow .12s; letter-spacing: -.01em; }
    .hero-cta-demo:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #00021f, 0 14px 40px -8px rgba(1,3,120,.65); }
    .hero-cta-demo svg { width: 16px; height: 16px; flex: none; }
    .hero-cta-secondary { font-size: clamp(12px,1vw,13.5px); color: rgba(0,2,71,.5); font-weight: 600; text-decoration: none; }
    .hero-cta-secondary:hover { color: rgba(109,60,206,.85); }
    .hero-cta-scan { display: inline-flex; align-items: center; font-size: clamp(13px,1.1vw,15.5px); font-weight: 800; color: #010347; background: #ffffff; border: 1.5px solid rgba(1,3,71,0.24); padding: clamp(10px,1.1vw,14px) clamp(22px,2.4vw,34px); border-radius: 9999px; text-decoration: none; box-shadow: 0 1px 3px rgba(1,3,71,0.08); transition: border-color .18s, background .18s, box-shadow .18s; letter-spacing: -.01em; margin-left: 12px; }
    .hero-cta-scan:hover { border-color: rgba(1,3,71,0.48); background: rgba(1,3,71,0.03); box-shadow: 0 2px 8px rgba(1,3,71,0.12); }

    /* ── Bottom tab navigation ─────────────────────────────────── */
    .tab-nav { width: 100%; display: flex; justify-content: center; padding: clamp(3px,.4vw,5px) 0 clamp(16px,2vw,24px); margin-top: -1px; }
    .tab-links { list-style: none; display: flex; justify-content: space-between; width: min(520px,74%); position: relative; padding-top: clamp(16px,2vw,24px); padding-bottom: clamp(10px,1.4vw,16px); }
    .tab-baseline { display: none; }
    .tab-indicator { position: absolute; bottom:-8px; left:0; width:16px; height:5px; background: var(--accent); border-radius:3px; transition: transform .7s cubic-bezier(.4,0,.2,1); }
    .tab-link { display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: .35; cursor: pointer; transition: opacity .35s ease; user-select: none; }
    .tab-link.active { opacity: 1; }
    .tab-link:hover:not(.active) { opacity: .6; }
    .tab-link .tab-label { font-size: clamp(11px,.95vw,13.5px); font-weight: 700; color: var(--navy); letter-spacing:-.01em; }
    .tab-ring { width:16px; height:16px; }
    .tab-ring svg { width:16px; height:16px; transform: rotate(-90deg); overflow: visible; }
    .ring-track { fill:none; stroke: rgba(109,60,206,.24); stroke-width:2; }
    .ring-fill { fill:none; stroke: var(--accent); stroke-width:2; stroke-linecap:round; stroke-dasharray:39.27; stroke-dashoffset:39.27; }

    .glyph { display: grid; place-items: center; border-radius: 10px; color: var(--accent); }
    .glyph svg { width: 60%; height: 60%; }

    /* ════════════════════════════════════════════════════════════
       SCENE 1, DISCOVERY
       ════════════════════════════════════════════════════════════ */
    .disco-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
    .disco-lines path { stroke: url(#lineGrad); stroke-width: .55; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .3; }
    .tab-item.active .disco-lines path { animation: lineDraw 1.3s ease forwards .3s; }
    .tab-item.active .disco-lines path.l2 { animation-delay: .55s; }
    .tab-item.active .disco-lines path.l3 { animation-delay: .8s; }
    .tab-item.active .disco-lines path.l4 { animation-delay: 1.05s; }
    @keyframes lineDraw { to { stroke-dashoffset: 0; } }

    .spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--cta); box-shadow: 0 0 8px var(--cta); opacity: 0; }
    .tab-item.active .spark { animation: sparkTravel 3.8s ease-in infinite; }
    .spark.k1 { animation-delay: 1.6s !important; }
    .spark.k2 { animation-delay: 2.3s !important; }
    .spark.k3 { animation-delay: 3.0s !important; }
    .spark.k4 { animation-delay: 2.0s !important; }
    @keyframes sparkTravel {
      0% { opacity:0; transform: translate(var(--sx),var(--sy)) scale(.5);} 20% { opacity:1;}
      80% { opacity:1;} 100% { opacity:0; transform: translate(0,0) scale(1);}
    }

    .radar { position: absolute; top: 50%; left: 50%; width: clamp(150px,21vw,230px); aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; }
    .radar-ring { position: absolute; border: 1px solid rgba(109,60,206,.16); border-radius: 50%; }
    .radar-ring.r1 { inset: 0; } .radar-ring.r2 { inset: 18%; } .radar-ring.r3 { inset: 36%; border-color: rgba(109,60,206,.24); }
    .radar-cross-h, .radar-cross-v { position: absolute; background: rgba(109,60,206,.1); }
    .radar-cross-h { left:0; right:0; top:50%; height:1px; } .radar-cross-v { top:0; bottom:0; left:50%; width:1px; }
    .radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(109,60,206,.30) 0deg, rgba(109,60,206,.06) 34deg, transparent 72deg, transparent 360deg); }
    .tab-item.active .radar-sweep { animation: spin 6s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .radar-pulse { position: absolute; inset: 42%; border-radius: 50%; border: 1.5px solid rgba(155,114,230,.5); opacity: 0; }
    .tab-item.active .radar-pulse { animation: pulseOut 4.6s ease-out infinite; }
    .tab-item.active .radar-pulse.d2 { animation-delay: 2.3s; }
    @keyframes pulseOut { 0% { inset:46%; opacity:.7; } 100% { inset:-2%; opacity:0; } }
    .radar-core { position: absolute; top:50%; left:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background: radial-gradient(circle at 40% 35%, var(--p450), var(--accent)); box-shadow: 0 0 0 6px rgba(109,60,206,.12), 0 0 18px rgba(109,60,206,.5); }
    .tab-item.active .radar-core { animation: corePulse 3.8s ease-in-out infinite; }
    @keyframes corePulse { 0%,100% { box-shadow: 0 0 0 6px rgba(109,60,206,.12), 0 0 14px rgba(109,60,206,.45);} 50% { box-shadow: 0 0 0 9px rgba(109,60,206,.06), 0 0 22px rgba(109,60,206,.6);} }

    .node {
      position: absolute; transform: translate(-50%,-50%);
      display: flex; align-items: center; gap: 9px;
      background: rgba(255,255,255,.92); border: 1px solid rgba(109,60,206,.12);
      border-radius: 8px; padding: 8px 12px 8px 8px; box-shadow: 0 10px 26px -16px rgba(0,2,71,.5);
      opacity: 0; backdrop-filter: blur(2px);
    }
    .tab-item.active .node { animation: nodeIn .7s cubic-bezier(.16,1,.3,1) forwards, nodeFloat 6.5s ease-in-out infinite; }
    .node.n1 { left:80%; top:24%; } .tab-item.active .node.n1 { animation-delay:.7s, 1.4s; }
    .node.n2 { left:84%; top:64%; } .tab-item.active .node.n2 { animation-delay:1.1s, 1.8s; }
    .node.n3 { left:18%; top:70%; } .tab-item.active .node.n3 { animation-delay:1.5s, 2.2s; }
    .node.n4 { left:16%; top:32%; } .tab-item.active .node.n4 { animation-delay:1.9s, 2.6s; }
    @keyframes nodeIn { from { opacity:0; transform: translate(-50%,-50%) scale(.7);} to { opacity:1; transform: translate(-50%,-50%) scale(1);} }
    @keyframes nodeFloat { 0%,100% { transform: translate(-50%,-50%);} 50% { transform: translate(-50%,calc(-50% - 5px));} }
    .node .glyph { width: 30px; height: 30px; background: var(--lav50); flex: none; }
    .node-meta { display:flex; flex-direction:column; line-height:1.05; }
    .node-num { font-size: clamp(14px,1.4vw,19px); font-weight:800; color: var(--navy); letter-spacing:-.01em; }
    .node-label { font-size: clamp(8.5px,.78vw,10.5px); font-weight:700; color: var(--muted); text-transform: uppercase; letter-spacing:.05em; }
    @media (max-width:640px){ .node { padding:6px 9px 6px 6px; gap:6px; } .node .glyph { width:24px; height:24px; } }

    .scan-pill { position: absolute; left: 2%; top: 5%; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.92); border: 1px solid rgba(109,60,206,.12); border-radius: 9999px; padding: 6px 13px 6px 11px; font-size: clamp(10px,.9vw,12px); font-weight: 700; color: var(--navy); box-shadow: 0 8px 22px -16px rgba(0,2,71,.5); opacity: 0; }
    .tab-item.active .scan-pill { animation: nodeIn .6s ease forwards .3s; }
    .scan-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cta); box-shadow: 0 0 0 0 rgba(48,166,217,.6); }
    .tab-item.active .scan-dot { animation: liveDot 2.4s ease-out infinite; }
    @keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(48,166,217,.6);} 70%,100% { box-shadow: 0 0 0 7px rgba(48,166,217,0);} }
    .scan-pill .mono { color: var(--muted); font-weight: 600; }

    .ticker { position: absolute; left:50%; bottom: 2%; transform: translateX(-50%); width: min(344px,76%); height: 94px; overflow: hidden; background: rgba(255,255,255,.9); border: 1px solid rgba(109,60,206,.1); border-radius: 8px; box-shadow: 0 12px 28px -18px rgba(0,2,71,.5); -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent); opacity: 0; }
    .tab-item.active .ticker { animation: nodeIn .6s ease forwards .7s; }
    .ticker-track { display: flex; flex-direction: column; }
    .tab-item.active .ticker-track { animation: tickScroll 14s linear infinite .9s; }
    @keyframes tickScroll { from { transform: translateY(0); } to { transform: translateY(-256px); } }
    .ticker-row { height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: clamp(10px,.85vw,12px); font-weight: 700; color: var(--navy); white-space: nowrap; }
    .ticker-row .ok { color: var(--success); display:inline-flex; flex: none; } .ticker-row .ok svg { width: 13px; height: 13px; }
    .ticker-row .dim { color: var(--muted); font-weight: 500; }

    /* phase A, live scan */
    .disco-scan { position: absolute; inset: 0; opacity: 0; }
    .tab-item.active .disco-scan { animation: scanCycle 9s cubic-bezier(.4,0,.2,1) forwards; }
    @keyframes scanCycle { 0% { opacity:0; transform: scale(1);} 3% { opacity:1; } 96% { opacity:1; transform: scale(1);} 100% { opacity:0; transform: scale(.98);} }

    /* phase B, structured visualisations */
    .disco-structured { position: absolute; inset: 0; }
    .dtile {
      position: absolute; --rot: 0deg;
      background: rgba(255,255,255,.95); border: 1px solid rgba(109,60,206,.1);
      border-radius: 8px; padding: 12px 14px; box-shadow: 0 20px 40px -22px rgba(0,2,71,.55);
      width: clamp(130px,15vw,154px); opacity: 0;
      transform: rotate(var(--rot)) translateY(20px) scale(.84);
    }
    .tab-item.active .dtile { animation: tileIn .75s cubic-bezier(.16,1,.3,1) forwards, tileFloat 7s ease-in-out infinite; }
    .tab-item.active .dtile.t1 { animation-delay: 6.0s, 6.75s; }  .tab-item.active .dtile.t2 { animation-delay: 6.3s, 7.05s; }
    .tab-item.active .dtile.t3 { animation-delay: 6.6s, 7.35s; }  .tab-item.active .dtile.t4 { animation-delay: 6.9s, 7.65s; }
    .tab-item.active .dtile.t5 { animation-delay: 7.2s, 7.95s; }  .tab-item.active .dtile.t6 { animation-delay: 7.5s, 8.25s; }
    @keyframes tileIn { to { opacity:1; transform: rotate(var(--rot)) translateY(0) scale(1); } }
    @keyframes tileFloat { 0%,100% { transform: rotate(var(--rot)) translateY(0) scale(1);} 50% { transform: rotate(var(--rot)) translateY(-5px) scale(1);} }
    .dtile.t1 { left: 9%;  top: 33%; --rot: -9deg; z-index: 2; }
    .dtile.t2 { left: 31%; top: 15%; --rot: -2deg; width: clamp(150px,17vw,178px); z-index: 4; }
    .dtile.t3 { left: 63%; top: 19%; --rot: 6deg; z-index: 3; }
    .dtile.t4 { left: 38%; top: 53%; --rot: 4deg; z-index: 5; }
    .dtile.t5 { left: 64%; top: 52%; --rot: -6deg; z-index: 3; }
    .dtile.t6 { left: 10%; top: 60%; --rot: 8deg; z-index: 2; }
    .dtile-label { font-size: clamp(8px,.72vw,10px); font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing:.04em; margin-bottom: 9px; white-space: nowrap; }

    /* mini bar chart */
    .mini-bars { display: flex; align-items: flex-end; gap: 6px; height: 48px; }
    .mini-bars i { flex: 1; border-radius: 3px 3px 1px 1px; background: linear-gradient(var(--p450), var(--accent)); }
    .mini-bars i:nth-child(1){ height:50% } .mini-bars i:nth-child(2){ height:80% }
    .mini-bars i:nth-child(3){ height:35% } .mini-bars i:nth-child(4){ height:62% }
    .mini-bars i:nth-child(5){ height:90%; background: linear-gradient(var(--cta), var(--p500)); }

    /* mini line chart */
    .mini-line { width: 100%; height: 48px; overflow: visible; }
    .mini-line path.ln { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
    .mini-line path.ar { fill: url(#areaGrad2); }
    .mini-line circle { fill: var(--cta); }

    /* region heatmap */
    .heat { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; height: 48px; }
    .heat span { border-radius: 3px; background: var(--accent); }
    .heat span.o1 { opacity:.14 } .heat span.o2 { opacity:.3 } .heat span.o3 { opacity:.5 }
    .heat span.o4 { opacity:.72 } .heat span.o5 { opacity:1 }

    /* data table */
    .mini-table { display: flex; flex-direction: column; gap: 5px; }
    .mini-table .tr { display: flex; justify-content: space-between; gap: 8px; font-size: clamp(8.5px,.75vw,10.5px); }
    .mini-table .tr.hd { font-weight: 800; color: var(--muted); border-bottom: 1px solid rgba(109,60,206,.12); padding-bottom: 4px; }
    .mini-table .tr .k { color: var(--navy); font-weight: 700; }
    .mini-table .tr .v { color: var(--accent); font-weight: 700; }

    .ds-head { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); font-size: clamp(9px,.82vw,11px); font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .16em; white-space: nowrap; opacity: 0; }
    .tab-item.active .ds-head { animation: fadeIn .7s ease forwards 5.7s; }
    .ds-net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; opacity: 0; }
    .tab-item.active .ds-net { animation: fadeIn 1.1s ease forwards 6.0s; }
    .ds-net path { fill: none; stroke: var(--accent); stroke-width: .4; stroke-dasharray: 1.3 1.9; opacity: .18; }
    .ds-net circle { fill: var(--p450); opacity: .35; }

    /* classification donut */
    .mini-donut-row { display: flex; align-items: center; gap: 11px; }
    .mini-donut { position: relative; width: 46px; height: 46px; border-radius: 50%; flex: none; background: conic-gradient(var(--accent) 0 42%, var(--p500) 42% 71%, var(--lav150) 71% 100%); }
    .mini-donut::after { content: ''; position: absolute; inset: 31%; border-radius: 50%; background: #fff; }
    .mini-legend { display: flex; flex-direction: column; gap: 4px; font-size: clamp(8px,.72vw,10px); font-weight: 700; color: var(--muted); }
    .mini-legend span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
    .mini-legend i { width: 7px; height: 7px; border-radius: 2px; flex: none; }

    /* vendor risk stacked-bar, Feroot status colors: red/yellow/green */
    .stackbar { display: flex; height: 18px; border-radius: 6px; overflow: hidden; gap: 2px; }
    .stackbar i { border-radius: 3px; }
    .stack-legend { display: flex; gap: 12px; margin-top: 9px; font-size: clamp(8px,.72vw,10px); font-weight: 700; color: var(--muted); }
    .stack-legend span { display: inline-flex; align-items: center; gap: 5px; }
    .stack-legend b { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }

    /* ghost wireframe placeholders */
    .ghost { position: absolute; z-index: 0; opacity: 0; background: rgba(255,255,255,.45); border: 1px solid rgba(108,117,125,.16); border-radius: 8px; padding: 11px 13px; width: clamp(104px,12vw,134px); box-shadow: 0 16px 32px -26px rgba(0,2,71,.28); }
    .tab-item.active .ghost { animation: ghostIn 1.1s ease forwards 5.6s; }
    @keyframes ghostIn { to { opacity: .65; } }
    .gline { height: 7px; border-radius: 4px; background: rgba(108,117,125,.2); margin-bottom: 8px; }
    .gline:last-child { margin-bottom: 0; }
    .gline.w1 { width: 55%; } .gline.w2 { width: 88%; } .gline.w3 { width: 70%; } .gline.w4 { width: 42%; }
    .gbars { display: flex; align-items: flex-end; gap: 5px; height: 32px; }
    .gbars i { flex: 1; background: rgba(108,117,125,.18); border-radius: 3px 3px 1px 1px; }
    .gbars i:nth-child(1){height:50%} .gbars i:nth-child(2){height:80%} .gbars i:nth-child(3){height:40%} .gbars i:nth-child(4){height:66%}
    .grow { display: flex; align-items: center; gap: 9px; }
    .gcircle { width: 32px; height: 32px; border-radius: 50%; border: 6px solid rgba(108,117,125,.18); flex: none; }
    .gcol { flex: 1; }
    .ghost.g1 { left: 1%;  top: 16%; transform: rotate(-6deg); }
    .ghost.g2 { left: 79%; top: 12%; transform: rotate(5deg); }
    .ghost.g3 { left: -2%; top: 56%; transform: rotate(4deg); }
    .ghost.g4 { left: 83%; top: 62%; transform: rotate(-5deg); }
    .ghost.g5 { left: 45%; top: 75%; transform: rotate(3deg); }

    /* ════════════════════════════════════════════════════════════
       SCENE 2, AUDIT
       ════════════════════════════════════════════════════════════ */
    .scene-audit { position: absolute; inset: 0; }

    .fw-list {
      position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
      display: flex; flex-direction: column; gap: clamp(7px,1vw,10px); width: min(256px,40%);
    }
    .tab-item.active .fw-list { animation: fwShift .9s cubic-bezier(.4,0,.2,1) forwards 3.6s; }
    @keyframes fwShift { to { left: 34%; transform: translate(-50%,-50%) scale(.94); } }
    .fw-head { font-size: clamp(9px,.8vw,11px); font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing:.07em; margin-bottom: 2px; text-align: center; opacity: 0; }
    .tab-item.active .fw-head { animation: fwIn .5s ease forwards .2s; }
    .fw-row {
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      background: rgba(255,255,255,.92); border: 1px solid rgba(109,60,206,.1);
      border-radius: 8px; padding: clamp(8px,1vw,11px) clamp(12px,1.3vw,15px);
      box-shadow: 0 8px 20px -18px rgba(0,2,71,.45);
      opacity: 0; transform: translateY(10px);
    }
    .tab-item.active .fw-row { animation: fwIn .7s cubic-bezier(.16,1,.3,1) forwards; }
    .tab-item.active .fw-row.w1{animation-delay:.35s} .tab-item.active .fw-row.w2{animation-delay:.72s} .tab-item.active .fw-row.w3{animation-delay:1.09s}
    .tab-item.active .fw-row.w4{animation-delay:1.46s} .tab-item.active .fw-row.w5{animation-delay:1.83s} .tab-item.active .fw-row.w6{animation-delay:2.2s}
    @keyframes fwIn { to { opacity:1; transform: translateY(0);} }
    .fw-name { font-size: clamp(11.5px,1vw,14px); font-weight: 700; color: var(--navy); }
    .fw-badge { position: relative; display: inline-flex; align-items: center; gap: 5px; font-size: clamp(9.5px,.85vw,11.5px); font-weight: 800; padding: 3px 11px; border-radius: 20px; }
    .fw-badge.checking { color: var(--muted); background: rgba(108,117,125,.14); }
    .fw-badge.checking .sp { width: 9px; height: 9px; border-radius: 50%; border: 1.6px solid var(--muted); border-top-color: transparent; animation: spin .7s linear infinite; }
    .fw-badge.result { position: absolute; right: 0; top: 0; opacity: 0; }
    .fw-badge.result.pass { color: var(--success); background: rgba(48,174,140,.14); }
    .fw-badge.result.warn { color: var(--warning); background: rgba(254,180,21,.14); }
    .fw-badge.result svg { width: 12px; height: 12px; }
    .fw-stat { position: relative; display: inline-flex; }
    .tab-item.active .w1 .checking { animation: hideBadge .01s linear forwards .8s; }  .tab-item.active .w1 .result { animation: showBadge .35s ease forwards .82s; }
    .tab-item.active .w2 .checking { animation: hideBadge .01s linear forwards 1.17s; } .tab-item.active .w2 .result { animation: showBadge .35s ease forwards 1.19s; }
    .tab-item.active .w3 .checking { animation: hideBadge .01s linear forwards 1.54s; } .tab-item.active .w3 .result { animation: showBadge .35s ease forwards 1.56s; }
    .tab-item.active .w4 .checking { animation: hideBadge .01s linear forwards 1.91s; } .tab-item.active .w4 .result { animation: showBadge .35s ease forwards 1.93s; }
    .tab-item.active .w5 .checking { animation: hideBadge .01s linear forwards 2.28s; } .tab-item.active .w5 .result { animation: showBadge .35s ease forwards 2.3s; }
    .tab-item.active .w6 .checking { animation: hideBadge .01s linear forwards 2.65s; } .tab-item.active .w6 .result { animation: showBadge .35s ease forwards 2.67s; }
    @keyframes hideBadge { to { opacity: 0; } }
    @keyframes showBadge { from { opacity:0; transform: scale(.8);} to { opacity:1; transform: scale(1);} }

    .audit-result {
      position: absolute; left: 66%; top: 50%; transform: translate(-50%,-50%) scale(.9);
      display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0;
    }
    .tab-item.active .audit-result { animation: resultIn .85s cubic-bezier(.16,1,.3,1) forwards 4.1s; }
    @keyframes resultIn { from { opacity:0; transform: translate(-50%,-50%) scale(.9);} to { opacity:1; transform: translate(-50%,-50%) scale(1);} }

    .donut { position: relative; width: clamp(150px,18vw,196px); aspect-ratio: 1; }
    .donut svg.gauge { width: 100%; height: 100%; transform: rotate(-90deg); }
    .donut .track { fill:none; stroke: var(--lav100); stroke-width: 13; }
    .donut .fill { fill:none; stroke: url(#auditGrad); stroke-width: 13; stroke-linecap: round; stroke-dasharray: 565.48; stroke-dashoffset: 565.48; }
    .tab-item.active .donut .fill { animation: drawDonut 1.8s cubic-bezier(.3,.7,.2,1) forwards 4.5s; }
    @keyframes drawDonut { to { stroke-dashoffset: 33.9; } }
    @keyframes fadeIn { to { opacity: 1; } }
    .donut .ticks { fill:none; stroke: rgba(109,60,206,.22); stroke-width: 6; stroke-dasharray: 1.4 7.4; }
    .donut .head { fill: #fff; stroke: var(--p450); stroke-width: 3; opacity: 0; }
    .tab-item.active .donut .head { animation: fadeIn .5s ease forwards 6.1s; }
    .donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
    .donut-pct { font-size: clamp(30px,3.8vw,46px); font-weight: 800; color: var(--navy); letter-spacing:-.03em; line-height: 1; }
    .donut-cap { font-size: clamp(8.5px,.8vw,10.5px); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing:.09em; }

    .audit-summary { font-size: clamp(10px,.9vw,12px); font-weight: 700; color: var(--muted); text-align: center; }
    .audit-summary b { color: var(--navy); } .audit-summary .iss { color: var(--attention); }

    .reg-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 420px; }
    .reg-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.92); border: 1px solid rgba(109,60,206,.1); border-radius: 20px; padding: 5px 12px; font-size: clamp(10px,.9vw,12.5px); font-weight: 700; color: var(--navy); box-shadow: 0 8px 18px -16px rgba(0,2,71,.4); opacity: 0; transform: translateY(8px); }
    .tab-item.active .reg-pill { animation: pillIn .5s cubic-bezier(.16,1,.3,1) forwards; }
    .reg-pill.r1{animation-delay:4.0s} .reg-pill.r2{animation-delay:4.35s} .reg-pill.r3{animation-delay:4.7s}
    .reg-pill.r4{animation-delay:5.05s} .reg-pill.r5{animation-delay:5.4s} .reg-pill.r6{animation-delay:5.75s}
    @keyframes pillIn { to { opacity:1; transform: translateY(0);} }
    .reg-pill .dot { width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
    .reg-pill .dot.pass { background: var(--success); } .reg-pill .dot.warn { background: var(--warning); }
    .reg-pill .dot svg { width: 9px; height: 9px; }

    /* ════════════════════════════════════════════════════════════
       SCENE 3, ENFORCE
       ════════════════════════════════════════════════════════════ */
    .scene-enforce { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; row-gap: clamp(2px,0.4vw,6px); column-gap: clamp(24px,5vw,66px); flex-wrap: wrap; align-content: flex-start; padding-top: clamp(4px,0.5vw,8px); }
    .enforce-left { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; }

    .logo-zone { position: relative; width: clamp(150px,20vw,210px); aspect-ratio: 1; display: grid; place-items: center; }
    .logo-mark { width: clamp(96px,13vw,144px); height: auto; z-index: 2; filter: drop-shadow(0 14px 26px rgba(109,60,206,.32)); opacity: 0; }
    .tab-item.active .logo-mark { animation: logoIn 1.1s cubic-bezier(.16,1,.3,1) forwards .3s, logoFloat 6s ease-in-out infinite 1.4s; }
    @keyframes logoIn { from { opacity:0; transform: scale(.7) translateY(6px);} to { opacity:1; transform: scale(1) translateY(0);} }
    @keyframes logoFloat { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-6px);} }

    .tab-item .field { position: absolute; inset: 4%; border-radius: 50%; border: 1.5px solid rgba(109,60,206,.16); opacity: 0; }
    .tab-item.active .field { animation: fieldPulse 4s ease-out infinite; }
    .tab-item.active .field.d2 { animation-delay: 2s; }
    @keyframes fieldPulse { 0% { transform: scale(.7); opacity:.6;} 70% { opacity:0;} 100% { transform: scale(1.2); opacity:0;} }

    .threat { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; border-radius: 3px; display: grid; place-items: center; background: rgba(235,0,40,.16); border: 1px solid rgba(235,0,40,.5); color: var(--attention); opacity: 0; }
    .threat svg { width: 9px; height: 9px; }
    .tab-item.active .threat { animation: threatIn 4s ease-in infinite; }
    .threat.t1 { --fromx:150px; --fromy:-70px; animation-delay: 1.4s !important; }
    .threat.t2 { --fromx:165px; --fromy: 30px; animation-delay: 2.7s !important; }
    .threat.t3 { --fromx:120px; --fromy: 92px; animation-delay: 4.0s !important; }
    @keyframes threatIn {
      0% { opacity:0; transform: translate(var(--fromx),var(--fromy)) scale(.8);} 18% { opacity:1;}
      60% { opacity:1; transform: translate(54px, calc(var(--fromy)*.4)) scale(1);}
      72% { transform: translate(70px, calc(var(--fromy)*.55)) scale(1.05) rotate(8deg);}
      100% { opacity:0; transform: translate(150px, calc(var(--fromy)*1.1)) scale(.7);}
    }
    .pass-script { position:absolute; top:50%; left:50%; width:14px; height:14px; border-radius:3px; display:grid; place-items:center; background:rgba(48,174,140,.16); border:1px solid rgba(48,174,140,.5); color:var(--success); opacity:0; }
    .pass-script svg { width:9px; height:9px; }
    .tab-item.active .pass-script { animation:passThrough 3.5s ease-in infinite; }
    .pass-script.p1 { --fromx:155px; --fromy:-45px; animation-delay:.5s !important; }
    .pass-script.p2 { --fromx:148px; --fromy:65px; animation-delay:2.2s !important; }
    .pass-script.p3 { --fromx:162px; --fromy:-90px; animation-delay:4.8s !important; }
    @keyframes passThrough {
      0%  { opacity:0; transform:translate(var(--fromx),var(--fromy)) scale(.8); }
      15% { opacity:1; }
      55% { opacity:1; transform:translate(20px,calc(var(--fromy)*.2)) scale(1); }
      100%{ opacity:0; transform:translate(-130px,calc(var(--fromy)*.05)) scale(.75); }
    }

    .hud { display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,.92); border: 1px solid rgba(109,60,206,.12); border-radius: 8px; padding: 9px 15px; box-shadow: 0 10px 26px -18px rgba(0,2,71,.5); opacity: 0; }
    .tab-item.active .hud { animation: nodeIn .85s ease forwards 1s; }
    .hud .glyph { width: 32px; height: 32px; background: rgba(48,174,140,.12); color: var(--success); flex: none; }
    .hud-meta { display: flex; flex-direction: column; line-height: 1.1; }
    .hud-num { font-size: clamp(16px,1.7vw,23px); font-weight: 800; color: var(--navy); letter-spacing:-.02em; }
    .hud-label { font-size: clamp(8.5px,.78vw,10.5px); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing:.05em; }

    .feed { display: flex; flex-direction: column; gap: clamp(4px,.5vw,6px); min-width: 250px; }
    .feed-row { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid rgba(109,60,206,.09); border-left: 3px solid var(--attention); border-radius: 8px; padding: clamp(5px,0.55vw,7px) clamp(11px,1.3vw,14px); box-shadow: 0 8px 20px -18px rgba(0,2,71,.4); opacity: 0; transform: translateX(26px); }
    .feed-row.ok { border-left-color: var(--success); }
    .tab-item.active .feed-row { animation: feedIn .8s cubic-bezier(.16,1,.3,1) forwards; }
    .tab-item.active .feed-row.f1{animation-delay:1.0s} .tab-item.active .feed-row.f2{animation-delay:1.9s} .tab-item.active .feed-row.f3{animation-delay:2.8s}
    .tab-item.active .feed-row.f4{animation-delay:3.7s} .tab-item.active .feed-row.f5{animation-delay:4.6s}
    @keyframes feedIn { to { opacity:1; transform: translateX(0);} }
    .feed-ico { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; background: rgba(235,0,40,.13); color: var(--attention); }
    .feed-row.ok .feed-ico { background: rgba(48,174,140,.13); color: var(--success); }
    .feed-ico svg { width: 15px; height: 15px; }
    .feed-body { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
    .feed-title { font-size: clamp(11.5px,1vw,13.5px); font-weight: 700; color: var(--navy); }
    .feed-sub { font-size: clamp(9.5px,.8vw,11px); color: var(--muted); }
    .feed-tag { font-size: clamp(8.5px,.75vw,10px); font-weight: 800; padding: 2px 8px; border-radius: 20px; letter-spacing:.03em; flex: none; color: var(--accent); background: rgba(109,60,206,.1); }
    .feed-row.ok .feed-tag { color: var(--success); background: rgba(48,174,140,.13); }
    .feed-tag.blocked { color: #c0001a; background: rgba(192,0,26,.12); }
.scene--split{display:flex;align-items:center;gap:clamp(12px,2.5vw,32px);width:min(900px,100%);height:100%}
.split-scan{position:relative;flex:1 1 0;height:100%;min-width:0}
.split-audit{flex:0 0 clamp(200px,28%,280px);display:flex;flex-direction:column;justify-content:center;gap:clamp(7px,1vw,10px)}
.split-audit .fw-list{position:static;transform:none;width:100%;animation:none!important}
.tab-item.active .split-audit .fw-head{animation-delay:.15s}
.tab-item.active .split-audit .fw-row.w1{animation-delay:.3s}.tab-item.active .split-audit .fw-row.w2{animation-delay:.6s}.tab-item.active .split-audit .fw-row.w3{animation-delay:.9s}.tab-item.active .split-audit .fw-row.w4{animation-delay:1.2s}.tab-item.active .split-audit .fw-row.w5{animation-delay:1.5s}.tab-item.active .split-audit .fw-row.w6{animation-delay:1.8s}
.tab-item.active .split-audit .w1 .checking{animation:hideBadge .01s linear forwards 1.1s}.tab-item.active .split-audit .w1 .result{animation:showBadge .35s ease forwards 1.12s}
.tab-item.active .split-audit .w2 .checking{animation:hideBadge .01s linear forwards 1.4s}.tab-item.active .split-audit .w2 .result{animation:showBadge .35s ease forwards 1.42s}
.tab-item.active .split-audit .w3 .checking{animation:hideBadge .01s linear forwards 1.7s}.tab-item.active .split-audit .w3 .result{animation:showBadge .35s ease forwards 1.72s}
.tab-item.active .split-audit .w4 .checking{animation:hideBadge .01s linear forwards 2s}.tab-item.active .split-audit .w4 .result{animation:showBadge .35s ease forwards 2.02s}
.tab-item.active .split-audit .w5 .checking{animation:hideBadge .01s linear forwards 2.3s}.tab-item.active .split-audit .w5 .result{animation:showBadge .35s ease forwards 2.32s}
.tab-item.active .split-audit .w6 .checking{animation:hideBadge .01s linear forwards 2.6s}.tab-item.active .split-audit .w6 .result{animation:showBadge .35s ease forwards 2.62s}
@media(max-width:767px){
  .hero-body{flex-direction:column;}
  .hero-left{flex:none;width:100%;}
  .hero-right{width:100%;}
  .stage{overflow:hidden;padding-top:8px;}
  .tab-items{height:316px;overflow:hidden;}
  .tab-item{transform:none!important;transform-origin:center!important;}
  .tabs-wrap{margin-top:2px;}
  .hero-h1{font-size:clamp(28px,8vw,40px)!important;line-height:1.18!important;overflow-wrap:anywhere;}
  .hero-h1 .hero-gradient-text{white-space:normal!important;}
  .scene-wrap{padding:8px 14px!important;}
  .scene--split{position:relative!important;display:block!important;width:100%!important;height:100%!important;}
  .split-scan{position:absolute!important;inset:0!important;z-index:1!important;height:100%!important;pointer-events:none!important;}
  .tab-item[data-tab="1"] .disco-scan{opacity:.48!important;animation:none!important;transform:scale(.98)!important;filter:saturate(1.08);}
  .tab-item[data-tab="1"] .radar{width:min(270px,76vw)!important;}
  .tab-item[data-tab="1"] .radar-ring{border-color:rgba(109,60,206,.22)!important;}
  .tab-item[data-tab="1"] .radar-ring.r3{border-color:rgba(109,60,206,.32)!important;}
  .tab-item[data-tab="1"] .radar-pulse{border-color:rgba(155,114,230,.62)!important;}
  .tab-item[data-tab="1"] .radar-sweep{background:conic-gradient(from 0deg, rgba(109,60,206,.44) 0deg, rgba(48,166,217,.18) 38deg, rgba(109,60,206,.05) 70deg, transparent 104deg, transparent 360deg)!important;}
  .tab-item[data-tab="1"] .radar-core{opacity:.9!important;}
  .tab-item[data-tab="1"] .disco-lines{opacity:.7!important;}
  .tab-item[data-tab="1"] .node,
  .tab-item[data-tab="1"] .spark{display:none!important;}
  .split-audit{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:min(286px,80vw)!important;flex:none!important;z-index:3!important;}
  .split-audit .fw-list{width:100%!important;gap:9px!important;background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;backdrop-filter:none!important;}
  .split-audit .fw-head{font-size:9px!important;margin-bottom:2px!important;text-shadow:0 1px 0 rgba(255,255,255,.86);}
  .split-audit .fw-row{padding:9px 11px!important;gap:10px!important;border-radius:8px!important;border-color:rgba(109,60,206,.16)!important;box-shadow:0 14px 28px -22px rgba(0,2,71,.5)!important;background:rgba(255,255,255,.86)!important;backdrop-filter:blur(5px);}
  .split-audit .fw-name{font-size:11px!important;}
  .split-audit .fw-badge{font-size:8px!important;padding:3px 7px!important;gap:4px!important;}
  .split-audit .fw-badge.result svg{width:10px!important;height:10px!important;}
  .hero-desc{border-left:none;padding-left:0;margin-top:10px;margin-bottom:12px;}
  .fw-row.w4,.fw-row.w5{display:none;}
  .node.n4{display:none;}
  .feed-row.f3,.feed-row.f4{display:none;}
}