*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --charcoal:#3E3E3E;--deep:#111113;--yellow:#FCBF10;--magenta:#DC3662;--purple:#702A9C;--white:#FFFFFF;--green:#00B171;
  --ease-expo:cubic-bezier(0.16,1,0.3,1);--ease-smooth:cubic-bezier(0.25,1,0.5,1);--ease-cine:cubic-bezier(0.33,0,0.2,1);
}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:'Poppins',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{display:flex;align-items:center;justify-content:center}

.stage{position:relative;width:min(1440px,100vw);aspect-ratio:16/9;overflow:hidden;background:var(--deep);border-radius:6px}

/* GRAIN */
.grain{position:absolute;inset:0;z-index:90;pointer-events:none;opacity:0.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:128px;mix-blend-mode:overlay;animation:gs .5s steps(3) infinite}
@keyframes gs{0%{transform:translate(0)}33%{transform:translate(-2px,1px)}66%{transform:translate(1px,-2px)}100%{transform:translate(0)}}

/* AMBIENT */
.ambient{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(120px);will-change:transform}
.orb-a{width:55%;aspect-ratio:1;background:var(--yellow);opacity:0.06;top:-20%;right:-15%;animation:da 20s ease-in-out infinite alternate}
.orb-b{width:40%;aspect-ratio:1;background:var(--magenta);opacity:0.04;bottom:-25%;left:-10%;animation:db 26s ease-in-out infinite alternate}
.orb-c{width:30%;aspect-ratio:1;background:var(--purple);opacity:0.035;top:40%;left:50%;animation:dc 22s ease-in-out infinite alternate}
@keyframes da{to{transform:translate(-60px,80px) scale(1.15)}}
@keyframes db{to{transform:translate(50px,-60px) scale(1.1)}}
@keyframes dc{to{transform:translate(-40px,50px) scale(.9)}}

/* SCENES */
.scene{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;opacity:0;pointer-events:none;transition:opacity 1.2s var(--ease-cine)}
.scene.on{opacity:1;pointer-events:auto}
.scene.out{opacity:0;transition:opacity .8s var(--ease-cine)}

/* TYPE */
.big{font-size:clamp(2.6rem,6vw,6rem);font-weight:800;line-height:1.05;letter-spacing:-.04em;color:var(--white);padding:0 8%}
.mid{font-size:clamp(1.6rem,3.5vw,3.2rem);font-weight:700;line-height:1.12;letter-spacing:-.03em;color:var(--white);padding:0 8%}
.sub{font-size:clamp(.85rem,1.5vw,1.2rem);font-weight:400;line-height:1.5;color:rgba(255,255,255,.5);padding:0 8%;margin-top:20px}
.accent-y{color:var(--yellow)}.accent-m{color:var(--magenta)}.accent-g{color:var(--green)}

/* BEATS */
.beat{display:block;opacity:0;transform:translateY(36px) scale(.97);filter:blur(8px);transition:opacity .9s var(--ease-expo),transform 1s var(--ease-expo),filter 1s var(--ease-expo)}
.beat.in{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.glow-word{text-shadow:0 0 80px rgba(252,191,16,.3),0 0 160px rgba(252,191,16,.1)}
.glow-green{text-shadow:0 0 80px rgba(0,177,113,.3),0 0 160px rgba(0,177,113,.1)}

/* ═══ CARD SCENES ═══ */
.card-scene{padding:0 4%!important;gap:14px}

/* SHARED CARD STYLES */
.ui-panel{
  background:rgba(255,255,255,.06);backdrop-filter:blur(40px) saturate(140%);-webkit-backdrop-filter:blur(40px) saturate(140%);
  border:1px solid rgba(255,255,255,.1);border-radius:24px;width:100%;max-width:820px;
  box-shadow:0 60px 120px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.08);
  position:relative;z-index:10;
  transform:scale(.88) translateY(50px);opacity:0;filter:blur(12px);
  transition:transform 2s var(--ease-expo),opacity 1.5s var(--ease-expo),filter 2s var(--ease-expo);
}
.scene.on .ui-panel{transform:scale(1) translateY(0);opacity:1;filter:blur(0)}

.spotlight{position:absolute;width:120%;height:80%;top:10%;left:-10%;z-index:0;pointer-events:none;opacity:0;transition:opacity 2s var(--ease-expo) .3s}
.scene.on .spotlight{opacity:1}
.spot-yellow{background:radial-gradient(ellipse at center,rgba(252,191,16,.07) 0%,transparent 65%)}
.spot-green{background:radial-gradient(ellipse at center,rgba(0,177,113,.06) 0%,transparent 65%)}

