/* =============================================================
   ETAPA 1 VISUAL — Design System Premium v2.0
   AuroraTechno Academy / Dev Invisível™

   Futurista • Cyber Neon • Glassmorphism • HUD Tecnológico
   ============================================================= */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ── CSS Custom Properties ── */
:root {
  /* Backgrounds */
  --bg-main: #02030a; /* preto/azul quase preto */
  --bg-primary: #02030a;
  --bg-secondary: #050816;
  --bg-panel: rgba(8, 15, 35, 0.82); /* glass escuro */

  /* Neon Palette */
  --cyan: #00D9FF;
  --blue: #2F6BFF;
  --purple: #7A5CFF;
  --magenta: #B026FF;

  /* Text */
  --text-main: #E8ECF8; /* branco suave */
  --text-primary: #E8ECF8;
  --text-secondary: #8892B0;
  --text-muted: #4A5568;

  /* Borders */
  --border-glow: rgba(0, 217, 255, 0.15); /* borda neon discreta */

  /* Glows */
  --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.2);
  --shadow-glow-cyan: 0 0 20px rgba(0, 217, 255, 0.3);
  --shadow-glow-purple: 0 0 20px rgba(122, 92, 255, 0.3);

  /* Radius */
  --radius-card: 16px;
  --radius-button: 8px;

  /* Spacing */
  --section-padding: 100px 0;
  --container-max: 1200px;

  /* Transitions */
  --transition-fast: 0.2s ease-in-out;
  --transition-smooth: 0.4s ease-in-out;

  /* Fonts */
  --font-title: 'Space Grotesk', sans-serif; /* títulos grandes e fortes */
  --font-subtitle: 'Inter', sans-serif; /* subtítulos limpos */
  --font-label: 'Inter', sans-serif; /* labels pequenas com letter-spacing */
  --font-text: 'Inter', sans-serif; /* texto normal legível */
  --font-body: 'Inter', sans-serif;
}

/* ── Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  animation: pageFadeIn 0.5s ease-out;
}

@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Background ambient effects */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 15% 5%, rgba(0, 217, 255, 0.07), transparent 45%),
    radial-gradient(ellipse at 85% 90%, rgba(122, 92, 255, 0.06), transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(47, 107, 255, 0.02), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

a {
  color: var(--cyan);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: #fff;
}

img {
  max-width: 100%;
  display: block;
}

/* =============================================================
   NAVBAR
   ============================================================= */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 0 32px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(2, 3, 10, 0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  transition: all var(--transition);
}

.navbar.scrolled {
  background: rgba(2, 3, 10, 0.95);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.navbar-logo img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  background: transparent !important;
  filter: drop-shadow(0 0 8px rgba(0, 217, 255, 0.5)) drop-shadow(0 0 16px rgba(122, 92, 255, 0.3));
}

.navbar-logo-text {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.02em;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar-link {
  padding: 8px 18px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-body);
  text-decoration: none;
  transition: all var(--transition);
  border: 1px solid transparent;
}

.navbar-link:hover {
  color: var(--text-primary);
  background: var(--bg-glass);
}

.navbar-link.active,
.navbar-link-highlight {
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.15), rgba(122, 92, 255, 0.15));
  border-color: rgba(0, 217, 255, 0.3);
  color: var(--cyan);
  font-weight: 600;
}

/* Mobile menu */
.navbar-mobile-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-glass);
  color: var(--text-secondary);
  cursor: pointer;
}

.navbar-mobile-menu {
  display: none;
  position: fixed;
  top: 70px;
  left: 0;
  width: 100%;
  background: rgba(2, 3, 10, 0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  padding: 16px;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
}

.navbar-mobile-menu.open {
  display: flex;
}

/* =============================================================
   HERO SECTION
   ============================================================= */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 32px 60px;
  overflow: hidden;
}

/* Background grid effect */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 217, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 217, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

/* Ambient glow orbs */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.5;
}

.hero-glow-1 {
  width: 500px;
  height: 500px;
  background: rgba(0, 217, 255, 0.12);
  top: -10%;
  right: -5%;
}

.hero-glow-2 {
  width: 400px;
  height: 400px;
  background: rgba(122, 92, 255, 0.10);
  bottom: -5%;
  left: -5%;
}

.hero-glow-3 {
  width: 300px;
  height: 300px;
  background: rgba(47, 107, 255, 0.08);
  top: 40%;
  left: 30%;
}

.hero-container {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 20px;
  background: var(--bg-glass);
  border: 1px solid var(--border-default);
  color: var(--cyan);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  width: fit-content;
}

.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: heroPulse 2s ease-in-out infinite;
}

@keyframes heroPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.hero-title {
  font-family: var(--font-primary);
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 800;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.02em;
}

.hero-title .text-white {
  color: #fff;
  display: block;
}

.hero-title .text-neon {
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  text-shadow: none;
  filter: drop-shadow(0 0 30px rgba(0, 217, 255, 0.3));
}

.hero-title .text-tm {
  font-size: 0.4em;
  vertical-align: super;
  background: linear-gradient(135deg, var(--purple), var(--magenta));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0;
  margin-left: 2px;
}

