/* ============================================================
   AlloTech.AI — cinematic theme for inner pages
   Loaded after the compiled Next.js CSS and impeccable.css on
   every inner page, so these overrides win the cascade. Reskins
   the enterprise template (Loi 25, pricing, services, blog,
   contact, cybersecurity...) to the homepage's dark-void design.
   ============================================================ */

/* ---- tokens: point the build's variables at the cinematic palette ---- */
:root {
  --bg-primary: #000000;
  --bg-secondary: #07070a;
  --bg-card: #0a0a10;
  --bg-surface: #08080c;
  --bg-deep: #000000;
  --bg-void: #000000;
  --card: #0a0a10;
  --card-elevated: #101016;
  --text-primary: #ffffff;
  --text-secondary: #bdbdbd;
  --muted-foreground: #9a9a9a;
  --brand-blue: #8052ff;
  --brand-purple: #8052ff;
  --primary: #8052ff;
  --primary-light: #a98bff;
  --primary-dark: #6340d1;
  --accent-light: #a98bff;
  --gradient-primary: linear-gradient(135deg, #8052ff, #a98bff);
  --border: rgba(255, 255, 255, 0.1);
  --ring: #8052ff;
  --input: #12121a;
  --secondary: #12121a;
  --muted: #12121a;
  --glass: rgba(255, 255, 255, 0.04);
  --glass-bg: rgba(10, 8, 20, 0.62);
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
}

/* ---- base surfaces ---- */
html body {
  background: #000000;
  color: #ffffff;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;
  font-weight: 300;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
html body main {
  background: transparent;
}

/* warm ambient glow so dark sections never read as empty */
html body main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 82% -8%, rgba(128, 82, 255, 0.13), transparent 60%),
    radial-gradient(700px 500px at 8% 30%, rgba(21, 132, 110, 0.07), transparent 60%);
}

