/* Custom styles for AtlasAI */

/* Horizontal scrolling rows */
@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes scrollRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
.scroll-row-track {
  width: max-content;
}
.scroll-row.scroll-left .scroll-row-track {
  animation: scrollLeft 30s linear infinite;
}
.scroll-row.scroll-right .scroll-row-track {
  animation: scrollRight 30s linear infinite;
}
.scroll-row:hover .scroll-row-track {
  animation-play-state: paused;
}

/* Marquee auto-rotate animations for Why / Testimonials */
@keyframes marqueeLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@keyframes marqueeRight {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}
.animate-marquee-left {
  animation: marqueeLeft var(--marquee-speed, 35s) linear infinite;
}
.animate-marquee-right {
  animation: marqueeRight var(--marquee-speed, 30s) linear infinite;
}
.marquee-why:hover .animate-marquee-left,
.marquee-test:hover .animate-marquee-right {
  animation-play-state: paused;
}

/* Global vertical grid lines — DISABLED (removed globally) */
/* Accent lines scanning vertically on grid sections */
@keyframes accentDown {
  0%, 100% { transform: translateY(-100%); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(calc(100vh + 100%)); }
}
@keyframes accentUp {
  0%, 100% { transform: translateY(100vh); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(calc(-100% - 100vh)); }
}
main > section:not(.hero-grid):not(.stats-ticker):not(.no-grid) .grid-accent {
  position: absolute;
  width: 1px;
  pointer-events: none;
  z-index: 0;
}
.grid-accent--d1 { height: 120px; left: 10%; background: linear-gradient(180deg, transparent, rgba(6,182,212,0.15), transparent); animation: accentDown 8s ease-in-out infinite; }
.grid-accent--d2 { height: 80px; left: 30%; background: linear-gradient(180deg, transparent, rgba(6,182,212,0.12), transparent); animation: accentDown 12s ease-in-out infinite 3s; }
.grid-accent--d3 { height: 100px; left: 70%; background: linear-gradient(180deg, transparent, rgba(6,182,212,0.1), transparent); animation: accentDown 10s ease-in-out infinite 5s; }
.grid-accent--u1 { height: 90px; left: 50%; background: linear-gradient(180deg, transparent, rgba(6,182,212,0.13), transparent); animation: accentUp 9s ease-in-out infinite 2s; }
.grid-accent--u2 { height: 110px; left: 90%; background: linear-gradient(180deg, transparent, rgba(6,182,212,0.11), transparent); animation: accentUp 11s ease-in-out infinite 4s; }

/* White sections: darker accent lines */
main > section.bg-white .grid-accent--d1,
main > section.bg-white .grid-accent--d2,
main > section.bg-white .grid-accent--d3 { background: linear-gradient(180deg, transparent, rgba(6,182,212,0.18), transparent); }
main > section.bg-white .grid-accent--u1,
main > section.bg-white .grid-accent--u2 { background: linear-gradient(180deg, transparent, rgba(6,182,212,0.18), transparent); }

@media (prefers-reduced-motion: reduce) {
  .grid-accent--d1, .grid-accent--d2, .grid-accent--d3,
  .grid-accent--u1, .grid-accent--u2 { animation: none; }
}

/* Make sure content sits above the grid — but skip already-absolute children */
main > section:not(.hero-grid):not(.stats-ticker):not(.no-grid) > *:not([class*="absolute"]) {
  position: relative;
  z-index: 1;
}

/* ====== Hero Slide Visuals — Rich Glassy Designs ====== */

/* Hide visuals on mobile */
@media (max-width: 767px) {
  .hero-visual { display: none !important; }
}

/* Shared glass panel */
.hero-glass-panel {
  background: linear-gradient(135deg, rgba(15,23,42,.8), rgba(15,23,42,.55));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Flow line dash animation (reused in slide 1) */
.hero-flow-line {
  stroke-dashoffset: 0;
  animation: flowDash 2s linear infinite;
}
@keyframes flowDash {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -16; }
}

/* ===== SLIDE 1 — Agent Orchestration Panel ===== */

.hero-agent-panel {
  background: linear-gradient(135deg, rgba(15,23,42,.85), rgba(15,23,42,.55));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}