.hero-description {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 500px;
  margin: 0;
}

.hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* =============================================================
   HOLOGRAM TABLE DISPLAY — CSS Animation
   Reprodução do efeito: logo girando eixo Y, plataforma neon,
   reflexo espelhado, raios de luz, partículas flutuantes
   ============================================================= */

/* Stage container */
.holo-stage {
  width: min(380px, 56vw);
  height: min(420px, 62vw);
  position: relative;
  margin: 0 auto;
  perspective: 900px;
}

/* ── Circular grid background ── */
.holo-grid {
  position: absolute;
  width: 100%;
  height: 75%;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0px, transparent 30px,
      rgba(0, 217, 255, 0.035) 30px, rgba(0, 217, 255, 0.035) 31px
    );
  mask-image: radial-gradient(ellipse at 50% 65%, black 15%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 65%, black 15%, transparent 70%);
  pointer-events: none;
  animation: gridBreath 5s ease-in-out infinite alternate;
}
@keyframes gridBreath { 0%{opacity:.4} 100%{opacity:1} }

/* ── Particles container ── */
.holo-particles {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}
.holo-dot {
  position: absolute;
  border-radius: 50%;
  animation: dotFloat linear infinite;
  will-change: transform, opacity;
}
@keyframes dotFloat {
  0%   { opacity:0; transform:translateY(0) translateX(0) scale(.3); }
  10%  { opacity:1; }
  50%  { transform:translateY(-70px) translateX(12px) scale(1); }
  90%  { opacity:.3; }
  100% { opacity:0; transform:translateY(-120px) translateX(-8px) scale(.5); }
}

/* ── Logo wrapper (centered above platform) ── */
.holo-logo-wrapper {
  position: absolute;
  left: 50%;
  top: 22%;
  width: min(170px, 32vw);
  height: min(170px, 32vw);
  transform: translateX(-50%);
  z-index: 5;
  transform-style: preserve-3d;
}

/* Spinning logo — full 360° Y-axis rotation */
.holo-logo-spin {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
  animation: spinY 8s linear infinite;
  filter:
    drop-shadow(0 0 12px rgba(0, 217, 255, 0.7))
    drop-shadow(0 0 30px rgba(122, 92, 255, 0.4))
    drop-shadow(0 0 50px rgba(176, 38, 255, 0.2));
}
@keyframes spinY {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* Glow orb behind logo */
.holo-logo-glow-orb {
  position: absolute;
  inset: -40%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(0, 217, 255, 0.12) 0%,
    rgba(122, 92, 255, 0.08) 35%,
    transparent 65%
  );
  animation: orbPulse 3s ease-in-out infinite alternate;
}
@keyframes orbPulse {
  0%   { transform:scale(.85); opacity:.6; }
  100% { transform:scale(1.2); opacity:1; }
}

/* Light rays (conic gradient behind logo) */
.holo-light-rays {
  position: absolute;
  inset: -60%;
  z-index: -2;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,   rgba(0,217,255,.07) 8deg,  transparent 16deg,
    transparent 20deg,  rgba(122,92,255,.06) 28deg, transparent 36deg,
    transparent 40deg,  rgba(0,217,255,.05) 48deg,  transparent 56deg,
    transparent 60deg,  rgba(176,38,255,.06) 68deg, transparent 76deg,
    transparent 80deg,  rgba(0,217,255,.07) 88deg,  transparent 96deg,
    transparent 100deg, rgba(122,92,255,.05) 108deg, transparent 116deg,
    transparent 120deg, rgba(0,217,255,.06) 128deg, transparent 136deg,
    transparent 140deg, rgba(176,38,255,.07) 148deg, transparent 156deg,
    transparent 160deg, rgba(0,217,255,.05) 168deg, transparent 176deg,
    transparent 180deg, rgba(122,92,255,.06) 188deg, transparent 196deg,
    transparent 200deg, rgba(0,217,255,.07) 208deg, transparent 216deg,
    transparent 220deg, rgba(176,38,255,.06) 228deg, transparent 236deg,
    transparent 240deg, rgba(0,217,255,.05) 248deg, transparent 256deg,
    transparent 260deg, rgba(122,92,255,.07) 268deg, transparent 276deg,
    transparent 280deg, rgba(0,217,255,.06) 288deg, transparent 296deg,
    transparent 300deg, rgba(176,38,255,.05) 308deg, transparent 316deg,
    transparent 320deg, rgba(0,217,255,.07) 328deg, transparent 336deg,
    transparent 340deg, rgba(122,92,255,.06) 348deg, transparent 360deg
  );
  filter: blur(8px);
  animation: raysRotate 25s linear infinite;
}
@keyframes raysRotate { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* ── Reflection (mirrored logo below) ── */
.holo-reflection-wrap {
  position: absolute;
  left: 50%;
  top: calc(22% + min(170px, 32vw));
  width: min(150px, 28vw);
  height: min(90px, 17vw);
  transform: translateX(-50%);
  overflow: hidden;
  opacity: 0.2;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 90%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 90%);
  filter: blur(2px);
  z-index: 4;
  pointer-events: none;
}
.holo-logo-reflect {
  width: min(150px, 28vw);
  height: min(90px, 17vw);
  object-fit: contain;
  object-position: top center;
  background: transparent !important;
  transform: scaleY(-1);
  filter: blur(1px);
}

