/* ==========================================================================
   BOOOST Website — Enhancements
   Language toggle + Pricing sections (Personal light / Business cyber)
   Uses design tokens from tokens.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   LANGUAGE TOGGLE (fixed, adapts to light/dark context)
   -------------------------------------------------------------------------- */
.lang-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(18, 18, 26, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9999px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease, color 150ms ease;
}
.lang-toggle svg { width: 15px; height: 15px; opacity: 0.85; }
.lang-toggle:hover {
  background: rgba(255, 45, 107, 0.22);
  border-color: rgba(255, 45, 107, 0.55);
  transform: translateY(-1px);
}
.lang-toggle:focus-visible { outline: 2px solid var(--cyber-cyan); outline-offset: 2px; }

/* Personal landing is light — flip the toggle to dark-on-light */
body.show-personal .lang-toggle {
  color: #191919;
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(0, 0, 0, 0.14);
}
body.show-personal .lang-toggle:hover {
  background: #fff;
  border-color: rgba(10, 102, 194, 0.5);
  color: #0A66C2;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   PRICING — shared billing show/hide
   -------------------------------------------------------------------------- */
.pricing[data-billing="monthly"] .price-figure--annual,
.pricing[data-billing="monthly"] .price-was--annual { display: none; }
.pricing[data-billing="annual"] .price-figure--monthly,
.pricing[data-billing="annual"] .price-was--monthly { display: none; }

/* --------------------------------------------------------------------------
   PRICING — PERSONAL (light)
   -------------------------------------------------------------------------- */
.landing-pricing { padding: 48px 24px 8px; }
.pricing--personal { max-width: 560px; margin: 0 auto; text-align: center; }
.pricing-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.pricing-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 8px 0 12px;
}
.pricing-sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 48ch;
  margin: 0 auto 28px;
}
.price-card--free {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 44px;
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}
.price-card--free .price-figure { display: flex; align-items: baseline; }
.price-card--free .price-amount {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.price-free-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.price-card--free .btn-primary { margin-top: 10px; }

/* Personal tier grid (catalog plans) */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  text-align: left;
  margin-bottom: 22px;
}
.tier-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 16px;
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.tier-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tier-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tier-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.tier-price { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--accent); white-space: nowrap; }
.tier-price em { font-style: normal; font-family: var(--font-body); font-weight: 500; font-size: 11px; color: var(--text-tertiary); margin-left: 2px; }
.tier-desc { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.pricing--personal { max-width: 1160px; }
.price-note--light { color: var(--text-tertiary); font-family: var(--font-body); font-size: 12px; margin: 0 0 18px; }

/* --------------------------------------------------------------------------
   PRICING — BUSINESS (cyber / dark)
   -------------------------------------------------------------------------- */
.pricing--business {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  margin-bottom: 32px;
  background: var(--cyber-surface-raised);
  border: 1px solid var(--cyber-border);
  border-radius: 9999px;
}
.billing-toggle button {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--cyber-text-muted);
  background: transparent;
  border: none;
  padding: 8px 20px;
  border-radius: 9999px;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}
.billing-toggle button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--cyber-magenta), var(--cyber-magenta-dim));
}
.billing-toggle button:focus-visible { outline: 2px solid var(--cyber-cyan); outline-offset: 2px; }
.billing-save {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--cyber-cyan);
  padding: 3px 9px;
  margin-left: 4px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 240, 255, 0.4);
  background: rgba(0, 240, 255, 0.08);
}

.price-card--business {
  position: relative;
  width: 100%;
  max-width: 430px;
  text-align: center;
  padding: 40px 34px;
  background: linear-gradient(180deg, rgba(255, 45, 107, 0.07), var(--cyber-surface) 55%);
  border: 1px solid var(--cyber-border);
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(255, 45, 107, 0.15), 0 24px 64px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.price-card--business::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyber-magenta), var(--cyber-cyan), transparent);
  opacity: 0.7;
}
.price-card__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}
.price-plan {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyber-text);
}
.price-eb {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cyber-black);
  background: var(--cyber-cyan);
  padding: 3px 10px;
  border-radius: 9999px;
}
.price-card--business .price-figure {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.price-card--business .price-amount {
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
.price-card--business .price-per {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: var(--cyber-text-muted);
}
.price-was {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--cyber-text-muted);
  margin-top: 10px;
}
.price-feats {
  list-style: none;
  padding: 0;
  margin: 28px 0 24px;
  text-align: left;
  display: grid;
  gap: 12px;
}
.price-feats li {
  position: relative;
  padding-left: 28px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--cyber-text);
}
.price-feats li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--cyber-cyan);
}
.price-card--business .btn-primary--dark { width: 100%; }
.price-note {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--cyber-text-muted);
  margin-top: 14px;
}

