/* ════════════════════════════════════════════════════════════
   ZENSMAN — Complete Stylesheet
   Brand: #542DBB purple · #5FBE97 teal · #91FCB2 accent
   Dark:  #08191B bg    · #180D3C deep  · #F2F2F2 light
   Fonts: Manrope (EN)  · Cairo (AR)
════════════════════════════════════════════════════════════ */

:root {
  --purple:      #542DBB;
  --teal:        #5FBE97;
  --accent:      #91FCB2;
  --bg:          #08191B;
  --deep:        #180D3C;
  --light:       #F2F2F2;
  --muted:       rgba(242,242,242,0.50);
  --muted-soft:  rgba(242,242,242,0.35);
  --card-bg:     rgba(24,13,60,0.72);
  --card-border: rgba(84,45,187,0.36);
  --font-en:     'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ar:     'Cairo', -apple-system, sans-serif;
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std:    cubic-bezier(0.4, 0, 0.2, 1);
  --nav-h:       72px;
  --max-w:       1180px;
  --section-py:  110px;
  --radius:      18px;
  --radius-sm:   10px;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { width: 100%; min-height: 100%; }

body {
  font-family: var(--font-en);
  background: var(--bg);
  color: var(--light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Arabic font override */
[lang="ar"] body,
[dir="rtl"] body,
[dir="rtl"] { font-family: var(--font-ar); }

a  { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; color: inherit; }
img { display: block; max-width: 100%; }


/* ════════════════════════════════════════════════════════════
   ── SCROLL REVEAL SYSTEM ──────────────────────────────────
════════════════════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(5px);
  transition:
    opacity  0.85s var(--ease),
    transform 0.85s var(--ease),
    filter   0.85s var(--ease);
  transition-delay: calc(var(--i, 0) * 120ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Word-split heading animation */
[data-split] .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity  0.65s var(--ease),
    transform 0.65s var(--ease),
    filter   0.65s var(--ease);
  transition-delay: calc(var(--wi, 0) * 0.07s + 0.05s);
}
[data-split].is-visible .word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Section intro triggers both data-reveal and data-split */
.section-intro[data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
}


/* ════════════════════════════════════════════════════════════
   ── SHARED SECTION TOKENS ────────────────────────────────
════════════════════════════════════════════════════════════ */
.section {
  position: relative;
  padding: var(--section-py) 0;
  overflow: hidden;
  background: var(--bg);
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 2;
}

/* Shared divider line between sections */
.section-divider-top {
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    rgba(84,45,187,0.35) 30%,
    rgba(95,190,151,0.25) 70%,
    transparent);
  z-index: 1;
}

/* Atmospheric glow system — each section gets its own radial glows */
.section-atmo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.atmo-glow { position: absolute; inset: 0; }

.atmo-purple-left   { background: radial-gradient(ellipse 55% 65% at 8% 50%,   rgba(84,45,187,0.17) 0%, transparent 70%); }
.atmo-teal-right    { background: radial-gradient(ellipse 45% 55% at 92% 50%,  rgba(95,190,151,0.12) 0%, transparent 70%); }
.atmo-teal-center   { background: radial-gradient(ellipse 60% 70% at 50% 40%,  rgba(95,190,151,0.10) 0%, transparent 65%); }
.atmo-purple-edge   { background: radial-gradient(ellipse 30% 40% at 0% 100%,  rgba(84,45,187,0.14) 0%, transparent 70%); }
.atmo-purple-center-soft { background: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(84,45,187,0.13) 0%, transparent 68%); }
.atmo-teal-left-soft   { background: radial-gradient(ellipse 45% 55% at 15% 55%, rgba(95,190,151,0.10) 0%, transparent 70%); }
.atmo-purple-right-soft{ background: radial-gradient(ellipse 40% 50% at 85% 45%, rgba(84,45,187,0.12) 0%, transparent 70%); }
.atmo-purple-left-strong{ background: radial-gradient(ellipse 65% 75% at 5% 50%, rgba(84,45,187,0.22) 0%, transparent 65%); }
.atmo-teal-center-soft  { background: radial-gradient(ellipse 50% 55% at 50% 35%, rgba(95,190,151,0.11) 0%, transparent 65%); }
.atmo-purple-center-low { background: radial-gradient(ellipse 40% 40% at 50% 95%, rgba(84,45,187,0.16) 0%, transparent 70%); }
.atmo-teal-right-med    { background: radial-gradient(ellipse 50% 60% at 90% 50%, rgba(95,190,151,0.14) 0%, transparent 68%); }
.atmo-purple-left-med   { background: radial-gradient(ellipse 50% 60% at 10% 50%, rgba(84,45,187,0.16) 0%, transparent 68%); }

/* Section intro block */
.section-intro {
  text-align: center;
  margin-bottom: 72px;
}

/* Eyebrow label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 22px;
}
.eyebrow-line {
  display: block;
  width: 28px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--teal));
  opacity: 0.7;
}
[dir="rtl"] .eyebrow-line:first-child {
  background: linear-gradient(to left, transparent, var(--teal));
}
[dir="rtl"] .eyebrow-line:last-child {
  background: linear-gradient(to right, transparent, var(--teal));
}

.eyebrow--left {
  justify-content: flex-start;
}
[dir="rtl"] .eyebrow--left { justify-content: flex-end; }

/* Section headings */
.section-heading {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--light);
  margin-bottom: 18px;
  
}
.section-heading--left { text-align: start; }
[dir="rtl"] .section-heading--left { text-align: start; }
.section-heading--xl {
  font-size: clamp(2.5rem, 5.5vw, 4.2rem);
}

.section-sub {
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  font-weight: 400;
  line-height: 1.72;
  color: var(--muted);
  max-width: 500px;
  margin: 0 auto;
}
.section-sub--left { margin: 0; text-align: start; max-width: 440px; }
.section-sub--wide { max-width: 560px; }

/* Ghost button (reused across sections) */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding: 12px 26px;
  border-radius: 40px;
  border: 1px solid rgba(145,252,178,0.3);
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
}
.btn-ghost:hover {
  background: rgba(145,252,178,0.08);
  border-color: rgba(145,252,178,0.6);
  transform: translateY(-2px);
}


/* ════════════════════════════════════════════════════════════
   ── HERO ─────────────────────────────────────────────────
════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* Aurora beams */
.aurora-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.aurora-stage--section {
  z-index: 0;
  opacity: 0.7;
}
.base-glow {
  position: absolute;
  bottom: -5%; left: 50%;
  transform: translateX(-50%);
  width: 120%; height: 80%;
  background: radial-gradient(ellipse 72% 65% at 50% 100%,
    rgba(84,45,187,0.30) 0%,
    rgba(95,190,151,0.14) 38%,
    transparent 70%);
}
.beam {
  position: absolute;
  bottom: 0;
  border-radius: 50% 50% 0 0 / 15% 15% 0 0;
  transform-origin: bottom center;
}
.beam-teal {
  background: linear-gradient(to top,
    rgba(145,252,178,0.75) 0%, rgba(95,190,151,0.55) 18%,
    rgba(95,190,151,0.25) 50%, transparent 100%);
  filter: blur(26px);
}
.beam-purple {
  background: linear-gradient(to top,
    rgba(84,45,187,0.80) 0%, rgba(84,45,187,0.48) 22%,
    rgba(84,45,187,0.20) 58%, transparent 100%);
  filter: blur(28px);
}
.beam-accent {
  background: linear-gradient(to top,
    rgba(145,252,178,0.70) 0%, rgba(200,255,230,0.40) 12%,
    rgba(145,252,178,0.14) 42%, transparent 80%);
  filter: blur(16px);
}
.b1 { left:49%;   width:72px;  height:86%; animation: breathe 5.0s ease-in-out infinite; }
.b2 { left:43%;   width:120px; height:72%; animation: breathe 6.5s ease-in-out 0.8s infinite; }
.b3 { left:57%;   width:100px; height:69%; animation: breathe 7.0s ease-in-out 1.5s infinite; }
.b4 { left:33%;   width:135px; height:64%; animation: breathe 8.0s ease-in-out 0.4s infinite; }
.b5 { left:61%;   width:145px; height:71%; animation: breathe 7.5s ease-in-out 2.0s infinite; }
.b6 { left:22%;   width:115px; height:56%; animation: breathe 9.0s ease-in-out 1.0s infinite; }
.b7 { left:49.6%; width:44px;  height:90%; animation: breathe 4.5s ease-in-out 0.2s infinite; }
@keyframes breathe {
  0%,100% { opacity:1.0;  transform:scaleX(1.00) scaleY(1.00); }
  33%      { opacity:0.76; transform:scaleX(1.06) scaleY(1.02); }
  66%      { opacity:0.88; transform:scaleX(0.95) scaleY(0.98); }
}

/* Grain */
.grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

/* Pulse canvas */
#pulse-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
}

/* ── Navbar ─────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.3s, backdrop-filter 0.3s, border-bottom 0.3s;
}
.navbar.scrolled {
  background: rgba(8,25,27,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(95,190,151,0.10);
}
.nav-inner {
  max-width: var(--max-w); margin: 0 auto;
  height: var(--nav-h); padding: 0 32px;
  display: flex; align-items: center; gap: 24px;
}
.nav-logo {
  display: flex; align-items: center; gap: 9px;
  font-size: 1.08rem; font-weight: 700; color: var(--light);
  letter-spacing: -0.02em; flex-shrink: 0;
}
.nav-pill {
  display: flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 40px; padding: 5px 6px; margin: 0 auto;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.navlink {
  font-size: 0.82rem; font-weight: 500; color: rgba(242,242,242,0.60);
  padding: 7px 16px; border-radius: 30px;
  transition: color 0.22s, background 0.22s;
  white-space: nowrap;
}
.navlink:hover  { color: var(--light); background: rgba(255,255,255,0.09); }
.navlink.active { color: var(--light); background: rgba(255,255,255,0.14); }
.nav-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.lang-toggle {
  font-size: 0.82rem; font-weight: 700;
  color: rgba(242,242,242,0.55); padding: 6px 12px;
  border-radius: 30px; border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.2s; letter-spacing: 0.04em;
}
.lang-toggle:hover { color: var(--light); border-color: rgba(145,252,178,0.45); background: rgba(145,252,178,0.05); }
.lang-label {
  display: inline-block; letter-spacing: 0.08em;
  transition: opacity 0.15s ease;
}
.nav-cta-group {
  display: flex; align-items: center; gap: 8px;
}
.btn-nav-login {
  padding: 9px 20px;
  border: 1.5px solid rgba(242,242,242,0.22); color: rgba(242,242,242,0.72);
  border-radius: 40px; font-size: 0.875rem; font-weight: 600;
  letter-spacing: -0.01em; transition: border-color 0.2s, color 0.2s, transform 0.2s;
  white-space: nowrap;
}
.btn-nav-login:hover {
  border-color: rgba(145,252,178,0.5); color: var(--light); transform: translateY(-1px);
}
.btn-nav-register {
  padding: 10px 24px; background: var(--light); color: #0d1012;
  border-radius: 40px; font-size: 0.875rem; font-weight: 700;
  letter-spacing: -0.01em; transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.btn-nav-register:hover {
  background: #fff; transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(145,252,178,0.18);
}
/* ── Nav profile avatar + dropdown ── */
.nav-profile { position: relative; }
.nav-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(145,252,178,0.12); border: 1.5px solid rgba(145,252,178,0.3);
  color: var(--mint); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.nav-avatar:hover { background: rgba(145,252,178,0.2); border-color: rgba(145,252,178,0.6); }
