/* ═══════════════════════════════════════════════════════════════════════════
   NOVA AGENCY — DESIGN SYSTEM
   Source of truth for every page on novaagency.me
   Brand: Dubai AI marketing agency · Dark theme · Blue gradient accents
═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --nova-black: #06060f;
  --nova-black-deep: #050510;
  --deep-navy: #0D1F6E;
  --brand-blue: #1E3FB8;
  --bright-blue: #3B6FFF;
  --light-blue: #6B8FFF;
  --hover-indigo: #6366F1;
  --body-text: #F0F0F0;
  --muted-text: #A0A8C0;
  --white: #FFFFFF;
  --surface-1: rgba(255,255,255,0.04);
  --surface-2: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.08);
  --font-head: 'Clash Display', sans-serif;
  --font-head-hero: 'Clash Display', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-head-weight: 400;
  --font-head-hero-weight: 600;
  /* ─── Standardized type weights (2026-05-29) — single source of truth ───
     Used everywhere via var(...). Change here = change everywhere. */
  --fw-hero: 600;   /* homepage hero h1 only */
  --fw-h1: 500;     /* subpage h1 */
  --fw-h2: 500;     /* section headings */
  --fw-h3: 400;     /* card / step titles */
  --fw-body: 400;   /* body, paragraphs */
  --fw-ui: 600;     /* buttons, badges, tags, chips, labels */
  --fw-stat: 500;   /* stat numbers, tier names */
  --fw-price: 600;  /* prices */
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--nova-black);
  color: var(--body-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  padding-top: 72px;
}
/* Subtle blue-tinted hero depth — applied to the homepage hero only. */
#hero {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(59,111,255,0.12), transparent 60%),
    var(--nova-black);
}

/* Heading defaults — h2 = 500, h3 = 400. h1 falls under more specific rules
   below (.hero-h1 for homepage / .page-hero h1 / .service-detail-hero h1). */
h1, h2 {
  font-family: var(--font-head);
  font-weight: var(--fw-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h3, h4 {
  font-family: var(--font-head);
  font-weight: var(--fw-h3);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
/* Homepage hero h1 — boldest, largest. */
.hero-h1, h1.hero-h1 {
  font-family: var(--font-head);
  font-weight: var(--fw-hero);
  font-size: clamp(48px, 8vw, 96px);
}
/* Subpage page-hero h1 and service detail h1 — medium weight, smaller clamp. */
.page-hero h1, .service-detail-hero h1 {
  font-family: var(--font-head);
  font-weight: var(--fw-h1);
  font-size: clamp(36px, 6vw, 68px);
}

/* Pages without a hero use .page-container as the body wrapper offset */
.page-container { padding-top: 0; }

.full-section {
  padding: clamp(72px,9vw,128px) 5%;
  max-width: 1280px;
  margin: 0 auto;
}

/* ── Section pill label ── */
.section-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(59,111,255,0.1);
  border: 1px solid rgba(59,111,255,0.28);
  color: var(--light-blue);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-ui);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}

.section-heading {
  font-family: var(--font-head);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: var(--fw-h2);
  color: var(--white);
  margin-bottom: 12px;
}

.section-sub {
  font-size: clamp(15px,2vw,18px);
  color: rgba(255,255,255,0.7);
  margin-bottom: 52px;
  line-height: 1.75;
  max-width: 580px;
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bright-blue);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: var(--fw-ui);
  font-size: 14px;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,rgba(255,255,255,0.14) 0%,transparent 60%);
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: inherit;
}
.btn-primary:hover {
  box-shadow: 0 0 24px rgba(59,111,255,0.45), 0 0 48px rgba(59,111,255,0.22), 0 4px 18px rgba(59,111,255,0.28);
  transform: translateY(-2px);
}
.btn-primary:hover::after { opacity: 1; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--white);
  font-family: var(--font-body);
  font-weight: var(--fw-ui);
  font-size: 14px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease-out);
}
.btn-ghost:hover {
  border-color: rgba(99,102,241,0.6);
  background: rgba(99,102,241,0.06);
  transform: translateY(-2px);
}

/* ── Divider ── */
.gradient-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(59,111,255,0.4),transparent);
}

/* ── Fade-in ── */
.fade-in {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ── Skip link ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 8px;
  background: var(--bright-blue);
  color: var(--white);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: var(--fw-ui);
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  z-index: 200;
  transition: top 0.1s;
}
.skip-link:focus { top: 8px; }

:focus-visible { outline: 2px solid var(--bright-blue); outline-offset: 3px; border-radius: 4px; }

.service-card, .build-card, .pricing-card, .st-row { cursor: pointer; }
.pricing-grid::-webkit-scrollbar { display: none; }
.pricing-grid { -ms-overflow-style: none; scrollbar-width: none; }
.form-group select option { background: #07070f; color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fade-in { opacity: 1; transform: none; }
  #particle-canvas, .hero-orb { display: none; }
  .hero-badge,.hero-h1,.hero-sub,.hero-ctas,.hero-float-card { opacity: 1; transform: none; animation: none; }
}

/* ═══════════════════════════════════════
   NAVBAR
═══════════════════════════════════════ */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0 5%;
  transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
#navbar.scrolled {
  background: rgba(5,5,16,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo-icon {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-logo-icon svg { width: 100%; height: 100%; }
.nav-logo-text { display: flex; flex-direction: column; gap: 0; }
.nav-logo-name {
  font-family: var(--font-head);
  font-size: 20px; font-weight: 600;
  color: var(--white); letter-spacing: -0.02em; line-height: 1;
}
.nav-logo-name .dot { color: var(--bright-blue); }
.nav-logo-sub {
  font-family: var(--font-body);
  font-size: 8px; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(107,143,255,0.65);
  line-height: 1; margin-top: 3px;
}
.nav-links { display: flex; gap: 4px; list-style: none; align-items: center; }
.nav-links a {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--white); background: rgba(255,255,255,0.06); }
.nav-cta { padding: 10px 22px; font-size: 13px; }

/* Language toggle button — sits in nav, shows current alt language */
.lang-toggle {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.72);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  margin-left: 4px;
}
.lang-toggle:hover {
  color: var(--white);
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.05);
}

