/* =========================================================
   THEME TOKENS
   ========================================================= */
:root{
  --bg:#0b1020;
  --card:#0f1630;
  --text:#f5f7ff;
  --muted:#cfd6e6;
  --accent:#7aa2ff;
  --accent-2:#9ef0ff;
  --success:#9ef0b0;
  --ring:rgba(122,162,255,.5);
}

/* =========================================================
   GLOBAL BASE & ACCESSIBILITY
   ========================================================= */
html,body{
  margin:0;
  padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 80% -20%, rgba(122,162,255,.15), transparent 60%),
    radial-gradient(1000px 700px at -10% -10%, rgba(158,240,255,.15), transparent 60%),
    var(--bg);
}

/* keep headings sensible; page sections set their own sizes */
h2, h3 { line-height: 1.4; }

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Global focus ring */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(122,162,255,.2);
  border-radius:10px;
}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto; padding:8px 12px; background:var(--card);
  border:1px solid rgba(255,255,255,.2); border-radius:10px; z-index:1000;
}

/* Layout container */
.container{ max-width:1120px; margin:0 auto; padding:24px; }

/* =========================================================
   HEADER / BRAND
   ========================================================= */
header{ padding:24px 0 8px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand h1{ margin:0; font-size:18px; letter-spacing:.2px; }
.nav a{ margin-left:12px; font-weight:600; font-size: 0.85em !important; }
.site-name {
  font-weight:700;
  font-size:18px;
  letter-spacing:.2px;
  color:var(--text);
  margin:0;
}
.nav a.is-active,
.mobile-drawer a.is-active {
  color: var(--accent-2);
  text-decoration: underline;
}

.nav a.active-nav,
.mobile-drawer a.active-nav {
  color: var(--accent-2);
  text-shadow: 0 0 12px rgba(158,240,255,.6);
}

/* Active nav state (set by include.js) */
.nav a.active-nav,
.mobile-drawer a.active-nav {
  color: var(--accent-2);
  text-decoration: none;
  position: relative;
  font-weight: 600;
}

.nav a.active-nav::after,
.mobile-drawer a.active-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 0 12px rgba(122,162,255,.6);
}

.login-btn {
  display: inline-flex;
  flex-direction: column;
  text-align: center;
  margin-left: 24px;
}

/* Logo */
.logo{
  --glow:rgba(122,162,255,.35);
  --glow-hover:rgba(122,162,255,.55);
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(40px,6vw,64px); height:clamp(40px,6vw,64px);
  border-radius:50%;
  box-shadow:0 0 24px var(--glow);
  transition:box-shadow .25s ease, transform .25s ease;
}
.logo img{ width:100%; height:auto; display:block; border-radius:50%; pointer-events:none; }
.logo:hover,.logo:focus-visible{ box-shadow:0 0 30px var(--glow-hover); transform:scale(1.05); }
@media (prefers-reduced-motion: reduce){ .logo{ transition:none; } }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:12px; font-weight:700;
  border:1px solid transparent; color:#fff;
  background:linear-gradient(135deg, var(--accent), #5d82ff);
  box-shadow:0 10px 30px rgba(122,162,255,.35);
  cursor:pointer;
}
.btn.secondary{ background:transparent; color:var(--accent); border-color:var(--ring); box-shadow:none; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

/* =========================================================
   HERO (used on homepage)
   ========================================================= */
.hero{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  min-height:560px; padding:96px 24px; border-radius:16px; position:relative; overflow:hidden;

  background-color:var(--bg);
  background-image:image-set(
    url("/assets/bg-ai-agent.webp") type("image/webp"),
    url("/assets/bg-ai-agent.jpg") type("image/jpeg")
  );
  background-position:center; background-size:cover; background-repeat:no-repeat;
  background-attachment:scroll;
  animation:pan-bg 40s linear infinite alternate;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1200px 800px at 80% -20%, rgba(122,162,255,.12), transparent 55%),
    radial-gradient(900px 600px  at -10% -10%, rgba(158,240,255,.10), transparent 55%),
    linear-gradient(135deg, rgba(11,16,32,.65), rgba(11,16,32,.35));
}
.hero > *{ position:relative; z-index:1; }

@keyframes pan-bg{ 0%{background-position:50% 50%;} 100%{background-position:55% 45%;} }
@media (prefers-reduced-motion: reduce){ .hero{ animation:none; } }
@media (min-width:1024px){ .hero{ background-attachment:fixed; } }

.hero h2{ font-size:clamp(32px, 4vw, 52px); margin:0 0 16px; line-height:1.1; max-width:980px; }
.hero .lede{
  color:var(--success);
  font-weight:500;
  max-width:760px; margin:0 auto 20px;
  font-size:clamp(16px, 1.5vw, 20px);
  text-shadow:0 0 12px rgba(158,240,176,.25);
}

.summary{
  background:rgba(11,16,32,.60);
  border:1px solid rgba(255,255,255,.08);
  padding:16px; border-radius:14px; color:#e9eeff;
  max-width:800px; margin:0 auto;
}
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:24px; margin-bottom:24px; }

.hero .card ul{ text-align:left; margin:12px auto 0; max-width:420px; padding-left:1.25rem; }
.hero .card li{ list-style-position:outside; }

/* =========================================================
   CARDS, GRIDS, TYPOGRAPHY
   ========================================================= */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 60%), var(--card);
  border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:20px;
}
.grid-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.grid-2{ display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; }

section{ padding:32px 0; }
h3{ margin:0 0 24px; font-size:clamp(20px, 2.2vw, 28px); }
p{ line-height:1.6; }
ul{ padding-left:18px; }