.nav-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 168px; background: #1a1f24; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 6px; box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity 0.18s, transform 0.18s;
}
.nav-dropdown.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-dropdown-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 8px; width: 100%;
  color: rgba(242,242,242,0.75); font-size: 0.875rem; font-weight: 500;
  transition: background 0.15s, color 0.15s; text-align: left; cursor: pointer;
}
.nav-dropdown-item:hover { background: rgba(255,255,255,0.06); color: var(--light); }
.nav-logout { color: rgba(255,100,100,0.8); }
.nav-logout:hover { background: rgba(255,80,80,0.08); color: rgba(255,120,120,1); }
[dir="rtl"] .nav-dropdown { right: auto; left: 0; }
[dir="rtl"] .nav-dropdown-item { text-align: right; }

.hamburger {
  display: none; flex-direction: column; gap: 5px;
  padding: 6px; margin-left: auto; flex-shrink: 0;
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--light); border-radius: 2px; }

/* ── Hero content ────────────────────────────────────── */
.hero-content {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: calc(var(--nav-h) + 56px) 24px 44px;
  width: 100%; max-width: 900px;
  margin-top: 0;
}
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 18px; background: rgba(8,25,27,0.80);
  border: 1px solid rgba(95,190,151,0.32); border-radius: 40px;
  font-size: 0.80rem; font-weight: 500; color: rgba(242,242,242,0.82);
  letter-spacing: 0.02em; margin-bottom: 34px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(-8px);
  animation: fadeDown 0.7s var(--ease) 0.25s forwards;
  animation-play-state: paused; /* JS starts this after intro */
}
.badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 7px var(--teal); flex-shrink: 0;
}

/* ── Headline reveal ─────────────────────────────────── */
.headline-wrap { position: relative; margin-bottom: 28px; padding-bottom: 4px; overflow: visible; }
.headline {
  font-size: clamp(3rem, 7.8vw, 6.4rem); font-weight: 800;
  line-height: 1.1; letter-spacing: -0.04em; color: var(--light);
  margin: 0; text-align: center;
}
.headline-blur {
  position: absolute; top: 0; left: 0; right: 0; text-align: center;
  filter: blur(10px); opacity: 0.42; pointer-events: none;
  color: rgba(242,242,242,0.85); will-change: opacity, filter;
  animation: blur-fog-exit 0.55s ease forwards 2.1s;
  animation-play-state: paused; /* JS starts this after intro */
}
.headline-sharp {
  position: relative;
  -webkit-mask-image: linear-gradient(to right,
    black 44%, rgba(0,0,0,0.72) 50%,
    rgba(0,0,0,0.18) 57%, transparent 63%);
  mask-image: linear-gradient(to right,
    black 44%, rgba(0,0,0,0.72) 50%,
    rgba(0,0,0,0.18) 57%, transparent 63%);
  -webkit-mask-size: 210% 110%; mask-size: 210% 110%;
  -webkit-mask-position: 100% 0%; mask-position: 100% 0%;
  animation: headline-sweep 1.25s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
  animation-play-state: paused; /* JS starts this after intro */
}
[dir="rtl"] .headline-sharp {
  animation: headline-sweep-rtl 1.25s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
  animation-play-state: paused; /* JS starts this after intro */
}
@keyframes headline-sweep {
  from { -webkit-mask-position: 100% 0%; mask-position: 100% 0%; }
  to   { -webkit-mask-position:   0% 0%; mask-position:   0% 0%; }
}
@keyframes headline-sweep-rtl {
  from { -webkit-mask-position: 100% 0%; mask-position: 100% 0%; }
  to   { -webkit-mask-position:   0% 0%; mask-position:   0% 0%; }
}
@keyframes blur-fog-exit {
  from { opacity: 0.42; filter: blur(10px); }
  to   { opacity: 0;    filter: blur(0);    }
}

.subline {
  font-size: clamp(0.94rem,1.6vw,1.10rem); font-weight: 400;
  line-height: 1.75; color: var(--muted); max-width: 480px; margin-bottom: 44px;
  opacity: 0; transform: translateY(14px);
  animation: fadeUp 0.85s var(--ease) 2.5s forwards;
  animation-play-state: paused; /* JS starts this after intro */
}
/* ── Hero CTA group ───────────────────────────────── */
.cta-group {
  display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap;
  opacity: 0; transform: translateY(14px);
  animation: fadeUp 0.85s var(--ease) 2.8s forwards;
  animation-play-state: paused; /* JS starts this after intro */
}
.cta-btn {
  display: inline-flex; align-items: center; gap: 0;
  border-radius: 40px;
  padding: 6px 6px 6px 26px;
  font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em;
  transition: transform 0.25s, box-shadow 0.3s, background 0.25s, border-color 0.25s;
}
.cta-btn:hover { transform: translateY(-2px); }

/* Primary variant (Register) */
.cta-btn--primary {
  background: var(--light); color: #0d1012;
  box-shadow: 0 4px 28px rgba(145,252,178,0.13);
}
.cta-btn--primary:hover { box-shadow: 0 10px 44px rgba(145,252,178,0.26); }
.cta-btn--primary .cta-circle {
  background: #0d1012; color: var(--light);
}
.cta-btn--primary:hover .cta-circle { background: var(--deep); }

/* Ghost variant (Login) */
.cta-btn--ghost {
  background: rgba(255,255,255,0.06);
  color: var(--light);
  border: 1.5px solid rgba(242,242,242,0.22);
  box-shadow: inset 0 0 0 0 transparent;
}
.cta-btn--ghost:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(145,252,178,0.45);
  box-shadow: 0 8px 32px rgba(95,190,151,0.12);
}
.cta-btn--ghost .cta-circle {
  background: rgba(255,255,255,0.12); color: var(--light);
}
.cta-btn--ghost:hover .cta-circle {
  background: rgba(145,252,178,0.18);
}

.cta-text { padding-right: 18px; }
[dir="rtl"] .cta-text { padding-right: 0; padding-left: 18px; }
.cta-circle {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.25s, transform 0.25s;
}
.cta-circle svg { display: block; flex-shrink: 0; }
.cta-btn:hover .cta-circle { transform: translateX(2px); }
[dir="rtl"] .cta-btn:hover .cta-circle { transform: translateX(-2px); }

/* ── Floating cards ──────────────────────────────────── */
.cards-row {
  position: relative; z-index: 10; width: 100%; max-width: var(--max-w);
  display: flex; align-items: flex-end; justify-content: center; gap: 18px;
  padding: 0 24px;
  opacity: 0; transform: translateY(28px);
  animation: fadeUp 1.0s var(--ease) 3.0s forwards;
  animation-play-state: paused; /* JS starts this after intro */
}
.card {
  border-radius: var(--radius); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: var(--card-bg); border: 1px solid var(--card-border);
  box-shadow: 0 12px 48px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.07);
  transition: transform 0.3s, box-shadow 0.3s;
}
.card-sm {
  padding: 18px 20px; width: 190px; flex-shrink: 0;
  margin-bottom: 30px; position: relative;
}
.card-sm:hover { transform: translateY(-4px); }
.card-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 500; color: rgba(242,242,242,0.58);
  margin-bottom: 10px; letter-spacing: 0.01em;
}
.dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot-green  { background: var(--teal); box-shadow: 0 0 5px rgba(95,190,151,0.7); }
.dot-muted  { background: rgba(242,242,242,0.35); }
.card-amount { font-size: 1.42rem; font-weight: 800; letter-spacing: -0.04em; color: var(--light); line-height: 1.1; }
.cents { font-size: 0.82em; opacity: 0.65; }
.lock-badge {
  position: absolute; top: 16px; right: 16px; width: 28px; height: 28px;
  border-radius: 50%; background: rgba(84,45,187,0.28);
  border: 1px solid rgba(84,45,187,0.42);
  display: flex; align-items: center; justify-content: center; color: rgba(242,242,242,0.60);
}
[dir="rtl"] .lock-badge { right: auto; left: 16px; }
.card-main {
  flex: 1; max-width: 460px; padding: 20px 22px 22px;
  box-shadow: 0 20px 72px rgba(0,0,0,0.58), 0 4px 20px rgba(84,45,187,0.28), inset 0 1px 0 rgba(255,255,255,0.09);
}
.card-main-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.card-main-title  { font-size: 0.93rem; font-weight: 700; color: var(--light); letter-spacing: -0.02em; }
.card-main-controls { display: flex; align-items: center; gap: 8px; }
.chips-tag {
  font-size: 0.70rem; font-weight: 600; padding: 3px 10px; border-radius: 20px;
  background: rgba(84,45,187,0.35); border: 1px solid rgba(84,45,187,0.52); color: rgba(242,242,242,0.78);
}
.ctrl-btn {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; transition: background 0.2s;
}
.ctrl-plus  { background: rgba(95,190,151,0.20); border: 1px solid rgba(95,190,151,0.38); color: var(--teal); }
.ctrl-plus:hover { background: rgba(95,190,151,0.30); }
.ctrl-dots  { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: rgba(242,242,242,0.50); flex-direction: row; gap: 2px; }
.ctrl-dots span { display: block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.card-main-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.wallet-label  { font-size: 0.78rem; color: rgba(242,242,242,0.52); margin-bottom: 8px; font-weight: 400; }
.pct-up        { color: var(--teal); font-weight: 600; }
.wallet-value  { font-size: clamp(1.9rem,4vw,2.6rem); font-weight: 800; color: var(--light); letter-spacing: -0.05em; line-height: 1; }
.wallet-dec    { font-size: 0.62em; opacity: 0.62; letter-spacing: -0.02em; }
.digi-card {
  flex-shrink: 0; width: 115px; height: 76px;
  background: linear-gradient(138deg, rgba(84,45,187,0.88) 0%, rgba(95,190,151,0.55) 100%);
  border: 1px solid rgba(145,252,178,0.22); border-radius: 11px;
  padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 8px 24px rgba(84,45,187,0.42), inset 0 1px 0 rgba(255,255,255,0.14);
}
.digi-top { font-size: 0.60rem; font-weight: 600; color: rgba(255,255,255,0.68); letter-spacing: 0.05em; text-transform: uppercase; }
.digi-chip { color: rgba(255,255,255,0.45); }
.digi-num  { font-size: 0.76rem; font-weight: 600; color: rgba(255,255,255,0.85); letter-spacing: 0.10em; }

/* ══════════════════════════════════════════════════════════
   NEW HERO CARDS — Loop / Chat / Audio
══════════════════════════════════════════════════════════ */

/* ── Shared card-sm sizing kept, extra dot colors ──────── */
.dot-accent  { background: var(--accent); box-shadow: 0 0 5px rgba(145,252,178,0.7); }
.dot-purple  { background: rgba(145,100,255,0.9); box-shadow: 0 0 5px rgba(145,100,255,0.55); }

/* ── Status rotator card ───────────────────────────────── */
.card-sm#card-status { padding: 16px 16px 14px; }

.status-card-inner {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 100%; gap: 0;
}

/* Top label row */
.status-top-row {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.status-pulse-dot { animation: dot-pulse 2s ease-in-out infinite; }
.status-sys-label {
  font-size: 0.60rem; font-weight: 700; letter-spacing: 0.12em;
  color: rgba(242,242,242,0.40); text-transform: uppercase; flex: 1;
}
.status-live-badge {
  font-size: 0.56rem; font-weight: 700; letter-spacing: 0.10em;
  color: rgba(145,252,178,0.80); text-transform: uppercase;
  padding: 2px 7px; border-radius: 20px;
  background: rgba(145,252,178,0.10); border: 1px solid rgba(145,252,178,0.28);
}

/* Rotating phrase container — clips overflow for slide transition */
.status-phrase-wrap {
  flex: 1; position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: 56px;
}

/* Each phrase slot */
.status-phrase {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  font-size: 0.88rem; font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.2;
  color: var(--light);
  opacity: 0;
  transform: translateY(14px);
  filter: blur(4px);
  transition:
    opacity  0.55s cubic-bezier(0.16,1,0.3,1),
    transform 0.55s cubic-bezier(0.16,1,0.3,1),
    filter   0.55s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
  will-change: opacity, transform, filter;
}

/* The active (visible) phrase */
.status-phrase--active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* The exiting phrase slides upward */
.status-phrase--exit {
  opacity: 0;
  transform: translateY(-14px);
  filter: blur(4px);
}

/* Accent colour on key words — applied inline via JS span */
.status-phrase .phrase-accent {
  background: linear-gradient(90deg, var(--accent), var(--teal));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: inline;
}

/* Bottom progress bar */
.status-bar-row {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
}
.status-bar-track {
  flex: 1; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,0.10); overflow: hidden;
}
.status-bar-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--purple), var(--accent));
  width: 0%;
  transition: width 2.8s linear;
}
.status-bar-label {
  font-size: 0.58rem; font-weight: 600; color: rgba(242,242,242,0.30);
  letter-spacing: 0.04em; flex-shrink: 0;
}