/* Header */
.hero-agent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.hero-agent-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(6,182,212,.15), rgba(6,182,212,.05));
  border: 1px solid rgba(6,182,212,.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-agent-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #06b6d4;
  box-shadow: 0 0 8px rgba(6,182,212,.5);
  animation: agentStatusPulse 2s ease-in-out infinite;
}
@keyframes agentStatusPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(6,182,212,.5); }
  50%      { opacity: .5; box-shadow: 0 0 4px rgba(6,182,212,.2); }
}

/* Pipeline area */
.hero-agent-pipeline {
  padding: 14px 16px;
}

/* Step row */
.hero-agent-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
}
.hero-agent-step--active {
  background: rgba(6,182,212,.06);
  border-color: rgba(6,182,212,.15);
  box-shadow: 0 0 20px rgba(6,182,212,.06);
}
.hero-agent-step--pending {
  opacity: .5;
}

/* Step icons */
.hero-agent-step-icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-agent-step-icon--done {
  background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.25);
  color: #34d399;
}
.hero-agent-step-icon--active {
  background: rgba(6,182,212,.12);
  border: 1px solid rgba(6,182,212,.25);
}
.hero-agent-step-icon--pending {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.3);
}

/* Spinner for active step */
.hero-agent-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(6,182,212,.2);
  border-top-color: #06b6d4;
  border-radius: 50%;
  animation: agentSpin .8s linear infinite;
}
@keyframes agentSpin {
  to { transform: rotate(360deg); }
}

/* Live tag */
.hero-agent-live-tag {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #06b6d4;
  background: rgba(6,182,212,.1);
  border: 1px solid rgba(6,182,212,.2);
  border-radius: 4px;
  padding: 2px 6px;
  animation: agentLiveBlink 2s ease-in-out infinite;
}
@keyframes agentLiveBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}

/* Connector line between steps */
.hero-agent-connector {
  width: 2px;
  height: 14px;
  margin: 0 auto;
  border-radius: 1px;
  background: linear-gradient(to bottom, rgba(52,211,153,.3), rgba(6,182,212,.3));
}
.hero-agent-connector--pending {
  background: linear-gradient(to bottom, rgba(6,182,212,.2), rgba(255,255,255,.06));
}

/* Step entrance animation */
.hero-agent-step-anim {
  opacity: 0;
  transform: translateY(8px);
  animation: agentStepIn .4s ease-out forwards;
  animation-delay: var(--step-delay, 0s);
}
.hero-agent-connector-anim {
  opacity: 0;
  animation: agentConnIn .3s ease-out forwards;
  animation-delay: var(--step-delay, 0s);
}
@keyframes agentStepIn {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.hero-agent-step--pending.hero-agent-step-anim {
  animation-name: agentStepInPending;
}
@keyframes agentStepInPending {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: .5; transform: translateY(0); }
}
@keyframes agentConnIn {
  0%   { opacity: 0; transform: scaleY(0); }
  100% { opacity: 1; transform: scaleY(1); }
}

/* Footer stats bar */
.hero-agent-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 10px 16px 12px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.hero-agent-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.hero-agent-stat-sep {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,.08);
}

/* ===== CREATIVE V2 — Shared hero card styles ===== */

