/* ============================================================
   AI-GENCY SKIN for NeoEvo landing
   Loaded AFTER the compiled Tailwind sheets — overrides theme.
   Palette: sky #7EC8E3 + amber #F5A623 on near-black #0A0A0A
   Type:    Outfit (display) + DM Sans (body)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;600;700&family=DM+Sans:wght@400;500;700&family=Montserrat:wght@300;400;500;600&display=swap');

/* ---------- 1. Theme variables ---------- */
:root, html {
  --color-bg: #0A0A0A;
  --color-bg-deep: #060608;
  --color-bg-glare: rgba(126, 200, 227, .05);
  --color-amber: #F5A623;
  --color-amber-warm: #F5A623;
  --color-cool: #7EC8E3;
  --aig-sky: #7EC8E3;
  --aig-amber: #F5A623;
  --aig-card-bg: rgba(255, 255, 255, .03);
  --aig-card-border: rgba(255, 255, 255, .08);
  --aig-radius: 1.75rem;
}

/* ---------- 2. Background: AI-GENCY mesh ---------- */
html { background-color: var(--color-bg) !important; }
body {
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%, rgba(126,200,227,.13), transparent),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(245,166,35,.10), transparent),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(126,200,227,.04), transparent),
    var(--color-bg) !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
  background-color: var(--color-bg) !important;
  color: #E8E8E8 !important;
  /* Nunito stays as Cyrillic fallback for body text */
  font-family: 'DM Sans', 'Nunito', -apple-system, sans-serif !important;
}

/* ---------- 3. Typography ---------- */
.font-display {
  /* Montserrat = Cyrillic fallback closest to Outfit's geometry */
  font-family: 'Outfit', 'Montserrat', sans-serif !important;
}
h1.font-display, h2.font-display {
  font-weight: 250 !important;
  letter-spacing: -0.025em !important;
}
h3.font-display { font-weight: 300 !important; }
/* AI-GENCY kills italics in display type */
h1 .italic, h1 em, h2 .italic, h2 em { font-style: normal !important; }
/* Hero accent word: sky, like "O SCOMPARI." on AI-GENCY */
h1 .emboss-amber {
  background: linear-gradient(180deg, #7EC8E3 0%, #5BA8C8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ---------- 4. Header → floating glass pill ---------- */
header.fixed {
  top: 1rem !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: 94%;
  max-width: 80rem;
}
header.fixed > div {
  max-width: none !important;
  background: var(--aig-card-bg);
  border: 1px solid var(--aig-card-border);
  border-radius: 999px;
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  padding: .55rem 1.5rem !important;
}
/* Logo: AI-GENCY wordmark style */
header .font-display {
  font-weight: 500 !important;
  letter-spacing: .28em !important;
  text-transform: uppercase;
  font-size: 1rem !important;
}
/* Nav links: hairline uppercase, sky hover */
header nav { color: rgba(232,232,232,.55) !important; }
header nav a {
  font-family: 'Outfit', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  font-weight: 500 !important;
}
header nav a:hover { color: var(--aig-sky) !important; }

/* ---------- 5. Buttons ---------- */
.btn-primary {
  background: var(--aig-amber) !important;
  color: #0A0A0A !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
  font-weight: 600 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: all .3s cubic-bezier(.25,.46,.45,.94) !important;
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(245,166,35,.3) !important;
}
.btn-secondary {
  background: transparent !important;
  border: 1px solid var(--aig-card-border) !important;
  color: #E8E8E8 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
  font-weight: 600 !important;
  transition: all .3s ease !important;
}
.btn-secondary:hover {
  border-color: var(--aig-sky) !important;
  background: rgba(126,200,227,.05) !important;
  transform: translateY(-3px);
}
/* Compact CTA inside the pill header */
header .btn-primary {
  padding: .5rem 1.1rem !important;
  font-size: 9px !important;
}

/* ---------- 6. Glass cards ---------- */
.glass-card {
  border-radius: var(--aig-radius) !important;
  background: var(--aig-card-bg) !important;
  border: 1px solid var(--aig-card-border) !important;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: none !important;
  transition: border-color .35s ease, transform .35s ease !important;
}
.glass-card:hover {
  border-color: rgba(126,200,227,.2) !important;
  transform: translateY(-2px);
}

/* ---------- 7. Accent color mapping ---------- */
/* amber text hovers → sky (AI-GENCY link behavior) */
.hover\:text-amber-200:hover,
.hover\:text-amber-300:hover { color: var(--aig-sky) !important; }
/* amber emboss (logo "Evo", highlights) → AI-GENCY amber */
.emboss-amber {
  background: linear-gradient(180deg, #F5A623 0%, #d18f1c 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}
.emboss-cool {
  background: linear-gradient(180deg, #7EC8E3 0%, #5BA8C8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

/* ---------- 8. Selection & scrollbar ---------- */
::selection { background: rgba(126,200,227,.3); color: #fff; }

/* ---------- 9. Mobile nav: AI-GENCY style ---------- */
header .lang-btn {
  width: auto !important; height: auto !important;
  border-radius: 999px !important;
  padding: .5rem .95rem !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 10px !important; letter-spacing: .15em !important;
  font-weight: 600 !important; text-transform: uppercase;
  border: 1px solid var(--aig-card-border) !important;
  background: var(--aig-card-bg) !important;
  color: rgba(232,232,232,.85) !important;
}
.neo-burger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  padding: 8px; min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
  background: none; border: none; color: #E8E8E8;
}
.neo-burger span { width: 20px; height: 1.5px; background: currentColor; border-radius: 2px; }
@media (max-width: 767px) {
  header .btn-primary { display: none !important; } /* app CTA moves into the menu */
  .neo-burger { display: flex; }
}
.neo-mobile-menu {
  position: fixed; inset: 0; z-index: 999;
  backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5);
  background: rgba(10,10,10,.95);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.neo-mobile-menu.open { opacity: 1; pointer-events: auto; }
.neo-mobile-menu a {
  font-family: 'Outfit', 'Montserrat', sans-serif; font-size: 1.35rem; font-weight: 200;
  letter-spacing: .15em; text-transform: uppercase; color: #E8E8E8; text-decoration: none;
}
.neo-mobile-menu a:hover { color: var(--aig-sky); }
.neo-mobile-menu .neo-menu-cta {
  margin-top: .8rem; background: var(--aig-amber) !important; color: #0A0A0A !important;
  border-radius: 999px; padding: .95rem 1.9rem; font-size: 11px !important;
  font-weight: 600; letter-spacing: .22em;
}
.neo-menu-close {
  position: absolute; top: 1.3rem; right: 1.3rem; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--aig-card-border); border-radius: 999px;
  color: #E8E8E8; font-size: 18px; cursor: pointer;
}