/* spin-slow kept for cycle system */
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* ── Chat card ──────────────────────────────────────────── */
.card-main#card-chat { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }

.chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 12px; border-bottom: 1px solid rgba(84,45,187,0.25);
  background: rgba(84,45,187,0.10);
}
.chat-header-left { display: flex; align-items: center; gap: 10px; }
.chat-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg,rgba(84,45,187,0.8),rgba(95,190,151,0.5));
  border: 1px solid rgba(145,252,178,0.3);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.chat-avatar-ring {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid rgba(145,252,178,0.22);
  animation: loop-ring-pulse 2s ease-in-out infinite;
}
.chat-agent-name { font-size: 0.80rem; font-weight: 700; color: var(--light); letter-spacing: -0.01em; }
.chat-status-row { display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.chat-status-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 5px rgba(95,190,151,0.8);
  animation: dot-pulse 2s ease-in-out infinite;
}
.chat-status-txt { font-size: 0.64rem; color: rgba(95,190,151,0.85); font-weight: 500; }
.chat-header-badge {
  font-size: 0.62rem; font-weight: 600; padding: 3px 9px; border-radius: 20px;
  background: rgba(84,45,187,0.35); border: 1px solid rgba(84,45,187,0.55);
  color: rgba(242,242,242,0.72); letter-spacing: 0.03em; text-transform: uppercase;
}

.chat-body {
  flex: 1; padding: 14px 16px 8px; display: flex; flex-direction: column; gap: 10px;
  min-height: 120px; overflow: hidden;
}

/* Message bubbles */
.chat-msg { display: flex; flex-direction: column; gap: 3px; animation: msg-in 0.45s var(--ease) both; }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-msg.user-msg { align-items: flex-end; }
.chat-msg.bot-msg  { align-items: flex-start; }

.chat-bubble {
  max-width: 80%; padding: 8px 12px; border-radius: 14px;
  font-size: 0.775rem; line-height: 1.55; font-weight: 400; word-break: break-word;
}
.user-msg .chat-bubble {
  background: linear-gradient(135deg, rgba(84,45,187,0.72), rgba(84,45,187,0.50));
  border: 1px solid rgba(84,45,187,0.55); color: rgba(242,242,242,0.93);
  border-bottom-right-radius: 4px;
}
.bot-msg .chat-bubble {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.11);
  color: rgba(242,242,242,0.87); border-bottom-left-radius: 4px;
}
.chat-time { font-size: 0.60rem; color: rgba(242,242,242,0.35); padding: 0 4px; }

/* Typing indicator */
.chat-typing { display: flex; align-items: center; gap: 4px; padding: 8px 12px; }
.typing-dot {
  width: 5px; height: 5px; border-radius: 50%; background: rgba(95,190,151,0.7);
  animation: typing-bounce 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.18s; }
.typing-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-bounce {
  0%,60%,100% { transform: translateY(0); opacity: 0.5; }
  30%          { transform: translateY(-5px); opacity: 1; }
}

/* Input bar */
.chat-input-bar {
  padding: 10px 14px 12px; display: flex; align-items: center; gap: 8px;
  border-top: 1px solid rgba(84,45,187,0.20);
}
.chat-input-field {
  flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(84,45,187,0.38);
  border-radius: 22px; padding: 7px 13px;
  font-size: 0.72rem; font-family: inherit;
  transition: border-color 0.25s;
}
/* The span inside carries the text; JS sets its colour */
#chat-input-ph {
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: rgba(242,242,242,0.36); /* idle / empty */
  transition: color 0.2s;
}
.chat-send-btn {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), rgba(95,190,151,0.5));
  border: 1px solid rgba(145,252,178,0.25);
  display: flex; align-items: center; justify-content: center;
  color: rgba(242,242,242,0.9); transition: transform 0.2s, box-shadow 0.2s;
}
.chat-send-btn:hover { transform: scale(1.12); box-shadow: 0 0 14px rgba(84,45,187,0.5); }

/* ── Audio card ─────────────────────────────────────────── */
/* ── Audio card ─────────────────────────────────────────── */
.card-sm#card-audio { padding: 16px 16px 14px; }
.audio-card-inner { display: flex; flex-direction: column; gap: 8px; height: 100%; }

.audio-label-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.70rem; font-weight: 500; color: rgba(242,242,242,0.55); letter-spacing: 0.01em;
}
.audio-label-txt { font-size: 0.70rem; }

/* SVG waveform container */
.audio-waveform {
  flex: 1; display: flex; align-items: center;
  min-height: 52px; position: relative;
}
.wv-svg {
  width: 100%; height: 52px; display: block; overflow: visible;
}

/* Individual bar rects — idle: dim gradient fill */
.wvb {
  fill: url(#wv-grad-dim);
  transform-origin: center 26px;   /* animate around vertical midpoint */
  transform-box: fill-box;
  transition: fill 0.4s ease;
}

/* When playing, each bar gets a CSS animation via JS-added class */
.audio-waveform.playing .wvb {
  fill: url(#wv-grad);
  animation: wvb-pulse 0.65s ease-in-out infinite alternate;
}

/* Stagger each bar's duration + delay for organic feel */
.audio-waveform.playing .wvb:nth-child(1)  { animation-duration:0.72s; animation-delay:0.00s; }
.audio-waveform.playing .wvb:nth-child(2)  { animation-duration:0.58s; animation-delay:0.06s; }
.audio-waveform.playing .wvb:nth-child(3)  { animation-duration:0.83s; animation-delay:0.11s; }
.audio-waveform.playing .wvb:nth-child(4)  { animation-duration:0.50s; animation-delay:0.04s; }
.audio-waveform.playing .wvb:nth-child(5)  { animation-duration:0.67s; animation-delay:0.15s; }
.audio-waveform.playing .wvb:nth-child(6)  { animation-duration:0.78s; animation-delay:0.08s; }
.audio-waveform.playing .wvb:nth-child(7)  { animation-duration:0.55s; animation-delay:0.02s; }
.audio-waveform.playing .wvb:nth-child(8)  { animation-duration:0.90s; animation-delay:0.13s; }
.audio-waveform.playing .wvb:nth-child(9)  { animation-duration:0.62s; animation-delay:0.07s; }
.audio-waveform.playing .wvb:nth-child(10) { animation-duration:0.74s; animation-delay:0.10s; }
.audio-waveform.playing .wvb:nth-child(11) { animation-duration:0.48s; animation-delay:0.03s; }
.audio-waveform.playing .wvb:nth-child(12) { animation-duration:0.86s; animation-delay:0.14s; }
.audio-waveform.playing .wvb:nth-child(13) { animation-duration:0.60s; animation-delay:0.09s; }
.audio-waveform.playing .wvb:nth-child(14) { animation-duration:0.70s; animation-delay:0.05s; }
.audio-waveform.playing .wvb:nth-child(15) { animation-duration:0.54s; animation-delay:0.12s; }
.audio-waveform.playing .wvb:nth-child(16) { animation-duration:0.80s; animation-delay:0.01s; }
.audio-waveform.playing .wvb:nth-child(17) { animation-duration:0.65s; animation-delay:0.16s; }
.audio-waveform.playing .wvb:nth-child(18) { animation-duration:0.75s; animation-delay:0.07s; }

@keyframes wvb-pulse {
  from { transform: scaleY(0.28); }
  to   { transform: scaleY(1.08); }
}

/* Idle gentle breath — always on, very slow */
.wvb {
  animation: wvb-idle 3.2s ease-in-out infinite alternate;
}
.wvb:nth-child(odd)  { animation-delay: 0s; }
.wvb:nth-child(even) { animation-delay: 1.6s; }
@keyframes wvb-idle {
  from { transform: scaleY(0.80); opacity: 0.55; }
  to   { transform: scaleY(1.00); opacity: 0.85; }
}

.audio-controls-row {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.audio-time-txt, .audio-dur-txt {
  font-size: 0.62rem; font-weight: 600; color: rgba(242,242,242,0.42);
  letter-spacing: 0.03em; font-variant-numeric: tabular-nums;
}
.audio-btns { display: flex; align-items: center; gap: 6px; }
.audio-btn {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.22s, box-shadow 0.22s, background 0.22s;
}
.audio-play-btn {
  background: linear-gradient(135deg, rgba(84,45,187,0.75), rgba(145,100,255,0.55));
  border: 1px solid rgba(145,100,255,0.50); color: rgba(242,242,242,0.92);
}
.audio-play-btn:hover { transform: scale(1.14); box-shadow: 0 0 16px rgba(145,100,255,0.45); }
.audio-stop-btn {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: rgba(242,242,242,0.72);
}
.audio-stop-btn:hover { background: rgba(255,80,80,0.20); border-color: rgba(255,80,80,0.40); }
#audio-live-dot.playing { background: rgba(145,100,255,0.9); animation: dot-pulse 0.8s ease-in-out infinite; }

/* Base animations */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0);    }
}
@keyframes fadeDown {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0);    }
}


/* ════════════════════════════════════════════════════════════
   §1  HOW IT WORKS
════════════════════════════════════════════════════════════ */
.steps-row {
  display: flex; align-items: flex-start; justify-content: center; gap: 0;
  flex-wrap: wrap;
}
.step-card {
  flex: 1; min-width: 220px; max-width: 300px;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 36px 28px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative; overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.step-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--purple), var(--teal));
  transform: scaleX(0); transform-origin: start;
  transition: transform 0.4s var(--ease);
}
.step-card:hover { transform: translateY(-6px); border-color: rgba(84,45,187,0.6); }
.step-card:hover::before { transform: scaleX(1); }
.step-num {
  font-size: 3.5rem; font-weight: 800; letter-spacing: -0.05em;
  color: rgba(84,45,187,0.20); line-height: 1; margin-bottom: 20px;
  transition: color 0.3s;
}
.step-card:hover .step-num { color: rgba(145,252,178,0.35); }
.step-icon-wrap {
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  background: rgba(84,45,187,0.18); border: 1px solid rgba(84,45,187,0.35);
  display: flex; align-items: center; justify-content: center; color: var(--teal);
  margin-bottom: 20px; transition: background 0.3s;
}
.step-card:hover .step-icon-wrap { background: rgba(84,45,187,0.3); }
.step-title { font-size: 1.1rem; font-weight: 700; color: var(--light); margin-bottom: 12px; letter-spacing: -0.02em; }
.step-desc  { font-size: 0.875rem; line-height: 1.7; color: var(--muted); }

