/* =========================================================
   AIM DEV — Production-Grade CSS (Phase 1)
   Design tokens · Reset · Navbar · Language Switcher · RTL
   ========================================================= */

:root{
  /* Color tokens — Cosmic Tech Theme */
  --bg: #06081a;
  --bg-2: #0a0e27;
  --bg-3: #111538;
  --surface: rgba(255,255,255,0.04);
  --surface-2: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.08);
  --border-2: rgba(255,255,255,0.14);

  --text: #e9ecff;
  --text-dim: #a4abd6;
  --text-muted: #6b7299;

  --primary: #00d4ff;
  --secondary: #7b5cff;
  --accent: #ff4ecd;
  --success: #2ee6a6;
  --warn: #ffb547;

  --grad-1: linear-gradient(135deg, #00d4ff 0%, #7b5cff 50%, #ff4ecd 100%);
  --grad-2: linear-gradient(135deg, #2ee6a6 0%, #00d4ff 100%);
  --grad-3: linear-gradient(135deg, #ff4ecd 0%, #ffb547 100%);
  --grad-glow: radial-gradient(circle at 50% 0%, rgba(123,92,255,.35), transparent 60%);

  /* Spacing & radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(0,0,0,.25);
  --shadow-md: 0 8px 30px rgba(0,0,0,.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.45);
  --glow-primary: 0 0 30px rgba(0,212,255,.45);
  --glow-secondary: 0 0 40px rgba(123,92,255,.5);

  /* Type */
  --font-th: 'Prompt', system-ui, sans-serif;
  --font-en: 'Inter', system-ui, sans-serif;
  --font-ar: 'Noto Sans Arabic', system-ui, sans-serif;
  --font-cn: 'Noto Sans SC', system-ui, sans-serif;

  /* Transitions */
  --t-fast: 150ms cubic-bezier(.4,0,.2,1);
  --t-base: 280ms cubic-bezier(.4,0,.2,1);
  --t-slow: 600ms cubic-bezier(.4,0,.2,1);

  /* Z layers */
  --z-nav: 100;
  --z-dropdown: 110;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* ============================ RESET ============================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family: var(--font-th), var(--font-en);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image:
    radial-gradient(at 20% 0%, rgba(123,92,255,.15) 0, transparent 50%),
    radial-gradient(at 80% 10%, rgba(0,212,255,.12) 0, transparent 50%),
    radial-gradient(at 50% 100%, rgba(255,78,205,.08) 0, transparent 50%);
  background-attachment: fixed;
}

/* Language-specific font swapping */
html[data-lang="en"] body{font-family: var(--font-en), system-ui, sans-serif}
html[data-lang="ar"] body{font-family: var(--font-ar), system-ui, sans-serif}
html[data-lang="zh"] body{font-family: var(--font-cn), system-ui, sans-serif}

img,svg{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none;transition:color var(--t-fast)}
ul,ol{list-style:none}
input,textarea,select{font:inherit;color:inherit}

::selection{background:var(--secondary);color:#fff}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--primary),var(--secondary));border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--secondary),var(--accent))}

/* Skip link */
.skip-link{
  position:fixed;top:-100px;left:8px;z-index:var(--z-toast);
  padding:12px 18px;background:var(--primary);color:#000;border-radius:8px;
  font-weight:700;transition:top var(--t-base)
}
.skip-link:focus{top:8px}

/* Focus visible */
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}

/* ============================ ANNOUNCE BAR ============================ */
.announce-bar{
  position:relative;
  background: var(--grad-1);
  color:#fff;
  overflow:hidden;
  height:36px;
  display:flex;align-items:center;
  font-size:13px;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.announce-track{
  display:flex;gap:60px;
  white-space:nowrap;
  animation: marquee 35s linear infinite;
  padding-left:100%;
}
.announce-track span strong{font-weight:700}
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-100%)}
}
html[dir="rtl"] .announce-track{animation-direction:reverse}

/* ============================ NAVBAR ============================ */
.navbar{
  position:sticky;top:0;z-index:var(--z-nav);
  background: rgba(6,8,26,.78);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
  transition: background var(--t-base), box-shadow var(--t-base);
}
.navbar.scrolled{
  background: rgba(6,8,26,.92);
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}

.nav-container{
  max-width:1400px;margin:0 auto;
  padding: 14px 24px;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
}

/* Logo */
.nav-logo{
  display:flex;align-items:center;gap:12px;
  flex-shrink:0;
  transition: transform var(--t-base);
}
.nav-logo:hover{transform:translateY(-1px)}
.logo-icon{
  width:44px;height:44px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.04);
  border-radius:12px;
  border:1px solid var(--border-2);
  box-shadow: var(--glow-primary);
  transition: transform var(--t-base);
}
.nav-logo:hover .logo-icon{transform:rotate(-8deg) scale(1.05)}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-main{
  font-weight:800;font-size:22px;letter-spacing:-.5px;
  background: var(--grad-1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.logo-accent{margin-left:2px;color:var(--text)}
.logo-sub{font-size:10.5px;color:var(--text-dim);font-weight:500;letter-spacing:.6px;text-transform:uppercase}

/* Nav menu */
.nav-menu{flex:1;display:flex;justify-content:center}
.nav-list{display:flex;align-items:center;gap:6px}
.nav-link{
  position:relative;
  padding:10px 16px;
  font-size:15px;font-weight:500;
  color:var(--text-dim);
  border-radius:var(--r-pill);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-link::before{
  content:'';position:absolute;left:50%;bottom:4px;
  width:0;height:2px;
  background: var(--grad-1);
  border-radius:2px;
  transform:translateX(-50%);
  transition: width var(--t-base);
}
.nav-link:hover{color:var(--text);background:var(--surface)}
.nav-link.active{color:var(--text)}
.nav-link.active::before{width:24px}

/* Right cluster */
.nav-right{display:flex;align-items:center;gap:12px;flex-shrink:0}

/* Language switcher */
.lang-switcher{position:relative}
.lang-current{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;
  background: var(--surface);
  border:1px solid var(--border-2);
  border-radius: var(--r-pill);
  font-size:14px;font-weight:600;
  color:var(--text);
  transition: all var(--t-fast);
}
.lang-current:hover{
  background:var(--surface-2);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(0,212,255,.08);
}
.lang-flag{font-size:18px;line-height:1}
.lang-arrow{transition:transform var(--t-base)}
.lang-switcher.open .lang-arrow{transform:rotate(180deg)}

.lang-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;
  min-width:200px;
  background: rgba(15,18,55,.96);
  backdrop-filter: blur(20px);
  border:1px solid var(--border-2);
  border-radius:var(--r-lg);
  padding:6px;
  box-shadow: var(--shadow-lg);
  opacity:0;visibility:hidden;
  transform: translateY(-8px) scale(.97);
  transition: all var(--t-base);
  z-index: var(--z-dropdown);
}
.lang-switcher.open .lang-dropdown{
  opacity:1;visibility:visible;
  transform: translateY(0) scale(1);
}
.lang-option{
  width:100%;
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
  border-radius:var(--r-md);
  font-size:14px;font-weight:500;
  color:var(--text);
  transition: background var(--t-fast);
}
.lang-option:hover{background: var(--surface-2)}
.lang-option > span:first-child{font-size:20px;line-height:1}
.lang-option > span:nth-child(2){flex:1;text-align:left}
html[dir="rtl"] .lang-option > span:nth-child(2){text-align:right}
.lang-abbr{
  font-size:11px;font-weight:700;
  padding:3px 8px;
  background: var(--grad-1);
  color:#000;
  border-radius:var(--r-pill);
  letter-spacing:.5px;
}
.lang-option.active{
  background: linear-gradient(90deg, rgba(0,212,255,.12), transparent);
  color: var(--primary);
}

/* CTA button */
.btn-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;
  background: var(--grad-1);
  color:#fff;
  font-weight:700;font-size:14px;
  border-radius:var(--r-pill);
  position:relative;overflow:hidden;
  box-shadow: 0 8px 24px rgba(0,212,255,.25), 0 4px 12px rgba(123,92,255,.25);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.btn-cta::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  transform:translateX(-100%);
  transition: transform .8s;
}
.btn-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0,212,255,.4), 0 6px 18px rgba(123,92,255,.4);
}
.btn-cta:hover::before{transform:translateX(100%)}
.btn-cta-icon{font-size:16px}

/* Hamburger */
.hamburger{
  display:none;
  width:42px;height:42px;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  background:var(--surface);
  border:1px solid var(--border-2);
  border-radius:var(--r-md);
  transition: background var(--t-fast);
}
.hamburger:hover{background:var(--surface-2)}
.hamburger span{
  display:block;width:20px;height:2px;
  background:var(--text);border-radius:2px;
  transition: transform var(--t-base), opacity var(--t-base);
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Scroll progress */
.scroll-progress{
  position:absolute;bottom:0;left:0;height:2px;width:0%;
  background: var(--grad-1);
  transition: width 100ms linear;
  box-shadow: 0 0 8px var(--primary);
}

/* =========================================================
   PHASE 2 — HERO SECTION
   ========================================================= */
.hero{
  position:relative;
  min-height: calc(100vh - 68px);
  padding: 80px 24px 40px;
  overflow:hidden;
  isolation:isolate;
}

/* ---------- Background layers ---------- */
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}

.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 75%);
}

.hero-particles{position:absolute;inset:0;width:100%;height:100%}

/* Gradient orbs */
.orb{
  position:absolute;
  border-radius:50%;
  filter: blur(80px);
  opacity:.55;
  animation: orbFloat 18s ease-in-out infinite;
  will-change: transform;
}
.orb-1{width:520px;height:520px;top:-180px;left:-120px;background: radial-gradient(circle, #7b5cff, transparent 70%)}
.orb-2{width:420px;height:420px;top:20%;right:-140px;background: radial-gradient(circle, #00d4ff, transparent 70%);animation-delay:-6s}
.orb-3{width:480px;height:480px;bottom:-180px;left:25%;background: radial-gradient(circle, #ff4ecd, transparent 70%);animation-delay:-12s}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(40px,-30px) scale(1.08)}
  66%{transform:translate(-30px,30px) scale(.95)}
}

/* Floating chips */
.float-chip{
  position:absolute;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  background: rgba(15,18,55,.75);
  backdrop-filter: blur(12px);
  border:1px solid var(--border-2);
  border-radius: var(--r-pill);
  font-size: 12.5px;font-weight:600;
  color: var(--text);
  box-shadow: var(--shadow-md);
  animation: chipFloat 10s ease-in-out infinite;
  will-change: transform;
}
.float-chip svg{color: var(--primary)}
.float-chip-1{top:16%;left:3%;animation-delay:0s;color:var(--primary)}
.float-chip-1 svg{color:var(--primary)}
.float-chip-2{top:70%;left:6%;animation-delay:-2s}
.float-chip-2 svg{color:var(--accent)}
.float-chip-3{top:12%;right:3%;animation-delay:-4s}
.float-chip-3 svg{color:var(--secondary)}
.float-chip-4{top:55%;right:4%;animation-delay:-6s}
.float-chip-4 svg{color:var(--success)}
.float-chip-5{top:85%;right:32%;animation-delay:-8s}
.float-chip-5 svg{color:var(--warn)}
@keyframes chipFloat{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-14px) rotate(1.5deg)}
}
@media (max-width: 1000px){ .float-chip{display:none} }

/* ---------- Hero container ---------- */
.hero-container{
  max-width: 1400px;margin:0 auto;
  display:grid;grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items:center;
  padding-top: 20px;
}

/* ---------- Hero content ---------- */
.hero-content{animation: fadeUp 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}

.hero-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 18px;
  background: rgba(0,212,255,.08);
  border:1px solid rgba(0,212,255,.25);
  border-radius: var(--r-pill);
  font-size:13px;font-weight:600;color: var(--primary);
  margin-bottom: 26px;
  backdrop-filter: blur(10px);
  animation: pillGlow 3s ease-in-out infinite;
}
.pill-dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(46,230,166,.6);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(46,230,166,.6)}
  70%{box-shadow:0 0 0 10px rgba(46,230,166,0)}
  100%{box-shadow:0 0 0 0 rgba(46,230,166,0)}
}
@keyframes pillGlow{
  0%,100%{border-color: rgba(0,212,255,.25);box-shadow: 0 0 0 0 rgba(0,212,255,0)}
  50%{border-color: rgba(0,212,255,.5);box-shadow: 0 0 20px 0 rgba(0,212,255,.15)}
}

