.argus-hero-stage,
.argus-hero-stage * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.argus-hero-stage {
  --bg:#06090f;
  --card:#0e1623;
  --border-hi:#2e4a70;
  --text:#f0f4ff;
  --sub:#8ba0c0;
  --dim:#3a5070;
  --blue:#5b9cf6;
  --green:#22c98a;
  --yellow:#f59e0b;
  --red:#f87171;
}

.argus-hero-stage::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 700px 500px at 30% 40%,rgba(59,106,191,.1) 0%,transparent 70%),
             radial-gradient(ellipse 500px 400px at 75% 65%,rgba(167,139,250,.06) 0%,transparent 70%);
  pointer-events:none;
}
.argus-hero-stage .argus-stage {width:600px;height:460px;position:relative}

/* ── ARGUS BADGE ── */
.argus-hero-stage .abadge{
  position:absolute;top:16px;left:50%;
  transform:translateX(-50%) translateY(-24px);
  background:var(--card);border:1px solid var(--border-hi);
  border-radius:999px;padding:6px 16px;
  font-size:10px;color:var(--sub);
  font-family:'DM Mono',monospace;
  display:flex;align-items:center;gap:8px;
  opacity:0;transition:all .5s cubic-bezier(.22,1,.36,1);
  white-space:nowrap;z-index:100;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.argus-hero-stage .abadge.v{opacity:1;transform:translateX(-50%) translateY(0)}
.argus-hero-stage .ab-dot{width:6px;height:6px;border-radius:50%;background:var(--green);
  animation:live 2s infinite}
@keyframes live{0%,100%{box-shadow:0 0 0 0 rgba(34,201,138,.6)}50%{box-shadow:0 0 0 6px rgba(34,201,138,0)}}
.argus-hero-stage .ab-name{color:var(--text);font-weight:600}

/* ── STARS ── */
.argus-hero-stage .starfield{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.argus-hero-stage .star{position:absolute;border-radius:50%;background:#fff;
  animation:twinkle var(--d) ease-in-out infinite var(--dl)}
@keyframes twinkle{0%,100%{opacity:.04}50%{opacity:var(--op)}}

/* ══════════════════════════════
   SCENE BASE
══════════════════════════════ */
.argus-hero-stage .scene{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}

/* ══════════════════════════════
   SCENE 1 — SETUP
══════════════════════════════ */
.argus-hero-stage .s1-label{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);font-family:'DM Mono',monospace;font-weight:500;
  display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(8px);transition:all .6s ease;
}
.argus-hero-stage .s1-label::before,.s1-label::after{content:'';width:32px;height:1px;background:rgba(91,156,246,.3)}
.argus-hero-stage .s1-label.v{opacity:1;transform:translateY(0)}

.argus-hero-stage .dcard{
  background:var(--card);border:1px solid var(--border-hi);
  border-radius:16px;padding:8px;width:360px;
  opacity:0;transform:translateY(16px) scale(.97);
  transition:all .65s cubic-bezier(.22,1,.36,1);
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 80px rgba(59,106,191,.07);
}
.argus-hero-stage .dcard.v{opacity:1;transform:translateY(0) scale(1)}

.argus-hero-stage .drow{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:10px;
  opacity:0;transform:translateX(-12px);
  transition:all .5s cubic-bezier(.22,1,.36,1);
}
.argus-hero-stage .drow.v{opacity:1;transform:translateX(0)}
.argus-hero-stage .drow+.drow{border-top:1px solid rgba(255,255,255,.05)}

.argus-hero-stage .dfav{width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;border:1px solid rgba(255,255,255,.07)}
.argus-hero-stage .dtext{font-family:'DM Mono',monospace;font-size:14px;color:var(--text);flex:1;letter-spacing:.01em}
.argus-hero-stage .dcursor{display:inline-block;width:2px;height:14px;background:var(--blue);
  margin-left:2px;animation:blink .85s infinite;vertical-align:middle}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.argus-hero-stage .dadded{font-size:9px;font-family:'DM Mono',monospace;color:var(--green);
  opacity:0;transition:opacity .4s ease}
.argus-hero-stage .dadded.v{opacity:1}

.argus-hero-stage .s1-meta{
  display:flex;gap:8px;
  opacity:0;transform:translateY(8px);transition:all .5s ease;
}
.argus-hero-stage .s1-meta.v{opacity:1;transform:translateY(0)}
.argus-hero-stage .mpill{
  background:rgba(255,255,255,.04);border:1px solid var(--border-hi);
  border-radius:999px;padding:7px 15px;
  font-size:11px;color:var(--sub);font-family:'DM Mono',monospace;
  display:flex;align-items:center;gap:6px;
}
.argus-hero-stage .mpill b{color:var(--text);font-weight:600}

.argus-hero-stage .s1-hint{
  font-size:12px;color:var(--sub);letter-spacing:.01em;
  opacity:0;transition:opacity .5s ease;
}
.argus-hero-stage .s1-hint.v{opacity:1}
.argus-hero-stage .s1-hint strong{color:var(--text);font-weight:600}

/* ══════════════════════════════
   SCENE 2 — CRON CLOCK
══════════════════════════════ */
.argus-hero-stage .cron-badge{
  background:rgba(34,201,138,.08);border:1px solid rgba(34,201,138,.3);
  border-radius:999px;padding:6px 18px;
  font-size:11px;font-family:'DM Mono',monospace;
  color:var(--green);letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
  opacity:0;transform:translateY(10px);transition:all .6s ease;
}
.argus-hero-stage .cron-badge.v{opacity:1;transform:translateY(0)}
.argus-hero-stage .cron-dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  animation:pulg 1.5s infinite}
@keyframes pulg{0%,100%{box-shadow:0 0 0 0 rgba(34,201,138,.6)}50%{box-shadow:0 0 0 7px rgba(34,201,138,0)}}