/* Connector between steps */
.step-connector {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 0 12px; margin-top: 60px; gap: 4px;
}
.connector-line {
  width: 1px; height: 60px;
  background: linear-gradient(to bottom, rgba(84,45,187,0.5), rgba(95,190,151,0.4));
}
.connector-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(145,252,178,0.4);
  animation: dot-pulse 1.8s ease-in-out infinite;
}
.connector-dot:nth-child(2) { animation-delay: 0.3s; }
.connector-dot:nth-child(3) { animation-delay: 0.6s; }
@keyframes dot-pulse {
  0%,100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.2); }
}


/* ════════════════════════════════════════════════════════════
   §2  FEATURES — AI Showcase
════════════════════════════════════════════════════════════ */

/* Section: distinct mauve-purple background */
.s-features { background: #0d0620; }

/* Animated background orbs */
.feat-bg {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.feat-bg-orb {
  position: absolute; border-radius: 50%;
  filter: blur(72px);
}
.feat-orb-a {
  width: 650px; height: 650px;
  background: radial-gradient(circle, rgba(84,45,187,0.22) 0%, transparent 68%);
  top: -120px; left: -120px;
  animation: feat-drift-a 32s ease-in-out infinite;
}
.feat-orb-b {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(110,55,210,0.16) 0%, transparent 68%);
  bottom: -80px; right: -80px;
  animation: feat-drift-b 38s ease-in-out infinite;
}
.feat-orb-c {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(95,80,170,0.11) 0%, transparent 68%);
  top: 45%; left: 48%;
  animation: feat-drift-c 26s ease-in-out infinite;
}
@keyframes feat-drift-a {
  0%, 100% { transform: translate(0, 0); }
  35%       { transform: translate(70px, 50px); }
  65%       { transform: translate(-30px, 90px); }
}
@keyframes feat-drift-b {
  0%, 100% { transform: translate(0, 0); }
  40%       { transform: translate(-60px, -70px); }
  75%       { transform: translate(40px, -35px); }
}
@keyframes feat-drift-c {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%       { transform: translate(-50%, -50%) scale(1.35); }
}

/* ── Two-column showcase layout ─────────────────────────── */
.feat-showcase {
  display: flex; align-items: flex-start; gap: 52px;
}

/* ── Left: Conversation window ──────────────────────────── */
.feat-convo-wrap { flex: 0 0 52%; min-width: 0; }

.feat-convo-window {
  background: rgba(14, 7, 38, 0.92);
  border: 1px solid rgba(84,45,187,0.42);
  border-radius: 20px;
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  box-shadow:
    0 0 0 1px rgba(145,252,178,0.04),
    0 28px 88px rgba(0,0,0,0.64),
    0 0 100px rgba(84,45,187,0.14),
    inset 0 1px 0 rgba(255,255,255,0.07);
  overflow: hidden;
}

/* Chrome bar */
.feat-chrome-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px;
  background: rgba(7, 3, 20, 0.72);
  border-bottom: 1px solid rgba(84,45,187,0.24);
}
.feat-chrome-dots { display: flex; gap: 7px; flex-shrink: 0; }
.chrome-dot { width: 11px; height: 11px; border-radius: 50%; }
.chrome-dot-red    { background: rgba(255,95,87,0.75); }
.chrome-dot-yellow { background: rgba(255,188,46,0.65); }
.chrome-dot-green  { background: rgba(40,200,64,0.65); }
.feat-chrome-title {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 8px; font-size: 0.77rem; font-weight: 600;
  color: rgba(242,242,242,0.52); letter-spacing: 0.03em;
}
.feat-status-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #91FCB2;
  box-shadow: 0 0 7px rgba(145,252,178,0.75);
  animation: feat-status-pulse 2.2s ease-in-out infinite;
}
@keyframes feat-status-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.30; }
}
.feat-chrome-spacer { flex-shrink: 0; width: 60px; }

/* Chat body */
.feat-chat-body {
  min-height: 248px; max-height: 316px;
  padding: 22px 20px 10px;
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
  position: relative;
  direction: ltr;
}

/* Message rows */
.feat-msg {
  display: flex; align-items: flex-end; gap: 9px;
  max-width: 88%;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.36s ease, transform 0.36s ease;
}
.feat-msg.feat-msg--in  { opacity: 1; transform: translateY(0); }
.feat-msg.feat-msg--exit {
  opacity: 0; transform: translateY(-22px) scale(0.97);
  transition: opacity 0.40s ease, transform 0.40s ease;
}
.feat-msg--user { margin-left: auto; flex-direction: row-reverse; }
.feat-msg--ai   { margin-right: auto; }

/* Avatars */
.feat-msg-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.feat-msg-avatar--ai {
  background: linear-gradient(135deg, rgba(84,45,187,0.55), rgba(95,190,151,0.28));
  border: 1px solid rgba(145,252,178,0.28);
  color: var(--accent);
}
.feat-msg-avatar--user {
  background: rgba(84,45,187,0.45);
  border: 1px solid rgba(84,45,187,0.55);
  color: rgba(242,242,242,0.58);
}

/* Bubbles */
.feat-msg-bubble {
  border-radius: 16px; padding: 10px 14px;
  font-size: 0.855rem; line-height: 1.60;
}
.feat-msg-bubble--user {
  background: linear-gradient(135deg, rgba(84,45,187,0.62), rgba(52,24,120,0.56));
  border: 1px solid rgba(84,45,187,0.56);
  color: rgba(242,242,242,0.92);
  border-bottom-right-radius: 5px;
  direction: ltr;
}
[dir="rtl"] .feat-msg-bubble--user { direction: rtl; text-align: right; }
.feat-msg-bubble--ai {
  background: rgba(16,10,40,0.90);
  border: 1px solid rgba(145,252,178,0.14);
  color: rgba(242,242,242,0.88);
  border-bottom-left-radius: 5px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.28);
  direction: ltr;
}
[dir="rtl"] .feat-msg-bubble--ai { direction: rtl; text-align: right; }

/* AI data block */
.feat-ai-data {
  margin-top: 9px; padding: 9px 12px;
  background: rgba(145,252,178,0.055);
  border: 1px solid rgba(145,252,178,0.14);
  border-radius: 10px;
}
.feat-ai-row {
  display: flex; justify-content: space-between;
  font-size: 0.775rem; padding: 2.5px 0;
  direction: ltr;
}
.feat-ai-label  { color: rgba(242,242,242,0.44); }
.feat-ai-val    { color: var(--accent); font-weight: 600; }
.feat-ai-neutral { color: rgba(242,242,242,0.64); font-weight: 500; }

/* AI typing indicator */
.feat-typing-indicator {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 14px;
}
.feat-typing-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); opacity: 0.4;
  animation: feat-type-bounce 1.2s ease-in-out infinite;
}
.feat-typing-dot:nth-child(2) { animation-delay: 0.20s; }
.feat-typing-dot:nth-child(3) { animation-delay: 0.40s; }
@keyframes feat-type-bounce {
  0%, 60%, 100% { transform: translateY(0);   opacity: 0.4; }
  30%            { transform: translateY(-7px); opacity: 1;   }
}

/* Input row */
.feat-chat-footer {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 18px;
  border-top: 1px solid rgba(84,45,187,0.20);
  background: rgba(7, 3, 20, 0.56);
}
.feat-input-mock {
  flex: 1; min-height: 40px;
  background: rgba(84,45,187,0.11);
  border: 1px solid rgba(84,45,187,0.28);
  border-radius: 11px;
  padding: 9px 14px;
  font-size: 0.845rem;
  color: rgba(242,242,242,0.75);
  display: flex; align-items: center;
  font-family: inherit;
  direction: ltr;
}
.feat-input-cursor {
  display: inline-block;
  width: 2px; height: 1em;
  background: var(--teal);
  margin-left: 1px;
  vertical-align: middle;
  border-radius: 1px;
  animation: feat-cursor-blink 0.82s ease-in-out infinite;
}
@keyframes feat-cursor-blink {
  0%, 48%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.feat-send-btn {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: rgba(84,45,187,0.38);
  border: 1px solid rgba(84,45,187,0.52);
  color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  cursor: default;
  transition: background 0.25s, box-shadow 0.25s;
}
.feat-send-btn--flash {
  background: rgba(84,45,187,0.72);
  box-shadow: 0 0 14px rgba(84,45,187,0.45);
}

/* ── Right: Feature list panel ──────────────────────────── */
.feat-list-panel {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 24px;
  padding-top: 6px;
}
.feat-list-tagline {
  font-size: 1.0rem; line-height: 1.62; color: var(--muted); margin: 0;
}
.feat-list { display: flex; flex-direction: column; gap: 4px; }

.feat-list-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px 12px 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  position: relative; cursor: default;
  transition: background 0.38s ease, border-color 0.38s ease;
}
[dir="rtl"] .feat-list-item { padding: 12px 18px 12px 14px; }
.feat-list-item.feat-item--active {
  background: rgba(84,45,187,0.11);
  border-color: rgba(84,45,187,0.28);
}

/* Left accent bar */
.feat-list-bar {
  position: absolute; left: 0; top: 11px; bottom: 11px;
  width: 3px; border-radius: 2px;
  background: linear-gradient(to bottom, var(--teal), var(--purple));
  opacity: 0;
  transition: opacity 0.38s ease;
}
[dir="rtl"] .feat-list-bar { left: auto; right: 0; }
.feat-list-item.feat-item--active .feat-list-bar { opacity: 1; }

/* Feature icon */
.feat-list-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: rgba(84,45,187,0.14);
  border: 1px solid rgba(84,45,187,0.30);
  display: flex; align-items: center; justify-content: center;
  color: var(--teal);
  transition: background 0.38s ease, border-color 0.38s ease, box-shadow 0.38s ease;
}
.feat-list-item.feat-item--active .feat-list-icon {
  background: rgba(84,45,187,0.26);
  border-color: rgba(95,190,151,0.40);
  box-shadow: 0 0 18px rgba(84,45,187,0.24);
}

.feat-list-content { flex: 1; min-width: 0; }
.feat-list-title {
  font-size: 0.92rem; font-weight: 700;
  color: var(--light); letter-spacing: -0.02em; margin-bottom: 3px;
}
.feat-list-desc {
  font-size: 0.80rem; line-height: 1.58; color: var(--muted-soft);
}



/* ════════════════════════════════════════════════════════════
   §3  ARCHITECTURE
════════════════════════════════════════════════════════════ */

/* ── Section background ─────────────────────────────────── */
.s-arch { position: relative; overflow: hidden; }
.arch-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