/* Proof band: flow to any number of stats (we add a 5th: WCAG 2.2 AA) */
.biz-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* --------------------------------------------------------------------------
   Split prompt: readable on both halves, out of the way on hover
   -------------------------------------------------------------------------- */
/* Glass chip so the line reads on cream AND black instead of straddling both */
.prompt-text {
  color: #E8ECF4;
  background: rgba(13, 13, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 7px 16px;
  border-radius: 9999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 250ms ease;
}
/* When a side is being explored, the center chip yields the stage */
.split-container:has(.split-side:hover) .prompt-text { opacity: 0; }

@media (max-width: 768px) {
  /* Overrides style.css's `top: 16px` pin (clipped + collided with the lang
     toggle). Centered, the chip sits on the horizontal divider between the
     stacked halves. */
  .split-prompt { top: 50% !important; }
  .prompt-text { font-size: 12px; white-space: normal; text-align: center; max-width: 78vw; }
}

/* --------------------------------------------------------------------------
   Hover (replaces the removed JS 3D tilt): a quiet lift, consistent everywhere
   -------------------------------------------------------------------------- */
.stat-card, .wishlist-box, .price-card--business, .price-card--free {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.stat-card:hover, .price-card--business:hover, .price-card--free:hover {
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   BOO — support chat
   -------------------------------------------------------------------------- */
.boo-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #12121A;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  transition: transform 180ms ease, border-color 180ms ease;
}
.boo-fab img { width: 34px; height: 34px; }
.boo-fab:hover { transform: translateY(-2px); border-color: rgba(255, 45, 107, 0.6); }
.boo-fab:focus-visible { outline: 2px solid var(--cyber-cyan); outline-offset: 3px; }

/* `display: flex` would defeat the hidden attribute — keep it authoritative */
.boo-panel[hidden] { display: none; }

.boo-panel {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 9999;
  width: min(370px, calc(100vw - 40px));
  height: min(540px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: #0F0F16;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.boo-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, rgba(255, 45, 107, 0.12), rgba(0, 240, 255, 0.06));
}
.boo-head__ghost { width: 28px; height: 28px; }
.boo-head__meta { display: flex; flex-direction: column; min-width: 0; }
.boo-head__meta strong {
  font-family: var(--font-display);
  font-size: 14px;
  color: #F2F3F8;
  line-height: 1.2;
}
.boo-head__meta span {
  font-family: var(--font-body);
  font-size: 11px;
  color: #9A9DB2;
}
.boo-close {
  margin-left: auto;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #C9CCDA;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.boo-close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.boo-close:focus-visible { outline: 2px solid var(--cyber-cyan); }

.boo-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.boo-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 92%; }
.boo-msg p {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  padding: 9px 12px;
  border-radius: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.boo-msg--bot p {
  background: #191926;
  color: #E4E6F0;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom-left-radius: 4px;
}
.boo-msg__avatar { width: 22px; height: 22px; flex: 0 0 auto; margin-bottom: 2px; }
.boo-msg--user { align-self: flex-end; }
.boo-msg--user p {
  background: var(--accent, #0A66C2);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.boo-input {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.boo-input input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: #EDEFF6;
  background: #191926;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
.boo-input input::placeholder { color: #7C7F94; }
.boo-input input:focus-visible { outline: 2px solid var(--cyber-cyan); outline-offset: 1px; }
.boo-input button {
  width: 42px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cyber-magenta), var(--cyber-magenta-dim));
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.boo-input button svg { width: 17px; height: 17px; }
.boo-input button:hover { filter: brightness(1.1); }
.boo-input button:focus-visible { outline: 2px solid var(--cyber-cyan); outline-offset: 2px; }

@media (max-width: 480px) {
  .boo-panel { right: 12px; left: 12px; width: auto; bottom: 84px; }
  .boo-fab { right: 14px; bottom: 14px; }
}

/* --------------------------------------------------------------------------
   Reduced motion: no reveals, no lifts, no glitch
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .scroll-reveal { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 520px) {
  .price-card--business { padding: 32px 22px; }
  .price-card--business .price-amount { font-size: 48px; }
  .price-card--free { padding: 28px 28px; }
  .lang-toggle { top: 12px; right: 12px; height: 32px; }
}