/* ── Platform (3 neon rings tilted 72°) ── */
.holo-platform {
  position: absolute;
  width: 90%;
  height: 90%;
  bottom: -5%;
  left: 5%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  transform-style: preserve-3d;
}

.holo-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid transparent;
}
.holo-ring-1 {
  inset: 10%;
  border-color: rgba(0,217,255,.2);
  border-top-color: rgba(0,217,255,.8);
  border-right-color: rgba(0,217,255,.5);
  box-shadow: 0 0 14px rgba(0,217,255,.12), inset 0 0 14px rgba(0,217,255,.05);
  animation: ring1 5s linear infinite;
}
.holo-ring-2 {
  inset: 4%;
  border-color: rgba(122,92,255,.12);
  border-bottom-color: rgba(122,92,255,.65);
  border-left-color: rgba(122,92,255,.4);
  box-shadow: 0 0 14px rgba(122,92,255,.08), inset 0 0 14px rgba(122,92,255,.03);
  animation: ring2 8s linear infinite reverse;
}
.holo-ring-3 {
  inset: 0;
  border-color: rgba(176,38,255,.06);
  border-top-color: rgba(176,38,255,.35);
  border-left-color: rgba(0,217,255,.12);
  box-shadow: 0 0 18px rgba(176,38,255,.04);
  animation: ring3 12s linear infinite;
}
@keyframes ring1 { from{transform:rotateX(72deg) rotateZ(0)} to{transform:rotateX(72deg) rotateZ(360deg)} }
@keyframes ring2 { from{transform:rotateX(72deg) rotateY(18deg) rotateZ(0)} to{transform:rotateX(72deg) rotateY(18deg) rotateZ(360deg)} }
@keyframes ring3 { from{transform:rotateX(72deg) rotateY(-12deg) rotateZ(0)} to{transform:rotateX(72deg) rotateY(-12deg) rotateZ(360deg)} }

/* ── Base glow ellipse ── */
.holo-base-glow {
  position: absolute;
  width: 55%;
  height: 16%;
  bottom: 6%;
  left: 22.5%;
  border-radius: 50%;
  background: radial-gradient(ellipse,
    rgba(0,217,255,.22) 0%,
    rgba(122,92,255,.1) 40%,
    transparent 70%
  );
  filter: blur(18px);
  animation: basePulse 3.5s ease-in-out infinite alternate;
  z-index: 2;
  pointer-events: none;
}
@keyframes basePulse { 0%{opacity:.5;transform:scaleX(.85)} 100%{opacity:1;transform:scaleX(1.18)} }

/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-body);
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: #fff;
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.2);
  border: 1px solid rgba(0, 217, 255, 0.3);
}

.btn-primary:hover {
  box-shadow: 0 0 40px rgba(0, 217, 255, 0.35);
  transform: translateY(-2px);
  color: #fff;
}

.btn-outline {
  background: transparent;
  color: var(--cyan);
  border: 1px solid rgba(0, 217, 255, 0.35);
}

.btn-outline:hover {
  background: rgba(0, 217, 255, 0.08);
  border-color: rgba(0, 217, 255, 0.6);
  color: var(--cyan);
}

.btn-ghost {
  background: var(--bg-glass);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.btn-ghost:hover {
  color: var(--text-primary);
  border-color: var(--border-default);
  background: var(--bg-glass-strong);
}

/* Compatibility with legacy classes */
.primary-btn, .link-btn {
  min-height: 44px;
  border: none;
  border-radius: var(--radius-md);
  padding: 11px 22px;
  color: white;
  font-weight: 700;
  font-family: var(--font-body);
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all var(--transition);
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  box-shadow: 0 0 15px rgba(0, 217, 255, 0.15);
}

.primary-btn:hover, .link-btn:hover {
  box-shadow: 0 0 30px rgba(0, 217, 255, 0.3);
  transform: translateY(-1px);
  color: white;
}

.secondary-btn {
  min-height: 44px;
  border: none;
  border-radius: var(--radius-md);
  padding: 11px 22px;
  color: white;
  font-weight: 700;
  font-family: var(--font-body);
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all var(--transition);
  background: linear-gradient(135deg, var(--blue), var(--purple));
  box-shadow: 0 0 15px rgba(47, 107, 255, 0.15);
}

.ghost-btn {
  min-height: 44px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 11px 22px;
  color: var(--text-secondary);
  font-weight: 600;
  font-family: var(--font-body);
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-glass);
  transition: all var(--transition);
}

.ghost-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-default);
  background: var(--bg-glass-strong);
}

.danger-btn {
  min-height: 44px;
  border: 1px solid rgba(255, 51, 102, 0.25);
  border-radius: var(--radius-md);
  padding: 11px 22px;
  color: var(--red);
  font-weight: 600;
  font-family: var(--font-body);
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 51, 102, 0.08);
  transition: all var(--transition);
}