.argus-hero-stage .clock-num{
  font-family:'DM Mono',monospace;font-size:96px;font-weight:500;
  color:var(--text);letter-spacing:-.03em;line-height:1;
  text-shadow:0 0 120px rgba(91,156,246,.12);
  opacity:0;transition:opacity .5s ease .1s, color .3s ease, text-shadow .4s ease;
}
.argus-hero-stage .clock-num.v{opacity:1}
.argus-hero-stage .clock-num.fire{color:var(--blue);text-shadow:0 0 100px rgba(91,156,246,.7),0 0 40px rgba(91,156,246,.4)}

.argus-hero-stage .clock-sub-label{
  font-size:12px;color:var(--sub);letter-spacing:.1em;text-transform:uppercase;
  font-family:'DM Mono',monospace;
  opacity:0;transition:opacity .5s ease .15s, color .3s ease;
}
.argus-hero-stage .clock-sub-label.v{opacity:1}
.argus-hero-stage .clock-sub-label.fire{color:var(--blue)}

.argus-hero-stage .cron-fires-box{
  background:var(--card);border:1.5px solid rgba(91,156,246,.35);
  border-radius:14px;padding:16px 24px;
  display:flex;align-items:center;gap:14px;
  opacity:0;transform:scale(.88) translateY(10px);
  transition:all .65s cubic-bezier(.22,1,.36,1);
  box-shadow:0 0 40px rgba(91,156,246,.12),0 16px 48px rgba(0,0,0,.4);
}
.argus-hero-stage .cron-fires-box.v{opacity:1;transform:scale(1) translateY(0)}
.argus-hero-stage .cfb-icon{font-size:26px}
.argus-hero-stage .cfb-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:3px}
.argus-hero-stage .cfb-sub{font-size:11px;color:var(--sub);font-family:'DM Mono',monospace}

/* ══════════════════════════════
   SCENE 3 — BROWSERS
══════════════════════════════ */
.argus-hero-stage .browsers-row{
  display:flex;gap:14px;align-items:flex-start;justify-content:center;
  padding-bottom:28px;/* room for badge */
}

.argus-hero-stage .mbw{
  width:176px;
  background:#fff;
  border-radius:12px;
  overflow:visible;/* badges need to overflow */
  box-shadow:0 12px 48px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06);
  opacity:0;transform:translateY(24px) scale(.94);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
  position:relative;
}
.argus-hero-stage .mbw.v{opacity:1;transform:translateY(0) scale(1)}
.argus-hero-stage .mbw-inner{border-radius:12px;overflow:hidden}

