:root{
    /* v2 light palette */
    --navy:#0F172A;
    --blue:#2563EB;
    --blue-deep:#1E3A8A;
    --blue-light:#60A5FA;
    --sky:#DBEAFE;
    --teal:#0D9488;
    --teal-light:#5EEAD4;
    --orange:#F97316;
    --orange-light:#FDBA74;
    --orange-deep:#EA580C;
    --green:#10B981;
    --green-deep:#047857;
    --yellow:#FBBF24;
    --yellow-deep:#D97706;
    --bg:#F1F5F9;
    --bg-2:#E2E8F0;
    --ink:#0F172A;
    --muted:#64748B;
    --line:#CBD5E1;
    --pink:#F472B6;

    /* dark neon blue accents — Safetag / phone / logo only */
    --neon-bg-1:#020817;
    --neon-bg-2:#0a1628;
    --neon-card:#0f1e35;
    --neon-line:#1e3a5f;
    --neon-blue:#3b82f6;
    --neon-blue-bright:#1d4ed8;
    --neon-blue-light:#60a5fa;
    --neon-blue-soft:#93c5fd;
    --neon-blue-pale:#bfdbfe;
    --neon-blue-ice:#e0f2fe;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{
    height:100%;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
    background:radial-gradient(ellipse at center,#1e293b 0%,#0f172a 100%);
    display:flex;align-items:center;justify-content:center;
  }
  .stage{
    position:relative;
    width:min(94vw,960px);
    aspect-ratio:16/9;
    background:var(--bg);
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05);
  }
  .stage::before{
    content:"";position:absolute;inset:0;
    background-image:
      radial-gradient(circle at 20% 30%,rgba(37,99,235,.06) 0,transparent 40%),
      radial-gradient(circle at 80% 70%,rgba(13,148,136,.06) 0,transparent 40%);
    pointer-events:none;
  }

  .scene{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    opacity:0;
    animation:sceneCycle 28s infinite;
  }
  .scene-1{animation-delay:0s}
  .scene-2{animation-delay:4s}
  .scene-3{animation-delay:8s}
  .scene-7{animation-delay:12s}  /* NEW visual check-out */
  .scene-4{animation-delay:16s}  /* tablet check-out (shifted) */
  .scene-5{animation-delay:20s}  /* bus clear (shifted) */
  .scene-6{animation-delay:24s}  /* dashboard (shifted) */
  @keyframes sceneCycle{
    0%      {opacity:0}
    1%,14.28%{opacity:1}
    16.5%,100%{opacity:0}
  }

  /* ==== HEADER (neon blue brand) ==== */
  .brand{
    position:absolute;top:22px;left:26px;
    display:flex;align-items:center;gap:10px;
    background:var(--neon-bg-1);
    padding:8px 14px 8px 10px;
    border-radius:14px;
    border:1px solid rgba(59,130,246,.4);
    box-shadow:0 4px 14px rgba(0,0,0,.15),0 0 20px rgba(59,130,246,.25);
    z-index:30;
  }
  .brand-mark{
    width:26px;height:26px;border-radius:8px;
    background:linear-gradient(135deg,var(--neon-blue) 0%,var(--neon-blue-bright) 100%);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 14px rgba(59,130,246,.8),inset 0 0 0 1px rgba(255,255,255,.2);
  }
  .brand-mark::after{
    content:"";width:9px;height:9px;border-radius:50%;
    background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.3),0 0 10px rgba(255,255,255,.9);
  }
  .brand-name{font-weight:800;color:var(--neon-blue-ice);font-size:14px;letter-spacing:1.2px;text-shadow:0 0 10px rgba(96,165,250,.5)}
  .brand-name span{color:var(--neon-blue-light)}

  .scene-counter{
    position:absolute;top:24px;right:26px;z-index:30;
    font-size:11px;font-weight:700;color:var(--muted);letter-spacing:1.5px;
  }

  .progress-track{
    position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(15,23,42,.06);z-index:30;
  }
  .progress{
    height:100%;background:linear-gradient(90deg,var(--orange) 0%,#EA580C 100%);
    width:0;animation:progress 28s linear infinite;
  }
  @keyframes progress{from{width:0}to{width:100%}}

  /* =================================================
     TEXT PANELS — overlay copy for each scene
  ==================================================*/
  .text-panel{
    position:absolute;
    z-index:10;
    pointer-events:none;
    max-width:260px;
  }
  .text-panel.left{left:28px;top:56px}
  .text-panel.right{right:28px;top:56px}
  .text-panel.left-bot{left:28px;bottom:30px}
  .text-panel.right-bot{right:28px;bottom:30px}
  .text-panel.center-top{left:50%;top:54px;transform:translateX(-50%);text-align:center;max-width:380px}

  .tp-headline{
    font-size:15px;font-weight:900;color:var(--ink);
    line-height:1.25;letter-spacing:-.2px;
    margin-bottom:6px;
    opacity:0;animation:tpIn .5s ease-out both;
  }
  .tp-headline span{color:var(--blue)}
  .tp-headline .org{color:var(--orange)}
  .tp-headline .grn{color:var(--green-deep)}

  .tp-sub{
    font-size:10px;font-weight:600;color:var(--muted);
    line-height:1.5;margin-bottom:10px;
    opacity:0;animation:tpIn .5s ease-out both;animation-delay:.15s;
  }

  .tp-checks{
    display:flex;flex-direction:column;gap:5px;
    opacity:0;animation:tpIn .5s ease-out both;animation-delay:.3s;
  }
  .tp-check{
    display:flex;align-items:center;gap:7px;
    font-size:9.5px;font-weight:700;color:var(--ink);
    letter-spacing:.2px;
  }
  .tp-dot{
    width:16px;height:16px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
  }
  .tp-dot.blue{background:rgba(37,99,235,.12);color:var(--blue)}
  .tp-dot.green{background:rgba(16,185,129,.12);color:var(--green)}
  .tp-dot.orange{background:rgba(249,115,22,.12);color:var(--orange)}
  .tp-dot svg{width:9px;height:9px}

  @keyframes tpIn{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
  }

  /* stagger per scene — each scene re-triggers on its cycle */
  .scene-1 .tp-headline{animation-delay:.3s}
  .scene-1 .tp-sub{animation-delay:.5s}
  .scene-1 .tp-checks{animation-delay:.7s}

  .scene-2 .tp-headline{animation-delay:.3s}
  .scene-2 .tp-sub{animation-delay:.5s}
  .scene-2 .tp-checks{animation-delay:.7s}

  .scene-3 .tp-headline{animation-delay:.3s}
  .scene-3 .tp-sub{animation-delay:.5s}
  .scene-3 .tp-checks{animation-delay:.7s}

  .scene-7 .tp-headline{animation-delay:.3s}
  .scene-7 .tp-sub{animation-delay:.5s}
  .scene-7 .tp-checks{animation-delay:.7s}

  .scene-4 .tp-headline{animation-delay:.3s}
  .scene-4 .tp-sub{animation-delay:.5s}
  .scene-4 .tp-checks{animation-delay:.7s}

  .scene-6 .tp-headline{animation-delay:.3s}
  .scene-6 .tp-sub{animation-delay:.5s}
  .scene-6 .tp-checks{animation-delay:.7s}

  /* =================================================
     SCENE 1 — THE SETUP
  ==================================================*/
  .s1{display:flex;align-items:center;gap:80px}

  .student-card{
    position:relative;
    animation:floatIn .8s cubic-bezier(.3,1.4,.4,1) both;
  }
  @keyframes floatIn{
    from{opacity:0;transform:translateY(30px) scale(.9)}
    to{opacity:1;transform:translateY(0) scale(1)}
  }
  .student-card::after{
    content:"";position:absolute;left:50%;bottom:-18px;
    width:140px;height:14px;border-radius:50%;
    background:radial-gradient(ellipse,rgba(15,23,42,.18) 0%,transparent 70%);
    transform:translateX(-50%);
  }

  /* Safetag = neon blue */
  .Safetag-fly{
    position:absolute;top:55px;right:-8px;
    width:44px;height:44px;
    animation:SafetagSnap 1.4s cubic-bezier(.5,1.7,.4,1) both;
    animation-delay:1s;
    filter:drop-shadow(0 0 14px rgba(59,130,246,.8));
  }
  @keyframes SafetagSnap{
    0%{transform:translate(180px,-100px) scale(1.6) rotate(45deg);opacity:0}
    50%{opacity:1}
    65%{transform:translate(0,0) scale(1.25) rotate(0);opacity:1}
    100%{transform:translate(0,0) scale(1) rotate(0)}
  }
  .Safetag-fly::before{
    content:"";position:absolute;inset:-10px;border-radius:50%;
    border:2px solid var(--neon-blue-light);opacity:0;
    animation:SafetagRing 1.6s ease-out infinite;animation-delay:2.4s;
  }
  @keyframes SafetagRing{
    0%{transform:scale(1);opacity:.8}
    100%{transform:scale(2.2);opacity:0}
  }

  .arrow-conn{
    width:80px;height:40px;
    animation:fadeIn .6s ease both;animation-delay:2s;
  }
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}

  /* phone = neon blue dark mode */
  .phone-3d{
    width:170px;
    position:relative;
    animation:floatIn .8s cubic-bezier(.3,1.4,.4,1) both;
    animation-delay:.4s;
    filter:drop-shadow(0 25px 40px rgba(15,23,42,.25)) drop-shadow(0 0 30px rgba(59,130,246,.35));
  }

  /* =================================================
     SCENE 2 — THE JOURNEY (bus + running kids in front)
  ==================================================*/
  .s2-bg{
    position:absolute;inset:0;
    background:linear-gradient(180deg,#DBEAFE 0%,#F1F5F9 60%,#F1F5F9 100%);
  }
  .clouds{position:absolute;top:0;left:0;right:0;height:140px;pointer-events:none}
  .cloud{position:absolute;animation:cloudDrift 18s linear infinite}
  .cloud-1{top:30px;left:8%;animation-delay:0s}
  .cloud-2{top:55px;left:48%;animation-delay:-9s;transform:scale(.7)}
  .cloud-3{top:18px;left:78%;animation-delay:-4s;transform:scale(.85)}
  @keyframes cloudDrift{
    from{transform:translateX(0)}
    to{transform:translateX(-30px)}
  }

  .ground{
    position:absolute;left:0;right:0;bottom:0;height:140px;
    background:linear-gradient(180deg,#86EFAC 0%,#4ADE80 100%);
  }
  .ground::before{
    content:"";position:absolute;top:0;left:0;right:0;height:6px;
    background:#16A34A;
  }
  .road{
    position:absolute;left:0;right:0;bottom:50px;height:38px;
    background:#334155;
    border-top:3px solid #1E293B;
    border-bottom:3px solid #1E293B;
  }
  .road::before{
    content:"";position:absolute;top:50%;left:0;right:0;height:4px;transform:translateY(-50%);
    background:repeating-linear-gradient(90deg,#FBBF24 0,#FBBF24 30px,transparent 30px,transparent 55px);
    animation:roadMove 1.5s linear infinite;
  }
  @keyframes roadMove{
    from{background-position:0 0}
    to{background-position:-55px 0}
  }

  /* bus drives in and gently keeps moving (subtle bob) */
  .bus-back{
    position:absolute;left:-300px;bottom:75px;
    width:280px;height:150px;
    animation:busArrive 2.2s cubic-bezier(.25,.8,.3,1) both;animation-delay:.2s;
    z-index:1;
  }
  @keyframes busArrive{
    0%{left:-300px}
    100%{left:50%;transform:translateX(-50%)}
  }

  /* tag signal pulses emanating from each occupied window */
  .bus-pulse{
    position:absolute;width:14px;height:14px;
    pointer-events:none;
  }
  .bus-pulse::before,
  .bus-pulse::after{
    content:"";position:absolute;inset:0;border-radius:50%;
    border:2.5px solid var(--neon-blue);
    box-shadow:0 0 10px rgba(59,130,246,.7);
    animation:tagEmit 1.6s ease-out infinite;
  }
  .bus-pulse::after{animation-delay:.8s}
  /* solid dot at the source */
  .bus-pulse i{
    position:absolute;left:50%;top:50%;width:6px;height:6px;
    border-radius:50%;background:var(--neon-blue);
    transform:translate(-50%,-50%);
    box-shadow:0 0 8px var(--neon-blue),0 0 14px rgba(59,130,246,.6);
  }
  /* one pulse above each occupied window — staggered timing */
  .bus-pulse-1{left:23%;top:33%;animation-delay:0s}
  .bus-pulse-2{left:37%;top:33%}
  .bus-pulse-2::before{animation-delay:.3s}
  .bus-pulse-2::after{animation-delay:1.1s}
  .bus-pulse-3{left:51%;top:33%}
  .bus-pulse-3::before{animation-delay:.6s}
  .bus-pulse-3::after{animation-delay:1.4s}
  .bus-pulse-4{left:65%;top:33%}
  .bus-pulse-4::before{animation-delay:.9s}
  .bus-pulse-4::after{animation-delay:1.7s}
  @keyframes tagEmit{
    0%{transform:scale(.5);opacity:1}
    100%{transform:scale(4);opacity:0}
  }

  .wheel-spin{transform-origin:center;animation:spin 1s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* =================================================
     SCENE 7 — VISUAL CHECK-OUT (kids leaving the bus at school)
  ==================================================*/
  .s7-bg{
    position:absolute;inset:0;
    background:linear-gradient(180deg,#FED7AA 0%,#FFEDD5 30%,#F1F5F9 65%,#F1F5F9 100%);
  }
  .school-bg{
    position:absolute;right:6%;top:14%;
    z-index:0;
    filter:drop-shadow(0 8px 16px rgba(15,23,42,.12));
    animation:floatIn .7s ease-out both;
  }
  .bus-school{
    position:absolute;left:50%;bottom:75px;
    width:280px;height:150px;
    transform:translateX(-50%);
    z-index:2;
    animation:floatIn .6s cubic-bezier(.3,1.4,.4,1) both;animation-delay:.1s;
  }
  /* kids fade out one by one */
  .scene-7 .win-kid{opacity:1;animation:kidLeave .5s ease both}
  .scene-7 .win-kid-1{animation-delay:.7s}
  .scene-7 .win-kid-2{animation-delay:1.25s}
  .scene-7 .win-kid-3{animation-delay:1.8s}
  .scene-7 .win-kid-4{animation-delay:2.35s}
  @keyframes kidLeave{
    0%{opacity:1}
    100%{opacity:0}
  }
  /* matching pulses fade off in sync with each kid */
  .scene-7 .bus-pulse{animation:pulseOff .3s ease-out both}
  .scene-7 .bus-pulse.po-1{animation-delay:.7s}
  .scene-7 .bus-pulse.po-2{animation-delay:1.25s}
  .scene-7 .bus-pulse.po-3{animation-delay:1.8s}
  .scene-7 .bus-pulse.po-4{animation-delay:2.35s}
  @keyframes pulseOff{
    0%{opacity:1}
    100%{opacity:0;visibility:hidden}
  }

  /* live drop-off counter — big, central, ticks down 4→3→2→1→0 */
  .dropoff-counter{
    position:absolute;top:14%;left:50%;
    transform:translateX(-50%);
    background:#fff;
    border:2.5px solid var(--orange);
    padding:10px 22px;border-radius:36px;
    display:flex;align-items:center;gap:12px;
    box-shadow:0 12px 30px rgba(249,115,22,.25);
    z-index:5;
    animation:floatIn .5s ease-out both;animation-delay:.2s;
  }
  .dc-label{
    font-size:10px;font-weight:800;color:var(--muted);letter-spacing:1.2px;
  }
  .dc-num{
    position:relative;width:22px;height:26px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .dc-d{
    position:absolute;left:50%;top:50%;
    font-size:24px;font-weight:900;color:var(--orange-deep);
    line-height:1;
    opacity:0;
    transform:translate(-50%,-50%);
    font-variant-numeric:tabular-nums;
  }
  .scene-7 .dc-4{animation:digit .55s .4s both}
  .scene-7 .dc-3{animation:digit .55s .95s both}
  .scene-7 .dc-2{animation:digit .55s 1.5s both}
  .scene-7 .dc-1{animation:digit .55s 2.05s both}
  .scene-7 .dc-0{animation:digitFinal .5s 2.6s both;color:var(--green-deep)}
  @keyframes digit{
    0%{opacity:0;transform:translate(-50%,-50%) translateY(-8px) scale(.6)}
    25%{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1)}
    75%{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1)}
    100%{opacity:0;transform:translate(-50%,-50%) translateY(8px) scale(.6)}
  }
  @keyframes digitFinal{
    0%{opacity:0;transform:translate(-50%,-50%) translateY(-8px) scale(.6)}
    60%{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1.4)}
    100%{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1)}
  }
  .dc-suffix{font-size:14px;font-weight:800;color:var(--muted)}
  .dc-divider{
    width:1px;height:20px;background:var(--line);
  }
  .dc-status{
    font-size:10px;font-weight:800;color:var(--orange-deep);letter-spacing:.8px;
    min-width:88px;text-align:left;
  }
  .scene-7 .dc-status{animation:statusSwap .5s 2.6s both}
  @keyframes statusSwap{
    0%{opacity:0}
    100%{opacity:1;color:var(--green-deep)}
  }
  .scene-7 .caption{animation-delay:2.9s;position:absolute;bottom:11%;left:0;right:0}

  /* tag-off badge that flashes near each window when kid leaves */
  .off-badge{
    position:absolute;width:22px;height:22px;border-radius:50%;
    background:var(--green);
    border:2px solid #fff;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:12px;font-weight:900;
    box-shadow:0 4px 12px rgba(16,185,129,.4);
    opacity:0;transform:scale(0);
    z-index:6;
  }
  .off-badge svg{width:11px;height:11px}
  .scene-7 .off-badge.ob-1{animation:badgePop .9s .65s ease-out both}
  .scene-7 .off-badge.ob-2{animation:badgePop .9s 1.2s ease-out both}
  .scene-7 .off-badge.ob-3{animation:badgePop .9s 1.75s ease-out both}
  .scene-7 .off-badge.ob-4{animation:badgePop .9s 2.3s ease-out both}
  @keyframes badgePop{
    0%{opacity:0;transform:scale(0)}
    20%{opacity:1;transform:scale(1.3)}
    40%{transform:scale(1)}
    80%{opacity:1;transform:scale(1)}
    100%{opacity:0;transform:scale(.9) translateY(-10px)}
  }
  /* position badges over each window */
  .ob-1{left:24%;top:42%}
  .ob-2{left:38%;top:42%}
  .ob-3{left:51%;top:42%}
  .ob-4{left:65%;top:42%}

  /* =================================================
     SCENE 3 + 4 — TABLET (light v2 style)
  ==================================================*/
  .panel{display:flex;flex-direction:column;align-items:center;gap:18px}

  .tablet-frame{
    width:380px;
    background:#1E293B;
    border-radius:24px;
    padding:14px;
    box-shadow:0 25px 60px rgba(15,23,42,.25),0 0 0 2px rgba(15,23,42,.05);
    animation:floatIn .6s cubic-bezier(.3,1.4,.4,1) both;
    position:relative;
  }
  .tablet-frame::before{
    content:"";position:absolute;left:8px;top:50%;width:4px;height:30px;
    background:#334155;border-radius:2px;transform:translateY(-50%);
  }
  .tablet-screen{
    background:#fff;border-radius:14px;padding:18px;
    min-height:250px;
  }
  .t-header{
    display:flex;align-items:center;justify-content:space-between;
    padding-bottom:12px;border-bottom:2px solid var(--bg-2);margin-bottom:8px;
  }
  .t-title{display:flex;align-items:center;gap:10px}
  .t-icon{
    width:34px;height:34px;border-radius:9px;
    background:linear-gradient(135deg,var(--blue) 0%,var(--blue-deep) 100%);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 12px rgba(37,99,235,.3);
  }
  .t-icon svg{width:18px;height:18px}
  .t-title-text{font-size:13px;font-weight:800;color:var(--ink);line-height:1.2}
  .t-title-text small{display:block;font-size:10px;font-weight:600;color:var(--muted);margin-top:1px}
  .t-badge{
    display:flex;align-items:center;gap:5px;
    font-size:10px;font-weight:700;color:var(--green-deep);
    background:#D1FAE5;padding:5px 10px;border-radius:20px;
  }
  .t-badge.out{color:#0F766E;background:#CCFBF1}
  .t-badge::before{
    content:"";width:6px;height:6px;border-radius:50%;background:var(--green);
    animation:livePulse 1.5s ease-in-out infinite;
  }
  .t-badge.out::before{background:var(--teal)}
  @keyframes livePulse{0%,100%{opacity:.4}50%{opacity:1}}

  .row{
    display:flex;align-items:center;gap:12px;padding:9px 4px;
    border-bottom:1px solid var(--bg-2);
    opacity:0;
  }
  .row:last-child{border-bottom:none}
  .av{
    width:32px;height:32px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:11px;font-weight:800;flex-shrink:0;
  }
  .av-1{background:linear-gradient(135deg,#F472B6,#EC4899)}
  .av-2{background:linear-gradient(135deg,#60A5FA,#2563EB)}
  .av-3{background:linear-gradient(135deg,#FBBF24,#F59E0B)}
  .av-4{background:linear-gradient(135deg,#5EEAD4,#0D9488)}
  .nm{flex:1;font-size:12px;font-weight:700;color:var(--ink)}
  .nm small{display:block;font-size:9px;font-weight:500;color:var(--muted);margin-top:1px}

  .check-pill{
    display:flex;align-items:center;gap:5px;
    font-size:9px;font-weight:800;padding:5px 9px;border-radius:20px;
    transform:scale(0);
    letter-spacing:.3px;
  }
  .check-pill.in-pill{background:#D1FAE5;color:var(--green-deep)}
  .check-pill.out-pill{background:#CCFBF1;color:#0F766E}
  .check-pill svg{width:10px;height:10px}

  /* SCENE 3 anims */
  .scene-3 .row:nth-child(1){animation:rowSlide .35s ease-out both;animation-delay:.4s}
  .scene-3 .row:nth-child(2){animation:rowSlide .35s ease-out both;animation-delay:.65s}
  .scene-3 .row:nth-child(3){animation:rowSlide .35s ease-out both;animation-delay:.9s}
  .scene-3 .row:nth-child(4){animation:rowSlide .35s ease-out both;animation-delay:1.15s}
  @keyframes rowSlide{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
  .scene-3 .row:nth-child(1) .check-pill{animation:checkBounce .4s cubic-bezier(.5,1.7,.4,1) both;animation-delay:.6s}
  .scene-3 .row:nth-child(2) .check-pill{animation:checkBounce .4s cubic-bezier(.5,1.7,.4,1) both;animation-delay:.85s}
  .scene-3 .row:nth-child(3) .check-pill{animation:checkBounce .4s cubic-bezier(.5,1.7,.4,1) both;animation-delay:1.1s}
  .scene-3 .row:nth-child(4) .check-pill{animation:checkBounce .4s cubic-bezier(.5,1.7,.4,1) both;animation-delay:1.35s}
  @keyframes checkBounce{
    0%{transform:scale(0) rotate(-90deg)}
    60%{transform:scale(1.25) rotate(0)}
    100%{transform:scale(1)}
  }

  /* SCENE 4 — mirrored slide */
  .scene-4 .row:nth-child(1){animation:rowSlideR .35s ease-out both;animation-delay:.4s}
  .scene-4 .row:nth-child(2){animation:rowSlideR .35s ease-out both;animation-delay:.65s}
  .scene-4 .row:nth-child(3){animation:rowSlideR .35s ease-out both;animation-delay:.9s}
  .scene-4 .row:nth-child(4){animation:rowSlideR .35s ease-out both;animation-delay:1.15s}
  @keyframes rowSlideR{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
  .scene-4 .row:nth-child(1) .check-pill{animation:checkBounce .4s cubic-bezier(.5,1.7,.4,1) both;animation-delay:.6s}
  .scene-4 .row:nth-child(2) .check-pill{animation:checkBounce .4s cubic-bezier(.5,1.7,.4,1) both;animation-delay:.85s}
  .scene-4 .row:nth-child(3) .check-pill{animation:checkBounce .4s cubic-bezier(.5,1.7,.4,1) both;animation-delay:1.1s}
  .scene-4 .row:nth-child(4) .check-pill{animation:checkBounce .4s cubic-bezier(.5,1.7,.4,1) both;animation-delay:1.35s}

  .caption{
    text-align:center;
    animation:capIn .5s ease-out both;animation-delay:1.7s;
  }
  @keyframes capIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
  .caption .big{
    font-size:22px;font-weight:900;color:var(--ink);letter-spacing:.5px;line-height:1;
  }
  .caption .big span{color:var(--blue)}
  .caption .big span.teal{color:var(--teal)}
  .caption .small{
    font-size:10px;font-weight:700;color:var(--muted);margin-top:5px;letter-spacing:1.5px;
  }

  /* match counter for scene 4 */
  .match-counter{
    display:flex;align-items:center;gap:12px;
    background:#fff;
    border:2px solid var(--green);
    padding:8px 18px;border-radius:30px;
    box-shadow:0 8px 24px rgba(16,185,129,.2);
    animation:capIn .5s ease-out both;animation-delay:.2s;
  }
  .match-num{
    font-size:18px;font-weight:900;color:var(--green-deep);
    min-width:38px;text-align:right;
  }
  .match-bar{display:flex;gap:5px}
  .match-dot{
    width:9px;height:9px;border-radius:50%;
    background:var(--bg-2);
    border:1px solid var(--line);
  }
  .scene-4 .match-dot:nth-child(1){animation:dotLight .3s ease-out both;animation-delay:.7s}
  .scene-4 .match-dot:nth-child(2){animation:dotLight .3s ease-out both;animation-delay:.95s}
  .scene-4 .match-dot:nth-child(3){animation:dotLight .3s ease-out both;animation-delay:1.2s}
  .scene-4 .match-dot:nth-child(4){animation:dotLight .3s ease-out both;animation-delay:1.45s}
  @keyframes dotLight{
    from{background:var(--bg-2);box-shadow:none}
    to{background:var(--green);box-shadow:0 0 8px rgba(16,185,129,.6);border-color:var(--green)}
  }
  .match-label{font-size:10px;font-weight:800;color:var(--green-deep);letter-spacing:1px}

  /* =================================================
     SCENE 5 — BUS CLEAR
  ==================================================*/
  .s5{display:flex;flex-direction:column;align-items:center;gap:24px;position:relative}
  .s5-bus{position:relative;animation:floatIn .6s cubic-bezier(.3,1.4,.4,1) both}
  .scan-frame{
    position:absolute;inset:-14px;border:3px dashed var(--blue);border-radius:16px;
    opacity:0;
    animation:scanFrame 2s ease-in-out 1;animation-delay:.5s;animation-fill-mode:both;
  }
  @keyframes scanFrame{
    0%{opacity:0;transform:scale(1.15)}
    20%,80%{opacity:1;transform:scale(1)}
    100%{opacity:0;transform:scale(1)}
  }
  .scan-bar{
    position:absolute;left:-14px;right:-14px;height:4px;
    background:linear-gradient(90deg,transparent 0%,var(--blue) 50%,transparent 100%);
    box-shadow:0 0 20px var(--blue);
    opacity:0;
    animation:scanSweep 2s ease-in-out 1;animation-delay:.5s;animation-fill-mode:both;
  }
  @keyframes scanSweep{
    0%{top:-14px;opacity:0}
    15%{opacity:1}
    85%{opacity:1}
    100%{top:calc(100% + 14px);opacity:0}
  }
  .scan-text{
    display:flex;align-items:center;gap:10px;
    font-size:13px;font-weight:800;color:var(--blue);letter-spacing:2.5px;
    animation:scanOut .3s ease-out both;animation-delay:2.6s;
  }
  .scan-text::before{
    content:"";width:8px;height:8px;border-radius:50%;background:var(--blue);
    animation:livePulse 1s ease-in-out infinite;
  }
  @keyframes scanOut{to{opacity:0;transform:scale(.8);height:0;margin:0}}

  .clear-result{
    display:flex;flex-direction:column;align-items:center;gap:14px;
    opacity:0;
    animation:clearIn .6s cubic-bezier(.3,1.6,.4,1) both;animation-delay:2.7s;
  }
  @keyframes clearIn{
    from{opacity:0;transform:scale(0)}
    to{opacity:1;transform:scale(1)}
  }
  .shield-svg{filter:drop-shadow(0 12px 24px rgba(16,185,129,.35))}
  .clear-text{text-align:center}
  .clear-text .big{
    font-size:22px;font-weight:900;color:var(--green-deep);letter-spacing:.5px;line-height:1;
  }
  .clear-text .small{
    font-size:11px;font-weight:600;color:var(--muted);margin-top:5px;letter-spacing:1px;
  }

  /* =================================================
     SCENE 6 — DASHBOARD
  ==================================================*/
  .s6{display:flex;flex-direction:column;align-items:center;gap:14px}
  .monitor{
    width:460px;
    animation:floatIn .6s cubic-bezier(.3,1.4,.4,1) both;
  }
  .mon-screen{
    background:#fff;
    border:5px solid #1E293B;
    border-radius:14px;
    padding:18px;
    box-shadow:0 25px 60px rgba(15,23,42,.25);
    position:relative;
  }
  .mon-screen::before{
    content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
    width:30px;height:3px;background:#475569;border-radius:2px;
  }
  .mon-stand{
    width:90px;height:18px;background:linear-gradient(180deg,#1E293B,#0F172A);
    margin:0 auto;clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);
  }
  .mon-base{width:160px;height:7px;background:#0F172A;margin:0 auto;border-radius:0 0 4px 4px}

  .dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .dash-title{display:flex;align-items:center;gap:8px}
  .dash-title-ico{
    width:26px;height:26px;border-radius:7px;
    background:linear-gradient(135deg,var(--blue),var(--blue-deep));
  }
  .dash-title-text{font-size:13px;font-weight:800;color:var(--ink)}
  .dash-title-text small{display:block;font-size:9px;color:var(--muted);font-weight:600}
  .dash-pills{display:flex;gap:6px}
  .pill{
    font-size:9px;font-weight:700;padding:5px 11px;border-radius:20px;
    background:var(--bg);color:var(--muted);
  }
  .pill.active{background:var(--blue);color:#fff}

  .stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
  .stat{
    background:var(--bg);border-radius:10px;padding:10px;
    border-left:3px solid var(--blue);
  }
  .stat:nth-child(2){border-color:var(--green)}
  .stat:nth-child(3){border-color:var(--teal)}
  .stat-label{font-size:8px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
  .stat-val{font-size:18px;font-weight:900;color:var(--ink);margin-top:2px;line-height:1}
  .stat-trend{font-size:8px;font-weight:700;color:var(--green);margin-top:2px}

  .charts-row{display:grid;grid-template-columns:1.6fr 1fr;gap:10px}
  .chart-card{background:var(--bg);border-radius:10px;padding:12px}
  .chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .chart-label{font-size:9px;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.5px}
  .chart-sub{font-size:8px;color:var(--muted);font-weight:600}
  .bars{display:flex;align-items:flex-end;gap:6px;height:70px}
  .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
  .bar{
    width:100%;background:linear-gradient(180deg,var(--blue-light),var(--blue));
    border-radius:4px 4px 0 0;height:0;
    animation:barGrow .9s cubic-bezier(.3,1.5,.4,1) both;
  }
  .bar-col:nth-child(4) .bar{background:linear-gradient(180deg,var(--orange-light),var(--orange))}
  .bar-day{font-size:7px;font-weight:700;color:var(--muted);text-transform:uppercase}
  .scene-6 .bar-col:nth-child(1) .bar{animation-delay:.5s;--h:60%}
  .scene-6 .bar-col:nth-child(2) .bar{animation-delay:.6s;--h:78%}
  .scene-6 .bar-col:nth-child(3) .bar{animation-delay:.7s;--h:45%}
  .scene-6 .bar-col:nth-child(4) .bar{animation-delay:.8s;--h:92%}
  .scene-6 .bar-col:nth-child(5) .bar{animation-delay:.9s;--h:68%}
  .scene-6 .bar-col:nth-child(6) .bar{animation-delay:1s;--h:82%}
  .scene-6 .bar-col:nth-child(7) .bar{animation-delay:1.1s;--h:55%}
  @keyframes barGrow{from{height:0}to{height:var(--h)}}

  .donut-wrap{display:flex;align-items:center;justify-content:center;height:90px;position:relative}
  .donut{
    width:90px;height:90px;border-radius:50%;
    background:conic-gradient(var(--green) 0 78%,var(--orange) 78% 92%,var(--line) 92% 100%);
    animation:donutSpin 1.2s cubic-bezier(.3,1.3,.4,1) both;animation-delay:.5s;
    position:relative;
    display:flex;align-items:center;justify-content:center;
  }
  .donut::after{
    content:"";position:absolute;inset:14px;border-radius:50%;background:var(--bg);
  }
  .donut-text{
    position:absolute;text-align:center;z-index:2;
    animation:fadeIn .4s ease both;animation-delay:1.4s;
  }
  .donut-text .num{font-size:14px;font-weight:900;color:var(--ink);line-height:1}
  .donut-text .lbl{font-size:7px;font-weight:700;color:var(--muted);margin-top:1px}
  @keyframes donutSpin{
    from{transform:rotate(-180deg) scale(0);opacity:0}
    to{transform:rotate(0) scale(1);opacity:1}
  }

  .s6-tagline{
    text-align:center;
    animation:capIn .5s ease-out both;animation-delay:1.6s;
  }
  .s6-tagline .big{
    font-size:18px;font-weight:900;color:var(--ink);letter-spacing:.5px;
  }
  .s6-tagline .big span{color:var(--orange)}
  .s6-tagline .small{
    font-size:10px;font-weight:600;color:var(--muted);margin-top:3px;letter-spacing:1px;
  }
  /* =================================================
     RESPONSIVE — TABLET (≤ 768px)
  ==================================================*/
  @media(max-width:768px){
    .stage{
      width:96vw;
      aspect-ratio:16/9;
      border-radius:14px;
    }
    .brand{top:12px;left:14px;padding:6px 10px 6px 8px;border-radius:10px;gap:6px}
    .brand-mark{width:20px;height:20px;border-radius:6px}
    .brand-mark::after{width:7px;height:7px}
    .brand-name{font-size:11px;letter-spacing:.8px}
    .scene-counter{top:14px;right:14px;font-size:8px}

    /* text panels — position overrides */
    .text-panel{max-width:180px !important}
    .text-panel.left-bot{left:14px;bottom:14px}
    .text-panel.left{top:48px !important}
    .text-panel.right{top:48px !important}
    .tp-headline{font-size:11px;margin-bottom:4px}
    .tp-sub{font-size:8px;margin-bottom:6px}
    .tp-checks{gap:3px}
    .tp-check{font-size:7.5px;gap:4px}
    .tp-dot{width:12px;height:12px}
    .tp-dot svg{width:7px;height:7px}

    /* scene 1 */
    .s1{gap:30px}
    .student-card svg{width:130px;height:182px}
    .Safetag-fly{width:28px;height:28px;top:36px;right:-4px}
    .Safetag-fly svg{width:28px;height:28px}
    .arrow-conn{width:40px;height:20px}
    .phone-3d{width:110px}
    .phone-3d svg{width:110px;height:200px}

    /* scene 2 */
    .bus-back{width:200px;height:107px;bottom:55px}
    .bus-back svg{width:200px;height:107px}
    .road{height:28px;bottom:36px}
    .ground{height:100px}
    .bus-pulse{transform:scale(.7)}

    /* scene 3/4 tablet */
    .tablet-frame{width:280px;padding:8px;border-radius:16px}
    .tablet-screen{padding:10px;min-height:auto;border-radius:10px}
    .t-header{padding-bottom:6px;margin-bottom:4px}
    .t-icon{width:24px;height:24px;border-radius:6px}
    .t-icon svg{width:12px;height:12px}
    .t-title-text{font-size:9px}
    .t-title-text small{font-size:7px}
    .t-badge{font-size:7px;padding:3px 6px}
    .row{padding:5px 2px;gap:6px}
    .av{width:22px;height:22px;font-size:8px}
    .nm{font-size:9px}
    .nm small{font-size:7px}
    .check-pill{font-size:7px;padding:3px 5px;gap:3px}
    .check-pill svg{width:7px;height:7px}
    .panel{margin-left:-100px !important}
    .match-counter{padding:5px 10px;gap:6px;border-radius:20px}
    .match-num{font-size:13px;min-width:28px}
    .match-dot{width:6px;height:6px}
    .match-label{font-size:7px}
    .dc-suffix{font-size:10px}

    /* scene 5 bus clear */
    .s5-bus svg{width:200px;height:107px}
    .scan-text{font-size:9px;letter-spacing:1.5px}
    .shield-svg{width:70px;height:80px}
    .clear-text .big{font-size:16px}
    .clear-text .small{font-size:8px}
    .s5{gap:14px}

    /* scene 6 dashboard */
    .monitor{width:320px}
    .s6{margin-left:-130px !important}
    .mon-screen{padding:10px;border-width:3px;border-radius:10px}
    .mon-screen::before{width:20px;height:2px;top:4px}
    .dash-top{margin-bottom:8px}
    .dash-title-ico{width:18px;height:18px;border-radius:5px}
    .dash-title-text{font-size:10px}
    .dash-title-text small{font-size:7px}
    .pill{font-size:7px;padding:3px 7px}
    .stats-row{gap:4px;margin-bottom:6px}
    .stat{padding:6px;border-radius:6px;border-left-width:2px}
    .stat-label{font-size:6px}
    .stat-val{font-size:13px}
    .stat-trend{font-size:6px}
    .charts-row{gap:5px}
    .chart-card{padding:6px;border-radius:6px}
    .chart-label{font-size:7px}
    .chart-sub{font-size:6px}
    .bars{height:45px;gap:3px}
    .bar-day{font-size:5px}
    .donut{width:55px;height:55px}
    .donut::after{inset:9px}
    .donut-wrap{height:55px}
    .donut-text .num{font-size:10px}
    .donut-text .lbl{font-size:5px}
    .mon-stand{width:60px;height:12px}
    .mon-base{width:100px;height:5px}

    /* scene 7 visual checkout */
    .school-bg{width:130px;height:110px;right:3%;top:12%}
    .bus-school{width:200px;height:107px;bottom:55px}
    .bus-school svg{width:200px;height:107px}
    .dropoff-counter{padding:5px 10px;gap:6px;top:10%}
    .dc-label{font-size:7px}
    .dc-num{width:16px;height:18px}
    .dc-d{font-size:16px}
    .dc-suffix{font-size:9px}
    .dc-status{font-size:7px;min-width:auto}
    .off-badge{width:16px;height:16px}
    .off-badge svg{width:8px;height:8px}
  }

  /* =================================================
     RESPONSIVE — MOBILE (≤ 480px)
  ==================================================*/
  @media(max-width:480px){
    .stage{
      width:100vw;
      border-radius:0;
      aspect-ratio:16/9;
    }
    .brand{top:8px;left:8px;padding:4px 8px 4px 6px;border-radius:8px;gap:4px}
    .brand-mark{width:16px;height:16px;border-radius:4px}
    .brand-mark::after{width:5px;height:5px}
    .brand-name{font-size:8px;letter-spacing:.5px}
    .scene-counter{display:none}

    /* text panels — position overrides */
    .text-panel{max-width:130px !important}
    .text-panel.left-bot{left:8px;bottom:8px}
    .text-panel.left{top:32px !important}
    .text-panel.right{top:32px !important;right:8px !important}
    .tp-headline{font-size:8px;margin-bottom:2px}
    .tp-sub{font-size:6px;margin-bottom:4px;line-height:1.3}
    .tp-checks{gap:2px}
    .tp-check{font-size:6px;gap:3px}
    .tp-dot{width:10px;height:10px}
    .tp-dot svg{width:6px;height:6px}

    /* scene 1 */
    .s1{gap:12px}
    .student-card svg{width:85px;height:119px}
    .Safetag-fly{width:18px;height:18px;top:22px;right:-2px}
    .Safetag-fly svg{width:18px;height:18px}
    .Safetag-fly::before{inset:-5px}
    .arrow-conn{width:24px;height:12px}
    .phone-3d{width:72px}
    .phone-3d svg{width:72px;height:131px}

    /* scene 2 */
    .bus-back{width:140px;height:75px;bottom:40px}
    .bus-back svg{width:140px;height:75px}
    .road{height:20px;bottom:26px}
    .ground{height:70px}
    .bus-pulse{transform:scale(.5)}
    .clouds svg{transform:scale(.5)}

    /* scene 3/4 tablet */
    .tablet-frame{width:190px;padding:5px;border-radius:10px}
    .tablet-screen{padding:6px;border-radius:7px}
    .t-header{padding-bottom:4px;margin-bottom:3px}
    .t-icon{width:16px;height:16px;border-radius:4px}
    .t-icon svg{width:9px;height:9px}
    .t-title-text{font-size:7px}
    .t-title-text small{font-size:5.5px}
    .t-badge{font-size:5.5px;padding:2px 4px;gap:3px}
    .t-badge::before{width:4px;height:4px}
    .row{padding:3px 1px;gap:4px}
    .av{width:16px;height:16px;font-size:6px}
    .nm{font-size:7px}
    .nm small{font-size:5px}
    .check-pill{font-size:5.5px;padding:2px 4px;gap:2px}
    .check-pill svg{width:5px;height:5px}
    .panel{margin-left:-150px !important;    margin-top: 50px;}
    .match-counter{padding:3px 6px;gap:4px;border-radius:14px;border-width:1.5px}
    .match-num{font-size:10px;min-width:20px}
    .match-dot{width:5px;height:5px}
    .match-label{font-size:5.5px;letter-spacing:.5px}
    .dc-suffix{font-size:7px}
    .dc-divider{height:12px}

    /* scene 5 bus clear */
    .s5-bus svg{width:140px;height:75px}
    .scan-text{font-size:7px;letter-spacing:1px;gap:5px}
    .scan-text::before{width:5px;height:5px}
    .shield-svg{width:48px;height:55px}
    .clear-text .big{font-size:12px}
    .clear-text .small{font-size:6px}
    .s5{gap:8px}
    .scan-frame{inset:-8px;border-width:2px;border-radius:10px}
    .scan-bar{left:-8px;right:-8px;height:2px}

    /* scene 6 dashboard */
    .monitor{width:210px}
    .s6{margin-left:-130px !important}
    .mon-screen{padding:6px;border-width:2px;border-radius:7px}
    .mon-screen::before{width:14px;height:1.5px;top:3px}
    .dash-top{margin-bottom:4px}
    .dash-title-ico{width:12px;height:12px;border-radius:3px}
    .dash-title-text{font-size:7px}
    .dash-title-text small{font-size:5px}
    .pill{font-size:5px;padding:2px 4px}
    .stats-row{gap:3px;margin-bottom:4px}
    .stat{padding:4px;border-radius:4px;border-left-width:2px}
    .stat-label{font-size:5px}
    .stat-val{font-size:10px}
    .stat-trend{font-size:5px}
    .charts-row{gap:3px}
    .chart-card{padding:4px;border-radius:4px}
    .chart-head{margin-bottom:4px}
    .chart-label{font-size:5px}
    .chart-sub{font-size:4.5px}
    .bars{height:30px;gap:2px}
    .bar-day{font-size:4px}
    .donut{width:36px;height:36px}
    .donut::after{inset:6px}
    .donut-wrap{height:36px}
    .donut-text .num{font-size:7px}
    .donut-text .lbl{font-size:4px}
    .mon-stand{width:40px;height:8px}
    .mon-base{width:65px;height:3px}

    /* scene 7 visual checkout */
    .school-bg{width:85px;height:72px;right:2%;top:10%}
    .bus-school{width:140px;height:75px;bottom:40px}
    .bus-school svg{width:140px;height:75px}
    .dropoff-counter{padding:3px 6px;gap:4px;top:8%;border-radius:14px;border-width:1.5px}
    .dc-label{font-size:5.5px}
    .dc-num{width:12px;height:14px}
    .dc-d{font-size:12px}
    .dc-suffix{font-size:7px}
    .dc-status{font-size:5.5px;min-width:auto;letter-spacing:.3px}
    .dc-divider{height:10px}
    .off-badge{width:12px;height:12px;border-width:1.5px}
    .off-badge svg{width:6px;height:6px}
  }
  /* =================================================
     PAUSE / PLAY TOGGLE
  ==================================================*/
  .pause-btn{
    position:absolute;bottom:14px;right:14px;z-index:40;
    width:36px;height:36px;border-radius:50%;
    background:rgba(15,23,42,.7);
    backdrop-filter:blur(8px);
    border:1.5px solid rgba(255,255,255,.15);
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all .2s ease;
    box-shadow:0 4px 12px rgba(0,0,0,.3);
  }
  .pause-btn:hover{
    background:rgba(15,23,42,.9);
    border-color:rgba(255,255,255,.3);
    transform:scale(1.1);
  }
  .pause-btn svg{width:14px;height:14px;fill:#fff}
  .pause-btn .play-icon{display:none}
  .stage.paused .pause-btn .pause-icon{display:none}
  .stage.paused .pause-btn .play-icon{display:block}

  .stage.paused,
  .stage.paused *{
    animation-play-state:paused !important;
  }

  @media(max-width:768px){
    .pause-btn{width:28px;height:28px;bottom:10px;right:10px}
    .pause-btn svg{width:10px;height:10px}
  }
  @media(max-width:480px){
    .pause-btn{width:24px;height:24px;bottom:8px;right:8px}
    .pause-btn svg{width:9px;height:9px}
  }