/* Drop-in animation for cards */
@keyframes heroCardDrop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(18px) scale(.95); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
/* Override for cards without translateX */
.hero-v2-branch { animation-name: heroCardDropSimple !important; }
.hero-v2-branch:nth-child(5) { animation-name: heroCardDrop !important; } /* center card keeps translateX */
@keyframes heroCardDropSimple {
  0%   { opacity: 0; transform: translateY(18px) scale(.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* V2 Top/Bottom endpoint cards */
.hero-v2-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 22px;
  background: linear-gradient(135deg, rgba(15,23,42,.85), rgba(15,23,42,.6));
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  box-shadow: 0 6px 28px rgba(0,0,0,.3);
  z-index: 10;
  position: relative;
  overflow: hidden;
}
.hero-v2-card-glow {
  position: absolute;
  inset: -20px;
  pointer-events: none;
  z-index: 0;
}
.hero-v2-card > *:not(.hero-v2-card-glow) { position: relative; z-index: 1; }

.hero-v2-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid;
  backdrop-filter: blur(8px);
}

/* V2 Hub (central glowing brain) */
.hero-v2-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}
.hero-v2-hub-core {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(6,182,212,.12), rgba(15,23,42,.9));
  border: 1.5px solid rgba(6,182,212,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(6,182,212,.15), 0 0 60px rgba(6,182,212,.05);
  animation: hubCoreGlow 3s ease-in-out infinite;
}
@keyframes hubCoreGlow {
  0%, 100% { box-shadow: 0 0 30px rgba(6,182,212,.15), 0 0 60px rgba(6,182,212,.05); }
  50%      { box-shadow: 0 0 40px rgba(6,182,212,.25), 0 0 80px rgba(6,182,212,.1); }
}
.hero-v2-hub-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(6,182,212,.1);
  pointer-events: none;
  animation: hubPulse 3s ease-out infinite;
}
.hero-v2-hub-ring--1 { inset: -14px; }
.hero-v2-hub-ring--2 { inset: -30px; animation-delay: 1s; border-color: rgba(6,182,212,.06); }

/* V2 Merge node */
.hero-v2-merge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  z-index: 10;
}
.hero-v2-merge-core {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(52,211,153,.08);
  border: 1px solid rgba(52,211,153,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(52,211,153,.1);
}

/* V2 Branch cards (3 across) */
.hero-v2-branch {
  min-width: 130px;
  z-index: 10;
}

/* ===== SLIDE 3 V2 — Module cards ===== */
.hero-v2-module {
  width: 180px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(15,23,42,.82), rgba(15,23,42,.55));
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,.25);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-v2-module-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid;
}
.hero-v2-module-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero-v2-module-bar {
  height: 3px;
  width: 100%;
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  overflow: hidden;
}
.hero-v2-module-bar-fill {
  height: 100%;
  width: var(--fill-w, 50%);
  background: var(--fill-color, #06b6d4);
  border-radius: 3px;
  animation: moduleBarGrow 1.8s ease-out .5s both;
}
@keyframes moduleBarGrow {
  0% { width: 0; }
}
/* Module card: staggered on Slide 3 without translateX */
.hero-v2-module {
  animation-name: heroCardDropSimple !important;
}


/* ===== SLIDE 2 — Voice Agent Panel ===== */

.hero-voice-panel {
  background: linear-gradient(135deg, rgba(15,23,42,.85), rgba(15,23,42,.55));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}

/* Header */
.hero-voice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.hero-voice-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(6,182,212,.15), rgba(6,182,212,.05));
  border: 1px solid rgba(6,182,212,.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-voice-timer {
  font-variant-numeric: tabular-nums;
}

.hero-voice-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px rgba(52,211,153,.5);
  animation: voiceLivePulse 2s ease-in-out infinite;
}
@keyframes voiceLivePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(52,211,153,.5); }
  50%      { opacity: .5; box-shadow: 0 0 4px rgba(52,211,153,.2); }
}

/* Waveform visualizer */
.hero-voice-wave-wrap {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.hero-voice-waves {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 28px;
}

.hero-voice-bar {
  display: inline-block;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(to top, rgba(6,182,212,.35), rgba(6,182,212,.8));
  animation: voiceBarAnim 1.4s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * 0.07s);
}
@keyframes voiceBarAnim {
  0%   { height: 4px; opacity: .35; }
  50%  { height: calc(8px + var(--i, 5) * 0.6px); opacity: .7; }
  100% { height: calc(4px + var(--i, 5) * 1.1px); opacity: 1; }
}