.danger-btn:hover {
  background: rgba(255, 51, 102, 0.15);
  border-color: rgba(255, 51, 102, 0.4);
}

.small {
  min-height: 36px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* =============================================================
   PAGE LAYOUT (legacy compatibility)
   ============================================================= */
.page {
  width: min(var(--container-max), 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px;
  position: relative;
  z-index: 1;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--glow-cyan);
  padding: 32px;
}

.hero {
  max-width: 100%;
  text-align: center;
  /* Override when .hero is used inside hero-content (JS compat wrapper) */
  width: 100%;
  padding: 0;
  border: none;
  backdrop-filter: none;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}

.form-card {
  max-width: 720px;
}

.compact {
  max-width: 540px;
}

/* =============================================================
   TYPOGRAPHY
   ============================================================= */
.eyebrow {
  color: var(--cyan);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  margin: 0 0 8px;
}

h1 {
  font-family: var(--font-primary);
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.1;
  margin: 0 0 12px;
  color: var(--text-primary);
}

h2 {
  font-family: var(--font-primary);
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
  margin: 12px 0;
  color: var(--text-primary);
}

.muted, .student-card p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* =============================================================
   PANELS, GIFTS, LOCKED
   ============================================================= */
.panel, .gift, .pix-box, .locked {
  margin: 20px auto;
  padding: 20px;
  max-width: 700px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.06), rgba(122, 92, 255, 0.08));
}

/* =============================================================
   GRID
   ============================================================= */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0;
}

.single {
  grid-template-columns: 1fr;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* =============================================================
   COURSE CARDS
   ============================================================= */
.course-card {
  min-height: 160px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 24px;
  background: linear-gradient(145deg, rgba(0, 217, 255, 0.06), rgba(122, 92, 255, 0.08));
  color: white;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.course-card:hover {
  border-color: var(--border-active);
  transform: translateY(-3px);
  box-shadow: var(--glow-intense);
}

.course-card strong {
  display: block;
  font-family: var(--font-primary);
  font-size: 22px;
  margin-bottom: 10px;
}

.course-card span {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.hidden-course { display: none; }

/* =============================================================
   FORMS
   ============================================================= */
.form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.field-label {
  display: grid;
  gap: 8px;
  color: var(--cyan);
  font-weight: 600;
  text-align: left;
  font-size: 14px;
}

.field-label span {
  color: var(--cyan);
  font-weight: 600;
}

input, select, textarea {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  color: var(--text-primary);
  font-size: 15px;
  font-family: var(--font-body);
  outline: none;
  transition: all var(--transition);
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--border-active);
  background: var(--bg-glass-strong);
  box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.08), var(--glow-cyan);
}

select option {
  color: #111;
  background: #0a0e1a;
}

textarea {
  min-height: 92px;
  resize: vertical;
}

.check {
  display: flex;
  gap: 10px;
  color: var(--text-secondary);
  text-align: left;
  font-size: 15px;
  cursor: pointer;
}

.check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--cyan);
  cursor: pointer;
}

/* =============================================================
   STATUS & BADGES
   ============================================================= */
.status {
  color: var(--green);
  font-weight: 700;
  min-height: 24px;
  font-size: 14px;
}

.status-error {
  color: var(--red) !important;
}

.back-link, .admin-link {
  color: var(--cyan);
  text-decoration: none;
  font-weight: 500;
}

.notif-badge { position: relative; }
.notif-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--red);
  color: white;
  font-size: 11px;
  font-weight: 900;
  display: grid;
  place-items: center;
  padding: 0 4px;
}

/* =============================================================
   TOPBAR (admin / dashboard)
   ============================================================= */
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.top-actions, .filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filters { margin: 18px 0; }

/* =============================================================
   MINI CARDS / STUDENT CARDS
   ============================================================= */
.mini-card, .student-card, .warning {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px;
  background: var(--bg-glass);
}

.mini-card strong {
  display: block;
  color: var(--cyan);
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mini-card span {
  font-size: 15px;
  color: var(--text-primary);
  font-weight: 600;
}

.student-card {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  transition: all var(--transition);
}

.student-card:hover {
  border-color: var(--border-default);
  background: var(--bg-glass-hover);
}

.student-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 170px;
}

.warning {
  color: var(--yellow);
  border-color: rgba(255, 214, 0, 0.2);
  background: rgba(255, 214, 0, 0.04);
}

.hidden { display: none; }

/* =============================================================
   PIX / QR CODE
   ============================================================= */
.pix-qrcode {
  width: 204px;
  min-height: 204px;
  margin: 12px auto 18px;
  padding: 12px;
  background: white;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
}

/* =============================================================
   ADMIN TABS
   ============================================================= */
.admin-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0;
}

.voucher-topbar { margin: 18px 0; }

/* =============================================================
   MODAL
   ============================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 3, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: modalFadeIn 0.25s ease;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal.hidden { display: none; }

.modal-box {
  width: min(760px, 100%);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(5, 12, 32, 0.98), rgba(10, 18, 45, 0.96));
  box-shadow: var(--glow-intense);
  padding: 28px;
  position: relative;
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
}

.modal-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 18px 0;
}

.modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.validation-box {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 20px;
  background: var(--bg-glass);
}

/* =============================================================
   CONFIGURAÇÕES
   ============================================================= */
