/* =========================
   AIOption theme — full css
   ========================= */

:root{
  color-scheme: dark;

  /* AIOption brand */
  --ao-bg-1: #0a0612;
  --ao-bg-2: #0d0b18;

  /* затемнений card фон і бордери (щоб не “вибілювало”) */
  --ao-card: rgba(12,12,20, .55);              /* було rgba(255,255,255,0.06) */
  --ao-stroke: rgba(255,255,255,0.06);         /* було 0.08 */

  --ao-grad-a: 275deg;
  --ao-grad: linear-gradient(var(--ao-grad-a), #7c3aed, #2563eb);

  --ao-text: #e7e7ff;
  --ao-muted: #b5b5cf;

  --ao-accent: #8b5cf6;     /* violet */
  --ao-accent-2: #3b82f6;   /* blue */
  --ao-focus: #a78bfa;
}

html, body {
  background:
    radial-gradient(1200px 800px at 10% -10%, #1a1230 0%, transparent 60%),
    radial-gradient(1000px 700px at 120% 20%, #0b1026 0%, transparent 55%),
    var(--ao-bg-1);
  color: var(--ao-text);
}

.bg-aioption { background: var(--ao-bg-2); }

/* Header */
.aioption-header{
  background: linear-gradient(to bottom, rgba(10,6,18,.85), rgba(10,6,18,.55));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ao-stroke);
}

/* Logo */
.logo-gradient{
  background: var(--ao-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: .5px;
}

/* Links / Buttons */
.nav-link{
  color: var(--ao-text);
  opacity: .85;
  transition: .2s ease;
}
.nav-link:hover{ opacity:1; text-shadow: 0 0 16px rgba(139,92,246,.35); }

/* Пігулка в хедері (реєстрація) */
.btn-pill{
  padding: .5rem .9rem;
  border-radius: 999px;
  font-weight: 700;
  color: #0b0b12;
  background: var(--ao-grad);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 10px 24px rgba(102,76,230,.35),
    0 0 0 6px rgba(139,92,246,.12);
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn-pill:hover{
  transform: translateY(-1px);
  box-shadow:
    0 12px 28px rgba(102,76,230,.45),
    0 0 0 8px rgba(139,92,246,.16);
}

/* Lang chip */
.lang-chip{
  width: 2rem; height: 2rem;
  border-radius: .75rem;
  border: 1px solid var(--ao-stroke);
  display:flex; align-items:center; justify-content:center;
  cursor: pointer;
  color: var(--ao-text);
  background: rgba(255,255,255,0.03);
  transition: .2s ease;
}
.lang-chip:hover{ border-color: rgba(139,92,246,.5); box-shadow: inset 0 0 0 999px rgba(139,92,246,.08); }

/* Mobile */
.mobile-link{
  font-size: 1.125rem;
  color: var(--ao-text);
  opacity: .92;
}
.mobile-link:hover{ text-shadow: 0 0 12px rgba(91,162,255,.32); }

.mobile-btn{
  font-size: 1.125rem;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: var(--ao-grad);
  color:#0b0b12; font-weight:800;
}

/* Cookie */
.cookie{
  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
  background: rgba(18, 16, 31, .9);
  border: 1px solid var(--ao-stroke);
  color: var(--ao-text);
  font-size: .9rem; padding: .9rem 1.2rem;
  border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  z-index: 70; display:none;
}
.cookie.show{ display:block; }

/* Generic cards */
.ao-card{
  background: var(--ao-card);
  border: 1px solid var(--ao-stroke);
  border-radius: 1.2rem;
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
}

/* Inputs/focus */
:where(input,select,textarea,button):focus{
  outline: 2px solid var(--ao-focus);
  outline-offset: 2px;
}

/* Optional: дрібний шум поверх бекграунду для “AI look” */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: url('/static/img/noise-8.png'); /* якщо нема — прибери рядок */
  opacity:.05;
} /* ← закриваю дужку! */

/* === Buttons: ring/outline варіанти === */

/* заповнена фіолетово-синя */
.interactive-btn{
  border-radius: 999px;
  background: var(--ao-grad);
  color: #0b0b12;
  font-weight: 700;
  box-shadow:
    0 12px 32px rgba(104,85,240,.25),
    0 0 0 6px rgba(139,92,246,.12);
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.interactive-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 16px 36px rgba(92,129,246,.35),
    0 0 0 8px rgba(139,92,246,.16);
}
.interactive-btn:active{ transform:none; opacity:.95; }

/* прозора з обводкою (outline) */
.btn-outline{
  border-radius: 999px;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(139,92,246,.65);
  box-shadow:
    inset 0 0 0 1px rgba(139,92,246,.25),
    0 0 0 6px rgba(139,92,246,.12);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn-outline:hover{
  transform: translateY(-1px);
  border-color: rgba(139,92,246,.8);
  box-shadow:
    inset 0 0 0 1px rgba(139,92,246,.35),
    0 0 0 8px rgba(139,92,246,.16);
}
.btn-outline:active{ transform:none; opacity:.96; }

/* фокус-контур для доступності */
:where(.interactive-btn,.btn-outline,.btn-pill):focus-visible{
  outline: 2px solid #a78bfa;
  outline-offset: 3px;
}