/* Transcript area */
.hero-voice-transcript {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

/* Message row */
.hero-voice-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.hero-voice-msg--ai {
  flex-direction: row;
}
.hero-voice-msg--user {
  flex-direction: row;
}

/* Avatars */
.hero-voice-msg-avatar {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
}
.hero-voice-msg-avatar--user {
  background: rgba(99,102,241,.2);
  border: 1px solid rgba(99,102,241,.3);
  color: rgba(165,180,252,.9);
}
.hero-voice-msg-avatar--ai {
  background: linear-gradient(135deg, rgba(6,182,212,.2), rgba(6,182,212,.08));
  border: 1px solid rgba(6,182,212,.25);
  color: rgba(6,182,212,.9);
}

/* Message content */
.hero-voice-msg-content {
  flex: 1;
  min-width: 0;
}

/* Action badge */
.hero-voice-action-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 600;
  color: #34d399;
  background: rgba(52,211,153,.1);
  border: 1px solid rgba(52,211,153,.2);
  border-radius: 6px;
}

/* Footer call controls */
.hero-voice-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(255,255,255,.05);
}

.hero-voice-ctrl {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
  transition: transform .2s ease;
}
.hero-voice-ctrl:hover { transform: scale(1.1); }

.hero-voice-ctrl--end {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border: 1px solid rgba(239,68,68,.4);
  color: white;
  box-shadow: 0 0 16px rgba(239,68,68,.3);
  animation: voiceEndGlow 2s ease-in-out infinite;
}
@keyframes voiceEndGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(239,68,68,.2); }
  50%      { box-shadow: 0 0 24px rgba(239,68,68,.45); }
}

/* Message entrance animation */
.hero-voice-msg-anim {
  opacity: 0;
  transform: translateY(8px);
  animation: voiceMsgIn .45s ease-out forwards;
  animation-delay: var(--msg-delay, 0s);
}
@keyframes voiceMsgIn {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Floating badges (shared) */
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Floating mini badges (used across all slides) */
.hero-float-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: linear-gradient(135deg, rgba(15,23,42,.82), rgba(15,23,42,.55));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0,0,0,.25);
  white-space: nowrap;
}

/* ===== SLIDE 3 — Learning Dashboard Panel ===== */

.hero-learn-panel {
  background: linear-gradient(135deg, rgba(15,23,42,.85), rgba(15,23,42,.55));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}
.hero-learn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hero-learn-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-learn-ring-fill {
  transition: stroke-dashoffset 1.5s ease-out;
}
.hero-learn-ring-text {
  position: absolute;
  font-size: 9px;
  font-weight: 800;
  color: #06b6d4;
}
.hero-learn-body {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-learn-module {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: all .3s ease;
}
.hero-learn-module--active {
  background: rgba(6,182,212,.06);
  border: 1px solid rgba(6,182,212,.12);
}
.hero-learn-module--locked {
  opacity: .5;
}
.hero-learn-mod-status {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hero-learn-mod-status--done {
  background: rgba(52,211,153,.15);
  color: #34d399;
}
.hero-learn-mod-status--active {
  background: rgba(6,182,212,.15);
  border: 2px solid rgba(6,182,212,.4);
}
.hero-learn-mod-status--locked {
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.2);
}
.hero-learn-mod-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #06b6d4;
  animation: learnPulse 2s ease-in-out infinite;
}
@keyframes learnPulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 rgba(6,182,212,0); }
  50%      { opacity: .7; transform: scale(1.3); box-shadow: 0 0 12px rgba(6,182,212,.4); }
}

/* Module entrance — staggered slide-in from right */
.hero-learn-mod-anim {
  opacity: 0;
  transform: translateX(20px);
  animation: learnModIn .5s ease-out var(--mod-delay, 0s) forwards;
}
@keyframes learnModIn {
  to { opacity: 1; transform: translateX(0); }
}

/* Progress ring animation — fills to 52% (matches 3/5 modules scenario) */
.hero-learn-ring-fill {
  animation: learnRingFill 3s ease-out .4s forwards;
}
@keyframes learnRingFill {
  to { stroke-dashoffset: 48.2; }
}
/* Counter text animates with ring */
.hero-learn-ring-text {
  animation: learnRingCount 3s ease-out .4s forwards;
}
@keyframes learnRingCount {
  0%   { content: "0%"; }
  100% { content: "52%"; }
}

.hero-learn-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.15);
}

/* ===== SLIDE 3 OLD — Dashboard / Cards Grid (legacy) ===== */