.config-form { margin-top: 18px; }
.config-block {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-glass);
  margin-bottom: 14px;
}

.config-block h3 {
  margin: 0 0 4px;
  color: var(--cyan);
  font-size: 16px;
}

.config-form textarea { min-height: 88px; resize: vertical; }

/* =============================================================
   LOGO
   ============================================================= */
.logo-oficial,
.main-logo,
.mini-logo,
.ats-logo-animated,
img[src*="logo"] {
  background: transparent !important;
  object-fit: contain;
}

.logo-oficial {
  display: block;
  margin: 0 auto 18px auto;
  filter:
    drop-shadow(0 0 10px rgba(0, 217, 255, 0.42))
    drop-shadow(0 0 18px rgba(122, 92, 255, 0.28));
}

.logo-wrap,
.mini-logo-wrap,
.ats-logo-stage {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.logo-wrap {
  width: min(280px, 80vw);
  min-height: 150px;
  margin: 0 auto 18px auto;
  display: grid;
  place-items: center;
}

.mini-logo-wrap {
  width: min(150px, 54vw);
  min-height: 110px;
  margin: 0 auto 16px auto;
  display: grid;
  place-items: center;
}

.main-logo {
  width: min(240px, 72vw);
  max-height: 190px;
}

.mini-logo {
  width: min(120px, 48vw);
  max-height: 120px;
}

/* =============================================================
   TERMO / LEGAL
   ============================================================= */
.termo-box {
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  background: var(--bg-glass);
}

.termo-texto {
  max-height: 200px;
  overflow-y: auto;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--bg-glass-strong);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

/* =============================================================
   PROGRESS BAR
   ============================================================= */
.progresso-bar-wrap {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 6px;
}

.progresso-bar-fill {
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  transition: width 0.4s ease;
}

/* =============================================================
   PERFIL
   ============================================================= */
.perfil-campo-editavel { position: relative; }
.perfil-salvar-inline { margin-top: 4px; }

/* =============================================================
   AULA CARDS
   ============================================================= */
.aula-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-glass);
  flex-wrap: wrap;
  transition: all var(--transition);
}

.aula-card:hover {
  border-color: var(--border-default);
  background: var(--bg-glass-hover);
}

.aula-card-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  min-width: 140px;
}

.modulo-header {
  margin: 18px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
}

.modulo-header:first-child {
  margin-top: 8px;
}

/* =============================================================
   RESPONSIVENESS
   ============================================================= */
@media (max-width: 1024px) {
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }

  .hero-content {
    align-items: center;
  }

  .hero-description {
    max-width: 600px;
  }

  .hero-buttons {
    justify-content: center;
  }

  .holo-stage {
    width: 300px;
    height: 340px;
  }
  .holo-logo-wrapper {
    width: 140px;
    height: 140px;
  }
  .holo-reflection-wrap {
    top: calc(22% + 140px);
    width: 125px;
    height: 75px;
  }
  .holo-logo-reflect {
    width: 125px;
    height: 75px;
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 0 16px;
  }

  .navbar-links {
    display: none;
  }

  .navbar-mobile-toggle {
    display: flex;
  }

  .hero-section {
    padding: 90px 16px 40px;
  }

  .hero-title {
    font-size: clamp(32px, 8vw, 52px);
  }

  .hero-description {
    font-size: 15px;
  }

  .page { padding: 14px; }
  .card { padding: 20px; border-radius: var(--radius-lg); }
  .grid { grid-template-columns: 1fr; }
  .student-card, .topbar { flex-direction: column; }
  .student-actions { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .student-actions > * { flex: 1; }

  .holo-stage {
    width: 240px;
    height: 280px;
  }
  .holo-logo-wrapper {
    width: 110px;
    height: 110px;
  }
  .holo-reflection-wrap {
    top: calc(22% + 110px);
    width: 95px;
    height: 58px;
  }
  .holo-logo-reflect {
    width: 95px;
    height: 58px;
  }
  .holo-ring-1, .holo-ring-2, .holo-ring-3 {
    border-width: 1px;
  }

  .modal-summary { grid-template-columns: 1fr; }
  .modal-close { position: static; margin-bottom: 12px; }

  .aula-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .aula-card-status {
    align-items: flex-start;
    min-width: 100%;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 80px 14px 32px;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }

  .hero-buttons .btn,
  .hero-buttons a {
    width: 100%;
    text-align: center;
  }

  .btn {
    padding: 12px 20px;
    font-size: 14px;
  }

  .holo-stage {
    width: 190px;
    height: 230px;
  }
  .holo-logo-wrapper {
    width: 90px;
    height: 90px;
  }
  .holo-reflection-wrap {
    top: calc(22% + 90px);
    width: 78px;
    height: 48px;
  }
  .holo-logo-reflect {
    width: 78px;
    height: 48px;
  }
  .holo-grid {
    background: repeating-radial-gradient(circle at 50% 50%,
      transparent 0px, transparent 20px,
      rgba(0, 217, 255, 0.025) 20px, rgba(0, 217, 255, 0.025) 21px
    );
  }
}