/* Mac chrome — very clear */
.argus-hero-stage .mbw-chrome{
  background:linear-gradient(180deg,#f0f0f2 0%,#e5e5e8 100%);
  border-bottom:1px solid #c8c8cc;
  padding:8px 10px;
  display:flex;align-items:center;gap:7px;
}
.argus-hero-stage .mbw-dots{display:flex;gap:5px}
.argus-hero-stage .mbw-dot{width:10px;height:10px;border-radius:50%}
.argus-hero-stage .mbw-url{
  flex:1;background:#fff;border:1px solid #c8c8cc;
  border-radius:6px;padding:4px 8px;
  font-size:9px;color:#333;
  font-family:'DM Mono',monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-weight:500;
}
.argus-hero-stage .mbw-geo{
  font-size:8.5px;background:#dbeafe;border:1px solid #93c5fd;
  border-radius:4px;padding:2px 6px;color:#1d4ed8;
  font-family:'DM Mono',monospace;font-weight:600;white-space:nowrap;
}

/* Browser body — white, real readable text */
.argus-hero-stage .mbw-body{
  background:#fff;
  padding:10px 10px 12px;
  position:relative;
  height:160px;
  overflow:hidden;
}

/* Real text inside browsers */
.argus-hero-stage .page-title-text{
  font-size:11px;font-weight:700;color:#111;margin-bottom:2px;
  font-family:'Sora',sans-serif;
}
.argus-hero-stage .page-sub-text{
  font-size:9px;color:#888;margin-bottom:10px;
  font-family:'Sora',sans-serif;
}

.argus-hero-stage .price-cards{display:flex;gap:6px;margin-bottom:8px}
.argus-hero-stage .pc{
  flex:1;border:1.5px solid #e5e7eb;border-radius:8px;
  padding:7px 6px;background:#fafafa;
  transition:border-color .4s ease,background .4s ease,transform .4s ease,box-shadow .4s ease;
}
.argus-hero-stage .pc.lit{
  border-color:#2563eb;background:#eff6ff;
  transform:translateY(-3px);
  box-shadow:0 6px 16px rgba(37,99,235,.2);
}
.argus-hero-stage .pc.new-card{
  border-color:#2563eb;background:#eff6ff;
}
.argus-hero-stage .pc-tier{font-size:8px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.argus-hero-stage .pc-price-val{font-size:13px;font-weight:800;color:#111;margin-bottom:4px;line-height:1}
.argus-hero-stage .pc-price-val span{font-size:9px;font-weight:400;color:#9ca3af}
.argus-hero-stage .pc-feat-line{font-size:8px;color:#6b7280;margin-bottom:2px}
.argus-hero-stage .pc-new-badge{
  display:inline-block;background:#2563eb;color:#fff;
  font-size:7px;font-weight:700;padding:1px 5px;border-radius:3px;
  margin-bottom:4px;letter-spacing:.05em;
  opacity:0;transition:opacity .4s ease;
}
.argus-hero-stage .pc-new-badge.v{opacity:1}

/* Error body */
.argus-hero-stage .mbw-error{
  background:#fef2f2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:160px;gap:8px;border-top:1px solid #fecaca;
}
.argus-hero-stage .mbw-error-icon{font-size:28px}
.argus-hero-stage .mbw-error-title{font-size:11px;font-weight:700;color:#dc2626}
.argus-hero-stage .mbw-error-sub{font-size:9px;color:#b91c1c;font-family:'DM Mono',monospace;text-align:center;line-height:1.5}

/* Scan line sweep */
.argus-hero-stage .scan-sweep{
  position:absolute;left:0;right:0;height:3px;top:-4px;
  background:linear-gradient(90deg,transparent 0%,rgba(37,99,235,.7) 50%,transparent 100%);
  opacity:0;
}
.argus-hero-stage .scan-sweep.go{
  opacity:1;
  animation:sweepdown 1.4s ease-in-out forwards;
}
@keyframes sweepdown{0%{top:0;opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}

/* Status badge — INSIDE the card at bottom, fully visible */
.argus-hero-stage .st-badge{
  display:flex;align-items:center;gap:6px;
  padding:7px 12px;margin-top:8px;
  border-radius:8px;
  font-size:10px;font-weight:700;font-family:'DM Mono',monospace;
  letter-spacing:.06em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);
  transition:all .55s cubic-bezier(.22,1,.36,1);
}
.argus-hero-stage .st-badge.show{opacity:1;transform:translateY(0)}
.argus-hero-stage .sb-moved{background:#fef3c7;border:1.5px solid #f59e0b;color:#92400e}
.argus-hero-stage .sb-moved .sb-icon{color:#f59e0b}
.argus-hero-stage .sb-quiet{background:#f3f4f6;border:1.5px solid #d1d5db;color:#6b7280}
.argus-hero-stage .sb-error{background:#fee2e2;border:1.5px solid #f87171;color:#991b1b}
.argus-hero-stage .sb-error .sb-icon{color:#ef4444}
.argus-hero-stage .sb-detail{font-size:8.5px;font-weight:400;opacity:.8;margin-left:2px}

.argus-hero-stage .bcap{
  font-size:10.5px;color:var(--sub);
  font-family:'DM Mono',monospace;letter-spacing:.04em;
  display:flex;align-items:center;gap:7px;
  opacity:0;transition:opacity .6s ease;
}
.argus-hero-stage .bcap.v{opacity:1}
.argus-hero-stage .bcap-hi{color:var(--text);font-weight:500}

/* ══════════════════════════════
   SCENE 4 — LAUNCH
══════════════════════════════ */
.argus-hero-stage .launch-wrap{
  position:relative;width:340px;height:220px;
  display:flex;align-items:center;justify-content:center;
}
.argus-hero-stage .rdoc{
  width:76px;height:90px;
  background:var(--card);border:1.5px solid var(--border-hi);
  border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  position:relative;z-index:2;
  transition:box-shadow .5s ease;
}
.argus-hero-stage .rdoc.glow{box-shadow:0 0 0 2px rgba(91,156,246,.4),0 0 60px rgba(91,156,246,.3),0 20px 60px rgba(0,0,0,.5)}
.argus-hero-stage .rd-emoji{font-size:28px}
.argus-hero-stage .rd-lines{width:46px;display:flex;flex-direction:column;gap:4px}
.argus-hero-stage .rdl{height:4px;background:var(--dim);border-radius:2px}
.argus-hero-stage .rdl:nth-child(1){width:100%}.rdl:nth-child(2){width:72%}.rdl:nth-child(3){width:50%}

.argus-hero-stage .fly-item{
  position:absolute;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;transition:all .8s cubic-bezier(.22,1,.36,1);
}
.argus-hero-stage .fly-wa{top:50%;right:50%;transform:translate(10px,-50%)}
.argus-hero-stage .fly-em{top:50%;left:50%;transform:translate(-10px,-50%)}
.argus-hero-stage .fly-wa.go{opacity:1;transform:translate(-140px,-95px)}
.argus-hero-stage .fly-em.go{opacity:1;transform:translate(140px,-95px)}
.argus-hero-stage .fly-icon{
  width:54px;height:54px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;font-size:24px;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
}
.argus-hero-stage .fi-wa{background:linear-gradient(135deg,#25d366,#128c7e);border:1px solid rgba(37,211,102,.3)}
.argus-hero-stage .fi-em{background:linear-gradient(135deg,#5b9cf6,#2563eb);border:1px solid rgba(91,156,246,.3)}
.argus-hero-stage .fly-label{font-size:9.5px;color:var(--sub);font-family:'DM Mono',monospace;letter-spacing:.06em}

/* ══════════════════════════════
   SCENE 5 — MORNING
══════════════════════════════ */
.argus-hero-stage .phone-wrap{
  position:relative;
  filter:drop-shadow(0 24px 70px rgba(0,0,0,.75));
}
.argus-hero-stage .phone-glow{
  position:absolute;width:130px;height:50px;
  background:rgba(37,211,102,.18);border-radius:50%;
  bottom:-24px;left:50%;transform:translateX(-50%);
  filter:blur(22px);
  opacity:0;transition:opacity .7s ease;
}
.argus-hero-stage .phone-glow.v{opacity:1}
.argus-hero-stage .phone{
  width:168px;
  background:linear-gradient(180deg,#1c1c1e 0%,#111 100%);
  border-radius:30px;
  border:2px solid #2a2a2a;
  overflow:hidden;position:relative;
}
.argus-hero-stage .phone::before{
  content:'';position:absolute;inset:0;border-radius:30px;
  background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,transparent 55%);
  pointer-events:none;z-index:10;
}
.argus-hero-stage .phone-notch{
  width:60px;height:10px;background:#000;
  border-radius:0 0 12px 12px;margin:0 auto;
}
.argus-hero-stage .phone-screen{background:#08080f;padding:10px 12px 20px}
.argus-hero-stage .phone-time-row{
  font-size:9px;color:#444;text-align:right;
  margin-bottom:12px;font-family:'DM Mono',monospace;
}

.argus-hero-stage .wa-notif{
  background:linear-gradient(135deg,rgba(18,26,44,.98),rgba(12,18,32,.98));
  border:1px solid rgba(91,156,246,.18);
  border-radius:16px;padding:12px 13px;
  opacity:0;transform:translateY(-18px) scale(.94);
  transition:all .7s cubic-bezier(.22,1,.36,1);
  box-shadow:0 6px 30px rgba(0,0,0,.5);
}
.argus-hero-stage .wa-notif.v{opacity:1;transform:translateY(0) scale(1)}

.argus-hero-stage .wn-header{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.argus-hero-stage .wn-app-icon{
  width:22px;height:22px;border-radius:7px;
  background:linear-gradient(135deg,#25d366,#128c7e);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;flex-shrink:0;
}
.argus-hero-stage .wn-app{font-size:10px;font-weight:700;color:#ccc}
.argus-hero-stage .wn-time{font-size:9px;color:#444;margin-left:auto;font-family:'DM Mono',monospace}
.argus-hero-stage .wn-title{font-size:12px;font-weight:700;color:#eef2ff;margin-bottom:5px;line-height:1.3}
.argus-hero-stage .wn-body{font-size:10px;color:#5a6888;line-height:1.5;margin-bottom:8px}
.argus-hero-stage .wn-alert{
  background:rgba(34,201,138,.09);
  border:1px solid rgba(34,201,138,.28);
  border-radius:8px;padding:7px 10px;
  font-size:10px;color:var(--green);
  font-family:'DM Mono',monospace;font-weight:600;
  display:flex;align-items:center;gap:6px;
}
.argus-hero-stage .wn-dot{width:5px;height:5px;border-radius:50%;background:var(--green);flex-shrink:0;
  animation:live 1.8s infinite}

.argus-hero-stage .tagline{
  font-size:14px;color:var(--sub);
  text-align:center;line-height:1.8;
  opacity:0;transform:translateY(10px);
  transition:all .65s ease;
}
.argus-hero-stage .tagline.v{opacity:1;transform:translateY(0)}
.argus-hero-stage .tagline strong{color:var(--text);font-weight:700;display:block;font-size:17px;margin-top:2px}


/* CloudyBot competitor-monitoring hero embed */
.argus-hero-wrap {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.uc-hero-mock.argus-hero-wrap {
  display: block;
  grid-template-columns: unset;
}
.argus-hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 460;
  max-height: min(460px, 72vh);
  border-radius: 16px;
  overflow: hidden;
  background: #06090f;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(46, 74, 112, 0.2);
}
.argus-hero-stage .argus-stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: 600px;
  height: 460px;
  transform: translateX(-50%);
  transform-origin: top center;
}
@media (max-width: 620px) {
  .argus-hero-stage .argus-stage {
    transform: translateX(-50%) scale(calc((100vw - 48px) / 600));
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Without hero JS: static finale only */
  .argus-hero-stage:not(.argus-reduced-story) .argus-stage .scene:not(#argus-s5) {
    display: none !important;
  }
  .argus-hero-stage:not(.argus-reduced-story) .argus-stage #argus-s5 {
    opacity: 1 !important;
  }
  .argus-hero-stage:not(.argus-reduced-story) .argus-stage * {
    animation: none !important;
    transition: none !important;
  }

  /*
   * With JS (class from argus-hero-animation.js): short multi-beat story.
   * landing.min.css sets transition-duration: 0s on * — restore scoped fades
   * (same idea as .hero-cinematic-stage.hc-reduced-story on the main landing).
   */
  .argus-hero-stage.argus-reduced-story .argus-stage * {
    animation: none !important;
    animation-duration: 0s !important;
  }
  .argus-hero-stage.argus-reduced-story .argus-stage *,
  .argus-hero-stage.argus-reduced-story .argus-stage *::before,
  .argus-hero-stage.argus-reduced-story .argus-stage *::after {
    transition-property: opacity, transform, color, text-shadow, box-shadow, filter !important;
    transition-duration: 0.55s !important;
    transition-timing-function: ease !important;
  }
  .argus-hero-stage.argus-reduced-story .argus-stage .scene {
    display: flex !important;
  }
  .argus-hero-stage.argus-reduced-story .argus-stage .star {
    opacity: var(--op, 0.35) !important;
  }
}