.hero-dash-panel {
  background: linear-gradient(135deg, rgba(15,23,42,.82), rgba(15,23,42,.55));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}

/* Bigger variant for slide 3 */
.hero-dash-panel--lg {
  animation: dashPanelEntrance .6s ease-out both;
}
@keyframes dashPanelEntrance {
  0%   { opacity: 0; transform: translateY(20px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Animated window dots */
@keyframes dashDotPulse {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.2); }
}

/* Navigation tabs */
.hero-dash-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.hero-dash-tab {
  flex: 1;
  text-align: center;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.35);
  cursor: default;
  transition: color .2s ease;
  position: relative;
}
.hero-dash-tab--active {
  color: #06b6d4;
}
.hero-dash-tab--active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 20%;
  right: 20%;
  height: 2px;
  border-radius: 1px;
  background: #06b6d4;
  animation: tabSlideIn .4s ease-out both;
}
@keyframes tabSlideIn {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

.hero-dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 16px;
}

.hero-dash-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  background: rgba(15,23,42,.5);
  border: 1px solid rgba(255,255,255,.06);
  border-top: 2px solid var(--stat-accent, rgba(6,182,212,.4));
  border-radius: 12px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.hero-dash-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

/* Staggered entrance for stat cards */
.hero-dash-stat-anim {
  animation: dashStatIn .5s ease-out both;
  animation-delay: var(--anim-delay, 0s);
}
@keyframes dashStatIn {
  0%   { opacity: 0; transform: translateY(12px) scale(.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-dash-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.hero-dash-stat-value {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.hero-dash-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Mini chart row */
.hero-dash-chart-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 12px;
}
.hero-dash-minichart {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-dash-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 28px;
}
.hero-dash-bar {
  flex: 1;
  border-radius: 2px;
  background: linear-gradient(to top, rgba(6,182,212,.3), rgba(6,182,212,.7));
  height: 0;
  animation: dashBarGrow 1s ease-out forwards;
  animation-delay: var(--anim-delay, 0s);
}
@keyframes dashBarGrow {
  0%   { height: 0; }
  100% { height: var(--bar-final, 50%); }
}

/* Score ring */
.hero-dash-score-ring {
  position: relative;
  flex-shrink: 0;
}
.hero-dash-score-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #06b6d4;
}
@keyframes ringFill {
  0%   { stroke-dashoffset: 100.5; }
  100% { stroke-dashoffset: 25; }
}

/* Progress bar */
.hero-dash-progress {
  padding: 0 16px 14px;
}
.hero-dash-progress-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.hero-dash-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #34d399, #06b6d4);
  animation: progressGrow 2s ease-out .5s forwards;
}
@keyframes progressGrow {
  0%   { width: 0; }
  100% { width: 75%; }
}

/* Floating badge */
.hero-dash-badge {
  position: absolute;
  top: -8px; right: -10px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(15,23,42,.88), rgba(15,23,42,.65));
  backdrop-filter: blur(12px);
  border: 1px solid rgba(251,191,36,.2);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  animation: badgeFloat 4.2s ease-in-out infinite;
}

/* ===== SLIDE 3 — Learning Path ===== */
.hero-path-step {
  width: 100%;
  max-width: 340px;
  z-index: 10;
}
.hero-path-step-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-path-dot {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}
.hero-path-card {
  flex: 1;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(15,23,42,.75), rgba(15,23,42,.55));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.06);
  border-left: 2px solid var(--step-accent, #06b6d4);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.hero-path-progress-mini {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-path-progress-track {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  overflow: hidden;
}
.hero-path-progress-bar {
  height: 100%;
  border-radius: 3px;
  animation: pathBarGrow 1.5s ease-out .8s both;
}
@keyframes pathBarGrow {
  0%   { width: 0 !important; }
}
.hero-path-cert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(15,23,42,.8), rgba(15,23,42,.6));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(251,191,36,.2);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(251,191,36,.08);
  animation: certGlow 3s ease-in-out infinite;
}
@keyframes certGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(251,191,36,.08); }
  50%      { box-shadow: 0 4px 28px rgba(251,191,36,.18); }
}