.hero-title{
  font-size: clamp(38px, 5.8vw, 72px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -1.5px;
  margin-bottom: 26px;
}
.hero-title-line1{display:block;color: var(--text);animation: fadeUp .8s .1s both}
.hero-title-dynamic{
  display:block;min-height:1.1em;
  animation: fadeUp .8s .25s both;
}
.hero-title-line3{display:block;color: var(--text-dim);font-weight:700;animation: fadeUp .8s .4s both}

.hero-type-wrap{
  position:relative;display:inline-flex;align-items:center;
}
.hero-type{
  background: var(--grad-1);
  -webkit-background-clip: text;background-clip: text;
  color:transparent;
  background-size: 200% 100%;
  animation: gradShift 5s linear infinite;
}
@keyframes gradShift{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}
.hero-caret{
  display:inline-block;
  width:4px;height:.9em;
  margin-left:6px;
  background: var(--primary);
  border-radius: 2px;
  animation: caretBlink .8s steps(2) infinite;
  vertical-align: baseline;
  box-shadow: 0 0 10px var(--primary);
}
@keyframes caretBlink{50%{opacity:0}}

.hero-sub{
  max-width: 600px;
  font-size: clamp(15px, 1.15vw, 18px);
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 36px;
  animation: fadeUp .8s .55s both;
}
.hero-sub strong{color: var(--text);font-weight:700}

/* CTAs */
.hero-cta{
  display:flex;flex-wrap:wrap;gap:14px;
  margin-bottom: 44px;
  animation: fadeUp .8s .7s both;
}
.btn-primary{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:10px;
  padding: 16px 28px;
  background: var(--grad-1);
  color: #fff;
  font-weight:700;font-size:15.5px;
  border-radius: var(--r-pill);
  box-shadow: 0 16px 40px rgba(0,212,255,.3), 0 6px 20px rgba(123,92,255,.3);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.btn-primary svg{position:relative;z-index:1}
.btn-primary span:not(.btn-primary-shine){position:relative;z-index:1}
.btn-primary-shine{
  position:absolute;inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shine 3.5s infinite;
}
@keyframes shine{
  0%,60%{transform:translateX(-100%)}
  80%,100%{transform:translateX(100%)}
}
.btn-primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(0,212,255,.45), 0 8px 28px rgba(123,92,255,.45);
}

.btn-ghost{
  display:inline-flex;align-items:center;gap:12px;
  padding: 14px 24px;
  background: var(--surface);
  border:1px solid var(--border-2);
  color: var(--text);
  font-weight: 600;font-size:15px;
  border-radius: var(--r-pill);
  transition: all var(--t-base);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover{
  background: var(--surface-2);
  border-color: var(--primary);
  transform: translateY(-3px);
}
.btn-play{
  width: 32px;height: 32px;
  display:grid;place-items:center;
  border-radius: 50%;
  background: var(--grad-1);
  color: #fff;
  box-shadow: 0 0 20px rgba(0,212,255,.5);
}

/* Trust Row */
.hero-trust{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  backdrop-filter: blur(14px);
  animation: fadeUp .8s .85s both;
}
.trust-item{display:flex;align-items:center;gap:12px}
.trust-icon{
  width: 44px;height:44px;
  display:grid;place-items:center;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  flex-shrink:0;
}
.trust-ic-1{color: var(--primary);background: rgba(0,212,255,.08)}
.trust-ic-2{color: var(--accent);background: rgba(255,78,205,.08)}
.trust-ic-3{color: var(--success);background: rgba(46,230,166,.08)}
.trust-ic-4{color: var(--warn);background: rgba(255,181,71,.08)}
.trust-meta{display:flex;flex-direction:column;line-height:1.15}
.trust-meta strong{font-size: 22px;font-weight:800;color:var(--text)}
.trust-meta span{font-size:12.5px;color:var(--text-dim)}

/* ---------- Hero Visual (right side) ---------- */
.hero-visual{
  position:relative;
  min-height: 560px;
  animation: fadeUp 1.1s .3s both;
}
.hv-main{
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  animation: hvFloat 8s ease-in-out infinite;
  will-change: transform;
}
@keyframes hvFloat{
  0%,100%{transform: translateY(0) rotateX(0) rotateY(0)}
  50%{transform: translateY(-10px) rotateX(1deg) rotateY(-1deg)}
}
.hv-glow{
  position:absolute;inset:-40px;
  background: var(--grad-1);
  border-radius: inherit;
  filter: blur(60px);
  opacity: .35;
  z-index:-1;
  animation: hvGlowPulse 4s ease-in-out infinite;
}
@keyframes hvGlowPulse{
  0%,100%{opacity:.3}
  50%{opacity:.5}
}
.hv-dashboard{
  background: linear-gradient(135deg, #0f1238, #1a1f4a);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hv-top{
  display:flex;align-items:center;gap:8px;
  padding: 14px 18px;
  background: rgba(0,0,0,.25);
  border-bottom: 1px solid var(--border);
}
.hv-dot{width:12px;height:12px;border-radius:50%}
.hv-dot-r{background:#ff5f57}
.hv-dot-y{background:#febc2e}
.hv-dot-g{background:#28c840}
.hv-url{
  margin-left: 18px;
  padding: 5px 14px;
  background: rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: 11.5px;color:var(--text-dim);
  font-family: ui-monospace, 'SF Mono', monospace;
}
.hv-body{display:grid;grid-template-columns: 60px 1fr;min-height: 340px}
.hv-side{
  padding: 14px 10px;
  border-right: 1px solid var(--border);
  display:flex;flex-direction:column;gap:14px;align-items:center;
  background: rgba(0,0,0,.15);
}
.hv-logo{
  width:36px;height:36px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.04);
  border-radius:10px;border:1px solid var(--border-2);
}
.hv-menu{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:6px}
.hv-menu-item{
  height:10px;border-radius:4px;
  background: rgba(255,255,255,.06);
}
.hv-menu-active{background: var(--grad-1);height:10px}
.hv-main-area{padding: 20px;display:flex;flex-direction:column;gap:18px}

.hv-kpis{display:grid;grid-template-columns: repeat(3, 1fr);gap:12px}
.hv-kpi{
  padding: 14px 14px 8px;
  background: rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius: var(--r-md);
  position:relative;overflow:hidden;
}
.hv-kpi-label{font-size:11px;color:var(--text-muted);font-weight:500}
.hv-kpi-value{font-size:20px;font-weight:800;margin-top:3px;color:var(--text)}
.hv-kpi-chart{
  height:18px;margin-top:6px;border-radius:4px;
  background-image: linear-gradient(90deg, transparent, transparent 2px, currentColor 2px, currentColor 3px, transparent 3px);
  background-size: 6px 100%;
  opacity:.3;
}
.hv-kpi-c1{color: var(--primary)}
.hv-kpi-c2{color: var(--accent)}
.hv-kpi-c3{color: var(--success)}

.hv-chart{
  flex:1;min-height: 140px;
  border-radius: var(--r-md);
  background: rgba(0,0,0,.25);
  border:1px solid var(--border);
  padding: 10px;
  overflow:hidden;
}
.hv-chart-path{animation: drawIn 2s ease-out both}
.hv-chart-line{
  stroke-dasharray: 1000;stroke-dashoffset:1000;
  animation: drawLine 2.5s ease-out .3s forwards;
  filter: drop-shadow(0 0 6px currentColor);
}
.hv-chart-l2{animation-delay:.6s}
@keyframes drawIn{from{opacity:0}to{opacity:1}}
@keyframes drawLine{to{stroke-dashoffset:0}}

/* Floating cards (right visual) */
.hv-card{
  position:absolute;
  background: rgba(15,18,55,.88);
  backdrop-filter: blur(20px) saturate(180%);
  border:1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-lg);
  animation: hvCardFloat 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes hvCardFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* AI card */
.hv-card-ai{
  top: -12px; left: -28px;
  width: 230px;
  animation-delay: -1s;
}
.hv-card-head{display:flex;align-items:center;gap:10px}
.hv-avatar{
  width: 34px;height:34px;
  display:grid;place-items:center;
  background: var(--grad-1);color:#fff;
  border-radius: 10px;
}
.hv-card-title{font-size:13px;font-weight:700;color:var(--text)}
.hv-card-sub{font-size:11px;color:var(--text-dim);display:flex;align-items:center;gap:5px;margin-top:2px}
.hv-live{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 6px var(--success);animation:pulseDot 1.5s infinite}
.hv-card-body{margin-top:10px;padding:8px 12px;background:var(--surface);border-radius:var(--r-md);min-height:32px;display:flex;align-items:center}
.hv-msg{display:flex;align-items:center;gap:4px}
.hv-dot-type{display:flex;gap:4px}
.hv-dot-type span{
  width:6px;height:6px;border-radius:50%;
  background: var(--primary);
  animation: typeDot 1.4s infinite;
}
.hv-dot-type span:nth-child(2){animation-delay:.2s;background:var(--secondary)}
.hv-dot-type span:nth-child(3){animation-delay:.4s;background:var(--accent)}
@keyframes typeDot{
  0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-4px);opacity:1}
}

/* Code card */
.hv-card-code{
  bottom: 60px; left: -40px;
  width: 260px;
  padding: 0;
  overflow:hidden;
  animation-delay: -3s;
}
.hv-code-head{
  display:flex;align-items:center;gap:6px;
  padding: 10px 14px;
  background: rgba(0,0,0,.3);
  border-bottom:1px solid var(--border);
}
.hv-code-dot{width:9px;height:9px;border-radius:50%}
.hv-code-r{background:#ff5f57}.hv-code-y{background:#febc2e}.hv-code-g{background:#28c840}
.hv-code-file{margin-left:8px;font-size:11px;color:var(--text-dim);font-family:ui-monospace,monospace}
.hv-code-body{
  padding: 14px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  line-height: 1.65;
  color: #c9d1ff;
  white-space: pre;
}
.c-c{color:#6b7299;font-style:italic}
.c-k{color:#ff4ecd;font-weight:600}
.c-v{color:#00d4ff}
.c-f{color:#ffb547}
.c-p{color:#a4abd6}
.c-s{color:#2ee6a6}

/* Stats card */
.hv-card-stat{
  bottom: -12px; right: -20px;
  width: 230px;
  animation-delay: -5s;
}
.hv-stat-top{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px;
}
.hv-stat-label{font-size:12px;color:var(--text-dim);font-weight:500}
.hv-stat-up{
  font-size:13px;font-weight:800;color:var(--success);
  background: rgba(46,230,166,.12);
  padding: 3px 10px;border-radius: var(--r-pill);
}
.hv-stat-bar{
  height:8px;border-radius:4px;
  background: var(--surface);
  overflow:hidden;
  margin-bottom: 10px;
}
.hv-stat-fill{
  height:100%;width:0;
  background: var(--grad-1);
  border-radius: inherit;
  animation: fillBar 2s ease-out 1s forwards;
  box-shadow: 0 0 10px var(--primary);
}
@keyframes fillBar{to{width:82%}}
.hv-stat-mini{
  display:flex;justify-content:space-between;
  font-size:11px;color:var(--text-dim);
}

/* ---------- Scroll indicator ---------- */
.hero-scroll{
  position: absolute;
  bottom: 90px;left: 50%;
  transform: translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color: var(--text-dim);font-size:12px;font-weight:500;
  letter-spacing: 1.5px;text-transform: uppercase;
  animation: fadeIn 1s 1.5s both, scrollBounce 2.5s ease-in-out 2s infinite;
  z-index: 2;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scrollBounce{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(8px)}
}
.hs-text{opacity:.7}
.hs-mouse{
  width:24px;height:40px;
  border:2px solid var(--text-dim);
  border-radius: 12px;
  display:grid;place-items:start center;
  padding-top: 6px;
}
.hs-wheel{
  width:3px;height:8px;border-radius:2px;
  background: var(--primary);
  animation: wheelMove 1.8s ease-in-out infinite;
}
@keyframes wheelMove{
  0%{transform:translateY(0);opacity:1}
  100%{transform:translateY(10px);opacity:0}
}

/* ---------- Hero Logos Marquee ---------- */
.hero-logos{
  position: absolute;
  bottom: 0;left:0;right:0;
  height: 60px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.3));
  border-top: 1px solid var(--border);
  overflow: hidden;
  display:flex;align-items:center;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.hero-logos-track{
  display:flex;gap: 70px;
  white-space: nowrap;
  animation: marqueeLogos 40s linear infinite;
}
.logo-item{
  font-size: 20px;font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 3px;
  opacity: .5;
  transition: color var(--t-fast), opacity var(--t-fast);
  flex-shrink:0;
}
.logo-item:hover{color: var(--primary);opacity:1}
@keyframes marqueeLogos{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ---------- Hero Responsive ---------- */
@media (max-width: 1050px){
  .hero-container{grid-template-columns: 1fr;gap:40px}
  .hero-visual{max-width: 520px;margin:0 auto;min-height: 460px}
  .hero-scroll{display:none}
}
@media (max-width: 720px){
  .hero{padding: 50px 16px 40px}
  .hero-title{font-size: clamp(32px, 8vw, 48px);letter-spacing:-.8px}
  .hero-trust{grid-template-columns: repeat(2, 1fr);padding: 16px;gap:14px}
  .trust-meta strong{font-size:18px}
  .hv-card-ai{width: 180px;left: -10px;top:-10px}
  .hv-card-code{width: 210px;left:-15px;bottom:40px}
  .hv-card-code .hv-code-body{font-size:10.5px}
  .hv-card-stat{width: 180px;right:-10px;bottom:-10px}
  .hero-logos{height:50px}
  .logo-item{font-size:16px;letter-spacing:2px}
}
@media (max-width: 440px){
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn-primary,.hero-cta .btn-ghost{justify-content:center}
}

/* RTL tweaks */
html[dir="rtl"] .hero-logos-track,
html[dir="rtl"] .float-chip-1,
html[dir="rtl"] .float-chip-3{animation-direction:reverse}
html[dir="rtl"] .hv-card-ai{left:auto;right:-28px}
html[dir="rtl"] .hv-card-code{left:auto;right:-40px}
html[dir="rtl"] .hv-card-stat{right:auto;left:-20px}

/* =========================================================
   SHARED SECTION STYLES
   ========================================================= */
.section-container{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.section-head{
  text-align:center;
  max-width: 760px;
  margin: 0 auto 56px;
}
html[dir="rtl"] .section-head{text-align:center}
.section-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding: 6px 16px;
  background: rgba(0,212,255,.08);
  border:1px solid rgba(0,212,255,.22);
  border-radius: var(--r-pill);
  font-size: 12.5px;font-weight: 700;
  letter-spacing: 1.5px;text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 18px;
}
.eyebrow-dot{
  width:6px;height:6px;border-radius:50%;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
  animation: pulseDot 2s infinite;
}
.section-title{
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.15;font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 14px;
  color: var(--text);
}
.section-title .grad-text{
  background: var(--grad-1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size: 200% 100%;
  animation: gradShift 5s linear infinite;
  padding: 0 6px;
}
.section-desc{
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--text-dim);
  line-height: 1.75;
  max-width: 650px;
  margin: 0 auto;
}

/* Reveal-on-scroll utility */
[data-reveal]{
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
[data-reveal].revealed{opacity:1;transform:translateY(0)}

/* =========================================================
   PHASE 3 — STATS BAR
   ========================================================= */
.stats-bar{
  position:relative;
  padding: 60px 24px;
  background: linear-gradient(180deg, transparent, rgba(15,18,55,.45), transparent);
  overflow:hidden;
}
.stats-glow-line{
  position:absolute;top:0;left:50%;
  transform: translateX(-50%);
  width: 80%;height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.6), rgba(123,92,255,.6), rgba(255,78,205,.6), transparent);
  filter: blur(.5px);
}
.stats-glow-line::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.8), rgba(123,92,255,.8), rgba(255,78,205,.8), transparent);
  filter: blur(4px);
  opacity:.6;
}
.stats-container{
  max-width: 1280px;margin:0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  position:relative;
}
.stat-card{
  position: relative;
  padding: 26px 20px 22px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  backdrop-filter: blur(14px);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  overflow:hidden;
  isolation:isolate;
}
.stat-card::before{
  content:'';position:absolute;inset:-1px;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(135deg, rgba(0,212,255,.4), transparent 50%, rgba(255,78,205,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-base);
  pointer-events:none;
  z-index:1;
}
.stat-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,212,255,.12);
}
.stat-card:hover::before{opacity:1}
.stat-icon-wrap{
  width:52px;height:52px;
  margin: 0 auto 14px;
  display:grid;place-items:center;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border-2);
  transition: transform var(--t-base);
}
.stat-card:hover .stat-icon-wrap{transform: rotate(-6deg) scale(1.08)}
.stat-ic-1{color: var(--primary);background: rgba(0,212,255,.08)}
.stat-ic-2{color: var(--success);background: rgba(46,230,166,.08)}
.stat-ic-3{color: var(--secondary);background: rgba(123,92,255,.1)}
.stat-ic-4{color: var(--warn);background: rgba(255,181,71,.08)}
.stat-ic-5{color: var(--accent);background: rgba(255,78,205,.08)}
.stat-ic-6{color: #60e8ff;background: rgba(96,232,255,.08)}
.stat-value{
  display:flex;justify-content:center;align-items:baseline;gap:6px;
  margin-bottom: 8px;
  font-size: clamp(30px, 3.5vw, 42px);
  font-weight: 800;line-height: 1;
  letter-spacing: -1px;
  background: var(--grad-1);
  -webkit-background-clip: text;background-clip: text;
  color: transparent;
}
.stat-plus{
  font-size: 18px;
  background: none;
  -webkit-text-fill-color: initial;
  color: var(--text-dim);
  font-weight: 700;
}
.stat-label{
  font-size: 13.5px;font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.stat-sub{
  font-size: 11.5px;color: var(--text-muted);
  font-weight: 500;letter-spacing: .3px;
}

@media (max-width: 1100px){
  .stats-container{grid-template-columns: repeat(3, 1fr)}
}
@media (max-width: 560px){
  .stats-container{grid-template-columns: repeat(2, 1fr);gap:10px}
  .stat-card{padding: 22px 14px 18px}
  .stat-icon-wrap{width:44px;height:44px;margin-bottom:10px}
}

/* =========================================================
   PHASE 3 — PAIN POINTS
   ========================================================= */
.pains{
  position:relative;
  padding: 100px 0 80px;
  overflow:hidden;
}
.pains::before{
  content:'';position:absolute;
  top:10%;left:-10%;width:40%;height:60%;
  background: radial-gradient(circle, rgba(255,78,205,.12), transparent 60%);
  filter: blur(80px);
  pointer-events:none;
}
.pains::after{
  content:'';position:absolute;
  bottom:10%;right:-10%;width:40%;height:60%;
  background: radial-gradient(circle, rgba(0,212,255,.12), transparent 60%);
  filter: blur(80px);
  pointer-events:none;
}

.pain-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 64px;
}
.pain-card{
  position: relative;
  padding: 30px 28px 26px;
  background: linear-gradient(180deg, rgba(15,18,55,.6), rgba(15,18,55,.3));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  backdrop-filter: blur(14px);
  overflow:hidden;
  isolation:isolate;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.pain-card::before{
  content:'';
  position:absolute;inset:0;
  background: linear-gradient(135deg, rgba(123,92,255,.06), transparent 40%);
  opacity: 0;
  transition: opacity var(--t-base);
  z-index:-1;
}
.pain-card::after{
  content:'';
  position:absolute;top:-40%;right:-40%;
  width: 80%;height: 80%;
  background: radial-gradient(circle, rgba(123,92,255,.14), transparent 60%);
  opacity: 0;
  transition: opacity var(--t-base);
  z-index:-1;
}
.pain-card:hover{
  transform: translateY(-8px);
  border-color: rgba(123,92,255,.35);
  box-shadow: 0 26px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(123,92,255,.12);
}
.pain-card:hover::before,
.pain-card:hover::after{opacity:1}

.pain-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom: 20px;
}
.pain-num{
  font-size: 44px;font-weight: 800;
  line-height: 1;
  letter-spacing: -1.5px;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  -webkit-background-clip: text;background-clip: text;
  color: transparent;
  font-family: var(--font-en);
}
.pain-icon{
  width: 48px;height: 48px;
  display: grid;place-items: center;
  border-radius: 14px;
  flex-shrink: 0;
  transition: transform var(--t-base);
}
.pain-card:hover .pain-icon{transform: rotate(8deg) scale(1.1)}
.pain-ic-red{color:#ff5575;background:rgba(255,85,117,.12);border:1px solid rgba(255,85,117,.25)}
.pain-ic-orange{color:#ffb547;background:rgba(255,181,71,.12);border:1px solid rgba(255,181,71,.25)}
.pain-ic-purple{color:#b48bff;background:rgba(180,139,255,.12);border:1px solid rgba(180,139,255,.25)}
.pain-ic-blue{color:#00d4ff;background:rgba(0,212,255,.12);border:1px solid rgba(0,212,255,.25)}
.pain-ic-green{color:#2ee6a6;background:rgba(46,230,166,.12);border:1px solid rgba(46,230,166,.25)}
.pain-ic-pink{color:#ff4ecd;background:rgba(255,78,205,.12);border:1px solid rgba(255,78,205,.25)}

.pain-title{
  font-size: 18px;font-weight: 700;
  color: var(--text);line-height: 1.35;
  margin-bottom: 10px;
}
.pain-desc{
  font-size: 14px;color: var(--text-dim);
  line-height: 1.65;
  margin-bottom: 18px;
}
.pain-solve{
  display:flex;align-items:flex-start;gap:10px;
  padding: 12px 14px;
  background: linear-gradient(90deg, rgba(46,230,166,.08), rgba(0,212,255,.06) 50%, transparent);
  border: 1px solid rgba(46,230,166,.2);
  border-left: 3px solid var(--success);
  border-radius: var(--r-md);
  font-size: 13px;font-weight: 600;
  color: var(--text);
}
.solve-arrow{
  color: var(--success);
  font-weight: 800;
  flex-shrink: 0;
}
html[dir="rtl"] .pain-solve{
  border-left: 1px solid rgba(46,230,166,.2);
  border-right: 3px solid var(--success);
}

/* Pain CTA */
.pain-cta{
  display:flex;justify-content:space-between;align-items:center;
  gap: 40px;flex-wrap: wrap;
  padding: 36px 40px;
  background: linear-gradient(135deg, rgba(0,212,255,.1), rgba(123,92,255,.1), rgba(255,78,205,.1));
  border: 1px solid var(--border-2);
  border-radius: var(--r-2xl);
  position:relative;overflow:hidden;
}
.pain-cta::before{
  content:'';position:absolute;inset:-2px;
  border-radius: inherit;
  background: var(--grad-1);
  opacity:.25;z-index:-1;
  filter: blur(20px);
  animation: hvGlowPulse 4s ease-in-out infinite;
}
.pain-cta-text{flex: 1;min-width: 260px}
.pain-cta-text h3{
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.3;
}
.pain-cta-text p{
  font-size: 14.5px;color: var(--text-dim);
  line-height: 1.6;
}

@media (max-width: 1000px){
  .pain-grid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 640px){
  .pains{padding: 70px 0 60px}
  .pain-grid{grid-template-columns: 1fr;gap: 16px}
  .pain-card{padding: 24px 22px 22px}
  .pain-num{font-size: 38px}
  .pain-cta{padding: 26px 22px;flex-direction:column;align-items:flex-start;text-align:left}
  html[dir="rtl"] .pain-cta{text-align:right;align-items:flex-end}
}

/* =========================================================
   PHASE 4 — PRODUCTS SLIDER
   ========================================================= */
.products{
  position: relative;
  padding: 90px 0 100px;
  overflow: hidden;
}
.products::before{
  content:'';position:absolute;
  top: 20%; left: 50%;
  transform: translateX(-50%);
  width: 70%; height: 60%;
  background: radial-gradient(circle, rgba(0,212,255,.1), transparent 60%);
  filter: blur(80px);
  pointer-events: none;
  z-index:-1;
}

/* Small button variant */
.btn-primary.btn-sm{padding: 11px 20px;font-size:14px}
.btn-ghost.btn-sm{padding: 10px 18px;font-size:14px}

/* Slider wrapper */
.prod-slider{
  position: relative;
  border-radius: var(--r-2xl);
  background: linear-gradient(180deg, rgba(15,18,55,.5), rgba(15,18,55,.2));
  border: 1px solid var(--border-2);
  backdrop-filter: blur(18px);
  padding: 28px 28px 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}

/* Controls bar */
.prod-ctrl{
  display:flex;align-items:center;gap:20px;
  margin-bottom: 26px;
}
.prod-ctrl-info{
  display: flex;align-items: baseline;gap: 4px;
  font-family: var(--font-en);
  font-weight: 800;line-height: 1;
  letter-spacing: -.5px;
}
.prod-ctrl-current{
  font-size: 32px;
  background: var(--grad-1);
  -webkit-background-clip: text;background-clip: text;
  color: transparent;
  transition: all var(--t-base);
}
.prod-ctrl-sep{font-size: 20px;color: var(--text-muted)}
.prod-ctrl-total{font-size: 20px;color: var(--text-muted)}
.prod-ctrl-progress{
  flex: 1;height: 3px;
  background: var(--surface);
  border-radius: 2px;overflow: hidden;
}
.prod-ctrl-bar{
  height: 100%;width: calc(100%/6);
  background: var(--grad-1);
  border-radius: 2px;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 0 10px var(--primary);
  transform-origin: left;
}
html[dir="rtl"] .prod-ctrl-bar{transform-origin:right}
.prod-ctrl-btns{display: flex;gap: 8px}
.prod-btn{
  width: 44px;height: 44px;
  display: grid;place-items: center;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 50%;
  color: var(--text);
  transition: all var(--t-base);
}
.prod-btn:hover:not(:disabled){
  background: var(--grad-1);
  border-color: transparent;
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(0,212,255,.5);
}
.prod-btn:disabled{opacity:.35;cursor:not-allowed}
html[dir="rtl"] .prod-prev svg{transform: scaleX(-1)}
html[dir="rtl"] .prod-next svg{transform: scaleX(-1)}

/* Track (stacked slides) */
.prod-track{
  position: relative;
  min-height: 540px;
}

.prod-slide{
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(40px) scale(.97);
  transition: opacity .5s, transform .5s;
}
.prod-slide.prod-active{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  position: relative;
  transition-delay: .1s;
}
.prod-slide.prod-prev-anim{
  transform: translateX(-40px) scale(.97);
}
html[dir="rtl"] .prod-slide{transform:translateX(-40px) scale(.97)}
html[dir="rtl"] .prod-slide.prod-active{transform:translateX(0) scale(1)}
html[dir="rtl"] .prod-slide.prod-prev-anim{transform:translateX(40px) scale(.97)}

/* Product content */
.prod-content{position: relative}
.prod-badge{
  display: inline-flex;align-items: center;gap: 8px;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  font-size: 11.5px;font-weight: 700;
  letter-spacing: .5px;
  margin-bottom: 14px;
}
.prod-badge-1{background:rgba(0,212,255,.12);color:var(--primary);border:1px solid rgba(0,212,255,.3)}
.prod-badge-2{background:rgba(255,78,205,.12);color:var(--accent);border:1px solid rgba(255,78,205,.3)}
.prod-badge-3{background:rgba(46,230,166,.12);color:var(--success);border:1px solid rgba(46,230,166,.3)}
.prod-badge-4{background:rgba(255,181,71,.12);color:var(--warn);border:1px solid rgba(255,181,71,.3)}
.prod-badge-5{background:rgba(46,230,166,.12);color:var(--success);border:1px solid rgba(46,230,166,.3)}
.prod-badge-6{background:rgba(123,92,255,.15);color:#b48bff;border:1px solid rgba(123,92,255,.3)}
.badge-dot{
  width:6px;height:6px;border-radius:50%;
  background:currentColor;
  box-shadow:0 0 6px currentColor;
  animation: pulseDot 2s infinite;
}

.prod-num{
  font-family: var(--font-en);
  font-size: 70px;font-weight: 800;
  line-height: 1;letter-spacing: -2px;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  -webkit-background-clip: text;background-clip: text;
  color: transparent;
  position: absolute;top: -10px;right: 0;
  pointer-events: none;
}
html[dir="rtl"] .prod-num{right:auto;left:0}
.prod-name{
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 10px;
  color: var(--text);
  background: var(--grad-1);
  -webkit-background-clip: text;background-clip: text;
  color: transparent;
}
.prod-tagline{
  font-size: 15.5px;font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.45;
}
.prod-desc{
  font-size: 14.5px;color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 20px;
}
.prod-features{
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
}
.prod-features li{
  display: flex;align-items: flex-start;gap: 10px;
  font-size: 13.5px;color: var(--text);
  line-height: 1.5;
}
.prod-features svg{
  flex-shrink: 0;
  color: var(--success);
  background: rgba(46,230,166,.12);
  border-radius: 50%;
  padding: 3px;
  margin-top: 1px;
  width: 20px;height: 20px;
}
.prod-cta{display: flex;flex-wrap: wrap;gap: 10px}

/* Product visual / mockup */
.prod-visual{
  position: relative;
  perspective: 1200px;
}
.prod-mockup{
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  transform: rotateY(-4deg) rotateX(3deg);
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  box-shadow:
    0 30px 80px rgba(0,0,0,.4),
    0 10px 30px rgba(0,0,0,.3);
  animation: prodMockFloat 7s ease-in-out infinite;
}
@keyframes prodMockFloat{
  0%,100%{transform:rotateY(-4deg) rotateX(3deg) translateY(0)}
  50%{transform:rotateY(-2deg) rotateX(1deg) translateY(-10px)}
}
.prod-slide:hover .prod-mockup{
  transform: rotateY(0) rotateX(0);
  animation-play-state: paused;
}
.prod-mockup-glow{
  position: absolute;inset: -30px;
  background: radial-gradient(circle at 30% 30%, rgba(0,212,255,.4), transparent 70%);
  filter: blur(50px);
  z-index: -1;
  border-radius: inherit;
  animation: glowShift 6s ease-in-out infinite;
}
@keyframes glowShift{
  0%,100%{transform:translate(0,0) scale(1);opacity:.6}
  50%{transform:translate(20px,-10px) scale(1.1);opacity:.9}
}
.prod-glow-pink{background: radial-gradient(circle at 30% 30%, rgba(255,78,205,.4), transparent 70%)}
.prod-glow-cyan{background: radial-gradient(circle at 30% 30%, rgba(0,212,255,.4), transparent 70%)}
.prod-glow-orange{background: radial-gradient(circle at 30% 30%, rgba(255,181,71,.4), transparent 70%)}
.prod-glow-green{background: radial-gradient(circle at 30% 30%, rgba(46,230,166,.4), transparent 70%)}
.prod-glow-purple{background: radial-gradient(circle at 30% 30%, rgba(123,92,255,.4), transparent 70%)}

.prod-svg{
  display: block;
  width: 100%;height: auto;
  border-radius: var(--r-xl);
}

/* Chart draw animation on slide entry */
.prod-active .prod-draw{animation: fadeIn 1.2s .3s both}
.prod-active .prod-draw-line{
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: drawLine 2s .4s forwards;
  filter: drop-shadow(0 0 4px currentColor);
}

/* Dots / Thumbnails */
.prod-dots{
  display: flex;flex-wrap: wrap;gap: 8px;
  margin-top: 28px;
  justify-content: center;
}
.prod-dot{
  position: relative;
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: 12.5px;font-weight: 600;
  color: var(--text-dim);
  transition: all var(--t-base);
  overflow: hidden;
}
.prod-dot::before{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-1);
  opacity: 0;
  transition: opacity var(--t-base);
  z-index: -1;
}
.prod-dot:hover{
  color: var(--text);
  border-color: var(--border-2);
}
.prod-dot.prod-dot-active{
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 20px rgba(0,212,255,.35);
}
.prod-dot.prod-dot-active::before{opacity: 1}
.dot-label{position: relative;z-index: 1}

/* Responsive */
@media (max-width: 1000px){
  .prod-slide{grid-template-columns: 1fr;gap: 30px}
  .prod-track{min-height: auto}
  .prod-slide{position: relative}
  .prod-slide:not(.prod-active){display: none}
  .prod-num{top: 0}
  .prod-visual{max-width: 560px;margin: 0 auto;width: 100%}
}
@media (max-width: 640px){
  .products{padding: 70px 0 80px}
  .prod-slider{padding: 20px 16px 18px}
  .prod-ctrl{flex-wrap: wrap;gap: 14px}
  .prod-ctrl-progress{order: 3;flex-basis: 100%}
  .prod-ctrl-btns{margin-left: auto}
  html[dir="rtl"] .prod-ctrl-btns{margin-left:0;margin-right:auto}
  .prod-num{font-size: 52px}
  .prod-dot{padding: 8px 12px;font-size: 11.5px}
  .dot-label{max-width: 80px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;display: inline-block;vertical-align: middle}
  .prod-mockup{transform: none;animation: none}
}

/* =========================================================
   PHASE 5 — FEATURES vs COMPETITORS
   ========================================================= */
.compare{
  position: relative;
  padding: 100px 0 90px;
  overflow: hidden;
}
.compare::before{
  content:'';position:absolute;
  top:0;left:50%;transform:translateX(-50%);
  width: 60%;height: 500px;
  background: radial-gradient(ellipse at top, rgba(123,92,255,.12), transparent 70%);
  pointer-events:none;z-index:-1;
}

/* ---------- Summary Cards Above Table ---------- */
.cmp-summary{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 42px;
}
.summary-card{
  position: relative;
  display:flex;align-items:center;gap:16px;
  padding: 20px 22px;
  background: linear-gradient(180deg, rgba(15,18,55,.6), rgba(15,18,55,.3));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  backdrop-filter: blur(14px);
  transition: transform var(--t-base);
}
.summary-card:hover{transform: translateY(-4px)}
.summary-card.summary-win{
  background: linear-gradient(135deg, rgba(0,212,255,.15), rgba(123,92,255,.12), rgba(255,78,205,.1));
  border: 1px solid rgba(0,212,255,.35);
  box-shadow: 0 0 40px rgba(0,212,255,.2);
}
.summary-card.summary-win::before{
  content:'';position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;
  border-radius: inherit;
  background: var(--grad-1);
  opacity:.2;z-index:-1;
  filter: blur(12px);
}

.summary-icon{
  width:52px;height:52px;flex-shrink:0;
  display:grid;place-items:center;
  background: rgba(0,212,255,.12);
  border: 1px solid rgba(0,212,255,.3);
  color: var(--primary);
  border-radius: var(--r-lg);
}
.summary-win .summary-icon{
  background: var(--grad-1);
  color: #fff;
  border: none;
  box-shadow: 0 0 20px rgba(0,212,255,.5);
}
.summary-icon-alt{background:rgba(255,181,71,.12);border-color:rgba(255,181,71,.3);color:var(--warn)}
.summary-icon-warn{background:rgba(255,85,117,.12);border-color:rgba(255,85,117,.3);color:#ff7588}
.summary-icon-danger{background:rgba(255,85,117,.15);border-color:rgba(255,85,117,.4);color:#ff5575}

.summary-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.summary-num{
  font-family: var(--font-en);
  font-size: 26px;font-weight:800;line-height:1;
  letter-spacing:-1px;
  background: var(--grad-1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.summary-num-alt{background: linear-gradient(135deg, var(--warn), var(--accent));-webkit-background-clip:text;background-clip:text}
.summary-num-warn{background: linear-gradient(135deg, #ff7588, #ffb547);-webkit-background-clip:text;background-clip:text}
.summary-num-danger{background: linear-gradient(135deg, #ff5575, #ff4ecd);-webkit-background-clip:text;background-clip:text}
.summary-label{
  font-size:12.5px;color:var(--text-dim);font-weight:500;
  line-height:1.3;
}

/* ---------- Comparison Table Wrapper ---------- */
.cmp-wrap{
  background: linear-gradient(180deg, rgba(15,18,55,.5), rgba(15,18,55,.2));
  border: 1px solid var(--border-2);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(16px);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.3);
}
.cmp-scroll{
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.cmp-scroll::-webkit-scrollbar{height:8px}

/* ---------- Table ---------- */
.cmp-table{
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Header */
.cmp-th{
  padding: 18px 16px;
  font-size: 13px;font-weight: 700;
  text-align: center;
  color: var(--text-dim);
  background: rgba(0,0,0,.25);
  border-bottom: 1px solid var(--border-2);
  position: sticky; top: 0;
  z-index: 2;
  vertical-align: bottom;
}
.cmp-th-feature{
  text-align: left;
  width: 290px;
  color: var(--text);
  font-weight: 700;
  background: rgba(0,0,0,.3);
}
html[dir="rtl"] .cmp-th-feature{text-align:right}

.th-name{
  font-size:14px;font-weight:700;
  color: var(--text);
  margin-bottom: 4px;
}
.th-sub{
  font-size: 11px;color: var(--text-muted);
  font-weight: 500;letter-spacing: .3px;
}

/* AIM DEV header (featured) */
.cmp-th-aim{
  position: relative;
  background: linear-gradient(180deg, rgba(0,212,255,.15), rgba(123,92,255,.1));
  border-bottom: 2px solid var(--primary);
  padding: 0 !important;
  min-width: 150px;
  overflow: visible;
}
.th-aim-inner{
  position: relative;
  padding: 18px 16px 16px;
  border-left: 1px solid rgba(0,212,255,.3);
  border-right: 1px solid rgba(0,212,255,.3);
}
.th-aim-inner::before{
  content:'BEST';
  position:absolute;top:-10px;left:50%;
  transform:translateX(-50%);
  font-family: var(--font-en);
  font-size: 10px;font-weight:800;letter-spacing:2px;
  padding: 3px 10px;
  background: var(--grad-1);
  color:#fff;
  border-radius: var(--r-pill);
  box-shadow: 0 4px 12px rgba(0,212,255,.5);
}
.th-aim-logo{
  width: 36px;height: 36px;margin: 0 auto 8px;
  display:grid;place-items:center;
  background: var(--grad-1);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,212,255,.4);
}
.th-aim-name{
  font-size: 15px;font-weight: 800;
  background: var(--grad-1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom: 2px;
}
.th-aim-tag{
  font-size: 11px;font-weight:600;
  color: var(--primary);
  letter-spacing: .3px;
}

/* Category separator rows */
.cmp-category td{
  padding: 18px 16px 10px;
  background: rgba(0,0,0,.2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.cat-label{
  display: inline-flex;align-items: center;gap: 10px;
  padding: 6px 14px;
  background: rgba(0,212,255,.1);
  border: 1px solid rgba(0,212,255,.25);
  color: var(--primary);
  border-radius: var(--r-pill);
  font-size: 12px;font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.cat-label-2{background:rgba(255,78,205,.1);border-color:rgba(255,78,205,.25);color:var(--accent)}
.cat-label-3{background:rgba(46,230,166,.1);border-color:rgba(46,230,166,.25);color:var(--success)}
.cat-label-4{background:rgba(255,181,71,.1);border-color:rgba(255,181,71,.25);color:var(--warn)}
.cat-label-5{background:rgba(123,92,255,.12);border-color:rgba(123,92,255,.28);color:#b48bff}

/* Rows */
.cmp-row{
  transition: background var(--t-fast);
}
.cmp-row:hover{background: rgba(255,255,255,.02)}
.cmp-row td{
  padding: 16px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  vertical-align: middle;
}

/* Feature name column */
.cmp-feat{
  color: var(--text);
  line-height: 1.45;
}
.cmp-feat strong{
  display: block;
  font-size: 14px;font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.cmp-feat span{
  display: block;
  font-size: 12px;color: var(--text-muted);
  line-height: 1.4;
}

/* Cells */
.cmp-cell{
  text-align: center;
  color: var(--text-dim);
  position: relative;
}
.cmp-cell em{
  display: block;
  font-size: 11.5px;font-weight:600;font-style:normal;
  color: var(--text-dim);
  margin-top: 5px;
  line-height: 1.3;
}

/* AIM column highlight */
.cmp-aim{
  background: linear-gradient(180deg, rgba(0,212,255,.06), rgba(123,92,255,.04));
  position: relative;
  border-left: 1px solid rgba(0,212,255,.15);
  border-right: 1px solid rgba(0,212,255,.15);
}
.cmp-aim em{color: var(--primary);font-weight:700}

/* Marker dots */
.mk{
  display: inline-grid;place-items:center;
  width: 28px;height: 28px;
  border-radius: 50%;
  font-size: 15px;font-weight: 800;
  line-height: 1;
  transition: transform var(--t-base);
}
.cmp-row:hover .mk{transform: scale(1.12)}
.mk-yes{
  background: linear-gradient(135deg, rgba(46,230,166,.2), rgba(0,212,255,.2));
  color: var(--success);
  border: 1px solid rgba(46,230,166,.35);
  box-shadow: 0 0 10px rgba(46,230,166,.15);
}
.mk-yes::before{content:'✓'}
.mk-partial{
  background: rgba(255,181,71,.15);
  color: var(--warn);
  border: 1px solid rgba(255,181,71,.3);
}
.mk-partial::before{content:'~'}
.mk-no{
  background: rgba(255,85,117,.1);
  color: #ff5575;
  border: 1px solid rgba(255,85,117,.22);
}
.mk-no::before{content:'✗'}

/* AIM Column markers extra glow */
.cmp-aim .mk-yes{
  background: var(--grad-2);
  color: #000;
  border: none;
  box-shadow: 0 0 18px rgba(46,230,166,.45);
}
.cmp-aim .mk-yes::before{content:'✓';font-weight:900}

/* Legend */
.cmp-legend{
  display: flex;flex-wrap: wrap;
  align-items: center;gap: 20px;
  padding: 16px 22px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.15);
  font-size: 12.5px;color: var(--text-dim);
}
.lg-item{display:inline-flex;align-items:center;gap:8px}
.lg-item .mk{width:22px;height:22px;font-size:12px}
.lg-hint{margin-left:auto;color:var(--text-muted);font-size:12px}
html[dir="rtl"] .lg-hint{margin-left:0;margin-right:auto}
@media (max-width: 640px){
  .lg-hint{margin-left:0;flex-basis:100%}
}

/* Bottom winner CTA */
.cmp-bottom{
  display:flex;align-items:center;gap:22px;
  margin-top: 40px;
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(0,212,255,.12), rgba(123,92,255,.1), rgba(255,78,205,.08));
  border: 1px solid var(--border-2);
  border-radius: var(--r-2xl);
  position: relative;overflow: hidden;
}
.cmp-bottom::before{
  content:'';position:absolute;inset:-2px;
  border-radius: inherit;
  background: var(--grad-1);
  opacity:.3;z-index:-1;filter:blur(18px);
  animation: hvGlowPulse 4s ease-in-out infinite;
}
.cmp-bottom-icon{
  width: 60px;height:60px;flex-shrink:0;
  display:grid;place-items:center;
  background: var(--grad-2);
  color: #000;
  border-radius: var(--r-lg);
  box-shadow: 0 8px 24px rgba(46,230,166,.4);
}
.cmp-bottom-text{flex:1;min-width:0}
.cmp-bottom-text h3{
  font-size: clamp(18px,1.8vw,22px);
  font-weight: 700;color: var(--text);
  margin-bottom: 4px;line-height:1.3;
}
.cmp-bottom-text p{
  font-size: 14px;color: var(--text-dim);line-height: 1.5;
}

/* Responsive */
@media (max-width: 1000px){
  .cmp-summary{grid-template-columns: repeat(2, 1fr)}
  .cmp-bottom{flex-wrap:wrap}
  .cmp-bottom .btn-primary{width:100%;justify-content:center}
}
@media (max-width: 640px){
  .compare{padding: 70px 0}
  .cmp-summary{grid-template-columns: 1fr;gap:12px}
  .summary-num{font-size:22px}
  .cmp-table{min-width: 800px}
  .cmp-feat strong{font-size:13px}
  .cmp-feat span{font-size:11px}
  .cmp-bottom{padding:22px;gap:16px;flex-direction:column;text-align:center}
  html[dir="rtl"] .cmp-bottom{text-align:center}
  .cmp-bottom-icon{margin:0 auto}
}

/* =========================================================
   PHASE 6 — AI HIGHLIGHT
   ========================================================= */
.ai-section{
  position: relative;
  padding: 100px 0;
  overflow: hidden;
}
.ai-section::before{
  content: '';position: absolute;
  top: 10%;left: -10%;
  width: 60%;height: 80%;
  background: radial-gradient(circle, rgba(123,92,255,.18), transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
}

.ai-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Left content */
.ai-content .section-eyebrow{margin-bottom: 18px}
.ai-desc{
  font-size: 15.5px;
  color: var(--text-dim);
  line-height: 1.75;
  margin-bottom: 32px;
}

.ai-caps{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}
.ai-cap{
  display: flex;align-items: flex-start;gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(15,18,55,.5), rgba(15,18,55,.2));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(10px);
  transition: all var(--t-base);
}
.ai-cap:hover{
  transform: translateY(-3px);
  border-color: rgba(0,212,255,.3);
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.ai-cap-icon{
  width: 40px;height: 40px;flex-shrink: 0;
  display: grid;place-items: center;
  border-radius: 10px;
  transition: transform var(--t-base);
}
.ai-cap:hover .ai-cap-icon{transform: rotate(-8deg) scale(1.08)}
.ai-cap-ic-1{background:rgba(0,212,255,.12);color:var(--primary);border:1px solid rgba(0,212,255,.25)}
.ai-cap-ic-2{background:rgba(123,92,255,.12);color:#b48bff;border:1px solid rgba(123,92,255,.25)}
.ai-cap-ic-3{background:rgba(255,78,205,.12);color:var(--accent);border:1px solid rgba(255,78,205,.25)}
.ai-cap-ic-4{background:rgba(46,230,166,.12);color:var(--success);border:1px solid rgba(46,230,166,.25)}
.ai-cap-body h4{
  font-size: 14px;font-weight: 700;
  color: var(--text);margin-bottom: 4px;
}
.ai-cap-body p{
  font-size: 12.5px;color: var(--text-dim);
  line-height: 1.5;
}

/* Ethics pledge */
.ai-ethics{
  display: flex;align-items: center;gap: 16px;
  padding: 18px 22px;
  background: linear-gradient(90deg, rgba(46,230,166,.1), rgba(0,212,255,.05));
  border: 1px solid rgba(46,230,166,.25);
  border-left: 3px solid var(--success);
  border-radius: var(--r-lg);
}
html[dir="rtl"] .ai-ethics{border-left:1px solid rgba(46,230,166,.25);border-right:3px solid var(--success)}
.ethics-icon{
  width: 42px;height: 42px;flex-shrink: 0;
  display: grid;place-items: center;
  background: var(--grad-2);
  color: #000;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(46,230,166,.4);
}
.ai-ethics strong{
  display: block;
  font-size: 14px;font-weight: 700;
  color: var(--text);margin-bottom: 2px;
}
.ai-ethics span{
  font-size: 13px;color: var(--text-dim);line-height: 1.5;
}

/* Right visual - AI Brain */
.ai-visual{
  position: relative;
}
.ai-brain-stage{
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 540px;
  margin: 0 auto 30px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(123,92,255,.15), transparent 70%);
}

/* Orbits */
.orbit{
  position: absolute;
  top: 50%;left: 50%;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(255,255,255,.08);
  border-radius: 50%;
  animation: orbitRotate 40s linear infinite;
}
.orbit-1{width: 60%;height: 60%}
.orbit-2{width: 80%;height: 80%;animation-duration: 60s;animation-direction:reverse;border-color: rgba(0,212,255,.1)}
.orbit-3{width: 98%;height: 98%;animation-duration: 80s;border-color: rgba(255,78,205,.08)}
@keyframes orbitRotate{
  from{transform: translate(-50%, -50%) rotate(0)}
  to{transform: translate(-50%, -50%) rotate(360deg)}
}

/* AI Core */
.ai-core{
  position: absolute;
  top: 50%;left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  aspect-ratio: 1;
  display: grid;place-items: center;
  z-index: 3;
}
.ai-core-ring{
  position: absolute;inset: 0;
  border: 2px solid rgba(0,212,255,.3);
  border-radius: 50%;
  animation: coreRing 3s ease-out infinite;
}
.ai-core-ring-2{animation-delay: 1.5s}
@keyframes coreRing{
  0%{transform: scale(1);opacity:.8}
  100%{transform: scale(1.6);opacity:0}
}
.ai-core-inner{
  position: relative;
  width: 130px;height: 130px;
  display: grid;place-items: center;
  background: radial-gradient(circle, rgba(15,18,55,.9), rgba(6,8,26,.95));
  border: 1px solid rgba(0,212,255,.3);
  border-radius: 50%;
  box-shadow:
    0 0 40px rgba(0,212,255,.3),
    0 0 80px rgba(123,92,255,.2),
    inset 0 0 20px rgba(0,212,255,.15);
  animation: coreBreathe 4s ease-in-out infinite;
}
@keyframes coreBreathe{
  0%,100%{box-shadow: 0 0 40px rgba(0,212,255,.3), 0 0 80px rgba(123,92,255,.2), inset 0 0 20px rgba(0,212,255,.15)}
  50%{box-shadow: 0 0 60px rgba(0,212,255,.5), 0 0 120px rgba(123,92,255,.4), inset 0 0 30px rgba(0,212,255,.25)}
}
.ai-core-glow{
  position: absolute;inset: -30px;
  background: radial-gradient(circle, rgba(0,212,255,.3), transparent 70%);
  filter: blur(20px);
  border-radius: 50%;
  z-index: -1;
  animation: coreGlow 3s ease-in-out infinite;
}
@keyframes coreGlow{
  0%,100%{opacity:.6}
  50%{opacity:1;transform: scale(1.1)}
}
.ai-core-inner svg{animation: coreSpin 20s linear infinite}
@keyframes coreSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.ai-core-label{
  position: absolute;
  bottom: -50px;left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}
.ai-core-title{
  display: block;
  font-size: 14px;font-weight: 800;
  background: var(--grad-1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing: .5px;
}
.ai-core-sub{
  display: block;
  font-size: 11px;color: var(--text-dim);
  font-family: ui-monospace, monospace;
  margin-top: 2px;
}

/* AI Chips (floating models) */
.ai-chip{
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  transform: translate(-50%, -50%);
  display: inline-flex;align-items: center;gap: 8px;
  padding: 8px 14px;
  background: rgba(15,18,55,.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-pill);
  font-size: 12px;font-weight: 700;
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  animation: chipBob 4s ease-in-out infinite;
  white-space: nowrap;
  z-index: 4;
}
.ai-chip:nth-child(2){animation-delay: -.5s}
.ai-chip:nth-child(3){animation-delay: -1s}
.ai-chip:nth-child(4){animation-delay: -1.5s}
.ai-chip:nth-child(5){animation-delay: -2s}
.ai-chip:nth-child(6){animation-delay: -2.5s}
@keyframes chipBob{
  0%,100%{transform: translate(-50%,-50%) translateY(0)}
  50%{transform: translate(-50%,-50%) translateY(-8px)}
}
.chip-dot{
  width: 7px;height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px currentColor;
}
.ai-chip-gpt{border-color: rgba(16,163,127,.4)} .ai-chip-gpt .chip-dot{background:#10a37f}
.ai-chip-claude{border-color: rgba(221,107,68,.4)} .ai-chip-claude .chip-dot{background:#dd6b44}
.ai-chip-gemini{border-color: rgba(66,133,244,.4)} .ai-chip-gemini .chip-dot{background:#4285f4}
.ai-chip-llama{border-color: rgba(0,82,217,.4)} .ai-chip-llama .chip-dot{background:#0052d9}
.ai-chip-mistral{border-color: rgba(255,114,0,.4)} .ai-chip-mistral .chip-dot{background:#ff7200}
.ai-chip-aim{
  border-color: rgba(0,212,255,.5);
  background: linear-gradient(135deg, rgba(0,212,255,.15), rgba(123,92,255,.12));
}
.ai-chip-aim .chip-dot{background: var(--primary)}
.ai-chip-aim span:last-child{
  background: var(--grad-1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* AI lines (data flow) */
.ai-lines{
  position: absolute;
  inset: 0;
  width: 100%;height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Matrix background */
.ai-matrix{
  position: absolute;inset: 0;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: .2;
}
.ai-matrix span{
  position: absolute;
  font-family: ui-monospace, monospace;
  font-size: 11px;font-weight: 600;
  color: var(--primary);
  animation: matrixFall 6s linear infinite;
}
.ai-matrix span:nth-child(1){left: 10%;animation-delay: 0}
.ai-matrix span:nth-child(2){left: 20%;animation-delay: -1s}
.ai-matrix span:nth-child(3){left: 35%;animation-delay: -2s}
.ai-matrix span:nth-child(4){left: 45%;animation-delay: -3s;color:var(--accent)}
.ai-matrix span:nth-child(5){left: 60%;animation-delay: -4s;color:var(--secondary)}
.ai-matrix span:nth-child(6){left: 72%;animation-delay: -2.5s}
.ai-matrix span:nth-child(7){left: 85%;animation-delay: -1.5s;color:var(--accent)}
.ai-matrix span:nth-child(8){left: 92%;animation-delay: -3.5s}
@keyframes matrixFall{
  0%{top: -20px;opacity: 0}
  10%{opacity: 1}
  90%{opacity: 1}
  100%{top: 110%;opacity: 0}
}

/* Stats strip under brain */
.ai-stats-strip{
  display: flex;align-items: center;justify-content: center;
  gap: 24px;
  padding: 18px 24px;
  background: linear-gradient(90deg, rgba(0,212,255,.08), rgba(123,92,255,.08), rgba(255,78,205,.08));
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  backdrop-filter: blur(10px);
}
.ai-strip-item{text-align:center}
.ai-strip-num{
  font-family: var(--font-en);
  font-size: 22px;font-weight: 800;
  line-height: 1;
  background: var(--grad-1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing: -.5px;
}
.ai-strip-label{
  font-size: 11px;color: var(--text-dim);
  margin-top: 4px;font-weight: 500;
}
.ai-strip-sep{
  width: 1px;height: 30px;
  background: linear-gradient(180deg, transparent, var(--border-2), transparent);
}

@media (max-width: 1000px){
  .ai-grid{grid-template-columns: 1fr;gap: 60px}
  .ai-content .section-title{text-align: center !important}
  .ai-brain-stage{max-width: 400px}
}
@media (max-width: 640px){
  .ai-section{padding: 70px 0}
  .ai-caps{grid-template-columns: 1fr}
  .ai-brain-stage{max-width: 340px}
  .ai-core{width: 140px}
  .ai-core-inner{width: 100px;height: 100px}
  .ai-core-inner svg{width: 46px;height: 46px}
  .ai-chip{font-size: 10.5px;padding: 6px 10px}
  .ai-stats-strip{flex-wrap: wrap;gap: 14px 20px}
  .ai-strip-sep{display: none}
}

/* =========================================================
   PHASE 6 — HOW IT WORKS
   ========================================================= */
.hiw{
  position: relative;
  padding: 100px 0 90px;
  overflow: hidden;
}
.hiw::before{
  content:'';position:absolute;
  bottom:0;left:50%;transform:translateX(-50%);
  width: 80%;height: 500px;
  background: radial-gradient(ellipse at bottom, rgba(0,212,255,.1), transparent 70%);
  pointer-events:none;z-index:-1;
}

.hiw-track{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-bottom: 50px;
}

.hiw-line{
  position: absolute;
  top: 36px;left: 10%;right: 10%;
  height: 2px;
  background: rgba(255,255,255,.08);
  z-index: 0;
  overflow: hidden;
  border-radius: 2px;
}
.hiw-line-progress{
  width: 0;height: 100%;
  background: var(--grad-1);
  border-radius: inherit;
  box-shadow: 0 0 12px var(--primary);
  transition: width 1.8s cubic-bezier(.4,0,.2,1);
}
.hiw-track.in-view .hiw-line-progress{width: 100%}

.hiw-step{
  position: relative;
  display: flex;flex-direction: column;align-items: center;
  z-index: 1;
}
.hiw-dot{
  position: relative;
  width: 72px;height: 72px;
  display: grid;place-items: center;
  background: var(--bg-2);
  border: 2px solid var(--border-2);
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 26px;font-weight: 800;
  color: var(--text);
  z-index: 2;
  transition: all var(--t-base);
  margin-bottom: 22px;
}
.hiw-step.revealed .hiw-dot{
  background: linear-gradient(135deg, rgba(15,18,55,.95), rgba(26,31,74,.95));
  border-color: var(--primary);
  color: transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 4px rgba(0,212,255,.1), 0 10px 30px rgba(0,212,255,.25);
}
.hiw-step.revealed .hiw-dot span{
  background: var(--grad-1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hiw-dot-final{
  background: var(--grad-1) !important;
  border-color: transparent !important;
}
.hiw-dot-final span{
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
.hiw-dot-pulse{
  position: absolute;inset: -4px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  opacity: 0;
  animation: hiwPulse 3s ease-out infinite;
}
.hiw-step.revealed .hiw-dot-pulse{opacity: 1}
@keyframes hiwPulse{
  0%{transform: scale(1);opacity:.6}
  100%{transform: scale(1.6);opacity:0}
}

.hiw-card{
  position: relative;
  padding: 26px 22px 24px;
  background: linear-gradient(180deg, rgba(15,18,55,.6), rgba(15,18,55,.3));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  backdrop-filter: blur(14px);
  width: 100%;
  transition: all var(--t-base);
}
.hiw-card:hover{
  transform: translateY(-6px);
  border-color: rgba(0,212,255,.3);
  box-shadow: 0 20px 50px rgba(0,212,255,.1);
}
.hiw-card-final{
  background: linear-gradient(135deg, rgba(0,212,255,.1), rgba(123,92,255,.08), rgba(255,78,205,.08));
  border-color: rgba(0,212,255,.3);
}

.hiw-icon{
  width: 52px;height: 52px;
  display: grid;place-items: center;
  border-radius: 14px;
  margin-bottom: 16px;
  transition: transform var(--t-base);
}
.hiw-card:hover .hiw-icon{transform: rotate(-8deg) scale(1.08)}
.hiw-ic-1{background: rgba(0,212,255,.12);color: var(--primary);border: 1px solid rgba(0,212,255,.25)}
.hiw-ic-2{background: rgba(123,92,255,.12);color: #b48bff;border: 1px solid rgba(123,92,255,.25)}
.hiw-ic-3{background: rgba(255,78,205,.12);color: var(--accent);border: 1px solid rgba(255,78,205,.25)}
.hiw-ic-4{background: var(--grad-1);color: #fff;border: none;box-shadow: 0 4px 16px rgba(0,212,255,.4)}

.hiw-meta{margin-bottom: 8px}
.hiw-tag{
  display: inline-block;
  padding: 3px 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: 11px;font-weight: 700;
  color: var(--text-dim);
  letter-spacing: .3px;
  text-transform: uppercase;
}
.hiw-title{
  font-size: 18px;font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;line-height: 1.3;
}
.hiw-desc{
  font-size: 13.5px;color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 14px;
}
.hiw-list{display: grid;gap: 6px}
.hiw-list li{
  font-size: 12.5px;color: var(--text);
  line-height: 1.5;font-weight: 500;
}

/* Summary strip */
.hiw-summary{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 24px;
  background: linear-gradient(180deg, rgba(15,18,55,.5), rgba(15,18,55,.2));
  border: 1px solid var(--border-2);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(14px);
}
.hiw-sum-item{
  display: flex;align-items: center;gap: 14px;
}
.hiw-sum-icon{
  font-size: 28px;
  width: 48px;height:48px;
  display: grid;place-items: center;
  background: rgba(0,212,255,.08);
  border-radius: 12px;
  flex-shrink: 0;
}
.hiw-sum-num{
  font-size: 15px;font-weight: 800;
  color: var(--text);line-height: 1.15;
  margin-bottom: 2px;
}
.hiw-sum-label{
  font-size: 12px;color: var(--text-dim);
}

/* Responsive */
@media (max-width: 1000px){
  .hiw-track{grid-template-columns: 1fr 1fr;gap: 40px}
  .hiw-line{display: none}
  .hiw-summary{grid-template-columns: 1fr 1fr}
}
@media (max-width: 640px){
  .hiw{padding: 70px 0}
  .hiw-track{grid-template-columns: 1fr;gap: 32px}
  .hiw-summary{grid-template-columns: 1fr;gap: 14px;padding: 20px}
  .hiw-dot{width: 60px;height: 60px;font-size: 22px}
}

/* =========================================================
   PHASE 7 — PRICING
   ========================================================= */
.pricing{
  position: relative;
  padding: 100px 0 90px;
  overflow: hidden;
}
.pricing::before{
  content:'';position:absolute;
  top:30%;left:50%;transform:translateX(-50%);
  width: 70%;height: 60%;
  background: radial-gradient(circle, rgba(255,78,205,.12), transparent 70%);
  filter: blur(80px);
  pointer-events:none;z-index:-1;
}

/* Billing toggle */
.pr-toggle-wrap{
  display:flex;justify-content:center;
  margin-bottom: 44px;
}
.pr-toggle{
  position: relative;
  display: inline-flex;align-items: center;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  backdrop-filter: blur(10px);
}
.pr-toggle-btn{
  position: relative;
  padding: 10px 24px;
  font-size: 14px;font-weight: 700;
  color: var(--text-dim);
  border-radius: var(--r-pill);
  transition: color var(--t-base);
  z-index: 1;
  display: inline-flex;align-items: center;gap: 10px;
}
.pr-toggle-btn.pr-toggle-active{color: #fff}
.pr-toggle-slider{
  position: absolute;
  top: 6px;left: 6px;
  height: calc(100% - 12px);
  width: calc(50% - 6px);
  background: var(--grad-1);
  border-radius: var(--r-pill);
  box-shadow: 0 4px 14px rgba(0,212,255,.4);
  transition: transform var(--t-base);
  z-index: 0;
}
.pr-toggle[data-bill="yearly"] .pr-toggle-slider{transform: translateX(100%)}
html[dir="rtl"] .pr-toggle[data-bill="yearly"] .pr-toggle-slider{transform: translateX(-100%)}
.pr-toggle-badge{
  padding: 2px 8px;
  background: var(--grad-2);
  color: #000;
  border-radius: var(--r-pill);
  font-size: 10px;font-weight: 800;letter-spacing: .3px;
}

/* Pricing Grid */
.pr-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 48px;
}

/* Pricing Card */
.pr-card{
  position: relative;
  display: flex;flex-direction: column;
  padding: 36px 30px 34px;
  background: linear-gradient(180deg, rgba(15,18,55,.65), rgba(15,18,55,.35));
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(14px);
  transition: all var(--t-base);
  overflow: hidden;
  isolation: isolate;
}
.pr-card:hover{
  transform: translateY(-8px);
  border-color: rgba(0,212,255,.35);
  box-shadow: 0 30px 70px rgba(0,0,0,.4), 0 0 30px rgba(0,212,255,.1);
}

/* Popular card (featured) */
.pr-card-popular{
  background: linear-gradient(180deg, rgba(0,212,255,.1), rgba(123,92,255,.08), rgba(15,18,55,.4));
  border-color: transparent;
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 60px rgba(0,212,255,.2);
  z-index: 2;
}
.pr-card-popular:hover{
  transform: translateY(-14px) scale(1.03);
  box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 80px rgba(0,212,255,.3);
}
.pr-glow-border{
  position: absolute;inset: -1px;
  border-radius: inherit;
  background: var(--grad-1);
  z-index: -1;
  padding: 2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: gradShift 6s linear infinite;
  background-size: 200% 100%;
}
.pr-popular-badge{
  position: absolute;top: 16px;right: 16px;
  display: inline-flex;align-items: center;gap: 6px;
  padding: 5px 14px;
  background: var(--grad-1);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 11px;font-weight: 800;
  letter-spacing: .8px;text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0,212,255,.5);
}
html[dir="rtl"] .pr-popular-badge{right: auto;left: 16px}

/* Card top */
.pr-card-top{margin-bottom: 20px}
.pr-tier-icon{
  width: 52px;height: 52px;
  display: grid;place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  margin-bottom: 16px;
}
.pr-ic-starter{color: var(--primary);background: rgba(0,212,255,.1);border-color: rgba(0,212,255,.25)}
.pr-ic-pro{color: #fff;background: var(--grad-1);border: none;box-shadow: 0 8px 24px rgba(0,212,255,.4)}
.pr-ic-ent{color: #b48bff;background: rgba(123,92,255,.1);border-color: rgba(123,92,255,.25)}

.pr-tier{
  font-size: 22px;font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;letter-spacing: -.5px;
}
.pr-tier-sub{
  font-size: 13px;color: var(--text-dim);
  line-height: 1.45;
}

/* Price */
.pr-price{
  display: flex;align-items: baseline;gap: 4px;
  margin-bottom: 4px;
}
.pr-currency{
  font-size: 22px;font-weight: 700;
  color: var(--text-dim);
}
.pr-amount{
  font-family: var(--font-en);
  font-size: 52px;font-weight: 800;
  line-height: 1;letter-spacing: -2px;
  color: var(--text);
  transition: opacity var(--t-base);
}
.pr-card-popular .pr-amount{
  background: var(--grad-1);
  -webkit-background-clip: text;background-clip: text;
  color: transparent;
}
.pr-period{
  font-size: 14px;color: var(--text-dim);
  font-weight: 500;
}
.pr-price-custom{
  flex-direction: column;align-items: flex-start;gap: 4px;
  margin-top: 8px;
}
.pr-custom-label{
  font-family: var(--font-en);
  font-size: 40px;font-weight: 800;
  line-height: 1;letter-spacing: -1.5px;
  background: linear-gradient(135deg, #b48bff, #ff4ecd);
  -webkit-background-clip: text;background-clip: text;
  color: transparent;
}
.pr-custom-note{
  font-size: 13px;color: var(--text-dim);
}
.pr-save{
  font-size: 12.5px;color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 22px;
}

/* CTA */
.pr-cta{
  position: relative;
  display: flex;align-items: center;justify-content: center;gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font-size: 14.5px;font-weight: 700;
  transition: all var(--t-base);
  margin-bottom: 26px;
  overflow: hidden;
}
.pr-cta-primary{
  background: var(--grad-1);
  color: #fff;
  box-shadow: 0 14px 36px rgba(0,212,255,.35);
}
.pr-cta-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,212,255,.5);
}
.pr-cta-primary svg,.pr-cta-primary span:not(.btn-primary-shine){position: relative;z-index: 1}
.pr-cta-ghost{
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--text);
}
.pr-cta-ghost:hover{
  background: var(--surface-2);
  border-color: var(--primary);
  transform: translateY(-2px);
}
.pr-cta svg{transition: transform var(--t-fast)}
.pr-cta:hover svg{transform: translateX(3px)}
html[dir="rtl"] .pr-cta:hover svg{transform: translateX(-3px) scaleX(-1)}
html[dir="rtl"] .pr-cta svg{transform: scaleX(-1)}

.pr-divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-2), transparent);
  margin-bottom: 20px;
}
.pr-feat-title{
  font-size: 12px;font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 1px;text-transform: uppercase;
  margin-bottom: 14px;
}
.pr-feat-title-hl{
  background: var(--grad-1);
  -webkit-background-clip: text;background-clip: text;
  color: transparent;
}

/* Features list */
.pr-features{
  display: grid;gap: 10px;
  flex: 1;
}
.pr-features li{
  display: flex;align-items: flex-start;gap: 10px;
  font-size: 13.5px;color: var(--text);
  line-height: 1.5;
}
.pr-features strong{font-weight: 700;color: var(--text)}
.pr-check{
  flex-shrink: 0;margin-top: 2px;
  width: 20px;height: 20px;padding: 2px;
  background: rgba(46,230,166,.14);
  color: var(--success);
  border-radius: 50%;
}
.pr-card-popular .pr-check{
  background: var(--grad-2);color: #000;
  box-shadow: 0 0 10px rgba(46,230,166,.3);
}
.pr-x{
  flex-shrink: 0;margin-top: 2px;
  width: 20px;height: 20px;padding: 3px;
  background: rgba(255,255,255,.05);
  color: var(--text-muted);
  border-radius: 50%;
}
.pr-feat-muted{opacity: .55}
.pr-feat-muted span{text-decoration: line-through;text-decoration-color: rgba(255,255,255,.15)}

/* Trust row */
.pr-trust{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 24px 32px;
  background: linear-gradient(180deg, rgba(15,18,55,.5), rgba(15,18,55,.2));
  border: 1px solid var(--border-2);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(14px);
}
.pr-trust-item{
  display: flex;align-items: center;gap: 12px;
  font-size: 13.5px;color: var(--text-dim);
  line-height: 1.4;
}
.pr-trust-item svg{
  flex-shrink: 0;color: var(--primary);
  padding: 8px;
  background: rgba(0,212,255,.1);
  border-radius: 10px;
  width: 40px;height: 40px;
}
.pr-trust-item strong{color: var(--text);display: block;margin-bottom: 1px;font-weight: 700}

@media (max-width: 1050px){
  .pr-grid{grid-template-columns: 1fr;gap: 20px;max-width: 500px;margin-left:auto;margin-right:auto}
  .pr-card-popular{transform: none !important;order: -1}
  .pr-trust{grid-template-columns: 1fr 1fr;padding: 22px}
}
@media (max-width: 640px){
  .pricing{padding: 70px 0}
  .pr-card{padding: 30px 24px 28px}
  .pr-amount{font-size: 42px}
  .pr-trust{grid-template-columns: 1fr;gap: 14px;padding: 20px}
}

/* =========================================================
   PHASE 7 — TESTIMONIALS
   ========================================================= */
.testis{
  position: relative;
  padding: 100px 0;
  overflow: hidden;
}
.testis::before{
  content:'';position:absolute;
  top: 20%;left: 0;width: 40%;height: 60%;
  background: radial-gradient(circle, rgba(46,230,166,.08), transparent 60%);
  filter: blur(80px);
  pointer-events:none;z-index:-1;
}
.testis::after{
  content:'';position:absolute;
  bottom: 20%;right: 0;width: 40%;height: 60%;
  background: radial-gradient(circle, rgba(0,212,255,.08), transparent 60%);
  filter: blur(80px);
  pointer-events:none;z-index:-1;
}

/* Rating summary */
.ts-rating-summary{
  display: inline-flex;align-items: center;gap: 16px;
  margin-top: 24px;
  padding: 12px 20px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
}
.ts-rs-stars{display:inline-flex;gap:2px}
.ts-rs-num{
  font-size: 20px;font-weight: 800;
  color: var(--text);
}
.ts-rs-sub{
  font-size: 12.5px;color: var(--text-dim);
}

/* Grid (masonry-ish with tall cards) */
.ts-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: min-content;
  gap: 22px;
  margin-bottom: 60px;
}
.ts-card-featured{grid-row: span 2}
.ts-card-tall{grid-row: span 2}

.ts-card{
  position: relative;
  padding: 28px 26px 22px;
  background: linear-gradient(180deg, rgba(15,18,55,.6), rgba(15,18,55,.3));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  backdrop-filter: blur(14px);
  transition: all var(--t-base);
  overflow: hidden;
  isolation: isolate;
  display: flex;flex-direction: column;
}
.ts-card::before{
  content:'';
  position: absolute;
  top: -40%;right: -20%;
  width: 60%;height: 60%;
  background: radial-gradient(circle, rgba(0,212,255,.1), transparent 60%);
  opacity: 0;
  transition: opacity var(--t-base);
  z-index: -1;
}
.ts-card:hover{
  transform: translateY(-6px);
  border-color: rgba(0,212,255,.25);
  box-shadow: 0 22px 50px rgba(0,0,0,.3);
}
.ts-card:hover::before{opacity: 1}

.ts-card-featured{
  background: linear-gradient(180deg, rgba(0,212,255,.1), rgba(123,92,255,.06), rgba(15,18,55,.4));
  border-color: rgba(0,212,255,.25);
}

/* Quote mark */
.ts-quote-mark{
  color: rgba(0,212,255,.2);
  margin-bottom: 12px;
  line-height: 0;
}

/* Stars */
.ts-stars{
  display: inline-flex;gap: 2px;
  margin-bottom: 14px;
  font-size: 16px;
  color: #ffb547;
  text-shadow: 0 0 6px rgba(255,181,71,.4);
  letter-spacing: 1px;
}

.ts-text{
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 20px;
  font-style: normal;
  quotes: none;
  flex: 1;
}
.ts-card-featured .ts-text{font-size: 15.5px}

/* Result badge */
.ts-result{
  display: inline-flex;align-items: baseline;gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(46,230,166,.12), rgba(0,212,255,.08));
  border: 1px solid rgba(46,230,166,.25);
  border-radius: var(--r-md);
  margin-bottom: 18px;
  align-self: flex-start;
}
.ts-r-num{
  font-family: var(--font-en);
  font-size: 22px;font-weight: 800;
  letter-spacing: -.5px;
  background: var(--grad-2);
  -webkit-background-clip: text;background-clip: text;
  color: transparent;
  line-height: 1;
}
.ts-r-green{background: linear-gradient(135deg,#2ee6a6,#00d4ff);-webkit-background-clip:text;background-clip:text}
.ts-r-purple{background: linear-gradient(135deg,#b48bff,#ff4ecd);-webkit-background-clip:text;background-clip:text}
.ts-r-blue{background: linear-gradient(135deg,#00d4ff,#7b5cff);-webkit-background-clip:text;background-clip:text}
.ts-r-orange{background: linear-gradient(135deg,#ffb547,#ff4ecd);-webkit-background-clip:text;background-clip:text}
.ts-r-pink{background: linear-gradient(135deg,#ff4ecd,#ffb547);-webkit-background-clip:text;background-clip:text}
.ts-r-label{
  font-size: 12px;color: var(--text-dim);
  font-weight: 500;
}

/* Person */
.ts-person{
  display: flex;align-items: center;gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.ts-avatar{
  width: 44px;height: 44px;
  display: grid;place-items: center;
  border-radius: 50%;
  font-family: var(--font-en);
  font-size: 14px;font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: .5px;
}
.ts-av-1{background: linear-gradient(135deg,#00d4ff,#7b5cff)}
.ts-av-2{background: linear-gradient(135deg,#2ee6a6,#00d4ff)}
.ts-av-3{background: linear-gradient(135deg,#7b5cff,#ff4ecd)}
.ts-av-4{background: linear-gradient(135deg,#ff4ecd,#ffb547)}
.ts-av-5{background: linear-gradient(135deg,#ffb547,#ff5575)}
.ts-av-6{background: linear-gradient(135deg,#ff5575,#b48bff)}
.ts-meta strong{
  display: block;
  font-size: 14px;font-weight: 700;
  color: var(--text);line-height: 1.3;
}
.ts-meta span{
  font-size: 12px;color: var(--text-dim);line-height: 1.4;
}

/* Trusted logos */
.ts-trusted{
  padding: 28px 32px;
  background: linear-gradient(180deg, rgba(15,18,55,.5), rgba(15,18,55,.2));
  border: 1px solid var(--border-2);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(14px);
  text-align: center;
}
.ts-trusted-label{
  font-size: 12px;font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 2px;text-transform: uppercase;
  margin-bottom: 18px;
}
.ts-logos{
  display: flex;flex-wrap: wrap;
  justify-content: center;gap: 32px;
  opacity: .7;
}
.ts-logo{
  font-size: 18px;font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 2px;
  transition: color var(--t-fast);
  font-family: var(--font-en);
}
.ts-logo:hover{color: var(--primary)}

@media (max-width: 1000px){
  .ts-grid{grid-template-columns: 1fr 1fr}
  .ts-card-featured,.ts-card-tall{grid-row: auto}
}
@media (max-width: 640px){
  .testis{padding: 70px 0}
  .ts-grid{grid-template-columns: 1fr;gap: 16px}
  .ts-card{padding: 24px 22px 20px}
  .ts-text{font-size: 13.5px !important}
  .ts-logos{gap: 18px}
  .ts-logo{font-size: 15px}
  .ts-trusted{padding: 22px 18px}
}

/* =========================================================
   PHASE 8 — CONTACT SECTION
   ========================================================= */
.contact{
  position: relative;
  padding: 100px 0 90px;
  overflow: hidden;
}
.contact::before{
  content:'';position:absolute;
  top:20%;left:50%;transform:translateX(-50%);
  width: 80%;height: 60%;
  background: radial-gradient(ellipse, rgba(0,212,255,.12), transparent 70%);
  filter: blur(80px);
  pointer-events:none;z-index:-1;
}

.ct-grid{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 36px;
  align-items: start;
}

/* Contact Form */
.ct-form-wrap{
  padding: 40px 36px;
  background: linear-gradient(180deg, rgba(15,18,55,.6), rgba(15,18,55,.3));
  border: 1px solid var(--border-2);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px rgba(0,0,0,.3);
}
.ct-form-head{margin-bottom: 28px}
.ct-form-head h3{font-size:22px;font-weight:800;color:var(--text);margin-bottom:6px;letter-spacing:-.5px}
.ct-form-head p{font-size:14px;color:var(--text-dim);line-height:1.5}

.ct-form{display: grid;gap: 18px}
.ct-row{display: grid;grid-template-columns: 1fr 1fr;gap: 14px}
.ct-field{display: flex;flex-direction: column;gap: 7px}
.ct-field label{font-size:13px;font-weight:600;color:var(--text);letter-spacing:.3px}
.ct-input-wrap{
  position: relative;
  display: flex;align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ct-input-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,212,255,.15)}
.ct-input-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--text-muted);pointer-events:none;transition:color var(--t-fast);
}
.ct-input-wrap:focus-within .ct-input-icon{color:var(--primary)}
html[dir="rtl"] .ct-input-icon{left:auto;right:14px}
.ct-input-wrap input,
.ct-input-wrap textarea{
  width:100%;padding:13px 14px 13px 42px;
  background:transparent;border:none;outline:none;
  color:var(--text);font-size:14px;font-family:inherit;
}
html[dir="rtl"] .ct-input-wrap input,
html[dir="rtl"] .ct-input-wrap textarea{padding:13px 42px 13px 14px}
.ct-input-textarea{align-items:flex-start}
.ct-input-textarea textarea{padding:13px 14px;resize:vertical;min-height:100px}
.ct-input-wrap input::placeholder,
.ct-input-wrap textarea::placeholder{color:var(--text-muted)}

/* Chips */
.ct-chips{display:flex;flex-wrap:wrap;gap:8px}
.ct-chip{cursor:pointer;display:inline-flex}
.ct-chip input{display:none}
.ct-chip span{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;
  background:var(--surface);border:1px solid var(--border-2);
  border-radius:var(--r-pill);
  font-size:13px;font-weight:600;
  color:var(--text-dim);
  transition:all var(--t-fast);
}
.ct-chip:hover span{color:var(--text);border-color:var(--primary)}
.ct-chip input:checked + span{
  background:rgba(0,212,255,.12);
  border-color:var(--primary);color:var(--primary);
  box-shadow:0 0 10px rgba(0,212,255,.2);
}

.ct-budget-options{display:flex;flex-wrap:wrap;gap:6px}
.ct-budget-options label{cursor:pointer}
.ct-budget-options input{display:none}
.ct-budget-options span{
  display:inline-block;padding:8px 12px;
  background:var(--surface);border:1px solid var(--border-2);
  border-radius:var(--r-md);
  font-size:12.5px;font-weight:600;color:var(--text-dim);
  transition:all var(--t-fast);
}
.ct-budget-options label:hover span{color:var(--text)}
.ct-budget-options input:checked + span{
  background:var(--grad-1);color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(0,212,255,.3);
}

.ct-consent{
  padding:14px 16px;
  background:rgba(46,230,166,.05);
  border:1px solid rgba(46,230,166,.2);
  border-radius:var(--r-md);
}
.ct-consent label{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  font-size:12.5px;color:var(--text-dim);line-height:1.5;
}
.ct-consent input{accent-color:var(--success);margin-top:2px;flex-shrink:0}

.ct-submit{width:100%;padding:16px 24px;justify-content:center;font-size:15px}
.ct-submit svg,.ct-submit span:not(.btn-primary-shine){position:relative;z-index:1}

.ct-status{
  padding:0 16px;font-size:13.5px;font-weight:600;
  min-height:0;overflow:hidden;
  transition:all var(--t-base);border-radius:var(--r-md);
}
.ct-status.show{padding:14px 16px;min-height:48px;margin-top:4px}
.ct-status-ok{background:rgba(46,230,166,.1);border:1px solid rgba(46,230,166,.3);color:var(--success)}
.ct-status-err{background:rgba(255,85,117,.1);border:1px solid rgba(255,85,117,.3);color:#ff7588}

/* Methods */
.ct-methods{display:flex;flex-direction:column;gap:12px}
.ct-method{
  position:relative;
  display:grid;grid-template-columns:52px 1fr auto;
  gap:14px;align-items:center;
  padding:16px 18px;
  background:linear-gradient(180deg,rgba(15,18,55,.6),rgba(15,18,55,.3));
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  backdrop-filter:blur(14px);
  transition:all var(--t-base);
  overflow:hidden;isolation:isolate;
}
.ct-method::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent);
  transform:translateX(-100%);transition:transform .8s;
}
.ct-method:hover{transform:translateX(4px);border-color:rgba(0,212,255,.3);box-shadow:0 10px 30px rgba(0,0,0,.3)}
html[dir="rtl"] .ct-method:hover{transform:translateX(-4px)}
.ct-method:hover::before{transform:translateX(100%)}

.ct-m-icon{
  width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:14px;color:#fff;
  transition:transform var(--t-base);
}
.ct-method:hover .ct-m-icon{transform:rotate(-8deg) scale(1.08)}
.ct-method-line .ct-m-icon{background:#06c755;box-shadow:0 6px 20px rgba(6,199,85,.35)}
.ct-method-phone .ct-m-icon{background:var(--grad-1);box-shadow:0 6px 20px rgba(0,212,255,.3)}
.ct-method-wa .ct-m-icon{background:#25d366;box-shadow:0 6px 20px rgba(37,211,102,.35)}
.ct-method-tg .ct-m-icon{background:#0088cc;box-shadow:0 6px 20px rgba(0,136,204,.35)}
.ct-method-mail .ct-m-icon{background:linear-gradient(135deg,#ffb547,#ff4ecd);box-shadow:0 6px 20px rgba(255,181,71,.3)}

.ct-m-body{min-width:0}
.ct-m-label{
  font-size:12px;color:var(--text-dim);
  font-weight:600;letter-spacing:.3px;
  text-transform:uppercase;margin-bottom:2px;
}
.ct-m-value{
  font-size:15px;font-weight:700;color:var(--text);
  font-family:var(--font-en);letter-spacing:-.2px;
}
.ct-m-sub{font-size:12px;color:var(--text-muted);margin-top:1px}
.ct-m-arrow{
  font-size:20px;font-weight:800;color:var(--text-muted);
  transition:all var(--t-base);padding-right:4px;
}
.ct-method:hover .ct-m-arrow{color:var(--primary);transform:translateX(4px)}
html[dir="rtl"] .ct-m-arrow{transform:scaleX(-1);padding-right:0;padding-left:4px}
html[dir="rtl"] .ct-method:hover .ct-m-arrow{transform:scaleX(-1) translateX(4px)}
.ct-m-badge{
  position:absolute;top:10px;right:10px;
  padding:3px 9px;
  background:var(--grad-2);color:#000;
  border-radius:var(--r-pill);
  font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
}
html[dir="rtl"] .ct-m-badge{right:auto;left:10px}

.ct-office{
  padding:18px 20px;
  background:rgba(0,0,0,.15);
  border:1px dashed var(--border);
  border-radius:var(--r-lg);
  display:flex;flex-direction:column;gap:10px;
  margin-top:6px;
}
.ct-office-row{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;color:var(--text-dim);line-height:1.5;
}
.ct-office-row svg{flex-shrink:0;color:var(--primary);margin-top:2px}
.ct-office-row strong{color:var(--text);font-weight:600}

/* =========================================================
   PHASE 8 — ABOUT COMPACT
   ========================================================= */
.about-compact{position:relative;padding:30px 0 80px}
.about-card{
  display:grid;grid-template-columns:1.2fr 1fr;gap:40px;
  padding:50px;
  background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(123,92,255,.06),rgba(15,18,55,.3));
  border:1px solid var(--border-2);
  border-radius:var(--r-2xl);
  backdrop-filter:blur(14px);
}
.about-story{font-size:15px;color:var(--text-dim);line-height:1.75}
.about-story strong{color:var(--text);font-weight:700}
.about-values{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ab-value{
  display:flex;flex-direction:column;
  padding:20px 18px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  transition:all var(--t-base);
}
.ab-value:hover{transform:translateY(-3px);border-color:rgba(0,212,255,.3)}
.ab-v-emoji{font-size:24px;margin-bottom:10px}
.ab-value strong{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px}
.ab-value span{font-size:12.5px;color:var(--text-dim);line-height:1.4}

@media (max-width: 1000px){
  .ct-grid{grid-template-columns:1fr;gap:28px}
  .about-card{grid-template-columns:1fr;gap:28px;padding:36px}
}
@media (max-width: 640px){
  .contact{padding:70px 0 60px}
  .ct-form-wrap{padding:28px 22px}
  .ct-row{grid-template-columns:1fr;gap:18px}
  .ct-method{grid-template-columns:44px 1fr auto;padding:14px 16px}
  .ct-m-icon{width:40px;height:40px}
  .ct-m-icon svg{width:22px;height:22px}
  .ct-m-value{font-size:14px}
  .about-card{padding:28px 22px}
  .about-values{grid-template-columns:1fr}
}

/* =========================================================
   FLOATING CONTACT BUTTONS
   ========================================================= */
.floaters{
  position:fixed;bottom:24px;right:24px;
  display:flex;flex-direction:column;gap:10px;
  z-index:90;
}
html[dir="rtl"] .floaters{right:auto;left:24px}
.floater{
  position:relative;
  width:52px;height:52px;
  display:grid;place-items:center;
  border-radius:50%;color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:all var(--t-base);
  animation:fBounce 3s ease-in-out infinite;
}
@keyframes fBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.floater:hover{
  transform:scale(1.1) translateY(-4px) !important;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
}
.floater-line{background:#06c755;animation-delay:0s}
.floater-wa{background:#25d366;animation-delay:.5s}
.floater-phone{background:var(--grad-1);animation-delay:1s}
.floater-phone::before{
  content:'';position:absolute;inset:0;
  border-radius:50%;
  background:var(--grad-1);z-index:-1;
  animation:floaterPulse 2s ease-out infinite;
}
@keyframes floaterPulse{
  0%{transform:scale(1);opacity:.5}
  100%{transform:scale(1.6);opacity:0}
}
.floater-tooltip{
  position:absolute;right:calc(100% + 12px);top:50%;
  transform:translateY(-50%);
  padding:6px 12px;
  background:rgba(15,18,55,.95);
  border:1px solid var(--border-2);
  color:var(--text);
  font-size:12px;font-weight:600;
  border-radius:var(--r-md);
  white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:all var(--t-base);
}
html[dir="rtl"] .floater-tooltip{right:auto;left:calc(100% + 12px)}
.floater:hover .floater-tooltip{opacity:1;transform:translateY(-50%) translateX(-4px)}
html[dir="rtl"] .floater:hover .floater-tooltip{transform:translateY(-50%) translateX(4px)}
@media (max-width: 640px){
  .floaters{bottom:16px;right:16px;gap:8px}
  html[dir="rtl"] .floaters{right:auto;left:16px}
  .floater{width:48px;height:48px}
  .floater-tooltip{display:none}
}

/* =========================================================
   PHASE 8 — FOOTER
   ========================================================= */
.footer{
  position:relative;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.3));
  margin-top:40px;
  border-top:1px solid var(--border);
  overflow:hidden;
}
.footer::before{
  content:'';position:absolute;top:0;left:50%;
  transform:translateX(-50%);
  width:60%;height:1px;
  background:linear-gradient(90deg,transparent,var(--primary),var(--secondary),var(--accent),transparent);
  filter:blur(.5px);opacity:.5;
}

.footer-cta{padding:60px 0 40px;position:relative}
.fcta-inner{
  position:relative;
  display:grid;grid-template-columns:1fr auto;
  gap:30px;align-items:center;
  padding:36px 44px;
  background:linear-gradient(135deg,rgba(0,212,255,.15),rgba(123,92,255,.12),rgba(255,78,205,.1));
  border:1px solid var(--border-2);
  border-radius:var(--r-2xl);
  overflow:hidden;isolation:isolate;
}
.fcta-glow{
  position:absolute;inset:-30px;
  background:var(--grad-1);
  opacity:.2;z-index:-1;
  filter:blur(40px);
  animation:hvGlowPulse 4s ease-in-out infinite;
}
.fcta-text h3{
  font-size:clamp(20px, 2vw, 28px);
  font-weight:800;color:var(--text);
  margin-bottom:6px;letter-spacing:-.5px;
}
.fcta-text p{font-size:14.5px;color:var(--text-dim);line-height:1.5}
.fcta-buttons{display:flex;gap:10px;flex-shrink:0}

.footer-main{padding:30px 0 50px}
.footer-grid{
  display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px;
}
.footer-brand .logo-sub{display:inline-block}
.footer-about{
  font-size:13.5px;color:var(--text-dim);line-height:1.7;
  margin-bottom:20px;max-width:320px;
}

.footer-social{display:flex;gap:10px;margin-bottom:18px}
.fsoc{
  width:38px;height:38px;
  display:grid;place-items:center;
  background:var(--surface);
  border:1px solid var(--border-2);
  border-radius:10px;
  color:var(--text-dim);
  transition:all var(--t-base);
}
.fsoc:hover{color:#fff;transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.fsoc-line:hover{background:#06c755;border-color:#06c755}
.fsoc-wa:hover{background:#25d366;border-color:#25d366}
.fsoc-tg:hover{background:#0088cc;border-color:#0088cc}
.fsoc-phone:hover{background:var(--grad-1);border-color:transparent}
.fsoc-mail:hover{background:linear-gradient(135deg,#ffb547,#ff4ecd);border-color:transparent}

.footer-badges{display:flex;flex-wrap:wrap;gap:8px}
.fbadge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;
  background:var(--surface);
  border:1px solid var(--border-2);
  border-radius:var(--r-pill);
  font-size:11px;font-weight:700;
  color:var(--text-dim);letter-spacing:.3px;
}
.fbadge svg{color:var(--primary)}

.footer-col-title{
  font-size:13px;font-weight:800;color:var(--text);
  letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:18px;
  position:relative;padding-bottom:12px;
}
.footer-col-title::after{
  content:'';position:absolute;bottom:0;left:0;
  width:30px;height:2px;
  background:var(--grad-1);border-radius:2px;
}
html[dir="rtl"] .footer-col-title::after{left:auto;right:0}
.footer-links{display:grid;gap:10px}
.footer-links a{
  font-size:13.5px;color:var(--text-dim);
  transition:all var(--t-fast);
  display:inline-block;position:relative;
}
.footer-links a:hover{color:var(--text);transform:translateX(3px)}
html[dir="rtl"] .footer-links a:hover{transform:translateX(-3px)}

.footer-contact-list{display:grid;gap:12px}
.footer-contact-list li{display:flex;align-items:center;gap:10px;font-size:13px}
.footer-contact-list svg{color:var(--primary);flex-shrink:0}
.footer-contact-list a{color:var(--text-dim);transition:color var(--t-fast)}
.footer-contact-list a:hover{color:var(--primary)}

.footer-bottom{
  border-top:1px solid var(--border);
  padding:20px 0;
  background:rgba(0,0,0,.2);
}
.footer-bottom-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.footer-copy{font-size:12.5px;color:var(--text-dim);line-height:1.6}
.footer-copy strong{
  background:var(--grad-1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:800;
}
.footer-legal{display:flex;flex-wrap:wrap;gap:18px}
.footer-legal a{
  font-size:12.5px;color:var(--text-muted);
  transition:color var(--t-fast);
}
.footer-legal a:hover{color:var(--primary)}

@media (max-width: 1100px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width: 850px){
  .fcta-inner{grid-template-columns:1fr;padding:28px 24px;text-align:center}
  .fcta-buttons{justify-content:center;flex-wrap:wrap}
}
@media (max-width: 640px){
  .footer-cta{padding:40px 0 24px}
  .footer-main{padding:20px 0 40px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-bottom-inner{flex-direction:column;text-align:center;gap:12px}
  .footer-legal{justify-content:center}
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1100px){
  .nav-list{gap:2px}
  .nav-link{padding:8px 12px;font-size:14px}
}

@media (max-width: 900px){
  .nav-menu{
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background: rgba(6,8,26,.98);
    backdrop-filter: blur(20px);
    transform: translateX(100%);
    transition: transform var(--t-base);
    z-index: var(--z-overlay);
    padding: 100px 24px 40px;
    overflow-y:auto;
  }
  .nav-menu.open{transform:translateX(0)}
  .nav-list{
    flex-direction:column;
    align-items:stretch;gap:8px;
  }
  .nav-link{
    padding:14px 20px;font-size:18px;
    border:1px solid var(--border);
    text-align:center;
  }
  .hamburger{display:flex}
  .btn-cta span:not(.btn-cta-icon){display:none}
  .btn-cta{padding:10px 14px}
  .logo-sub{display:none}
}

@media (max-width: 560px){
  .nav-container{padding:12px 16px;gap:10px}
  .lang-current{padding:7px 10px}
  .lang-code{display:none}
  .announce-bar{font-size:11.5px;height:32px}
  .phase-marker{padding:36px 22px}
}

/* ============================ RTL Support (Arabic) ============================ */
html[dir="rtl"]{text-align:right}
html[dir="rtl"] .nav-logo{flex-direction:row}
html[dir="rtl"] .lang-dropdown{right:auto;left:0}
html[dir="rtl"] .nav-link::before{left:50%;right:auto}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .announce-track{animation:none;padding-left:0}
}

/* =========================================================
   PHASE 9 — CHAT WIDGET (Production-grade)
   ========================================================= */

.chat-widget{
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 95;
}
html[dir="rtl"] .chat-widget{left:auto;right:24px}

/* Chat FAB */
.chat-fab{
  position: relative;
  display: flex;align-items: center;gap: 10px;
  padding: 14px 20px 14px 16px;
  background: var(--grad-1);
  color: #fff;
  border-radius: 50px;
  box-shadow: 0 14px 40px rgba(0,212,255,.45), 0 6px 18px rgba(123,92,255,.35);
  transition: all var(--t-base);
  overflow: visible;
  animation: fabPop 1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes fabPop{
  0%{transform:scale(0) rotate(-180deg);opacity:0}
  100%{transform:scale(1) rotate(0);opacity:1}
}
.chat-fab:hover{
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 18px 50px rgba(0,212,255,.55), 0 8px 24px rgba(123,92,255,.45);
}
.chat-fab-ring{
  position: absolute;inset: 0;
  border-radius: 50px;
  background: var(--grad-1);
  z-index: -1;
  animation: fabRing 2.5s ease-out infinite;
}
.chat-fab-ring-2{animation-delay: 1.2s}
@keyframes fabRing{
  0%{transform: scale(1);opacity: .5}
  100%{transform: scale(1.4);opacity: 0}
}
.chat-fab-icon{flex-shrink: 0;transition: all var(--t-base)}
.chat-fab-close{position:absolute;left:16px;top:50%;transform:translateY(-50%) rotate(-90deg);opacity:0}
.chat-widget.open .chat-fab{
  padding: 14px;
  border-radius: 50%;
  background: rgba(15,18,55,.95);
  border: 1px solid var(--border-2);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.chat-widget.open .chat-fab-ring{display:none}
.chat-widget.open .chat-fab-open{opacity:0;transform:rotate(90deg)}
.chat-widget.open .chat-fab-close{opacity:1;transform:translateY(-50%) rotate(0)}
.chat-widget.open .chat-fab-label{display:none}

.chat-fab-label{
  font-size: 14px;font-weight: 700;
  white-space: nowrap;
  transition: opacity var(--t-base);
}
.chat-fab-badge{
  position: absolute;
  top: -6px;right: -6px;
  width: 22px;height: 22px;
  display: grid;place-items: center;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;font-weight: 800;
  box-shadow: 0 4px 10px rgba(255,78,205,.5);
  border: 2px solid var(--bg);
  animation: badgeBounce 1.5s ease-in-out infinite;
}
@keyframes badgeBounce{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.15)}
}
.chat-widget.opened .chat-fab-badge,
.chat-widget.open .chat-fab-badge{display: none}

@media (max-width: 640px){
  .chat-fab-label{display: none}
  .chat-fab{padding: 14px;border-radius: 50%}
  .chat-fab-close{left: 14px}
}

/* Chat Panel */
.chat-panel{
  position: absolute;
  bottom: calc(100% + 14px);
  left: 0;
  width: 390px;
  max-width: calc(100vw - 48px);
  height: 620px;
  max-height: calc(100vh - 140px);
  background: linear-gradient(180deg, #0f1238, #0a0e27);
  border: 1px solid var(--border-2);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 10px 30px rgba(0,212,255,.15);
  display: flex;flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(.96);
  transform-origin: bottom left;
  transition: all var(--t-base);
  pointer-events: none;
  isolation: isolate;
}
html[dir="rtl"] .chat-panel{left:auto;right:0;transform-origin:bottom right}
.chat-widget.open .chat-panel{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Header */
.chat-head{
  position: relative;
  display: flex;align-items: center;justify-content: space-between;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(0,212,255,.15), rgba(123,92,255,.12), rgba(255,78,205,.1));
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.chat-head-bg{
  position: absolute;inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(0,212,255,.2), transparent 40%),
    radial-gradient(circle at 80% 50%, rgba(255,78,205,.15), transparent 40%);
  animation: headBG 10s ease-in-out infinite;
  pointer-events: none;
}
@keyframes headBG{
  0%,100%{transform:scale(1) rotate(0)}
  50%{transform:scale(1.1) rotate(3deg)}
}
.chat-head-info{
  display: flex;align-items: center;gap: 12px;
  position: relative;z-index: 1;
}
.chat-avatar{
  position: relative;
  width: 44px;height: 44px;
  display: grid;place-items: center;
  background: rgba(15,18,55,.6);
  border: 1px solid rgba(0,212,255,.35);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0,212,255,.3);
}
.chat-avatar-pulse{
  position: absolute;inset: -3px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  opacity: 0;
  animation: avPulse 2s ease-out infinite;
}
@keyframes avPulse{
  0%{transform:scale(1);opacity:.6}
  100%{transform:scale(1.4);opacity:0}
}
.chat-head-text{display:flex;flex-direction:column;gap:2px}
.chat-head-name{
  font-size: 15px;font-weight: 800;
  color: var(--text);letter-spacing: -.2px;
  display: flex;align-items: center;gap: 6px;
}
.chat-head-ver{
  font-size: 9px;font-weight: 700;
  padding: 2px 6px;
  background: var(--grad-1);color: #fff;
  border-radius: var(--r-pill);
  letter-spacing: .5px;
}
.chat-head-status{
  font-size: 12px;color: var(--success);
  display: flex;align-items: center;gap: 5px;
  font-weight: 500;
}
.chat-live-dot{
  width: 6px;height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
  animation: pulseDot 2s infinite;
}
.chat-head-actions{
  display: flex;gap: 6px;position: relative;z-index: 1;
}
.chat-head-btn{
  width: 32px;height: 32px;
  display: grid;place-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  transition: all var(--t-fast);
}
.chat-head-btn:hover{
  background: rgba(255,255,255,.1);
  color: var(--text);
  transform: scale(1.05);
}

/* Body */
.chat-body{
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
.chat-body::-webkit-scrollbar{width: 4px}
.chat-body::-webkit-scrollbar-thumb{background: var(--border-2);border-radius: 2px}

/* Welcome screen */
.chat-welcome{
  text-align: center;
  padding: 12px 0 8px;
}
.chat-welcome-mark{
  width: 72px;height: 72px;margin: 0 auto 14px;
  display: grid;place-items: center;
  background: rgba(15,18,55,.6);
  border: 1px solid rgba(0,212,255,.3);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(0,212,255,.3);
  animation: coreBreathe 3s ease-in-out infinite;
}
.chat-welcome-title{
  font-size: 22px;font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;letter-spacing: -.5px;
}
.chat-welcome-sub{
  font-size: 13.5px;color: var(--text-dim);
  line-height: 1.55;
  margin-bottom: 22px;
  padding: 0 6px;
}
.chat-suggest-title{
  font-size: 11px;font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;letter-spacing: 1.5px;
  margin-bottom: 10px;text-align: left;
}
html[dir="rtl"] .chat-suggest-title{text-align:right}
.chat-suggest{
  display: flex;flex-direction: column;gap: 8px;
}
.chat-suggest-btn{
  display: flex;align-items: center;gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 13.5px;font-weight: 600;
  color: var(--text);
  text-align: left;
  transition: all var(--t-fast);
}
html[dir="rtl"] .chat-suggest-btn{text-align:right}
.chat-suggest-btn:hover{
  background: rgba(0,212,255,.08);
  border-color: rgba(0,212,255,.35);
  transform: translateX(3px);
}
html[dir="rtl"] .chat-suggest-btn:hover{transform:translateX(-3px)}
.sug-icon{font-size: 18px;flex-shrink: 0}

.chat-welcome-divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-2), transparent);
  margin: 22px 0 14px;
}
.cw-chan-title{
  font-size: 11px;font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;letter-spacing: 1.5px;
  margin-bottom: 10px;
}
.cw-chan-list{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.cw-chan{
  display: inline-flex;align-items: center;gap: 6px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: 12px;font-weight: 700;
  color: var(--text-dim);
  transition: all var(--t-fast);
}
.cw-chan:hover{color: #fff;transform: translateY(-2px)}
.cw-chan-line:hover{background: #06c755;border-color: #06c755}
.cw-chan-wa:hover{background: #25d366;border-color: #25d366}
.cw-chan-phone:hover{background: var(--grad-1);border-color: transparent}

/* Messages */
.chat-messages{
  display: flex;flex-direction: column;gap: 14px;
}
.chat-msg{
  display: flex;gap: 8px;
  max-width: 85%;
  animation: msgIn .35s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes msgIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.chat-msg-ai{align-self: flex-start}
.chat-msg-user{align-self: flex-end;flex-direction: row-reverse}
html[dir="rtl"] .chat-msg-user{flex-direction:row}
html[dir="rtl"] .chat-msg-ai{align-self:flex-end}
html[dir="rtl"] .chat-msg-user{align-self:flex-start}

.chat-msg-avatar{
  width: 28px;height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;place-items: center;
  font-size: 11px;font-weight: 800;
  color: #fff;
}
.chat-msg-ai .chat-msg-avatar{
  background: var(--grad-1);
  box-shadow: 0 4px 12px rgba(0,212,255,.3);
}
.chat-msg-user .chat-msg-avatar{display: none}
.chat-bubble{
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 14px;line-height: 1.5;
  word-wrap: break-word;
  position: relative;
}
.chat-msg-ai .chat-bubble{
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-top-left-radius: 4px;
}
.chat-msg-user .chat-bubble{
  background: var(--grad-1);
  color: #fff;
  border-top-right-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,212,255,.25);
}
html[dir="rtl"] .chat-msg-ai .chat-bubble{border-top-left-radius:16px;border-top-right-radius:4px}
html[dir="rtl"] .chat-msg-user .chat-bubble{border-top-right-radius:16px;border-top-left-radius:4px}

.chat-msg-time{
  font-size: 10px;color: var(--text-muted);
  margin-top: 3px;
  padding: 0 4px;
}
.chat-msg-user .chat-msg-time{text-align: right}
html[dir="rtl"] .chat-msg-user .chat-msg-time{text-align:left}

/* AI rich cards (for links, CTA, product lists, etc.) */
.chat-bubble a{
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: rgba(0,212,255,.35);
  text-underline-offset: 2px;
}
.chat-bubble strong{font-weight: 700;color: var(--text)}
.chat-msg-user .chat-bubble strong{color: #fff}
.chat-bubble ul{margin: 6px 0 0;padding-left: 18px}
html[dir="rtl"] .chat-bubble ul{padding-right: 18px;padding-left: 0}
.chat-bubble li{margin-bottom: 3px}
.chat-card-cta{
  display: inline-flex;align-items: center;gap: 6px;
  margin-top: 10px;
  padding: 8px 14px;
  background: var(--grad-1);
  color: #fff !important;
  border-radius: var(--r-pill);
  font-size: 12.5px;font-weight: 700;
  text-decoration: none !important;
  transition: transform var(--t-fast);
}
.chat-card-cta:hover{transform: translateX(3px)}

/* Typing indicator */
.chat-typing{
  display: flex;align-items: center;gap: 4px;
  padding: 11px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  border-top-left-radius: 4px;
  max-width: fit-content;
}
.chat-typing span{
  width: 6px;height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: typeDot 1.4s infinite;
}
.chat-typing span:nth-child(2){background: var(--secondary);animation-delay: .2s}
.chat-typing span:nth-child(3){background: var(--accent);animation-delay: .4s}

/* Quick replies */
.chat-quick{
  display: flex;flex-wrap: wrap;gap: 6px;
  padding: 0 18px;
  margin-top: 8px;
  max-height: 0;
  overflow: hidden;
  transition: all var(--t-base);
}
.chat-quick.show{
  max-height: 100px;
  padding: 0 18px 10px;
}
.chat-quick-btn{
  padding: 7px 13px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  font-size: 12px;font-weight: 600;
  color: var(--primary);
  transition: all var(--t-fast);
}
.chat-quick-btn:hover{
  background: rgba(0,212,255,.12);
  transform: translateY(-1px);
}

/* Input */
.chat-input-wrap{
  display: flex;align-items: center;gap: 6px;
  padding: 12px 14px;
  background: rgba(0,0,0,.2);
  border-top: 1px solid var(--border);
}
.chat-input{
  flex: 1;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  color: var(--text);
  font-size: 14px;font-family: inherit;
  outline: none;
  transition: all var(--t-fast);
}
.chat-input:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,212,255,.15);
}
.chat-input::placeholder{color: var(--text-muted)}
.chat-input-btn{
  width: 34px;height: 34px;
  display: grid;place-items: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  border-radius: 50%;
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.chat-input-btn:hover{
  color: var(--primary);
  background: var(--surface);
}
.chat-send{
  width: 38px;height: 38px;
  display: grid;place-items: center;
  background: var(--grad-1);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0,212,255,.4);
  transition: all var(--t-base);
  flex-shrink: 0;
}
.chat-send:hover{transform: scale(1.08)}
.chat-send:disabled{opacity: .5;cursor: not-allowed;transform: none}

/* Footer */
.chat-foot{
  padding: 10px 18px;
  background: rgba(0,0,0,.3);
  border-top: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: center;
  display: flex;align-items: center;justify-content: center;gap: 6px;
  letter-spacing: .3px;
}
.chat-foot strong{
  background: var(--grad-1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight: 800;
}
.chat-foot-sep{color: var(--text-muted);opacity: .5}

/* Responsive */
@media (max-width: 480px){
  .chat-widget{bottom: 16px;left: 16px}
  html[dir="rtl"] .chat-widget{left: auto;right: 16px}
  .chat-panel{
    width: calc(100vw - 32px);
    height: calc(100vh - 120px);
    max-height: 700px;
  }
}

/* Move floaters up slightly to avoid chat on desktop */
@media (min-width: 768px){
  .floaters{bottom: 24px}
}

/* =========================================================
   PHASE 10 — FINAL POLISH (Production)
   ========================================================= */

/* ---------- Initial Loading Splash ---------- */
.splash{
  position: fixed;inset: 0;
  z-index: 9999;
  display: grid;place-items: center;
  background: #06081a;
  transition: opacity .6s ease-out, visibility .6s;
}
.splash.hide{opacity: 0;visibility: hidden;pointer-events: none}
.splash-inner{
  text-align: center;
  animation: splashIn .7s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes splashIn{
  from{opacity:0;transform:scale(.8)}
  to{opacity:1;transform:scale(1)}
}
.splash svg{
  margin: 0 auto 16px;
  filter: drop-shadow(0 0 30px rgba(0,212,255,.6));
  animation: splashFloat 2s ease-in-out infinite;
}
@keyframes splashFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.splash-name{
  font-family: var(--font-en);
  font-size: 28px;font-weight: 800;
  letter-spacing: -.5px;
  background: var(--grad-1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom: 20px;
}
.splash-name span{color: var(--text);-webkit-text-fill-color: var(--text)}
.splash-bar{
  width: 180px;height: 2px;
  background: var(--surface);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 auto;
}
.splash-bar span{
  display: block;
  width: 30%;height: 100%;
  background: var(--grad-1);
  border-radius: inherit;
  animation: splashLoad 1.4s ease-in-out infinite;
  box-shadow: 0 0 10px var(--primary);
}
@keyframes splashLoad{
  0%{transform: translateX(-100%)}
  100%{transform: translateX(400%)}
}

/* ---------- Back to Top Button ---------- */
.to-top{
  position: fixed;
  bottom: 24px;right: 94px;
  z-index: 88;
  width: 50px;height: 50px;
  display: grid;place-items: center;
  background: rgba(15,18,55,.95);
  border: 1px solid var(--border-2);
  border-radius: 50%;
  color: var(--primary);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: all var(--t-base);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.8);
}
html[dir="rtl"] .to-top{right: auto;left: 94px}
.to-top.show{
  opacity: 1;visibility: visible;
  transform: translateY(0) scale(1);
}
.to-top:hover{
  background: rgba(15,18,55,1);
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 14px 36px rgba(0,212,255,.3);
}
.to-top svg:first-child{z-index: 1;position: relative}
.to-top-ring{
  position: absolute;inset: 0;
  pointer-events: none;
}
.to-top-progress{
  stroke-dasharray: 138.23;      /* 2π * 22 */
  stroke-dashoffset: 138.23;
  transition: stroke-dashoffset .15s linear;
}

@media (max-width: 640px){
  .to-top{bottom: 80px;right: 16px;width: 44px;height: 44px}
  html[dir="rtl"] .to-top{right: auto;left: 16px}
  .to-top-ring{width: 44px;height: 44px}
}

/* ---------- Cookie Consent (PDPA) ---------- */
.cookie{
  position: fixed;
  left: 24px;right: 24px;
  bottom: 24px;
  z-index: 95;
  max-width: 720px;
  margin: 0 auto;
  background: rgba(15,18,55,.96);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 40px rgba(0,212,255,.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--t-base);
  pointer-events: none;
}
.cookie.show{
  opacity: 1;visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.cookie-inner{
  display: flex;align-items: center;gap: 18px;
  padding: 18px 22px;
}
.cookie-icon{
  font-size: 30px;
  flex-shrink: 0;
  animation: cookieWobble 3s ease-in-out infinite;
}
@keyframes cookieWobble{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-8deg)}
  75%{transform:rotate(8deg)}
}
.cookie-text{flex: 1;min-width: 0}
.cookie-text h4{
  font-size: 14.5px;font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.cookie-text p{
  font-size: 12.5px;color: var(--text-dim);
  line-height: 1.55;
}
.cookie-text a{color: var(--primary);text-decoration: underline}
.cookie-actions{display: flex;gap: 8px;flex-shrink: 0}
.cookie-btn{
  padding: 9px 16px;
  border-radius: var(--r-pill);
  font-size: 12.5px;font-weight: 700;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.cookie-settings{
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text-dim);
}
.cookie-settings:hover{color: var(--text);border-color: var(--primary)}
.cookie-reject{
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--text);
}
.cookie-reject:hover{background: var(--surface-2)}
.cookie-accept{
  background: var(--grad-1);
  color: #fff;
  border: none;
  box-shadow: 0 6px 18px rgba(0,212,255,.35);
}
.cookie-accept:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,212,255,.5);
}

@media (max-width: 700px){
  .cookie{left: 12px;right: 12px;bottom: 12px}
  .cookie-inner{flex-direction: column;align-items: flex-start;padding: 16px 18px;gap: 12px}
  .cookie-actions{width: 100%;flex-wrap: wrap}
  .cookie-actions .cookie-btn{flex: 1;min-width: 80px;text-align: center}
  .cookie-icon{display: none}
}

/* ---------- Print Styles ---------- */
@media print{
  .navbar,.announce-bar,.floaters,.chat-widget,.to-top,.cookie,.hero-bg,
  .ai-brain-stage,.prod-slider,.hiw-track,.fcta-buttons{display: none !important}
  body{background: #fff !important;color: #000 !important}
  .section-title,.hero-title{color: #000 !important}
  .section-title .grad-text,.grad-text,.hero-type,.logo-main{
    background: none !important;-webkit-text-fill-color: #000 !important;color: #000 !important;
  }
  .pr-card,.ts-card,.pain-card,.ai-cap,.hiw-card,.ct-method,.summary-card{
    break-inside: avoid;
    border: 1px solid #ccc !important;
    background: #fff !important;
  }
  a::after{content: ' (' attr(href) ')';font-size: 10px;color: #666}
  a[href^="#"]::after,a[href^="javascript"]::after{content: ''}
  .footer{background: #fff !important;color: #333 !important}
}

/* ---------- High-contrast mode ---------- */
@media (prefers-contrast: more){
  :root{
    --text: #ffffff;
    --text-dim: #e0e0e0;
    --border: rgba(255,255,255,.3);
    --border-2: rgba(255,255,255,.5);
  }
}

/* ---------- Forced colors (Windows High Contrast) ---------- */
@media (forced-colors: active){
  .btn-primary,.btn-cta,.pr-cta-primary{border: 2px solid ButtonText}
  .mk-yes,.mk-partial,.mk-no{border: 2px solid ButtonText}
}

/* ---------- Loading states + error boundaries ---------- */
.fade-in{animation: fadeIn .6s ease-out}
.slide-up{animation: fadeUp .6s ease-out}

/* ---------- Selection refinement ---------- */
::selection{background: rgba(123,92,255,.6);color: #fff;text-shadow: none}
::-moz-selection{background: rgba(123,92,255,.6);color: #fff}

/* ---------- Scroll hint for RTL correctness ---------- */
html[dir="rtl"] {scroll-behavior: smooth}

/* ---------- Performance: reduce paint on fixed elements ---------- */
.chat-widget,.floaters,.to-top,.cookie,.navbar{
  will-change: transform;
  transform: translateZ(0);
}

/* ---------- Final mobile polish ---------- */
@media (max-width: 400px){
  body{font-size: 15px}
  .btn-primary,.btn-ghost{padding: 12px 18px;font-size: 13.5px}
  .section-title{font-size: 26px !important}
  .hero-title{font-size: 30px !important}
}

/* =========================================================
   PHASE 11 — LEGAL PAGES (Privacy, Terms, Cookies, PDPA)
   ========================================================= */

/* ---------- Legal Hero ---------- */
.legal-hero{
  padding: 140px 24px 60px 24px;
  background: linear-gradient(180deg, rgba(15,18,55,.8), rgba(6,8,26,.95));
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.legal-hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(at 20% 30%, rgba(0,212,255,.1) 0, transparent 50%),
    radial-gradient(at 80% 50%, rgba(123,92,255,.08) 0, transparent 50%);
  pointer-events: none;
}
.legal-hero-inner{
  max-width: 1100px;margin: 0 auto;
  position: relative;text-align: center;
}
.legal-breadcrumb{
  display: inline-flex;align-items: center;gap: 8px;
  font-size: 12.5px;color: var(--text-dim);
  margin-bottom: 18px;font-weight: 500;letter-spacing: .5px;
}
.legal-breadcrumb a{color: var(--primary);text-decoration: none}
.legal-breadcrumb a:hover{text-decoration: underline}
.legal-breadcrumb span{color: var(--text-muted)}
.legal-badge{
  display: inline-flex;align-items: center;gap: 8px;
  padding: 6px 16px;
  background: rgba(0,212,255,.08);
  border: 1px solid rgba(0,212,255,.25);
  border-radius: 100px;
  font-size: 11.5px;font-weight: 800;
  color: var(--primary);
  letter-spacing: 1.5px;text-transform: uppercase;
  margin-bottom: 18px;
}
.legal-title{
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;letter-spacing: -1.2px;
  line-height: 1.1;margin-bottom: 14px;
}
.legal-title span{
  background: var(--grad-1);
  -webkit-background-clip: text;background-clip: text;
  color: transparent;
}
.legal-meta{
  display: inline-flex;align-items: center;gap: 16px;flex-wrap: wrap;
  justify-content: center;
  padding: 10px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 13px;color: var(--text-dim);
  margin-top: 22px;
}
.legal-meta strong{color: var(--text);font-weight: 700}
.legal-meta .sep{color: var(--text-muted)}

/* Language toggle on legal pages */
.legal-lang{
  display: inline-flex;gap: 2px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 100px;margin-top: 16px;
}
.legal-lang-btn{
  padding: 7px 16px;
  border-radius: 100px;
  font-size: 12px;font-weight: 700;
  color: var(--text-dim);
  background: transparent;border: none;cursor: pointer;
  transition: all var(--t-fast);
}
.legal-lang-btn:hover{color: var(--text)}
.legal-lang-btn.active{
  background: var(--grad-1);color: #fff;
  box-shadow: 0 4px 12px rgba(0,212,255,.35);
}

/* ---------- Legal Layout ---------- */
.legal-layout{
  max-width: 1200px;margin: 0 auto;
  padding: 50px 24px 100px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;
}

/* ---------- TOC Sidebar ---------- */
.legal-toc{
  position: sticky;top: 90px;
  padding: 22px 18px;
  background: linear-gradient(180deg, rgba(15,18,55,.5), rgba(15,18,55,.25));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  backdrop-filter: blur(14px);
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.legal-toc-title{
  font-size: 11px;font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 1.5px;text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.legal-toc ul{list-style: none;display: grid;gap: 2px}
.legal-toc a{
  display: block;
  padding: 8px 12px;
  font-size: 13px;color: var(--text-dim);
  border-radius: 8px;
  text-decoration: none;
  transition: all var(--t-fast);
  border-left: 2px solid transparent;
}
.legal-toc a:hover{
  color: var(--text);
  background: rgba(0,212,255,.08);
  border-left-color: var(--primary);
}
.legal-toc a.active{
  color: var(--primary);
  background: rgba(0,212,255,.1);
  border-left-color: var(--primary);
  font-weight: 600;
}

/* ---------- Legal Main Content ---------- */
.legal-main{
  padding: 32px 36px;
  background: linear-gradient(180deg, rgba(15,18,55,.5), rgba(15,18,55,.25));
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(14px);
}

/* Summary box at top */
.legal-summary{
  padding: 22px 26px;
  background: linear-gradient(135deg, rgba(46,230,166,.08), rgba(0,212,255,.06));
  border: 1px solid rgba(46,230,166,.25);
  border-left: 4px solid var(--success);
  border-radius: var(--r-lg);
  margin-bottom: 36px;
}
html[dir="rtl"] .legal-summary{border-left:1px solid rgba(46,230,166,.25);border-right:4px solid var(--success)}
.legal-summary-title{
  font-size: 13px;font-weight: 800;
  color: var(--success);
  letter-spacing: 1.5px;text-transform: uppercase;
  margin-bottom: 10px;
}
.legal-summary-text{
  font-size: 14.5px;color: var(--text);
  line-height: 1.7;
}
.legal-summary-text strong{color: var(--text);font-weight: 700}

/* Section styling */
.legal-section{
  margin-bottom: 40px;
  scroll-margin-top: 90px;
}
.legal-section h2{
  display: flex;align-items: center;gap: 12px;
  font-size: 22px;font-weight: 800;
  color: var(--text);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  letter-spacing: -.3px;
}
.legal-section-num{
  display: inline-grid;place-items: center;
  width: 34px;height: 34px;
  background: var(--grad-1);
  border-radius: 10px;
  font-family: var(--font-en);
  font-size: 14px;font-weight: 800;color: #fff;
  box-shadow: 0 4px 12px rgba(0,212,255,.3);
  flex-shrink: 0;
}
.legal-section h3{
  font-size: 16px;font-weight: 700;
  color: var(--text);
  margin: 22px 0 10px;
}
.legal-section p{
  font-size: 14.5px;color: var(--text);
  line-height: 1.75;
  margin-bottom: 14px;
}
.legal-section strong{color: var(--text);font-weight: 700}
.legal-section em{color: var(--primary);font-style: normal;font-weight: 600}
.legal-section a{
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: rgba(0,212,255,.4);
  text-underline-offset: 3px;
}
.legal-section a:hover{text-decoration-color: var(--primary)}
.legal-section ul,
.legal-section ol{
  margin: 10px 0 16px;
  padding-left: 28px;
}
html[dir="rtl"] .legal-section ul,
html[dir="rtl"] .legal-section ol{padding-left: 0;padding-right: 28px}
.legal-section li{
  font-size: 14.5px;color: var(--text);
  line-height: 1.7;
  margin-bottom: 6px;
}

/* Highlight/Info boxes */
.legal-info{
  padding: 16px 20px;
  background: rgba(0,212,255,.06);
  border: 1px solid rgba(0,212,255,.2);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md);
  margin: 16px 0;
  font-size: 14px;line-height: 1.65;
}
html[dir="rtl"] .legal-info{border-left:1px solid rgba(0,212,255,.2);border-right:3px solid var(--primary)}
.legal-info::before{
  content:'💡  ';
  font-size: 16px;
  margin-right: 4px;
}
.legal-warn{
  padding: 16px 20px;
  background: rgba(255,181,71,.06);
  border: 1px solid rgba(255,181,71,.22);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-md);
  margin: 16px 0;
  font-size: 14px;line-height: 1.65;
}
html[dir="rtl"] .legal-warn{border-left:1px solid rgba(255,181,71,.22);border-right:3px solid var(--warn)}
.legal-warn::before{
  content:'⚠  ';font-size: 16px;margin-right: 4px;
}

/* Rights grid */
.legal-rights{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 20px 0;
}
.legal-right{
  padding: 16px 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all var(--t-fast);
}
.legal-right:hover{
  border-color: rgba(0,212,255,.3);
  background: rgba(0,212,255,.05);
  transform: translateY(-2px);
}
.legal-right-icon{
  display: inline-grid;place-items: center;
  width: 34px;height: 34px;
  background: rgba(0,212,255,.12);
  border: 1px solid rgba(0,212,255,.25);
  border-radius: 10px;
  color: var(--primary);
  margin-bottom: 10px;
}
.legal-right h4{
  font-size: 13.5px;font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.legal-right p{
  font-size: 12.5px;color: var(--text-dim);
  line-height: 1.5;margin: 0;
}

/* Legal table */
.legal-table{
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  background: rgba(0,0,0,.15);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
.legal-table th,
.legal-table td{
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
html[dir="rtl"] .legal-table th,
html[dir="rtl"] .legal-table td{text-align: right}
.legal-table th{
  background: rgba(0,0,0,.3);
  color: var(--text);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.legal-table td{color: var(--text-dim)}
.legal-table tr:last-child td{border-bottom: none}
.legal-table tr:hover td{background: rgba(255,255,255,.02);color: var(--text)}

/* Contact box */
.legal-contact{
  margin-top: 30px;
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(0,212,255,.1), rgba(123,92,255,.08));
  border: 1px solid rgba(0,212,255,.25);
  border-radius: var(--r-xl);
}
.legal-contact h3{
  font-size: 17px;font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}
.legal-contact p{
  font-size: 14px;color: var(--text-dim);line-height: 1.65;
  margin-bottom: 14px;
}
.legal-contact-list{
  display: grid;gap: 8px;list-style: none;padding: 0;margin: 0;
}
.legal-contact-list li{
  display: flex;align-items: center;gap: 10px;
  font-size: 13.5px;color: var(--text);
  padding: 0;margin: 0;
}
.legal-contact-list svg{color: var(--primary);flex-shrink: 0}
.legal-contact-list a{color: var(--primary)}

/* Other policies nav */
.legal-other{
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.legal-other-title{
  font-size: 11px;font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 1.5px;text-transform: uppercase;
  margin-bottom: 16px;
}
.legal-other-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.legal-other-card{
  display: flex;align-items: center;gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: all var(--t-fast);
}
.legal-other-card:hover{
  background: rgba(0,212,255,.05);
  border-color: rgba(0,212,255,.3);
  transform: translateY(-2px);
}
.legal-other-card svg{color: var(--primary);flex-shrink: 0}
.legal-other-card-title{
  font-size: 14px;font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.legal-other-card-desc{
  font-size: 11.5px;color: var(--text-dim);
  margin-top: 2px;
}

/* i18n bilingual display */
.legal-en{display: none}
html[data-legal-lang="en"] .legal-th{display: none}
html[data-legal-lang="en"] .legal-en{display: block}
html[data-legal-lang="en"] .legal-en-inline{display: inline}
html[data-legal-lang="en"] .legal-section li.legal-th{display: none}

/* Responsive */
@media (max-width: 900px){
  .legal-layout{grid-template-columns: 1fr;gap: 24px}
  .legal-toc{
    position: relative;top: auto;
    max-height: none;
  }
  .legal-hero{padding: 100px 20px 40px}
  .legal-main{padding: 28px 24px}
}
@media (max-width: 600px){
  .legal-hero{padding: 90px 16px 36px}
  .legal-title{font-size: 26px}
  .legal-main{padding: 24px 20px}
  .legal-section h2{font-size: 18px}
  .legal-section-num{width: 28px;height: 28px;font-size: 12px}
  .legal-contact{padding: 22px 20px}
}

/* Print styles for legal pages */
@media print{
  .legal-hero{padding: 20px 0;background: #fff !important;border-bottom: 2px solid #000}
  .legal-title,.legal-title span{color: #000 !important;-webkit-text-fill-color: #000 !important;background: none !important}
  .legal-toc,.legal-other,.legal-lang{display: none !important}
  .legal-layout{grid-template-columns: 1fr;padding: 0}
  .legal-main{border: none !important;background: #fff !important;padding: 0}
  .legal-section{break-inside: avoid}
  .legal-summary,.legal-info,.legal-warn,.legal-contact{
    border: 1px solid #666 !important;background: #f8f8f8 !important;
  }
  @page{margin: 2cm 1.5cm}
}

/* =========================================================
   PHASE 13 — BLOG / INSIGHTS
   ========================================================= */

/* Reading progress bar (global for blog) */
.read-progress{
  position: fixed;top: 0;left: 0;
  width: 0%;height: 3px;
  background: var(--grad-1);
  z-index: 200;
  transition: width .1s linear;
  box-shadow: 0 0 10px var(--primary);
}

/* ─── Blog Hub ─── */
.blog-hero{
  padding: 140px 24px 70px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.blog-hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(at 30% 20%, rgba(0,212,255,.12) 0, transparent 50%),
    radial-gradient(at 70% 50%, rgba(255,78,205,.08) 0, transparent 50%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none;
}
.blog-hero-inner{max-width:900px;margin:0 auto;position:relative;z-index:1}
.blog-hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 18px;
  background: rgba(0,212,255,.08);
  border: 1px solid rgba(0,212,255,.28);
  border-radius: 100px;
  font-size: 12px; font-weight: 800;
  color: var(--primary);
  letter-spacing: 2px;text-transform: uppercase;
  margin-bottom: 18px;
}
.blog-hero-eyebrow::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background: var(--primary);box-shadow: 0 0 10px var(--primary);
  animation: pulseDot 2s infinite;
}
.blog-hero-title{
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 800;letter-spacing:-2px;
  line-height:1.1;margin-bottom:18px;
}
.blog-hero-title span{
  background: var(--grad-1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.blog-hero-sub{
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--text-dim);
  max-width: 600px;margin: 0 auto 30px;
  line-height: 1.75;
}

/* Blog search */
.blog-search{
  position:relative;max-width:560px;margin:0 auto 20px;
}
.blog-search input{
  width:100%;padding:14px 20px 14px 48px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 100px;
  color: var(--text);font-size: 15px;font-family: inherit;
  outline: none; transition: all var(--t-fast);
  backdrop-filter: blur(10px);
}
.blog-search input:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(0,212,255,.15);
}
.blog-search input::placeholder{color: var(--text-muted)}
.blog-search svg{
  position: absolute;
  left: 18px;top: 50%;transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
html[dir="rtl"] .blog-search svg{left:auto;right:18px}
html[dir="rtl"] .blog-search input{padding:14px 48px 14px 20px}

/* Categories filter */
.blog-cats{
  display:flex;flex-wrap:wrap;gap:8px;
  justify-content:center;margin: 20px 0 0;
}
.blog-cat{
  padding: 8px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 13px; font-weight: 600;
  color: var(--text-dim);
  transition: all var(--t-fast);
  cursor: pointer;
}
.blog-cat:hover{color: var(--text);border-color: var(--primary)}
.blog-cat.active{
  background: var(--grad-1); color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(0,212,255,.3);
}

/* Featured article (big card) */
.blog-featured{
  max-width: 1200px;margin: 40px auto 60px;
  padding: 0 24px;
}
.blog-feat-card{
  display: grid;grid-template-columns: 1.2fr 1fr;gap: 0;
  background: linear-gradient(180deg, rgba(15,18,55,.6), rgba(15,18,55,.3));
  border: 1px solid var(--border-2);
  border-radius: var(--r-2xl);
  overflow: hidden;
  backdrop-filter: blur(14px);
  transition: all var(--t-base);
}
.blog-feat-card:hover{
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: 0 30px 60px rgba(0,212,255,.15);
}
.blog-feat-visual{
  position: relative;
  min-height: 340px;
  background: linear-gradient(135deg, rgba(0,212,255,.2), rgba(123,92,255,.15), rgba(255,78,205,.1));
  overflow: hidden;
  display: grid;place-items: center;
}
.blog-feat-visual::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(0,212,255,.4), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255,78,205,.35), transparent 60%);
  animation: featBG 8s ease-in-out infinite;
}
@keyframes featBG{
  0%,100%{transform:scale(1) rotate(0)}
  50%{transform:scale(1.15) rotate(8deg)}
}
.blog-feat-visual-icon{
  position:relative;z-index:1;
  font-size:110px;
  filter: drop-shadow(0 20px 40px rgba(0,212,255,.4));
  animation: float 5s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.blog-feat-body{padding: 40px 44px;display:flex;flex-direction:column;justify-content:center}
.blog-feat-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 12px;
  background:rgba(255,215,0,.1);
  border:1px solid rgba(255,215,0,.3);
  color:#ffd700;
  border-radius:100px;
  font-size:10.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:14px;width:fit-content;
}
.blog-feat-title{
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;letter-spacing: -.8px;
  line-height: 1.2; margin-bottom: 14px;
  color: var(--text);
}
.blog-feat-excerpt{
  font-size: 15px;color: var(--text-dim);
  line-height: 1.7; margin-bottom: 20px;
}
.blog-feat-meta{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size: 13px;color: var(--text-dim);
}
.blog-feat-meta strong{color: var(--text)}

/* Article grid */
.blog-grid-wrap{max-width: 1200px;margin: 0 auto;padding: 0 24px 80px}
.blog-grid-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom: 30px;flex-wrap: wrap;gap: 16px;
}
.blog-grid-head h2{font-size:26px;font-weight:800;letter-spacing:-.5px}
.blog-grid-head .count{font-size:13px;color:var(--text-dim)}
.blog-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.blog-card{
  display: flex;flex-direction: column;
  background: linear-gradient(180deg, rgba(15,18,55,.5), rgba(15,18,55,.25));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  backdrop-filter: blur(14px);
  transition: all var(--t-base);
  text-decoration: none;
}
.blog-card:hover{
  transform: translateY(-6px);
  border-color: rgba(0,212,255,.35);
  box-shadow: 0 20px 40px rgba(0,0,0,.3);
}
.blog-card-visual{
  position: relative;
  aspect-ratio: 16/9;
  background: var(--bc-bg, linear-gradient(135deg, rgba(0,212,255,.25), rgba(123,92,255,.15)));
  display: grid;place-items: center;
  overflow: hidden;
}
.blog-card-visual::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 20% 20%, var(--bc-a,rgba(0,212,255,.4)), transparent 60%),
    radial-gradient(circle at 80% 80%, var(--bc-b,rgba(255,78,205,.3)), transparent 60%);
}
.blog-card-icon{
  font-size: 56px; position: relative;z-index: 1;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.3));
  transition: transform var(--t-base);
}
.blog-card:hover .blog-card-icon{transform: scale(1.15) rotate(-5deg)}
.blog-card-body{padding: 22px 22px 18px;flex: 1;display:flex;flex-direction:column}
.blog-card-cat{
  display:inline-block;
  padding:3px 10px;
  background:var(--cat-bg,rgba(0,212,255,.1));
  color:var(--cat-color,var(--primary));
  border:1px solid var(--cat-border,rgba(0,212,255,.3));
  border-radius:100px;font-size:11px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;margin-bottom:12px;width:fit-content;
}
.cat-ai{--cat-bg:rgba(123,92,255,.12);--cat-color:#b48bff;--cat-border:rgba(123,92,255,.3)}
.cat-seo{--cat-bg:rgba(46,230,166,.12);--cat-color:var(--success);--cat-border:rgba(46,230,166,.3)}
.cat-biz{--cat-bg:rgba(255,181,71,.12);--cat-color:var(--warn);--cat-border:rgba(255,181,71,.3)}
.cat-prod{--cat-bg:rgba(255,78,205,.12);--cat-color:var(--accent);--cat-border:rgba(255,78,205,.3)}

.blog-card-title{
  font-size: 17px;font-weight: 700;
  color: var(--text); line-height: 1.35;
  margin-bottom: 10px;
  display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-excerpt{
  font-size: 13.5px;color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 14px;flex: 1;
  display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-meta{
  display:flex;align-items:center;gap:10px;
  font-size: 12px;color: var(--text-muted);
  padding-top: 12px;border-top: 1px solid var(--border);
}
.blog-card-meta strong{color: var(--text-dim)}

/* Variants for variety */
.bc-1{--bc-a:rgba(0,212,255,.4);--bc-b:rgba(123,92,255,.3)}
.bc-2{--bc-a:rgba(123,92,255,.4);--bc-b:rgba(255,78,205,.3)}
.bc-3{--bc-a:rgba(255,78,205,.4);--bc-b:rgba(255,181,71,.3)}
.bc-4{--bc-a:rgba(46,230,166,.4);--bc-b:rgba(0,212,255,.3)}
.bc-5{--bc-a:rgba(255,181,71,.4);--bc-b:rgba(255,78,205,.3)}
.bc-6{--bc-a:rgba(0,212,255,.4);--bc-b:rgba(46,230,166,.3)}

/* Newsletter signup */
.blog-newsletter{
  max-width: 1200px;margin: 0 auto 80px;padding: 0 24px;
}
.newsletter-card{
  padding: 44px;text-align: center;
  background: linear-gradient(135deg, rgba(0,212,255,.1), rgba(123,92,255,.08), rgba(255,78,205,.06));
  border: 1px solid var(--border-2);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(14px);
  position: relative;overflow: hidden;
}
.newsletter-card::before{
  content:'';position:absolute;inset:-30px;
  background: var(--grad-1);opacity: .15;z-index:-1;filter:blur(40px);
  animation: hvGlowPulse 4s ease-in-out infinite;
}
.newsletter-title{
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 800;margin-bottom: 8px;
}
.newsletter-title span{
  background: var(--grad-1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.newsletter-sub{
  font-size: 14.5px;color: var(--text-dim);
  max-width: 500px;margin: 0 auto 22px;
}
.newsletter-form{
  display:flex;gap:10px;max-width: 480px;margin: 0 auto;flex-wrap:wrap;
}
.newsletter-form input{
  flex: 1;min-width: 200px;padding: 13px 20px;
  background: rgba(15,18,55,.6);
  border: 1px solid var(--border-2);
  border-radius: 100px;
  color: var(--text);font-size: 14px;font-family: inherit;
  outline: none;
}
.newsletter-form input:focus{border-color: var(--primary)}
.newsletter-form button{
  padding: 13px 26px;
  background: var(--grad-1);color: #fff;
  border: none;border-radius: 100px;
  font-size: 14px;font-weight: 700;
  cursor: pointer; transition: all var(--t-base);
  white-space: nowrap;
}
.newsletter-form button:hover{transform: translateY(-2px);box-shadow: 0 10px 24px rgba(0,212,255,.4)}

/* ─── Article page ─── */
.article-hero{
  padding: 120px 24px 50px;
  position: relative;overflow: hidden;
}
.article-hero-inner{max-width: 900px;margin: 0 auto;position:relative;z-index:1}
.article-breadcrumb{
  display: flex;align-items: center;gap: 8px;flex-wrap: wrap;
  font-size: 12.5px;color: var(--text-muted);margin-bottom: 16px;
}
.article-breadcrumb a{color: var(--primary);text-decoration: none}
.article-breadcrumb a:hover{text-decoration: underline}
.article-breadcrumb span{color:var(--text-muted)}
.article-cat-pill{
  display: inline-block;
  padding: 4px 14px;
  background: var(--cat-bg,rgba(0,212,255,.1));
  color: var(--cat-color,var(--primary));
  border: 1px solid var(--cat-border,rgba(0,212,255,.3));
  border-radius: 100px;
  font-size: 12px;font-weight: 800;letter-spacing: 1px;
  text-transform: uppercase;margin-bottom: 18px;
}
.article-title{
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 800;letter-spacing: -1.5px;
  line-height: 1.12;margin-bottom: 18px;
}
.article-deck{
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--text-dim);line-height: 1.6;
  margin-bottom: 30px;
}
.article-meta-row{
  display:flex;align-items:center;gap: 20px;flex-wrap: wrap;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 40px;
}
.article-author{display:flex;align-items:center;gap:12px}
.article-avatar{
  width: 44px;height: 44px;
  background: var(--grad-1);
  border-radius: 50%;
  display: grid;place-items: center;
  font-weight: 900;font-size: 14px;color: #fff;
}
.article-author-info strong{
  display: block;font-size: 14px;font-weight: 700;
  color: var(--text);margin-bottom: 1px;
}
.article-author-info span{font-size: 12px;color: var(--text-muted)}
.article-meta-item{
  display:flex;align-items:center;gap:6px;
  font-size: 13px;color: var(--text-dim);
}

/* Article layout */
.article-layout{
  max-width: 1200px;margin: 0 auto;
  padding: 0 24px 80px;
  display: grid;
  grid-template-columns: 250px 1fr 200px;
  gap: 48px;align-items: start;
}

/* TOC sidebar */
.article-toc{
  position: sticky;top: 100px;
  padding: 22px 20px;
  background: rgba(15,18,55,.5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.article-toc-title{
  font-size: 11px;font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 1.5px;text-transform: uppercase;
  margin-bottom: 14px;padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.article-toc ul{list-style: none;display: grid;gap: 2px}
.article-toc a{
  display: block;padding: 7px 10px;
  font-size: 13px; color: var(--text-dim);
  border-radius: 6px;text-decoration: none;
  transition: all var(--t-fast);
  border-left: 2px solid transparent;line-height: 1.4;
}
.article-toc a:hover{color: var(--text);background: rgba(0,212,255,.06);border-left-color: var(--primary)}
.article-toc a.active{color: var(--primary);background: rgba(0,212,255,.1);border-left-color: var(--primary);font-weight: 600}

/* Share sidebar */
.article-share{
  position: sticky;top: 100px;
  display: flex;flex-direction: column;gap: 10px;
  align-items: center;padding-top: 10px;
}
.article-share-label{
  font-size: 10px;font-weight: 800;color: var(--text-muted);
  letter-spacing: 1.5px;text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);margin-bottom: 12px;
}
.share-btn{
  width: 42px;height: 42px;
  display: grid;place-items: center;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 50%;
  color: var(--text-dim);
  text-decoration: none;
  transition: all var(--t-fast);
}
.share-btn:hover{color: #fff;transform: translateY(-2px) scale(1.08)}
.share-btn.fb:hover{background: #1877f2;border-color: #1877f2}
.share-btn.tw:hover{background: #000;border-color: #000}
.share-btn.line:hover{background: #06c755;border-color: #06c755}
.share-btn.copy:hover{background: var(--grad-1);border-color: transparent}

/* Article body */
.article-body{
  font-size: 17px;line-height: 1.8;color: var(--text);
  max-width: 720px;margin: 0 auto;
}

/* TL;DR / Key takeaways box */
.tldr-box{
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(46,230,166,.08), rgba(0,212,255,.05));
  border: 1px solid rgba(46,230,166,.25);
  border-left: 4px solid var(--success);
  border-radius: var(--r-lg);
  margin-bottom: 36px;
}
html[dir="rtl"] .tldr-box{border-left:1px solid rgba(46,230,166,.25);border-right:4px solid var(--success)}
.tldr-title{
  display:flex;align-items:center;gap:10px;
  font-size: 12px;font-weight: 800;color: var(--success);
  letter-spacing: 1.5px;text-transform: uppercase;
  margin-bottom: 12px;
}
.tldr-title::before{content:'📌'; font-size:14px}
.tldr-box ul{list-style: none;display: grid;gap: 8px;padding: 0}
.tldr-box li{
  display:flex;gap:10px;align-items:flex-start;
  font-size: 14.5px;color: var(--text);line-height: 1.6;
}
.tldr-box li::before{
  content:'✓';color: var(--success);font-weight: 900;
  flex-shrink: 0;
}

/* Article typography */
.article-body h2{
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;letter-spacing: -.8px;
  margin: 50px 0 20px;scroll-margin-top: 100px;
  color: var(--text);position: relative;padding-left: 20px;
  line-height: 1.25;
}
.article-body h2::before{
  content:'';position:absolute;left:0;top:14%;height:72%;
  width: 4px;background: var(--grad-1);border-radius: 2px;
}
html[dir="rtl"] .article-body h2{padding-left:0;padding-right:20px}
html[dir="rtl"] .article-body h2::before{left:auto;right:0}

.article-body h3{
  font-size: 22px;font-weight: 700;
  margin: 36px 0 14px;scroll-margin-top: 100px;
  color: var(--text);letter-spacing: -.3px;line-height: 1.35;
}
.article-body h4{
  font-size: 18px;font-weight: 700;
  margin: 26px 0 10px;color: var(--text);
}
.article-body p{margin-bottom: 20px}
.article-body p strong{color: var(--text);font-weight: 700}
.article-body a{
  color: var(--primary); text-decoration: underline;
  text-decoration-color: rgba(0,212,255,.4);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-fast);
}
.article-body a:hover{text-decoration-color: var(--primary)}
.article-body ul,
.article-body ol{
  margin: 18px 0 24px;padding-left: 28px;
}
html[dir="rtl"] .article-body ul,
html[dir="rtl"] .article-body ol{padding-left: 0;padding-right: 28px}
.article-body li{margin-bottom: 8px;line-height: 1.75}
.article-body ul li::marker{color: var(--primary)}
.article-body ol li::marker{color: var(--primary);font-weight: 700}

/* Pull quote */
.pull-quote{
  margin: 36px 0;padding: 28px 32px;
  background: linear-gradient(135deg, rgba(0,212,255,.06), rgba(123,92,255,.04));
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  font-size: 19px;font-style: italic;
  color: var(--text);line-height: 1.6;
  position: relative;
}
html[dir="rtl"] .pull-quote{border-left:none;border-right:4px solid var(--primary);border-radius:var(--r-lg) 0 0 var(--r-lg)}
.pull-quote::before{
  content:'"';
  position:absolute;top:10px;left:18px;
  font-size: 60px;color: var(--primary);opacity: .3;
  font-family: serif;line-height: 0;
}
.pull-quote-cite{
  display:block;margin-top: 12px;
  font-size: 13px;color: var(--text-muted);
  font-style: normal;
}

/* Info/Warning/Pro-tip boxes */
.callout{
  padding: 18px 22px;
  border-radius: var(--r-lg);
  margin: 24px 0;font-size: 15px;line-height: 1.65;
  display: flex;gap: 14px;
}
.callout-icon{flex-shrink: 0;font-size: 22px;line-height: 1}
.callout-body{flex: 1}
.callout-body strong{color: var(--text)}
.callout.info{background: rgba(0,212,255,.06);border: 1px solid rgba(0,212,255,.22)}
.callout.warn{background: rgba(255,181,71,.06);border: 1px solid rgba(255,181,71,.22)}
.callout.tip{background: rgba(46,230,166,.06);border: 1px solid rgba(46,230,166,.22)}
.callout.danger{background: rgba(255,85,117,.06);border: 1px solid rgba(255,85,117,.22)}

/* Stats callout */
.stat-callout{
  margin: 30px 0;padding: 24px;
  background: linear-gradient(135deg, rgba(0,212,255,.08), rgba(123,92,255,.05));
  border: 1px solid rgba(0,212,255,.2);
  border-radius: var(--r-lg);
  display: grid;grid-template-columns: auto 1fr;gap: 24px;align-items: center;
}
.stat-callout-num{
  font-family: var(--font-en);font-size: 56px;font-weight: 900;
  line-height: 1;letter-spacing: -3px;
  background: var(--grad-1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-callout-text{font-size: 15px;color: var(--text-dim);line-height: 1.6}

/* Comparison table */
.article-body table{
  width: 100%;border-collapse: collapse;
  margin: 24px 0;background: rgba(0,0,0,.2);
  border-radius: var(--r-md);overflow: hidden;
  border: 1px solid var(--border);font-size: 14px;
}
.article-body th,
.article-body td{
  padding: 14px 16px;text-align: left;
  border-bottom: 1px solid var(--border);
}
html[dir="rtl"] .article-body th,
html[dir="rtl"] .article-body td{text-align:right}
.article-body th{
  background: rgba(0,0,0,.35);
  color: var(--text);font-weight: 700;
  font-size: 12px;letter-spacing: .5px;text-transform: uppercase;
}
.article-body td{color: var(--text-dim)}
.article-body tr:last-child td{border-bottom: none}
.article-body tr:hover td{background: rgba(255,255,255,.02);color: var(--text)}

/* Code block */
.article-body pre{
  margin: 20px 0;padding: 20px 22px;
  background: #0a0e27;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow-x: auto;
  font-family: ui-monospace,'SF Mono','Menlo',monospace;
  font-size: 13px;line-height: 1.6;color: #c9d1ff;
}
.article-body code{
  background: rgba(255,255,255,.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace,monospace;
  font-size: .88em;color: var(--primary);
}
.article-body pre code{background: none;padding: 0;color: inherit}

/* FAQ section */
.faq-section{margin: 50px 0;padding-top: 40px;border-top: 1px solid var(--border)}
.faq-item{
  margin-bottom: 12px;
  background: rgba(15,18,55,.4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);overflow: hidden;
  transition: border-color var(--t-fast);
}
.faq-item[open]{border-color: rgba(0,212,255,.3)}
.faq-item summary{
  padding: 18px 22px;cursor: pointer;
  font-size: 15.5px;font-weight: 700;color: var(--text);
  list-style: none;display: flex;align-items: center;justify-content: space-between;gap: 14px;
  transition: color var(--t-fast);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color: var(--primary)}
.faq-item summary::after{
  content:'+';font-size: 22px;font-weight: 300;
  color: var(--primary);flex-shrink: 0;
  transition: transform var(--t-base);
}
.faq-item[open] summary::after{transform: rotate(45deg)}
.faq-item-body{
  padding: 0 22px 22px;
  font-size: 14.5px;color: var(--text-dim);line-height: 1.75;
}
.faq-item-body p:last-child{margin-bottom: 0}

/* CTA box inside article */
.article-cta{
  margin: 50px 0;padding: 36px 40px;
  background: linear-gradient(135deg, rgba(0,212,255,.1), rgba(123,92,255,.08), rgba(255,78,205,.06));
  border: 1px solid rgba(0,212,255,.3);
  border-radius: var(--r-2xl);
  text-align: center;position: relative;overflow: hidden;
}
.article-cta::before{
  content:'';position:absolute;inset:-30px;
  background: var(--grad-1);opacity: .15;z-index:-1;filter: blur(40px);
  animation: hvGlowPulse 4s ease-in-out infinite;
}
.article-cta h3{
  font-size: 22px;font-weight: 800;
  color: var(--text);margin-bottom: 8px;
}
.article-cta p{
  font-size: 14.5px;color: var(--text-dim);line-height: 1.6;
  margin-bottom: 18px;
}
.article-cta-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* Tags */
.article-tags{
  display:flex;flex-wrap:wrap;gap:8px;
  margin: 40px 0;padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.article-tag{
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 12px;color: var(--text-dim);
  text-decoration: none;transition: all var(--t-fast);
}
.article-tag:hover{color: var(--primary);border-color: var(--primary)}

/* Author card */
.article-author-card{
  margin: 40px 0;padding: 28px 32px;
  background: linear-gradient(180deg, rgba(15,18,55,.5), rgba(15,18,55,.25));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  display: flex;gap: 20px;align-items: flex-start;
}
.article-author-card .article-avatar{width: 64px;height: 64px;font-size: 20px;flex-shrink:0}
.article-author-card h4{font-size: 17px;font-weight: 700;margin-bottom: 6px}
.article-author-card p{font-size: 14px;color: var(--text-dim);line-height: 1.6;margin: 0}

/* Related articles */
.related-section{margin: 60px 0 20px;padding-top: 40px;border-top: 1px solid var(--border)}
.related-section h3{font-size: 22px;font-weight: 800;margin-bottom: 24px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* Responsive */
@media(max-width: 1100px){
  .article-layout{grid-template-columns: 1fr;gap:24px}
  .article-toc,.article-share{position:relative;top:auto;max-height: none}
  .article-share{flex-direction:row;justify-content:center}
  .article-share-label{display:none}
  .blog-feat-card{grid-template-columns: 1fr}
  .blog-feat-visual{min-height: 240px}
  .blog-grid{grid-template-columns: 1fr 1fr}
  .related-grid{grid-template-columns: 1fr 1fr}
}
@media(max-width: 700px){
  .blog-hero{padding: 90px 16px 40px}
  .blog-grid,.related-grid{grid-template-columns: 1fr}
  .blog-feat-body{padding: 28px 24px}
  .article-hero{padding: 90px 16px 40px}
  .article-meta-row{gap:12px;flex-direction:column;align-items:flex-start}
  .article-body{font-size: 16px}
  .article-body h2{font-size: 24px}
  .article-cta{padding: 28px 24px}
  .article-author-card{flex-direction:column;gap:14px}
  .stat-callout{grid-template-columns: 1fr;text-align:center}
  .stat-callout-num{font-size: 44px}
}

/* Print */
@media print{
  .read-progress,.article-toc,.article-share,.newsletter-card,
  .article-cta,.blog-cats,.related-section{display:none !important}
  .article-layout{grid-template-columns: 1fr}
  .article-body{max-width: 100%}
  body{background: #fff;color: #000}
  @page{margin: 2cm 1.5cm}
}

/* =========================================================
   PHASE 14 — FAQ HUB
   ========================================================= */

/* FAQ Hero */
.faq-hero{
  padding: 140px 24px 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.faq-hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(at 25% 20%, rgba(123,92,255,.14) 0, transparent 50%),
    radial-gradient(at 75% 50%, rgba(0,212,255,.1) 0, transparent 50%);
  pointer-events:none;
}
.faq-hero-inner{max-width:900px;margin:0 auto;position:relative;z-index:1}
.faq-hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 18px;
  background: rgba(123,92,255,.08);
  border: 1px solid rgba(123,92,255,.28);
  border-radius: 100px;
  font-size: 12px; font-weight: 800;
  color: #b48bff;
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 18px;
}
.faq-hero-badge::before{content:'';width:8px;height:8px;border-radius:50%;background:#b48bff;box-shadow:0 0 10px #b48bff;animation:pulseDot 2s infinite}
.faq-hero-title{
  font-size: clamp(36px, 5.5vw, 58px);
  font-weight: 800;letter-spacing: -1.5px;
  line-height: 1.1; margin-bottom: 16px;
}
.faq-hero-title span{
  background: linear-gradient(135deg, #7b5cff, #ff4ecd);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.faq-hero-sub{
  font-size: 17px; color: var(--text-dim);
  max-width: 600px; margin: 0 auto 28px;
  line-height: 1.7;
}

/* FAQ Search */
.faq-search{
  position: relative;max-width: 640px;margin: 0 auto 30px;
}
.faq-search input{
  width: 100%;
  padding: 16px 22px 16px 54px;
  background: rgba(15,18,55,.6);
  border: 2px solid var(--border-2);
  border-radius: 100px;
  color: var(--text); font-size: 16px;font-family: inherit;
  outline: none; transition: all var(--t-fast);
  backdrop-filter: blur(14px);
}
.faq-search input:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 5px rgba(0,212,255,.15);
}
.faq-search input::placeholder{color: var(--text-muted)}
.faq-search svg{
  position: absolute;left: 20px;top: 50%;transform: translateY(-50%);
  color: var(--text-muted);pointer-events: none;
}
html[dir="rtl"] .faq-search svg{left:auto;right:20px}
html[dir="rtl"] .faq-search input{padding:16px 54px 16px 22px}

/* FAQ Stats */
.faq-stats{
  display:flex;gap:30px;justify-content:center;flex-wrap:wrap;
  margin-top: 24px;
}
.faq-stat{text-align:center}
.faq-stat-num{
  font-family: var(--font-en);
  font-size: 28px;font-weight: 900;line-height: 1;
  background: linear-gradient(135deg, #7b5cff, #ff4ecd);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.faq-stat-label{
  font-size: 11.5px;color: var(--text-dim);
  margin-top: 4px;font-weight: 600;
  letter-spacing: .5px;
}

/* FAQ Layout */
.faq-layout{
  max-width: 1200px;margin: 0 auto;
  padding: 30px 24px 80px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;
}

/* Category sidebar */
.faq-sidebar{
  position: sticky;top: 100px;
  padding: 22px 18px;
  background: linear-gradient(180deg, rgba(15,18,55,.5), rgba(15,18,55,.25));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  backdrop-filter: blur(14px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.faq-sidebar-title{
  font-size: 11px;font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 1.5px;text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.faq-sidebar ul{list-style: none;display: grid;gap: 4px}
.faq-sidebar a{
  display: flex;align-items: center;justify-content: space-between;gap: 8px;
  padding: 10px 14px;
  font-size: 14px; color: var(--text-dim);
  border-radius: 10px;
  text-decoration: none;
  transition: all var(--t-fast);
  border-left: 3px solid transparent;
}
html[dir="rtl"] .faq-sidebar a{border-left:none;border-right:3px solid transparent}
.faq-sidebar a:hover{color: var(--text);background: rgba(0,212,255,.06);border-left-color: var(--primary)}
html[dir="rtl"] .faq-sidebar a:hover{border-right-color:var(--primary)}
.faq-sidebar a.active{
  color: var(--primary);background: rgba(0,212,255,.1);
  border-left-color: var(--primary);font-weight: 700;
}
html[dir="rtl"] .faq-sidebar a.active{border-right-color:var(--primary)}
.faq-sidebar-count{
  font-size: 11px;color: var(--text-muted);
  background: var(--surface);padding: 2px 8px;
  border-radius: 100px;font-weight: 700;
}
.faq-sidebar a:hover .faq-sidebar-count,
.faq-sidebar a.active .faq-sidebar-count{color: var(--primary);background: rgba(0,212,255,.1)}

/* Main content */
.faq-main{
  min-width: 0;
}

/* Category section */
.faq-cat-section{
  margin-bottom: 40px;
  scroll-margin-top: 90px;
}
.faq-cat-header{
  display:flex;align-items:center;gap:14px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.faq-cat-icon{
  width: 48px;height: 48px;flex-shrink: 0;
  display:grid;place-items:center;
  border-radius: 14px;
  font-size: 22px;
  background: var(--fc-bg, rgba(0,212,255,.12));
  border: 1px solid var(--fc-border, rgba(0,212,255,.3));
  color: var(--fc-color, var(--primary));
}
.faq-cat-info h2{
  font-size: 24px;font-weight: 800;
  color: var(--text);margin: 0 0 4px;
  letter-spacing: -.5px;
}
.faq-cat-info p{
  font-size: 13px;color: var(--text-dim);margin: 0;
}

/* Category colors */
.fc-general{--fc-bg:rgba(0,212,255,.12);--fc-border:rgba(0,212,255,.3);--fc-color:var(--primary)}
.fc-pricing{--fc-bg:rgba(255,215,0,.12);--fc-border:rgba(255,215,0,.3);--fc-color:#ffd700}
.fc-ai{--fc-bg:rgba(123,92,255,.12);--fc-border:rgba(123,92,255,.3);--fc-color:#b48bff}
.fc-web{--fc-bg:rgba(255,78,205,.12);--fc-border:rgba(255,78,205,.3);--fc-color:var(--accent)}
.fc-seo{--fc-bg:rgba(46,230,166,.12);--fc-border:rgba(46,230,166,.3);--fc-color:var(--success)}
.fc-security{--fc-bg:rgba(255,85,117,.12);--fc-border:rgba(255,85,117,.3);--fc-color:var(--red)}
.fc-support{--fc-bg:rgba(255,181,71,.12);--fc-border:rgba(255,181,71,.3);--fc-color:var(--warn)}
.fc-start{--fc-bg:rgba(96,232,255,.12);--fc-border:rgba(96,232,255,.3);--fc-color:#60e8ff}

/* FAQ Item (accordion) */
.faq-q{
  margin-bottom: 10px;
  background: linear-gradient(180deg, rgba(15,18,55,.4), rgba(15,18,55,.2));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all var(--t-base);
  scroll-margin-top: 100px;
}
.faq-q:hover{border-color: rgba(0,212,255,.25)}
.faq-q[open]{
  border-color: rgba(0,212,255,.35);
  background: linear-gradient(180deg, rgba(0,212,255,.05), rgba(15,18,55,.3));
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.faq-q summary{
  padding: 20px 24px;
  cursor: pointer;
  font-size: 15.5px;font-weight: 700;
  color: var(--text);
  line-height: 1.5;
  list-style: none;
  display: flex;align-items: flex-start;justify-content: space-between;gap: 16px;
  transition: color var(--t-fast);
}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary:hover{color: var(--primary)}
.faq-q-icon{
  flex-shrink: 0;
  width: 28px;height: 28px;
  display:grid;place-items:center;
  background: rgba(0,212,255,.1);
  border-radius: 50%;
  color: var(--primary);
  transition: all var(--t-base);
  margin-top: 2px;
}
.faq-q[open] .faq-q-icon{
  background: var(--grad-1);color: #fff;
  transform: rotate(45deg);
  box-shadow: 0 4px 12px rgba(0,212,255,.35);
}
.faq-q-body{
  padding: 0 24px 22px;
  color: var(--text-dim);line-height: 1.75;
  font-size: 14.5px;
}
.faq-q-body p{margin-bottom: 12px}
.faq-q-body p:last-child{margin-bottom: 0}
.faq-q-body strong{color: var(--text);font-weight: 700}
.faq-q-body a{color: var(--primary);text-decoration: underline;text-decoration-color: rgba(0,212,255,.35);text-underline-offset: 3px}
.faq-q-body ul,.faq-q-body ol{margin: 10px 0;padding-left: 22px}
html[dir="rtl"] .faq-q-body ul,html[dir="rtl"] .faq-q-body ol{padding-left:0;padding-right:22px}
.faq-q-body li{margin-bottom: 6px}
.faq-q-body code{
  background: rgba(255,255,255,.06);padding: 2px 8px;border-radius: 4px;
  font-family: ui-monospace,monospace;font-size: .88em;color: var(--primary);
}

/* Share / deep link button */
.faq-q-actions{
  margin-top: 14px;padding-top: 12px;
  border-top: 1px dashed var(--border);
  display: flex;gap: 8px;flex-wrap: wrap;
  font-size: 12px;
}
.faq-q-link{
  display: inline-flex;align-items: center;gap: 6px;
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 100px;
  text-decoration: none;font-weight: 600;
  transition: all var(--t-fast);
  cursor: pointer;font-size: 11.5px;
}
.faq-q-link:hover{color: var(--primary);border-color: var(--primary)}

/* Empty state */
.faq-empty{
  text-align: center;padding: 60px 20px;
  color: var(--text-dim);
}
.faq-empty-emoji{font-size: 64px;margin-bottom: 16px;opacity: .6}
.faq-empty h3{font-size: 20px;color: var(--text);margin-bottom: 8px}
.faq-empty p{font-size: 14px;line-height: 1.6}

/* Bottom CTA */
.faq-cta{
  margin: 60px auto 40px;max-width: 900px;
  padding: 40px;text-align: center;
  background: linear-gradient(135deg, rgba(0,212,255,.12), rgba(123,92,255,.08), rgba(255,78,205,.06));
  border: 1px solid var(--border-2);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(14px);
  position: relative;overflow: hidden;
}
.faq-cta::before{
  content:'';position:absolute;inset:-30px;
  background: var(--grad-1);opacity: .15;z-index:-1;filter: blur(40px);
  animation: hvGlowPulse 4s ease-in-out infinite;
}
.faq-cta h3{
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 800;margin-bottom: 8px;
}
.faq-cta h3 span{background: var(--grad-1);-webkit-background-clip:text;background-clip:text;color:transparent}
.faq-cta p{font-size: 15px;color: var(--text-dim);margin-bottom: 22px;line-height: 1.6}
.faq-cta-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* Highlight search matches */
.faq-highlight{
  background: rgba(255,215,0,.25);
  color: #ffd700;
  padding: 1px 3px;border-radius: 3px;
}

/* Responsive */
@media(max-width: 900px){
  .faq-layout{grid-template-columns: 1fr;gap: 24px}
  .faq-sidebar{position: relative;top: auto;max-height: none}
  .faq-sidebar ul{display:flex;flex-wrap:wrap;gap: 6px}
  .faq-sidebar a{border-left: none !important;border-right: none !important;padding: 8px 14px}
  .faq-sidebar a.active{background: var(--grad-1);color: #fff}
}
@media(max-width: 600px){
  .faq-hero{padding: 90px 16px 30px}
  .faq-q summary{padding: 16px 18px;font-size: 14.5px}
  .faq-q-body{padding: 0 18px 18px;font-size: 13.5px}
  .faq-stat-num{font-size: 22px}
  .faq-stats{gap: 16px}
}

/* Print */
@media print{
  .faq-sidebar,.faq-search,.faq-cta{display: none !important}
  .faq-layout{grid-template-columns: 1fr}
  .faq-q{break-inside: avoid;background: #fff !important;border: 1px solid #ccc !important}
  .faq-q[open] .faq-q-body{display: block}
  @page{margin: 2cm 1.5cm}
}

/* =========================================================
   PHASE 17 — PRODUCT DETAIL PAGES
   ========================================================= */

/* Product hero */
.prd-hero{
  padding: 140px 24px 80px;
  position: relative;
  overflow: hidden;
}
.prd-hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(at 20% 30%, var(--prd-bg-1, rgba(0,212,255,.15)) 0, transparent 50%),
    radial-gradient(at 80% 50%, var(--prd-bg-2, rgba(123,92,255,.12)) 0, transparent 50%);
  pointer-events:none;
}
.prd-hero-inner{
  max-width: 1280px;margin: 0 auto;
  display:grid;grid-template-columns: 1.05fr 1fr;gap: 60px;align-items: center;
  position: relative;z-index:1;
}

.prd-breadcrumb{
  display:flex;align-items:center;gap:8px;
  font-size: 12.5px;color: var(--text-muted);margin-bottom: 18px;
}
.prd-breadcrumb a{color: var(--primary);text-decoration:none}
.prd-breadcrumb span{color:var(--text-muted)}

.prd-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding: 6px 16px;
  background: var(--prd-badge-bg, rgba(0,212,255,.08));
  border: 1px solid var(--prd-badge-border, rgba(0,212,255,.28));
  border-radius: 100px;
  font-size: 12px;font-weight: 800;
  color: var(--prd-color, var(--primary));
  letter-spacing: 1.5px;text-transform: uppercase;
  margin-bottom: 18px;
}
.prd-badge::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background: currentColor;box-shadow: 0 0 8px currentColor;
  animation: pulseDot 2s infinite;
}

.prd-title{
  font-size: clamp(36px, 5.5vw, 60px);
  font-weight: 800;letter-spacing:-1.5px;
  line-height: 1.08;margin-bottom: 14px;
}
.prd-title span{
  background: var(--prd-grad, var(--grad-1));
  -webkit-background-clip: text;background-clip: text;color: transparent;
}
.prd-tagline{
  font-size: clamp(17px, 1.6vw, 22px);
  color: var(--text);font-weight:500;
  line-height: 1.5;margin-bottom: 28px;
}
.prd-tagline strong{font-weight:700}

.prd-cta-row{
  display:flex;gap: 12px;flex-wrap:wrap;
  margin-bottom: 30px;
}
.prd-cta-primary{
  display:inline-flex;align-items:center;gap:10px;
  padding: 14px 26px;
  background: var(--prd-grad, var(--grad-1));
  color: #fff;
  border-radius: 100px;text-decoration:none;
  font-weight: 700;font-size: 15px;
  box-shadow: 0 14px 36px var(--prd-shadow, rgba(0,212,255,.35));
  transition: all var(--t-base);
  position:relative;overflow:hidden;
}
.prd-cta-primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 46px var(--prd-shadow, rgba(0,212,255,.5));
}
.prd-cta-ghost{
  display:inline-flex;align-items:center;gap:10px;
  padding: 14px 24px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--text);
  border-radius: 100px;text-decoration:none;
  font-weight: 600;font-size: 14.5px;
  transition: all var(--t-base);
  backdrop-filter: blur(10px);
}
.prd-cta-ghost:hover{background: var(--surface-2);border-color: var(--prd-color, var(--primary));transform: translateY(-2px)}

/* Hero trust */
.prd-trust-mini{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;color: var(--text-dim);
}
.prd-trust-mini span{display:flex;align-items:center;gap:6px}
.prd-trust-mini strong{color: var(--text)}

/* Hero visual */
.prd-visual{position:relative}
.prd-mock{
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
  transform: rotateY(-4deg) rotateX(3deg);
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  animation: prdFloat 7s ease-in-out infinite;
}
@keyframes prdFloat{
  0%,100%{transform: rotateY(-4deg) rotateX(3deg) translateY(0)}
  50%{transform: rotateY(-2deg) rotateX(1deg) translateY(-10px)}
}
.prd-mock:hover{transform: rotateY(0) rotateX(0);animation-play-state:paused}
.prd-mock-glow{
  position: absolute;inset: -40px;
  background: var(--prd-grad, var(--grad-1));
  opacity: .4;z-index:-1;filter: blur(60px);
  animation: hvGlowPulse 4s ease-in-out infinite;
}
.prd-mock svg{display:block;width:100%;height:auto;border-radius: var(--r-2xl)}

/* Stats bar (product-specific) */
.prd-stats{
  max-width: 1200px;margin: 0 auto;
  padding: 0 24px 80px;
}
.prd-stats-inner{
  display: grid;grid-template-columns: repeat(4, 1fr);gap: 16px;
}
.prd-stat{
  padding: 28px 22px;text-align: center;
  background: linear-gradient(180deg, rgba(15,18,55,.55), rgba(15,18,55,.25));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  backdrop-filter: blur(14px);
  transition: all var(--t-base);
}
.prd-stat:hover{transform: translateY(-4px);border-color: var(--prd-color, var(--primary))}
.prd-stat-num{
  font-family: var(--font-en);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 900;line-height: 1;
  background: var(--prd-grad, var(--grad-1));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom: 6px;letter-spacing: -1px;
}
.prd-stat-label{font-size: 13px;color: var(--text);font-weight:600;margin-bottom:3px}
.prd-stat-sub{font-size: 11.5px;color: var(--text-dim)}

/* Section (generic) */
.prd-sec{padding: 80px 24px;position: relative}
.prd-sec-inner{max-width: 1200px;margin: 0 auto}
.prd-sec-head{text-align: center;margin-bottom: 50px;max-width: 720px;margin-left:auto;margin-right:auto}
.prd-sec-eyebrow{
  display:inline-block;padding: 4px 14px;
  background: var(--prd-badge-bg, rgba(0,212,255,.08));
  color: var(--prd-color, var(--primary));
  border: 1px solid var(--prd-badge-border, rgba(0,212,255,.22));
  border-radius: 100px;
  font-size: 11.5px;font-weight: 800;
  letter-spacing: 1.5px;text-transform: uppercase;
  margin-bottom: 14px;
}
.prd-sec-title{
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;letter-spacing:-1px;
  margin-bottom: 12px;line-height: 1.15;
}
.prd-sec-title span{background: var(--prd-grad, var(--grad-1));-webkit-background-clip:text;background-clip:text;color:transparent}
.prd-sec-desc{font-size: 15px;color: var(--text-dim);line-height: 1.7}

/* Feature Cards Grid */
.prd-features-grid{
  display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;
}
.prd-feature{
  padding: 28px 26px;
  background: linear-gradient(180deg, rgba(15,18,55,.55), rgba(15,18,55,.25));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  backdrop-filter: blur(14px);
  transition: all var(--t-base);
}
.prd-feature:hover{
  transform: translateY(-6px);
  border-color: var(--prd-color, var(--primary));
  box-shadow: 0 20px 40px rgba(0,0,0,.3);
}
.prd-feature-icon{
  display: inline-grid;place-items: center;
  width: 52px;height: 52px;
  background: var(--prd-badge-bg, rgba(0,212,255,.1));
  border: 1px solid var(--prd-badge-border, rgba(0,212,255,.25));
  color: var(--prd-color, var(--primary));
  border-radius: 14px;
  margin-bottom: 18px;
  transition: transform var(--t-base);
}
.prd-feature:hover .prd-feature-icon{transform: rotate(-8deg) scale(1.1)}
.prd-feature h3{font-size: 17px;font-weight: 700;color: var(--text);margin-bottom: 8px;letter-spacing:-.2px}
.prd-feature p{font-size: 14px;color: var(--text-dim);line-height: 1.65}

/* Use cases */
.prd-usecase-grid{display:grid;grid-template-columns: repeat(2, 1fr);gap: 20px}
.prd-usecase{
  padding: 28px;
  background: linear-gradient(135deg, var(--prd-badge-bg, rgba(0,212,255,.06)), rgba(15,18,55,.3));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  position: relative;overflow: hidden;
}
.prd-usecase::before{
  content:''; position:absolute; top:-40px;right:-40px;
  width: 120px;height: 120px;
  background: radial-gradient(circle, var(--prd-color, var(--primary)) 0, transparent 70%);
  opacity: .15;
}
.prd-usecase h4{
  font-size: 18px;font-weight: 700;color: var(--text);
  margin-bottom: 10px;display:flex;align-items:center;gap:10px;
}
.prd-usecase h4::before{
  content: attr(data-num);
  display: inline-grid;place-items: center;
  width: 32px;height: 32px;
  background: var(--prd-grad, var(--grad-1));color: #fff;
  border-radius: 10px;font-size: 13px;font-weight: 900;
}
.prd-usecase p{font-size: 14px;color: var(--text-dim);line-height: 1.7;margin-bottom: 10px}
.prd-usecase-result{
  margin-top: 14px;padding: 10px 14px;
  background: rgba(46,230,166,.08);
  border: 1px solid rgba(46,230,166,.22);
  border-radius: var(--r-md);
  font-size: 13px;color: var(--success);font-weight: 600;
}
.prd-usecase-result::before{content:'📈 ';font-size: 14px}

/* Integration logos */
.prd-integrations{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.prd-int-logo{
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 13px;font-weight: 700;color: var(--text);
  transition: all var(--t-fast);
  display:inline-flex;align-items:center;gap:8px;
}
.prd-int-logo:hover{border-color: var(--prd-color, var(--primary));transform: translateY(-2px)}
.prd-int-logo .int-icon{font-size: 16px}

/* Final CTA */
.prd-final-cta{
  max-width: 1000px;margin: 60px auto 40px;
  padding: 48px 44px;text-align: center;
  background: linear-gradient(135deg, var(--prd-badge-bg, rgba(0,212,255,.12)), rgba(15,18,55,.4));
  border: 1px solid var(--prd-badge-border, rgba(0,212,255,.3));
  border-radius: var(--r-2xl);position: relative;overflow: hidden;
}
.prd-final-cta::before{
  content:''; position:absolute;inset:-40px;
  background: var(--prd-grad, var(--grad-1));
  opacity: .2;z-index:-1;filter: blur(50px);
  animation: hvGlowPulse 4s ease-in-out infinite;
}
.prd-final-cta h3{font-size: clamp(26px, 3.5vw, 36px);font-weight: 800;margin-bottom: 12px;letter-spacing:-.5px}
.prd-final-cta h3 span{background: var(--prd-grad, var(--grad-1));-webkit-background-clip:text;background-clip:text;color:transparent}
.prd-final-cta p{font-size: 16px;color: var(--text-dim);max-width: 600px;margin: 0 auto 24px;line-height: 1.6}

/* Responsive */
@media(max-width: 1050px){
  .prd-hero-inner{grid-template-columns: 1fr;gap: 40px}
  .prd-visual{max-width: 560px;margin: 0 auto;width:100%}
  .prd-features-grid{grid-template-columns: 1fr 1fr}
  .prd-usecase-grid{grid-template-columns: 1fr}
}
@media(max-width: 700px){
  .prd-hero{padding: 100px 18px 50px}
  .prd-sec{padding: 60px 18px}
  .prd-stats-inner{grid-template-columns: 1fr 1fr;gap: 10px}
  .prd-features-grid{grid-template-columns: 1fr}
  .prd-cta-row{flex-direction: column}
  .prd-cta-primary,.prd-cta-ghost{width:100%;justify-content: center}
}

/* Color themes per product */
.prd-theme-erp{
  --prd-grad: linear-gradient(135deg, #00d4ff, #7b5cff);
  --prd-color: #00d4ff;
  --prd-shadow: rgba(0,212,255,.35);
  --prd-badge-bg: rgba(0,212,255,.08);
  --prd-badge-border: rgba(0,212,255,.28);
  --prd-bg-1: rgba(0,212,255,.15);
  --prd-bg-2: rgba(123,92,255,.12);
}
.prd-theme-ai{
  --prd-grad: linear-gradient(135deg, #7b5cff, #ff4ecd);
  --prd-color: #b48bff;
  --prd-shadow: rgba(123,92,255,.4);
  --prd-badge-bg: rgba(123,92,255,.1);
  --prd-badge-border: rgba(123,92,255,.3);
  --prd-bg-1: rgba(123,92,255,.15);
  --prd-bg-2: rgba(255,78,205,.12);
}
.prd-theme-web{
  --prd-grad: linear-gradient(135deg, #2ee6a6, #00d4ff);
  --prd-color: #2ee6a6;
  --prd-shadow: rgba(46,230,166,.35);
  --prd-badge-bg: rgba(46,230,166,.1);
  --prd-badge-border: rgba(46,230,166,.3);
  --prd-bg-1: rgba(46,230,166,.12);
  --prd-bg-2: rgba(0,212,255,.1);
}
.prd-theme-analytics{
  --prd-grad: linear-gradient(135deg, #ffb547, #ff4ecd);
  --prd-color: #ffb547;
  --prd-shadow: rgba(255,181,71,.35);
  --prd-badge-bg: rgba(255,181,71,.1);
  --prd-badge-border: rgba(255,181,71,.3);
  --prd-bg-1: rgba(255,181,71,.12);
  --prd-bg-2: rgba(255,78,205,.1);
}
.prd-theme-commerce{
  --prd-grad: linear-gradient(135deg, #ff4ecd, #ffb547);
  --prd-color: #ff4ecd;
  --prd-shadow: rgba(255,78,205,.35);
  --prd-badge-bg: rgba(255,78,205,.1);
  --prd-badge-border: rgba(255,78,205,.3);
  --prd-bg-1: rgba(255,78,205,.15);
  --prd-bg-2: rgba(255,181,71,.1);
}
.prd-theme-auto{
  --prd-grad: linear-gradient(135deg, #b48bff, #00d4ff);
  --prd-color: #b48bff;
  --prd-shadow: rgba(180,139,255,.35);
  --prd-badge-bg: rgba(180,139,255,.1);
  --prd-badge-border: rgba(180,139,255,.3);
  --prd-bg-1: rgba(180,139,255,.15);
  --prd-bg-2: rgba(0,212,255,.1);
}

/* Product nav - small pills at bottom of each product page */
.prd-nav-other{
  padding: 60px 24px;
  border-top: 1px solid var(--border);
}
.prd-nav-other-inner{max-width: 1200px;margin: 0 auto}
.prd-nav-other h3{
  font-size: 20px;font-weight: 800;
  text-align: center;margin-bottom: 24px;
}
.prd-nav-grid{
  display: grid;grid-template-columns: repeat(5, 1fr);gap: 12px;
}
.prd-nav-card{
  padding: 18px 16px;text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: all var(--t-fast);
}
.prd-nav-card:hover{transform: translateY(-4px);border-color: var(--n-color, var(--primary))}
.prd-nav-card-icon{font-size: 32px;margin-bottom: 8px}
.prd-nav-card h4{font-size: 13px;font-weight: 700;color: var(--text);margin-bottom: 4px}
.prd-nav-card p{font-size: 11.5px;color: var(--text-dim)}
@media(max-width:900px){.prd-nav-grid{grid-template-columns: repeat(2, 1fr)}}

/* =========================================================
   PHASE 18 — PRICING CALCULATOR
   ========================================================= */

/* Calculator Hero */
.calc-hero{
  padding: 130px 24px 40px;
  text-align: center;
  position: relative;
}
.calc-hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(at 25% 25%, rgba(255,215,0,.1) 0, transparent 50%),
    radial-gradient(at 75% 50%, rgba(0,212,255,.1) 0, transparent 50%);
  pointer-events:none;
}
.calc-hero-inner{max-width:900px;margin:0 auto;position:relative}
.calc-hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding: 6px 18px;
  background: linear-gradient(135deg, rgba(255,215,0,.1), rgba(255,78,205,.08));
  border: 1px solid rgba(255,215,0,.35);
  border-radius: 100px;
  font-size: 12px; font-weight: 800;
  color: #ffd700;
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 18px;
}
.calc-hero-badge::before{content:'';width:8px;height:8px;border-radius:50%;background:#ffd700;box-shadow:0 0 10px #ffd700;animation:pulseDot 2s infinite}
.calc-hero-title{
  font-size: clamp(36px, 5.5vw, 56px);
  font-weight: 800;letter-spacing:-1.5px;
  line-height: 1.1; margin-bottom: 14px;
}
.calc-hero-title span{
  background: linear-gradient(135deg, #ffd700, #ff4ecd);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.calc-hero-sub{
  font-size: 17px; color: var(--text-dim);
  max-width: 640px; margin: 0 auto;
  line-height: 1.7;
}

/* Layout */
.calc-layout{
  max-width: 1280px;margin: 30px auto;
  padding: 0 24px 80px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;align-items: start;
}

/* Inputs panel */
.calc-inputs{
  padding: 28px 30px;
  background: linear-gradient(180deg, rgba(15,18,55,.55), rgba(15,18,55,.3));
  border: 1px solid var(--border-2);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(14px);
}
.calc-inputs-section{
  padding-bottom: 26px;margin-bottom: 26px;
  border-bottom: 1px solid var(--border);
}
.calc-inputs-section:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}
.calc-input-title{
  display:flex;align-items:center;gap:10px;
  font-size: 13px;font-weight: 800;
  color: var(--text);
  letter-spacing: 1px;text-transform: uppercase;
  margin-bottom: 14px;
}
.calc-input-title .num{
  display:inline-grid;place-items:center;
  width: 24px;height: 24px;
  background: var(--grad-1);color:#fff;
  border-radius: 50%;font-size: 11px;
  font-family: var(--font-en);
}
.calc-input-sub{font-size: 13px;color: var(--text-dim);margin-bottom: 14px;line-height: 1.5}

/* Product picker (checkboxes) */
.calc-products{display:grid;gap:10px;grid-template-columns: 1fr 1fr}
.calc-product{
  display:flex;align-items:flex-start;gap:12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast);
}
.calc-product:hover{border-color: var(--primary)}
.calc-product input[type="checkbox"]{display:none}
.calc-product-icon{
  width: 36px;height:36px;
  display:grid;place-items:center;
  background: var(--surface-2);
  border-radius: 10px;
  font-size: 18px;flex-shrink: 0;
  transition: all var(--t-base);
}
.calc-product-info{flex:1}
.calc-product-info h4{font-size: 14px;font-weight: 700;color: var(--text);margin-bottom: 3px}
.calc-product-info p{font-size: 11.5px;color: var(--text-dim);line-height: 1.4}
.calc-product-check{
  width: 22px;height:22px;
  border: 2px solid var(--border-2);
  border-radius: 6px;
  display:grid;place-items:center;
  flex-shrink:0;
  transition: all var(--t-fast);
}
.calc-product.selected{
  background: rgba(0,212,255,.08);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,212,255,.1);
}
.calc-product.selected .calc-product-icon{background: var(--grad-1);color: #fff}
.calc-product.selected .calc-product-check{
  background: var(--grad-1);
  border-color: transparent;
}
.calc-product.selected .calc-product-check::after{
  content: '✓';color: #fff;font-weight: 800;font-size: 13px;
}

/* Tier selector */
.calc-tiers{
  display:grid;grid-template-columns: repeat(3,1fr);gap: 8px;
  margin-top: 14px;
}
.calc-tier{
  padding: 12px 10px;text-align:center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast);
}
.calc-tier:hover{border-color: var(--primary)}
.calc-tier input{display:none}
.calc-tier-name{font-size: 12px;font-weight: 800;color: var(--text);margin-bottom: 3px}
.calc-tier-price{font-size: 13px;color: var(--primary);font-weight: 700;font-family: var(--font-en)}
.calc-tier.active{
  background: var(--grad-1);color: #fff;border-color: transparent;
  box-shadow: 0 6px 20px rgba(0,212,255,.3);
}
.calc-tier.active .calc-tier-name,
.calc-tier.active .calc-tier-price{color: #fff}

/* Slider */
.calc-slider-row{
  display: flex;align-items: center;justify-content: space-between;
  margin-bottom: 8px;
}
.calc-slider-label{font-size: 13px;color: var(--text-dim);font-weight: 600}
.calc-slider-value{
  font-family: var(--font-en);
  font-size: 16px;font-weight: 800;
  color: var(--primary);
  padding: 4px 12px;
  background: rgba(0,212,255,.08);
  border: 1px solid rgba(0,212,255,.2);
  border-radius: 100px;
}
.calc-slider{
  -webkit-appearance: none;appearance: none;
  width: 100%;height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  margin-bottom: 6px;
}
.calc-slider::-webkit-slider-thumb{
  -webkit-appearance: none;appearance: none;
  width: 22px;height: 22px;
  background: var(--grad-1);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,212,255,.4);
  transition: transform var(--t-fast);
}
.calc-slider::-webkit-slider-thumb:hover{transform: scale(1.15)}
.calc-slider::-moz-range-thumb{
  width: 22px;height: 22px;
  background: var(--grad-1);
  border-radius: 50%;
  cursor: pointer;border: none;
}
.calc-slider-ticks{
  display: flex;justify-content: space-between;
  font-size: 11px;color: var(--text-muted);
  padding: 0 8px;
}

/* Chips (multi-select) */
.calc-chips{display:flex;flex-wrap:wrap;gap:8px}
.calc-chip{
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 12.5px;font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  transition: all var(--t-fast);
  user-select: none;
}
.calc-chip:hover{color: var(--text);border-color: var(--primary)}
.calc-chip.active{
  background: rgba(0,212,255,.12);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,212,255,.08);
}
.calc-chip input{display:none}

/* Radio group */
.calc-radios{display:grid;gap:8px}
.calc-radio{
  display:flex;align-items:center;gap:12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast);
}
.calc-radio:hover{border-color: var(--primary)}
.calc-radio input{display:none}
.calc-radio-dot{
  width: 18px;height: 18px;
  border: 2px solid var(--border-2);
  border-radius: 50%;
  flex-shrink: 0;position: relative;
  transition: all var(--t-fast);
}
.calc-radio-label{flex: 1}
.calc-radio-label strong{display:block;font-size: 14px;font-weight: 700;color: var(--text);margin-bottom: 2px}
.calc-radio-label span{font-size: 12px;color: var(--text-dim)}
.calc-radio-badge{
  font-size: 11px;font-weight: 800;
  padding: 3px 10px;
  background: var(--grad-2);
  color: #000;
  border-radius: 100px;letter-spacing: .3px;
}
.calc-radio.selected{
  background: rgba(0,212,255,.05);
  border-color: var(--primary);
}
.calc-radio.selected .calc-radio-dot{
  border-color: var(--primary);
}
.calc-radio.selected .calc-radio-dot::after{
  content:'';position:absolute;inset: 3px;
  background: var(--grad-1);
  border-radius: 50%;
}

/* Switches (add-ons) */
.calc-switches{display:grid;gap: 10px}
.calc-switch{
  display: flex;align-items: center;justify-content: space-between;gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast);
}
.calc-switch:hover{border-color: var(--primary)}
.calc-switch input{display:none}
.calc-switch-info{flex: 1;min-width:0}
.calc-switch-info strong{display:block;font-size: 14px;font-weight: 700;color: var(--text);margin-bottom: 2px}
.calc-switch-info span{font-size: 12px;color: var(--text-dim)}
.calc-switch-cost{
  font-family: var(--font-en);
  font-size: 13px;color: var(--primary);
  font-weight: 700;white-space:nowrap;
}
.calc-switch-toggle{
  width: 46px;height: 26px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 100px;
  position: relative;flex-shrink: 0;
  transition: all var(--t-fast);
}
.calc-switch-toggle::after{
  content:'';position:absolute;
  top: 2px;left: 2px;
  width: 20px;height:20px;
  background: #fff;border-radius: 50%;
  transition: all var(--t-base);
}
.calc-switch.active{background: rgba(0,212,255,.06);border-color: var(--primary)}
.calc-switch.active .calc-switch-toggle{background: var(--grad-1);border-color: transparent}
.calc-switch.active .calc-switch-toggle::after{left: 22px;background: #fff}

/* ===== Output panel ===== */
.calc-output{
  position: sticky;top: 100px;
  padding: 32px;
  background: linear-gradient(135deg, rgba(0,212,255,.1), rgba(123,92,255,.08), rgba(15,18,55,.5));
  border: 1px solid rgba(0,212,255,.25);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(14px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.calc-output::-webkit-scrollbar{width: 6px}
.calc-output::-webkit-scrollbar-thumb{background: var(--border-2);border-radius: 3px}

.calc-output-label{
  font-size: 11px;font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 1.5px;text-transform: uppercase;
  margin-bottom: 10px;
}
.calc-output-price{
  font-family: var(--font-en);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 900;line-height: 1;
  background: var(--grad-1);
  -webkit-background-clip: text;background-clip: text;color: transparent;
  letter-spacing: -2px;
  margin-bottom: 6px;
  transition: transform .3s;
}
.calc-output-price.updating{transform: scale(1.05)}
.calc-output-period{
  font-size: 13px;color: var(--text-dim);margin-bottom: 20px;
}
.calc-output-savings{
  display: inline-flex;align-items:center;gap: 6px;
  padding: 6px 12px;
  background: rgba(46,230,166,.1);
  border: 1px solid rgba(46,230,166,.3);
  border-radius: 100px;
  font-size: 12px;font-weight: 700;
  color: var(--success);
  margin-bottom: 20px;
}
.calc-output-savings::before{content:'🎉';font-size: 14px}

/* Breakdown list */
.calc-breakdown{
  padding: 18px 20px;
  background: rgba(0,0,0,.2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin: 16px 0;
}
.calc-breakdown-title{
  font-size: 11px;font-weight: 800;color: var(--text-dim);
  letter-spacing: 1px;text-transform: uppercase;
  margin-bottom: 12px;padding-bottom: 10px;border-bottom: 1px solid var(--border);
}
.calc-breakdown-item{
  display:flex;justify-content:space-between;align-items:center;
  padding: 8px 0;
  font-size: 13px;color: var(--text);
}
.calc-breakdown-item:not(:last-child){border-bottom: 1px dashed var(--border)}
.calc-breakdown-label{flex: 1;min-width: 0;color: var(--text-dim)}
.calc-breakdown-value{
  font-family: var(--font-en);font-weight: 700;
  color: var(--text);white-space: nowrap;
}
.calc-breakdown-value.neg{color: var(--success)}
.calc-breakdown-total{
  display:flex;justify-content:space-between;align-items:center;
  margin-top: 14px;padding-top: 14px;
  border-top: 2px solid var(--border-2);
  font-size: 14px;font-weight: 800;
}
.calc-breakdown-total .calc-breakdown-value{
  color: var(--primary);font-size: 18px;
}

/* ROI box */
.calc-roi{
  padding: 20px;
  background: linear-gradient(135deg, rgba(46,230,166,.08), rgba(0,212,255,.05));
  border: 1px solid rgba(46,230,166,.25);
  border-radius: var(--r-md);
  margin: 16px 0;
}
.calc-roi-title{
  display: flex;align-items: center;gap: 8px;
  font-size: 12px;font-weight: 800;color: var(--success);
  letter-spacing: 1px;text-transform: uppercase;
  margin-bottom: 8px;
}
.calc-roi-title::before{content:'📊'}
.calc-roi-value{
  font-family: var(--font-en);
  font-size: 24px;font-weight: 900;color: var(--success);
  margin-bottom: 4px;
}
.calc-roi-desc{font-size: 12.5px;color: var(--text-dim);line-height: 1.5}

/* Included features */
.calc-features{margin: 16px 0}
.calc-features-title{
  font-size: 11px;font-weight: 800;color: var(--text-dim);
  letter-spacing: 1px;text-transform: uppercase;
  margin-bottom: 10px;
}
.calc-features-list{
  display:grid;gap: 6px;max-height: 200px;overflow-y: auto;
  padding-right: 4px;
}
.calc-features-list::-webkit-scrollbar{width: 4px}
.calc-features-list li{
  display:flex;align-items:flex-start;gap: 8px;
  font-size: 12.5px;color: var(--text);
  padding: 4px 0;list-style: none;
}
.calc-features-list li::before{
  content:'✓';color: var(--success);font-weight: 800;
  flex-shrink: 0;
}

/* Action buttons */
.calc-actions{
  display: grid;gap: 10px;
  margin-top: 20px;
}
.calc-btn{
  display: flex;align-items: center;justify-content: center;gap: 10px;
  padding: 14px 20px;
  border-radius: 100px;
  font-size: 14px;font-weight: 700;
  text-decoration: none;
  transition: all var(--t-base);
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
}
.calc-btn-primary{
  background: var(--grad-1);color: #fff;
  box-shadow: 0 14px 36px rgba(0,212,255,.35);
}
.calc-btn-primary:hover{transform: translateY(-2px);box-shadow: 0 18px 46px rgba(0,212,255,.5)}
.calc-btn-ghost{
  background: var(--surface);border-color: var(--border-2);
  color: var(--text);backdrop-filter: blur(10px);
}
.calc-btn-ghost:hover{background: var(--surface-2);border-color: var(--primary)}
.calc-actions-row{display: grid;grid-template-columns: 1fr 1fr;gap: 8px}
.calc-btn-small{
  padding: 10px 14px;font-size: 12.5px;
}

/* Recommendation badge */
.calc-recommend{
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255,215,0,.08), rgba(255,78,205,.05));
  border: 1px solid rgba(255,215,0,.3);
  border-radius: var(--r-md);
  margin: 14px 0;
  font-size: 13px;color: var(--text);
}
.calc-recommend strong{color: #ffd700}

/* Industry templates */
.calc-templates{
  display:flex;flex-wrap:wrap;gap: 6px;margin: 12px 0;
}
.calc-template{
  padding: 6px 12px;
  background: var(--surface);border: 1px solid var(--border);
  border-radius: 100px;font-size: 11.5px;color: var(--text-dim);
  cursor: pointer;transition: all var(--t-fast);font-weight: 600;
}
.calc-template:hover{color: var(--text);border-color: var(--primary)}
.calc-template.active{background: var(--grad-1);color:#fff;border-color: transparent}

/* Dim product config when not selected */
.calc-product-config{
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(0,0,0,.2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: none;
}
.calc-product-config.visible{display: block}

/* Modal for email quote */
.calc-modal{
  position: fixed;inset: 0;z-index: 200;
  background: rgba(6,8,26,.8);
  backdrop-filter: blur(10px);
  display: grid;place-items: center;
  padding: 20px;
  opacity: 0;visibility: hidden;
  transition: all var(--t-base);
}
.calc-modal.active{opacity: 1;visibility: visible}
.calc-modal-inner{
  max-width: 500px;width: 100%;
  padding: 32px;
  background: linear-gradient(180deg, rgba(15,18,55,.95), rgba(10,14,39,.95));
  border: 1px solid var(--border-2);
  border-radius: var(--r-2xl);
  transform: translateY(20px);transition: transform var(--t-base);
}
.calc-modal.active .calc-modal-inner{transform: translateY(0)}
.calc-modal h3{font-size: 20px;font-weight: 800;color: var(--text);margin-bottom: 10px}
.calc-modal p{font-size: 14px;color: var(--text-dim);line-height: 1.6;margin-bottom: 18px}
.calc-modal-field{margin-bottom: 14px}
.calc-modal-field label{display:block;font-size: 13px;font-weight: 600;color: var(--text);margin-bottom: 6px}
.calc-modal-field input{
  width: 100%;padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  color: var(--text);font-size: 14px;font-family: inherit;
  outline: none;
}
.calc-modal-field input:focus{border-color: var(--primary)}
.calc-modal-close{
  position: absolute;top: 16px;right: 16px;
  width: 32px;height: 32px;
  display:grid;place-items:center;
  background: var(--surface);border: 1px solid var(--border);
  border-radius: 50%;cursor: pointer;color: var(--text-dim);
  font-size: 20px;
}
.calc-modal-close:hover{color: var(--text);background: var(--surface-2)}

/* Responsive */
@media(max-width: 1000px){
  .calc-layout{grid-template-columns: 1fr;gap: 20px}
  .calc-output{position: relative;top: auto;max-height: none}
  .calc-products{grid-template-columns: 1fr}
}
@media(max-width: 600px){
  .calc-hero{padding: 90px 18px 30px}
  .calc-inputs,.calc-output{padding: 24px 20px}
  .calc-output-price{font-size: 44px}
  .calc-tiers{grid-template-columns: 1fr}
  .calc-actions-row{grid-template-columns: 1fr}
}

/* Print for PDF export */
@media print{
  .calc-inputs,.calc-actions{display: none}
  .calc-layout{grid-template-columns: 1fr}
  .calc-output{position: relative;max-height: none;break-inside: avoid}
  body{background: #fff;color: #000}
  .calc-output-price{-webkit-text-fill-color: #0066cc !important;color: #0066cc !important;background: none}
  @page{margin: 2cm 1.5cm}
}

/* =========================================================
   PHASE 19 — BOOK-A-MEETING SCHEDULER
   ========================================================= */

/* Hero */
.book-hero{
  padding: 130px 24px 30px;
  text-align: center;
  position: relative;
}
.book-hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(at 30% 25%, rgba(46,230,166,.12) 0, transparent 50%),
    radial-gradient(at 70% 50%, rgba(0,212,255,.1) 0, transparent 50%);
  pointer-events:none;
}
.book-hero-inner{max-width:900px;margin:0 auto;position:relative}
.book-hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding: 6px 18px;
  background: linear-gradient(135deg, rgba(46,230,166,.1), rgba(0,212,255,.08));
  border: 1px solid rgba(46,230,166,.35);
  border-radius: 100px;
  font-size: 12px; font-weight: 800;
  color: var(--success);
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 18px;
}
.book-hero-badge::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 10px var(--success);animation:pulseDot 2s infinite}
.book-hero-title{
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;letter-spacing:-1.5px;
  line-height: 1.1; margin-bottom: 14px;
}
.book-hero-title span{
  background: linear-gradient(135deg, #2ee6a6, #00d4ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.book-hero-sub{
  font-size: 17px; color: var(--text-dim);
  max-width: 620px; margin: 0 auto;
  line-height: 1.7;
}

/* Progress Steps */
.book-steps{
  max-width: 720px;margin: 36px auto 0;
  padding: 0 24px;
  display: grid;grid-template-columns: repeat(4, 1fr);
  gap: 8px;position: relative;
}
.book-step{
  display:flex;flex-direction:column;align-items:center;
  position:relative;z-index: 1;
}
.book-step-dot{
  width: 44px;height: 44px;
  display: grid;place-items: center;
  background: var(--bg-2);
  border: 2px solid var(--border-2);
  border-radius: 50%;
  font-family: var(--font-en);font-size: 15px;font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 10px;
  transition: all var(--t-base);
}
.book-step.active .book-step-dot{
  background: var(--grad-2);
  border-color: transparent;color: #000;
  box-shadow: 0 0 0 4px rgba(46,230,166,.15);
}
.book-step.done .book-step-dot{
  background: var(--grad-2);
  border-color: transparent;color: #000;
}
.book-step.done .book-step-dot::after{content: '✓'}
.book-step.done .book-step-dot span{display:none}
.book-step-label{
  font-size: 12px;font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}
.book-step.active .book-step-label{color: var(--text)}
.book-step.done .book-step-label{color: var(--success)}

/* Progress bar */
.book-steps::before{
  content:'';position:absolute;top: 22px;
  left: 12%;right: 12%;height: 2px;
  background: var(--border);z-index: 0;
}
.book-steps-progress{
  position:absolute;top: 22px;
  left: 12%;height: 2px;
  background: var(--grad-2);z-index: 0;
  width: 0%;
  transition: width var(--t-base);
  box-shadow: 0 0 8px var(--success);
}

/* Panel container */
.book-panel{
  max-width: 1000px;margin: 30px auto 80px;padding: 0 24px;
}
.book-card{
  padding: 40px 44px;
  background: linear-gradient(180deg, rgba(15,18,55,.55), rgba(15,18,55,.25));
  border: 1px solid var(--border-2);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(14px);
  min-height: 500px;
  display: none;
}
.book-card.active{display: block;animation: fadeUp .5s ease-out}
.book-card-head{text-align: center;margin-bottom: 30px}
.book-card-title{
  font-size: 24px;font-weight: 800;
  color: var(--text);margin-bottom: 8px;
  letter-spacing: -.5px;
}
.book-card-sub{font-size: 14px;color: var(--text-dim);line-height: 1.6}

/* Step 1: Meeting types */
.book-types{
  display: grid;grid-template-columns: repeat(3, 1fr);gap: 14px;
  margin-top: 20px;
}
.book-type{
  padding: 26px 24px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-xl);
  cursor: pointer;
  transition: all var(--t-base);
  text-align: center;
  position:relative;overflow: hidden;
}
.book-type::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:4px;
  background: var(--bt-grad, var(--grad-2));
  transform: translateY(-4px);transition: transform var(--t-base);
}
.book-type:hover{transform: translateY(-4px);border-color: var(--bt-color, var(--success))}
.book-type:hover::before{transform: translateY(0)}
.book-type.selected{
  border-color: var(--bt-color, var(--success));
  background: rgba(46,230,166,.05);
  box-shadow: 0 0 0 3px rgba(46,230,166,.12);
}
.book-type.selected::before{transform: translateY(0)}
.book-type-icon{font-size: 42px;margin-bottom: 12px;line-height: 1}
.book-type-duration{
  display:inline-block;
  padding: 4px 12px;
  background: var(--bt-bg, rgba(46,230,166,.1));
  color: var(--bt-color, var(--success));
  border: 1px solid var(--bt-border, rgba(46,230,166,.3));
  border-radius: 100px;
  font-size: 11px;font-weight: 800;
  letter-spacing: 1px;text-transform: uppercase;
  margin-bottom: 10px;
}
.book-type-title{font-size: 17px;font-weight: 700;color: var(--text);margin-bottom: 6px}
.book-type-desc{font-size: 13px;color: var(--text-dim);line-height: 1.5;margin-bottom: 14px}
.book-type-features{
  display: flex;flex-direction: column;gap: 5px;
  font-size: 12px;color: var(--text-dim);
  text-align: left;
  padding-top: 12px;border-top: 1px solid var(--border);
}
.book-type-features li{list-style: none;position: relative;padding-left: 18px}
.book-type-features li::before{
  content:'✓';position:absolute;left: 0;
  color: var(--bt-color, var(--success));font-weight: 800;
}

.bt-quick{--bt-grad:linear-gradient(135deg,#2ee6a6,#00d4ff);--bt-color:var(--success);--bt-bg:rgba(46,230,166,.1);--bt-border:rgba(46,230,166,.3)}
.bt-demo{--bt-grad:linear-gradient(135deg,#00d4ff,#7b5cff);--bt-color:var(--primary);--bt-bg:rgba(0,212,255,.1);--bt-border:rgba(0,212,255,.3)}
.bt-deep{--bt-grad:linear-gradient(135deg,#7b5cff,#ff4ecd);--bt-color:#b48bff;--bt-bg:rgba(123,92,255,.1);--bt-border:rgba(123,92,255,.3)}

/* Step 2: Calendar + Slots */
.book-cal-layout{
  display: grid;grid-template-columns: 1.1fr 1fr;gap: 32px;
  margin-top: 20px;
}

/* Calendar */
.book-cal{
  padding: 20px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.book-cal-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom: 16px;
}
.book-cal-title{font-size: 16px;font-weight: 800;color: var(--text)}
.book-cal-nav{display:flex;gap: 6px}
.book-cal-btn{
  width: 32px;height: 32px;
  display: grid;place-items: center;
  background: var(--surface);border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text);cursor: pointer;
  transition: all var(--t-fast);
}
.book-cal-btn:hover{background: var(--primary);border-color: transparent;color: #fff}
.book-cal-btn:disabled{opacity: .3;cursor: not-allowed}

.book-cal-grid{
  display: grid;grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.book-cal-day-name{
  text-align: center;
  font-size: 11px;font-weight: 700;
  color: var(--text-dim);
  padding: 6px 0;letter-spacing: .5px;
}
.book-cal-day{
  aspect-ratio: 1;
  display: grid;place-items: center;
  font-size: 14px;font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--t-fast);
  position: relative;
}
.book-cal-day.other-month{color: var(--text-muted);opacity: .4}
.book-cal-day.disabled{opacity: .25;cursor: not-allowed;background: transparent !important}
.book-cal-day.disabled::after{
  content: '';position: absolute;inset: 35% 20%;
  border-bottom: 1.5px solid var(--text-muted);
}
.book-cal-day.available{background: rgba(46,230,166,.05);border-color: rgba(46,230,166,.2)}
.book-cal-day.available:hover:not(.disabled){
  background: rgba(46,230,166,.15);
  border-color: var(--success);
  transform: scale(1.05);
}
.book-cal-day.today{font-weight: 900;box-shadow: inset 0 0 0 2px var(--primary)}
.book-cal-day.selected{
  background: var(--grad-2) !important;
  border-color: transparent;
  color: #000 !important;
  box-shadow: 0 6px 20px rgba(46,230,166,.35);
  font-weight: 800;
}
.book-cal-day-dot{
  position:absolute;bottom: 4px;
  width: 4px;height: 4px;
  border-radius: 50%;
  background: var(--success);
}
.book-cal-day.selected .book-cal-day-dot{display:none}

/* Timezone note */
.book-tz{
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(0,212,255,.05);
  border: 1px solid rgba(0,212,255,.2);
  border-radius: var(--r-md);
  font-size: 12px;color: var(--text-dim);
}
.book-tz strong{color: var(--primary)}

/* Time slots */
.book-slots-container{
  padding: 20px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.book-slots-header{margin-bottom: 14px}
.book-slots-date{font-size: 16px;font-weight: 800;color: var(--text);margin-bottom: 4px}
.book-slots-sub{font-size: 12px;color: var(--text-dim)}
.book-slots{
  display: grid;grid-template-columns: 1fr 1fr;gap: 8px;
  max-height: 340px;overflow-y: auto;
  padding-right: 4px;
}
.book-slots::-webkit-scrollbar{width: 4px}
.book-slot{
  padding: 12px 10px;text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast);
  font-size: 14px;font-weight: 700;color: var(--text);
}
.book-slot:hover{
  background: rgba(46,230,166,.08);
  border-color: var(--success);
  transform: translateY(-2px);
}
.book-slot.selected{
  background: var(--grad-2);color: #000;
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(46,230,166,.35);
}
.book-slot-hint{font-size: 10px;font-weight: 500;color: var(--success);display: block;margin-top: 2px}
.book-slot.selected .book-slot-hint{color: rgba(0,0,0,.6)}
.book-slots-empty{
  text-align: center;padding: 40px 20px;
  color: var(--text-dim);font-size: 14px;
  grid-column: 1 / -1;
}
.book-slots-empty-icon{font-size: 48px;opacity: .5;margin-bottom: 10px}

/* Step 3: Details form */
.book-form{max-width: 640px;margin: 20px auto 0}
.book-form-row{display: grid;grid-template-columns: 1fr 1fr;gap: 14px;margin-bottom: 14px}
.book-form-field{margin-bottom: 14px}
.book-form-field label{
  display: block;font-size: 13px;font-weight: 600;
  color: var(--text);margin-bottom: 6px;
}
.book-form-field label .req{color: var(--red)}
.book-form-field input,
.book-form-field textarea,
.book-form-field select{
  width: 100%;padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  color: var(--text);font-size: 14px;font-family: inherit;
  outline: none;transition: border-color var(--t-fast);
}
.book-form-field input:focus,
.book-form-field textarea:focus,
.book-form-field select:focus{border-color: var(--success);box-shadow: 0 0 0 3px rgba(46,230,166,.15)}
.book-form-field textarea{min-height: 100px;resize: vertical}

/* Summary card in step 3 */
.book-summary{
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(46,230,166,.08), rgba(0,212,255,.05));
  border: 1px solid rgba(46,230,166,.25);
  border-radius: var(--r-xl);
  margin-bottom: 24px;
}
.book-summary-title{
  font-size: 12px;font-weight: 800;
  color: var(--success);
  letter-spacing: 1px;text-transform: uppercase;
  margin-bottom: 12px;
}
.book-summary-items{display: grid;gap: 8px}
.book-summary-item{display: flex;align-items: flex-start;gap: 12px;font-size: 14px}
.book-summary-item-icon{font-size: 18px;line-height: 1.3}
.book-summary-item-label{color: var(--text-dim);min-width: 100px}
.book-summary-item-value{color: var(--text);font-weight: 700;flex: 1}

/* Topic chips */
.book-topics{display: flex;flex-wrap: wrap;gap: 8px;margin-top: 6px}
.book-topic-chip{
  padding: 7px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 12.5px;font-weight: 600;
  color: var(--text-dim);cursor: pointer;
  transition: all var(--t-fast);
  user-select: none;
}
.book-topic-chip:hover{color: var(--text);border-color: var(--success)}
.book-topic-chip.active{
  background: rgba(46,230,166,.12);
  border-color: var(--success);color: var(--success);
}
.book-topic-chip input{display: none}

/* Step 4: Success */
.book-success{text-align: center;padding: 20px 0}
.book-success-icon{
  width: 120px;height: 120px;margin: 0 auto 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(46,230,166,.15), rgba(0,212,255,.1));
  border: 2px solid var(--success);
  display: grid;place-items: center;
  box-shadow: 0 20px 60px rgba(46,230,166,.3), inset 0 0 30px rgba(46,230,166,.2);
  animation: successPulse 2s ease-in-out infinite;
  position: relative;
}
@keyframes successPulse{
  0%,100%{box-shadow: 0 20px 60px rgba(46,230,166,.3), inset 0 0 30px rgba(46,230,166,.2)}
  50%{box-shadow: 0 20px 60px rgba(46,230,166,.5), inset 0 0 40px rgba(46,230,166,.3)}
}
.book-success-icon::before{
  content:'';position:absolute;inset:-6px;
  border: 2px solid var(--success);border-radius: 50%;
  animation: ringExpand 2s ease-out infinite;
  opacity: 0;
}
.book-success-icon svg{
  width: 60px;height: 60px;
  stroke-dasharray: 100;stroke-dashoffset: 100;
  animation: drawCheck 1s cubic-bezier(.65,0,.35,1) .3s forwards;
}
.book-success-title{
  font-size: 28px;font-weight: 800;
  margin-bottom: 10px;letter-spacing: -.5px;
}
.book-success-title span{
  background: linear-gradient(135deg, #2ee6a6, #00d4ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.book-success-desc{
  font-size: 15px;color: var(--text-dim);
  max-width: 500px;margin: 0 auto 24px;line-height: 1.7;
}

.book-meeting-details{
  max-width: 480px;margin: 0 auto 24px;
  padding: 24px;
  background: rgba(15,18,55,.6);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  text-align: left;
}
.book-md-row{
  display: flex;align-items: flex-start;gap: 14px;
  padding: 10px 0;
  font-size: 14px;
}
.book-md-row:not(:last-child){border-bottom: 1px dashed var(--border)}
.book-md-icon{
  width: 36px;height:36px;
  display: grid;place-items: center;
  background: rgba(46,230,166,.1);
  border-radius: 10px;
  color: var(--success);flex-shrink: 0;
}
.book-md-label{font-size: 11px;color: var(--text-dim);font-weight: 700;letter-spacing: .5px;text-transform: uppercase;margin-bottom: 2px}
.book-md-value{font-size: 14.5px;color: var(--text);font-weight: 600}

.book-add-cal{
  display: flex;gap: 8px;justify-content: center;flex-wrap: wrap;
  margin-top: 20px;
}
.book-add-cal-btn{
  display: inline-flex;align-items: center;gap: 8px;
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 13px;font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: all var(--t-fast);
}
.book-add-cal-btn:hover{background: var(--surface-2);border-color: var(--primary);transform: translateY(-2px)}

/* Actions (step navigation) */
.book-actions{
  display: flex;justify-content: space-between;gap: 12px;
  margin-top: 32px;flex-wrap: wrap;
}
.book-btn{
  display: inline-flex;align-items: center;gap: 10px;
  padding: 14px 28px;
  border-radius: 100px;
  font-size: 14.5px;font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--t-base);
  font-family: inherit;
  text-decoration: none;
}
.book-btn-primary{
  background: var(--grad-2);color: #000;
  box-shadow: 0 14px 36px rgba(46,230,166,.35);
}
.book-btn-primary:hover:not(:disabled){transform: translateY(-2px);box-shadow: 0 18px 46px rgba(46,230,166,.5)}
.book-btn-primary:disabled{opacity: .5;cursor: not-allowed}
.book-btn-ghost{
  background: var(--surface);
  border-color: var(--border-2);color: var(--text);
}
.book-btn-ghost:hover{background: var(--surface-2);border-color: var(--primary)}

/* Responsive */
@media(max-width: 900px){
  .book-types{grid-template-columns: 1fr}
  .book-cal-layout{grid-template-columns: 1fr;gap: 20px}
  .book-form-row{grid-template-columns: 1fr}
}
@media(max-width: 600px){
  .book-card{padding: 28px 22px}
  .book-hero{padding: 90px 18px 20px}
  .book-steps{padding: 0 18px;gap: 4px}
  .book-step-dot{width: 36px;height: 36px;font-size: 13px}
  .book-step-label{font-size: 10px}
  .book-slots{grid-template-columns: 1fr}
  .book-actions{flex-direction: column-reverse}
  .book-btn{width: 100%;justify-content: center}
}