/* =============================================================
   REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .holo-logo-spin { animation: none; transform: rotateY(-18deg); }
  .holo-light-rays { animation: none; }
  .holo-logo-glow-orb { animation: none; opacity: .8; }
  .holo-ring-1, .holo-ring-2, .holo-ring-3 { animation: none; }
  .holo-base-glow { animation: none; opacity: .7; }
  .holo-grid { animation: none; opacity: .6; }
  .holo-dot { animation: none; opacity: 0; }
  .hero-badge-dot { animation: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* =============================================================
   ATS HERO VIDEO HOLOGRAM — ajuste profissional
   Usa o vídeo oficial como fonte da animação para manter a logo,
   movimento, base holográfica, luzes e composição idênticos.
   ============================================================= */
.ats-video-stage {
  position: relative;
  width: min(430px, 58vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 34px;
  overflow: visible;
  isolation: isolate;
  filter: drop-shadow(0 0 22px rgba(0, 217, 255, .24)) drop-shadow(0 0 44px rgba(176, 38, 255, .16));
}

.ats-hologram-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 28px;
  mix-blend-mode: screen;
  opacity: .96;
  transform: translateZ(0) scale(1.03);
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
  animation: atsVideoFloat 5.8s ease-in-out infinite, atsVideoPulse 2.2s ease-in-out infinite;
}

.ats-video-aura {
  position: absolute;
  inset: 8%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 52%, rgba(0,217,255,.28) 0%, rgba(122,92,255,.16) 35%, transparent 70%),
    conic-gradient(from 120deg, transparent, rgba(0,217,255,.12), transparent, rgba(176,38,255,.10), transparent);
  filter: blur(22px);
  opacity: .75;
  animation: atsAuraRotate 14s linear infinite, atsAuraBreath 3.2s ease-in-out infinite alternate;
  pointer-events: none;
}

.ats-video-scanline {
  position: absolute;
  inset: 3%;
  border-radius: 28px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,217,255,.08) 47%,
    rgba(255,255,255,.18) 50%,
    rgba(0,217,255,.08) 53%,
    transparent 100%);
  mix-blend-mode: screen;
  opacity: .33;
  animation: atsScan 4.6s ease-in-out infinite;
}

@keyframes atsVideoFloat {
  0%,100% { transform: translateY(0) scale(1.03); }
  50% { transform: translateY(-8px) scale(1.055); }
}

@keyframes atsVideoPulse {
  0%,100% { filter: saturate(1.08) contrast(1.06) brightness(1.02); }
  45% { filter: saturate(1.28) contrast(1.14) brightness(1.12); }
  52% { filter: saturate(1.55) contrast(1.2) brightness(1.22); }
  58% { filter: saturate(1.18) contrast(1.09) brightness(1.06); }
}

@keyframes atsAuraRotate { to { transform: rotate(360deg); } }
@keyframes atsAuraBreath { from { opacity: .45; transform: scale(.92); } to { opacity: .9; transform: scale(1.08); } }
@keyframes atsScan { 0%,100% { transform: translateY(-38%); opacity: 0; } 18%,72% { opacity: .34; } 50% { transform: translateY(38%); } }

@media (max-width: 980px) {
  .ats-video-stage { width: min(380px, 78vw); }
}

@media (max-width: 520px) {
  .ats-video-stage { width: min(330px, 86vw); }
  .ats-hologram-video { transform: scale(1.01); }
}

@media (prefers-reduced-motion: reduce) {
  .ats-hologram-video, .ats-video-aura, .ats-video-scanline { animation: none !important; }
}

/* =============================================================
   ATS HOLOGRAM PRO — HTML/CSS premium, maior e proporcional
   ============================================================= */
.hero-visual-premium {
  min-height: 620px;
  overflow: visible;
  transform: translateX(18px);
}

.ats-holo-stage-pro {
  width: clamp(430px, 42vw, 640px);
  height: clamp(520px, 52vw, 720px);
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  perspective: 1200px;
  transform-style: preserve-3d;
  animation: atsStageBreath 7s ease-in-out infinite;
}

.ats-back-aura {
  position: absolute;
  inset: 2% 0 8%;
  border-radius: 48%;
  background:
    radial-gradient(circle at 48% 44%, rgba(0, 217, 255, .20), transparent 25%),
    radial-gradient(circle at 58% 50%, rgba(177, 44, 255, .16), transparent 34%),
    radial-gradient(circle at 50% 62%, rgba(29, 97, 255, .13), transparent 42%);
  filter: blur(24px);
  opacity: .92;
  z-index: 0;
  animation: atsAuraPulse 4.5s ease-in-out infinite alternate;
}

.ats-light-cone {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 64%;
  height: 70%;
  transform: translateX(-50%);
  clip-path: polygon(47% 100%, 53% 100%, 86% 0, 14% 0);
  background: linear-gradient(to top, rgba(0, 217, 255, .24), rgba(74, 91, 255, .10) 42%, transparent 78%);
  filter: blur(14px);
  opacity: .65;
  z-index: 1;
  animation: atsCone 3.2s ease-in-out infinite alternate;
}