/* Stats ticker marquee */
@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-track {
  display: flex;
  animation: tickerScroll 20s linear infinite;
  width: max-content;
}
.ticker-track:hover {
  animation-play-state: paused;
}

/* Local font faces — Atlas font (6 weights) */
@font-face {
  font-family: 'Atlas';
  src: url('fonts/vQyevYAyHtARFwPqUzQGpnDs.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atlas';
  src: url('fonts/8yoV9pUxquX7VD7ZXlNYKQmkmk.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atlas';
  src: url('fonts/n9CXKI3tsmCPeC6MCT9NziShSuQ.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atlas';
  src: url('fonts/1ZFS7N918ojhhd0nQWdj3jz4w.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atlas';
  src: url('fonts/DXD0Q7LSl7HEvDzucnyLnGBHM.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atlas';
  src: url('fonts/d3tHnaQIAeqiE5hGcRw4mmgWYU.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* All headings use bold/extrabold font weight */
h1 {
  font-weight: 800;
}
h2 {
  font-weight: 700;
}
h3, h4, h5, h6 {
  font-weight: 700;
}



/* Keep the action button pinned to the bottom of each service card */
.service-card {
  height: 100%;
}

.service-card .card-footer {
  margin-top: auto;
}

/* Optional: improve list bullet alignment on small screens */
.service-card ul li span.text-brand {
  line-height: 1;
}

.hero-slide > .grid {
  padding-bottom: 0px !important;
}

/* Hero animations */
.hero-slide .hero-pill,
.hero-slide .hero-title,
.hero-slide .hero-desc,
.hero-slide .hero-cta {
  will-change: transform, opacity;
  opacity: 0;
  transform: translateY(14px);
}

/* In-view state toggled from JS */
.hero-animate .hero-pill { transition: opacity .35s ease-out .05s, transform .35s ease-out .05s; opacity: 1; transform: none; }
.hero-animate .hero-title { transition: opacity .45s ease-out .12s, transform .45s ease-out .12s; opacity: 1; transform: none; }
.hero-animate .hero-desc { transition: opacity .45s ease-out .18s, transform .45s ease-out .18s; opacity: 1; transform: none; }
.hero-animate .hero-cta { transition: opacity .45s ease-out .26s, transform .45s ease-out .26s; opacity: 1; transform: none; }


/* Grid hero background (from background-animation.html, adapted) */
.hero-grid {
  position: relative;
  overflow: hidden;
}

/* Apply subtle translucent background to hero sections on non-home pages */
.hero-grid {
  background: #ffffff0a;
  margin-bottom: 3rem;
}

/* Keep the home page hero unchanged */
#hero.hero-grid {
  background: transparent;
  margin-bottom: 0;
}

.hero-grid .grid-container {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-grid .grid-lines {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(400px) rotateX(60deg);
  animation: gridFlow 30s linear infinite;
}

@keyframes gridFlow {
  0% { transform: perspective(400px) rotateX(60deg) translateY(0); }
  100% { transform: perspective(400px) rotateX(60deg) translateY(60px); }
}

.hero-grid .accent-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: scan 8s ease-in-out infinite;
  pointer-events: none;
}

.hero-grid .accent-line.a1 { width: 300px; top: 20%; left: -300px; animation-delay: 0s; }
.hero-grid .accent-line.a2 { width: 400px; top: 50%; right: -400px; animation: scan-reverse 10s ease-in-out infinite; animation-delay: 2s; }
.hero-grid .accent-line.a3 { width: 250px; top: 80%; left: -250px; animation-delay: 4s; }

@keyframes scan {
  0%, 100% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(calc(100vw + 100%)); }
}

@keyframes scan-reverse {
  0%, 100% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(calc(-100vw - 100%)); }
}

/* Flipped grid: perspective from top, grid flows downward */
.hero-grid--flipped .grid-lines {
  top: -10%;
  transform: perspective(400px) rotateX(-60deg);
  transform-origin: top center;
  animation: gridFlowDown 30s linear infinite;
}

@keyframes gridFlowDown {
  0% { transform: perspective(400px) rotateX(-60deg) translateY(0); }
  100% { transform: perspective(400px) rotateX(-60deg) translateY(60px); }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-grid .grid-lines { animation: none; }
  .hero-grid .accent-line { animation: none; }
}

/* Contact wizard tweaks */
.peer:checked + span { color: #fff; }

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  #stepProgressFill { transition: none; }
}

/* Highlight selected option cards in the contact wizard */
#contactWizardForm label:has(> input[type="radio"]:checked),
#contactWizardForm label:has(> input[type="checkbox"]:checked) {
  border-color: #06b6d4;
  background-color: rgba(6, 182, 212, 0.08);
}

/* Keyboard focus outline for accessibility */
#contactWizardForm label:has(> input[type="radio"]:focus-visible),
#contactWizardForm label:has(> input[type="checkbox"]:focus-visible) {
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.25);
  outline: none;
}

/* Color icons when option is selected */
#contactWizardForm input[type="radio"]:checked + div > i,
#contactWizardForm input[type="radio"]:checked + div > svg,
#contactWizardForm input[type="checkbox"]:checked + div > i,
#contactWizardForm input[type="checkbox"]:checked + div > svg {
  color: #06b6d4;
  stroke: #06b6d4;
}

