/* ================================================================
   DentFlow – Landing CSS  |  RTL-first · Dark Premium · Vanilla
   ================================================================ */

/* 1 ─ ROOT VARIABLES */
:root {
  --primary:       #3B82F6;
  --secondary:     #8B5CF6;
  --success:       #22C55E;
  --warning:       #F59E0B;
  --error:         #EF4444;
  --whatsapp:      #25D366;

  --page-bg:       #070B16;
  --card-bg:       rgba(255,255,255,0.035);
  --card-border:   rgba(255,255,255,0.08);
  --text-hi:       #F8FAFC;
  --text-lo:       #A2AEC4;
  --text-dim:      rgba(255,255,255,0.38);

  /* unified section atmosphere */
  --section-base: linear-gradient(180deg, #050816 0%, #070B16 52%, #050816 100%);
  --glow-purple:  rgba(139,92,246,0.13);
  --glow-blue:    rgba(59,130,246,0.10);
  --grid-line:    rgba(148,163,184,0.026);

  --r-sm: 8px;   --r-md: 12px;  --r-lg: 16px;  --r-xl: 24px;
  --tr:   0.2s ease;
  --tr-s: 0.45s ease;
}

/* 2 ─ RESET */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html,body { max-width: 100%; overflow-x: hidden; }
html { scroll-behavior: smooth; font-size: 93.75%; }
body {
  font-family: 'Tajawal', -apple-system, Arial, sans-serif;
  background-color: #060912;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    radial-gradient(circle at 18% 14%, var(--glow-blue), transparent 42rem),
    radial-gradient(circle at 84% 48%, var(--glow-purple), transparent 46rem),
    radial-gradient(circle at 44% 84%, rgba(59,130,246,.08), transparent 42rem);
  background-size: 52px 52px, 52px 52px, auto, auto, auto;
  background-position: center top;
  background-attachment: fixed;
  color: var(--text-hi);
  font-size: 1.02rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
svg { flex-shrink: 0; }

/* 3 ─ LAYOUT */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}
.section { padding: 56px 0; position:relative; overflow:hidden; }
section[id] { scroll-margin-top: 96px; }
.section > .container { position:relative; z-index:1; }
.section::before {
  content:none;
}
.section::after {
  content:none;
}
.section-hd { text-align: center; margin-bottom: 38px; }
.section-title {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 900;
  color: var(--text-hi);
  line-height: 1.22;
  margin-bottom: 14px;
  text-shadow: 0 0 44px rgba(139,92,246,.18);
}
.section-sub {
  font-size: 1.05rem;
  color: var(--text-lo);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.8;
}

/* 4 ─ CHIPS */
.chip {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 20px;
  font-size: 0.7rem; font-weight: 700; white-space: nowrap;
}
.chip-blue   { background:rgba(59,130,246,.14);  color:#60A5FA; border:1px solid rgba(59,130,246,.25); }
.chip-green  { background:rgba(34,197,94,.13);   color:#4ADE80; border:1px solid rgba(34,197,94,.25); }
.chip-amber  { background:rgba(245,158,11,.13);  color:#FCD34D; border:1px solid rgba(245,158,11,.25); }
.chip-purple { background:rgba(139,92,246,.13);  color:#C4B5FD; border:1px solid rgba(139,92,246,.25); }

/* 5 ─ BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 24px; border-radius: 10px;
  font-size: .9rem; font-weight: 700; font-family: inherit;
  transition: all var(--tr); white-space: nowrap;
}
.btn-primary  {
  background: linear-gradient(135deg, #4F8DF7 0%, var(--primary) 55%, #2E6FE0 100%);
  color:#fff; border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 4px 16px rgba(59,130,246,.32), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(59,130,246,.45), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-ghost    { background:rgba(255,255,255,.05); color:var(--text-hi); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(12px); }
.btn-ghost:hover  { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.26); transform:translateY(-2px); }
.btn-outline  { background:transparent; color:var(--text-hi); border:1px solid rgba(255,255,255,.15); }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.btn-login    { background:rgba(255,255,255,.03); color:var(--text-lo); border:1px solid rgba(255,255,255,.1); font-size:.85rem; padding:9px 18px; }
.btn-login:hover { color:var(--text-hi); border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.06); }
.btn-lg   { padding:15px 32px; font-size:1rem; border-radius:12px; }
.btn-full { width:100%; }

/* 6 ─ NAVBAR */
.navbar {
  position: fixed; inset: 0 0 auto;
  z-index: 1000;
  background: rgba(6,11,24,.6);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(148,163,184,.08);
  transition: background var(--tr-s), border-color var(--tr-s), box-shadow var(--tr-s);
}
.navbar.scrolled {
  background: rgba(7,10,20,.84);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 8px 32px rgba(0,0,0,.32);
}
.navbar-inner {
  display: flex; align-items: center;
  height: 72px; gap: 24px;
}
.navbar-logo { display:flex; flex-direction:row-reverse; align-items:center; gap:11px; flex-shrink:0; }
.logo-icon {
  width:38px; height:38px;
  border-radius: 10px; display:block; flex-shrink:0;
  object-fit: contain;
}
.logo-text { font-size:1.25rem; font-weight:900; color:var(--text-hi); letter-spacing:-.015em; }

.navbar-links {
  display:flex; align-items:center; gap:6px;
  flex:1; justify-content:center;
}
.navbar-links a {
  padding:8px 15px; font-size:.9rem; font-weight:600;
  color:rgba(203,213,225,.72); border-radius:var(--r-sm);
  transition:color .2s ease, transform .2s ease, background .2s ease;
}
.navbar-links a:hover { color:#fff; transform:translateY(-1px); background:rgba(255,255,255,.04); }

.navbar-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.navbar .btn-primary {
  padding:11px 22px; font-size:.86rem; border-radius:11px;
  box-shadow:0 8px 24px rgba(59,130,246,.2), inset 0 1px 0 rgba(255,255,255,.2);
}
.navbar .btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(59,130,246,.32), inset 0 1px 0 rgba(255,255,255,.24); }
.navbar .btn-login { padding:10px 20px; font-size:.85rem; }

.hamburger { display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:40px; height:40px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--text-hi); border-radius:2px; transition:all var(--tr); }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

.mobile-menu {
  display:none; flex-direction:column; gap:12px;
  background:rgba(8,12,24,.97); backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.07); padding:20px 28px;
}
.mobile-menu ul { display:flex; flex-direction:column; gap:2px; }
.mobile-menu a { display:block; padding:11px 14px; font-size:1rem; font-weight:500; color:var(--text-lo); border-radius:var(--r-sm); transition:all var(--tr); }
.mobile-menu a:hover { color:var(--text-hi); background:rgba(255,255,255,.06); }
.mobile-menu.open { display:flex; }
.mobile-cta { margin-top:6px; }
.mobile-login {
  margin-top:10px; text-align:center; justify-content:center;
  border:1px solid rgba(255,255,255,.16); border-radius:12px;
  padding:11px 14px; font-weight:600; color:var(--text-hi);
}
.mobile-login:hover { background:rgba(255,255,255,.06); }

/* 7 ─ HERO */
.hero {
  padding-top: 86px;
  text-align: center;
  position: relative;
  overflow: visible;
  background: transparent;
}
.hero-glow-top {
  position:absolute; top:-14%; left:50%;
  transform:translateX(-50%) translateY(var(--pY, 0px));
  width:1000px; height:680px; border-radius:50%;
  background: radial-gradient(ellipse, rgba(139,92,246,.4) 0%, rgba(99,102,241,.16) 42%, transparent 68%);
  filter: blur(20px);
  pointer-events:none;
}
.hero-glow-left {
  position:absolute; top:6%; left:-8%;
  width:560px; height:560px; border-radius:50%;
  background: radial-gradient(ellipse, rgba(59,130,246,.2) 0%, transparent 70%);
  filter: blur(30px);
  transform:translateY(var(--pY, 0px));
  pointer-events:none;
}
.hero-glow-right {
  position:absolute; top:6%; right:-8%;
  width:560px; height:560px; border-radius:50%;
  background: radial-gradient(ellipse, rgba(139,92,246,.16) 0%, transparent 70%);
  filter: blur(30px);
  transform:translateY(var(--pY, 0px));
  pointer-events:none;
}
.hero-text-wrap { position:relative; z-index:2; }

.hero-badge {
  display:inline-flex; align-items:center; gap:9px;
  background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(59,130,246,.08));
  border:1px solid rgba(255,255,255,.12);
  border-radius:100px; padding:7px 18px 7px 16px;
  font-size:.83rem; font-weight:600; color:#D6CCFB;
  margin-bottom:30px;
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 20px rgba(139,92,246,.12);
}
.badge-pulse {
  width:8px; height:8px; border-radius:50%;
  background:var(--secondary);
  box-shadow: 0 0 0 3px rgba(139,92,246,.2);
  animation: pulse 2s infinite;
}
.hero-title {
  max-width: 900px;
  margin: 0 auto 22px;
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  font-weight: 900; line-height: 1.15;
  color: var(--text-hi);
  letter-spacing: -.035em;
}
.hero-desc {
  font-size: 1.05rem;
  color: #CBD5E1; max-width: 720px;
  margin: 0 auto 38px; line-height: 1.9;
}
.hero-actions {
  display:flex; align-items:center; justify-content:center;
  gap:14px; margin-bottom:52px; flex-wrap:wrap;
}

/* 7b ─ DASHBOARD AREA */
.dashboard-area { position:relative; z-index:2; max-width:1000px; margin:0 auto; }

.floating-card {
  position:absolute; z-index:20;
  background: linear-gradient(150deg, rgba(18,24,42,.92), rgba(10,14,26,.9));
  backdrop-filter:blur(24px) saturate(140%);
  border:1px solid rgba(255,255,255,.12); border-radius:14px;
  padding:11px 15px; display:flex; align-items:center; gap:11px;
  min-width:200px; max-width:244px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
  animation: floatY 4s ease-in-out infinite;
}
.fc-tr { top:-28px; left:50px;   animation-delay:0s; }
.fc-tl { top:-28px; right:50px;  animation-delay:1.2s; }
.fc-br { bottom:74px; left:32px; animation-delay:.6s; }
.fc-bl { bottom:74px; right:32px;animation-delay:1.8s; }

.fc-dot {
  width:9px; height:9px; border-radius:50%; flex-shrink:0;
  animation: pulse 2s infinite;
}
.fc-green  { background:var(--whatsapp); box-shadow:0 0 0 3px rgba(37,211,102,.18); }
.fc-blue   { background:var(--primary);  box-shadow:0 0 0 3px rgba(59,130,246,.18); }
.fc-amber  { background:var(--warning);  box-shadow:0 0 0 3px rgba(245,158,11,.18); }
.fc-purple { background:var(--secondary);box-shadow:0 0 0 3px rgba(139,92,246,.18); }

.fc-body { display:flex; flex-direction:column; gap:3px; }
.fc-body strong { font-size:.76rem; font-weight:700; color:var(--text-hi); }
.fc-body span   { font-size:.69rem; color:var(--text-lo); }

/* 7c ─ DASHBOARD MOCKUP (real screenshot) */
.dashboard-mockup {
  position:relative;
  max-height:540px; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, #000 80%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 80%, transparent 100%);
  background: linear-gradient(160deg, #0F141F 0%, #0A0E18 100%);
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px 18px 0 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04),
              0 44px 120px rgba(59,130,246,.16),
              0 0 100px rgba(139,92,246,.16),
              0 50px 100px rgba(0,0,0,.6),
              inset 0 1px 0 rgba(255,255,255,.07);
}
.dashboard-img {
  display:block; width:100%; height:auto;
  border-radius:17px 17px 0 0;
}

/* Sidebar – first child → rightmost in RTL */
.ds-sidebar {
  width:130px; flex-shrink:0;
  background:#080C14;
  border-left:1px solid rgba(255,255,255,.05); /* inner divider */
  display:flex; flex-direction:column; align-items:center;
  padding:16px 0; gap:4px;
}
.ds-logo-mark {
  width:26px; height:26px;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius:7px; margin-bottom:18px;
}
.ds-nav { display:flex; flex-direction:column; width:100%; gap:2px; padding:0 8px; }
.ds-item {
  display:flex; align-items:center; gap:7px;
  padding:7px 9px; border-radius:var(--r-sm);
  font-size:.68rem; font-weight:600; color:rgba(255,255,255,.38);
  transition:all var(--tr); text-decoration:none;
}
.ds-item:hover { background:rgba(255,255,255,.05); color:rgba(255,255,255,.7); }
.ds-active { background:rgba(59,130,246,.12); color:var(--primary) !important; }

/* Main – second child → leftmost in RTL */
.ds-main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.ds-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.07); flex-shrink:0;
  background:rgba(255,255,255,.015);
}
.ds-topbar-s { display:flex; flex-direction:column; gap:2px; }
.ds-page-title { font-size:.84rem; font-weight:800; color:var(--text-hi); }
.ds-date { font-size:.62rem; color:var(--text-lo); }
.ds-topbar-e { display:flex; align-items:center; gap:8px; }
.ds-search {
  display:flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:20px; padding:4px 10px;
  font-size:.62rem; color:var(--text-dim); white-space:nowrap;
}
.ds-avatar {
  width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex; align-items:center; justify-content:center;
  font-size:.62rem; font-weight:800; color:#fff; flex-shrink:0;
}
.ds-content {
  display:flex; flex:1; overflow:hidden; gap:0;
}
.ds-col {
  flex:1; display:flex; flex-direction:column; overflow:hidden;
  padding:9px; gap:7px;
  border-left:1px solid rgba(255,255,255,.04);
}
.ds-col:last-child { border-left:none; }
.ds-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:10px; flex-shrink:0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.ds-card-flex { flex:1; overflow:hidden; }
.ds-card-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.ds-card-title { font-size:.68rem; font-weight:800; color:var(--text-hi); display:flex; align-items:center; gap:4px; }
.wa-lbl { display:flex; align-items:center; gap:4px; }