.arch-bg-orb { position: absolute; border-radius: 50%; filter: blur(70px); }
.arch-orb-a {
  width: 580px; height: 580px; top: -100px; right: -80px;
  background: radial-gradient(circle, rgba(84,45,187,0.20) 0%, transparent 65%);
  animation: arch-drift-a 28s ease-in-out infinite;
}
.arch-orb-b {
  width: 420px; height: 420px; bottom: -60px; left: -50px;
  background: radial-gradient(circle, rgba(95,190,151,0.11) 0%, transparent 65%);
  animation: arch-drift-b 22s ease-in-out infinite;
}
@keyframes arch-drift-a {
  0%,100% { transform: translate(0,0); }
  40%     { transform: translate(-50px,60px); }
  70%     { transform: translate(35px,-30px); }
}
@keyframes arch-drift-b {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(40px,-55px); }
}

/* Dot grid */
.arch-bg-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(84,45,187,0.15) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* Horizontal scan line */
.arch-bg-scan {
  position: absolute; left: 0; right: 0; height: 1px; top: 0;
  background: linear-gradient(to right,
    transparent 0%, rgba(95,190,151,0.22) 22%,
    rgba(84,45,187,0.48) 50%,
    rgba(95,190,151,0.22) 78%, transparent 100%);
  animation: arch-scan 9s ease-in-out infinite;
}
@keyframes arch-scan {
  0%   { top: 0%;   opacity: 0; }
  4%   { opacity: 1; }
  96%  { opacity: 0.5; }
  100% { top: 100%; opacity: 0; }
}

/* ── Status ticker ──────────────────────────────────────── */
.arch-ticker {
  position: relative; z-index: 2;
  overflow: hidden; margin-bottom: 56px;
  border-top: 1px solid rgba(84,45,187,0.18);
  border-bottom: 1px solid rgba(84,45,187,0.18);
  padding: 10px 0;
  background: rgba(84,45,187,0.04);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.arch-ticker-track {
  display: inline-flex; align-items: center;
  white-space: nowrap;
  animation: arch-ticker-scroll 26s linear infinite;
}
@keyframes arch-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.arch-ticker-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(242,242,242,0.36);
  padding: 0 22px;
}
.arch-ticker-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 6px rgba(95,190,151,0.8);
  animation: arch-tdot-pulse 1.8s ease-in-out infinite; flex-shrink: 0;
}
@keyframes arch-tdot-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.35; }
}
.arch-ticker-sep { font-size: 0.72rem; color: rgba(84,45,187,0.42); padding: 0 2px; }

/* ── Diagram ────────────────────────────────────────────── */
.arch-diagram {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 0;
}

/* ── Panel ──────────────────────────────────────────────── */
.arch-panel {
  position: relative; overflow: hidden;
  background: rgba(10, 6, 28, 0.76);
  border: 1px solid rgba(84,45,187,0.22);
  border-radius: var(--radius);
  padding: 32px 40px 28px 48px;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 4px 32px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color 0.32s, box-shadow 0.32s, transform 0.28s;
  cursor: default;
}
.arch-panel:hover {
  border-color: rgba(84,45,187,0.55);
  box-shadow: 0 10px 52px rgba(84,45,187,0.22), inset 0 1px 0 rgba(255,255,255,0.07);
  transform: translateX(6px);
}

/* Left accent edge */
.arch-panel-edge {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 2px 0 0 2px;
  opacity: 0.55; transition: opacity 0.32s, box-shadow 0.32s;
}
.arch-panel--teal .arch-panel-edge {
  background: linear-gradient(to bottom, var(--teal), rgba(84,45,187,0.55));
}
.arch-panel--purple .arch-panel-edge {
  background: linear-gradient(to bottom, rgba(130,90,220,0.9), rgba(95,190,151,0.45));
}
.arch-panel:hover .arch-panel-edge { opacity: 1; }
.arch-panel--teal:hover .arch-panel-edge { box-shadow: 2px 0 18px rgba(95,190,151,0.55); }
.arch-panel--purple:hover .arch-panel-edge { box-shadow: 2px 0 18px rgba(84,45,187,0.70); }

/* Ghost number background art */
.arch-panel-ghost {
  position: absolute; right: 28px; bottom: -18px;
  font-size: 8rem; font-weight: 900; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(84,45,187,0.10);
  letter-spacing: -0.06em;
  user-select: none; pointer-events: none;
  transition: -webkit-text-stroke-color 0.32s;
}
.arch-panel:hover .arch-panel-ghost { -webkit-text-stroke-color: rgba(84,45,187,0.22); }

/* Head row */
.arch-panel-head {
  display: flex; align-items: center; gap: 20px; margin-bottom: 18px;
}

/* Icon */
.arch-icon {
  position: relative; flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow 0.32s;
}
.arch-icon--teal {
  background: rgba(95,190,151,0.11);
  border: 1px solid rgba(95,190,151,0.28);
  color: var(--teal);
}
.arch-icon--purple {
  background: rgba(84,45,187,0.18);
  border: 1px solid rgba(84,45,187,0.38);
  color: rgba(180,145,252,0.92);
}
.arch-panel--teal:hover  .arch-icon--teal   { box-shadow: 0 0 26px rgba(95,190,151,0.32); }
.arch-panel--purple:hover .arch-icon--purple { box-shadow: 0 0 26px rgba(84,45,187,0.52); }

/* Icon pulse ring (on hover) */
.arch-icon-ring {
  position: absolute; inset: -5px; border-radius: 18px;
  border: 1px solid transparent; opacity: 0; transition: opacity 0.28s;
}
.arch-panel--teal:hover .arch-icon-ring {
  border-color: rgba(95,190,151,0.32); opacity: 1;
  animation: arch-ring-pulse 1.8s ease-out infinite;
}
.arch-panel--purple:hover .arch-icon-ring {
  border-color: rgba(84,45,187,0.48); opacity: 1;
  animation: arch-ring-pulse 1.8s ease-out infinite;
}
@keyframes arch-ring-pulse {
  0%   { transform: scale(1);    opacity: 0.85; }
  100% { transform: scale(1.48); opacity: 0; }
}

/* Panel meta */
.arch-panel-meta { flex: 1; min-width: 0; }
.arch-panel-num {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-soft); margin-bottom: 3px;
}
.arch-panel-name { font-size: 1.08rem; font-weight: 700; color: var(--light); letter-spacing: -0.025em; }

/* LIVE badge */
.arch-live-badge {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.60rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(95,190,151,0.72);
  background: rgba(95,190,151,0.07); border: 1px solid rgba(95,190,151,0.20);
  border-radius: 20px; padding: 4px 11px; flex-shrink: 0;
}
.arch-live-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal); flex-shrink: 0;
  animation: arch-live-blink 1.4s ease-in-out infinite;
}
@keyframes arch-live-blink {
  0%,100% { opacity: 1; box-shadow: 0 0 5px rgba(95,190,151,0.8); }
  50%     { opacity: 0.38; box-shadow: none; }
}

/* KPI chip */
.arch-kpi {
  display: flex; flex-direction: column; align-items: flex-end;
  flex-shrink: 0; min-width: 52px;
}
.arch-kpi-val {
  font-size: 1.08rem; font-weight: 800; color: var(--light);
  letter-spacing: -0.04em; line-height: 1;
}
.arch-kpi-lbl {
  font-size: 0.60rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-soft); margin-top: 2px;
}

/* Description */
.arch-panel-desc {
  font-size: 0.888rem; line-height: 1.74; color: var(--muted);
  max-width: 660px; margin-bottom: 22px;
}

/* Footer: tags + spec */
.arch-panel-foot {
  display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.arch-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.arch-tag {
  font-size: 0.70rem; font-weight: 600; padding: 3px 10px; border-radius: 20px;
  background: rgba(84,45,187,0.18); border: 1px solid rgba(84,45,187,0.30);
  color: rgba(242,242,242,0.60); letter-spacing: 0.04em;
  transition: background 0.24s, border-color 0.24s, color 0.24s;
}
.arch-panel:hover .arch-tag {
  background: rgba(84,45,187,0.26); border-color: rgba(84,45,187,0.52);
  color: rgba(242,242,242,0.82);
}
.arch-spec {
  font-size: 0.70rem; font-weight: 600; letter-spacing: 0.07em;
  color: rgba(242,242,242,0.38); white-space: nowrap;
}

/* ── Bridge connectors between layers ───────────────────── */
.arch-bridge {
  position: relative; height: 48px; flex-shrink: 0;
}
.arch-bridge::before {
  content: ''; position: absolute;
  left: 22px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom,
    rgba(95,190,151,0.25) 0%, rgba(84,45,187,0.25) 100%);
}
.arch-bridge-dot {
  position: absolute;
  left: 22px; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 6px rgba(95,190,151,0.72);
  animation: arch-bridge-drop 1.5s ease-in-out var(--d, 0s) infinite;
}
@keyframes arch-bridge-drop {
  0%   { top: 2px;           opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 0.9; }
  100% { top: calc(100% - 2px); opacity: 0; }
}


/* ════════════════════════════════════════════════════════════
   §4  INTEGRATIONS — Signal Hub
════════════════════════════════════════════════════════════ */


/* Extra ambient glow behind the hub */
.atmo-intg-center {
  background: radial-gradient(ellipse 70% 60% at 50% 52%,
    rgba(84,45,187,0.20) 0%, rgba(95,190,151,0.08) 45%, transparent 68%);
}

/* ════════════════════════════════════════════════════════════
   §4  INTEGRATIONS — Signal Constellation
   ─────────────────────────────────────────────────────────
   Layout: 6 cards in a flanking 3×2 grid (left/right columns)
   around a central Connectly hub, connected by animated SVG
   bezier paths with traveling pulse dots.
════════════════════════════════════════════════════════════ */

/* ── Scene wrap ─────────────────────────────────────────── */
.intg-wrap {
  margin-top: 80px;
  padding: 0 24px;
}
.intg-scene {
  position: relative;
  width: 100%;
  max-width: 1100px;
  min-height: 620px;
  margin: 0 auto;
}

/* ── SVG lines overlay ──────────────────────────────────── */
.intg-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

/* ── Radial glow behind hub ─────────────────────────────── */
.intg-hub-glow {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(84,45,187,0.30) 0%,
    rgba(95,190,151,0.10) 40%,
    transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* ══ HUB ════════════════════════════════════════════════════ */
.intg-hub {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.62);
  width: 188px; height: 188px;
  z-index: 3;
  opacity: 0; filter: blur(14px);
  transition: opacity 1.0s var(--ease), transform 1.0s var(--ease), filter 1.0s var(--ease);
}
.intg-hub--in {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0);
}

/* Expanding pulse rings */
.hub-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(145,252,178,0.18);
  animation: hub-ring-expand 3.8s ease-out infinite;
}
.hub-ring-1 { animation-delay: 0s; }
.hub-ring-2 { animation-delay: 1.26s; }
.hub-ring-3 { animation-delay: 2.52s; }
@keyframes hub-ring-expand {
  0%   { transform: scale(1);   opacity: 0.60; }
  100% { transform: scale(2.4); opacity: 0;    }
}

