.cyberai-live-hero-container{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(28px,4vw,56px)}
.cyberai-live-hero-container .cyberai-live-hero{width:100%}
.cyberai-live-hero{
  --bg:#ffffff;
  --ink:#152033;
  --muted:#667085;
  --line:rgba(203,213,225,.72);
  --panel:rgba(255,255,255,.88);
  --panel-2:rgba(248,250,252,.92);
  --purple:#7c3aed;
  --purple-2:#a78bfa;
  --blue:#2563eb;
  --cyan:#06b6d4;
  --green:#10b981;
  --red:#ef476f;
  position:relative;
  display:grid;
  grid-template-columns:minmax(300px,.78fr) minmax(560px,1.32fr);
  align-items:center;
  gap:clamp(36px,4vw,72px);
  padding:clamp(36px,5vw,72px);
  overflow:hidden;
  border:1px solid rgba(226,232,240,.92);
  border-radius:30px;
  background:
    radial-gradient(circle at 78% 30%, rgba(124,58,237,.12), transparent 26%),
    radial-gradient(circle at 15% 78%, rgba(6,182,212,.10), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 48%, #f6f8fc 100%);
  box-shadow:0 20px 55px rgba(31,41,55,.08),0 3px 12px rgba(31,41,55,.05);
  isolation:isolate;
}
.cyberai-live-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.95), transparent 95%);
  pointer-events:none;
  z-index:-2;
}
.cyberai-live-hero::after{
  content:"";
  position:absolute;
  inset:-25% -10%;
  background:
    radial-gradient(circle at 72% 28%, rgba(124,58,237,.18), transparent 18%),
    radial-gradient(circle at 16% 76%, rgba(59,130,246,.12), transparent 18%);
  filter:blur(40px);
  animation:cyberaiAmbientFloat 14s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:-1;
}
@keyframes cyberaiAmbientFloat{0%{transform:translate3d(-2%, -1%,0) scale(1)}100%{transform:translate3d(2%,2%,0) scale(1.06)}}
.cyberai-live-hero__copy{max-width:640px;position:relative;z-index:2}
.cyberai-live-hero__eyebrow{
  display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid rgba(124,58,237,.18);border-radius:999px;background:rgba(124,58,237,.06);color:#7c3aed;font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;
}
.cyberai-live-hero__status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 6px rgba(16,185,129,.08),0 0 18px rgba(16,185,129,.35);animation:cyberaiPulseDot 1.55s ease-out infinite}
@keyframes cyberaiPulseDot{0%,100%{transform:scale(.95);opacity:.65}50%{transform:scale(1.35);opacity:1}}
.cyberai-live-hero h1{margin:20px 0 16px;font-size:clamp(38px,5vw,72px);line-height:.98;letter-spacing:-.055em;color:var(--ink)}
.cyberai-live-hero h1 span{display:block;background:linear-gradient(90deg,#7c3aed 0%, #2563eb 55%, #06b6d4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cyberai-live-hero p{margin:0;max-width:590px;color:var(--muted);font-size:clamp(16px,1.2vw,19px);line-height:1.72}
.cyberai-live-hero__actions{display:flex;gap:13px;margin-top:28px;flex-wrap:wrap}
.cyberai-live-hero__primary,.cyberai-live-hero__secondary{min-height:50px;padding:0 18px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;font:600 15px/1 Inter,system-ui,sans-serif}
.cyberai-live-hero__primary:hover,.cyberai-live-hero__secondary:hover{transform:translateY(-2px)}
.cyberai-live-hero__primary{border:1px solid rgba(124,58,237,.15);background:linear-gradient(135deg,#8b5cf6,#3b82f6);color:#fff;box-shadow:0 15px 40px rgba(59,130,246,.18)}
.cyberai-live-hero__secondary{color:#344054;border:1px solid rgba(203,213,225,.85);background:rgba(255,255,255,.76)}

.cyberai-live-hero__stage{position:relative;min-height:620px;perspective:1500px;transform-style:preserve-3d}
.cyberai-terminal-card,.cyberai-dashboard-card,.cyberai-metric-card{border:1px solid var(--line);box-shadow:0 24px 60px rgba(31,41,55,.11), inset 0 1px 0 rgba(255,255,255,.65);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.cyberai-terminal-card{
  position:absolute;z-index:4;left:0;top:12px;width:min(560px,72%);min-height:340px;border-radius:18px;background:linear-gradient(180deg,rgba(18,24,38,.96),rgba(13,18,30,.92));overflow:hidden;opacity:0;transform:translate3d(-28px,28px,-30px) rotateY(4deg) rotateX(2deg)
}
.cyberai-terminal-card.is-visible{opacity:1;transform:translate3d(0,0,0) rotateY(0) rotateX(0);animation:cyberaiRevealTerminal .9s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes cyberaiRevealTerminal{from{opacity:0;transform:translate3d(-28px,28px,-30px) rotateY(4deg) rotateX(2deg)}to{opacity:1;transform:translate3d(0,0,0) rotateY(0) rotateX(0)}}
.cyberai-terminal-card__bar{height:48px;padding:0 15px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;border-bottom:1px solid rgba(255,255,255,.08);color:#9ba7be;background:rgba(255,255,255,.03);font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.cyberai-window-dots{display:flex;gap:6px}.cyberai-window-dots i{width:8px;height:8px;border-radius:50%;background:#59657a}.cyberai-window-dots i:nth-child(1){background:#fb7185}.cyberai-window-dots i:nth-child(2){background:#fbbf24}.cyberai-window-dots i:nth-child(3){background:#34d399}
.cyberai-live-pill{display:flex;align-items:center;gap:7px;color:#74efbe}.cyberai-live-pill b{width:6px;height:6px;background:#74efbe;border-radius:50%;box-shadow:0 0 10px #74efbe}
.cyberai-terminal-card__body{height:248px;padding:18px 20px 14px;overflow:hidden;color:#d9e3f2;font:500 12px/1.68 ui-monospace,SFMono-Regular,Menlo,monospace;background:linear-gradient(rgba(255,255,255,.015) 50%, transparent 50%) 0 0/100% 4px, radial-gradient(circle at 50% 8%, rgba(124,58,237,.10), transparent 38%)}
.cyberai-terminal-line{min-height:20px;white-space:pre-wrap;word-break:break-word}.cyberai-terminal-line .prompt{color:#9d7cff}.cyberai-terminal-line .command{color:#f5f7ff}.cyberai-terminal-line .ok{color:#74efbe}.cyberai-terminal-line .warn{color:#ffd166}.cyberai-terminal-line .danger{color:#ff7f9f}.cyberai-terminal-line .muted{color:#8796ae}
.cyberai-cursor{display:inline-block;width:7px;height:14px;margin-left:2px;vertical-align:-2px;background:#c4b5fd;animation:cyberaiBlink .7s steps(1,end) infinite}@keyframes cyberaiBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.cyberai-terminal-card__footer{min-height:44px;padding:0 19px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.07);color:#8796ae;font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace}

.cyberai-dashboard-card{position:absolute;z-index:2;right:0;bottom:14px;width:min(700px,88%);border-radius:22px;overflow:hidden;background:rgba(255,255,255,.76);opacity:0;transform:translate3d(55px,50px,-75px) rotateY(-7deg) rotateX(3deg)}
.cyberai-dashboard-card.is-visible{opacity:1;transform:translate3d(0,0,0) rotateY(0) rotateX(0);animation:cyberaiRevealDashboard 1s .22s cubic-bezier(.2,.9,.2,1) forwards, cyberaiDashboardFloat 6s 1.3s ease-in-out infinite}
@keyframes cyberaiRevealDashboard{from{opacity:0;transform:translate3d(55px,50px,-75px) rotateY(-7deg) rotateX(3deg)}to{opacity:1;transform:translate3d(0,0,0) rotateY(0) rotateX(0)}}
@keyframes cyberaiDashboardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.cyberai-dashboard-card__topline{height:48px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;color:#667085;font-size:12px;border-bottom:1px solid rgba(226,232,240,.92);background:rgba(255,255,255,.72)}
.cyberai-sync{display:flex;gap:7px;align-items:center;color:#2563eb;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.cyberai-sync i{width:7px;height:7px;border-radius:50%;background:#06b6d4;box-shadow:0 0 12px #67e8f9;animation:cyberaiPulseDot 1.4s ease-out infinite}
.cyberai-dashboard-card__frame{position:relative;padding:18px;background:linear-gradient(180deg,#f8fbff,#f3f7fd)}
.cyberai-dashboard-card__panel-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.cyberai-dashboard-card__panel-row:last-child{margin-bottom:0}
.cyberai-dashboard-card__panel{padding:16px;border-radius:16px;background:rgba(255,255,255,.88);border:1px solid rgba(226,232,240,.95);box-shadow:0 10px 24px rgba(31,41,55,.05)}
.cyberai-dashboard-card__panel strong{display:block;color:#111827;font-size:14px;margin-bottom:4px}.cyberai-dashboard-card__panel small{display:block;color:#667085;font-size:12px;margin-bottom:10px}
.cyberai-progress{height:8px;border-radius:999px;background:#e8edf6;overflow:hidden}.cyberai-progress span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#7c3aed,#3b82f6,#06b6d4);animation:cyberaiProgressGlow 4.5s ease-in-out infinite}@keyframes cyberaiProgressGlow{0%,100%{filter:saturate(1)}50%{filter:saturate(1.3) brightness(1.05)}}
.cyberai-dashboard-card__panel--wide{grid-column:1/-1}.cyberai-tag-row{display:flex;gap:8px;flex-wrap:wrap}.cyberai-tag-row span{padding:6px 10px;border-radius:999px;background:#eef4ff;border:1px solid #d9e8ff;color:#3b82f6;font-size:11px;font-weight:700}
.cyberai-dashboard-card__mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%}.cyberai-dashboard-card__mini-grid div{padding:14px;border-radius:14px;border:1px solid rgba(226,232,240,.92);background:#fff;text-align:center}.cyberai-dashboard-card__mini-grid b{display:block;font-size:20px;color:#111827;margin-bottom:3px}.cyberai-dashboard-card__mini-grid span{font-size:11px;color:#667085;text-transform:uppercase;letter-spacing:.08em}
.cyberai-dashboard-card__scan{position:absolute;z-index:3;left:0;right:0;top:-12%;height:13%;background:linear-gradient(to bottom, transparent, rgba(124,58,237,.10), rgba(6,182,212,.16), transparent);filter:blur(1px);animation:cyberaiScan 4.8s 1.3s ease-in-out infinite}
@keyframes cyberaiScan{0%{transform:translateY(0)}50%{transform:translateY(260px)}100%{transform:translateY(0)}}

.cyberai-metric-card{position:absolute;z-index:6;width:192px;padding:15px 16px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,250,252,.92));opacity:0}
.cyberai-metric-card.is-visible{opacity:1;transform:translateY(0);animation:cyberaiMetricPop .7s .55s cubic-bezier(.17,.89,.32,1.35) forwards}@keyframes cyberaiMetricPop{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.cyberai-metric-card small{display:block;color:#6b7280;font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.cyberai-metric-card strong{display:block;margin:9px 0 7px;font-size:28px;letter-spacing:-.04em;color:#111827}.cyberai-metric-card span{display:flex;align-items:center;gap:7px;color:#10b981;font-size:11px}.cyberai-metric-card span i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}.cyberai-metric-card .danger{color:#ef476f}.cyberai-metric-card--one{left:2%;bottom:70px}.cyberai-metric-card--two{right:-2%;top:150px}

@media (max-width: 1180px){
  .cyberai-live-hero{grid-template-columns:1fr;padding:28px}
  .cyberai-live-hero__stage{min-height:700px}
}
@media (max-width: 760px){
  .cyberai-live-hero{padding:22px;border-radius:24px}
  .cyberai-live-hero__stage{min-height:760px}
  .cyberai-terminal-card,.cyberai-dashboard-card{position:relative;width:100%;left:auto;right:auto;top:auto;bottom:auto;transform:none !important}
  .cyberai-terminal-card{min-height:320px}
  .cyberai-dashboard-card{margin-top:18px}
  .cyberai-metric-card{position:relative;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;width:100%;margin-top:14px}
  .cyberai-dashboard-card__panel-row,.cyberai-dashboard-card__mini-grid{grid-template-columns:1fr}
}

/* The site-wide reduced-motion rule disables CSS animations. Keep the live hero visible and preserve the requested terminal experience. */
@media (prefers-reduced-motion: reduce){
  .cyberai-live-hero .cyberai-live-hero__status-dot,
  .cyberai-live-hero .cyberai-sync i,
  .cyberai-live-hero .cyberai-cursor{animation:cyberaiPulseDot 1.55s ease-out infinite!important}
  .cyberai-live-hero .cyberai-cursor{animation:cyberaiBlink .7s steps(1,end) infinite!important}
  .cyberai-live-hero .cyberai-dashboard-card__scan{animation:cyberaiScan 4.8s 1.3s ease-in-out infinite!important}
  .cyberai-terminal-card.is-visible,.cyberai-dashboard-card.is-visible,.cyberai-metric-card.is-visible{opacity:1!important;transform:none!important}
}