.ats-energy-field {
  position: absolute;
  width: 82%;
  height: 72%;
  top: 7%;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(0, 217, 255, .18) 49% 50%, transparent 51% 100%),
    linear-gradient(0deg, transparent 0 48%, rgba(177, 44, 255, .10) 49% 50%, transparent 51% 100%),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(0,217,255,.035) 19px 20px);
  mask-image: radial-gradient(ellipse at center, black 0 58%, transparent 73%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0 58%, transparent 73%);
  opacity: .65;
  z-index: 2;
  animation: atsFieldScan 5.5s linear infinite;
}

.ats-logo-rig {
  position: absolute;
  width: clamp(330px, 32vw, 500px);
  height: clamp(330px, 32vw, 500px);
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  z-index: 7;
  animation: atsLogoFloat 6.4s ease-in-out infinite;
}

.ats-logo-core-glow {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 247, 255, .16), rgba(98, 70, 255, .10) 35%, transparent 68%);
  filter: blur(22px);
  animation: atsCoreBeat 2.2s cubic-bezier(.4, 0, .2, 1) infinite;
}

.ats-logo-holo-main {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
  transform-origin: 50% 58%;
  filter:
    drop-shadow(0 0 10px rgba(0, 247, 255, .95))
    drop-shadow(0 0 24px rgba(67, 91, 255, .55))
    drop-shadow(0 0 38px rgba(194, 46, 255, .38));
  animation: atsLogoHolo 5.8s ease-in-out infinite;
  will-change: transform, filter, opacity;
}

.ats-logo-scan {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 16%;
  top: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(0, 247, 255, .30), rgba(255,255,255,.18), transparent);
  mix-blend-mode: screen;
  filter: blur(7px);
  opacity: .70;
  animation: atsScan 3.6s linear infinite;
  pointer-events: none;
}

.ats-logo-noise {
  position: absolute;
  inset: 6%;
  opacity: .22;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.09) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  mask-image: radial-gradient(circle, black 0 52%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle, black 0 52%, transparent 75%);
  animation: atsNoise 1.4s steps(4) infinite;
  pointer-events: none;
}

.ats-orbit {
  position: absolute;
  left: 50%;
  top: 56%;
  border-radius: 50%;
  border: 1px solid rgba(0,217,255,.24);
  transform-style: preserve-3d;
  z-index: 5;
  box-shadow: 0 0 18px rgba(0,217,255,.16), inset 0 0 14px rgba(144,58,255,.08);
}
.ats-orbit-one { width: 63%; height: 16%; transform: translate(-50%,-50%) rotateX(68deg) rotateZ(0); animation: atsOrbitOne 6s linear infinite; }
.ats-orbit-two { width: 54%; height: 13%; border-color: rgba(177,44,255,.22); transform: translate(-50%,-50%) rotateX(69deg) rotateY(18deg) rotateZ(0); animation: atsOrbitTwo 8s linear infinite reverse; }
.ats-orbit-three { width: 74%; height: 19%; border-color: rgba(0,247,255,.14); transform: translate(-50%,-50%) rotateX(70deg) rotateY(-15deg) rotateZ(0); animation: atsOrbitThree 11s linear infinite; }

.ats-platform-pro {
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: 82%;
  height: 34%;
  transform: translateX(-50%);
  z-index: 4;
  transform-style: preserve-3d;
}
.ats-floor-grid {
  position: absolute;
  inset: -42% -22% -18%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(ellipse at center, transparent 0 24px, rgba(0,217,255,.075) 25px 26px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(0,217,255,.04) 32px 33px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(122,92,255,.035) 32px 33px);
  transform: rotateX(72deg);
  opacity: .72;
  filter: blur(.2px);
  mask-image: radial-gradient(ellipse at center, black 0 45%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0 45%, transparent 72%);
  animation: atsFloor 12s linear infinite;
}
.ats-ring-pro {
  position: absolute;
  border-radius: 50%;
  transform: rotateX(72deg);
}
.ats-ring-a { inset: 18% 2%; border: 2px solid rgba(0,247,255,.78); box-shadow: 0 0 18px rgba(0,247,255,.62), inset 0 0 20px rgba(0,247,255,.20); animation: atsRingA 5s linear infinite; }
.ats-ring-b { inset: 26% 10%; border: 2px solid rgba(190,44,255,.55); box-shadow: 0 0 22px rgba(190,44,255,.38), inset 0 0 16px rgba(190,44,255,.16); animation: atsRingB 7.5s linear infinite reverse; }
.ats-ring-c { inset: 35% 19%; border: 1px solid rgba(255,255,255,.26); box-shadow: 0 0 14px rgba(255,255,255,.18); animation: atsRingC 9s linear infinite; }
.ats-base-disc {
  position: absolute;
  inset: 31% 8% 15%;
  border-radius: 50%;
  transform: rotateX(72deg);
  background: radial-gradient(ellipse, rgba(0,247,255,.18), rgba(30,46,88,.20) 45%, rgba(0,0,0,.12) 70%, transparent 72%);
  filter: blur(2px);
}
.ats-center-beam {
  position: absolute;
  left: 50%;
  bottom: 44%;
  width: 8px;
  height: 62%;
  transform: translateX(-50%);
  background: linear-gradient(to top, rgba(0,247,255,.96), rgba(0,217,255,.20) 48%, transparent);
  filter: blur(6px);
  opacity: .86;
  animation: atsBeam 2s ease-in-out infinite alternate;
}