/* Slowly rotating orbit ring */
.hub-orbit {
  position: absolute;
  top: -20px; left: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  border-radius: 50%;
  border: 1px dashed rgba(145,252,178,0.14);
  animation: hub-orbit-spin 28s linear infinite;
}
@keyframes hub-orbit-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Glass core circle */
.hub-core {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid rgba(145,252,178,0.30);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 0   48px rgba(84,45,187,0.38),
    0 0  100px rgba(84,45,187,0.16),
    inset 0 1px 0 rgba(255,255,255,0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
}

/* Connectly logo inside hub */
.hub-logo-wrap {
  width: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hub-logo-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  /* Ensure sharp rendering at any scale */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Live pill below logo */
.hub-pill {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.60rem; font-weight: 700;
  color: var(--teal); letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(95,190,151,0.10);
  border: 1px solid rgba(95,190,151,0.22);
  border-radius: 20px; padding: 3px 10px;
}
.hub-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 8px var(--teal);
  animation: hub-dot-blink 1.9s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes hub-dot-blink {
  0%,100% { opacity: 1;    transform: scale(1);    }
  50%      { opacity: 0.25; transform: scale(0.60); }
}
[dir="rtl"] .hub-pill { flex-direction: row-reverse; }

/* ══ CARDS ══════════════════════════════════════════════════ */
.intg-card {
  position: absolute;
  width: 224px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  display: flex; align-items: center; gap: 15px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 10px 40px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.07);
  z-index: 2; cursor: default;
  /* Start hidden — JS adds .intg-card--in */
  opacity: 0;
  transform: scale(0.80) translateY(22px);
  filter: blur(10px);
  transition:
    opacity   0.75s var(--ease),
    transform 0.75s var(--ease),
    filter    0.75s var(--ease),
    border-color 0.25s,
    box-shadow   0.28s;
}
.intg-card--in {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
}
.intg-card:hover {
  border-color: var(--brand, rgba(145,252,178,0.35));
  box-shadow:
    0 20px 60px rgba(0,0,0,0.55),
    0 0 0 1px var(--brand-glow, rgba(145,252,178,0.14)),
    0 0 28px var(--brand-glow, rgba(145,252,178,0.10)),
    inset 0 1px 0 rgba(255,255,255,0.12);
  transform: scale(1.04) translateY(-5px);
}
.intg-card:hover .intg-logo-slot {
  box-shadow: 0 4px 22px var(--brand-glow, rgba(0,0,0,0.3));
  transform: scale(1.07);
}

/* ── Mid cards (ic-2 Facebook, ic-3 Salla) stay vertically centered ── */
.intg-card--mid {
  top: 50%;
  margin-top: -57px; /* half card height (~114px) */
}
/* Start state for mid-cards */
#ic-2.intg-card--mid,
#ic-3.intg-card--mid {
  transform: scale(0.80) translateY(22px);
}

/* ── Card positions: 3-column flanking layout ── */
/*  Left column        Hub center (50%)        Right column  */
#ic-0 { left: 2%;   top: 5%; }           /* WhatsApp  TL */
#ic-2 { left: 0;            }            /* Facebook  ML */
#ic-4 { left: 2%;   bottom: 5%; }        /* Zid       BL */
#ic-1 { right: 2%;  top: 5%; }           /* Instagram TR */
#ic-3 { right: 0;           }            /* Salla     MR */
#ic-5 { right: 2%;  bottom: 5%; }        /* Foodics   BR */

/* ── Logo slot: premium branded placeholder ─────────────── */
.intg-logo-slot {
  width: 58px; height: 58px;
  flex-shrink: 0;
  border-radius: 15px;
  background: var(--brand-dim, rgba(255,255,255,0.07));
  border: 1.5px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
  /* Subtle brand-tinted inner glow */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
/* Brand color border on hover via card hover */
.intg-card:hover .intg-logo-slot {
  border-color: rgba(255,255,255,0.20);
}

/* When a real image is dropped in */
.intg-logo-img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 13px;
  padding: 6px;
}

.intg-logo-svg {
  /* Prevent SVG from shrinking inside the slot */
  flex-shrink: 0;
}

/* ── Card text ───────────────────────────────────────────── */
.intg-info { flex: 1; min-width: 0; }
.intg-name {
  font-size: 0.92rem; font-weight: 700;
  color: var(--light); letter-spacing: -0.02em;
  margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.intg-meta {
  font-size: 0.70rem; color: var(--muted-soft);
  font-weight: 400; margin-bottom: 8px;
}
.intg-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.66rem; font-weight: 600;
  color: var(--brand, var(--teal));
  letter-spacing: 0.04em;
  background: var(--brand-dim, rgba(95,190,151,0.10));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 2px 8px;
}
.intg-live {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
  background: var(--brand, var(--teal));
  box-shadow: 0 0 6px var(--brand, var(--teal));
  animation: intg-live-blink 2.1s ease-in-out infinite;
}
@keyframes intg-live-blink {
  0%,100% { opacity: 1;    transform: scale(1);    }
  50%      { opacity: 0.30; transform: scale(0.55); }
}

/* ── Traveling pulse dots (CSS offset-path) ─────────────── */
.intg-pulse-dot {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  offset-distance: 0%;
  -webkit-offset-distance: 0%;
  opacity: 0;
  z-index: 4;
  pointer-events: none;
  animation: intg-dot-travel 3.1s ease-in-out infinite;
}
@keyframes intg-dot-travel {
  0%  { offset-distance:   0%; -webkit-offset-distance:   0%; opacity: 0; transform: scale(0.3); }
  8%  { opacity: 1; transform: scale(1); }
  82% { opacity: 0.85; }
  100%{ offset-distance: 100%; -webkit-offset-distance: 100%; opacity: 0; transform: scale(0.3); }
}

/* ── Stats row below constellation ──────────────────────── */
.intg-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 64px;
  padding: 28px 32px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 28px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.06);
}
.intg-stat {
  flex: 1;
  text-align: center;
}
.intg-stat-val {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(120deg, var(--accent) 0%, var(--teal) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 5px;
  line-height: 2;
}
.intg-stat-label {
  font-size: 0.78rem; color: var(--muted); font-weight: 400;
}
.intg-stat-sep {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.10), transparent);
  flex-shrink: 0;
  margin: 0 8px;
}

/* ── RTL ──────────────────────────────────────────────────── */
[dir="rtl"] .intg-card  { flex-direction: row-reverse; }
[dir="rtl"] .intg-badge { flex-direction: row-reverse; }
[dir="rtl"] .intg-stats-row { flex-direction: row-reverse; }

/* ── Mobile: 2-column grid fallback (no orbital / no SVG) ── */
@media (max-width: 900px) {
  .intg-wrap    { margin-top: 48px; padding: 0 16px; }
  .intg-scene {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    min-height: auto;
    padding: 0;
  }
  .intg-hub {
    grid-column: 1 / -1;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    width: 154px; height: 154px;
    margin: 0 auto 24px;
    top: auto; left: auto;
  }
  .intg-svg            { display: none !important; }
  .intg-pulse-dot      { display: none !important; }
  .intg-hub-glow       { display: none; }
  .intg-card {
    position: static !important;
    width: auto !important;
    margin-top: 0 !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .intg-card--mid {
    top: auto !important;
    margin-top: 0 !important;
  }
  .intg-card:hover { transform: translateY(-3px) !important; }
  .intg-stats-row { flex-wrap: wrap; gap: 16px; }
  .intg-stat      { min-width: 120px; }
  .intg-stat-sep  { display: none; }
}
@media (max-width: 480px) {
  .intg-scene { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════
   §5  WHY ZENSMAN
════════════════════════════════════════════════════════════ */
.why-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.why-left { display: flex; flex-direction: column; }
.why-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.stat-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 32px 28px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.3s, border-color 0.3s;
}
.stat-card:hover { transform: translateY(-4px); border-color: rgba(95,190,151,0.45); }
.stat-num {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1;
  background: linear-gradient(120deg, var(--accent) 0%, var(--teal) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 10px;
}
.stat-label { font-size: 0.85rem; color: var(--muted); font-weight: 400; }


/* ════════════════════════════════════════════════════════════
   §6  PRICING
════════════════════════════════════════════════════════════ */

/* ── Animated background ─────────────────────────────────── */
.s-pricing { position: relative; overflow: hidden; }
.price-bg  { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

/* Floating particle canvas covers full section */
.price-bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Rotating conic light rays — reference's beam effect in brand purple/mint */
.price-bg-rays {
  position: absolute;
  width: 1500px; height: 1500px;
  left: 50%; top: 42%; transform: translate(-50%,-50%);
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,   rgba(84,45,187,0.055) 4deg,  transparent 9deg,
    transparent 26deg,  rgba(84,45,187,0.040) 31deg,  transparent 36deg,
    transparent 50deg,  rgba(95,190,151,0.028) 55deg, transparent 60deg,
    transparent 76deg,  rgba(84,45,187,0.060) 81deg,  transparent 86deg,
    transparent 102deg, rgba(95,190,151,0.030) 107deg,transparent 112deg,
    transparent 127deg, rgba(84,45,187,0.045) 132deg, transparent 137deg,
    transparent 153deg, rgba(95,190,151,0.022) 158deg,transparent 163deg,
    transparent 179deg, rgba(84,45,187,0.055) 184deg, transparent 189deg,
    transparent 206deg, rgba(95,190,151,0.028) 211deg,transparent 216deg,
    transparent 231deg, rgba(84,45,187,0.040) 236deg, transparent 241deg,
    transparent 257deg, rgba(95,190,151,0.025) 262deg,transparent 267deg,
    transparent 281deg, rgba(84,45,187,0.050) 286deg, transparent 291deg,
    transparent 308deg, rgba(95,190,151,0.020) 313deg,transparent 318deg,
    transparent 332deg, rgba(84,45,187,0.058) 337deg, transparent 342deg,
    transparent 357deg, rgba(95,190,151,0.028) 360deg
  );
  animation: price-rays-turn 44s linear infinite;
}
@keyframes price-rays-turn {
  from { transform: translate(-50%,-50%) rotate(0deg);   }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}

/* Ambient orbs */
.price-bg-orb { position: absolute; border-radius: 50%; filter: blur(82px); }
.price-orb-c {
  width: 740px; height: 740px;
  left: 50%; top: 54%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(84,45,187,0.27) 0%, transparent 62%);
  animation: price-orb-pulse 7s ease-in-out infinite;
}
@keyframes price-orb-pulse {
  0%,100% { transform: translate(-50%,-50%) scale(1);    opacity: 0.72; }
  50%     { transform: translate(-50%,-50%) scale(1.17); opacity: 1;    }
}
.price-orb-l {
  width: 380px; height: 380px; left: -70px; top: 40%;
  background: radial-gradient(circle, rgba(84,45,187,0.15) 0%, transparent 65%);
  animation: price-orb-ld 20s ease-in-out infinite;
}
@keyframes price-orb-ld {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-46px); }
}
.price-orb-r {
  width: 340px; height: 340px; right: -55px; top: 36%;
  background: radial-gradient(circle, rgba(95,190,151,0.11) 0%, transparent 65%);
  animation: price-orb-rd 17s ease-in-out infinite;
}
@keyframes price-orb-rd {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(50px); }
}

/* ── Toggle ──────────────────────────────────────────────── */
.pricing-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 28px; padding: 5px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 40px; position: relative; z-index: 2;
}
.ptog-btn {
  padding: 9px 22px; border-radius: 30px;
  font-size: 0.85rem; font-weight: 600; color: rgba(242,242,242,0.55);
  transition: all 0.25s;
}
.ptog-active { background: var(--card-bg); border: 1px solid var(--card-border); color: var(--light); }