.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.mobile-menu {
  display: none; flex-direction: column; gap: 8px;
  padding: 16px 0 24px; border-top: 1px solid var(--border);
}
.mobile-menu.open { display: flex; }
.mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.mobile-link {
  display: block; padding: 10px 16px;
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,0.7); text-decoration: none;
  border-radius: var(--radius-sm); transition: color 0.2s, background 0.2s;
}
.mobile-link:hover { color: var(--white); background: rgba(255,255,255,0.06); }
.mobile-menu .btn-primary { margin-top: 8px; justify-content: center; }
.mobile-menu .lang-toggle { align-self: flex-start; margin: 8px 16px 0; }

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  /* Keep the language toggle reachable in the desktop bar even on tablets */
  .nav-inner > .lang-toggle { display: none; }
}

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 80px 5% 60px;
}
/* Orbs and particle canvas globally hidden per brand direction
   (no decorative animations, no orbs, no particle effects).
   Markup left in place across subpages but renders nothing. */
#particle-canvas, .hero-orb, .hero-orb-1, .hero-orb-2, .hero-orb-3 {
  display: none !important;
}

.hero-content { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(59,111,255,0.1);
  border: 1px solid rgba(59,111,255,0.32);
  color: var(--light-blue);
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  margin-bottom: 28px;
  opacity: 0;
  animation: heroUp 0.7s var(--ease-out) 0.1s forwards;
}
.badge-pulse {
  width: 7px; height: 7px;
  background: #4ade80; border-radius: 50%;
  box-shadow: 0 0 6px #4ade80;
  animation: bPulse 2s ease-in-out infinite;
}
@keyframes bPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.8); }
}

.hero-h1 {
  font-size: clamp(48px, 8vw, 96px);
  font-weight: var(--fw-hero);
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin-bottom: 24px;
  opacity: 0;
  animation: heroUp 0.8s var(--ease-out) 0.25s forwards;
}
.hero-h1 .grad {
  /* Solid color first as a fallback: if background-clip:text fails to paint
     (older Safari/Firefox states, pre-paint flash), the text stays visible
     instead of rendering transparent on the dark hero. */
  color: var(--light-blue);
  background: linear-gradient(135deg,#6B8FFF 0%,#3B6FFF 50%,#1E3FB8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  font-size: clamp(16px,2.2vw,20px);
  color: rgba(255,255,255,0.72);
  line-height: 1.75;
  margin-bottom: 40px;
  opacity: 0;
  animation: heroUp 0.8s var(--ease-out) 0.4s forwards;
}
.hero-ctas {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 56px;
  opacity: 0;
  animation: heroUp 0.8s var(--ease-out) 0.55s forwards;
}
.hero-ctas .btn-primary { padding: 15px 32px; font-size: 15px; }
.hero-ctas .btn-ghost  { padding: 14px 32px; font-size: 15px; }

@keyframes heroUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Floating stats card */
.hero-float-card {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 20px 36px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.04) inset;
  opacity: 0;
  animation: heroUp 0.8s var(--ease-out) 0.7s forwards;
}
.hero-stat { display: flex; flex-direction: column; align-items: center; padding: 0 28px; }
.hero-stat-num {
  font-family: var(--font-head);
  font-size: 28px; font-weight: var(--fw-stat);
  color: var(--white);
  letter-spacing: -0.03em; line-height: 1;
}
.hero-stat-label {
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.5px; margin-top: 5px;
  white-space: nowrap;
}
.hero-stat-div { width: 1px; height: 36px; background: rgba(255,255,255,0.1); }

@media (max-width: 600px) {
  .hero-float-card { flex-direction: column; gap: 16px; padding: 22px 28px; }
  .hero-stat { padding: 0 20px; }
  .hero-stat-div { width: 40px; height: 1px; }
}