/* Optional: thin separator under the callout header */
.contact-callout-sep { height: 6px; border-radius: 999px; background: #0f172a; opacity: .9; }

/* Service card digital cubes animation */
@keyframes cubeFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: var(--cube-o, 0.5); }
  50% { transform: translateY(-6px) scale(1.1); opacity: calc(var(--cube-o, 0.5) + 0.25); }
}
@keyframes cubePulse {
  0%, 100% { transform: scale(1); opacity: var(--cube-o, 0.5); }
  50% { transform: scale(1.25); opacity: calc(var(--cube-o, 0.5) + 0.3); }
}
.service-cube { animation-timing-function: ease-in-out; animation-iteration-count: infinite; }

/* Service card hover swap */
.service-card-default {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .3s ease, transform .3s ease;
}
.service-card-hover {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s ease .05s, transform .3s ease .05s;
}
.group\/card:hover .service-card-default {
  opacity: 0;
  transform: translateY(-10px);
}
.group\/card:hover .service-card-hover {
  opacity: 1;
  transform: translateY(0);
}

/* Use Plus Jakarta Sans for all headings and titles */
h1, h2, h3, h4, h5, h6,
.hero-title {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ══ CHATBOT WIDGET ══ */
.atlas-bot-tab {
  color: #94a3b8;
  background: transparent;
}
.atlas-bot-tab:hover {
  color: #e2e8f0;
  background: rgba(51,65,85,.5);
}
.atlas-bot-tab.active {
  color: #06b6d4;
  background: rgba(6,182,212,.1);
}

.atlas-bot-msg-enter {
  animation: atlasBotMsgIn .35s ease-out both;
}
@keyframes atlasBotMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.atlas-bot-typing span {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #06b6d4;
  animation: atlasBotBounce .6s infinite alternate;
}
.atlas-bot-typing span:nth-child(2) { animation-delay: .15s; }
.atlas-bot-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes atlasBotBounce {
  to { transform: translateY(-4px); opacity: .4; }
}

.atlas-bot-voice-pulse {
  animation: atlasBotVPulse 2s ease-out infinite;
}
@keyframes atlasBotVPulse {
  0%   { box-shadow: 0 0 0 0 rgba(6,182,212,.35); }
  70%  { box-shadow: 0 0 0 20px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

#atlasBotPanel .scrollbar-hide::-webkit-scrollbar { display: none; }
#atlasBotPanel .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Mobile: near-fullscreen panel */
@media (max-width: 640px) {
  #atlasBotPanel {
    left: 8px !important;
    right: 8px !important;
    bottom: 80px !important;
    width: auto !important;
    height: calc(100vh - 100px) !important;
    max-height: calc(100vh - 100px) !important;
    max-width: none !important;
  }
}

/* ══ VOICE DEMO ANIMATIONS ══ */
.atlas-voice-pulse {
  animation: atlasVoicePulse 2s ease-out infinite;
}
@keyframes atlasVoicePulse {
  0%   { box-shadow: 0 0 0 0 rgba(244,63,94,.3); }
  70%  { box-shadow: 0 0 0 24px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.atlas-voice-bar {
  height: 8px;
  animation: atlasVoiceBar .6s ease-in-out infinite alternate;
}
.atlas-voice-bar:nth-child(1) { animation-delay: 0s; }
.atlas-voice-bar:nth-child(2) { animation-delay: .1s; }
.atlas-voice-bar:nth-child(3) { animation-delay: .2s; }
.atlas-voice-bar:nth-child(4) { animation-delay: .3s; }
.atlas-voice-bar:nth-child(5) { animation-delay: .4s; }
.atlas-voice-bar:nth-child(6) { animation-delay: .15s; }
.atlas-voice-bar:nth-child(7) { animation-delay: .35s; }
@keyframes atlasVoiceBar {
  from { height: 4px; opacity: .4; }
  to   { height: 20px; opacity: 1; }
}

/* Homepage demo card active state */
.demo-scenario-card {
  transition: all .2s ease;
}
.demo-scenario-card.active {
  border-color: #06b6d4 !important;
  background: rgba(6,182,212,.05) !important;
}
.demo-scenario-card.active .demo-scenario-icon {
  background: rgba(6,182,212,.2);
  color: #06b6d4;
}
/* ====== Custom Scrollbar Design — Global ====== */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #164e63, #06b6d4);
  border-radius: 9999px;
  border: 2px solid #0f172a;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #06b6d4, #22d3ee);
}
::-webkit-scrollbar-corner {
  background: #0f172a;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #155e75 #0f172a;
}

/* White / light sections scrollable areas */
.bg-white ::-webkit-scrollbar-track,
section.bg-white ::-webkit-scrollbar-track {
  background: #f1f5f9;
}
.bg-white ::-webkit-scrollbar-thumb,
section.bg-white ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a5f3fc, #06b6d4);
  border: 2px solid #f1f5f9;
}
.bg-white ::-webkit-scrollbar-thumb:hover,
section.bg-white ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #06b6d4, #0891b2);
}

/* Chatbot & overlay scrollbars — thinner */
#atlasBotMessages::-webkit-scrollbar,
#atlasBotVoiceMessages::-webkit-scrollbar,
.vision-result::-webkit-scrollbar {
  width: 5px;
}
#atlasBotMessages::-webkit-scrollbar-track,
#atlasBotVoiceMessages::-webkit-scrollbar-track,
.vision-result::-webkit-scrollbar-track {
  background: transparent;
}
#atlasBotMessages::-webkit-scrollbar-thumb,
#atlasBotVoiceMessages::-webkit-scrollbar-thumb,
.vision-result::-webkit-scrollbar-thumb {
  background: rgba(6,182,212,.3);
  border-radius: 9999px;
}
#atlasBotMessages::-webkit-scrollbar-thumb:hover,
#atlasBotVoiceMessages::-webkit-scrollbar-thumb:hover,
.vision-result::-webkit-scrollbar-thumb:hover {
  background: rgba(6,182,212,.5);
}

/* Selection color */
::selection {
  background: rgba(6,182,212,.3);
  color: #fff;
}

/* ====== Unified CTA Button Styles — Used Across All Pages ====== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background-color: #06b6d4;
  padding: 0.75rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: #0f172a;
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-primary:hover {
  background-color: #22d3ee;
  box-shadow: 0 10px 25px -5px rgba(6,182,212,.25);
  transform: translateY(-1px);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  border: 1px solid rgba(51,65,85,.8);
  padding: 0.75rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: #f1f5f9;
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-secondary:hover {
  border-color: rgba(6,182,212,.5);
  background-color: rgba(6,182,212,.05);
}

/* White background variant for sections with bg-white */
.bg-white .btn-primary,
section.bg-white .btn-primary {
  color: #0f172a;
}
.bg-white .btn-secondary,
section.bg-white .btn-secondary {
  border-color: rgba(6,182,212,.4);
  color: #0f172a;
}
.bg-white .btn-secondary:hover,
section.bg-white .btn-secondary:hover {
  border-color: #06b6d4;
  background-color: rgba(6,182,212,.08);
}