/* ── Card grid ───────────────────────────────────────────── */
.pricing-row {
  height: 500px;
  display: grid;
  grid-template-columns: 1fr 1.08fr 1.08fr 1fr;
  gap: 22px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* Side cards */
.price-card {
  background: rgba(8, 10, 30, 0.80);
  border: 1px solid rgba(84,45,187,0.24);
  border-radius: var(--radius); padding: 36px 30px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 48px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.30s, border-color 0.30s, box-shadow 0.30s;
  height: 90%;
  min-width: 0;
  container-type: inline-size;
}
.price-card:hover {
  transform: translateY(-7px);
  border-color: rgba(84,45,187,0.46);
  box-shadow: 0 16px 60px rgba(84,45,187,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Featured card — gradient border via wrapper padding */
.price-featured-wrap {
  align-self: stretch;
  height: 100%;
  min-width: 0;
  padding: 1.5px;
  border-radius: calc(var(--radius) + 1.5px);
  background: linear-gradient(155deg,
    rgba(84,45,187,1)    0%,
    rgba(145,252,178,0.65) 48%,
    rgba(84,45,187,0.95) 100%
  );
  background-size: 200% 200%;
  animation: price-border-flow 5s ease-in-out infinite;
  box-shadow:
    0 0 0 1px rgba(84,45,187,0.28),
    0 0 55px rgba(84,45,187,0.38),
    0 0 110px rgba(84,45,187,0.18),
    0 28px 88px rgba(0,0,0,0.55);
}
@keyframes price-border-flow {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.price-card--featured {
  background: linear-gradient(162deg, rgba(14,6,40,0.97) 0%, rgba(8,6,26,0.99) 100%);
  border: none !important;
  border-radius: calc(var(--radius) - 0.5px);
  padding: 40px 32px;
  height: 100%;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  cursor: default;
}

/* Starfield canvas inside featured card */
.price-star-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; opacity: 0.60;
}

/* Soft inner purple glow at bottom of featured card */
.price-card-inner-glow {
  position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%);
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(84,45,187,0.30) 0%, transparent 65%);
  pointer-events: none; filter: blur(22px);
}

/* Most Popular badge */
.price-featured-badge {
  position: absolute; top: 20px; right: 20px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 20px;
  background: rgba(145,252,178,0.12); border: 1px solid rgba(145,252,178,0.38);
  color: var(--accent); z-index: 1;
}

/* Typography */
.price-tier {
  font-size: 0.84rem; font-weight: 600; color: var(--muted);
  letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 18px;
  position: relative; z-index: 1;
}
.price-amount {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px;
  position: relative; z-index: 1;
}
.price-val      { font-size: clamp(1.6rem, 9cqi, 3rem); font-weight: 800; color: var(--light); letter-spacing: -0.04em; line-height: 1; }
.price-before   { font-size: 1.1rem; font-weight: 600; color: var(--muted); text-decoration: line-through; align-self: center; }
.price-currency { height: 1.4rem; width: auto; align-self: center; filter: brightness(0) invert(1) opacity(0.75); }
.price-period { font-size: 0.88rem; color: var(--muted); }
.price-sub    {
  font-size: 0.875rem; color: var(--muted); margin-bottom: 28px;
  line-height: 1.63; position: relative; z-index: 1;
}

/* Feature list */
.price-features {
  display: flex; flex-direction: column; gap: 12px; margin: 28px 0px;
  flex: 1; position: relative; z-index: 1;
}
.price-features li {
  font-size: 0.875rem; color: rgba(242,242,242,0.76);
  padding-inline-start: 20px; position: relative;
}
.price-features li::before {
  content: '✓'; position: absolute; inset-inline-start: 0;
  color: var(--teal); font-weight: 700;
}
.price-feature-off { opacity: 0.34; }
.price-feature-off::before { content: '—' !important; color: var(--muted-soft) !important; }

/* Language-driven feature list visibility */
:root[lang="ar"] .price-features-en { display: none; }
:root[lang="en"] .price-features-ar { display: none; }

/* Card footer */
.price-card-foot {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: auto; position: relative; z-index: 1;
}

/* Tier chip (like 50x / 3x / Unlimited in reference) */
.price-tier-chip {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 20px;
  background: rgba(84,45,187,0.16); border: 1px solid rgba(84,45,187,0.28);
  color: rgba(242,242,242,0.50);
}
.price-tier-chip--pro {
  background: rgba(95,190,151,0.10); border-color: rgba(95,190,151,0.28);
  color: var(--teal);
}

/* CTA buttons */
.price-btn {
  width: 100%;
  display: block; text-align: center; padding: 14px 24px; border-radius: 40px;
  font-size: 0.9rem; font-weight: 700; letter-spacing: -0.01em;
  transition: all 0.25s;
}
.price-btn--ghost {
  border: 1px solid rgba(255,255,255,0.16); color: rgba(242,242,242,0.72);
}
.price-btn--ghost:hover {
  border-color: rgba(145,252,178,0.36); color: var(--light);
  background: rgba(145,252,178,0.05); transform: translateY(-2px);
}
.price-btn--primary { background: linear-gradient(110deg, var(--purple), var(--teal)); color: #fff; }
.price-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(84,45,187,0.44); }


/* ════════════════════════════════════════════════════════════
   §8  CONTROL
════════════════════════════════════════════════════════════ */
.control-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; }
.control-left { display: flex; flex-direction: column; }
.control-checklist { margin-top: 36px; display: flex; flex-direction: column; gap: 16px; }
.control-checklist li {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.92rem; color: rgba(242,242,242,0.82); font-weight: 500;
}
.chk-icon {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: rgba(95,190,151,0.15); border: 1.5px solid rgba(95,190,151,0.45);
  display: flex; align-items: center; justify-content: center;
}
.chk-icon::after {
  content: '✓'; color: var(--teal); font-size: 0.7rem; font-weight: 800;
  line-height: 1; display: block;
  font-family: var(--font-en); /* always use Latin font for the symbol */
}