/* ═══════════════════════════════════════
   SERVICES
═══════════════════════════════════════ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(272px,1fr));
  gap: 24px;
}
.service-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease-out), box-shadow 0.25s;
  position: relative; overflow: hidden;
  text-decoration: none;
  display: block;
  color: inherit;
}
.service-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,rgba(59,111,255,0.06) 0%,transparent 60%);
  opacity: 0; transition: opacity 0.25s; border-radius: inherit;
}
.service-card:hover {
  border-color: rgba(99,102,241,0.55);
  background: var(--surface-2);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(59,111,255,0.15);
}
.service-card:hover::before { opacity: 1; }
.service-icon {
  width: 48px; height: 48px;
  background: rgba(59,111,255,0.1);
  border: 1px solid rgba(59,111,255,0.2);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.service-icon svg { width: 24px; height: 24px; }
.service-card h3 {
  font-family: var(--font-head);
  font-size: clamp(18px, 2.5vw, 24px); font-weight: var(--fw-h3);
  color: var(--white); margin-bottom: 8px;
}
.service-card p {
  font-size: 14px;
  color: rgba(255,255,255,0.68);
  line-height: 1.65;
}

/* ═══════════════════════════════════════
   PRICING
═══════════════════════════════════════ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
@media (max-width: 1100px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 22px 22px;
  display: flex; flex-direction: column;
  position: relative;
  transition: border-color 0.25s, transform 0.25s var(--ease-out), box-shadow 0.25s;
}
.pricing-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99,102,241,0.5);
  box-shadow: 0 12px 40px rgba(59,111,255,0.14);
}
.featured-pricing {
  border-color: rgba(59,111,255,0.5);
  background: rgba(59,111,255,0.07);
  box-shadow: 0 0 40px rgba(59,111,255,0.12);
}
.featured-badge {
  position: absolute; top: -1px; right: 20px;
  background: var(--bright-blue); color: var(--white);
  font-size: 10px; font-weight: var(--fw-ui);
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 4px 12px; border-radius: 0 0 8px 8px;
}
.tier-name {
  font-family: var(--font-head);
  font-size: 12px; font-weight: var(--fw-stat);
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--light-blue); margin-bottom: 12px;
}
.tier-price {
  font-family: var(--font-head);
  font-size: 30px; font-weight: var(--fw-price);
  color: var(--white); letter-spacing: -0.03em; line-height: 1;
}
.per-mo { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.38); }
.tier-usd { display: none; }
.tier-commit { font-size: 12px; color: rgba(255,255,255,0.42); margin-bottom: 2px; }
.tier-onboard {
  font-size: 12px; color: rgba(107,143,255,0.65);
  margin-bottom: 18px; padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.tier-features {
  list-style: none; display: flex; flex-direction: column;
  gap: 9px; flex: 1; margin-bottom: 22px;
}
.tier-features li {
  font-size: 13px; color: rgba(255,255,255,0.62);
  padding-left: 18px; position: relative; line-height: 1.5;
}
.tier-features li::before {
  content: '';
  position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px;
  background: var(--bright-blue); border-radius: 50%; opacity: 0.65;
}
.tier-cta { width: 100%; text-align: center; justify-content: center; margin-top: auto; }
.scale-ctas { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.scale-ctas .tier-cta { margin-top: 0; }
.payment-note { font-size: 13px; color: rgba(255,255,255,0.38); margin-bottom: 32px; font-style: italic; }
.pricing-footnote { font-size: 13px; color: rgba(255,255,255,0.3); margin-top: 24px; font-style: italic; }

/* ═══════════════════════════════════════
   À LA CARTE
═══════════════════════════════════════ */
.service-group { margin-bottom: 28px; }
.group-heading {
  font-family: var(--font-head);
  font-size: 13px; font-weight: var(--fw-ui);
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--light-blue); margin-bottom: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.service-table {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.st-row {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 13px 20px; font-size: 14px;
  transition: background 0.2s;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.st-row:last-child { border-bottom: none; }
.st-row:hover { background: rgba(255,255,255,0.04); }
.st-row span:first-child { color: rgba(255,255,255,0.72); flex: 1; padding-right: 16px; }
.st-price { font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--light-blue); white-space: nowrap; }
.footnote-small { font-size: 12px; color: rgba(255,255,255,0.28); margin-top: 14px; font-style: italic; }

.builds-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.build-card {
  flex: 1 1 190px;
  max-width: 220px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  transition: border-color 0.25s, transform 0.25s var(--ease-out), box-shadow 0.25s;
  position: relative;
}
@media (max-width: 600px)  { .build-card { max-width: calc(50% - 6px); flex-basis: calc(50% - 6px); } }
@media (max-width: 400px)  { .build-card { max-width: 100%; flex-basis: 100%; } }
.build-card:hover {
  border-color: rgba(99,102,241,0.45);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(59,111,255,0.12);
}
.featured-build { border-color: rgba(99,102,241,0.55); background: rgba(59,111,255,0.05); }
.build-star { font-size: 11px; font-weight: var(--fw-ui); color: #fbbf24; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 8px; }
.build-name { font-family: var(--font-head); font-size: clamp(18px, 2.5vw, 24px); font-weight: var(--fw-h3); color: var(--white); margin-bottom: 6px; line-height: 1.4; }
.build-desc { font-size: 12px; color: rgba(255,255,255,0.42); margin-bottom: 12px; line-height: 1.55; }
.build-price { font-family: var(--font-head); font-size: 18px; font-weight: var(--fw-price); color: var(--white); margin-bottom: 4px; letter-spacing: -0.02em; }
.build-maint { font-size: 11px; color: rgba(255,255,255,0.32); }

/* ═══════════════════════════════════════
   QUIZ
═══════════════════════════════════════ */
.quiz-container {
  max-width: 620px; margin: 0 auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.quiz-progress {
  width: 100%; height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-pill);
  margin-bottom: 20px; overflow: hidden;
}
.quiz-progress-bar {
  height: 100%;
  background: linear-gradient(90deg,var(--brand-blue),var(--light-blue));
  border-radius: var(--radius-pill);
  transition: width 0.4s var(--ease-out);
  width: 0%;
}
.quiz-step-label {
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.38);
  letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 24px;
}
.quiz-step { display: none; }
.quiz-step.active { display: block; }
.quiz-question {
  font-family: var(--font-head);
  font-size: 22px; font-weight: 400;
  color: var(--white); margin-bottom: 24px;
}
.quiz-options { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.quiz-opt {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-pill);
  color: rgba(255,255,255,0.72);
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  padding: 13px 18px; cursor: pointer;
  transition: all 0.2s var(--ease-out); text-align: center;
}
.quiz-opt:hover {
  border-color: var(--bright-blue);
  background: rgba(59,111,255,0.12);
  color: var(--white);
  transform: translateY(-2px);
}
.result-tier-name { font-family: var(--font-head); font-size: 36px; font-weight: var(--fw-stat); color: var(--white); margin-bottom: 4px; letter-spacing: -0.03em; }
.result-price { font-family: var(--font-head); font-size: 24px; font-weight: var(--fw-price); color: var(--light-blue); margin-bottom: 16px; }
.result-why { font-size: 15px; color: rgba(255,255,255,0.58); line-height: 1.75; margin-bottom: 24px; }
.result-services {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 20px; margin-bottom: 24px;
}
.result-services h4 {
  font-family: var(--font-head); font-size: 12px; font-weight: var(--fw-ui);
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--light-blue); margin-bottom: 12px;
}
.result-services ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.result-services li { font-size: 14px; color: rgba(255,255,255,0.68); padding-left: 18px; position: relative; }
.result-services li::before { content: '→'; position: absolute; left: 0; color: var(--bright-blue); font-size: 12px; }
#result-wa-btn { width: 100%; justify-content: center; }
#quiz-restart { width: 100%; text-align: center; margin-top: 10px; justify-content: center; }
@media (max-width: 500px) { .quiz-container { padding: 24px 18px; } .quiz-options { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════
   WHY NOVA
═══════════════════════════════════════ */
.why-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.why-card { flex: 1 1 260px; max-width: 380px; }
.why-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  transition: border-color 0.25s, transform 0.25s var(--ease-out), box-shadow 0.25s;
}
.why-card:hover {
  border-color: rgba(99,102,241,0.45);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(59,111,255,0.12);
}
.why-icon {
  width: 52px; height: 52px;
  background: rgba(59,111,255,0.1);
  border: 1px solid rgba(59,111,255,0.2);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.why-icon svg { width: 28px; height: 28px; }
.why-card h3 { font-family: var(--font-head); font-size: clamp(18px, 2.5vw, 24px); font-weight: var(--fw-h3); color: var(--white); margin-bottom: 10px; }
.why-card p { font-size: 14px; color: rgba(255,255,255,0.68); line-height: 1.7; }

/* ═══════════════════════════════════════
   CONTACT
═══════════════════════════════════════ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-form-wrap {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.form-group label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.72); letter-spacing: 0.3px; }
.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--font-body); font-size: 15px;
  padding: 12px 16px;
  transition: border-color 0.2s, background 0.2s;
  outline: none; -webkit-appearance: none; appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,0.2); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--bright-blue);
  background: rgba(59,111,255,0.04);
}
.form-group select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B8FFF' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.form-group textarea { resize: vertical; min-height: 100px; }
.contact-form-wrap .btn-primary { width: 100%; justify-content: center; padding: 14px; font-size: 15px; }
.form-success-msg { font-size: 17px; color: var(--light-blue); text-align: center; padding: 40px 20px; line-height: 1.7; border: 1px solid rgba(59,111,255,0.3); border-radius: var(--radius-md); }
.contact-info { display: flex; flex-direction: column; gap: 24px; padding-top: 8px; }
.contact-wa { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; font-size: 15px; }
.contact-link { font-size: 15px; color: var(--light-blue); text-decoration: none; font-weight: 600; transition: color 0.2s; }
.contact-link:hover { color: var(--white); }
.contact-socials { display: flex; flex-direction: column; gap: 14px; }
.social-link { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.68); text-decoration: none; font-weight: 500; transition: color 0.2s; }
.social-link:hover { color: var(--white); }
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════
   FOOTER (legacy single-row — kept for index)
═══════════════════════════════════════ */
#footer { border-top: 1px solid var(--border); padding: 40px 5% 0; }
.footer-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
  gap: 24px; padding-bottom: 32px;
}
.footer-left { display: flex; align-items: center; gap: 12px; }
.footer-brand { font-size: 13px; color: rgba(255,255,255,0.38); font-weight: 500; }
.footer-nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-nav a { font-size: 13px; color: rgba(255,255,255,0.38); text-decoration: none; transition: color 0.2s; }
.footer-nav a:hover { color: var(--white); }
.footer-right { display: flex; align-items: center; gap: 16px; }
.footer-social { color: rgba(255,255,255,0.32); transition: color 0.2s; display: flex; }
.footer-social:hover { color: var(--white); }
.footer-email { font-size: 12px; color: rgba(107,143,255,0.55); text-decoration: none; transition: color 0.2s; }
.footer-email:hover { color: var(--light-blue); }
.footer-bottom { border-top: 1px solid var(--border); padding: 16px 0; max-width: 1280px; margin: 0 auto; }
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.18); }
@media (max-width: 768px) { .footer-inner { flex-direction: column; align-items: flex-start; } }

