/* =========================================================
   AME GLOBAL DESIGN SYSTEM
   ========================================================= */

:root {
  --bg: #03050b;
  --panel: rgba(9, 16, 28, 0.62);
  --text: #f5fbff;
  --muted: #a9b8c9;
  --primary: #00f0ff;
  --primary-2: #3a8dff;
  --active: #31ff8a;
  --line: rgba(255,255,255,0.08);
  --soft-line: rgba(255,255,255,0.05);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  --header-h: 72px;
  --radius: 24px;
  --max: 1880px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  margin: 0;
  scroll-behavior: smooth;
  overflow-x: hidden;
  background: #02040a;
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  font-family: 'Poppins', sans-serif;
  color: var(--text);
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  font: inherit;
}

.container {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
}

.grid-bg, .aurora, #stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.grid-bg {
  background-image: linear-gradient(rgba(0,240,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,240,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.52;
}

.aurora {
  overflow: hidden;
}

.aurora::before, .aurora::after {
  content: "";
  position: absolute;
  width: 42vw;
  height: 42vw;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.15;
  animation: drift 16s ease-in-out infinite alternate;
}

#stars {
  width: 100%;
  height: 100%;
}

@keyframes drift {
  from {
    transform: translate3d(0,0,0) scale(1);
  }
  to {
    transform: translate3d(36px,-18px,0) scale(1.08);
  }
}

@keyframes rotateRight {
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateLeft {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes pulse {
  0%,100% {
    opacity: .72;
    transform: scale(.99);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

@keyframes riseUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main {
  position: relative;
  padding-top: var(--header-h);
  overflow-x: hidden;
  z-index: 1;
}

main::-webkit-scrollbar {
  width: 8px;
}

main::-webkit-scrollbar-track {
  background: transparent;
}

main::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0,240,255,.8), rgba(58,141,255,.8));
  border-radius: 999px;
}

section, footer {
  position: relative;
  z-index: 1;
  background: transparent;
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid rgba(0,240,255,.18);
  background:rgba(255,255,255,.03);
  border-radius:999px;
  color:#c8f9ff;
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:18px;
  backdrop-filter:blur(12px);
}

.eyebrow::before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 14px rgba(0,240,255,.8);
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:0 22px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;
  transition:.25s ease;
  font-weight:600;
  text-transform:uppercase;
  background:rgba(255,255,255,.03);
  color:white;
}

.btn:hover {
  border-color:rgba(0,240,255,.26);
  background:rgba(255,255,255,.05);
  transform:translateY(-2px);
}

.btn-primary {
  border-color: rgba(0,240,255,.22);
  background: linear-gradient(135deg, rgba(0,240,255,.13), rgba(58,141,255,.13));
}

.section { padding:92px 0; }

.section-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:30px; }

.section-head h2 { margin:0; font-size:clamp(2rem,3vw,3.25rem); line-height:1.04; letter-spacing:-.04em; text-transform:uppercase; }

.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }

.reveal.visible { opacity:1; transform:translateY(0); }

@media (max-width: 1180px) { .brand-text strong{font-size:.78rem;} .brand-text span{font-size:.54rem; letter-spacing:.11em;} .nav-links a{padding:0 10px; font-size:.73rem;} .nav-login,.nav-signup{min-height:38px; padding:0 14px; font-size:.75rem;} .hero-shell,.footer-shell,.section-head,.cta-inner{grid-template-columns:1fr;} .pillars-grid,.overview-grid{grid-template-columns:repeat(2,1fr);} .footer-links{grid-template-columns:1fr 1fr;} .lesson-window{grid-template-columns:320px minmax(0,1fr);} }

@media (max-width: 860px) { .hero{min-height:auto; padding:28px 0 16px;} .hero h1{font-size:clamp(2.8rem,12vw,4.8rem);} .hero-shell{grid-template-columns:1fr;} .hero-visual{min-height:720px;} .valerian-engine{padding:18px;} .valerian-shell{min-height:650px;} .valerian-layout{gap:24px; min-height:auto; padding:36px 18px 34px;} .valerian-center{gap:26px;} .valerian-modules{grid-template-columns:repeat(4, 68px); gap:12px;} .valerian-feature{width:68px; height:68px; justify-self:center;} .valerian-feature svg{width:32px; height:32px;} .valerian-popup-grid{grid-template-columns:1fr;} .pillars-grid,.lesson-window,.mini-metrics,.overview-grid,.footer-shell,.footer-links,.topic-grid{grid-template-columns:1fr;} .lesson-sidebar{border-right:0; border-bottom:1px solid rgba(255,255,255,.05);} .section{padding:76px 0;} .showcase-main{padding:22px;} }

.container {
  width: min(calc(100% - clamp(32px, 4vw, 72px)), var(--max));
}

@media (max-width: 860px) {
  .container {
    width: min(calc(100% - 28px), var(--max));
  }

  .nav-shell {
    display: flex;
    justify-content: space-between;
  }

  .hero-shell {
    gap: 34px;
    text-align: left;
  }

  .hero-actions {
    justify-content: flex-start;
  }

  .hero-visual {
    max-width: 100%;
    min-height: 690px;
  }

  .valerian-shell {
    min-height: 690px;
  }

  .valerian-layout {
    padding: 36px 18px 40px;
    gap: 28px;
  }

  .valerian-modules {
    grid-template-columns: repeat(4, 68px);
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto;} *,*::before,*::after{animation:none!important; transition:none!important;} }

/* =========================================================
   AME RESPONSIVE FOUNDATIONS
   Keeps the whole site stable across desktop, tablets, and phones.
   ========================================================= */

html,
body {
  width: 100%;
}

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.container {
  width: min(calc(100% - clamp(28px, 4vw, 72px)), var(--max));
}

main {
  min-height: calc(100dvh - var(--header-h));
}

@media (max-width: 1180px) {
  :root {
    --header-h: 70px;
    --radius: 22px;
  }

  .section {
    padding: 82px 0;
  }

  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 860px) {
  :root {
    --header-h: 66px;
    --radius: 20px;
  }

  .container {
    width: min(calc(100% - 28px), var(--max));
  }

  .section {
    padding: 70px 0;
  }

  .btn {
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 15px;
  }

  .eyebrow {
    font-size: .72rem;
    line-height: 1.45;
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  :root {
    --header-h: 64px;
  }

  .container {
    width: min(calc(100% - 22px), var(--max));
  }

  .section {
    padding: 58px 0;
  }

  .grid-bg {
    background-size: 34px 34px;
    opacity: .38;
  }
}