/* Stagger internals */
.pi{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease-expo),transform .7s var(--ease-expo)}
.scene.on .pi-1{opacity:1;transform:translateY(0);transition-delay:.9s}
.scene.on .pi-2{opacity:1;transform:translateY(0);transition-delay:1.1s}
.scene.on .pi-3{opacity:1;transform:translateY(0);transition-delay:1.3s}
.scene.on .pi-4{opacity:1;transform:translateY(0);transition-delay:1.5s}
.scene.on .pi-5{opacity:1;transform:translateY(0);transition-delay:1.7s}

.card-label{font-size:clamp(.65rem,1vw,.82rem);font-weight:500;color:rgba(255,255,255,.3);letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}

.ui-header{padding:13px 22px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.07)}
.ui-user{display:flex;align-items:center;gap:10px}
.avatar{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:rgba(255,255,255,.6)}
.user-name{font-size:13px;font-weight:600;color:rgba(255,255,255,.8)}
.user-role{font-size:10px;color:rgba(255,255,255,.35);margin-left:8px;font-weight:500;background:rgba(112,42,156,.2);padding:2px 8px;border-radius:100px}
.ui-time{font-size:10px;color:rgba(255,255,255,.25)}
.ui-body{display:grid;grid-template-columns:1fr 230px;gap:22px;padding:22px}
@media(max-width:860px){.ui-body{grid-template-columns:1fr;padding:16px}}

.ext-badge{font-size:10px;font-weight:600;color:rgba(255,255,255,.4);display:flex;align-items:center;gap:5px;margin-bottom:8px}
.req-title{font-size:16px;font-weight:600;line-height:1.35;color:var(--white);margin-bottom:16px}

.agent-box{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:15px;background:rgba(255,255,255,.03);transition:border-color .6s var(--ease-expo),box-shadow .6s var(--ease-expo)}
.agent-box.glow-m{border-color:rgba(220,54,98,.15);box-shadow:0 0 40px rgba(220,54,98,.05)}
.agent-box.glow-g{border-color:rgba(0,177,113,.15);box-shadow:0 0 40px rgba(0,177,113,.05)}
.agent-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.agent-head h4{font-size:12px;font-weight:600;color:rgba(255,255,255,.75)}
.agent-head span{font-size:9px;color:rgba(255,255,255,.3);display:block;margin-top:1px}
.agent-body{font-size:11px;color:rgba(255,255,255,.45);line-height:1.7;margin-bottom:10px;transition:opacity .4s}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px;opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease-expo),transform .5s var(--ease-expo)}
.tags.show{opacity:1;transform:translateY(0)}
.tag{font-size:9px;padding:3px 10px;border:1px solid rgba(255,255,255,.1);border-radius:100px;color:rgba(255,255,255,.45);font-weight:500}

.suit-row{display:flex;align-items:center;gap:10px}
.suit-label{font-size:9px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.35)}
.suit-bars{display:flex;gap:3px;flex:1}
.suit-seg{height:4px;flex:1;background:rgba(255,255,255,.05);border-radius:2px;transition:background .5s var(--ease-expo)}
.suit-result{font-size:10px;font-weight:600;min-width:110px;text-align:right;color:rgba(255,255,255,.35);transition:opacity .4s,color .4s}

.price-row{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.4);margin-bottom:10px}
.price-row b{font-size:15px;color:var(--white)}
.prog-track{width:100%;height:4px;background:rgba(255,255,255,.05);border-radius:3px;margin-bottom:10px;overflow:hidden}
.prog-fill{width:20%;height:100%;border-radius:3px;transition:background .4s}
.meta-row{display:flex;justify-content:space-between;font-size:10px;color:rgba(255,255,255,.25);margin-bottom:7px}
.meta-row b{color:rgba(255,255,255,.5);font-weight:500}
.actions{display:flex;gap:8px;margin-top:18px;justify-content:flex-end}
.btn{padding:8px 20px;border-radius:100px;font-size:12px;font-weight:600;border:none;font-family:inherit;cursor:default;transition:background .4s,color .4s,box-shadow .4s,opacity .4s}
.btn-dec{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5)}
.btn-app{background:rgba(0,177,113,.7);color:var(--white);box-shadow:0 4px 20px rgba(0,177,113,.2)}