/* ═══════════════════════════════════════
   FOOTER — 4-column layout for inner pages
═══════════════════════════════════════ */
.site-footer {
  border-top: 1px solid var(--border);
  background: rgba(5,5,16,0.6);
  padding: 64px 5% 0;
  margin-top: clamp(48px,6vw,80px);
}
.site-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 48px;
}
.footer-col h4 {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: var(--fw-ui);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--light-blue);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a,
.footer-col a {
  font-size: 14px;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col ul a:hover,
.footer-col a:hover { color: var(--white); }
.footer-brand-block { display: flex; flex-direction: column; gap: 14px; }
.footer-brand-block .nav-logo { gap: 10px; }
.footer-tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  max-width: 280px;
}
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.72);
}
.footer-contact-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--light-blue);
}
.site-footer-bottom {
  border-top: 1px solid var(--border);
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  flex-wrap: wrap;
  gap: 12px;
}
.site-footer-bottom p,
.site-footer-bottom span {
  font-size: 12px;
  color: rgba(255,255,255,0.32);
}
@media (max-width: 900px) {
  .site-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .site-footer-inner { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   FLOATING WHATSAPP BUTTON — REMOVED 2026-05-28
   Replaced by future Cloudflare Workers AI chat widget.
═══════════════════════════════════════ */

/* ═══════════════════════════════════════
   COOKIE BANNER (UAE PDPL)
═══════════════════════════════════════ */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  max-width: 420px;
  background: rgba(10,10,24,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  z-index: 90;
  display: none;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.cookie-banner.visible { display: flex; }
.cookie-banner p {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin: 0;
}
.cookie-banner a { color: var(--light-blue); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-banner .btn-primary,
.cookie-banner .btn-ghost {
  padding: 8px 18px;
  font-size: 13px;
}
@media (max-width: 560px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* ═══════════════════════════════════════
   SKELETON LOADERS
═══════════════════════════════════════ */
.skeleton,
.skeleton-card,
.skeleton-text {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.skeleton-card {
  height: 220px;
  border-radius: var(--radius-md);
}
.skeleton-text {
  height: 14px;
  width: 100%;
  margin-bottom: 8px;
}
.skeleton-text.short { width: 50%; }
.skeleton-text.medium { width: 75%; }
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Element with .skeleton-on-load hides real content until JS removes the class on window.load */
.skeleton-on-load > * { visibility: hidden; }
.skeleton-on-load {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-md);
  min-height: 120px;
}

/* ═══════════════════════════════════════
   ARABIC / RTL SUPPORT
═══════════════════════════════════════ */
html[dir="rtl"] body { font-family: var(--font-body); }
html[dir="rtl"] .nav-links,
html[dir="rtl"] .footer-inner,
html[dir="rtl"] .site-footer-inner { direction: rtl; }
html[dir="rtl"] .section-sub,
html[dir="rtl"] .footer-tagline { text-align: right; }
html[dir="rtl"] .cookie-banner { left: auto; right: 20px; }
@media (max-width: 560px) {
  html[dir="rtl"] .cookie-banner { right: 12px; left: 12px; }
}
html[dir="rtl"] .tier-features li,
html[dir="rtl"] .result-services li {
  padding-left: 0;
  padding-right: 18px;
}
html[dir="rtl"] .tier-features li::before,
html[dir="rtl"] .result-services li::before {
  left: auto;
  right: 0;
}
html[dir="rtl"] .skip-link { left: auto; right: 8px; }

/* ═══════════════════════════════════════
   404 PAGE
═══════════════════════════════════════ */
.error-404 {
  min-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 5%;
  position: relative;
  overflow: hidden;
}
.error-404 .hero-orb-1 { top: -200px; }
.error-404-num {
  font-family: var(--font-head);
  font-size: clamp(120px, 22vw, 220px);
  font-weight: var(--fw-stat);
  letter-spacing: -0.05em;
  line-height: 1;
  background: linear-gradient(135deg, #6B8FFF 0%, #3B6FFF 50%, #1E3FB8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}
.error-404-title {
  font-size: clamp(24px,3.5vw,36px);
  font-weight: var(--fw-h2);
  color: var(--white);
  margin-bottom: 12px;
}
.error-404-sub {
  font-size: clamp(15px,2vw,18px);
  color: rgba(255,255,255,0.72);
  max-width: 520px;
  margin-bottom: 32px;
  line-height: 1.7;
}
.error-404-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* 404 — extended elements used by the dedicated 404 page */
.error-404-numeral {
  font-family: 'Clash Display', var(--font-head);
  font-size: clamp(8rem, 22vw, 18rem);
  font-weight: var(--fw-stat);
  line-height: 1;
  margin: 0 0 1.5rem;
  letter-spacing: -0.04em;
  display: inline-block;
}
/* Ensure the .grad mix-in works on a block-level numeral (div / h1) */
.error-404-numeral.grad {
  background: linear-gradient(135deg, #6B8FFF 0%, #3B6FFF 50%, #1E3FB8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.error-404-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2rem 0 3rem;
}
.error-404-popular {
  max-width: 480px;
  margin: 0 auto;
  padding: 2rem;
  border: 1px solid rgba(107,143,255,0.2);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  text-align: left;
}
.error-404-popular h3 {
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--light-blue);
  margin-bottom: 14px;
}
.error-404-popular-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
}
.error-404-popular-list a {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 0.2s;
  display: block;
  padding: 4px 0;
}
.error-404-popular-list a:hover { color: var(--white); }
@media (max-width: 640px) {
  .error-404-popular-list { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   FLOATING LANGUAGE TOGGLE (AR / EN)
   Fixed pill at bottom-left, opens popup above
═══════════════════════════════════════ */
.lang-fab {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 90;
  /* Fixed width so the button doesn't grow when the label switches
     from "EN" (short) to "عربية" (wider). Without this the right edge
     moves on every toggle and reads like the button is "swapping sides". */
  width: 92px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0a0a18;
  border: 1px solid rgba(107,143,255,0.3);
  color: #ffffff;
  padding: 0 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.lang-fab:hover {
  border-color: #6B8FFF;
  transform: scale(1.03);
}
.lang-fab svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: rgba(107,143,255,0.9);
}
.lang-fab-popup {
  position: fixed;
  bottom: 76px;
  left: 24px;
  z-index: 91;
  width: 180px;
  background: #0a0a18;
  border: 1px solid rgba(107,143,255,0.3);
  border-radius: 14px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
}
.lang-fab-popup.is-open { display: flex; }
.lang-fab-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.8);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.lang-fab-option:hover {
  background: rgba(107,143,255,0.1);
  color: var(--white);
}
.lang-fab-option.active {
  color: #6B8FFF;
  background: rgba(107,143,255,0.08);
}
.lang-fab-option .check {
  width: 14px;
  height: 14px;
  color: #6B8FFF;
  opacity: 0;
}
.lang-fab-option.active .check { opacity: 1; }

/* Language toggle stays bottom-LEFT at every viewport regardless of dir.
   Chat FAB stays bottom-RIGHT. The two never share a corner. No RTL flip. */

/* ═══════════════════════════════════════
   SERVICE DETAIL PAGES
═══════════════════════════════════════ */
.service-detail-hero {
  position: relative;
  padding: clamp(80px,10vw,140px) 5% clamp(48px,6vw,80px);
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
}
.service-detail-hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(59,111,255,0.18) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.service-detail-hero > * { position: relative; z-index: 1; }
.service-detail-hero h1 {
  font-size: clamp(36px,6vw,64px);
  font-weight: 500;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  max-width: 820px;
}
.service-detail-hero .lede {
  font-size: clamp(16px,2vw,20px);
  color: rgba(255,255,255,0.6);
  max-width: 720px;
  line-height: 1.75;
  margin-bottom: 32px;
}
.service-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 20px 24px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-top: 24px;
}
.service-detail-meta > div { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.service-detail-meta dt {
  font-size: 10px;
  font-weight: var(--fw-ui);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(107,143,255,0.7);
}
.service-detail-meta dd {
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
}

.how-it-works-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  counter-reset: step;
}
.how-it-works-steps .step {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 22px 22px;
  counter-increment: step;
  transition: border-color 0.25s, transform 0.25s var(--ease-out);
}
.how-it-works-steps .step:hover { border-color: rgba(99,102,241,0.5); transform: translateY(-3px); }
.how-it-works-steps .step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: var(--fw-stat);
  color: var(--bright-blue);
  display: block;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.how-it-works-steps .step h3 {
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: var(--fw-h3);
  color: var(--white);
  margin-bottom: 8px;
}
.how-it-works-steps .step p {
  font-size: 14px;
  color: rgba(255,255,255,0.72);
  line-height: 1.65;
}

.who-its-for {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.who-its-for .who-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 20px;
}
.who-its-for .who-card h3 {
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: var(--fw-h3);
  color: var(--white);
  margin-bottom: 8px;
}
.who-its-for .who-card p {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
}

.examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.example-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.25s, transform 0.25s var(--ease-out);
}
.example-card:hover { border-color: rgba(99,102,241,0.45); transform: translateY(-3px); }
.example-card .ex-label {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: var(--fw-ui);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--light-blue);
}
.example-card h4 {
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: var(--fw-h3);
  color: var(--white);
}
.example-card p {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.65;
}

/* ═══════════════════════════════════════
   FAQ ACCORDION
═══════════════════════════════════════ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 820px;
}
.faq-item {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.25s, background 0.25s;
}
.faq-item.open {
  border-color: rgba(99,102,241,0.5);
  background: var(--surface-2);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: transparent;
  border: none;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s;
}
.faq-question:hover { color: var(--light-blue); }
.faq-question::after {
  content: '';
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--light-blue);
  border-bottom: 2px solid var(--light-blue);
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease-out);
}
.faq-item.open .faq-question::after { transform: rotate(-135deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out);
}
.faq-item.open .faq-answer { max-height: 600px; }
.faq-answer-inner {
  padding: 0 22px 20px;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.75;
}
html[dir="rtl"] .faq-question { text-align: right; }

/* ═══════════════════════════════════════
   COMPARISON TABLE
═══════════════════════════════════════ */
.compare-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-1);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}
.compare-table.compare-table-3col {
  min-width: 820px;
}
.compare-table th,
.compare-table td {
  padding: 14px 18px;
  font-size: 14px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.compare-table thead th {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: var(--fw-ui);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.02);
}
.compare-table tbody td:first-child {
  color: rgba(255,255,255,0.78);
  font-weight: 500;
}
.compare-table tbody td {
  color: rgba(255,255,255,0.72);
}
.compare-table .nova-col {
  background: rgba(59,111,255,0.08);
  color: var(--white);
  font-weight: 600;
  border-left: 1px solid rgba(59,111,255,0.3);
  border-right: 1px solid rgba(59,111,255,0.3);
}
.compare-table thead .nova-col {
  background: rgba(59,111,255,0.14);
  color: var(--light-blue);
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-check { color: #4ade80; font-weight: 700; }
.compare-x { color: rgba(255,255,255,0.25); }

html[dir="rtl"] .compare-table th,
html[dir="rtl"] .compare-table td { text-align: right; }

/* ═══════════════════════════════════════
   HOW IT WORKS TIMELINE
═══════════════════════════════════════ */
.how-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  margin-top: 20px;
}
.how-timeline::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(59,111,255,0.2),
    rgba(59,111,255,0.6),
    rgba(59,111,255,0.6),
    rgba(59,111,255,0.2));
  z-index: 0;
}
.how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
  position: relative;
  z-index: 1;
}
.how-step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--nova-black);
  border: 2px solid var(--bright-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: var(--fw-stat);
  color: var(--light-blue);
  margin-bottom: 18px;
  box-shadow: 0 0 24px rgba(59,111,255,0.35);
}
.how-step h3 {
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: var(--fw-h3);
  color: var(--white);
  margin-bottom: 8px;
}
.how-step p {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.65;
  max-width: 220px;
}
@media (max-width: 800px) {
  .how-timeline { grid-template-columns: 1fr; gap: 32px; }
  .how-timeline::before {
    top: 0;
    bottom: 0;
    left: 27px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg,
      rgba(59,111,255,0.2),
      rgba(59,111,255,0.6),
      rgba(59,111,255,0.2));
  }
  .how-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 18px;
    padding: 0;
  }
  .how-step-num { margin-bottom: 0; flex-shrink: 0; }
  .how-step p { max-width: none; }
}
html[dir="rtl"] .how-step { text-align: right; }
@media (max-width: 800px) {
  html[dir="rtl"] .how-step { flex-direction: row-reverse; }
  html[dir="rtl"] .how-timeline::before { left: auto; right: 27px; }
}

