/* ─── GLOBALS & DESIGN SYSTEM ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── LIGHT MODE — MARBLE LUXURY EDITION ──────────────────────── */
:root {
  /* Core brand blues */
  --blue: #288fbc;
  --blue-dark: #18698c;
  --blue-light: #e8f5fb;
  --blue-mid: #c9e8f5;

  /* Gold & marble accent system */
  --gold: #bda06a;
  --gold-dark: #91753f;
  --gold-light: #f5eed9;
  --gold-mid: #e8d8b0;
  --gold-shimmer: linear-gradient(135deg, #bda06a 0%, #e8d8b0 40%, #bda06a 70%, #91753f 100%);

  /* Marble surface palette */
  --marble-white: #fdfbf8;
  --marble-cream: #f8f4ee;
  --marble-vein: rgba(189,160,106,0.12);
  --marble-bg: radial-gradient(ellipse at 20% 0%, #f0ebe2 0%, #fdfbf8 35%, #f5f1eb 60%, #fdfbf8 100%);

  /* Text */
  --ink: #1a1208;
  --ink-muted: #5a4e3c;
  --ink-faint: #9e9082;

  /* Status */
  --green: #10B981;
  --green-light: #ECFDF5;

  /* Surfaces */
  --border: rgba(189,160,106,0.22);
  --surface: #f8f4ee;
  --white: #fdfbf8;
  --nav-bg: rgba(253,251,248,.94);
  --mockup-bg-a: #eee8de;
  --mockup-bg-b: #e5ddd0;
  --mockup-bg-c: #ede8f8;
  --card-bg: #fdfbf8;
  --mini-card-bg: #fdfbf8;

  /* Radii */
  --radius: 12px;
  --radius-lg: 20px;

  /* Shadows — refined, warm */
  --shadow-sm: 0 1px 4px rgba(100,75,30,.07), 0 1px 2px rgba(100,75,30,.04);
  --shadow: 0 4px 20px rgba(100,75,30,.09), 0 1px 6px rgba(100,75,30,.05);
  --shadow-lg: 0 24px 64px rgba(100,75,30,.12), 0 4px 18px rgba(100,75,30,.07);
  --shadow-gold: 0 8px 32px rgba(189,160,106,.25), 0 2px 8px rgba(189,160,106,.15);
}

/* ─── DARK MODE ────────────────────────────────────────────────── */
html.dark {
  --blue: #44b3e3;
  --blue-dark: #5cc1ed;
  --blue-light: rgba(68,179,227,.10);
  --blue-mid: rgba(68,179,227,.18);

  --gold: #d4b87a;
  --gold-dark: #bda06a;
  --gold-light: rgba(189,160,106,.12);
  --gold-mid: rgba(189,160,106,.25);
  --gold-shimmer: linear-gradient(135deg, #bda06a 0%, #e8d8b0 40%, #bda06a 70%, #7a5c2e 100%);

  --marble-white: #1a1612;
  --marble-cream: #12100e;
  --marble-vein: rgba(189,160,106,.08);
  --marble-bg: radial-gradient(ellipse at 20% 0%, #1e1a14 0%, #151210 35%, #1a1612 100%);

  --ink: #f5eed9;
  --ink-muted: #c8b99a;
  --ink-faint: #7a6e5e;

  --green: #34D399;
  --green-light: rgba(52,211,153,.12);

  --border: rgba(189,160,106,.18);
  --surface: #0e0c0a;
  --white: #1e1a14;
  --nav-bg: rgba(14,12,10,.95);
  --mockup-bg-a: #1e1a14;
  --mockup-bg-b: #18150f;
  --mockup-bg-c: #1a1825;
  --card-bg: #1e1a14;
  --mini-card-bg: #1e1a14;

  --shadow: 0 4px 20px rgba(0,0,0,.4), 0 1px 6px rgba(0,0,0,.25);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.6), 0 4px 18px rgba(0,0,0,.35);
  --shadow-gold: 0 8px 32px rgba(189,160,106,.15), 0 2px 8px rgba(189,160,106,.08);
}

html.dark body { background: #0e0c0a; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--ink);
  background: var(--marble-white);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
  overflow-x: hidden;
}

/* Marble body texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    linear-gradient(108deg, transparent 29.5%, rgba(255,253,248,.55) 30%, rgba(245,238,220,.32) 30.6%, transparent 31.4%),
    linear-gradient(113deg, transparent 61%, rgba(252,247,238,.45) 61.5%, rgba(240,230,210,.28) 62%, transparent 62.8%),
    linear-gradient(104deg, transparent 17%, rgba(255,252,244,.4) 17.5%, rgba(248,242,228,.22) 18%, transparent 18.8%),
    linear-gradient(119deg, transparent 74%, rgba(243,235,218,.38) 74.5%, transparent 75.5%),
    linear-gradient(101deg, transparent 47%, rgba(255,250,240,.32) 47.6%, transparent 48.4%),
    linear-gradient(125deg, transparent 83%, rgba(245,238,222,.28) 83.5%, transparent 84.2%),
    radial-gradient(ellipse at 15% 10%, rgba(189,160,106,.09) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(189,160,106,.07) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(240,235,226,.45) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }
html.dark body::before {
  background:
    linear-gradient(108deg, transparent 29.5%, rgba(60,45,25,.12) 30%, transparent 31%),
    linear-gradient(113deg, transparent 61%, rgba(50,38,18,.1) 61.5%, transparent 62.5%),
    linear-gradient(104deg, transparent 17%, rgba(55,42,20,.09) 17.5%, transparent 18.5%),
    linear-gradient(119deg, transparent 74%, rgba(45,34,16,.08) 74.5%, transparent 75.5%),
    radial-gradient(ellipse at 15% 10%, rgba(189,160,106,.05) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(189,160,106,.04) 0%, transparent 45%);
}

/* ─── NAV ──────────────────────────────────────────────────────── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  transition: background .3s, border-color .3s, top 0.3s ease;
  box-shadow: 0 1px 0 rgba(189,160,106,.12), 0 4px 16px rgba(100,75,30,.04);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 32px;
}
/* ─── BRAND LOGO ─── */
.logo {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-decoration: none;
  flex-shrink: 0;
  line-height: 1;
}
.logo .w  { color: #288fbc; }
.logo .h  { color: #288fbc; }
.logo .i  { color: #288fbc; }
.logo .t  { color: #288fbc; }
.logo .e  { color: #288fbc; }
.logo .l  { color: #44b3e3; }
.logo .a  { color: #44b3e3; }
.logo .b  { color: #44b3e3; }
.logo .el { color: #44b3e3; }
.logo .v  { color: #5cc1ed; }
.logo .o  { color: #5cc1ed; }
.logo .c  { color: #5cc1ed; }
.logo .ic { color: #5cc1ed; }
.logo .e2 { color: #5cc1ed; }
.logo .ai { color: #18698c; }

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  flex: 1;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color .15s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--ink); font-weight: 600; }
.nav-ctas { display: flex; gap: 10px; align-items: center; }

/* Mobile Menu Toggle */
.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 24px;
  cursor: pointer;
  z-index: 105;
}

/* Dark mode toggle */
.theme-toggle {
  width: 40px; height: 22px;
  background: var(--border);
  border-radius: 100px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background .3s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.theme-toggle::after {
  content: '';
  position: absolute;
  left: 3px;
  width: 16px; height: 16px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  transition: left .25s, background .3s;
}
html.dark .theme-toggle { background: var(--blue); }
html.dark .theme-toggle::after { left: 21px; }
.theme-icon { font-size: 11px; position: absolute; pointer-events: none; }
.theme-icon.sun { left: 5px; opacity: 1; transition: opacity .2s; }
.theme-icon.moon { right: 5px; opacity: 0; transition: opacity .2s; }
html.dark .theme-icon.sun { opacity: 0; }
html.dark .theme-icon.moon { opacity: 1; }

.btn-ghost {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 8px;
  transition: background .15s, color .15s;
  background: none;
  border: none;
  cursor: pointer;
}
.btn-ghost:hover { background: var(--surface); color: var(--ink); }
.btn-primary {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a1208;
  background: var(--gold-shimmer);
  text-decoration: none;
  padding: 9px 20px;
  border-radius: 4px;
  transition: all .2s;
  border: none;
  cursor: pointer;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(189,160,106,.3);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(189,160,106,.4);
  filter: brightness(1.05);
}

/* ─── HERO ─────────────────────────────────────────────────────── */
.hero {
  padding: 80px 24px 0;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  min-height: calc(100vh - 64px);
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue-light);
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 24px;
  letter-spacing: 0.01em;
}
.hero-badge::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--blue);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(.85); }
}
.hero h1 {
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -2px;
  color: var(--ink);
  margin-bottom: 20px;
}
.hero h1 em { font-style: normal; color: var(--blue); }
.hero-sub {
  font-size: 19px;
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.55;
  margin-bottom: 14px;
  max-width: 480px;
}
.hero-instant {
  font-size: 14px;
  color: var(--ink-muted);
  background: var(--surface);
  border-left: 3px solid var(--blue);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin-bottom: 20px;
  max-width: 480px;
  line-height: 1.55;
  transition: background .3s;
}
.hero-support {
  font-size: 14px;
  color: var(--ink-faint);
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-support span { display: flex; align-items: center; gap: 8px; }
.hero-support span::before { content: '✓'; color: var(--green); font-weight: 700; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
.btn-primary-lg {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1208;
  background: var(--gold-shimmer);
  text-decoration: none;
  padding: 15px 32px;
  border-radius: 4px;
  transition: all .2s;
  display: inline-block;
  box-shadow: var(--shadow-gold);
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.btn-primary-lg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 50%);
  pointer-events: none;
}
.btn-primary-lg:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(189,160,106,.45); filter: brightness(1.06); }
.btn-green-lg {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: transparent;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 4px;
  transition: all .2s;
  display: inline-block;
  border: 1px solid var(--gold);
  white-space: nowrap;
  cursor: pointer;
}
.btn-green-lg:hover { background: var(--gold-light); transform: translateY(-1px); }
.hero-trust {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  color: var(--ink-faint);
  flex-wrap: wrap;
}
.hero-trust-divider { width: 1px; height: 16px; background: var(--border); }

/* ─── HERO MOCKUP ───────────────────────────────────────────────── */
.hero-visual { position: relative; padding: 24px; padding-bottom: 0; }
.mockup-bg {
  background: linear-gradient(135deg, var(--mockup-bg-a) 0%, var(--mockup-bg-b) 60%, var(--mockup-bg-c) 100%);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  transition: background .3s;
}
.call-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  margin-bottom: 12px;
  animation: floatUp .6s ease-out;
  transition: background .3s;
}
@keyframes floatUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.call-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.call-status { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--green); }
.live-dot {
  width:8px; height:8px;
  background:var(--green);
  border-radius:50%;
  animation: livePulse 1.5s infinite;
}
@keyframes livePulse {
  0%,100% { box-shadow:0 0 0 0 rgba(16,185,129,.5); }
  50% { box-shadow:0 0 0 6px rgba(16,185,129,0); }
}
.call-timer { font-size:12px; color:var(--ink-faint); font-weight:500; font-variant-numeric:tabular-nums; }
.caller-info { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.caller-avatar {
  width:44px; height:44px;
  background:linear-gradient(135deg,#288fbc,#18698c);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.caller-name { font-weight:700; font-size:16px; color:var(--ink); }
.caller-num { font-size:13px; color:var(--ink-faint); }
.ai-transcript {
  background:var(--surface);
  border-radius:10px;
  padding:14px;
  font-size:13px;
  color:var(--ink-muted);
  margin-bottom:16px;
  border-left:3px solid var(--blue);
  line-height:1.5;
  transition: background .3s;
}
.ai-label { font-size:11px; font-weight:700; color:var(--blue); letter-spacing:.05em; text-transform:uppercase; margin-bottom:6px; }
.call-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.call-field { background:var(--surface); border-radius:8px; padding:10px 12px; font-size:12px; transition:background .3s; }
.call-field-label { color:var(--ink-faint); font-weight:500; margin-bottom:3px; }
.call-field-value { color:var(--ink); font-weight:600; }
.call-actions { display:flex; gap:8px; }
.action-btn { flex:1; padding:8px; border-radius:8px; font-size:12px; font-weight:600; text-align:center; border:none; cursor:pointer; }
.action-transfer { background:var(--blue); color:#fff; }
.action-message { background:var(--surface); color:var(--ink-muted); border:1px solid var(--border); }
.action-ticket { background:var(--green-light); color:var(--green); }
.mini-card {
  background:var(--mini-card-bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px 16px;
  display:flex; align-items:center; gap:12px;
  font-size:13px; margin-bottom:10px;
  animation:floatUp .8s ease-out;
  transition:background .3s;
}
.mini-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.mini-icon.crm { background:#FFF7ED; }
.mini-icon.email { background:var(--blue-light); }
html.dark .mini-icon.crm { background:rgba(251,191,36,.12); }
.toggle-row {
  background:var(--mini-card-bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between;
  animation:floatUp 1s ease-out;
  transition:background .3s;
}
.toggle-label { font-size:13px; font-weight:600; color:var(--ink); }
.toggle-sub { font-size:11px; color:var(--ink-faint); }
.toggle-switch {
  width:48px; height:26px;
  background:var(--green);
  border-radius:100px;
  position:relative; cursor:pointer;
  border:none;
  transition:background .3s;
  flex-shrink:0;
}
.toggle-switch::after {
  content:'';
  position:absolute;
  top:3px; left:24px;
  width:20px; height:20px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
  transition:left .3s;
}
.toggle-on-label { font-size:11px; font-weight:700; color:var(--green); }

/* ─── LOGOS ─────────────────────────────────────────────────────── */
.logos-section {
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:40px 24px;
  background:var(--surface);
  transition:background .3s, border-color .3s;
}
.logos-inner { max-width:1200px; margin:0 auto; text-align:center; }
.logos-label { font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:28px; }
.logos-row { display:flex; align-items:center; justify-content:center; gap:48px; flex-wrap:wrap; }
.logo-chip { font-size:15px; font-weight:700; color:var(--ink-faint); letter-spacing:-.3px; opacity:.7; transition:opacity .2s; }
.logo-chip:hover { opacity:1; }

/* ─── SHARED SECTION ─────────────────────────────────────────────── */
.section { padding:96px 24px; max-width:1200px; margin:0 auto; }
.section-full { padding:96px 24px; background:var(--surface); transition:background .3s; }
.section-full .section { padding:0; }
.section-label { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:12px; }
.section-title { font-size:clamp(28px,4vw,42px); font-weight:800; letter-spacing:-1px; line-height:1.15; color:var(--ink); margin-bottom:16px; }
.section-sub { font-size:18px; color:var(--ink-muted); max-width:560px; line-height:1.6; }
.section-header { text-align:center; margin-bottom:64px; }
.section-header .section-sub { margin:0 auto; }

/* ─── HOW IT WORKS ──────────────────────────────────────────────── */
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.step-item { background:var(--card-bg); padding:36px 28px; position:relative; transition:background .3s; }
.step-num { font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--blue); margin-bottom:16px; opacity:.7; }
.step-icon { font-size:32px; margin-bottom:16px; }
.step-title { font-size:17px; font-weight:700; margin-bottom:8px; letter-spacing:-.3px; color:var(--ink); }
.step-desc { font-size:14px; color:var(--ink-muted); line-height:1.5; }
.step-connector { position:absolute; right:-16px; top:50%; transform:translateY(-50%); z-index:1; width:32px; height:32px; background:var(--blue-light); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--blue); border:2px solid var(--blue-mid); }

/* ─── FEATURES ──────────────────────────────────────────────────── */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.feature-card { background:var(--card-bg); padding:32px 28px; transition:background .2s; }
.feature-card:hover { background:var(--blue-light); }
.feature-icon { width:48px; height:48px; background:var(--blue-light); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; }
.feature-title { font-size:17px; font-weight:700; margin-bottom:8px; letter-spacing:-.3px; color:var(--ink); }
.feature-desc { font-size:14px; color:var(--ink-muted); line-height:1.55; }

/* ─── RESELLER ───────────────────────────────────────────────────── */
.reseller-section { background:#0A1628; padding:96px 24px; }
html.dark .reseller-section { background:#060d1a; }
.reseller-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.reseller-label { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:12px; }
.reseller-title { font-size:clamp(28px,3.5vw,40px); font-weight:800; letter-spacing:-1px; line-height:1.15; color:#F1F5F9; margin-bottom:20px; }
.reseller-desc { font-size:17px; color:#64748B; line-height:1.6; margin-bottom:32px; }
.btn-white { font-size:15px; font-weight:700; color:#0F172A; background:#fff; padding:14px 28px; border-radius:10px; text-decoration:none; display:inline-block; transition:all .15s; border: none; cursor: pointer; }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(255,255,255,.2); }
.reseller-benefits { display:flex; flex-direction:column; gap:16px; }
.benefit-row { display:flex; align-items:flex-start; gap:16px; padding:18px; background:rgba(255,255,255,.04); border-radius:var(--radius); border:1px solid rgba(255,255,255,.07); transition:border-color .2s; }
.benefit-row:hover { border-color:rgba(68,179,227,.35); }
.benefit-icon { width:40px; height:40px; background:rgba(40,143,188,.2); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.benefit-title { font-size:15px; font-weight:700; color:#F1F5F9; margin-bottom:4px; }
.benefit-desc { font-size:13px; color:#64748B; line-height:1.5; }

/* ─── INTEGRATIONS ──────────────────────────────────────────────── */
.integrations-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.integration-card { background:var(--card-bg); border:1.5px solid var(--border); border-radius:var(--radius); padding:24px; text-align:center; transition:all .2s; cursor:default; }
.integration-card:hover { border-color:var(--blue); box-shadow:0 4px 20px rgba(40,143,188,.12); transform:translateY(-2px); }
.integration-logo { font-size:28px; margin-bottom:10px; }
.integration-name { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.integration-type { font-size:12px; color:var(--ink-faint); }

/* ─── TESTIMONIALS ──────────────────────────────────────────────── */
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testimonial-card { background:var(--card-bg); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:32px; transition:box-shadow .2s, background .3s; }
.testimonial-card:hover { box-shadow:var(--shadow); }
.stars { color:#F59E0B; font-size:16px; margin-bottom:16px; letter-spacing:2px; }
.testimonial-text { font-size:16px; line-height:1.65; color:var(--ink); margin-bottom:24px; }
.testimonial-text::before { content:'"'; color:var(--blue); font-size:28px; line-height:0; vertical-align:-8px; margin-right:4px; font-weight:800; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.author-avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; font-weight:700; color:#fff; }
.author-name { font-size:14px; font-weight:700; color:var(--ink); }
.author-title { font-size:12px; color:var(--ink-faint); }

/* ─── PRICING ───────────────────────────────────────────────────── */
.pricing-note {
  text-align:center;
  margin-bottom:32px;
  font-size:15px;
  color:var(--ink-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.pricing-note strong { color:var(--ink); }
.pricing-note-pill {
  background:var(--green-light);
  color:var(--green);
  font-size:13px;
  font-weight:700;
  padding:6px 14px;
  border-radius:100px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.pricing-card { background:var(--card-bg); padding:40px 32px; position:relative; transition:background .3s; }
.pricing-card.featured { background:var(--blue); }
.pricing-badge { position:absolute; top:20px; right:20px; font-size:11px; font-weight:700; letter-spacing:.05em; background:var(--blue-mid); color:var(--blue); padding:4px 10px; border-radius:100px; }
.pricing-card.featured .pricing-badge { background:rgba(255,255,255,.2); color:#fff; }
.pricing-tier { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; }
.pricing-card.featured .pricing-tier { color:rgba(255,255,255,.7); }
.pricing-name { font-size:22px; font-weight:800; letter-spacing:-.5px; margin-bottom:8px; color:var(--ink); }
.pricing-card.featured .pricing-name { color:#fff; }
.pricing-desc { font-size:14px; color:var(--ink-muted); margin-bottom:24px; line-height:1.5; }
.pricing-card.featured .pricing-desc { color:rgba(255,255,255,.75); }
.pricing-price { font-size:44px; font-weight:900; letter-spacing:-1.5px; color:var(--ink); line-height:1; }
.pricing-card.featured .pricing-price { color:#fff; }
.pricing-price sub { font-size:22px; font-weight:700; vertical-align:top; margin-top:8px; display:inline-block; }
.pricing-per { font-size:13px; color:var(--ink-faint); margin-bottom:8px; margin-top:4px; }
.pricing-card.featured .pricing-per { color:rgba(255,255,255,.6); }
.pricing-overage { font-size:12px; color:var(--green); font-weight:600; margin-bottom:24px; }
.pricing-card.featured .pricing-overage { color:rgba(255,255,255,.8); }
.pricing-cta { display:block; text-align:center; padding:12px; border-radius:8px; font-size:14px; font-weight:700; text-decoration:none; margin-bottom:24px; transition:all .15s; }
.pricing-cta-default { background:var(--blue); color:#fff; }
.pricing-cta-default:hover { background:var(--blue-dark); }
.pricing-cta-white { background:#fff; color:var(--blue); }
.pricing-cta-white:hover { background:var(--blue-light); }
.pricing-cta-outline { background:transparent; color:var(--ink-muted); border:1.5px solid var(--border); }
.pricing-cta-outline:hover { border-color:var(--blue); color:var(--blue); }
.pricing-divider { height:1px; background:var(--border); margin-bottom:20px; }
.pricing-card.featured .pricing-divider { background:rgba(255,255,255,.2); }
.pricing-minutes { font-size:13px; font-weight:700; color:var(--blue); margin-bottom:16px; padding:10px 14px; background:var(--blue-light); border-radius:8px; }
.pricing-card.featured .pricing-minutes { background:rgba(255,255,255,.15); color:#fff; }
.pricing-features { list-style:none; display:flex; flex-direction:column; gap:9px; }
.pricing-features li { font-size:14px; color:var(--ink-muted); display:flex; align-items:flex-start; gap:10px; line-height:1.4; }
.pricing-card.featured .pricing-features li { color:rgba(255,255,255,.85); }
.pricing-features li::before { content:'✓'; color:var(--green); font-weight:700; flex-shrink:0; }
.pricing-card.featured .pricing-features li::before { color:rgba(255,255,255,.9); }

/* ─── FINAL CTA ─────────────────────────────────────────────────── */
.final-cta {
  padding:96px 24px;
  text-align:center;
  background:linear-gradient(180deg, var(--white) 0%, var(--blue-light) 100%);
  transition:background .3s;
}
html.dark .final-cta { background:linear-gradient(180deg,#0A1628 0%,#0d1e30 100%); }
.final-cta h2 { font-size:clamp(32px,4.5vw,52px); font-weight:900; letter-spacing:-1.5px; margin-bottom:16px; color:var(--ink); }
.final-cta p { font-size:18px; color:var(--ink-muted); margin-bottom:40px; }
.final-ctas { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ─── FOOTER ─────────────────────────────────────────────────────── */
footer { background:#0A1628; color:#fff; padding:64px 24px 32px; transition: background .3s; }
html.dark footer { background:#060d1a; }
.footer-inner { max-width:1200px; margin:0 auto; }
.footer-top { display:grid; grid-template-columns:1.6fr repeat(6,1fr); gap:40px; margin-bottom:56px; }
.footer-brand p { font-size:14px; color:#64748B; margin-top:12px; line-height:1.6; max-width:240px; }
.footer-logo { font-size:17px; font-weight:800; line-height:1; }
.footer-logo .w  { color:#288fbc; }
.footer-logo .l  { color:#44b3e3; }
.footer-logo .v  { color:#5cc1ed; }
.footer-logo .ai { color:#18698c; }
.footer-col h4 { font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#94A3B8; margin-bottom:16px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col ul li a { font-size:13px; color:#64748B; text-decoration:none; transition:color .15s; }
.footer-col ul li a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-bottom p { font-size:13px; color:#475569; }
.footer-bottom-links { display:flex; gap:20px; }
.footer-bottom-links a { font-size:13px; color:#475569; text-decoration:none; }
.footer-bottom-links a:hover { color:#fff; }

/* ─── SCROLL ANIMATIONS ─────────────────────────────────────────── */
.fade-in { opacity:0; transform:translateY(20px); transition:opacity .5s ease,transform .5s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width:1024px) {
  .hero { grid-template-columns:1fr; min-height:auto; padding-bottom:60px; }
  .hero-visual { order:-1; }
  .steps-grid { grid-template-columns:1fr 1fr; }
  .step-connector { display:none; }
  .features-grid { grid-template-columns:1fr 1fr; }
  .reseller-inner { grid-template-columns:1fr; gap:48px; }
  .footer-top { grid-template-columns:1fr 1fr 1fr; gap:32px; }
}
@media (max-width:768px) {
  .nav-links {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    width: 100%;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 24px;
    gap: 18px;
    z-index: 99;
    box-shadow: var(--shadow);
  }
  .nav-links.active {
    display: flex;
  }
  .mobile-nav-toggle {
    display: block;
  }
  .steps-grid { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:1fr; }
  .testimonials-grid { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; background:transparent; gap:16px; border-radius:0; }
  .pricing-card { border-radius:var(--radius-lg); border:1.5px solid var(--border); }
  .pricing-card.featured { border-color:var(--blue); }
  .integrations-grid { grid-template-columns:repeat(2,1fr); }
  .logos-row { gap:28px; }
  .footer-top { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1/-1; }
  .call-fields { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
}

/* Mockup Toggle state styles */
#mockupToggle[data-off="1"]::after { left: 3px; }
#mockupToggle[data-off="0"]::after { left: 24px; }


/* ─── NEW MULTI-PAGE STYLES ─────────────────────────────────────────── */

/* Page Transition Overlay */
.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--surface);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
body.fade-out .page-transition-overlay {
  opacity: 1;
  pointer-events: all;
}

/* Announcement Bar */
.announcement-bar {
  background: #18698c;
  color: #ffffff;
  text-align: center;
  padding: 8px 24px;
  font-size: 13px;
  font-weight: 600;
  z-index: 102;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  transition: background .3s;
}
html.dark .announcement-bar {
  background: #1e293b;
  border-bottom: 1px solid var(--border);
}
.announcement-bar a {
  color: #fff;
  text-decoration: underline;
  margin-left: 4px;
}
.announcement-bar .close-announcement {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  position: absolute;
  right: 20px;
}

/* Cookie Consent Banner */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  max-width: 380px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius);
  padding: 20px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: translateY(150%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background .3s, border-color .3s;
}
.cookie-banner.show {
  transform: translateY(0);
}
.cookie-banner p {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
}
.cookie-banner-btns {
  display: flex;
  gap: 8px;
}
.cookie-banner-btns .btn-ghost {
  flex: 1;
  text-align: center;
  border: 1px solid var(--border);
}

/* Chat Widget */
.chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 998;
}
.chat-button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: transform 0.2s, background 0.2s;
}
.chat-button:hover {
  transform: scale(1.05);
  background: var(--blue-dark);
}
.chat-window {
  position: absolute;
  bottom: 72px;
  right: 0;
  width: 360px;
  height: 480px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.chat-window.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}
.chat-header {
  background: var(--blue);
  color: #fff;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.chat-header-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
}
.chat-header-status {
  font-size: 11px;
  opacity: 0.8;
}
.chat-header-close {
  margin-left: auto;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
}
.chat-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  transition: background 0.3s;
}
.chat-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.4;
  word-wrap: break-word;
}
.chat-msg.incoming {
  background: var(--card-bg);
  color: var(--ink);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  border: 1px solid var(--border);
}
.chat-msg.outgoing {
  background: var(--blue);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.chat-suggested {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  transition: background 0.3s;
}
.chat-suggested-btn {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid var(--blue);
  background: none;
  color: var(--blue);
  cursor: pointer;
  transition: all 0.15s;
}
.chat-suggested-btn:hover {
  background: var(--blue-light);
  color: var(--blue-dark);
}
.chat-input-area {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--card-bg);
  display: flex;
  gap: 8px;
  align-items: center;
  transition: background 0.3s;
}
.chat-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  outline: none;
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.2s, background 0.2s;
}
.chat-input:focus {
  border-color: var(--blue);
  background: var(--card-bg);
}
.chat-send-btn {
  background: var(--blue);
  color: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.chat-send-btn:hover {
  background: var(--blue-dark);
}

/* FAQ Accordion */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq-item {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s, background 0.3s;
}
.faq-item:hover {
  border-color: var(--blue);
}
.faq-question {
  padding: 20px 24px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  color: var(--ink);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
  padding: 0 24px;
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.6;
}
.faq-item.active .faq-answer {
  max-height: 300px;
  padding: 0 24px 20px 24px;
  border-top: 1px solid var(--border);
}
.faq-icon {
  transition: transform 0.3s ease;
  font-size: 14px;
  color: var(--ink-faint);
}
.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* Interactive Calculators */
.calculator-container {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: var(--shadow);
  transition: background 0.3s, border-color 0.3s;
}
.calc-slider-group {
  margin-bottom: 24px;
}
.calc-label {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 8px;
}
.calc-slider {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 100px;
  outline: none;
  -webkit-appearance: none;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue);
  cursor: pointer;
  border: 2px solid var(--card-bg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s;
}
.calc-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}
.calc-results {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: center;
  transition: background 0.3s;
}
.calc-result-val {
  font-size: 28px;
  font-weight: 900;
  color: var(--blue);
  letter-spacing: -0.5px;
}
.calc-result-lbl {
  font-size: 12px;
  color: var(--ink-faint);
  font-weight: 600;
}

/* Tabs System */
.tabs-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.tab-btn {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.tab-btn:hover {
  border-color: var(--blue);
  color: var(--ink);
}
.tab-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.tab-content {
  display: none;
  animation: tabFadeIn 0.3s ease-out;
}
.tab-content.active {
  display: block;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Forms & Validation */
.form-group {
  margin-bottom: 20px;
}
.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.form-control {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  transition: all 0.2s;
  outline: none;
}
.form-control:focus {
  border-color: var(--blue);
  background: var(--card-bg);
  box-shadow: 0 0 0 3px var(--blue-light);
}
.form-control.invalid {
  border-color: #EF4444;
  background: rgba(239, 68, 68, 0.03);
}
.validation-msg {
  font-size: 12px;
  color: #EF4444;
  margin-top: 4px;
  display: none;
}
.form-control.invalid + .validation-msg {
  display: block;
}

/* Onboarding Wizard */
.onboarding-wizard {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 650px;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
  transition: background 0.3s, border-color 0.3s;
}
.wizard-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  position: relative;
}
.wizard-steps::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--border);
  z-index: 1;
}
.wizard-step {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.wizard-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 2px solid var(--border);
  color: var(--ink-faint);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.wizard-step.active .wizard-step-circle {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 4px var(--blue-light);
}
.wizard-step.completed .wizard-step-circle {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
.wizard-step-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-faint);
}
.wizard-step.active .wizard-step-label {
  color: var(--blue);
}
.wizard-step.completed .wizard-step-label {
  color: var(--green);
}
.wizard-panel {
  display: none;
}
.wizard-panel.active {
  display: block;
  animation: panelFadeIn 0.3s ease-out;
}
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Integrations Filter Page Search */
.search-container {
  max-width: 500px;
  margin: 0 auto 40px auto;
  position: relative;
}
.search-input {
  width: 100%;
  padding: 14px 20px;
  padding-left: 48px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--ink);
  font-size: 15px;
  outline: none;
  transition: all 0.2s;
}
.search-input:focus {
  border-color: var(--blue);
  box-shadow: 0 4px 16px rgba(40,143,188,0.1);
}
.search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  font-size: 18px;
  pointer-events: none;
}

/* Details Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.modal-window {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 550px;
  width: 90%;
  padding: 32px;
  position: relative;
  box-shadow: var(--shadow-lg);
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background .3s;
}
.modal-overlay.open .modal-window {
  transform: translateY(0);
}
.modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.15s;
}
.modal-close:hover {
  color: var(--ink);
}

/* Login/Signup layout extensions */
.auth-container {
  min-height: calc(100vh - 128px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: linear-gradient(180deg, var(--white) 0%, var(--surface) 100%);
  transition: background .3s;
}
html.dark .auth-container {
  background: linear-gradient(180deg, #0A1628 0%, #060d1a 100%);
}
.auth-card {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  width: 100%;
  max-width: 450px;
  box-shadow: var(--shadow-lg);
  transition: background 0.3s, border-color 0.3s;
}
.auth-header {
  text-align: center;
  margin-bottom: 32px;
}
.auth-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-top: 12px;
  margin-bottom: 8px;
}
.auth-subtitle {
  font-size: 14px;
  color: var(--ink-muted);
}
.social-auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.btn-social {
  padding: 10px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-social:hover {
  background: var(--surface);
  border-color: var(--ink-faint);
}
.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 500;
  margin: 24px 0;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border);
}
.auth-divider:not(:empty)::before {
  margin-right: 12px;
}
.auth-divider:not(:empty)::after {
  margin-left: 12px;
}

/* Demo Schedule Widget */
.demo-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: start;
}
.scheduler-card {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: background .3s, border-color .3s;
}
.scheduler-header {
  padding: 24px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  transition: background .3s, border-color .3s;
}
.scheduler-body {
  padding: 32px;
}
.calendar-widget {
  margin-bottom: 24px;
}
.calendar-months-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.calendar-month-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.calendar-nav-btn {
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.calendar-nav-btn:hover {
  background: var(--surface);
  color: var(--ink);
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  text-align: center;
}
.calendar-day-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.calendar-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.15s;
  border: none;
  background: none;
}
.calendar-cell.muted {
  color: var(--ink-faint);
  pointer-events: none;
  opacity: 0.3;
}
.calendar-cell.available {
  background: var(--blue-light);
  color: var(--blue-dark);
}
.calendar-cell.available:hover {
  background: var(--blue-mid);
  color: var(--blue-dark);
}
.calendar-cell.selected {
  background: var(--blue) !important;
  color: #fff !important;
}
.time-slots-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
  animation: tabFadeIn 0.3s ease-out;
}
.time-slot-btn {
  padding: 10px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.time-slot-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.time-slot-btn.selected {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.demo-success-card {
  text-align: center;
  padding: 48px 32px;
  animation: floatUp 0.5s ease-out;
}
.success-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px auto;
}


@media (max-width: 900px) {
  .demo-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   LUXURY MARBLE OVERRIDES — layered on top of the base design system
═══════════════════════════════════════════════════════════════════ */

/* ─── HEADING TREATMENT ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  letter-spacing: -0.5px;
}
/* Keep Inter for UI elements */
.btn-primary, .btn-ghost, .btn-primary-lg, .btn-green-lg,
.btn-white, .nav-links a, .pricing-cta, .tab-btn,
.form-label, .form-control, label, button, input, select, textarea {
  font-family: 'Inter', -apple-system, sans-serif;
}

/* ─── HERO BADGE — GOLD PILL ─────────────────────────────────────── */
.hero-badge {
  background: var(--gold-light);
  color: var(--gold-dark);
  border: 1px solid rgba(189,160,106,.35);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
  font-family: 'Inter', sans-serif;
}
.hero-badge::before {
  background: var(--gold);
  animation: pulseGold 2s infinite;
}
@keyframes pulseGold {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(189,160,106,.5); }
  50% { opacity: .7; transform: scale(.85); box-shadow: 0 0 0 4px rgba(189,160,106,0); }
}

/* ─── SECTION LABEL — GOLD REFINED ──────────────────────────────── */
.section-label {
  color: var(--gold-dark);
  letter-spacing: 0.18em;
  font-size: 11px;
  border-bottom: 1px solid rgba(189,160,106,.3);
  padding-bottom: 6px;
  display: inline-block;
}

/* ─── SECTION TITLE — SERIF ELEGANCE ────────────────────────────── */
.section-title {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

/* ─── GOLD DIVIDER UTILITY ───────────────────────────────────────── */
.gold-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold-mid) 50%, var(--gold) 70%, transparent 100%);
  margin: 0 auto;
  max-width: 200px;
  opacity: 0.6;
}

/* ─── BUTTONS — GOLD VARIANT ─────────────────────────────────────── */
.btn-gold {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1208;
  background: var(--gold-shimmer);
  text-decoration: none;
  padding: 13px 28px;
  border-radius: 4px;
  transition: all .25s;
  display: inline-block;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-gold);
  position: relative;
  overflow: hidden;
}
.btn-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 50%);
  pointer-events: none;
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(189,160,106,.4), 0 4px 12px rgba(189,160,106,.25);
  filter: brightness(1.06);
}

.btn-gold-outline {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-dark);
  background: transparent;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 4px;
  border: 1px solid var(--gold);
  cursor: pointer;
  transition: all .25s;
  display: inline-block;
}
.btn-gold-outline:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

/* ─── FEATURE CARDS — MARBLE REFINED ────────────────────────────── */
.feature-card {
  border-left: 2px solid transparent;
  transition: background .2s, border-color .2s;
}
.feature-card:hover {
  background: var(--gold-light) !important;
  border-left-color: var(--gold);
}
.feature-icon {
  background: var(--gold-light);
  border: 1px solid rgba(189,160,106,.25);
}

/* ─── INTEGRATION CARDS — GOLD BORDER ON HOVER ───────────────────── */
.integration-card:hover {
  border-color: var(--gold);
  box-shadow: 0 4px 20px rgba(189,160,106,.2);
}

/* ─── TESTIMONIAL CARDS — MARBLE SURFACE ────────────────────────── */
.testimonial-card {
  background: var(--card-bg);
  border-color: rgba(189,160,106,.2);
  border-radius: 4px;
}
.testimonial-card:hover {
  box-shadow: var(--shadow-gold);
  border-color: rgba(189,160,106,.4);
}
.testimonial-text::before {
  color: var(--gold);
}

/* ─── PRICING CARD — FEATURED WITH GOLD ─────────────────────────── */
.pricing-card {
  border-radius: 4px;
}
.pricing-card.featured {
  background: linear-gradient(160deg, #1a1208 0%, #2a1e0e 60%, #1a1208 100%);
}
.pricing-card.featured .pricing-badge {
  background: var(--gold-light);
  color: var(--gold-dark);
  border: 1px solid rgba(189,160,106,.4);
}
.pricing-card.featured .pricing-price { color: var(--gold-mid); }
.pricing-card.featured .pricing-name { color: var(--gold-light); }
.pricing-card.featured .pricing-features li::before { color: var(--gold); }
.pricing-card.featured .pricing-minutes {
  background: rgba(189,160,106,.12);
  color: var(--gold-mid);
  border: 1px solid rgba(189,160,106,.2);
}
.pricing-card.featured .pricing-cta-white {
  background: var(--gold-shimmer);
  color: #1a1208;
  font-weight: 700;
}
.pricing-card.featured .pricing-cta-white:hover {
  filter: brightness(1.08);
}
.pricing-badge {
  border-radius: 4px;
}
.pricing-cta {
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
}

/* ─── STEPS — GOLD CONNECTOR ─────────────────────────────────────── */
.step-connector {
  background: var(--gold-light);
  border-color: var(--gold-mid);
  color: var(--gold-dark);
}
.step-item { border-radius: 0; }

/* ─── FOOTER — DARK MARBLE ───────────────────────────────────────── */
footer {
  background: linear-gradient(180deg, #0e0b07 0%, #1a1208 50%, #0e0b07 100%);
  border-top: 1px solid rgba(189,160,106,.2);
}
html.dark footer {
  background: linear-gradient(180deg, #0a0805 0%, #110e08 100%);
}
.footer-logo .ai { color: var(--gold); }
.footer-bottom { border-top-color: rgba(189,160,106,.15); }

/* ─── RESELLER SECTION — EXCLUSIVE DARK MARBLE ───────────────────── */
.reseller-section {
  background: linear-gradient(160deg, #0e0b07 0%, #1a1208 40%, #12100a 100%);
  position: relative;
  overflow: hidden;
}
.reseller-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 50%, rgba(189,160,106,.06) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(189,160,106,.04) 0%, transparent 40%);
  pointer-events: none;
}
html.dark .reseller-section {
  background: linear-gradient(160deg, #080604 0%, #110e08 100%);
}

/* ─── ANNOUNCEMENT BAR — GOLD LUXURY ────────────────────────────── */
.announcement-bar {
  background: linear-gradient(90deg, #1a1208 0%, #2a1e0e 35%, #221808 65%, #1a1208 100%);
  border-bottom: 1px solid rgba(189,160,106,.25);
  color: var(--gold-mid);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.announcement-bar a { color: var(--gold); }
.announcement-bar .close-announcement { color: var(--gold-mid); }
html.dark .announcement-bar {
  background: linear-gradient(90deg, #080604 0%, #110e08 50%, #080604 100%);
}

/* ─── FINAL CTA — MARBLE GRADIENT ───────────────────────────────── */
.final-cta {
  background: linear-gradient(180deg, var(--marble-white) 0%, var(--gold-light) 100%);
  border-top: 1px solid rgba(189,160,106,.2);
}
html.dark .final-cta {
  background: linear-gradient(180deg, #0e0c0a 0%, #1a1208 100%);
}

/* ─── LOGOS SECTION ──────────────────────────────────────────────── */
.logos-section {
  background: var(--marble-cream);
  border-color: rgba(189,160,106,.2);
}

/* ─── AUTH CARD — GOLD BORDER ────────────────────────────────────── */
.auth-card {
  border-color: rgba(189,160,106,.25);
  border-radius: 4px;
  background: var(--card-bg);
  box-shadow: var(--shadow-gold), var(--shadow-lg);
}
.auth-container {
  background: linear-gradient(160deg, var(--marble-white) 0%, var(--marble-cream) 100%);
}
html.dark .auth-container {
  background: linear-gradient(160deg, #0e0c0a 0%, #12100e 100%);
}

/* ─── ONBOARDING WIZARD — GOLD TREATMENT ─────────────────────────── */
.onboarding-wizard {
  border-color: rgba(189,160,106,.25);
  border-radius: 4px;
  background: var(--card-bg);
  box-shadow: var(--shadow-gold);
}
.wizard-step.active .wizard-step-circle {
  border-color: var(--gold);
  background: var(--gold);
  color: #1a1208;
  box-shadow: 0 0 0 4px var(--gold-light);
}
.wizard-step.completed .wizard-step-circle {
  border-color: var(--gold-dark);
  background: var(--gold-dark);
}
.wizard-step.active .wizard-step-label { color: var(--gold-dark); }
.wizard-step.completed .wizard-step-label { color: var(--gold-dark); }

/* ─── SCHEDULER / MODAL — MARBLE SURFACE ─────────────────────────── */
.scheduler-card, .modal-window {
  border-color: rgba(189,160,106,.25);
  border-radius: 4px;
}
.scheduler-header {
  background: var(--marble-cream);
  border-bottom-color: rgba(189,160,106,.2);
}

/* ─── FAQ ITEM — GOLD BORDER ─────────────────────────────────────── */
.faq-item {
  border-color: rgba(189,160,106,.2);
  border-radius: 4px;
}
.faq-item:hover { border-color: var(--gold); }

/* ─── CALCULATOR ─────────────────────────────────────────────────── */
.calculator-container {
  border-color: rgba(189,160,106,.25);
  border-radius: 4px;
}
.calc-slider::-webkit-slider-thumb {
  background: var(--gold);
  border-color: var(--card-bg);
}
.calc-result-val { color: var(--gold-dark); }

/* ─── TABS ───────────────────────────────────────────────────────── */
.tab-btn.active {
  background: #1a1208;
  border-color: #1a1208;
  color: var(--gold-light);
}
.tab-btn:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
}

/* ─── SEARCH INPUT ───────────────────────────────────────────────── */
.search-input:focus {
  border-color: var(--gold);
  box-shadow: 0 4px 16px rgba(189,160,106,.12);
}

/* ─── FORM CONTROLS ──────────────────────────────────────────────── */
.form-control:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-light);
}

/* ─── HERO SUPPORT CHECKMARKS ────────────────────────────────────── */
.hero-support span::before { color: var(--gold-dark); }

/* ─── AI TRANSCRIPT BORDER ───────────────────────────────────────── */
.ai-transcript { border-left-color: var(--gold); }

/* ─── HERO INSTANT PILL ──────────────────────────────────────────── */
.hero-instant { border-left-color: var(--gold); }

/* ─── LIVE DOT KEEP GREEN ────────────────────────────────────────── */
/* (keep green as it conveys "live" status — intentional) */

/* ─── BENEFIT ROW — GOLD ON HOVER ───────────────────────────────── */
.benefit-row:hover { border-color: rgba(189,160,106,.5); }
.benefit-icon { background: rgba(189,160,106,.15); }

/* ─── PRICING NOTE PILL ──────────────────────────────────────────── */
.pricing-note-pill {
  background: var(--gold-light);
  color: var(--gold-dark);
  border: 1px solid rgba(189,160,106,.3);
}

/* ─── SCROLL ANIMATIONS STAY ─────────────────────────────────────── */
/* (keep existing fade-in rules) */

/* ─── EXCLUSIVE BADGE UTILITY ────────────────────────────────────── */
.exclusive-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1a1208;
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 2px;
  border: 1px solid rgba(189,160,106,.35);
}
html.dark .exclusive-badge {
  background: rgba(189,160,106,.08);
}