/* appointments */
.apt-list { display:flex; flex-direction:column; gap:3px; }
.apt-row {
  display:flex; align-items:center; gap:5px;
  padding:3px 5px; border-radius:5px; font-size:.62rem;
}
.apt-row.apt-now { background:rgba(59,130,246,.07); }
.apt-row.apt-done { opacity:.48; }
.apt-time { color:var(--text-dim); width:40px; flex-shrink:0; }
.apt-info { flex:1; display:flex; flex-direction:column; }
.apt-info strong { font-size:.62rem; color:var(--text-hi); font-weight:700; }
.apt-info span   { font-size:.58rem; color:var(--text-dim); }
.apt-badge { font-size:.55rem; font-weight:700; padding:2px 6px; border-radius:10px; flex-shrink:0; transition:opacity .25s ease; }
.badge-done { background:rgba(255,255,255,.05); color:rgba(255,255,255,.38); }
.badge-now  { background:rgba(59,130,246,.2);  color:#60A5FA; }
.badge-soon { background:rgba(255,255,255,.04); color:rgba(255,255,255,.3); }
.badge-confirmed { background:rgba(34,197,94,.2);  color:#4ADE80; }
.badge-team      { background:rgba(139,92,246,.2); color:#C4B5FD; }

/* whatsapp */
.wa-msgs { display:flex; flex-direction:column; gap:4px; }
.wa-msg { border-radius:8px; padding:5px 8px; font-size:.6rem; line-height:1.45; max-width:90%; }
.wa-out { background:rgba(59,130,246,.15); color:#93C5FD; align-self:flex-end; }
.wa-in  { background:rgba(34,197,94,.12);  color:#86EFAC; align-self:flex-start; }
.wa-sys { background:rgba(255,255,255,.04); color:rgba(255,255,255,.38); align-self:center; text-align:center; font-size:.56rem; }

/* waitlist */
.wl-list { display:flex; flex-direction:column; gap:5px; }
.wl-row  { display:flex; align-items:center; gap:6px; }
.wl-av {
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,rgba(59,130,246,.5),rgba(139,92,246,.5));
  display:flex; align-items:center; justify-content:center;
  font-size:.58rem; font-weight:800; color:#fff;
}
.wl-info { flex:1; display:flex; flex-direction:column; }
.wl-info strong { font-size:.62rem; color:var(--text-hi); font-weight:700; }
.wl-info span   { font-size:.55rem; color:var(--text-dim); }
.wl-btn {
  font-size:.56rem; padding:3px 7px; border-radius:10px;
  background:rgba(59,130,246,.14); color:#60A5FA;
  border:1px solid rgba(59,130,246,.25); cursor:pointer; font-family:inherit; white-space:nowrap;
}

/* dental chart */
.tooth-chart { display:flex; flex-direction:column; gap:3px; margin:5px 0; }
.teeth-row   { display:flex; gap:2px; justify-content:center; }
.teeth-sep   { height:1px; background:rgba(255,255,255,.07); margin:2px 0; }
.t {
  width:13px; height:13px; border-radius:3px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:5.5px; font-weight:800;
}
.t-ok     { background:rgba(255,255,255,.06); color:rgba(255,255,255,.28); }
.t-filled { background:rgba(59,130,246,.28);  color:#60A5FA; }
.t-active { background:rgba(139,92,246,.38);  color:#C4B5FD; }
.t-miss   { background:rgba(239,68,68,.2);    color:#FCA5A5; }

.chart-legend { display:flex; gap:7px; justify-content:center; flex-wrap:wrap; }
.cl-i  { display:flex; align-items:center; gap:3px; font-size:.52rem; color:var(--text-dim); }
.cl-dot{ width:6px; height:6px; border-radius:2px; }
.cl-ok     { background:rgba(255,255,255,.22); }
.cl-filled { background:var(--primary); }
.cl-active { background:var(--secondary); }
.cl-miss   { background:var(--error); }

/* 8 ─ TRUST STRIP */
.trust-strip {
  padding:30px 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  background:transparent;
}
.trust-inner { display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center; }
.trust-label { font-size:.82rem; color:#CBD5E1; white-space:nowrap; font-weight:700; }
.trust-items { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.trust-item  {
  display:flex; align-items:center; gap:6px;
  font-size:.82rem; color:rgba(203,213,225,.85); font-weight:600;
  padding:8px 14px; border-radius:999px;
  background:rgba(15,23,42,.5); border:1px solid rgba(148,163,184,.14);
}
.trust-sep   { display:none; }

/* 9 ─ AUTOMATION FLOW SECTION */
.section-flow {
  position:relative; overflow:hidden; padding:120px 0;
  --glow-x:52%; --glow-y:18%; --glow-x2:18%; --glow-y2:72%;
  background: transparent;
}
.section-flow::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(148,163,184,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.035) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
          mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
}
.flow-container {
  position:relative; z-index:2;
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center;
}
.section-flow .section-badge {
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:18px; padding:8px 16px; border-radius:999px;
  color:#C4B5FD; font-size:.84rem; font-weight:700;
  background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.26);
  box-shadow:0 0 40px rgba(139,92,246,.14);
}
.flow-content h2 {
  max-width:620px; margin:0 0 18px; color:var(--text-hi);
  font-size:clamp(2rem, 4vw, 3.2rem); line-height:1.18; letter-spacing:-.03em;
  text-shadow:0 0 50px rgba(139,92,246,.18);
}
.flow-content > p {
  max-width:620px; color:#CBD5E1; font-size:1.05rem; line-height:1.9; margin:0 0 34px;
}
.flow-steps { position:relative; display:grid; gap:14px; }
.flow-steps::before {
  content:""; position:absolute; top:18px; bottom:18px; right:25px; width:1px;
  background:linear-gradient(180deg, rgba(59,130,246,0), rgba(59,130,246,.55), rgba(139,92,246,.55), rgba(139,92,246,0));
  box-shadow:0 0 20px rgba(139,92,246,.35);
}
.flow-step {
  position:relative; z-index:1; width:100%;
  display:flex; align-items:flex-start; gap:14px; text-align:right;
  padding:16px 18px; border-radius:22px; font-family:inherit;
  border:1px solid rgba(148,163,184,.13); background:rgba(15,23,42,.58);
  color:var(--text-hi); cursor:pointer; backdrop-filter:blur(16px);
  transition:transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.flow-step:hover, .flow-step.is-active {
  transform:translateY(-2px); border-color:rgba(139,92,246,.36);
  background:
    radial-gradient(circle at 10% 0%, rgba(59,130,246,.14), transparent 42%),
    rgba(15,23,42,.84);
  box-shadow:0 22px 70px rgba(0,0,0,.28), 0 0 60px rgba(59,130,246,.1);
}
.flow-number {
  flex:0 0 auto; width:52px; height:52px; display:grid; place-items:center;
  border-radius:16px; font-weight:800;
  background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(139,92,246,.2));
  color:#BFDBFE; border:1px solid rgba(191,219,254,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.flow-step.is-active .flow-number { background:linear-gradient(135deg, #3B82F6, #8B5CF6); color:#fff; }
.flow-step-text { display:grid; gap:6px; }
.flow-step-text strong { color:var(--text-hi); font-size:1rem; }
.flow-step-text small  { color:#CBD5E1; font-size:.9rem; line-height:1.7; }

.flow-preview { position:relative; }
.flow-preview::before {
  content:""; position:absolute; inset:8% 6%; pointer-events:none;
  background:radial-gradient(circle, rgba(139,92,246,.22), rgba(59,130,246,.1), transparent 68%);
  filter:blur(24px);
}
.flow-browser {
  position:relative; z-index:1; overflow:hidden; border-radius:30px;
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(8,13,28,.96));
  border:1px solid rgba(148,163,184,.17);
  box-shadow:0 42px 130px rgba(0,0,0,.42), 0 0 100px rgba(59,130,246,.14), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}
.browser-topbar {
  height:62px; display:flex; align-items:center; gap:14px; padding:0 20px;
  border-bottom:1px solid rgba(148,163,184,.12); background:rgba(2,6,23,.34);
}
.browser-dots { display:flex; gap:6px; }
.browser-dots span { width:10px; height:10px; border-radius:999px; background:rgba(148,163,184,.45); }
.browser-title { color:var(--text-hi); font-weight:800; margin-inline-end:auto; }
.browser-badge {
  display:inline-flex; align-items:center; padding:7px 11px; border-radius:999px;
  color:#C4B5FD; background:rgba(139,92,246,.14); border:1px solid rgba(139,92,246,.22);
  font-size:.82rem; font-weight:700;
}
.flow-image-frame { position:relative; min-height:560px; display:grid; place-items:center; padding:22px; }
.flow-image-frame img {
  display:block; width:auto; max-width:100%; height:auto; max-height:560px; object-fit:contain;
  border-radius:22px; border:1px solid rgba(148,163,184,.12);
}
.image-placeholder {
  display:none; width:100%; min-height:420px; place-items:center; text-align:center;
  padding:40px 24px; border-radius:22px; border:1px dashed rgba(148,163,184,.24);
  background:
    radial-gradient(circle at 50% 20%, rgba(59,130,246,.12), transparent 44%),
    rgba(15,23,42,.52);
  color:#CBD5E1;
}
.placeholder-icon {
  width:58px; height:58px; display:grid; place-items:center; margin:0 auto 14px;
  border-radius:18px; font-size:1.8rem; color:#fff;
  background:linear-gradient(135deg, rgba(59,130,246,.26), rgba(139,92,246,.22));
}
.image-placeholder strong { display:block; color:var(--text-hi); margin-bottom:8px; }
.image-placeholder span { display:block; max-width:320px; margin:0 auto; line-height:1.8; font-size:.9rem; }

.flow-mini-caption {
  position:relative; z-index:2; margin-top:16px;
  display:flex; align-items:center; gap:10px; justify-content:center;
  color:#CBD5E1; font-size:.9rem;
}
.caption-dot { width:8px; height:8px; border-radius:999px; background:#22C55E; box-shadow:0 0 18px rgba(34,197,94,.65); }

@media (max-width:992px) {
  .flow-container { grid-template-columns:1fr; gap:42px; }
  .flow-preview { order:1; }
  .flow-content { order:2; }
  .flow-content h2, .flow-content > p { max-width:100%; text-align:center; }
  .section-flow .section-badge { margin-inline:auto; }
}
@media (max-width:768px) {
  .section-flow { padding:84px 0; }
  .flow-content h2 { font-size:clamp(1.85rem, 8vw, 2.55rem); }
  .flow-content > p { font-size:.96rem; }
  .flow-browser { border-radius:22px; }
  .browser-topbar { height:auto; min-height:58px; flex-wrap:wrap; padding:14px; }
  .flow-image-frame { min-height:380px; padding:14px; }
  .image-placeholder { min-height:270px; }
  .flow-step { padding:14px; }
  .flow-number { width:44px; height:44px; border-radius:14px; }
  .flow-step-text small { font-size:.86rem; }
  .flow-steps::before { right:21px; }
}

/* 9c ─ FLOW AUTOPLAY / PREMIUM TOUCHES */
@media (hover:hover) {
  .flow-step:hover {
    transform:translateY(-2px);
    border-color:rgba(139,92,246,.32);
    box-shadow:0 18px 60px rgba(0,0,0,.24), 0 0 50px rgba(59,130,246,.08);
  }
}
.flow-step.is-active {
  border-color:rgba(139,92,246,.42);
  background:
    radial-gradient(circle at 10% 0%, rgba(59,130,246,.16), transparent 42%),
    rgba(15,23,42,.86);
  box-shadow:0 24px 80px rgba(0,0,0,.30), 0 0 70px rgba(59,130,246,.12), inset 0 1px 0 rgba(255,255,255,.05);
}
.flow-step::after {
  content:""; position:absolute; inset-inline-start:16px; bottom:10px;
  width:0%; height:2px; border-radius:999px;
  background:linear-gradient(90deg, #3B82F6, #8B5CF6); opacity:0;
}
.section-flow.is-autoplaying .flow-step.is-active::after {
  opacity:1; animation:flowProgress 3.5s linear forwards;
}
.section-flow.is-user-paused .flow-step.is-active::after { display:none; }
@keyframes flowProgress { from { width:0%; } to { width:calc(100% - 32px); } }

.flow-steps::before {
  background:linear-gradient(180deg, transparent, rgba(59,130,246,.70), rgba(139,92,246,.70), transparent);
  box-shadow:0 0 24px rgba(139,92,246,.42);
}
.flow-image-frame img { transition:opacity .25s ease, transform .25s ease; }
.flow-image-frame img.is-switching { opacity:0; transform:scale(.985); }

@media (prefers-reduced-motion: reduce) {
  .section-flow.is-autoplaying .flow-step.is-active::after { animation:none; opacity:0; }
  .flow-image-frame img { transition:none; }
}

/* 9b ─ FEATURES GRID (legacy / unused) */
.features-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.feature-card {
  background: linear-gradient(180deg, rgba(15,23,42,.78), rgba(9,14,28,.86));
  border:1px solid rgba(148,163,184,.14);
  border-radius:20px; overflow:hidden; position:relative;
  box-shadow: 0 24px 70px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.feature-card::before {
  content:""; position:absolute; inset:-1px; z-index:0; pointer-events:none;
  background: radial-gradient(circle at 30% 0%, rgba(59,130,246,.18), transparent 42%);
  opacity:0; transition:opacity .35s ease;
}
.feature-card > * { position:relative; z-index:1; }
.feature-card:hover {
  transform:translateY(-6px);
  border-color:rgba(139,92,246,.28);
  box-shadow: 0 30px 100px rgba(0,0,0,.36), 0 0 70px rgba(59,130,246,.1);
}
.feature-card:hover::before { opacity:1; }

/* feature visuals */
.fv {
  padding:22px 22px 14px;
  min-height:158px; display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

/* WhatsApp visual */
.fv-wa .mini-chat { display:flex; flex-direction:column; gap:6px; width:100%; }
.mc-bubble {
  border-radius:10px; padding:7px 12px;
  font-size:.78rem; line-height:1.4; max-width:82%;
}
.mc-out { background:rgba(59,130,246,.15); color:#93C5FD; align-self:flex-end; }
.mc-in  { background:rgba(34,197,94,.12);  color:#86EFAC; align-self:flex-start; }
.mc-status { margin-top:2px; }
.status-pill { display:inline-flex; padding:3px 10px; border-radius:20px; font-size:.7rem; font-weight:700; }
.pill-green  { background:rgba(34,197,94,.15); color:#4ADE80; border:1px solid rgba(34,197,94,.25); }

/* Waitlist visual */
.fv-wl { flex-direction:column; gap:8px; align-items:flex-start !important; width:100%; }
.slot-empty {
  display:flex; gap:8px; align-items:center; width:100%;
  background:rgba(245,158,11,.07); border:1px dashed rgba(245,158,11,.3);
  border-radius:var(--r-sm); padding:6px 12px;
}
.slot-time { font-size:.82rem; font-weight:800; color:#FCD34D; }
.slot-lbl  { font-size:.68rem; color:rgba(255,255,255,.45); }
.arrow-dn  { color:var(--secondary); font-size:1.2rem; align-self:center; }
.sug-list  { display:flex; flex-direction:column; gap:5px; width:100%; }
.sug-row   { display:flex; align-items:center; gap:8px; padding:5px 8px; background:rgba(255,255,255,.03); border-radius:var(--r-sm); }
.sug-av    { width:22px; height:22px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,rgba(59,130,246,.45),rgba(139,92,246,.45)); display:flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:800; color:#fff; }
.sug-nm    { flex:1; font-size:.75rem; color:var(--text-hi); }
.sug-pill  { font-size:.62rem; padding:2px 7px; border-radius:10px; background:rgba(34,197,94,.14); color:#4ADE80; }

/* Team visual */
.fv-team   { flex-direction:column; gap:6px; align-items:stretch !important; width:100%; }
.notif-mini{ display:flex; justify-content:space-between; align-items:center; padding:7px 10px; border-radius:var(--r-sm); font-size:.7rem; }
.nm-dr { background:rgba(59,130,246,.08);  border:1px solid rgba(59,130,246,.15); }
.nm-as { background:rgba(139,92,246,.08);  border:1px solid rgba(139,92,246,.15); }
.nm-rc { background:rgba(34,197,94,.07);   border:1px solid rgba(34,197,94,.15); }
.nm-role { font-weight:700; color:var(--text-hi); }
.nm-msg  { color:var(--text-lo); font-size:.66rem; }

/* Billing visual */
.fv-bill   { }
.bill-flow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.bf-step   { display:flex; flex-direction:column; align-items:center; gap:4px; }
.bf-ico    {
  width:42px; height:42px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.bf-pay    {
  font-size:.52rem !important; font-weight:800 !important;
  background:rgba(34,197,94,.14) !important; color:#4ADE80 !important;
  border:1px solid rgba(34,197,94,.28) !important;
  border-radius:6px !important; padding:4px 5px !important;
  width:auto !important; height:auto !important;
}
.bf-step > span { font-size:.65rem; color:var(--text-dim); }
.bf-arrow { font-size:1rem; color:rgba(255,255,255,.2); }

.fc-body   { padding:16px 22px 22px; }
.fc-title  { font-size:1rem; font-weight:800; color:var(--text-hi); margin-bottom:8px; }
.fc-desc   { font-size:.875rem; color:var(--text-lo); line-height:1.75; }

/* 10 ─ ROLE JOURNEY SECTION */
.section-roles {
  position:relative; overflow:hidden; padding:120px 0;
  --glow-x:50%; --glow-y:12%; --glow-x2:85%; --glow-y2:70%;
  background: transparent;
}
.section-roles::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:none;
  -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
          mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
}
.section-roles .container { position:relative; z-index:2; }
.section-roles .section-heading { max-width:680px; margin:0 auto; text-align:center; }
.section-roles .section-badge {
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:18px; padding:8px 16px; border-radius:999px;
  color:#C4B5FD; font-size:.84rem; font-weight:700;
  background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.26);
  box-shadow:0 0 40px rgba(139,92,246,.14);
}
.section-roles .section-heading h2 {
  color:var(--text-hi); font-size:clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight:900; line-height:1.2; letter-spacing:-.03em; margin:0 0 14px;
  text-shadow:0 0 50px rgba(139,92,246,.18);
}
.section-roles .section-heading p { color:#CBD5E1; font-size:1.05rem; line-height:1.85; margin:0; }

.roles-journey { position:relative; display:grid; gap:54px; max-width:1060px; margin:72px auto 0; }
.roles-journey::before {
  content:""; position:absolute; top:24px; bottom:24px; right:50%; width:1px; z-index:0;
  transform:translateX(50%);
  background:linear-gradient(180deg, transparent, rgba(59,130,246,.48), rgba(139,92,246,.48), transparent);
  box-shadow:0 0 10px rgba(139,92,246,.28); pointer-events:none;
}
.role-row {
  position:relative; z-index:2; display:grid; grid-template-columns:.92fr 1.08fr;
  gap:46px; align-items:center; padding:34px; border-radius:34px;
  background:
    radial-gradient(circle at 18% 0%, rgba(59,130,246,.10), transparent 34%),
    rgba(12,17,29,.95);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(148,163,184,.1);
}
.role-row::before {
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(139,92,246,.10), transparent 62%); opacity:.8;
}
.role-row::after {
  content:""; position:absolute; top:0; right:50%;
  width:12px; height:12px; transform:translate(50%,-50%); border-radius:999px;
  background:linear-gradient(135deg, #3B82F6, #8B5CF6);
  box-shadow:0 0 0 6px rgba(139,92,246,.10), 0 0 26px rgba(139,92,246,.55);
  z-index:4; pointer-events:none;
}
.role-row > * { position:relative; z-index:3; }
.role-row.is-reversed .role-copy { order:2; }
.role-row.is-reversed .role-preview { order:1; }

.role-copy { max-width:460px; }
.role-meta { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.role-index {
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:34px; border-radius:999px;
  color:#BFDBFE; background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.22);
  font-weight:800; font-size:.9rem;
}
.role-label {
  display:inline-flex; align-items:center; padding:8px 13px; border-radius:999px;
  color:#C4B5FD; background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.22);
  font-size:.86rem; font-weight:700;
}
.role-copy h3 {
  margin:0 0 14px; color:var(--text-hi);
  font-size:clamp(1.5rem, 2.6vw, 2.2rem); line-height:1.25; letter-spacing:-.02em;
}
.role-copy p { margin:0; color:#CBD5E1; line-height:1.9; font-size:1rem; }

.role-preview { position:relative; }
.role-preview::before {
  content:""; position:absolute; inset:10% 6%; pointer-events:none;
  background:radial-gradient(circle, rgba(59,130,246,.16), rgba(139,92,246,.10), transparent 68%);
  filter:blur(20px);
}
.role-card {
  position:relative; z-index:1; overflow:hidden; border-radius:26px; padding:22px; min-height:210px;
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(8,13,28,.96));
  border:1px solid rgba(148,163,184,.20);
  box-shadow:0 34px 100px rgba(0,0,0,.38), 0 0 70px rgba(59,130,246,.08), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}
.role-card::before {
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background:
    radial-gradient(circle at 20% 0%, rgba(59,130,246,.14), transparent 36%),
    radial-gradient(circle at 86% 12%, rgba(139,92,246,.12), transparent 34%);
}
.role-card > * { position:relative; z-index:1; }
.role-card-header {
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  margin-bottom:16px; color:var(--text-hi); font-weight:800; font-size:.92rem;
}
.role-card-row {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 14px; border-radius:14px; margin-bottom:10px;
  background:rgba(15,23,42,.78); border:1px solid rgba(148,163,184,.14);
  color:#D0DAEA; font-size:.88rem;
}
.role-card-row:last-child { margin-bottom:0; }
.role-card-row strong { color:var(--text-hi); font-weight:700; }
.role-card-row .rv-green { color:#4ADE80; font-weight:800; }
.role-status { display:inline-flex; padding:5px 10px; border-radius:999px; font-size:.76rem; font-weight:800; white-space:nowrap; }
.role-status.success { color:#86EFAC; background:rgba(34,197,94,.13);  border:1px solid rgba(34,197,94,.2); }
.role-status.warning { color:#FDE68A; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.2); }
.role-status.info    { color:#93C5FD; background:rgba(59,130,246,.13); border:1px solid rgba(59,130,246,.2); }
.role-status.purple  { color:#C4B5FD; background:rgba(139,92,246,.13); border:1px solid rgba(139,92,246,.2); }
.role-card-btn {
  margin-top:6px; width:100%; padding:11px; border-radius:14px;
  background:linear-gradient(135deg, rgba(59,130,246,.2), rgba(139,92,246,.2));
  border:1px solid rgba(139,92,246,.3); color:#DBEAFE; font-weight:700; font-size:.85rem;
  font-family:inherit; cursor:pointer; transition:all var(--tr);
}
.role-card-btn:hover { background:linear-gradient(135deg, rgba(59,130,246,.3), rgba(139,92,246,.3)); }

/* role-journey reveal stagger */
.roles-journey .reveal:nth-child(2) { transition-delay:.08s; }
.roles-journey .reveal:nth-child(3) { transition-delay:.16s; }
.roles-journey .reveal:nth-child(4) { transition-delay:.24s; }

@media (hover:hover) {
  .role-row { transition:transform .32s ease, border-color .32s ease, box-shadow .32s ease; }
  .role-row:hover {
    transform:translateY(-6px); border-color:rgba(139,92,246,.22);
    box-shadow:0 34px 110px rgba(0,0,0,.32), 0 0 70px rgba(59,130,246,.08);
  }
  .role-card { transition:transform .32s ease, border-color .32s ease; }
  .role-row:hover .role-card { transform:translateY(-4px); border-color:rgba(139,92,246,.26); }
}

@media (max-width:992px) {
  .roles-journey { max-width:760px; gap:36px; }
  .roles-journey::before { right:13px; transform:none; }
  .role-row::after { right:13px; }
  .role-row, .role-row.is-reversed { grid-template-columns:1fr; gap:24px; padding:26px 26px 26px 26px; }
  .role-row.is-reversed .role-copy, .role-row.is-reversed .role-preview { order:initial; }
  .role-copy { max-width:100%; }
}
@media (max-width:768px) {
  .section-roles { padding:84px 0; }
  .roles-journey { margin-top:46px; gap:24px; }
  .roles-journey::before { display:none; }
  .role-row::after { display:none; }
  .role-row { border-radius:26px; padding:20px; }
  .role-copy h3 { font-size:clamp(1.35rem, 7vw, 1.85rem); }
  .role-copy p { font-size:.94rem; }
  .role-card { border-radius:22px; padding:16px; min-height:auto; }
}

/* 10b ─ ROLES (legacy / unused) */
.roles-section { background:rgba(255,255,255,.01); }
.role-block {
  display:flex; align-items:center; gap:64px;
  margin-bottom:80px;
}
.role-block:last-child { margin-bottom:0; }

/* In RTL flex-direction:row, first child → RIGHT.
   HTML order: role-text first, role-mockup second.
   Default: text on RIGHT, mockup on LEFT.
   .role-alt: swap so mockup on RIGHT, text on LEFT via flex-direction:row-reverse */
.role-alt { flex-direction: row-reverse; }

.role-text    { flex:1; }
.role-mockup  { flex:1; }

.role-tag {
  display:inline-block;
  background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.25);
  color:#C4B5FD; font-size:.78rem; font-weight:700;
  padding:4px 14px; border-radius:20px; margin-bottom:14px;
}
.role-title {
  font-size:clamp(1.25rem, 2.5vw, 1.7rem);
  font-weight:900; color:var(--text-hi);
  margin-bottom:14px; line-height:1.3;
}
.role-desc { font-size:.95rem; color:var(--text-lo); line-height:1.85; }

.rm-card {
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--r-lg); padding:20px;
}
.rm-title {
  font-size:.82rem; font-weight:800; color:var(--text-hi);
  margin-bottom:14px;
}
.rm-title-row { display:flex; align-items:center; justify-content:space-between; }
.rm-list  { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.rm-row   {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; background:rgba(255,255,255,.02);
  border-radius:var(--r-sm); font-size:.8rem; color:var(--text-lo);
}
.rm-btn {
  background:rgba(59,130,246,.12); color:var(--primary);
  border:1px solid rgba(59,130,246,.25); border-radius:var(--r-sm);
  padding:8px 16px; font-size:.8rem; font-weight:700; font-family:inherit;
  cursor:pointer; transition:all var(--tr);
}
.rm-btn:hover { background:rgba(59,130,246,.2); }

.mini-teeth-row { display:flex; gap:3px; margin:10px 0; flex-wrap:wrap; }
.mt { width:18px; height:18px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:7px; font-weight:800; flex-shrink:0; }
.mt-ok     { background:rgba(255,255,255,.07); color:rgba(255,255,255,.32); }
.mt-filled { background:rgba(59,130,246,.28);  color:#60A5FA; }
.mt-active { background:rgba(139,92,246,.35);  color:#C4B5FD; }

.proc-list { display:flex; flex-direction:column; gap:4px; }
.proc      { font-size:.8rem; color:rgba(255,255,255,.4); padding:5px 8px; border-radius:5px; }
.proc-done { color:#4ADE80; background:rgba(34,197,94,.06); }
.proc-active{ color:var(--primary); background:rgba(59,130,246,.08); }
.proc-next  { color:var(--text-dim); }

.rm-notifs { display:flex; flex-direction:column; gap:8px; }
.notif-sm  { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-radius:var(--r-sm); font-size:.82rem; }
.n-urgent  { background:rgba(239,68,68,.08);   border:1px solid rgba(239,68,68,.2);   color:#FCA5A5; }
.n-info    { background:rgba(59,130,246,.08);  border:1px solid rgba(59,130,246,.2);  color:#93C5FD; }
.n-prep    { background:rgba(139,92,246,.08);  border:1px solid rgba(139,92,246,.2);  color:#C4B5FD; }
.n-time    { font-size:.7rem; opacity:.75; font-weight:800; }

.admin-metrics { display:flex; flex-direction:column; gap:7px; margin-bottom:12px; }
.am-item  { display:flex; align-items:center; justify-content:space-between; padding:7px 11px; background:rgba(255,255,255,.02); border-radius:var(--r-sm); }
.am-lbl   { font-size:.76rem; color:var(--text-dim); }
.am-val   { font-size:.82rem; font-weight:800; color:var(--text-hi); }
.am-green { color:#4ADE80; }
.am-amber { color:#FCD34D; }
.inv-mini { display:flex; flex-direction:column; gap:5px; }
.inv-row  { display:flex; align-items:center; justify-content:space-between; font-size:.76rem; color:var(--text-lo); padding:5px 8px; background:rgba(255,255,255,.02); border-radius:5px; }

/* 11 ─ FLOW SECTION */
.flow-section {
  background: transparent;
  position:relative; overflow:hidden;
}
.flow-section .container { position:relative; z-index:1; }
.flow-section .section-hd { margin-bottom:40px; }

/* ─ CONNECTED WORKFLOW MAP (premium hub-and-spoke) ─ */
.cmap {
  position:relative; width:min(100%, 1180px); margin:0 auto;
  aspect-ratio:1120/680;
}
.cmap::before {
  content:''; position:absolute; inset:-30% -20%;
  background:
    radial-gradient(circle at 50% 50%, rgba(99,102,241,.14), transparent 44%),
    radial-gradient(circle at 50% 52%, rgba(139,92,246,.10), transparent 56%);
  pointer-events:none; z-index:0;
}
.cmap-svg { position:absolute; inset:0; width:100%; height:100%; z-index:1; }

/* Hub — luxurious glass sphere */
.cmap-hub { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; }
.cmap-hub-core {
  width:168px; height:168px; border-radius:50%;
  display:grid; place-items:center; text-align:center; position:relative;
  background:
    radial-gradient(circle at 36% 24%, rgba(255,255,255,.42), rgba(255,255,255,.06) 16%, transparent 30%),
    radial-gradient(circle at 50% 40%, rgba(124,127,255,.55), rgba(59,130,246,.30) 40%, #0a0f1e 74%),
    radial-gradient(circle at 50% 118%, rgba(139,92,246,.4), transparent 55%);
  border:1px solid rgba(165,180,252,.36);
  box-shadow:
    0 32px 80px rgba(2,6,18,.6),
    0 18px 60px rgba(79,70,229,.42),
    0 0 100px rgba(99,102,241,.30),
    inset 0 3px 14px rgba(255,255,255,.34),
    inset 0 -16px 34px rgba(2,6,23,.66),
    inset 0 0 0 1px rgba(255,255,255,.05);
  color:#fff; font-weight:800; font-size:1.2rem; letter-spacing:.3px;
  animation:cmapHubPulse 4.4s ease-in-out infinite;
}
/* specular top sheen over the logo for glass feel */
.cmap-hub-core::after {
  content:''; position:absolute; left:50%; top:9%; transform:translateX(-50%);
  width:64%; height:34%; border-radius:50%; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
  opacity:.5; filter:blur(2px);
}
.cmap-logo {
  width:72%; height:72%; object-fit:contain; position:relative; z-index:1;
  filter:drop-shadow(0 4px 14px rgba(2,6,23,.45));
}
.cmap-logo-fallback {
  display:grid; width:52%; height:52%; border-radius:20px; position:relative; z-index:1;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow:0 8px 24px rgba(99,102,241,.5), inset 0 1.5px 0 rgba(255,255,255,.3);
}
.cmap-hub-m .cmap-logo-fallback { border-radius:16px; }
@keyframes cmapHubPulse {
  0%,100% { box-shadow:0 32px 80px rgba(2,6,18,.6), 0 18px 60px rgba(79,70,229,.42), 0 0 100px rgba(99,102,241,.28), inset 0 3px 14px rgba(255,255,255,.34), inset 0 -16px 34px rgba(2,6,23,.66), inset 0 0 0 1px rgba(255,255,255,.05); }
  50%     { box-shadow:0 32px 90px rgba(2,6,18,.6), 0 18px 70px rgba(79,70,229,.5), 0 0 130px rgba(99,102,241,.42), inset 0 3px 14px rgba(255,255,255,.36), inset 0 -16px 34px rgba(2,6,23,.66), inset 0 0 0 1px rgba(255,255,255,.05); }
}

/* Nodes */
.cmap-node {
  position:absolute; transform:translate(-50%,-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:11px;
}
.cmap-node::before {
  content:''; position:absolute; top:48px; left:50%; transform:translate(-50%,-50%);
  width:150px; height:150px; border-radius:50%; z-index:-1; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--ac) 18%, transparent), transparent 62%);
  opacity:.62; filter:blur(6px);
}
.cmap > .cmap-node .cmap-label {
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
}

.cmap-orb {
  width:104px; height:104px; border-radius:30px; display:grid; place-items:center;
  background:
    radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--ac) 22%, transparent), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 24%),
    radial-gradient(circle at 30% 12%, rgba(255,255,255,.24), transparent 40%),
    linear-gradient(180deg, rgba(28,38,62,.96), rgba(7,12,26,.98));
  border:1px solid rgba(148,163,184,.24);
  box-shadow:
    0 28px 70px rgba(2,6,18,.52),
    0 0 64px -10px var(--ac, #3B82F6),
    inset 0 2px 0 rgba(255,255,255,.2),
    inset 0 0 0 1px color-mix(in srgb, var(--ac) 38%, transparent),
    inset 0 -14px 26px rgba(2,6,23,.55);
  color:var(--ac, #3B82F6); position:relative;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.cmap-orb::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 22%),
    radial-gradient(circle at 50% 116%, var(--ac, #3B82F6), transparent 56%);
  opacity:.45; pointer-events:none;
}
.cmap-orb svg { width:44px; height:44px; position:relative; z-index:1; filter:drop-shadow(0 0 16px color-mix(in srgb, var(--ac) 75%, transparent)) drop-shadow(0 1px 1px rgba(2,6,23,.5)); }
.cmap-orb::after {
  content:''; position:absolute; left:8%; right:8%; top:6%; height:38%; border-radius:24px 24px 50% 50%/24px 24px 30px 30px;
  background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0));
  opacity:.6; pointer-events:none; z-index:1;
}
.cmap-label { font-size:.95rem; font-weight:800; color:#E2E8F0; white-space:nowrap; text-shadow:0 0 22px rgba(59,130,246,.2); }

/* Node hover */
.cmap-node .cmap-orb:hover, .cmap-tile:hover .cmap-orb {
  transform:translateY(-4px) scale(1.05);
  border-color:color-mix(in srgb, var(--ac) 45%, rgba(148,163,184,.2));
  box-shadow:0 22px 60px rgba(0,0,0,.45), 0 0 52px -8px var(--ac, #3B82F6), inset 0 1px 0 rgba(255,255,255,.12);
}

/* Node accent colors */
.n-wa    { --ac:#25D366; }
.n-appt  { --ac:#3B82F6; }
.n-wait  { --ac:#F59E0B; }
.n-chart { --ac:#06B6D4; }
.n-team  { --ac:#8B5CF6; }
.n-inv   { --ac:#6366F1; }

/* Node positions (desktop) — airier spread */
.cmap > .n-wa    { left:50%; top:13.2%; }
.cmap > .n-appt  { left:81.25%; top:31.6%; }
.cmap > .n-wait  { left:18.75%; top:31.6%; }
.cmap > .n-chart { left:18.75%; top:68.4%; }
.cmap > .n-team  { left:50%; top:86.8%; }
.cmap > .n-inv   { left:81.25%; top:68.4%; }

@media (prefers-reduced-motion: no-preference) {
  .cmap-node { animation:cmapFloat 6s ease-in-out infinite; }
  .cmap > .n-appt  { animation-delay:.8s; }
  .cmap > .n-wait  { animation-delay:1.6s; }
  .cmap > .n-chart { animation-delay:2.4s; }
  .cmap > .n-team  { animation-delay:3.2s; }
  .cmap > .n-inv   { animation-delay:4s; }
}
@keyframes cmapFloat {
  0%,100% { transform:translate(-50%,-50%); }
  50%     { transform:translate(-50%,calc(-50% - 6px)); }
}

/* ─ Premium hub map layer: orbit rings · hub waves · junction ports · label pills ─ */

/* Rotating light ring hugging the hub sphere */
.cmap-hub-core::before {
  content:''; position:absolute; inset:-12px; border-radius:50%; z-index:0;
  background:conic-gradient(from 0deg,
    transparent 4%, rgba(129,140,248,.7) 14%, transparent 32%,
    transparent 50%, rgba(139,92,246,.55) 64%, transparent 84%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 1px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 1px));
  pointer-events:none;
}

/* Expanding pulse waves radiating from the hub */
.cmap-hub::before, .cmap-hub::after {
  content:''; position:absolute; inset:-10px; border-radius:50%;
  border:1px solid rgba(129,140,248,.42);
  opacity:0; pointer-events:none;
}

/* Junction ports glow softly where beams meet the orbs */
.cmap-junctions circle { opacity:.55; }

/* Desktop labels become glass pills with an accent dot */
.cmap-node .cmap-label {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:999px;
  background:linear-gradient(180deg, rgba(21,28,48,.94), rgba(9,13,26,.92));
  border:1px solid color-mix(in srgb, var(--ac, #818CF8) 34%, rgba(148,163,184,.16));
  box-shadow:0 12px 28px rgba(2,6,18,.5),
             inset 0 1px 0 rgba(255,255,255,.09),
             0 0 26px -10px var(--ac, transparent);
  font-size:.88rem;
}
.cmap-node .cmap-label::before {
  content:''; width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:var(--ac, #818CF8);
  box-shadow:0 0 10px var(--ac, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .cmap-orbit {
    transform-box:fill-box; transform-origin:center;
    animation:cmapSpin 90s linear infinite;
  }
  .cmap-orbit-far { animation-duration:140s; animation-direction:reverse; }

  .cmap-hub-core::before { animation:cmapSpin 10s linear infinite; }
  .cmap-hub::before { animation:cmapWave 4.6s cubic-bezier(.22,1,.36,1) infinite; }
  .cmap-hub::after  { animation:cmapWave 4.6s cubic-bezier(.22,1,.36,1) 2.3s infinite; }

  .cmap-junctions circle {
    transform-box:fill-box; transform-origin:center;
    animation:cmapJunction 2.8s ease-in-out infinite;
  }
  .cmap-junctions circle:nth-child(2) { animation-delay:.4s; }
  .cmap-junctions circle:nth-child(3) { animation-delay:.8s; }
  .cmap-junctions circle:nth-child(4) { animation-delay:1.2s; }
  .cmap-junctions circle:nth-child(5) { animation-delay:1.6s; }
  .cmap-junctions circle:nth-child(6) { animation-delay:2s; }
}

@keyframes cmapSpin { to { transform:rotate(360deg); } }
@keyframes cmapJunction {
  0%,100% { opacity:.5; transform:scale(1); }
  50%     { opacity:1;  transform:scale(1.5); }
}
@keyframes cmapWave {
  0%      { transform:scale(.92); opacity:.6; }
  75%,100% { transform:scale(1.65); opacity:0; }
}

/* Mobile grid */
.cmap-mobile { display:none; flex-direction:column; align-items:center; gap:26px; max-width:440px; margin:0 auto; }
.cmap-hub-m { width:108px; height:108px; font-size:1rem; }
.cmap-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; width:100%; }
.cmap-tile {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-radius:16px;
  background:linear-gradient(160deg, rgba(30,41,59,.7), rgba(13,18,32,.85));
  border:1px solid rgba(148,163,184,.14);
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.cmap-tile .cmap-orb { width:46px; height:46px; border-radius:13px; }
.cmap-tile .cmap-orb svg { width:21px; height:21px; }
.cmap-tile .cmap-label { font-size:.8rem; }

@media (max-width:720px) {
  .cmap { display:none; }
  .cmap-mobile { display:flex; }
}
@media (max-width:380px) {
  .cmap-grid { grid-template-columns:1fr; }
}


/* Desktop network */
.flow-network {
  position:relative; width:640px; height:400px; margin:0 auto;
}
.flow-svg { position:absolute; inset:0; width:100%; height:100%; }
.flow-hub {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:94px; height:94px; border-radius:50%;
  background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(139,92,246,.18));
  border:1px solid rgba(139,92,246,.4);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  z-index:2;
  box-shadow:0 0 40px rgba(139,92,246,.2), 0 0 80px rgba(139,92,246,.08);
}
.hub-mark {
  width:26px; height:26px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  border-radius:7px;
}
.flow-hub span { font-size:.65rem; font-weight:800; color:var(--text-hi); }

.flow-node {
  position:absolute; display:flex; flex-direction:column;
  align-items:center; gap:6px; z-index:2;
}
.flow-node span { font-size:.7rem; font-weight:600; color:var(--text-lo); text-align:center; }
.fn-ico {
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; border:1px solid rgba(255,255,255,.1);
}
.fn-wa     { background:rgba(37,211,102,.12); }
.fn-blue   { background:rgba(59,130,246,.12); }
.fn-green  { background:rgba(34,197,94,.12); }
.fn-purple { background:rgba(139,92,246,.12); }
.fn-teal   { background:rgba(20,184,166,.12); }
.fn-amber  { background:rgba(245,158,11,.12); }

/* node positions (physical CSS – RTL-agnostic) */
.fn-top    { top:0;    left:50%; transform:translateX(-50%); }
.fn-tr     { top:10%;  right:3%; }
.fn-br     { bottom:10%; right:3%; }
.fn-bottom { bottom:1%;  left:50%; transform:translateX(-50%); }
.fn-bl     { bottom:10%; left:3%; }
.fn-tl     { top:10%;   left:3%; }

/* Mobile vertical flow */
.flow-vertical { display:none; flex-direction:column; align-items:center; max-width:300px; margin:0 auto; }
.fv-item {
  display:flex; align-items:flex-start; gap:14px;
  position:relative; padding:10px 0; flex-direction:row-reverse;
}
.fv-dot {
  width:12px; height:12px; border-radius:50%; flex-shrink:0;
  background:var(--primary); border:2px solid rgba(59,130,246,.35);
  position:relative; z-index:1; margin-top:4px;
}
.fv-dot-end { background:var(--secondary); border-color:rgba(139,92,246,.35); }
.fv-line {
  position:absolute; left:5px; top:22px;
  width:2px; height:calc(100% + 0px);
  background:linear-gradient(to bottom,var(--primary),var(--secondary));
  opacity:.25;
}
.fv-last .fv-line { display:none; }
.fv-item span { font-size:.9rem; color:var(--text-lo); font-weight:500; line-height:1.5; }

/* 12 ─ BUSINESS IMPACT (RESULTS) */
.section-results {
  position:relative; overflow:hidden; padding:120px 0;
  --glow-x:78%; --glow-y:45%; --glow-x2:22%; --glow-y2:55%;
  background: transparent;
}
.section-results::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:none;
  -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
          mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
}
.section-results .container { position:relative; z-index:2; }

.results-heading { max-width:820px; margin:0 auto 60px; text-align:center; }
.section-results .section-badge {
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:18px; padding:8px 16px; border-radius:999px;
  color:#C4B5FD; font-size:.84rem; font-weight:700;
  background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.26);
  box-shadow:0 0 40px rgba(139,92,246,.14);
}
.results-heading h2 {
  color:var(--text-hi); font-size:clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight:900; line-height:1.18; letter-spacing:-.03em; margin:0 0 16px;
  text-shadow:0 0 50px rgba(139,92,246,.16);
}
.results-heading p { max-width:720px; margin:0 auto; color:#D0DAEA; font-size:1.05rem; line-height:1.9; }

.results-layout {
  display:grid; grid-template-columns:.88fr 1.12fr; gap:34px;
  align-items:stretch; max-width:1120px; margin:0 auto;
}

.results-dashboard {
  position:relative; overflow:hidden; border-radius:30px; padding:28px;
  background:
    radial-gradient(circle at 20% 0%, rgba(59,130,246,.16), transparent 38%),
    linear-gradient(180deg, rgba(15,23,42,.92), rgba(8,13,28,.96));
  border:1px solid rgba(148,163,184,.17);
  box-shadow:0 34px 110px rgba(0,0,0,.38), 0 0 90px rgba(59,130,246,.10), inset 0 1px 0 rgba(255,255,255,.06);
}
.results-dashboard::before {
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background:
    radial-gradient(circle at 80% 18%, rgba(139,92,246,.14), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 24%);
}
.results-dashboard > * { position:relative; z-index:1; }
.dashboard-title {
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  margin-bottom:22px; color:var(--text-hi); font-weight:900; font-size:1.05rem;
}
.dashboard-badge {
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px;
  color:#86EFAC; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.2);
  font-size:.78rem; font-weight:800;
}
.live-dot { width:7px; height:7px; border-radius:50%; background:#22C55E; box-shadow:0 0 10px rgba(34,197,94,.8); animation:pulse 2s infinite; }
.dashboard-metrics { display:grid; gap:12px; }
.metric-row {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 16px; border-radius:18px;
  background:rgba(15,23,42,.72); border:1px solid rgba(148,163,184,.12);
}
.metric-label { color:#D0DAEA; font-size:.92rem; }
.metric-value { color:var(--text-hi); font-weight:900; direction:ltr; white-space:nowrap; }
.metric-value.success { color:#86EFAC; }
.metric-value.warning { color:#FDE68A; }
.metric-value.info    { color:#93C5FD; }

.dashboard-progress { margin-top:20px; }
.progress-label { display:flex; justify-content:space-between; color:#CBD5E1; font-size:.88rem; margin-bottom:9px; }
.progress-label strong { color:var(--text-hi); }
.progress-track {
  height:9px; border-radius:999px; overflow:hidden;
  background:rgba(15,23,42,.85); border:1px solid rgba(148,163,184,.12);
}
.progress-fill {
  display:block; height:100%; width:83%; border-radius:inherit;
  background:linear-gradient(90deg, #3B82F6, #8B5CF6);
  box-shadow:0 0 16px rgba(59,130,246,.38);
}
.automation-impact {
  margin-top:22px; padding:16px; border-radius:18px;
  background:rgba(2,6,23,.35); border:1px solid rgba(148,163,184,.10);
}
.impact-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px; color:#CBD5E1; font-size:.9rem;
}
.impact-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.impact-stat {
  min-height:82px; padding:14px 12px; border-radius:16px;
  display:grid; align-content:center; gap:6px; text-align:center;
  background:rgba(15,23,42,.68); border:1px solid rgba(148,163,184,.11);
}
.impact-stat strong { font-size:1.35rem; line-height:1; font-weight:900; color:var(--text-hi); }
.impact-stat span { color:#CBD5E1; font-size:.82rem; line-height:1.5; }
.impact-stat.success strong { color:#86EFAC; }
.impact-stat.info strong { color:#93C5FD; }
.impact-stat.warning strong { color:#FDE68A; }

.result-cards { display:grid; grid-template-columns:1fr; gap:16px; }
.result-card {
  position:relative; overflow:hidden; min-height:116px;
  border-radius:24px; padding:20px 22px;
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center;
  background:linear-gradient(180deg, rgba(15,23,42,.86), rgba(8,13,28,.94));
  border:1px solid rgba(148,163,184,.15);
  box-shadow:0 24px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.result-card::before {
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background:
    radial-gradient(circle at 16% 0%, rgba(59,130,246,.12), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(139,92,246,.10), transparent 34%);
}
.result-card > * { position:relative; z-index:1; }
.result-icon {
  width:54px; height:54px; display:grid; place-items:center; border-radius:18px;
  background:linear-gradient(135deg, rgba(59,130,246,.2), rgba(139,92,246,.18));
  border:1px solid rgba(148,163,184,.16); color:var(--text-hi); font-size:1.35rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.result-content { display:grid; gap:8px; }
.result-topline { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.result-card h3 { margin:0; color:var(--text-hi); font-size:1.12rem; line-height:1.35; }
.result-card p  { margin:0; color:#D0DAEA; line-height:1.75; font-size:.95rem; }
.result-badge {
  flex:0 0 auto; display:inline-flex; padding:6px 10px; border-radius:999px;
  color:#C4B5FD; background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.2);
  font-size:.76rem; font-weight:800; white-space:nowrap;
}

@media (hover:hover) {
  .result-card, .results-dashboard { transition:transform .32s ease, border-color .32s ease, box-shadow .32s ease; }
  .result-card:hover {
    transform:translateY(-4px); border-color:rgba(139,92,246,.28);
    box-shadow:0 30px 95px rgba(0,0,0,.34), 0 0 65px rgba(59,130,246,.08);
  }
  .results-dashboard:hover { transform:translateY(-4px); border-color:rgba(59,130,246,.28); }
}

@media (max-width:992px) {
  .results-layout { grid-template-columns:1fr; max-width:760px; }
  .results-dashboard { order:1; }
  .result-cards { order:2; }
}
@media (max-width:768px) {
  .section-results { padding:84px 0; }
  .results-heading { margin-bottom:42px; }
  .results-heading h2 { font-size:clamp(1.9rem, 8vw, 2.7rem); }
  .results-dashboard { border-radius:24px; padding:20px; }
  .result-card { grid-template-columns:1fr; gap:14px; padding:20px; }
  .result-topline { align-items:flex-start; flex-direction:column; }
  .weekly-bars { min-height:64px; }
}

@media (max-width:520px) {
  .impact-stats { grid-template-columns:1fr; }
  .impact-stat { min-height:68px; }
}

/* 13 ─ PRODUCT PREVIEW SHOWCASE */
.section-preview {
  position:relative; overflow:hidden; padding:105px 0;
  --glow-x:50%; --glow-y:20%; --glow-x2:20%; --glow-y2:72%;
  background: transparent;
}
.section-preview::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:none;
  -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
          mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
}
.section-preview .container { position:relative; z-index:2; }

.preview-heading { max-width:820px; margin:0 auto 46px; text-align:center; }
.section-preview .section-badge {
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:18px; padding:8px 16px; border-radius:999px;
  color:#C4B5FD; font-size:.84rem; font-weight:700;
  background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.26);
  box-shadow:0 0 40px rgba(139,92,246,.14);
}
.preview-heading h2 {
  margin:0 0 16px; color:var(--text-hi);
  font-size:clamp(1.9rem, 3.6vw, 2.8rem); font-weight:900;
  line-height:1.18; letter-spacing:-.03em; text-shadow:0 0 50px rgba(139,92,246,.16);
}
.preview-heading p { margin:0 auto; max-width:700px; color:#CBD5E1; font-size:1.05rem; line-height:1.9; }

.preview-browser {
  position:relative; overflow:hidden; max-width:1220px; margin:0 auto; border-radius:32px;
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(8,13,28,.96));
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 42px 130px rgba(0,0,0,.44), 0 0 110px rgba(59,130,246,.12), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}
.preview-browser::before {
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background:
    radial-gradient(circle at 20% 0%, rgba(59,130,246,.14), transparent 36%),
    radial-gradient(circle at 86% 8%, rgba(139,92,246,.14), transparent 34%);
}
.preview-browser > * { position:relative; z-index:1; }
.preview-topbar {
  min-height:68px; display:flex; align-items:center; gap:18px; padding:12px 18px;
  border-bottom:1px solid rgba(148,163,184,.12); background:rgba(2,6,23,.34);
}
.browser-dots { display:flex; gap:6px; flex:0 0 auto; }
.browser-dots span { width:10px; height:10px; border-radius:999px; background:rgba(148,163,184,.42); }
.preview-tabs { flex:1; display:flex; justify-content:flex-end; gap:8px; overflow-x:auto; scrollbar-width:none; }
.preview-tabs::-webkit-scrollbar { display:none; }
.preview-tab {
  flex:0 0 auto; border:1px solid transparent; cursor:pointer; padding:10px 16px; border-radius:12px;
  color:#94A3B8; background:transparent; font-weight:800; font-family:inherit;
  transition:color .25s ease, background .25s ease, box-shadow .25s ease;
}
.preview-tab.is-active {
  color:#FFFFFF;
  background:
    radial-gradient(circle at 20% 0%, rgba(59,130,246,.34), transparent 44%),
    linear-gradient(135deg, rgba(59,130,246,.22), rgba(139,92,246,.18));
  border:1px solid rgba(96,165,250,.22);
  box-shadow:0 0 44px rgba(59,130,246,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
@media (hover:hover) { .preview-tab:hover { color:var(--text-hi); background:rgba(15,23,42,.72); } }

.preview-stage { min-height:560px; padding:38px; }
.preview-panel { display:none; animation:previewFade .28s ease both; }
.preview-panel.is-active { display:block; }
@keyframes previewFade {
  from { opacity:0; transform:translateY(8px) scale(.99); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

.preview-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:stretch; }
.preview-card {
  border-radius:26px; padding:24px;
  background:linear-gradient(180deg, rgba(15,23,42,.88), rgba(8,13,28,.94));
  border:1px solid rgba(148,163,184,.17);
  box-shadow:0 24px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.preview-card-title {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:18px; color:var(--text-hi); font-weight:900; font-size:.98rem;
}
.preview-row {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px; border-radius:16px; margin-bottom:12px;
  background:rgba(15,23,42,.80); border:1px solid rgba(148,163,184,.14);
  color:#D0DAEA; font-size:.92rem;
}
.preview-row strong { color:var(--text-hi); }
.pr-id { display:flex; align-items:center; gap:10px; }
.pr-av {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, rgba(59,130,246,.5), rgba(139,92,246,.5));
  display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:800; color:#fff;
}
.pr-muted { color:#94A3B8; font-size:.84rem; }
.preview-foot { margin:16px 0 0; text-align:center; font-size:.82rem; color:#94A3B8; }
.preview-desc { margin:0 0 14px; font-size:.85rem; color:#94A3B8; line-height:1.6; }
.preview-slot {
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:16px; margin-bottom:12px;
  background:rgba(245,158,11,.08); border:1px dashed rgba(245,158,11,.3); color:#FDE68A;
}
.preview-slot strong { font-size:1.05rem; font-weight:900; color:#FDE68A; }
.preview-slot span { font-size:.84rem; opacity:.9; }
.preview-status {
  display:inline-flex; padding:6px 11px; border-radius:999px; white-space:nowrap;
  color:#86EFAC; background:rgba(34,197,94,.13); border:1px solid rgba(34,197,94,.2);
  font-size:.78rem; font-weight:800;
}
.preview-status.warn { color:#FDE68A; background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.2); }
.preview-status.info { color:#93C5FD; background:rgba(59,130,246,.13); border-color:rgba(59,130,246,.2); }

.preview-side-panel {
  border-radius:26px; padding:24px;
  background:
    radial-gradient(circle at 20% 0%, rgba(59,130,246,.14), transparent 36%),
    rgba(15,23,42,.72);
  border:1px solid rgba(148,163,184,.17);
}
.psp-title { color:var(--text-hi); font-weight:900; font-size:.92rem; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(148,163,184,.12); }
.psp-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid rgba(148,163,184,.07); color:#94A3B8; font-size:.9rem; }
.psp-row:last-child { border-bottom:none; }
.psp-row strong { color:var(--text-hi); }
.ltr { direction:ltr; }
.rv-green { color:#86EFAC; }
.psp-chat { margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.psp-bubble { border-radius:12px; padding:9px 13px; font-size:.84rem; line-height:1.45; max-width:88%; }
.psp-bubble.out { background:rgba(59,130,246,.15); color:#BFDBFE; align-self:flex-end; }
.psp-bubble.in  { background:rgba(34,197,94,.12);  color:#86EFAC; align-self:flex-start; }

.automation-moment {
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:20px; padding:12px 14px; border-radius:999px;
  background:rgba(15,23,42,.72); border:1px solid rgba(148,163,184,.13);
  color:#D0DAEA; font-size:.88rem;
}
.automation-moment span { display:inline-flex; align-items:center; white-space:nowrap; }
.automation-moment i {
  width:28px; height:1px; display:inline-block; flex-shrink:0;
  background:linear-gradient(90deg, #3B82F6, #8B5CF6);
  box-shadow:0 0 14px rgba(59,130,246,.35);
}
.preview-caption {
  margin:18px auto 0; display:flex; align-items:center; justify-content:center; gap:10px;
  color:#D0DAEA; font-size:.92rem; text-align:center;
}
.preview-caption span {
  width:8px; height:8px; border-radius:999px; flex-shrink:0;
  background:#22C55E; box-shadow:0 0 18px rgba(34,197,94,.65);
}

.tooth-chart-lg .t { width:19px; height:19px; border-radius:4px; font-size:7.5px; }

@media (hover:hover) {
  .preview-card, .preview-side-panel { transition:border-color .3s ease; }
}
@media (max-width:992px) {
  .preview-browser { max-width:760px; }
  .preview-grid { grid-template-columns:1fr; }
  .preview-stage { min-height:auto; }
}
@media (max-width:768px) {
  .section-preview { padding:78px 0; }
  .preview-heading { margin-bottom:42px; }
  .preview-heading h2 { font-size:clamp(1.9rem, 8vw, 2.7rem); }
  .preview-topbar { align-items:flex-start; flex-direction:column; }
  .preview-tabs { width:100%; justify-content:flex-start; }
  .preview-browser { max-width:100%; border-radius:24px; }
  .preview-stage { min-height:auto; padding:18px; }
  .preview-card, .preview-side-panel { border-radius:20px; padding:18px; }
  .preview-row { align-items:flex-start; flex-direction:column; }
  .automation-moment { flex-wrap:wrap; border-radius:18px; }
  .preview-caption { padding-inline:18px; line-height:1.8; }
}

/* ─ WHATSAPP PANEL WITH SCREENSHOTS ─ */
.wa-panel {
  display:flex; flex-direction:column; gap:16px;
  padding:18px; height:100%; background:#0D1117; border-radius:0 0 16px 16px;
}
.wa-panel-header { display:flex; flex-direction:column; gap:6px; }
.wa-panel-title {
  display:flex; align-items:center; gap:10px; flex-direction:row-reverse; justify-content:flex-end;
  font-size:.95rem; font-weight:700; color:#F1F5F9;
}
.wa-panel-desc { font-size:.84rem; color:#94A3B8; line-height:1.6; margin:0; }
.wa-screenshots {
  display:grid; grid-template-columns:1fr 1fr; gap:14px; flex:1;
}
.wa-screenshot-wrap {
  display:flex; flex-direction:column; gap:8px;
}
.wa-screenshot-label {
  font-size:.78rem; font-weight:600; color:#CBD5E1; text-align:center;
  padding:5px 10px; border-radius:8px;
  background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.2);
}
.wa-screenshot-img {
  width:100%; border-radius:12px; display:block;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}
@media (max-width:600px) {
  .wa-screenshots { grid-template-columns:1fr; }
}

/* ─ BOOKING SCREENSHOTS LAYOUT ─ */
.booking-screenshots {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}
.booking-img-tall {
  max-height: 380px;
  width: auto;
  max-width: 220px;
  display: block;
  border-radius: 16px;
  object-fit: contain;
}
.booking-img-wide {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
@media (max-width: 600px) {
  .booking-screenshots { grid-template-columns: 1fr; }
  .booking-img-tall { max-width: 100%; max-height: 280px; }
}

/* ─ BOOKING PANEL MOCKUP ─ */
.bk-panel {
  display:flex; flex-direction:column; gap:14px;
  padding:16px 18px 14px; height:100%;
  background:#0D1117; border-radius:0 0 16px 16px; overflow:hidden;
}
.bk-header { display:flex; flex-direction:column; gap:5px; }
.bk-header-title {
  display:flex; align-items:center; gap:8px; flex-direction:row-reverse; justify-content:flex-end;
  font-size:.92rem; font-weight:700; color:#F1F5F9;
}
.bk-desc { font-size:.82rem; color:#94A3B8; line-height:1.55; margin:0; }

.bk-content {
  display:grid; grid-template-columns:1fr 220px; gap:14px; flex:1; min-height:0;
}
.bk-left { display:flex; flex-direction:column; gap:10px; min-height:0; }

/* Table */
.bk-table-wrap {
  background:#111827; border-radius:12px; padding:12px;
  border:1px solid rgba(255,255,255,.07);
}
.bk-table-title { font-size:.78rem; font-weight:600; color:#94A3B8; margin-bottom:10px; }
.bk-table { width:100%; border-collapse:collapse; font-size:.75rem; }
.bk-table thead tr { border-bottom:1px solid rgba(255,255,255,.07); }
.bk-table th { padding:6px 8px; text-align:right; color:#475569; font-weight:600; font-size:.7rem; white-space:nowrap; }
.bk-table td { padding:8px 8px; vertical-align:middle; border-bottom:1px solid rgba(255,255,255,.04); }
.bk-row-active td { background:rgba(139,92,246,.05); }
.bk-patient-cell { display:flex; align-items:center; gap:7px; }
.bk-avatar {
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  background:linear-gradient(135deg,#4F46E5,#8B5CF6); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:700;
}
.bk-av2 { background:linear-gradient(135deg,#0E7490,#3B82F6); }
.bk-patient-cell strong { display:block; color:#E2E8F0; font-size:.78rem; }
.bk-patient-cell small  { color:#475569; font-size:.68rem; }
.bk-ltr { direction:ltr; text-align:right; }
.bk-table .bk-ltr strong { display:block; color:#CBD5E1; font-size:.76rem; }
.bk-table .bk-ltr small  { color:#475569; font-size:.68rem; }
.bk-branch { color:#475569; font-size:.68rem; }
.bk-ref { color:#64748B; font-size:.7rem; }
.bk-badge-waiting {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:20px; font-size:.7rem; font-weight:600; white-space:nowrap;
  background:rgba(245,158,11,.12); color:#FCD34D; border:1px solid rgba(245,158,11,.25);
}
.bk-actions { display:flex; gap:4px; }
.bk-act {
  width:24px; height:24px; border-radius:6px; border:none; cursor:pointer;
  font-size:.75rem; display:flex; align-items:center; justify-content:center;
}
.bk-act-ok   { background:rgba(34,197,94,.15);   color:#4ADE80; }
.bk-act-edit { background:rgba(59,130,246,.15);  color:#60A5FA; }
.bk-act-del  { background:rgba(239,68,68,.15);   color:#F87171; }

/* Result card */
.bk-result-card {
  padding:12px 14px; border-radius:12px;
  background:rgba(59,130,246,.05);
  border:1px solid rgba(59,130,246,.18);
  box-shadow:0 0 18px rgba(59,130,246,.08);
}
.bk-result-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.bk-result-title  { font-size:.8rem; font-weight:700; color:#CBD5E1; }
.bk-result-badge  {
  font-size:.7rem; font-weight:600; padding:2px 9px; border-radius:20px;
  background:rgba(34,197,94,.15); color:#4ADE80; border:1px solid rgba(34,197,94,.25);
}
.bk-result-items { display:flex; flex-direction:column; gap:7px; }
.bk-result-item  { display:flex; align-items:center; gap:8px; font-size:.78rem; color:#94A3B8; }
.bk-ri-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.bk-dot-green  { background:#4ADE80; box-shadow:0 0 6px rgba(74,222,128,.5); }
.bk-dot-yellow { background:#FCD34D; box-shadow:0 0 6px rgba(252,211,77,.5); }
.bk-dot-blue   { background:#60A5FA; box-shadow:0 0 6px rgba(96,165,250,.5); }

/* Patient card */
.bk-patient-card {
  background:linear-gradient(160deg,#1E1B4B 0%,#1a1035 100%);
  border-radius:14px; border:1px solid rgba(139,92,246,.25);
  padding:16px 14px; display:flex; flex-direction:column; gap:12px;
}
.bk-patient-top  { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.bk-send-icon {
  width:40px; height:40px; border-radius:12px;
  background:rgba(139,92,246,.25); color:#A78BFA;
  display:flex; align-items:center; justify-content:center;
}
.bk-patient-title   { font-size:.88rem; font-weight:700; color:#F1F5F9; line-height:1.3; }
.bk-patient-subtitle { font-size:.72rem; color:#94A3B8; line-height:1.5; }

.bk-patient-fields { display:flex; flex-direction:column; gap:0; }
.bk-field {
  padding:7px 0; border-bottom:1px solid rgba(255,255,255,.05);
  display:flex; flex-direction:column; gap:3px;
}
.bk-field:last-child { border-bottom:none; }
.bk-field-label { font-size:.68rem; color:#475569; }
.bk-field-row   { display:flex; align-items:center; gap:6px; font-size:.78rem; }
.bk-field-icon  { font-size:.78rem; }
.bk-field-row strong { color:#E2E8F0; font-size:.78rem; }
.bk-status-pending {
  font-size:.74rem; color:#FCD34D; font-weight:600;
  background:rgba(245,158,11,.1); padding:2px 8px; border-radius:6px;
}

.bk-patient-btn {
  width:100%; padding:9px; border-radius:10px; border:none; cursor:pointer;
  background:linear-gradient(135deg,#4F46E5,#7C3AED);
  color:#fff; font-size:.78rem; font-weight:700; font-family:inherit;
  transition:opacity .2s;
}
.bk-patient-btn:hover { opacity:.85; }

@media (max-width:860px) {
  .bk-content { grid-template-columns:1fr; }
  .bk-patient-card { order:-1; }
  .bk-table th:nth-child(5),.bk-table td:nth-child(5) { display:none; }
}
@media (max-width:560px) {
  .bk-table th:nth-child(3),.bk-table td:nth-child(3),
  .bk-table th:nth-child(2),.bk-table td:nth-child(2) { display:none; }
}

/* ─ WAITLIST MOCKUP ─ */
.wl-mock {
  display:flex; flex-direction:column; height:100%;
  background:#0D1117; border-radius:0 0 16px 16px; overflow:hidden;
  font-size:.82rem;
}
.wl-header {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px;
  background:linear-gradient(135deg,#4F46E5 0%,#7C3AED 60%,#8B5CF6 100%);
  color:#fff;
}
.wl-header-right {
  display:flex; align-items:center; gap:8px;
  font-size:.95rem; font-weight:700;
}
.wl-header-stats { display:flex; gap:8px; }
.wl-stat {
  display:flex; flex-direction:column; align-items:center;
  padding:5px 14px; border-radius:10px;
  background:rgba(255,255,255,.15); backdrop-filter:blur(4px);
  line-height:1.2;
}
.wl-stat strong { font-size:1.1rem; font-weight:800; }
.wl-stat small  { font-size:.72rem; opacity:.85; }
.wl-add-btn {
  display:flex; align-items:center; gap:5px;
  padding:7px 14px; border-radius:8px; border:none; cursor:pointer;
  background:rgba(255,255,255,.18); color:#fff;
  font-size:.8rem; font-weight:600; font-family:inherit;
  transition:background .2s;
}
.wl-add-btn:hover { background:rgba(255,255,255,.28); }

.wl-subtabs {
  display:flex; gap:0;
  background:#111827; border-bottom:1px solid rgba(255,255,255,.07);
}
.wl-subtab {
  display:flex; align-items:center; gap:7px;
  padding:11px 22px; cursor:pointer; font-size:.82rem; color:#94A3B8;
  border-bottom:2px solid transparent; transition:color .18s,border-color .18s;
}
.wl-subtab-active {
  color:#fff; background:#1E1B4B;
  border-bottom:2px solid #8B5CF6;
}

.wl-filters {
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  padding:10px 14px; background:#111827; border-bottom:1px solid rgba(255,255,255,.06);
}
.wl-search {
  display:flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:7px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  color:#64748B; font-size:.78rem; flex:1; min-width:120px;
}
.wl-select {
  padding:5px 10px; border-radius:7px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  color:#94A3B8; font-size:.76rem; white-space:nowrap; cursor:pointer;
}
.wl-filter-btn {
  padding:5px 12px; border-radius:7px;
  background:rgba(139,92,246,.18); border:1px solid rgba(139,92,246,.35);
  color:#A78BFA; font-size:.76rem; font-weight:600; cursor:pointer;
}
.wl-reset-btn {
  padding:5px 11px; border-radius:7px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  color:#64748B; font-size:.76rem; cursor:pointer;
}
.wl-showall {
  display:flex; align-items:center; gap:5px;
  color:#64748B; font-size:.75rem; cursor:pointer; white-space:nowrap;
}

.wl-table-wrap { overflow-x:auto; overflow-y:auto; flex:1; }
.wl-table {
  width:100%; border-collapse:collapse;
  font-size:.79rem; color:#CBD5E1;
}
.wl-table thead tr {
  background:#0F172A; border-bottom:1px solid rgba(255,255,255,.08);
}
.wl-table th {
  padding:10px 12px; text-align:right; font-weight:600;
  color:#64748B; font-size:.73rem; white-space:nowrap;
}
.wl-table tbody tr {
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .15s;
}
.wl-table tbody tr:hover { background:rgba(139,92,246,.06); }
.wl-table td { padding:9px 12px; vertical-align:middle; }

.wl-patient strong { display:block; color:#F1F5F9; font-weight:600; font-size:.81rem; }
.wl-patient small  { color:#475569; font-size:.72rem; }
.wl-ltr { direction:ltr; text-align:right; font-size:.76rem; color:#94A3B8; }
.wl-muted { color:#475569; font-size:.74rem; white-space:nowrap; }

.wl-priority { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:20px; font-size:.73rem; font-weight:700; white-space:nowrap; }
.p-urgent { background:rgba(239,68,68,.15);  color:#FCA5A5; border:1px solid rgba(239,68,68,.25); }
.p-high   { background:rgba(245,158,11,.15); color:#FCD34D; border:1px solid rgba(245,158,11,.25); }
.p-normal { background:rgba(59,130,246,.15); color:#93C5FD; border:1px solid rgba(59,130,246,.25); }
.p-low    { background:rgba(100,116,139,.12);color:#94A3B8; border:1px solid rgba(100,116,139,.2); }

.wl-badge-waiting {
  display:inline-block; padding:3px 9px; border-radius:20px; font-size:.71rem; font-weight:600;
  background:rgba(139,92,246,.18); color:#A78BFA; border:1px solid rgba(139,92,246,.3);
}
.wl-days { display:flex; gap:3px; flex-wrap:wrap; }
.wl-day  { padding:2px 6px; border-radius:5px; font-size:.7rem; color:#A78BFA; background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.2); white-space:nowrap; }
.wl-view-btn {
  padding:5px 12px; border-radius:7px; border:1px solid rgba(59,130,246,.35);
  background:rgba(59,130,246,.1); color:#93C5FD; font-size:.75rem; font-weight:600;
  font-family:inherit; cursor:pointer; white-space:nowrap; transition:background .15s;
}
.wl-view-btn:hover { background:rgba(59,130,246,.22); }

@media (max-width:768px) {
  .wl-filters { gap:5px; }
  .wl-select,.wl-reset-btn,.wl-showall { display:none; }
  .wl-table th:nth-child(4),.wl-table td:nth-child(4),
  .wl-table th:nth-child(6),.wl-table td:nth-child(6),
  .wl-table th:nth-child(8),.wl-table td:nth-child(8) { display:none; }
}

/* ─ FINANCE DASHBOARD MOCKUP ─ */
.fin-dashboard {
  display:grid; grid-template-columns:1fr 260px; gap:14px;
  padding:18px; height:100%; background:#0D1117; border-radius:0 0 16px 16px;
}
.fin-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-content:start;
}
.fin-card {
  background:#111827; border-radius:14px; padding:16px 14px 14px;
  border:1px solid rgba(255,255,255,.07); position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:6px;
}
.fin-border-orange { border-top:3px solid #F59E0B; }
.fin-border-blue   { border-top:3px solid #3B82F6; }
.fin-border-green  { border-top:3px solid #22C55E; }
.fin-border-purple { border-top:3px solid #8B5CF6; }
.fin-border-red    { border-top:3px solid #EF4444; }

.fin-icon {
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; margin-bottom:4px;
}
.fin-icon-orange { background:rgba(245,158,11,.15); color:#F59E0B; }
.fin-icon-blue   { background:rgba(59,130,246,.15);  color:#60A5FA; }
.fin-icon-green  { background:rgba(34,197,94,.15);   color:#4ADE80; }
.fin-icon-gray   { background:rgba(100,116,139,.15); color:#94A3B8; }
.fin-icon-purple { background:rgba(139,92,246,.15);  color:#A78BFA; }
.fin-icon-red    { background:rgba(239,68,68,.15);   color:#F87171; }

.fin-value { font-size:1.35rem; font-weight:800; color:#F1F5F9; line-height:1; }
.fin-label { font-size:.75rem; color:#64748B; }

.fin-sub {
  display:flex; align-items:center; gap:4px;
  font-size:.72rem; margin-top:2px;
}
.fin-sub-orange { color:#F59E0B; }
.fin-sub-muted  { color:#64748B; }

.fin-sub-badge,.fin-badge-green {
  display:inline-flex; align-items:center;
  padding:2px 8px; border-radius:20px; font-size:.72rem; font-weight:700; margin-top:2px;
  background:rgba(34,197,94,.15); color:#4ADE80; border:1px solid rgba(34,197,94,.25);
}
.fin-progress {
  height:3px; background:rgba(255,255,255,.07); border-radius:99px; margin-top:6px;
}
.fin-progress-bar { height:100%; border-radius:99px; background:#8B5CF6; }

/* Net profit card */
.fin-profit-card {
  background:linear-gradient(145deg,#065F46 0%,#047857 50%,#059669 100%);
  border-radius:14px; padding:20px 18px;
  display:flex; flex-direction:column; gap:16px; justify-content:center;
}
.fin-profit-header {
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.fin-profit-title { font-size:.95rem; font-weight:700; color:#fff; }
.fin-profit-sub   { font-size:.72rem; color:rgba(255,255,255,.65); margin-top:3px; }
.fin-trophy {
  width:38px; height:38px; border-radius:10px;
  background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center;
  color:#fff; flex-shrink:0;
}
.fin-profit-amount {
  font-size:2rem; font-weight:900; color:#fff; line-height:1;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.fin-profit-currency { font-size:1rem; font-weight:600; opacity:.8; }
.fin-profit-meta { display:flex; flex-direction:column; gap:8px; }
.fin-meta-badge {
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 12px; border-radius:10px;
  background:rgba(0,0,0,.2); color:#fff; font-size:.85rem; font-weight:700;
}
.fin-meta-badge small { font-size:.72rem; font-weight:400; opacity:.8; }

@media (max-width:900px) {
  .fin-dashboard { grid-template-columns:1fr; }
  .fin-profit-card { order:-1; }
}
@media (max-width:600px) {
  .fin-grid { grid-template-columns:repeat(2,1fr); }
  .fin-value { font-size:1.1rem; }
}

/* ─ UNIFIED AUTOMATION PANELS ─ */
.auto-panel {
  display:flex; flex-direction:column; gap:14px;
  padding:18px; min-height:540px; height:100%;
  background:#0D1117; border-radius:0 0 16px 16px;
}
.auto-head { display:flex; flex-direction:column; gap:5px; }
.auto-head-title {
  display:flex; align-items:center; gap:9px; flex-direction:row-reverse; justify-content:flex-end;
  font-size:.95rem; font-weight:700; color:#F1F5F9;
}
.auto-head-desc { font-size:.82rem; color:#94A3B8; line-height:1.55; margin:0; }

.auto-body {
  display:grid; grid-template-columns:1fr 240px; gap:14px; flex:1; align-items:start;
}
.auto-main {
  background:#111827; border:1px solid rgba(255,255,255,.07); border-radius:14px;
  padding:15px; display:flex; flex-direction:column; gap:10px;
}
.auto-main-title {
  font-size:.82rem; font-weight:700; color:#CBD5E1;
  display:flex; align-items:center; justify-content:space-between; margin-bottom:2px;
}
.auto-sub { font-size:.76rem; color:#64748B; font-weight:600; margin-top:2px; }

/* Toggle rows */
.auto-toggle-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; border-radius:10px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  font-size:.8rem; color:#E2E8F0;
}
.auto-toggle {
  width:34px; height:19px; border-radius:99px; position:relative; flex-shrink:0;
  background:rgba(100,116,139,.4); transition:background .2s;
}
.auto-toggle::after {
  content:''; position:absolute; top:2px; right:2px;
  width:15px; height:15px; border-radius:50%; background:#fff; transition:.2s;
}
.auto-toggle.on { background:linear-gradient(135deg,#22C55E,#16A34A); }
.auto-toggle.on::after { right:auto; left:2px; }

/* Chat bubbles (reminder tab) */
.auto-chat { display:flex; flex-direction:column; gap:7px; margin-top:4px; }
.auto-bubble {
  max-width:85%; padding:8px 12px; border-radius:14px; font-size:.78rem; line-height:1.5;
}
.auto-bubble.out { align-self:flex-start; background:rgba(255,255,255,.05); color:#CBD5E1; border-bottom-right-radius:4px; }
.auto-bubble.in  { align-self:flex-end; background:linear-gradient(135deg,#16A34A,#22C55E); color:#fff; border-bottom-left-radius:4px; }

/* Result card */
.auto-result {
  min-height:200px; padding:20px; border-radius:20px;
  background:
    radial-gradient(circle at 20% 0%, rgba(59,130,246,.12), transparent 38%),
    linear-gradient(180deg, rgba(15,23,42,.86), rgba(8,13,28,.94));
  border:1px solid rgba(148,163,184,.15);
  box-shadow:0 22px 60px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
  display:flex; flex-direction:column; gap:13px;
}
.auto-result-chat { margin-top:auto; padding-top:4px; }
.auto-result-chat .auto-bubble { font-size:.74rem; padding:7px 11px; }

/* Invoice outcome block */
.auto-outcome {
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
}
.auto-outcome-av {
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,#F59E0B,#EA580C); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700;
}
.auto-outcome-info { flex:1; display:flex; flex-direction:column; gap:2px; }
.auto-outcome-info strong { color:#F1F5F9; font-size:.82rem; }
.auto-outcome-amount { color:#FCD34D; font-size:.78rem; font-weight:700; }
.auto-outcome-tag {
  font-size:.66rem; color:#4ADE80; white-space:nowrap;
  background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.22);
  padding:3px 8px; border-radius:20px;
}
.auto-result-head { display:flex; align-items:center; justify-content:space-between; }
.auto-result-title { font-size:.82rem; font-weight:700; color:#CBD5E1; }
.auto-result-badge {
  font-size:.7rem; font-weight:600; padding:3px 10px; border-radius:20px;
  background:rgba(34,197,94,.15); color:#4ADE80; border:1px solid rgba(34,197,94,.25); white-space:nowrap;
}
.auto-result-list { display:flex; flex-direction:column; gap:10px; }
.auto-result-item { display:flex; align-items:center; gap:9px; font-size:.8rem; color:#CBD5E1; line-height:1.4; }
.auto-rdot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.auto-rdot.green  { background:#4ADE80; box-shadow:0 0 6px rgba(74,222,128,.5); }
.auto-rdot.yellow { background:#FCD34D; box-shadow:0 0 6px rgba(252,211,77,.5); }
.auto-rdot.blue   { background:#60A5FA; box-shadow:0 0 6px rgba(96,165,250,.5); }

/* Booking request card */
.bkr-patient { display:flex; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.06); }
.bkr-av {
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,#4F46E5,#8B5CF6); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700;
}
.bkr-av.sm { width:28px; height:28px; border-radius:8px; font-size:.75rem; }
.bkr-av.av2 { background:linear-gradient(135deg,#0E7490,#3B82F6); }
.bkr-av.av3 { background:linear-gradient(135deg,#9333EA,#C026D3); }
.bkr-pinfo { flex:1; }
.bkr-pinfo strong { display:block; color:#F1F5F9; font-size:.85rem; }
.bkr-pinfo small  { color:#475569; font-size:.72rem; direction:ltr; }
.bkr-new { font-size:.68rem; color:#5EEAD4; background:rgba(20,184,166,.12); border:1px solid rgba(20,184,166,.25); padding:3px 8px; border-radius:20px; }
.bkr-rows { display:flex; flex-direction:column; gap:0; }
.bkr-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:.8rem; color:#94A3B8; }
.bkr-row:last-child { border-bottom:none; }
.bkr-row strong { color:#E2E8F0; font-size:.79rem; }
.bkr-row .ltr { direction:ltr; }
.bkr-actions { display:flex; gap:8px; margin-top:4px; }
.bkr-btn {
  flex:1; padding:8px; border-radius:9px; border:none; cursor:pointer;
  font-size:.78rem; font-weight:600; font-family:inherit; transition:opacity .2s;
}
.bkr-btn.full { flex:none; width:100%; margin-top:4px; }
.bkr-btn:hover { opacity:.85; }
.bkr-btn.ok   { background:linear-gradient(135deg,#16A34A,#22C55E); color:#fff; }
.bkr-btn.offer {
  background:linear-gradient(135deg, rgba(34,197,94,.82), rgba(16,185,129,.78));
  box-shadow:0 0 26px rgba(34,197,94,.15);
  border:1px solid rgba(134,239,172,.22); color:#fff;
}
.bkr-btn.edit { background:rgba(59,130,246,.15); color:#60A5FA; border:1px solid rgba(59,130,246,.25); }
.bkr-btn.del  { background:rgba(239,68,68,.12); color:#F87171; border:1px solid rgba(239,68,68,.2); }

.auto-badge-wait {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:20px; font-size:.7rem; font-weight:600; white-space:nowrap;
  background:rgba(245,158,11,.12); color:#FCD34D; border:1px solid rgba(245,158,11,.25);
}

/* Vacancy card (waitlist) */
.vac-card {
  background:rgba(245,158,11,.06); border:1px solid rgba(245,158,11,.2);
  border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:6px;
}
.vac-head { display:flex; align-items:center; justify-content:space-between; font-size:.82rem; font-weight:700; color:#FCD34D; }
.vac-time { font-size:.85rem; direction:ltr; }
.vac-meta { display:flex; align-items:center; gap:7px; font-size:.74rem; color:#94A3B8; }
.vac-dot { opacity:.5; }
.match-list { display:flex; flex-direction:column; gap:7px; }
.match-row {
  display:flex; align-items:center; gap:9px;
  padding:7px 10px; border-radius:10px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  font-size:.8rem; color:#E2E8F0;
}
.match-row strong { flex:1; font-weight:600; }
.match-tag { font-size:.68rem; color:#4ADE80; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.22); padding:2px 8px; border-radius:20px; }

/* Invoice example */
.inv-example {
  margin-top:6px; padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
}
.inv-example .bkr-row { padding:6px 0; }
.inv-amount { color:#FCD34D !important; }

@media (max-width:820px) {
  .auto-body { grid-template-columns:1fr; }
}

/* 14 ─ PRICING */
.pricing-section { }
.pricing-grid    { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.pricing-card    {
  --pc-accent:#3B82F6;
  display:flex; flex-direction:column;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
    var(--card-bg);
  border:1px solid var(--card-border); border-radius:var(--r-xl); padding:30px 28px; position:relative;
  box-shadow:0 18px 50px rgba(2,6,18,.3);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.pricing-card::before {
  content:''; position:absolute; top:0; left:26px; right:26px; height:2px; border-radius:0 0 3px 3px;
  background:linear-gradient(90deg, transparent, var(--pc-accent), transparent); opacity:.55;
}
.pricing-grid > .pricing-card:nth-child(3) { --pc-accent:#818CF8; }
.pricing-card.visible:hover, .pricing-card:hover { transform:translateY(-5px); border-color:color-mix(in srgb, var(--pc-accent) 32%, var(--card-border)); box-shadow:0 28px 70px rgba(2,6,18,.4); }
.pricing-featured{
  --pc-accent:#8B5CF6;
  background:
    radial-gradient(circle at 50% 0%, rgba(139,92,246,.18), transparent 60%),
    linear-gradient(180deg, rgba(99,102,241,.11), rgba(59,130,246,.04)),
    var(--card-bg);
  border-color:rgba(139,92,246,.5);
  box-shadow:0 0 0 1px rgba(139,92,246,.25), 0 34px 90px rgba(79,70,229,.3), 0 0 80px rgba(139,92,246,.2);
  margin-top:-18px;
}
.pricing-featured.visible:hover, .pricing-featured:hover { transform:translateY(-6px); border-color:rgba(139,92,246,.62); }
.pc-badge-feat {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.3px;
  padding:5px 20px; border-radius:20px; white-space:nowrap;
  box-shadow:0 10px 24px rgba(139,92,246,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.pc-top    { margin-bottom:22px; text-align:center; }
.pc-name   { font-size:1.25rem; font-weight:900; color:var(--text-hi); margin-bottom:6px; }
.pc-target { font-size:.85rem; color:var(--text-lo); margin-bottom:14px; line-height:1.65; min-height:2.7em; }
.pc-price  { font-size:.98rem; font-weight:800; color:var(--pc-accent); }
.pc-value  {
  margin-top:14px; padding-top:14px; border-top:1px solid rgba(148,163,184,.12);
  font-size:.96rem; font-weight:800; color:var(--text-hi); line-height:1.5; text-align:center;
}
.pricing-featured .pc-value { color:#fff; }
.pricing-featured .btn-primary { box-shadow:0 12px 30px rgba(59,130,246,.42); }
.pricing-note {
  text-align:center; max-width:620px; margin:26px auto 0;
  font-size:.85rem; color:var(--text-lo); line-height:1.7;
}
.pc-list   { display:flex; flex-direction:column; gap:11px; margin:0 auto 24px; width:fit-content; max-width:100%; }
.pc-list li{
  font-size:.875rem; color:var(--text-lo);
  display:flex; align-items:center; gap:9px; line-height:1.5;
}
.pc-list li::before {
  content:'✓'; color:var(--success); font-weight:800; flex-shrink:0;
  width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:.72rem; background:rgba(34,197,94,.14);
}
.pricing-card .btn-full { margin-top:auto; }

/* 15 ─ FAQ */
.section-faq {
  position:relative; overflow:hidden; padding:110px 0;
  --glow-x:50%; --glow-y:20%; --glow-x2:20%; --glow-y2:70%;
  background: transparent;
}
.section-faq::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:none;
  -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
          mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
}
.section-faq .container { position:relative; z-index:2; }
.faq-heading { max-width:760px; margin:0 auto 52px; text-align:center; }
.section-faq .section-badge {
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:18px; padding:8px 16px; border-radius:999px;
  color:#C4B5FD; font-size:.84rem; font-weight:700;
  background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.26);
  box-shadow:0 0 40px rgba(139,92,246,.14);
}
.faq-heading h2 {
  margin:0 0 16px; color:var(--text-hi);
  font-size:clamp(1.9rem, 3.6vw, 2.8rem); font-weight:900;
  line-height:1.18; letter-spacing:-.03em; text-shadow:0 0 50px rgba(139,92,246,.16);
}
.faq-heading p { max-width:620px; margin:0 auto; color:#CBD5E1; font-size:1.05rem; line-height:1.9; }

.faq-panel { position:relative; max-width:900px; margin:0 auto; display:grid; gap:14px; }
.faq-panel::before {
  content:""; position:absolute; inset:8% 10%; pointer-events:none;
  background:radial-gradient(circle, rgba(59,130,246,.14), rgba(139,92,246,.10), transparent 68%);
  filter:blur(28px);
}
.faq-item {
  position:relative; z-index:1; overflow:hidden; border-radius:22px;
  background:linear-gradient(180deg, rgba(15,23,42,.88), rgba(8,13,28,.94));
  border:1px solid rgba(148,163,184,.15);
  box-shadow:0 20px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(16px);
}
.faq-item::before {
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background:
    radial-gradient(circle at 12% 0%, rgba(59,130,246,.10), transparent 30%),
    radial-gradient(circle at 92% 10%, rgba(139,92,246,.10), transparent 28%);
  opacity:0; transition:opacity .25s ease;
}
.faq-item[open]::before, .faq-item:hover::before { opacity:1; }
.faq-item[open] {
  border-color:rgba(139,92,246,.34);
  background:
    radial-gradient(circle at 12% 0%, rgba(59,130,246,.12), transparent 34%),
    linear-gradient(180deg, rgba(15,23,42,.94), rgba(8,13,28,.98));
  box-shadow:0 28px 90px rgba(0,0,0,.32), 0 0 70px rgba(59,130,246,.10), inset 0 1px 0 rgba(255,255,255,.06);
}
.faq-item summary {
  position:relative; z-index:1; list-style:none; cursor:pointer; min-height:68px;
  padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:18px;
  color:var(--text-hi); font-weight:900; font-size:.98rem;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-icon {
  position:relative; flex:0 0 auto; width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  background:rgba(15,23,42,.74); border:1px solid rgba(148,163,184,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.faq-icon::before, .faq-icon::after {
  content:""; position:absolute; width:12px; height:2px; border-radius:999px;
  background:#CBD5E1; transition:transform .25s ease, background .25s ease;
}
.faq-icon::after { transform:rotate(90deg); }
.faq-item[open] .faq-icon {
  transform:rotate(180deg);
  background:linear-gradient(135deg, rgba(59,130,246,.28), rgba(139,92,246,.26));
  border-color:rgba(139,92,246,.32);
  box-shadow:0 0 28px rgba(139,92,246,.18);
}
.faq-item[open] .faq-icon::before, .faq-item[open] .faq-icon::after { background:#FFFFFF; }
.faq-item[open] .faq-icon::after { transform:rotate(0deg); }
.faq-answer { position:relative; z-index:1; padding:0 24px 24px; }
.faq-answer::before {
  content:""; display:block; height:1px; margin-bottom:18px;
  background:linear-gradient(90deg, transparent, rgba(59,130,246,.55), rgba(139,92,246,.50), transparent);
}
.faq-answer p {
  margin:0; padding:16px 18px; border-radius:16px; color:#D0DAEA; line-height:1.9; font-size:.96rem;
  background:rgba(15,23,42,.48); border:1px solid rgba(148,163,184,.10);
}
@media (hover:hover) {
  .faq-item { transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
  .faq-item:hover {
    transform:translateY(-3px); border-color:rgba(139,92,246,.28);
    box-shadow:0 28px 90px rgba(0,0,0,.30), 0 0 70px rgba(59,130,246,.08);
  }
}
@media (max-width:768px) {
  .section-faq { padding:84px 0; }
  .faq-heading { margin-bottom:38px; }
  .faq-heading h2 { font-size:clamp(1.9rem, 8vw, 2.7rem); }
  .faq-item { border-radius:18px; }
  .faq-item summary { min-height:62px; padding:18px; align-items:flex-start; }
  .faq-answer { padding:0 18px 18px; }
}

/* 16 ─ USE CASES */
.section-usecases {
  position:relative; overflow:hidden; padding:110px 0;
  --glow-x:50%; --glow-y:10%; --glow-x2:20%; --glow-y2:60%;
  background: transparent;
}
.section-usecases::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:none;
  -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
          mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
}
.section-usecases .container { position:relative; z-index:2; }
.usecases-heading { max-width:820px; margin:0 auto 54px; text-align:center; }
.section-usecases .section-badge {
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:18px; padding:8px 16px; border-radius:999px;
  color:#C4B5FD; font-size:.84rem; font-weight:700;
  background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.26);
  box-shadow:0 0 40px rgba(139,92,246,.14);
}
.usecases-heading h2 {
  margin:0 0 16px; color:var(--text-hi);
  font-size:clamp(1.9rem, 3.6vw, 2.8rem); font-weight:900;
  line-height:1.18; letter-spacing:-.03em; text-shadow:0 0 50px rgba(139,92,246,.16);
}
.usecases-heading p { max-width:720px; margin:0 auto; color:#CBD5E1; font-size:1.05rem; line-height:1.9; }

.usecases-grid {
  max-width:1120px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px;
}
.usecase-card {
  position:relative; overflow:hidden; min-height:300px; border-radius:28px; padding:26px;
  background:
    radial-gradient(circle at 22% 0%, rgba(59,130,246,.12), transparent 34%),
    linear-gradient(180deg, rgba(15,23,42,.88), rgba(8,13,28,.95));
  border:1px solid rgba(148,163,184,.15);
  box-shadow:0 28px 90px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(18px);
}
.usecase-card.featured {
  border-color:rgba(139,92,246,.30);
  box-shadow:0 34px 110px rgba(0,0,0,.38), 0 0 80px rgba(139,92,246,.12), inset 0 1px 0 rgba(255,255,255,.06);
}
.usecase-card::before {
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background:
    radial-gradient(circle at 85% 10%, rgba(139,92,246,.12), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 28%);
}
.usecase-card > * { position:relative; z-index:1; }
.usecase-icon {
  width:56px; height:56px; display:grid; place-items:center; border-radius:18px; margin-bottom:18px;
  background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(139,92,246,.20));
  border:1px solid rgba(148,163,184,.16); color:var(--text-hi); font-size:1.35rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.usecase-badge {
  display:inline-flex; padding:7px 11px; border-radius:999px; margin-bottom:14px;
  color:#C4B5FD; background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.22);
  font-size:.78rem; font-weight:800;
}
.usecase-card h3 { color:var(--text-hi); font-size:1.3rem; line-height:1.35; margin:0 0 12px; }
.usecase-card p { color:#CBD5E1; line-height:1.8; margin:0 0 18px; font-size:.95rem; }
.usecase-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.usecase-list li { display:flex; align-items:center; gap:9px; color:#D0DAEA; font-size:.92rem; }
.usecase-list li::before {
  content:"✓"; width:20px; height:20px; display:grid; place-items:center; border-radius:999px;
  color:#86EFAC; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.18);
  font-size:.72rem; flex:0 0 auto;
}
@media (hover:hover) {
  .usecase-card { transition:transform .32s ease, border-color .32s ease, box-shadow .32s ease; }
  .usecase-card:hover {
    transform:translateY(-7px); border-color:rgba(139,92,246,.32);
    box-shadow:0 40px 120px rgba(0,0,0,.40), 0 0 90px rgba(59,130,246,.10);
  }
}

/* 17 ─ FINAL CTA */
.final-cta {
  position:relative; padding:70px 0 92px;
  background: transparent;
}
.final-cta-panel {
  position:relative; overflow:hidden; max-width:900px; margin:0 auto;
  padding:44px 32px; text-align:center; border-radius:34px;
  background:
    radial-gradient(circle at 50% 0%, rgba(59,130,246,.16), transparent 38%),
    linear-gradient(180deg, rgba(15,23,42,.88), rgba(8,13,28,.95));
  border:1px solid rgba(148,163,184,.16);
  box-shadow:0 42px 130px rgba(0,0,0,.42), 0 0 110px rgba(139,92,246,.12), inset 0 1px 0 rgba(255,255,255,.06);
}
.final-cta-panel::before {
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background:
    radial-gradient(circle at 20% 0%, rgba(59,130,246,.12), transparent 34%),
    radial-gradient(circle at 80% 15%, rgba(139,92,246,.14), transparent 36%);
}
.final-cta-panel::after {
  content:""; position:absolute; width:420px; height:420px; left:50%; top:-160px;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(59,130,246,.16), rgba(139,92,246,.10), transparent 68%);
  filter:blur(12px);
}
.final-cta-panel .cta-orb {
  position:absolute; top:-30%; left:50%; transform:translateX(-50%);
  width:420px; height:420px; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(139,92,246,.18), transparent 65%);
  filter:blur(20px); animation:floatY 6s ease-in-out infinite;
}
.final-cta-panel > * { position:relative; z-index:1; }
.cta-steps {
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  max-width:760px; margin:0 auto 32px; text-align:right;
}
.cta-step {
  display:flex; align-items:flex-start; gap:12px;
  padding:16px 16px; border-radius:16px;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(148,163,184,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.cta-step-num {
  flex-shrink:0; font-size:.95rem; font-weight:900; line-height:1;
  color:#A78BFA; padding:7px 9px; border-radius:10px;
  background:rgba(139,92,246,.14); border:1px solid rgba(139,92,246,.26);
}
.cta-step-body { display:flex; flex-direction:column; gap:4px; }
.cta-step-body strong { color:var(--text-hi); font-size:.92rem; font-weight:800; line-height:1.4; }
.cta-step-body span { color:#94A3B8; font-size:.8rem; line-height:1.6; }
.final-cta h2 { color:var(--text-hi); font-size:clamp(1.9rem, 4vw, 3.2rem); font-weight:900; line-height:1.16; letter-spacing:-.03em; margin:0 0 18px; }
.final-cta p { max-width:680px; margin:0 auto 22px; color:#CBD5E1; font-size:1.05rem; line-height:1.9; }
.cta-pills { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:0 0 24px; }
.cta-pills span {
  display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px;
  color:#C4B5FD; background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.22);
  font-size:.84rem; font-weight:800;
}
.cta-actions { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.cta-trust { color:#CBD5E1; font-size:.9rem; }

/* 18 ─ FOOTER */
.site-footer {
  position:relative; padding:54px 0;
  border-top:1px solid rgba(148,163,184,.10); background:rgba(2,6,23,.72);
}
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:42px; align-items:start; }
.footer-brand p { max-width:320px; color:#94A3B8; line-height:1.8; margin:14px 0 16px; font-size:.9rem; }
.footer-badges { display:flex; flex-wrap:wrap; gap:8px; }
.footer-badges span {
  font-size:.72rem; font-weight:700; color:#A5B4FC;
  padding:5px 11px; border-radius:999px;
  background:rgba(99,102,241,.1); border:1px solid rgba(99,102,241,.2);
}
.footer-column h4 { color:var(--text-hi); margin:0 0 16px; font-size:.95rem; font-weight:800; }
.footer-column a { display:block; color:#94A3B8; text-decoration:none; margin-bottom:11px; font-size:.9rem; transition:color .22s ease; }
.footer-column a:hover { color:#A5B4FC; }
.footer-column a.is-disabled { color:#475569; pointer-events:none; cursor:default; }
.footer-copy {
  margin-top:42px; padding-top:24px; border-top:1px solid rgba(148,163,184,.08);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.footer-copy p { font-size:.78rem; color:rgba(255,255,255,.3); margin:0; }
.footer-tagline { font-size:.78rem; color:rgba(255,255,255,.32); }

@media (max-width:992px) {
  .usecases-grid { grid-template-columns:1fr; max-width:680px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:34px; }
  .footer-brand { grid-column:1 / -1; }
}
@media (max-width:540px) {
  .footer-grid { grid-template-columns:1fr; }
  .footer-copy { flex-direction:column; align-items:flex-start; gap:8px; }
}
@media (max-width:768px) {
  .section-usecases { padding:84px 0; }
  .usecases-heading { margin-bottom:38px; }
  .usecase-card { min-height:auto; padding:22px; border-radius:24px; }
  .final-cta { padding:64px 0 70px; }
  .final-cta-panel { padding:34px 20px; border-radius:26px; }
  .cta-actions .btn { width:min(100%, 320px); }
  .cta-steps { grid-template-columns:1fr; gap:10px; margin-bottom:26px; }
  .site-footer { padding:42px 0; }
}

/* 19 ─ ANIMATIONS */
@keyframes floatY {
  0%,100% { transform:translate3d(0, var(--pY, 0px), 0); }
  50%      { transform:translate3d(0, calc(var(--pY, 0px) - 10px), 0); }
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.55; transform:scale(.82); }
}

/* Scroll reveal */
.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* stagger siblings */
.features-grid .reveal:nth-child(2),
.result-cards  .reveal:nth-child(2),
.pricing-grid  .reveal:nth-child(2),
.usecases-grid .reveal:nth-child(2) { transition-delay:.1s; }
.features-grid .reveal:nth-child(3),
.result-cards  .reveal:nth-child(3),
.pricing-grid  .reveal:nth-child(3),
.usecases-grid .reveal:nth-child(3) { transition-delay:.2s; }
.features-grid .reveal:nth-child(4),
.result-cards  .reveal:nth-child(4) { transition-delay:.3s; }

/* 20 ─ RESPONSIVE */
@media (max-width:1024px) {
  .role-block { gap:40px; }
  .results-layout { gap:24px; }
  .result-preview { flex:0 0 250px; }
  .flow-network { width:100%; max-width:580px; }
}

@media (max-width:992px) {
  .dashboard-area { max-width:94vw; }
  .floating-card  { min-width:188px; padding:10px 13px; }
  .fc-tr { left:14px; }  .fc-tl { right:14px; }
  .fc-br { left:6px; }   .fc-bl { right:6px; }
}

@media (max-width:900px) {
  .features-grid  { grid-template-columns:1fr 1fr; }
  .pricing-grid   { grid-template-columns:1fr 1fr; }
  .pricing-featured { margin-top:0; }
  .pricing-card.visible:hover, .pricing-featured.visible:hover { transform:translateY(-5px); }
}

@media (max-width:768px) {
  .section { padding:72px 0; }
  .section::before, .section::after { width:280px; height:280px; opacity:.7; }
  .section-hd { margin-bottom:40px; }
  .br-hide { display:none; }

  /* Navbar — logo at the start, compact login + hamburger at the far edge */
  .navbar-inner   { justify-content:flex-start; gap:10px; }
  .navbar-links   { display:none; }
  .navbar-actions { margin-inline-start:auto; }
  .navbar-actions .btn-primary { display:none; } /* CTA lives in the menu */
  .navbar .btn-login { padding:8px 14px; font-size:.82rem; }
  .hamburger { display:flex; }

  /* Hero */
  .hero { padding-top:96px; }
  .hero-title { font-size:clamp(2.1rem, 9vw, 3.1rem); line-height:1.25; }
  .hero-desc  { font-size:.98rem; line-height:1.85; }
  .hero-actions { flex-direction:column; align-items:center; padding:0 12px; }
  .hero-actions .btn { justify-content:center; width:min(100%, 320px); }
  .floating-card { display:none; }

  /* Dashboard */
  .dashboard-mockup { height:auto; }
  .ds-sidebar { width:42px; padding:12px 4px; }
  .ds-item span { display:none; }
  .ds-search { display:none; }

  /* Features */
  .features-grid { grid-template-columns:1fr; }

  /* Roles */
  .role-block,
  .role-alt { flex-direction:column; gap:24px; }
  .role-text, .role-mockup { width:100%; }

  /* Flow */
  .flow-network  { display:none; }
  .flow-vertical { display:flex; }

  /* Results */
  .results-layout { flex-direction:column; }
  .result-preview { flex:none; width:100%; }

  /* Pricing */
  .pricing-grid { grid-template-columns:1fr; }

  /* Use cases */
  .usecases-grid { grid-template-columns:1fr; }

  /* Footer */
  .footer-inner { flex-direction:column; gap:28px; }
  .footer-cols  { gap:28px; }
}

@media (max-width:480px) {
  .container { padding:0 16px; }
  .hero-title { font-size:1.8rem; }
  .dashboard-mockup { height:auto; }
  .ds-sidebar { display:none; }
  .tab-button { padding:7px 14px; font-size:.8rem; }
  .pricing-grid { grid-template-columns:1fr; }
}

/* ─ DEMO REQUEST MODAL ─ */
.demo-modal {
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.demo-modal[hidden] { display:none; }
.demo-overlay {
  position:absolute; inset:0; background:rgba(2,6,18,.74);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:demoFade .25s ease;
}
.demo-dialog {
  position:relative; width:min(100%, 460px);
  background:
    radial-gradient(circle at 20% 0%, rgba(99,102,241,.16), transparent 42%),
    linear-gradient(180deg, rgba(20,27,46,.96), rgba(10,15,28,.98));
  border:1px solid rgba(148,163,184,.18); border-radius:24px;
  padding:30px 28px;
  box-shadow:0 40px 120px rgba(2,6,18,.6), 0 0 90px rgba(99,102,241,.16), inset 0 1px 0 rgba(255,255,255,.08);
  animation:demoPop .3s cubic-bezier(.2,.8,.25,1);
  max-height:calc(100vh - 40px); overflow-y:auto;
}
@keyframes demoFade { from { opacity:0; } }
@keyframes demoPop { from { opacity:0; transform:translateY(16px) scale(.97); } }

.demo-close {
  position:absolute; top:16px; left:16px;
  width:36px; height:36px; border-radius:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  color:#94A3B8; transition:background .2s, color .2s;
}
.demo-close:hover { background:rgba(255,255,255,.1); color:#fff; }

.demo-head { text-align:center; margin-bottom:22px; }
.demo-badge {
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:14px; padding:7px 15px; border-radius:999px;
  color:#C4B5FD; font-size:.8rem; font-weight:700;
  background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.26);
}
.demo-title { color:var(--text-hi); font-size:1.4rem; font-weight:900; margin:0 0 8px; letter-spacing:-.02em; }
.demo-desc { color:#94A3B8; font-size:.9rem; line-height:1.65; margin:0; }

.demo-form { display:flex; flex-direction:column; gap:14px; }
.demo-field { display:flex; flex-direction:column; gap:6px; text-align:right; }
.demo-field label { font-size:.85rem; font-weight:700; color:#CBD5E1; }
.demo-field label small { color:#64748B; font-weight:400; font-size:.78rem; }
.demo-field input {
  width:100%; padding:12px 14px; border-radius:12px; direction:rtl;
  background:rgba(255,255,255,.04); border:1px solid rgba(148,163,184,.18);
  color:var(--text-hi); font-size:.92rem; font-family:inherit;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.demo-field input::placeholder { color:#475569; }
.demo-field input:focus {
  outline:none; border-color:rgba(99,102,241,.6); background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(99,102,241,.14);
}
.demo-field.has-error input { border-color:rgba(239,68,68,.6); box-shadow:0 0 0 3px rgba(239,68,68,.12); }
.demo-err { display:none; color:#FCA5A5; font-size:.78rem; font-style:normal; }
.demo-field.has-error .demo-err { display:block; }

.demo-submit { margin-top:6px; }
.demo-note { text-align:center; color:#64748B; font-size:.78rem; margin:12px 0 0; }

.demo-success { text-align:center; padding:14px 0 6px; animation:demoFade .3s ease; }
.demo-success-icon {
  width:64px; height:64px; border-radius:50%; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center; color:#4ADE80;
  background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.3);
  box-shadow:0 0 40px rgba(34,197,94,.2);
}
.demo-success .demo-title { margin-bottom:10px; }
.demo-success .btn { margin-top:22px; }

@media (max-width:480px) {
  .demo-dialog { padding:26px 20px; border-radius:20px; }
  .demo-title { font-size:1.25rem; }
}

/* 21 ─ 3D LAYER (WebGL canvas · tilt · scroll depth) */
#scene3d {
  position:fixed; inset:0; z-index:-1;
  width:100%; height:100%;
  display:block; pointer-events:none;
}

/* Tilt-enabled cards — instant tracking while tilting, spring-back on leave */
[data-tilt] {
  transition:transform .6s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease;
  will-change:transform;
}
[data-tilt].is-tilting { transition:border-color .3s ease, box-shadow .3s ease; }

/* Pointer-tracking glare sheen injected into tilt cards */
.tilt-glare {
  position:absolute; inset:0; border-radius:inherit; z-index:5;
  pointer-events:none; opacity:var(--go, 0);
  background:radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255,255,255,.13), rgba(255,255,255,.04) 34%, transparent 62%);
  transition:opacity .45s cubic-bezier(.22,1,.36,1);
}

/* Scroll-driven depth (vars fed by landing.js) */
.dashboard-mockup {
  transform:perspective(1100px) rotateX(var(--mock-rx, 0deg));
  will-change:transform;
}
.cmap {
  transform:perspective(1400px) rotateX(var(--cmap-rx, 0deg));
  will-change:transform;
}

@media (prefers-reduced-motion: reduce) {
  #scene3d { display:none; }
  [data-tilt] { transition:none; }
  .tilt-glare { display:none; }
  .dashboard-mockup, .cmap { transform:none; }
}

/* 22 ─ RESPONSIVE POLISH (clarity on every device) */

/* Hub map scales fluidly so beams stay visible on tablets (721–1100px).
   Mobile grid tiles keep their own fixed sizes (higher specificity). */
.cmap .cmap-hub-core {
  width:clamp(118px, 17vw, 168px);
  height:clamp(118px, 17vw, 168px);
}
.cmap .cmap-orb {
  width:clamp(70px, 11vw, 104px);
  height:clamp(70px, 11vw, 104px);
  border-radius:clamp(21px, 3vw, 30px);
}
.cmap .cmap-orb svg { width:clamp(30px, 4.6vw, 44px); height:clamp(30px, 4.6vw, 44px); }
.cmap .cmap-node::before { width:clamp(100px, 15vw, 150px); height:clamp(100px, 15vw, 150px); }
.cmap .cmap-node .cmap-label { font-size:clamp(.76rem, 1.5vw, .88rem); }

/* Flow section: on stacked layouts the heading must come before the
   screenshot so the idea reads top-down. display:contents lets the
   grid order the heading, intro, preview and steps independently. */
@media (max-width:992px) {
  .flow-container { gap:0; }
  .flow-content { display:contents; }
  .flow-content h2 { order:1; margin:0 0 14px; }
  .flow-content > p { order:2; margin:0 0 24px; }
  .flow-preview { order:3; margin:0 0 26px; }
  .flow-steps { order:4; margin:0; }
}

/* Product preview tabs: all four always visible as a 2×2 grid —
   no hidden horizontal scroll on phones. */
@media (max-width:768px) {
  .preview-topbar { padding:12px; }
  .preview-topbar .browser-dots { display:none; }
  .preview-tabs {
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    overflow:visible; width:100%;
  }
  .preview-tab {
    text-align:center; padding:11px 8px; font-size:.86rem;
    background:rgba(15,23,42,.45);
    border:1px solid rgba(148,163,184,.14);
  }
}

/* Hero floating cards become a static "automation events" strip under
   the dashboard on phones instead of disappearing entirely. */
@media (max-width:768px) {
  .dashboard-area { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .dashboard-mockup { grid-column:1 / -1; order:-1; }
  .floating-card {
    display:flex; position:static; animation:none;
    min-width:0; max-width:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .fc-body strong { font-size:.8rem; }
  .fc-body span { font-size:.73rem; }
}
@media (max-width:400px) {
  .dashboard-area { grid-template-columns:1fr; }
}

/* Comfortable touch targets + readable chips on phones */
@media (max-width:768px) {
  .footer-column a { padding-block:9px; margin-bottom:2px; }
  .role-status, .result-badge { font-size:.8rem; }
}

/* Trust strip: drop the separators once items start wrapping */
@media (max-width:600px) {
  .trust-sep { display:none; }
  .trust-items { gap:8px 16px; }
}