/* ═══════════════════════════════════════
   GENERIC PAGE HERO (for non-home pages)
═══════════════════════════════════════ */
.page-hero {
  position: relative;
  padding: clamp(80px,10vw,140px) 5% clamp(48px,6vw,80px);
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}
.page-hero h1 {
  font-size: clamp(36px,6vw,68px);
  font-weight: 500;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.page-hero h1 .grad {
  background: linear-gradient(135deg,#6B8FFF 0%,#3B6FFF 50%,#1E3FB8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.page-hero .lede {
  font-size: clamp(16px,2vw,20px);
  color: rgba(255,255,255,0.6);
  max-width: 680px;
  margin: 0 auto 32px;
  line-height: 1.75;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-05-28 — SITE-WIDE ALIGNMENT NORMALISATION
   Pick one alignment (center) and apply it everywhere so headings + subheads +
   CTA buttons stack consistently. Fixes orphan-centered CTAs sitting under
   left-aligned copy that the brief flagged.
═══════════════════════════════════════════════════════════════════════════ */
.full-section { text-align: center; }
.full-section > .section-pill,
.full-section > .section-heading,
.full-section > .section-sub { display: block; margin-left: auto; margin-right: auto; }
.full-section > .section-sub { max-width: 680px; }
.full-section > .hero-ctas,
.full-section > div[style*="text-align:center"],
.full-section > .builds-grid,
.full-section > .pricing-grid,
.full-section > .services-grid,
.full-section > .teaser-grid,
.full-section > .why-grid,
.full-section > .work-grid,
.full-section > .contact-row,
.full-section > .tier-grid,
.full-section > .how-line { text-align: initial; }
/* Inside service / build / pricing cards we keep left-alignment for legibility. */
.service-card, .build-card, .pricing-card, .why-card, .teaser-card, .work-card,
.contact-card { text-align: left; }
/* Service-card description blocks are now 2-3 sentences — give them breathing room. */
.service-card p { line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════════════════
   2026-05-28 — iPhone / mobile responsive (max-width: 768px)
   Pass 3 rewrite: target = 390px (iPhone 15). Also verified at 360/414.
   Covers: nav, hero, sections, grids, tiers, CTAs, language pill, footer.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Body type baseline — 15.5px feels right on iPhone 15. */
  body { font-size: 15.5px; line-height: 1.6; }

  /* Horizontal page padding: 20px (5% at 390px = 19.5, lock to 20). */
  .full-section { padding: clamp(48px,10vw,72px) 20px; }
  .page-hero    { padding: clamp(64px,12vw,88px) 20px clamp(32px,7vw,52px); }

  /* Headings / subs: scale down floor sizes so they don't crowd. */
  .section-heading { font-size: clamp(24px,7vw,32px); line-height: 1.18; }
  .section-sub     { font-size: 14.5px; margin-bottom: 32px; line-height: 1.65; }
  .page-hero h1    { font-size: clamp(30px,8.5vw,40px); line-height: 1.1; }
  .page-hero .lede { font-size: 14.5px; line-height: 1.65; }

  /* Hero copy: 88px h1 is too big — clamp lower, tighten spacing. */
  .hero-h1   { font-size: clamp(34px,9vw,48px); margin-bottom: 16px; line-height: 1.08; }
  .hero-sub  { font-size: 15px; margin-bottom: 26px; line-height: 1.6; padding: 0 4px; }
  .hero-ctas { gap: 10px; margin-bottom: 32px; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-ghost { width: 100%; max-width: 300px; justify-content: center; padding: 13px 24px; font-size: 14.5px; }

  /* Hero badge / pill row: keep compact, inline-flex never block. */
  .hero-badge { font-size: 11px; padding: 6px 14px; }
  .stat-pill-row { gap: 8px; margin: 22px 0 8px; }
  .stat-pill { font-size: 12px; padding: 7px 12px; }

  /* Generic buttons everywhere: legible tap target, never full-bleed unless explicit. */
  .btn-primary, .btn-ghost { padding: 12px 22px; font-size: 14px; min-height: 44px; }

  /* Navbar: tighter padding, condensed logo, hamburger triggers menu. */
  #navbar       { padding: 0 20px; }
  .nav-inner    { padding: 10px 0; height: 60px; }
  .nav-logo-sub { display: none; }
  .nav-logo-name { font-size: 18px; }
  body          { padding-top: 60px; }

  /* Mobile menu: spacious tap targets, full-width links. */
  .mobile-menu       { padding: 14px 20px 22px; }
  .mobile-link       { font-size: 16px; padding: 12px 16px; min-height: 44px; }
  .mobile-menu .btn-primary { width: 100%; justify-content: center; padding: 14px; min-height: 48px; }

  /* Grids collapse to single column. */
  .services-grid { grid-template-columns: 1fr; gap: 14px; }
  .teaser-grid   { grid-template-columns: 1fr; gap: 14px; }
  .tier-grid     { grid-template-columns: 1fr; }
  .builds-grid   { gap: 12px; }
  .builds-grid a { max-width: 100%; flex: 1 1 100%; }
  .work-grid, .contact-row { grid-template-columns: 1fr; }

  /* Service & teaser card body type and padding. */
  .service-card  { padding: 22px 20px; }
  .service-card h3 { font-size: 17px; }
  .service-card p  { font-size: 14.5px; line-height: 1.6; }
  .teaser-card   { padding: 22px 20px; }
  .teaser-card h3 { font-size: 18px; }

  /* WHY NOVA cards. */
  .why-grid  { grid-template-columns: 1fr; gap: 14px; }
  .why-card  { padding: 22px 20px; }
  .why-card h3 { font-size: 17px; }
  .why-card p  { font-size: 14.5px; line-height: 1.65; }

  /* Pricing cards: full-width single column with breathing room. */
  .pricing-grid { grid-template-columns: 1fr; gap: 16px; }
  .pricing-card { padding: 24px 20px 20px; }
  .pricing-card .tier-blurb,
  .pricing-card .tier-fit,
  .pricing-card .tier-delivers { font-size: 13.5px; line-height: 1.65; }
  .tier-cta { width: 100%; }
  .pay-toggle { width: 100%; max-width: 320px; }
  .pay-toggle button { flex: 1; padding: 10px 14px; font-size: 12.5px; }

  /* About / How / Framework stacks. */
  .about-grid       { grid-template-columns: 1fr; gap: 28px; }
  .about-stats      { grid-template-columns: 1fr 1fr; gap: 12px; }
  .about-stat       { padding: 16px; }
  .about-stat-num   { font-size: 30px; }
  .about-copy p     { font-size: 15px; line-height: 1.7; }
  .how-line         { grid-template-columns: 1fr; gap: 28px; }
  .how-line::before { display: none; }
  .how-node p       { max-width: none; }
  .framework-grid   { grid-template-columns: 1fr; gap: 16px; }
  .framework-card   { padding: 24px 20px; }
  .framework-title  { font-size: 19px; }
  .framework-body   { font-size: 14.5px; line-height: 1.7; }
  .team-grid        { grid-template-columns: 1fr; gap: 16px; }
  .team-card        { padding: 24px 20px; }
  .team-name        { font-size: 20px; }
  .team-bio         { font-size: 14.5px; line-height: 1.65; }
  .stats-row        { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-block       { padding: 18px 14px; }

  /* Contact page. */
  .contact-grid     { grid-template-columns: 1fr; gap: 24px; }
  .contact-methods  { grid-template-columns: 1fr; gap: 14px; }
  .contact-form-wrap, .contact-info-col { padding: 24px 20px; }
  .map-block        { padding: 40px 20px; }
  .map-title        { font-size: 19px; }

  /* Comparison table: horizontal scroll instead of squashing. */
  .compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-table      { min-width: 640px; font-size: 13px; }

  /* Footer four-column → single column on mobile. */
  .site-footer        { padding: 48px 20px 0; }
  .site-footer-inner  { grid-template-columns: 1fr; gap: 28px; padding: 0; }

  /* Service-detail pages (services/*.html). */
  .service-detail-hero { padding: clamp(60px,12vw,90px) 20px clamp(32px,7vw,48px); }
  .service-detail-hero h1 { font-size: clamp(28px,8vw,38px); }
  .service-detail-hero .lede { font-size: 14.5px; line-height: 1.65; }
  .service-detail-meta { gap: 14px; padding: 16px 18px; }
  .service-detail-meta > div { min-width: 130px; }
  .service-detail-meta dd { font-size: 14.5px; }
  .how-it-works-steps { grid-template-columns: 1fr; gap: 12px; }
  .how-it-works-steps .step { padding: 22px 20px 20px; }
  .how-it-works-steps .step::before { font-size: 30px; }
  .who-its-for, .examples-grid { grid-template-columns: 1fr; gap: 12px; }
  .who-its-for .who-card, .example-card { padding: 20px 18px; }

  /* Why-page body content (why/*.html). */
  .why-body p { font-size: 15px; line-height: 1.7; }

  /* FAQ items — wider tap targets. */
  .faq-question { font-size: 15px; padding: 16px 18px; min-height: 44px; }
  .faq-answer-inner { font-size: 14.5px; padding: 0 18px 18px; line-height: 1.7; }

  /* ── LANGUAGE FAB ─────────────────────────────────────────────
     LTR mobile: stays bottom-LEFT so it does not collide with the
     chat FAB (which lives bottom-right at the same Y). Earlier passes
     flipped this to `right: 16px`, which stacked both FABs on top of
     each other on iPhone. Width is constrained (`width: auto; max-width`)
     so explicit `left + right` is no longer needed to prevent the
     full-width-stretch bug. */
  .lang-fab {
    left: 16px;
    right: auto;
    bottom: 16px;
    padding: 0 12px;
    font-size: 13px;
    /* Locked fixed width on mobile too — same reason as desktop. */
    width: 88px;
    height: 44px;
    justify-content: center;
  }
  .lang-fab svg { width: 14px; height: 14px; }
  .lang-fab-popup {
    left: 16px;
    right: auto;
    bottom: 70px;
    width: 180px;
    max-width: calc(100vw - 32px);
  }
  /* Hero counter (if it ever renders): keep small. */
  .hero-counter .stat-num { font-size: clamp(48px,12vw,72px); }

  /* Quiz: single column. */
  .quiz-options    { grid-template-columns: 1fr; }
  .quiz-container  { padding: 24px 18px; }
  .quiz-question   { font-size: 19px; }

  /* Hero orbs: tone down so they don't dominate small viewport. */
  .hero-orb-1 { width: 320px; height: 320px; top: -80px; left: -100px; }
  .hero-orb-2 { width: 300px; height: 300px; }
  .hero-orb-3 { display: none; }

  /* Section pill labels stay inline, not full-width. */
  .section-pill, .hero-badge, .tier-badge, .nova-col-badge,
  .work-tag, .teaser-count, .build-star,
  .stat-pill { width: auto; max-width: max-content; }
}

/* Extra tight breakpoint for the smallest phones (iPhone SE / mini ≈ 375px). */
@media (max-width: 420px) {
  .hero-h1         { font-size: 32px; }
  .section-heading { font-size: 23px; }
  .page-hero h1    { font-size: 28px; }
  .nav-logo-name   { font-size: 17px; }
  .pricing-card    { padding: 20px 16px; }
  .service-card    { padding: 18px 16px; }
  .why-card        { padding: 20px 16px; }
  .stat-pill       { font-size: 11.5px; padding: 6px 11px; }
  .lang-fab        { padding: 0 10px; font-size: 12.5px; width: 80px; height: 40px; }
  .full-section    { padding: clamp(44px,9vw,64px) 18px; }
  .page-hero       { padding: clamp(56px,10vw,76px) 18px clamp(28px,6vw,44px); }
}

/* RTL flow fixes for Arabic mode. */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .why-card,
html[dir="rtl"] .service-card,
html[dir="rtl"] .teaser-card,
html[dir="rtl"] .pricing-card,
html[dir="rtl"] .tier-card,
html[dir="rtl"] .contact-card,
html[dir="rtl"] .framework-card,
html[dir="rtl"] .team-card,
html[dir="rtl"] .about-stat { text-align: right; }
html[dir="rtl"] .why-card-more { flex-direction: row-reverse; }
html[dir="rtl"] .tier-features li { padding-left: 0; padding-right: 18px; }
html[dir="rtl"] .tier-features li::before { left: auto; right: 0; }
html[dir="rtl"] .result-services li { padding-left: 0; padding-right: 18px; }
html[dir="rtl"] .result-services li::before { left: auto; right: 0; content: '←'; }
html[dir="rtl"] .st-row span:first-child { padding-right: 0; padding-left: 16px; }
html[dir="rtl"] .form-group select { padding-right: 16px; padding-left: 40px; background-position: left 14px center; }
html[dir="rtl"] .nav-links { flex-direction: row-reverse; }

/* ═══════════════════════════════════════════════════════════════════════
   NOVA CHAT WIDGET
   Floating button (bottom-right) + slide-out panel, glassmorphism.
   Stacks 12px above the lang FAB. Llama 3.1 streaming. Bilingual.
═══════════════════════════════════════════════════════════════════════ */
.nova-chat-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 92;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  background: #3B6FFF;
  color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(59,111,255,0.35), 0 0 0 1px rgba(255,255,255,0.04) inset;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.nova-chat-fab:hover {
  background: #6366F1;
  box-shadow: 0 10px 32px rgba(99,102,241,0.55), 0 0 0 1px rgba(255,255,255,0.06) inset;
  transform: translateY(-1px);
}
.nova-chat-fab:focus-visible {
  outline: 2px solid #6366F1;
  outline-offset: 3px;
}
.nova-chat-fab svg { width: 24px; height: 24px; }

.nova-chat-panel {
  position: fixed;
  bottom: 96px;
  right: 24px;
  z-index: 93;
  width: 360px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: rgba(10,10,24,0.88);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  font-family: var(--font-body, 'Inter', sans-serif);
  color: #F0F0F0;
  overflow: hidden;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.nova-chat-panel.is-open { transform: translateY(0); opacity: 1; }
.nova-chat-panel[hidden] { display: none; }

.nova-chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.nova-chat-title {
  font-family: var(--font-head, 'Clash Display', sans-serif);
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  color: #fff;
}
.nova-chat-close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: inline-flex;
  transition: background 0.15s, color 0.15s;
}
.nova-chat-close:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nova-chat-close svg { width: 18px; height: 18px; }

.nova-chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.nova-chat-messages::-webkit-scrollbar { width: 6px; }
.nova-chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

.nova-chat-bubble {
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.nova-chat-bubble--user {
  align-self: flex-end;
  background: #3B6FFF;
  color: #fff;
  border-bottom-right-radius: 6px;
}
.nova-chat-bubble--assistant {
  align-self: flex-start;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: #F0F0F0;
  border-bottom-left-radius: 6px;
}
.nova-chat-bubble--ephemeral { opacity: 0.85; font-style: italic; }
.nova-chat-bubble--streaming::after {
  content: '▍';
  display: inline-block;
  margin-left: 2px;
  animation: nova-chat-blink 1s steps(2) infinite;
  color: rgba(255,255,255,0.6);
}
@keyframes nova-chat-blink { 50% { opacity: 0; } }
.nova-chat-link { color: #6B8FFF; text-decoration: underline; }

.nova-chat-input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.nova-chat-input textarea {
  flex: 1 1 auto;
  resize: none;
  max-height: 120px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #F0F0F0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.nova-chat-input textarea:focus { border-color: #3B6FFF; background: rgba(255,255,255,0.06); }
.nova-chat-input textarea::placeholder { color: rgba(255,255,255,0.4); }

.nova-chat-send {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: none;
  background: #3B6FFF;
  color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.15s;
}
.nova-chat-send:hover { background: #6366F1; }
.nova-chat-send:active { transform: scale(0.95); }
.nova-chat-send svg { width: 18px; height: 18px; }

/* RTL — when panel has dir="rtl", flip bubble corners */
.nova-chat-panel[dir="rtl"] .nova-chat-bubble--user {
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 6px;
}
.nova-chat-panel[dir="rtl"] .nova-chat-bubble--assistant {
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 6px;
}

/* Mobile — chat and lang FAB sit at the same Y on opposite sides; panel slides to bottom sheet */
@media (max-width: 768px) {
  .nova-chat-fab {
    bottom: 16px;
    right: 16px;
    width: 52px; height: 52px;
  }
  .nova-chat-fab svg { width: 22px; height: 22px; }
  .nova-chat-panel {
    inset: auto 0 0 0;
    width: 100%;
    max-height: 80vh;
    border-radius: 16px 16px 0 0;
    bottom: 0; right: 0;
  }
}

/* Lang FAB always bottom-left, Chat FAB always bottom-right, regardless of
   dir. Both have explicit left/right values in their default rules so no
   RTL overrides are needed. The bottom-sheet chat panel on mobile is full
   width via inset, so it inherits naturally in either direction. */

/* Reduced motion — disable slide, fade only */
@media (prefers-reduced-motion: reduce) {
  .nova-chat-panel { transition: opacity 0.15s ease; transform: none; }
  .nova-chat-panel.is-open { transform: none; }
  .nova-chat-bubble--streaming::after { animation: none; }
}