.ats-reflection {
  position: absolute;
  width: clamp(230px, 24vw, 380px);
  height: clamp(95px, 10vw, 150px);
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%) rotateX(63deg) scaleY(-.45);
  overflow: hidden;
  opacity: .20;
  filter: blur(2.2px);
  z-index: 3;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 86%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 86%);
  pointer-events: none;
}
.ats-reflection img { width: 100%; height: auto; object-fit: contain; }

.ats-particles { inset: 3% 0 10%; z-index: 9; }

@keyframes atsStageBreath { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes atsAuraPulse { from{opacity:.58; transform:scale(.94)} to{opacity:.95; transform:scale(1.04)} }
@keyframes atsCone { from{opacity:.42; filter:blur(18px)} to{opacity:.82; filter:blur(11px)} }
@keyframes atsFieldScan { from{background-position:0 0,0 0,0 0} to{background-position:0 0,0 0,0 120px} }
@keyframes atsLogoFloat { 0%,100%{transform:translateX(-50%) translateY(0) rotateY(-8deg)} 50%{transform:translateX(-50%) translateY(-18px) rotateY(8deg)} }
@keyframes atsLogoHolo { 0%,100%{opacity:.95; transform:scale(1) rotateZ(-.6deg); filter:drop-shadow(0 0 10px rgba(0,247,255,.9)) drop-shadow(0 0 25px rgba(67,91,255,.52)) drop-shadow(0 0 38px rgba(194,46,255,.34))} 45%{opacity:1; transform:scale(1.025) rotateZ(.6deg); filter:drop-shadow(0 0 14px rgba(0,247,255,1)) drop-shadow(0 0 34px rgba(67,91,255,.75)) drop-shadow(0 0 52px rgba(194,46,255,.50))} 48%{transform:scale(1.02) translateX(2px)} 50%{transform:scale(1.02) translateX(-2px)} }
@keyframes atsCoreBeat { 0%,100%{transform:scale(.88); opacity:.48} 18%{transform:scale(1.08); opacity:.94} 28%{transform:scale(.96); opacity:.64} 42%{transform:scale(1.14); opacity:.88} }
@keyframes atsScan { 0%{top:4%; opacity:0} 10%{opacity:.72} 72%{opacity:.48} 100%{top:80%; opacity:0} }
@keyframes atsNoise { 0%{transform:translateY(0); opacity:.13} 50%{transform:translateY(3px); opacity:.30} 100%{transform:translateY(-2px); opacity:.18} }
@keyframes atsOrbitOne { from{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(0)} to{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(360deg)} }
@keyframes atsOrbitTwo { from{transform:translate(-50%,-50%) rotateX(69deg) rotateY(18deg) rotateZ(0)} to{transform:translate(-50%,-50%) rotateX(69deg) rotateY(18deg) rotateZ(360deg)} }
@keyframes atsOrbitThree { from{transform:translate(-50%,-50%) rotateX(70deg) rotateY(-15deg) rotateZ(0)} to{transform:translate(-50%,-50%) rotateX(70deg) rotateY(-15deg) rotateZ(360deg)} }
@keyframes atsFloor { from{background-position:0 0,0 0,0 0} to{background-position:80px 0,64px 0,0 64px} }
@keyframes atsRingA { from{transform:rotateX(72deg) rotateZ(0)} to{transform:rotateX(72deg) rotateZ(360deg)} }
@keyframes atsRingB { from{transform:rotateX(72deg) rotateY(10deg) rotateZ(0)} to{transform:rotateX(72deg) rotateY(10deg) rotateZ(360deg)} }
@keyframes atsRingC { from{transform:rotateX(72deg) rotateY(-8deg) rotateZ(0)} to{transform:rotateX(72deg) rotateY(-8deg) rotateZ(360deg)} }
@keyframes atsBeam { from{opacity:.48; height:52%; filter:blur(8px)} to{opacity:1; height:68%; filter:blur(4px)} }

@media (max-width: 1024px) {
  .hero-visual-premium { min-height: 500px; transform: none; }
  .ats-holo-stage-pro { width: min(560px, 88vw); height: min(630px, 96vw); }
  .ats-logo-rig { width: min(430px, 72vw); height: min(430px, 72vw); }
}

@media (max-width: 640px) {
  .hero-visual-premium { min-height: 390px; }
  .ats-holo-stage-pro { width: min(390px, 94vw); height: min(460px, 110vw); }
  .ats-logo-rig { width: min(300px, 78vw); height: min(300px, 78vw); top: 10%; }
  .ats-platform-pro { width: 92%; bottom: 5%; }
}