/* Dashboard mockup */
.dash-mockup {
  background: rgba(12,24,28,0.90); border: 1px solid rgba(84,45,187,0.35);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(145,252,178,0.06),
              inset 0 1px 0 rgba(255,255,255,0.07);
}
.dash-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(84,45,187,0.2);
}
.dash-dot { width: 10px; height: 10px; border-radius: 50%; }
.dash-dot.red    { background: #FF5F57; }
.dash-dot.yellow { background: #FFBD2E; }
.dash-dot.green  { background: #28C840; }
.dash-title { margin-inline-start: 8px; font-size: 0.78rem; font-weight: 600; color: rgba(242,242,242,0.50); }
.dash-body { padding: 20px; }
.dash-top-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 20px; }
.dash-metric {
  background: rgba(84,45,187,0.12); border: 1px solid rgba(84,45,187,0.25);
  border-radius: var(--radius-sm); padding: 14px;
}
.dm-label { font-size: 0.68rem; color: var(--muted-soft); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.dm-val   { font-size: 1.0rem; font-weight: 700; color: var(--light); margin-bottom: 2px; }
.dm-change { font-size: 0.70rem; font-weight: 600; }
.dm-change.up { color: var(--teal); }

/* Mini chart */
.dash-chart { margin-bottom: 18px; }
.chart-bars  { display: flex; align-items: flex-end; gap: 4px; height: 64px; margin-bottom: 4px; }
.chart-bar {
  flex: 1; border-radius: 3px 3px 0 0;
  background: rgba(84,45,187,0.35); border: 1px solid rgba(84,45,187,0.4);
  transition: background 0.3s;
}
.chart-bar--active { background: linear-gradient(to top, var(--purple), var(--teal)); border-color: var(--teal); }
.chart-labels { display: flex; justify-content: space-between; }
.chart-labels span { font-size: 0.60rem; color: var(--muted-soft); }

/* Asset list */
.dash-assets { display: flex; flex-direction: column; gap: 10px; }
.dash-asset { display: flex; align-items: center; gap: 10px; }
.asset-icon { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; flex-shrink: 0; }
.asset-eth  { background: rgba(98,126,234,0.25); color: #627EEA; border: 1px solid rgba(98,126,234,0.4); }
.asset-btc  { background: rgba(247,147,26,0.25);  color: #F7931A; border: 1px solid rgba(247,147,26,0.4); }
.asset-sol  { background: rgba(153,69,255,0.25);  color: #9945FF; border: 1px solid rgba(153,69,255,0.4); }
.asset-other { background: rgba(95,190,151,0.15); color: var(--teal); border: 1px solid rgba(95,190,151,0.3); }
.asset-name { font-size: 0.78rem; color: rgba(242,242,242,0.75); width: 60px; flex-shrink: 0; }
.asset-alloc { font-size: 0.72rem; color: var(--muted-soft); width: 30px; flex-shrink: 0; text-align: end; }
.asset-bar-wrap { flex: 1; height: 4px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; }
.asset-bar { height: 100%; background: linear-gradient(90deg, var(--purple), var(--teal)); border-radius: 2px; }
[dir="rtl"] .asset-bar { background: linear-gradient(270deg, var(--purple), var(--teal)); }
.asset-val { font-size: 0.72rem; font-weight: 600; width: 42px; text-align: end; flex-shrink: 0; }
.asset-val.up   { color: var(--teal); }
.asset-val.down { color: #f66; }


/* ════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════ */
.footer { background: var(--bg); padding: 72px 0 0; }
.footer-top {
  display: grid; grid-template-columns: 1.3fr 2fr; gap: 80px;
  padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-logo { display: block; margin-bottom: 16px; }
.footer-tagline { font-size: 0.88rem; line-height: 1.7; color: var(--muted); margin-bottom: 28px; max-width: 280px; }
.footer-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col-title { font-size: 0.80rem; font-weight: 700; color: var(--light); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.footer-link { font-size: 0.875rem; color: var(--muted); transition: color 0.2s; }
.footer-link:hover { color: var(--accent); }
.footer-bottom {
  padding: 22px 0; display: flex; justify-content: space-between; align-items: center;
  font-size: 0.80rem; color: rgba(255,255,255,0.28);
}
.footer-socials { display: flex; gap: 12px; }
.social-link {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center; color: var(--muted);
  transition: all 0.2s;
}
.social-link:hover { border-color: rgba(145,252,178,0.4); color: var(--accent); }


/* ════════════════════════════════════════════════════════════
   ── RTL LAYOUT OVERRIDES ──────────────────────────────────
   All rules use [dir="rtl"] on the root html element.
   Logical properties (inline-start/end) are used in base
   styles where possible; physical overrides collected here.
════════════════════════════════════════════════════════════ */

/* ── Navbar ── */
[dir="rtl"] .nav-inner  { flex-direction: row-reverse; }
[dir="rtl"] .nav-logo   { flex-direction: row-reverse; }
[dir="rtl"] .nav-pill   { flex-direction: row-reverse; }
[dir="rtl"] .nav-right  { flex-direction: row-reverse; }
/* [dir="rtl"] .hamburger  { margin-left: 0; margin-right: auto; } */

/* ── Hero badge ── */
[dir="rtl"] .badge { flex-direction: row-reverse; }

/* ── Hero headline: mask sweeps right→left in RTL ── */
/* (handled by headline-sweep-rtl keyframe + paused state — no extra rule needed) */

/* ── CTA buttons: flip padding & order, flip arrow ── */
[dir="rtl"] .cta-btn {
  padding: 6px 26px 6px 6px;       /* heavy padding moves to inline-end (right) */
  flex-direction: row-reverse;
}
[dir="rtl"] .cta-text { padding-right: 0; padding-left: 18px; }
[dir="rtl"] .cta-circle svg { transform: scaleX(-1); }
/* Move circle toward arrow direction (left in RTL) on hover */
[dir="rtl"] .cta-btn:hover .cta-circle { transform: translateX(-2px) scaleX(-1); }

/* ── Floating cards ── */
[dir="rtl"] .cards-row          { flex-direction: row-reverse; }
/* Keep dot at inline-start (right in RTL), text follows — no row-reverse needed */
[dir="rtl"] .card-label         { flex-direction: row; direction: rtl; align-items: center; }
[dir="rtl"] .card-main-header   { flex-direction: row-reverse; align-items: center; }
[dir="rtl"] .card-main-body     { flex-direction: row-reverse; }
[dir="rtl"] .lock-badge         { right: auto; left: 16px; }
[dir="rtl"] .card-main-controls { flex-direction: row-reverse; align-items: center; }

/* ── How It Works ── */
[dir="rtl"] .step-connector     { transform: scaleX(-1); }
[dir="rtl"] .step-card          { text-align: start; }
[dir="rtl"] .step-card::before  { transform-origin: end; }

/* ── Features ── */
[dir="rtl"] .feat-large,
[dir="rtl"] .feat-sm,
[dir="rtl"] .feat-third  { direction: rtl; text-align: start; }
[dir="rtl"] .feat-icon-lg,
[dir="rtl"] .feat-icon-sm { margin-inline-start: 0; margin-inline-end: auto; }

/* ── Architecture ── */
[dir="rtl"] .arch-panel              { padding: 32px 48px 28px 40px; }
[dir="rtl"] .arch-panel:hover        { transform: translateX(-6px); }
[dir="rtl"] .arch-panel-edge         { left: auto; right: 0; border-radius: 0 2px 2px 0; }
[dir="rtl"] .arch-panel-ghost        { right: auto; left: 28px; }
[dir="rtl"] .arch-panel-head         { flex-direction: row-reverse; }
[dir="rtl"] .arch-panel-meta         { text-align: start; }
[dir="rtl"] .arch-kpi                { align-items: flex-start; }
[dir="rtl"] .arch-panel-foot         { flex-direction: row-reverse; }
[dir="rtl"] .arch-tags               { flex-direction: row-reverse; }
[dir="rtl"] .arch-bridge::before     { left: auto; right: 22px; }
[dir="rtl"] .arch-bridge-dot         { left: auto; right: 22px; transform: translateX(50%); }
[dir="rtl"] .arch-ticker-track       { animation-direction: reverse; }

/* ── Why section ── */
[dir="rtl"] .why-grid  { direction: rtl; }
[dir="rtl"] .why-stats { direction: rtl; }
[dir="rtl"] .why-left  { align-items: flex-start; text-align: start; }

/* ── Pricing ── */
[dir="rtl"] .price-featured-badge { right: auto; left: 20px; }
[dir="rtl"] .price-features li    { direction: rtl; padding-inline-start: 20px; padding-inline-end: 0; }
[dir="rtl"] .price-amount         { justify-content: flex-start; }
[dir="rtl"] .price-before         { order: 1; }
[dir="rtl"] .price-val            { order: 2; }
[dir="rtl"] .price-currency       { order: 3; }
[dir="rtl"] .price-period         { order: 4; }
[dir="rtl"] .price-tier-chip      { align-self: flex-start; }
[dir="rtl"] .price-card-foot      { align-items: flex-start; }

/* ── Control section ── */
[dir="rtl"] .control-grid         { direction: rtl; }
[dir="rtl"] .control-left         { align-items: flex-start; }
[dir="rtl"] .control-checklist li { flex-direction: row-reverse; align-items: center; }
[dir="rtl"] .section-sub--left    { text-align: start; }

/* ── Dashboard mockup ── */
[dir="rtl"] .dash-header   { flex-direction: row-reverse; }
[dir="rtl"] .dash-top-row  { direction: rtl; }
[dir="rtl"] .dash-assets   { direction: rtl; }
[dir="rtl"] .dash-asset    { flex-direction: row-reverse; }
[dir="rtl"] .asset-bar     { background: linear-gradient(270deg, var(--purple), var(--teal)); }
[dir="rtl"] .asset-val     { text-align: start; }
[dir="rtl"] .asset-alloc   { text-align: start; }
[dir="rtl"] .chart-labels  { direction: rtl; }

/* ── Footer ── */
[dir="rtl"] .footer-top    { direction: rtl; }
[dir="rtl"] .footer-brand  { text-align: start; }
[dir="rtl"] .footer-cols   { direction: rtl; }
[dir="rtl"] .footer-bottom { flex-direction: row-reverse; }
/* Logo follows RTL naturally so it aligns with tagline below it */
[dir="rtl"] .footer-logo   { direction: rtl; }

/* ── Headline line-height: Arabic glyphs need more vertical room ── */
[dir="rtl"] .headline { line-height: 1.35; }

/* ── Integrations marquee: flip fade mask ── */
[dir="rtl"] .marquee-wrap {
  -webkit-mask-image: linear-gradient(to left, transparent, black 10%, black 90%, transparent);
          mask-image: linear-gradient(to left, transparent, black 10%, black 90%, transparent);
}

/* ── Eyebrow lines in RTL ── */
[dir="rtl"] .eyebrow { flex-direction: row-reverse; }
[dir="rtl"] .eyebrow-line:first-child {
  background: linear-gradient(to left, transparent, var(--teal));
}
[dir="rtl"] .eyebrow-line:last-child {
  background: linear-gradient(to right, transparent, var(--teal));
}
[dir="rtl"] .eyebrow--left { flex-direction: row; justify-content: flex-start; }

/* ── Section heading: left-aligned sections become right-aligned in RTL ── */
[dir="rtl"] .section-heading--left { text-align: start; }


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .why-grid          { grid-template-columns: 1fr; gap: 56px; }
  .control-grid      { grid-template-columns: 1fr; gap: 56px; }
  .footer-top        { grid-template-columns: 1fr; gap: 48px; }
  .footer-cols       { grid-template-columns: repeat(3,1fr); }
  .arch-panel-head   { flex-wrap: wrap; gap: 14px; }
  .arch-kpi          { align-items: flex-start; }
}
@media (max-width: 900px) {
  .nav-pill  { display: none; }
  .nav-right {margin-left: auto;}
  .nav-right .nav-cta-group { display: none; }
  .hamburger { margin-left: 10px; display: flex; }
  .card-sm   { display: none; }
  .card-main { max-width: 90vw; }
  .cards-row { justify-content: center; }
  .pricing-row { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; height: auto; }
  .price-card { height: auto; }
  .price-featured-wrap { order: -1; height: auto; }
  .price-card--featured { height: auto; }
  .price-card--featured { padding: 36px 28px; }
  .why-stats { grid-template-columns: repeat(2,1fr); }
  .feat-showcase { flex-direction: column; gap: 36px; }
  .feat-convo-wrap { width: 100%; flex: none; }
  .feat-list-panel { padding-top: 0; }
}
@media (max-width: 640px) {
  :root { --section-py: 72px; }
  .container { padding: 0 20px; }
  .steps-row      { flex-direction: column; align-items: center; }
  .step-connector { display: none; }
  .arch-panel          { padding: 24px 20px 22px 30px; }
  .arch-panel-ghost    { font-size: 5rem; right: 10px; }
  .arch-live-badge,
  .arch-kpi            { display: none; }
  .arch-ticker         { display: none; }
  .feat-chat-body      { min-height: 200px; }
  .arch-tags           { flex-wrap: wrap; }
  .footer-cols    { grid-template-columns: 1fr 1fr; }
  .footer-bottom  { flex-direction: column; gap: 12px; text-align: center; }
  .dash-top-row   { grid-template-columns: 1fr 1fr; }
  .pricing-row    { max-width: 100%; }
}


/* ════════════════════════════════════════════════════════════
   LOGO INTRO ANIMATION
   ─────────────────────────────────────────────────────────
   #intro-overlay   — full-screen dark backdrop (z 8999)
   #intro-logo-el   — fixed-position animated logo (z 9000)
   Both removed from DOM after animation finishes.
════════════════════════════════════════════════════════════ */

/* The PNG image used as the navbar logo */
.nav-logo-img {
  display: block;
  height: 36px;
  width: auto;
  /* Pixel-perfect rendering during scale animations */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
/* Slightly smaller in the footer */
.nav-logo-img--footer { height: 30px; }

/* Override nav-logo gap/text styles when it holds a pure image */
a.nav-logo { gap: 0; }

/* Full-screen overlay — same colour as hero bg for seamless dissolve */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 8999;
  background: #08191B;
  pointer-events: none;
  /* will be transitioned to opacity:0 by JS */
}

/* The intro logo — fixed to viewport, manipulated entirely by JS */
#intro-logo-el {
  position: fixed;
  /* Centred horizontally, 55% down vertically — the "splash" resting point */
  left: 50%;
  top: 55%;
  /* Responsive width: up to 480px, never wider than 84vw */
  width: min(480px, 84vw);
  height: auto;
  /* Initial state: centred on its own axis, pushed 420px below splash point
     (sits below or near the bottom of most viewports — rises on entry) */
  transform: translate(-50%, -50%) translateY(420px);
  opacity: 0;
  z-index: 9000;
  pointer-events: none;
  /* GPU layer — prevents any compositing artefact during the shrink */
  will-change: transform, opacity;
  /* Preserve sharpness at any scale factor */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* Disable default browser drag-image */
  -webkit-user-drag: none;
  user-select: none;
}

/* ════════════════════════════════════════════════════════════
   WHATSAPP FLOATING BUTTON
════════════════════════════════════════════════════════════ */
.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9000;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(18, 10, 45, 0.82);
  border: 1px solid rgba(84,45,187,0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 0 0 1px rgba(84,45,187,0.20),
    0 8px 32px rgba(0,0,0,0.45),
    0 0 22px rgba(84,45,187,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #25D366;
  text-decoration: none;
  transition: transform 0.28s var(--ease), box-shadow 0.28s, border-color 0.28s;
  animation: wa-entrance 0.6s var(--ease) 1.5s both;
}

@keyframes wa-entrance {
  from { transform: scale(0.5) translateY(20px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

.wa-float:hover {
  transform: scale(1.10) translateY(-3px);
  border-color: rgba(37,211,102,0.55);
  box-shadow:
    0 0 0 1px rgba(37,211,102,0.25),
    0 12px 40px rgba(0,0,0,0.50),
    0 0 30px rgba(37,211,102,0.28);
}

.wa-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(37,211,102,0.50));
  transition: filter 0.28s;
}
.wa-float:hover .wa-icon {
  filter: drop-shadow(0 0 10px rgba(37,211,102,0.75));
}

/* Tooltip */
.wa-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--light);
  background: rgba(18,10,45,0.90);
  border: 1px solid rgba(84,45,187,0.38);
  border-radius: 8px;
  padding: 6px 12px;
  backdrop-filter: blur(12px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s, transform 0.22s;
}
.wa-float:hover .wa-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* RTL — flip to left side, tooltip to right */
[dir="rtl"] .wa-float       { right: auto; left: 28px; }
[dir="rtl"] .wa-tooltip     { right: auto; left: calc(100% + 12px); }
[dir="rtl"] .wa-float:hover .wa-tooltip { transform: translateY(-50%) translateX(0); }

/* Pulse ring (subtle, continuous) */
.wa-float::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(37,211,102,0.30);
  animation: wa-pulse 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.55); opacity: 0;   }
  100% { transform: scale(1.55); opacity: 0;   }
}

@media (max-width: 640px) {
  .wa-float   { bottom: 20px; right: 18px; width: 50px; height: 50px; }
  .wa-tooltip { display: none; }
  [dir="rtl"] .wa-float { right: auto; left: 18px; }
}