/* Steps */
.steps{ counter-reset:step; display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; }
.step{ position:relative; padding-top:12px; }
.step::before{
  counter-increment:step; content:counter(step);
  position:absolute; top:-12px; left:-12px; width:32px; height:32px;
  display:grid; place-items:center; background:var(--accent); color:#fff;
  border-radius:10px; font-weight:800; box-shadow:0 10px 20px rgba(122,162,255,.35);
}

/* =====================================================
   Alert
   ===================================================== */
/* Red background for WARN, but only when shown */
.alert.warn {
  background: #2b0f12;
  border: 1px solid #ff6b6b;
  color: #ffd8d8;
  padding: 10px 12px;
  border-radius: 10px;
  margin: 8px 0 12px;
}
   

/* =========================================================
   FAQ
   ========================================================= */
.faq details{ background:var(--card); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:14px 16px; }
.faq details + details{ margin-top:10px; }
.faq summary{ cursor:pointer; font-weight:700; }

/* =========================================================
   FORMS
   ========================================================= */
form{ display:grid; gap:12px; }
label{ font-weight:600; }
input, textarea, select{
  background:rgba(255,255,255,.05); color:var(--text);
  border:1px solid rgba(255,255,255,.12); border-radius:10px;
  padding:12px; font-size:16px;
}
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--ring);
  box-shadow:0 0 0 4px rgba(122,162,255,.15);
}

/* Dark dropdown */
select{
  background-color:#0f1630;
  -webkit-text-fill-color:var(--text);
  color-scheme:dark;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23cfd6e6' d='M1.41 0L6 4.59 10.59 0 12 1.41 6 7.41 0 1.41z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:12px 8px;
}
select option{ background-color:#0f1630 !important; color:var(--text); }

#aeo-submit[disabled]{ opacity:.6; cursor:not-allowed; }

/* =========================================================
   FOOTER
   ========================================================= */
footer{ padding:28px 0 48px; color:var(--muted); font-size:14px; }
.footer-grid{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; }

/* Footer nav tweaks */
.footer-nav {
  font-size: 14px;
  color: var(--muted);
  text-align: right;
  line-height: 1.5;
}
.footer-nav a {
  color: var(--muted);
  text-decoration: none;
}
.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.footer-nav ul { list-style:none; display:flex; gap:0.5rem; flex-wrap:wrap; }
.footer-nav li::after { content:"•"; margin:0 .4rem; color:var(--muted-ink); } 
.footer-nav li:last-child::after{content:"";}

/* Stack footer content nicely on narrow screens */
@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 16px;
  }
  .footer-nav {
    text-align: left;
    font-size: 14px;
    line-height: 1.6;
  }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  .grid-3, .grid-2, .steps{ grid-template-columns:1fr; }
}

/* Mobile safe-areas on iOS */
@supports (padding: max(0px)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

/* Base type tweaks on mobile */
@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; }
  body { line-height: 1.6; }
  h1, h2, h3, h4 { word-wrap: break-word; }
}

/* --- NAV visibility fixes (desktop vs mobile) --- */
.nav { display: flex; }
.mobile-nav-toggle, .mobile-drawer { display: none; }

@media (max-width: 1024px) {
  .nav { display: none !important; }

  .mobile-nav-toggle {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.2);
    background: var(--card); color: var(--text); cursor: pointer;
    position: relative; z-index: 10001; /* above drawer */
  }

  header { position: relative; } /* positioning context for drawer */

  .mobile-drawer {
    display: block;
    position: absolute; right: 0; top: calc(100% + 8px);
    z-index: 10000; background: var(--card);
    border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
    min-width: 220px; padding: 8px; box-shadow: 0 20px 40px rgba(0,0,0,.35);
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .mobile-drawer.open { visibility: visible; opacity: 1; transform: translateY(0); }
  .mobile-drawer a { display: block; padding: 12px 10px; border-radius: 8px; font-weight: 600; white-space: nowrap; }
  .mobile-drawer a:hover, .mobile-drawer a:focus-visible { background: rgba(255,255,255,.06); }
}

/* Hero: mobile adjustments (keep AI agent visible on the left) */
@media (max-width: 768px) {
  .hero {
    padding: 64px 18px;
    min-height: 560px;
    background-attachment: scroll;
    background-position: left center; /* focus left side where the agent sits */
  }
  .hero h2 { font-size: clamp(26px, 7vw, 34px); margin-bottom: 12px; }
  .hero .lede { font-size: 16px; margin-bottom: 16px; }
  .summary { padding: 14px; margin-top: 8px; }
  .cta-row { gap: 10px; }
  .btn { width: 100%; max-width: 520px; }
}

/* Reduce background animation on very small / reduced-motion */
@media (max-width: 480px), (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
}

/* Grids → single column with comfy gaps */
@media (max-width: 960px) {
  .grid-3, .grid-2, .steps { grid-template-columns: 1fr; gap: 14px; }
  section { padding: 28px 0; }
}

/* Cards: spacing and readability on mobile */
@media (max-width: 768px) {
  .card { padding: 18px; }
  .card h3 { margin-bottom: 10px; }
  .card p, .card li { font-size: 15.5px; }
}

/* Steps: badge position on small screens */
@media (max-width: 768px) {
  .step { padding-top: 18px; }
  .step::before { top: -14px; left: -6px; }
}

/* Forms on mobile */
@media (max-width: 768px) {
  form { gap: 10px; }
  label { font-size: 14px; }
  input, textarea, select { padding: 14px; font-size: 16px; } /* prevents iOS zoom */
  textarea { min-height: 120px; }
  #form-status { font-size: 14px; }
}

/* Links should not overflow */
a { word-break: break-word; }

/* Optional: tighter outer padding on tiny phones */
@media (max-width: 420px) {
  .container { padding: 16px; }
}

.card .cta-row {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

@media (max-width: 600px) {
  .card .cta-row {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
  }
}