/* Button state transitions */
.btn-dec.active{background:rgba(220,54,98,.12);border-color:rgba(220,54,98,.25);color:var(--magenta)}
.btn-app.active{background:var(--green);box-shadow:0 0 30px rgba(0,177,113,.3)}
.btn.dimmed{opacity:.3;pointer-events:none}
.btn-flash{animation:bf .6s ease-out}
@keyframes bf{0%{box-shadow:0 0 0 0 rgba(0,177,113,.5)}100%{box-shadow:0 0 0 24px rgba(0,177,113,0)}}

/* SCAN BAR */
.scan-bar{position:absolute;bottom:0;left:0;width:100%;height:2px;z-index:30;background:linear-gradient(90deg,transparent,var(--yellow),transparent);transform:translateX(-100%);opacity:0}
.scan-bar.on{opacity:1;animation:ss 1.2s var(--ease-cine) infinite}
.scan-bar.green{background:linear-gradient(90deg,transparent,var(--green),transparent)}
@keyframes ss{to{transform:translateX(100%)}}

/* SPARKS */
.spark-pos{position:absolute;width:20px;height:20px;z-index:20;opacity:0;transition:opacity 1s var(--ease-expo)}
.spark-pos.lit{opacity:1}
.spark-pos svg{width:100%;height:100%;filter:drop-shadow(0 0 12px rgba(252,191,16,.9));animation:sp 3.5s ease-in-out infinite}
.spark-tl{top:-10px;left:-10px}.spark-br{bottom:-10px;right:-10px}
@keyframes sp{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.spark-yellow svg{fill:var(--yellow);filter:drop-shadow(0 0 12px rgba(252,191,16,.9))}
.spark-green svg{fill:var(--green);filter:drop-shadow(0 0 12px rgba(0,177,113,.9))}

/* SHAKE */
@keyframes shake{0%,100%{transform:translate(0)}15%{transform:translate(-3px,1px)}30%{transform:translate(3px,-2px)}50%{transform:translate(-2px,2px)}70%{transform:translate(2px,-1px)}}
.shake{animation:shake .35s ease-out}

/* COUNTER FLASH */
.counter{
  position:absolute;top:14px;right:14px;z-index:20;
  font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.2);
  opacity:0;transition:opacity .5s var(--ease-expo);
}
.counter.show{opacity:1}

/* ═══ END FRAME ═══ */
.end-logo{opacity:0;transform:translateY(20px) scale(.95);transition:opacity 1s var(--ease-expo) .5s,transform 1.2s var(--ease-expo) .5s}
.scene.on .end-logo{opacity:1;transform:translateY(0) scale(1)}
.wordmark{font-size:clamp(.9rem,1.4vw,1.2rem);font-weight:700;letter-spacing:-.02em;color:rgba(255,255,255,.25);margin-top:10px;opacity:0;transition:opacity .8s var(--ease-expo) .7s}
.scene.on .wordmark{opacity:1}
.end-tagline{font-size:clamp(.75rem,1.2vw,1rem);font-weight:400;color:rgba(255,255,255,.35);margin-top:16px;opacity:0;transition:opacity 1s var(--ease-expo) .9s}
.scene.on .end-tagline{opacity:1}
.end-cta{display:inline-block;margin-top:32px;padding:14px 44px;border-radius:100px;background:var(--yellow);color:var(--charcoal);font-size:clamp(.75rem,1vw,.95rem);font-weight:600;letter-spacing:-.01em;text-decoration:none;box-shadow:0 0 60px rgba(252,191,16,.2),0 8px 30px rgba(252,191,16,.15);opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-expo) 1.3s,transform .9s var(--ease-expo) 1.3s}
.scene.on .end-cta{opacity:1;transform:translateY(0)}

/* CONTROLS */
#bar{position:absolute;bottom:0;left:0;z-index:95;height:2px;background:var(--yellow);width:0%;opacity:.5}
#pp{position:absolute;bottom:10px;right:10px;z-index:95;width:30px;height:30px;border-radius:50%;border:none;background:rgba(255,255,255,.05);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.3;transition:opacity .2s;color:rgba(255,255,255,.6)}
#pp:hover{opacity:.7}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.15s!important}.beat{transform:none!important;filter:none!important}.grain{animation:none}}
.defs{display:none}