/* ---- typography: kill the serif override, restore monolithic sans ---- */
html body h1,
html body .hero h1,
html body [class*="Hero"] h1,
html body [class*="hero"] h1,
html body section > h2,
html body section > header h2,
html body .aihp-teaser h2,
html body .at-trust-banner h2 {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
html body section h3,
html body article h3,
html body main h3 {
  font-weight: 500 !important;
  letter-spacing: -0.02em;
}
html body section h4,
html body article h4,
html body main h4 {
  font-weight: 600 !important;
}

/* ---- accent color: cyan/blue/purple become electric iris ---- */
html body a:not(.btn):not(.brand) {
  color: #b79bff;
}
html body .text-cyan-400,
html body .text-cyan-500,
html body .text-emerald-400,
html body .text-emerald-500 {
  color: #b79bff !important;
}
html body .text-amber-400,
html body .text-yellow-400 {
  color: #ffb829 !important;
}

/* ---- buttons ---- */
html body .btn-primary {
  background: #8052ff !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 13px 26px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: none !important;
}
html body .btn-primary:hover {
  background: #9169ff !important;
  box-shadow: 0 12px 36px rgba(128, 82, 255, 0.28) !important;
}
html body a[class*="bg-cyan-600"],
html body a[class*="from-cyan-500"],
html body button[class*="from-cyan-500"] {
  background: #8052ff !important;
  color: #ffffff !important;
}
html body a[class*="hover:bg-cyan-500"]:hover,
html body a[class*="from-cyan-500"]:hover,
html body button[class*="from-cyan-500"]:hover {
  background: #9169ff !important;
}

/* ---- cards ---- */
html body .card-enterprise {
  background: #0a0a10 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}
html body .card-enterprise:hover {
  border-color: rgba(128, 82, 255, 0.42) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5) !important;
}
html body .glass-panel,
html body .glass-premium {
  background: rgba(10, 8, 20, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}
html body .glass-panel:hover,
html body .glass-premium:hover {
  border-color: rgba(128, 82, 255, 0.4) !important;
}
html body [class*="bg-slate-900"] {
  background-color: #0a0a10 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html body [class*="border-slate-800"] {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html body [class*="bg-white/5"] {
  background-color: rgba(255, 255, 255, 0.04) !important;
}
html body [class*="border-white/10"] {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
/* color-tinted feature cards: keep their accent hue, on the void */
html body [class*="bg-cyan-500/10"],
html body [class*="bg-blue-500/10"],
html body [class*="bg-amber-500/10"],
html body [class*="bg-emerald-500/10"],
html body [class*="bg-rose-500/10"],
html body [class*="bg-violet-500/10"],
html body [class*="bg-orange-500/10"] {
  background-color: rgba(10, 10, 16, 0.86) !important;
}
html body [class*="border-cyan-500/"],
html body [class*="border-blue-500/"],
html body [class*="border-violet-500/"],
html body [class*="border-emerald-500/"],
html body [class*="border-amber-500/"],
html body [class*="border-orange-500/"],
html body [class*="border-rose-500/"] {
  border-color: rgba(128, 82, 255, 0.28) !important;
}
html body [class*="shadow-cyan-500/"],
html body [class*="shadow-blue-500/"],
html body [class*="shadow-emerald-500/"],
html body [class*="shadow-amber-500/"],
html body [class*="shadow-rose-500/"] {
  box-shadow: none !important;
}
html body [class*="from-blue-900/40"],
html body [class*="from-emerald-900/20"],
html body [class*="to-cyan-900/"] {
  background: rgba(10, 10, 16, 0.86) !important;
}

/* ---- hero badge / label ---- */
html body .badge-primary {
  background: rgba(128, 82, 255, 0.14) !important;
  color: #b79bff !important;
  border-color: rgba(128, 82, 255, 0.3) !important;
}
html body .gradient-text,
html body .gradient-text-cyan {
  background: linear-gradient(96deg, #8052ff 0%, #b79bff 55%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- header / nav ---- */
html body header,
html body header nav {
  background: rgba(0, 0, 0, 0.78) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
html body header [class*="border-b"] {
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html body header [class*="bg-gradient-to-r"] {
  background: linear-gradient(
    90deg,
    rgba(128, 82, 255, 0.1),
    rgba(21, 132, 110, 0.08)
  ) !important;
}

/* ---- footer ---- */
html body footer {
  background: #050507 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ---- text hues ---- */
html body .text-slate-300,
html body .text-slate-400,
html body .text-slate-500 {
  color: #bdbdbd !important;
}
html body .text-muted-foreground {
  color: #9a9a9a !important;
}

/* ---- cyber grid: violet instead of blue ---- */
html body .grid-cyber {
  background-image:
    linear-gradient(rgba(128, 82, 255, 0.045) 1px, transparent 0),
    linear-gradient(90deg, rgba(128, 82, 255, 0.045) 1px, transparent 0) !important;
}

/* ---- aurora blobs: iris + verdant ---- */
html body [class*="bg-cyan-500/10"],
html body [class*="from-cyan-500/10"],
html body [class*="via-cyan-500/10"],
html body [class*="to-blue-500/10"] {
  background: linear-gradient(
    90deg,
    rgba(128, 82, 255, 0.1),
    rgba(21, 132, 110, 0.08)
  ) !important;
}

/* ---- selection ---- */
html body ::selection {
  background: #8052ff;
  color: #ffffff;
}

/* ---- focus ring ---- */
html body :focus-visible {
  outline: 2px solid #b79bff;
  outline-offset: 3px;
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html body *,
  html body *::before,
  html body *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- stuck Next.js scroll-reveal wrappers ----
   Static exports ship content inside inline
   opacity:0 / translateY(40px) wrappers whose
   reveal script does not run. Force them visible
   so no section is ever blank. */
html body main [style*="translateY(40px)"],
html body [style*="translateY(40px)"] {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================
   Legacy hand-authored pages (ai-employees, reserver, services)
   Reskinned onto the homepage dark-void system. Loaded after
   allotech-cinema.css on these pages.
   ============================================================ */
html body {
  --muted: #9a9a9a;
  --text: #ffffff;
  --line: rgba(255, 255, 255, 0.09);
  --ok: #3ddc84;
}
html body .aurora { display: none; }

/* compact single-column hero for inner pages (homepage hero
   stays a two-column grid because it never loads this file) */
html body main .hero:not(:has(.hero-art)) {
  min-height: 0;
  display: block;
  padding-top: clamp(130px, 16vh, 180px);
  padding-bottom: clamp(50px, 7vh, 80px);
}
html body main .hero:not(:has(.hero-art)) .wrap { display: block; }
html body main .hero:not(:has(.hero-art)) .hero-copy { max-width: 780px; }
html body main .hero:not(:has(.hero-art)) > .wrap > .eyebrow,
html body main .hero:not(:has(.hero-art)) > .wrap > h1,
html body main .hero:not(:has(.hero-art)) > .wrap > .lede,
html body main .hero:not(:has(.hero-art)) > .wrap > .cta-row,
html body main .hero:not(:has(.hero-art)) > .wrap > .cta-note,
html body main .hero:not(:has(.hero-art)) > .wrap > .trust-strip,
html body main .hero:not(:has(.hero-art)) > .wrap > p {
  max-width: 780px;
}
html body main .hero:not(:has(.hero-art)) h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }

html body main .section-lede {
  color: #bdbdbd;
  font-weight: 200;
  font-size: 1.05rem;
  max-width: 72ch;
  margin: 0 0 48px;
  line-height: 1.6;
}

/* hairline grid: the homepage pricing/steps material language */
html body main .grid {
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
html body main .g2 { grid-template-columns: repeat(2, 1fr); }
html body main .g3 { grid-template-columns: repeat(3, 1fr); }
html body main .card {
  background: #000000;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 32px 28px;
  transition: background 0.3s ease;
}
html body main .card:hover {
  background: #070709;
  transform: none;
  border: 0;
}

/* featured employee cards: full-bleed portrait, no half-cropped strip */
html body main .card.emp { display: block; padding: 0; }
html body main .card.emp .shot {
  height: auto !important;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0;
  margin: 0;
}
html body main .card.emp .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 13%;
}
html body main .card.emp .body { padding: 26px 28px 30px; }
html body main .card.emp .body .top { display: block; margin-bottom: 12px; }

/* catalog cards: role marker replaces the emoji */
html body main .card.agent .top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}
html body main .emoji,
html body main .svc-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(128, 82, 255, 0.16);
  font-size: 0;
}
html body main .emoji::before,
html body main .svc-icon::before {
  content: "";
  width: 9px;
  height: 9px;
  background: #8052ff;
  transform: rotate(45deg);
}

html body main .cat-h {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8052ff;
  margin: 72px 0 30px;
  display: flex;
  align-items: center;
  gap: 12px;
}
html body main .cat-h .cat-n { color: #9a9a9a; font-size: 0.78rem; }

/* reserver trust chips */
html body main .trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 34px;
}
html body main .chip {
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.82rem;
  color: #9a9a9a;
}
html body main .chip b { color: #8052ff; font-weight: 600; }

/* cal.com booking frame */
html body main .cal-wrap {
  margin-top: 34px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  overflow: hidden;
}
html body main .cal-wrap iframe {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
  background: #050507;
}

/* services filters + cards */
html body main .svc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
html body main .fchip {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: #9a9a9a;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
html body main .fchip:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}
html body main .fchip.active {
  background: #8052ff;
  border-color: #8052ff;
  color: #ffffff;
}
html body main .card.svc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
html body main .card.svc .svc-icon { margin-bottom: 18px; }
html body main .card.svc h3 { margin-bottom: 10px; }
html body main .card.svc p {
  color: #9a9a9a;
  font-size: 0.95rem;
  margin-bottom: 18px;
}
html body main .svc-feats {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 9px;
}
html body main .svc-feats li {
  color: #bdbdbd;
  font-size: 0.88rem;
  padding-left: 18px;
  position: relative;
}
html body main .svc-feats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  background: #8052ff;
  transform: rotate(45deg);
}
html body main .amt {
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  margin: 4px 0 18px;
}
html body main .per { color: #9a9a9a; font-size: 0.82rem; }
html body main .card.svc .btn { margin-top: auto; }

/* responsive collapse */
@media (max-width: 1020px) {
  html body main .g3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  html body main .g2,
  html body main .g3 { grid-template-columns: 1fr; }
  html body main .cal-wrap iframe { height: 560px; }
}