/* ======================================================
   TAITASOLOAI — COMPLETE LANDING PAGE
====================================================== */

:root {
  --bg: #f7f9fc;
  --white: #ffffff;
  --dark: #101827;
  --dark-2: #172236;
  --text: #172033;
  --muted: #69778c;
  --border: #e4e9f1;
  --blue: #4169f5;
  --blue-dark: #3154db;
  --purple: #7259f5;
  --cyan: #3ccfee;
  --green: #28c98a;
  --soft-blue: #eef3ff;
  --soft-purple: #f3efff;
  --gradient: linear-gradient(135deg, #4169f5 0%, #7259f5 58%, #985cf3 100%);
  --container: 1180px;
  --radius: 24px;
  --shadow: 0 25px 70px rgba(36,56,92,.12);
}

/* RESET */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }

/* TYPOGRAPHY */
h1, h2, h3, .brand-text { font-family: "Manrope", sans-serif; }
h1 {
  font-size: clamp(3.3rem, 6vw, 5.8rem);
  line-height: .98;
  letter-spacing: -.065em;
  font-weight: 800;
}
h2 {
  font-size: clamp(2.4rem, 4vw, 4.15rem);
  line-height: 1.06;
  letter-spacing: -.05em;
  font-weight: 800;
}
h1 span, h2 span { display: block; color: var(--blue); }

/* HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(17,24,39,.06);
}
.nav-container {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: white;
  background: var(--gradient);
  font-family: Manrope;
  font-weight: 800;
  font-size: 21px;
  box-shadow: 0 9px 24px rgba(65,105,245,.25);
}
.brand-text { font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.brand-text span { color: var(--blue); }
.nav-menu { display: flex; gap: 24px; }
.nav-menu a, .login-link {
  color: #59677b;
  font-size: 12px;
  font-weight: 600;
  transition: .2s;
}
.nav-menu a:hover, .login-link:hover { color: var(--blue); }
.nav-actions { display: flex; align-items: center; gap: 20px; }

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px;
  font-weight: 700;
  transition: .25s ease;
}
.btn-small { padding: 11px 18px; font-size: 12px; }
.btn-large { min-height: 57px; padding: 0 26px; font-size: 14px; }
.btn-primary {
  color: white;
  background: var(--gradient);
  box-shadow: 0 12px 30px rgba(65,105,245,.22);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 17px 40px rgba(65,105,245,.3); }
.btn-secondary {
  color: var(--dark);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.7);
}
.btn-secondary:hover { background: white; transform: translateY(-2px); }
.btn-glass {
  padding: 13px 18px;
  flex: 0 0 auto;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.btn-glass:hover { background: rgba(255,255,255,.10); transform: translateY(-2px); }

/* HERO */
.hero {
  position: relative;
  overflow: hidden;
  padding: 125px 0 120px;
  background:
    radial-gradient(circle at 85% 20%, rgba(108,91,245,.12), transparent 30%),
    radial-gradient(circle at 15% 75%, rgba(59,205,239,.10), transparent 30%),
    #fbfcff;
}
.hero-glow { position: absolute; border-radius: 50%; filter: blur(110px); pointer-events: none; }
.glow-one { width: 450px; height: 450px; right: -160px; top: 60px; background: rgba(88,100,255,.11); }
.glow-two { width: 350px; height: 350px; left: -170px; bottom: -50px; background: rgba(62,207,238,.11); }
.hero-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: .94fr 1.06fr;
  gap: 70px;
  align-items: center;
}
.hero-badge {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 8px 13px;
  border-radius: 100px;
  border: 1px solid rgba(65,105,245,.16);
  background: var(--soft-blue);
  color: var(--blue);
  font-size: 10px;
  letter-spacing: .12em;
  font-weight: 700;
}
.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(39,199,132,.5);
}
.hero-description {
  max-width: 625px;
  margin: 28px 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.78;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-benefits {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 13px 22px;
  color: #718096;
  font-size: 11px;
}
.hero-benefits div { display: flex; align-items: center; gap: 6px; }
.hero-benefits span { color: var(--green); }

/* CALENDAR MINI */
.calendar-trust { margin-top: 41px; }
.calendar-trust > p {
  margin-bottom: 14px;
  color: #9ba7b8;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .15em;
}
.calendar-mini-list { display: flex; flex-wrap: wrap; gap: 15px; }
.calendar-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: white;
  color: #57667b;
  font-size: 10px;
  font-weight: 600;
}
.google-calendar-icon, .outlook-calendar-icon, .apple-calendar-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  font-size: 8px;
  font-weight: 800;
}
.google-calendar-icon { color: #3478f6; background: #f5f8ff; border: 1px solid #dbe8ff; }
.outlook-calendar-icon { color: white; background: #1776e8; }
.apple-calendar-icon { color: #ff4c4c; background: white; border: 1px solid #dfe4eb; }

/* HERO PRODUCT */
.hero-product { position: relative; }
.browser-window {
  position: relative;
  z-index: 3;
  overflow: hidden;
  border-radius: 21px;
  border: 1px solid rgba(44,61,92,.11);
  background: white;
  box-shadow: var(--shadow);
  transform: perspective(1200px) rotateY(-3deg);
}
.browser-header {
  height: 43px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  background: #eef1f5;
  border-bottom: 1px solid #e3e7ed;
}
.browser-dots { display: flex; gap: 5px; }
.browser-dots span { width: 7px; height: 7px; border-radius: 50%; background: #bec6d2; }
.browser-url {
  margin: auto;
  width: 45%;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #8490a0;
  background: white;
  font-size: 8px;
}
.sample-website { overflow: hidden; color: #1e2c2a; background: #f7f1e9; }
.sample-nav {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.sample-brand { font-family: Georgia, serif; font-size: 13px; letter-spacing: .12em; }
.sample-brand small {
  display: block;
  font-family: Inter;
  font-size: 5px;
  text-align: center;
  letter-spacing: .2em;
}
.sample-nav-links { display: flex; gap: 17px; align-items: center; font-size: 7px; }
.sample-book { padding: 7px 11px; border-radius: 3px; color: white; background: #315d55; }
.sample-hero { min-height: 350px; display: grid; grid-template-columns: 1.08fr .92fr; }
.sample-copy { padding: 65px 20px 40px 42px; }
.sample-copy > small { color: #718b84; font-size: 5px; letter-spacing: .2em; }
.sample-copy h3 {
  margin: 10px 0 14px;
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.05;
}
.sample-copy p { max-width: 210px; margin-bottom: 15px; color: #78827e; font-size: 8px; }
.sample-copy button { border: 0; padding: 10px 14px; color: white; background: #315d55; font-size: 7px; }
.sample-photo {
  position: relative;
  margin: 22px 22px 22px 0;
  border-radius: 100px 100px 6px 6px;
  overflow: hidden;
  background: linear-gradient(145deg, #d6c0a8, #a5bbb2);
}
.decor-circle {
  position: absolute;
  width: 170px;
  height: 170px;
  right: -35px;
  top: 30px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
}
.availability-card {
  position: absolute;
  bottom: 19px;
  left: 17px;
  right: 17px;
  padding: 13px;
  border-radius: 8px;
  background: rgba(255,255,255,.84);
  backdrop-filter: blur(7px);
}
.availability-card small, .availability-card strong, .availability-card span { display: block; }
.availability-card small { color: #798681; font-size: 5px; letter-spacing: .15em; }
.availability-card strong { margin: 3px 0; font-size: 10px; }
.availability-card span { color: #73817d; font-size: 6px; }
.sample-services {
  min-height: 71px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  background: #315d55;
  color: white;
}
.sample-services div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.1);
}
.sample-services strong { font-size: 8px; }
.sample-services span { margin-top: 2px; opacity: .7; font-size: 6px; }

/* HERO FLOATING CARDS */
.floating-calendar-card, .floating-booking, .floating-call-card {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(30,53,91,.1);
  background: rgba(255,255,255,.96);
  box-shadow: 0 17px 40px rgba(34,51,83,.15);
  backdrop-filter: blur(10px);
}
.floating-calendar-card { top: -23px; right: 17px; padding: 11px 15px; border-radius: 12px; }
.calendar-status-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: white;
  background: var(--green);
  font-size: 11px;
  font-weight: 800;
}
.floating-calendar-card small, .floating-booking small, .floating-call-card small {
  display: block;
  color: #98a3b2;
  font-size: 6px;
  letter-spacing: .13em;
}
.floating-calendar-card strong, .floating-booking strong, .floating-call-card strong { display: block; font-size: 9px; }
.floating-booking { left: -35px; bottom: -26px; padding: 12px 15px; border-radius: 13px; }
.booking-check {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: white;
  background: var(--blue);
}
.floating-booking span, .floating-call-card span { display: block; color: #8390a0; font-size: 7px; }
.floating-call-card { right: -26px; bottom: 83px; padding: 12px 15px; border-radius: 13px; }
.call-pulse {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--gradient);
  box-shadow: 0 0 0 7px rgba(76,105,245,.08);
}

/* PRODUCT BAR */
.product-bar {
  padding: 30px 0;
  background: white;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.product-bar-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.product-bar-item { display: flex; align-items: center; justify-content: center; gap: 12px; }
.pillar-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--soft-blue);
}
.product-bar-item strong, .product-bar-item span { display: block; }
.product-bar-item strong { font-size: 12px; }
.product-bar-item span { color: #96a1b1; font-size: 8px; }

/* GENERAL SECTIONS */
.section { padding: 120px 0; }
.section-heading { max-width: 770px; margin-bottom: 57px; }
.section-heading.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-tag {
  margin-bottom: 15px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .17em;
}
.light-tag { color: #8fa5ff; }
.section-heading p {
  max-width: 650px;
  margin: 20px auto 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

/* PROBLEM */
.problem-section { background: var(--bg); }
.problem-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.problem-card {
  min-height: 275px;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: white;
  box-shadow: 0 10px 30px rgba(35,53,87,.04);
}
.problem-icon { margin-bottom: 30px; font-size: 28px; }
.problem-card h3 { margin-bottom: 10px; font-size: 19px; }
.problem-card p { color: var(--muted); font-size: 12px; line-height: 1.75; }

/* HOW IT WORKS */
.how-section { background: white; }
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.step-card {
  position: relative;
  min-height: 480px;
  padding: 25px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fafbfe;
}
.featured-step {
  border-color: rgba(65,105,245,.25);
  background:
    radial-gradient(circle at top right, rgba(88,103,245,.09), transparent 35%),
    #fafbff;
}
.step-number { color: #a2adbc; font-size: 10px; }
.step-icon { margin: 38px 0 19px; font-size: 28px; }
.ai-step { color: var(--blue); }
.step-card h3 { margin-bottom: 12px; font-size: 19px; }
.step-card > p { color: var(--muted); font-size: 11px; line-height: 1.75; }
.calendar-options { margin-top: 27px; display: grid; gap: 8px; }
.calendar-options > div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: white;
  font-size: 8px;
  font-weight: 600;
}
.calendar-options > div > span { margin-left: auto; color: var(--blue); font-size: 6px; }
.mini-google, .mini-outlook, .mini-apple {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  font-size: 7px;
  font-weight: 800;
}
.mini-google { color: #3272e8; border: 1px solid #dce7ff; background: #f5f8ff; }
.mini-outlook { color: white; background: #1673e6; }
.mini-apple { color: #f04b4b; border: 1px solid #e0e4ea; background: white; }
.business-form-preview {
  margin-top: 27px;
  padding: 14px;
  border: 1px solid #e7eaf3;
  border-radius: 12px;
  background: white;
}
.business-form-preview > div { padding: 8px 0; border-bottom: 1px solid #f0f2f6; }
.business-form-preview span, .business-form-preview strong { display: block; }
.business-form-preview span { margin-bottom: 2px; color: #a0a8b5; font-size: 7px; }
.business-form-preview strong { font-size: 9px; }
.price-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 0 !important; }
.build-checks, .launch-preview { margin-top: 27px; display: grid; gap: 8px; }
.build-checks span, .launch-check {
  padding: 8px 9px;
  border-radius: 7px;
  color: #66768a;
  background: white;
  border: 1px solid #e9edf3;
  font-size: 8px;
}

/* AI FRONTDESK */
.frontdesk-section {
  padding: 135px 0;
  color: white;
  background:
    radial-gradient(circle at 80% 30%, rgba(82,89,245,.18), transparent 35%),
    var(--dark);
}
.frontdesk-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 95px; align-items: center; }
.frontdesk-copy h2 span { color: #91a7ff; }
.frontdesk-copy > p {
  max-width: 570px;
  margin-top: 21px;
  color: #a5b0c1;
  font-size: 15px;
  line-height: 1.8;
}
.frontdesk-features { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.frontdesk-features > div { display: flex; gap: 10px; }
.frontdesk-check {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #64e1b1;
  background: rgba(58,215,157,.08);
  font-size: 9px;
}
.frontdesk-features strong { font-size: 11px; }
.frontdesk-features p { margin-top: 3px; color: #8291a6; font-size: 9px; line-height: 1.6; }
.phone-demo { position: relative; max-width: 430px; margin: auto; }
.phone-device {
  padding: 17px;
  overflow: hidden;
  border: 7px solid #252e3c;
  border-radius: 38px;
  color: var(--text);
  background: white;
  box-shadow: 0 35px 80px rgba(0,0,0,.32);
}
.phone-top { display: flex; justify-content: space-between; color: #788597; font-size: 7px; }
.call-header { padding: 27px 0 21px; text-align: center; }
.ai-avatar {
  width: 46px;
  height: 46px;
  margin: 0 auto 9px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: white;
  background: var(--gradient);
}
.call-header small { display: block; color: #99a4b4; font-size: 6px; letter-spacing: .13em; }
.call-header h3 { margin: 3px 0 7px; font-size: 16px; }
.call-active { color: var(--green); font-size: 6px; font-weight: 700; letter-spacing: .1em; }
.conversation { display: grid; gap: 9px; }
.speech { max-width: 83%; padding: 11px 12px; border-radius: 11px; font-size: 8px; line-height: 1.6; }
.customer-speech { margin-left: auto; color: white; background: var(--gradient); }
.ai-speech { color: #607086; background: #f1f4f8; }
.booking-created {
  margin-top: 19px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 11px;
  background: #effbf6;
}
.created-check {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: white;
  background: var(--green);
}
.booking-created small, .booking-created strong { display: block; }
.booking-created small { color: #83928b; font-size: 6px; }
.booking-created strong { font-size: 9px; }
.calendar-sync-card {
  position: absolute;
  right: -70px;
  bottom: 35px;
  padding: 13px;
  display: flex;
  gap: 10px;
  align-items: center;
  border-radius: 13px;
  color: #243147;
  background: white;
  box-shadow: 0 17px 40px rgba(0,0,0,.20);
}
.calendar-sync-card small, .calendar-sync-card strong { display: block; }
.calendar-sync-card small { color: #9ba5b2; font-size: 6px; }
.calendar-sync-card strong { font-size: 8px; }

/* CALENDARS */
.calendar-section { padding: 130px 0; color: white; background: #151e2e; }
.calendar-layout { display: grid; grid-template-columns: .88fr 1.12fr; gap: 90px; align-items: center; }
.calendar-copy h2 span { color: #8ca5ff; }
.calendar-copy > p {
  margin-top: 21px;
  max-width: 540px;
  color: #a5b0c1;
  font-size: 15px;
  line-height: 1.8;
}
.calendar-copy ul { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; list-style: none; }
.calendar-copy li { display: flex; align-items: center; gap: 8px; color: #b5becb; font-size: 11px; }
.calendar-copy li span { color: #56dca6; }
.calendar-provider-stack { display: grid; gap: 13px; }
.provider-card {
  min-height: 130px;
  padding: 23px;
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 17px;
  background: rgba(255,255,255,.045);
}
.provider-icon { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 13px; font-weight: 800; }
.google-large { color: #3274e8; background: white; }
.outlook-large { color: white; background: #1775e8; }
.apple-large { color: #ed4b4b; background: white; }
.provider-card small { color: #66768e; font-size: 6px; letter-spacing: .13em; }
.provider-card h3 { margin: 2px 0 5px; color: white; font-size: 17px; }
.provider-card p { max-width: 390px; color: #8796aa; font-size: 10px; }
.provider-status {
  padding: 6px 9px;
  border-radius: 100px;
  color: #60deb0;
  background: rgba(52,206,151,.08);
  border: 1px solid rgba(52,206,151,.12);
  font-size: 6px;
  letter-spacing: .13em;
}

/* CORE FEATURES */
.features-section { background: var(--bg); }
.features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; }
.feature-card {
  min-height: 265px;
  padding: 27px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: white;
}
.feature-large { grid-column: span 2; grid-row: span 2; min-height: 550px; }
.feature-icon {
  width: 41px;
  height: 41px;
  margin-bottom: 27px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--blue);
  background: var(--soft-blue);
}
.feature-card small { color: #9aa6b6; font-size: 7px; letter-spacing: .14em; }
.feature-card h3 { margin: 8px 0 11px; font-size: 19px; line-height: 1.3; }
.feature-large h3 { max-width: 560px; font-size: 28px; }
.feature-card p { max-width: 550px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.website-wireframe {
  height: 250px;
  margin-top: 40px;
  overflow: hidden;
  border-radius: 14px;
  background: #f5eee5;
  box-shadow: 0 18px 40px rgba(34,51,83,.1);
}
.wire-top { height: 30px; background: #e2e6eb; }
.wire-content { height: calc(100% - 30px); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px; }
.wire-copy { display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.wire-copy span { width: 90%; height: 8px; background: #cfc7bd; border-radius: 3px; }
.wire-copy span:first-child { width: 75%; height: 27px; background: #3d5a53; }
.wire-copy span:last-child { width: 50%; }
.wire-image { border-radius: 60px 60px 5px 5px; background: linear-gradient(145deg, #d0b493, #8bad9f); }

/* ======================================================
   GROWTH & REVENUE AI
====================================================== */
.growth-ai-section {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 12% 15%, rgba(104,87,245,.23), transparent 28%),
    radial-gradient(circle at 88% 75%, rgba(85,214,223,.13), transparent 30%),
    linear-gradient(180deg, #071020 0%, #0b1530 55%, #081126 100%);
}
.growth-ai-section:before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .12;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.growth-ai-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(20px);
}
.growth-ai-glow-one { top: 100px; left: -180px; width: 420px; height: 420px; background: rgba(104,87,245,.10); }
.growth-ai-glow-two { right: -180px; bottom: 60px; width: 420px; height: 420px; background: rgba(85,214,223,.07); }
.growth-ai-section .container { position: relative; z-index: 2; }
.growth-ai-heading { max-width: 900px; }
.growth-ai-heading h2 { color: #fff; }
.growth-ai-heading h2 span {
  color: transparent;
  background: linear-gradient(90deg, #cfc8ff, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
}
.growth-ai-heading p { max-width: 760px !important; margin-left: 0; color: rgba(255,255,255,.58); font-size: 1.02rem; }
.growth-ai-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.growth-ai-card {
  position: relative;
  min-height: 520px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  box-shadow: 0 24px 70px rgba(0,0,0,.15);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.growth-ai-card:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  content: "";
  opacity: .7;
  background: linear-gradient(90deg, var(--purple), var(--cyan));
}
.growth-ai-card:hover {
  transform: translateY(-6px);
  border-color: rgba(139,114,255,.32);
  box-shadow: 0 30px 80px rgba(0,0,0,.23);
}
.featured-growth-card {
  border-color: rgba(85,214,223,.24);
  background:
    radial-gradient(circle at 85% 10%, rgba(85,214,223,.10), transparent 35%),
    linear-gradient(180deg, rgba(104,87,245,.12), rgba(255,255,255,.025));
}
.growth-ai-card-top { margin-bottom: 32px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.growth-ai-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(139,114,255,.25);
  border-radius: 16px;
  color: var(--cyan);
  background: linear-gradient(145deg, rgba(104,87,245,.20), rgba(85,214,223,.09));
  font-size: 1.35rem;
  font-weight: 900;
}
.growth-ai-badge {
  padding: 7px 11px;
  border: 1px solid rgba(85,214,223,.14);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(85,214,223,.06);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .11em;
}
.growth-ai-card h3 { margin-bottom: 10px; color: #fff; font-size: 1.65rem; }
.growth-ai-summary { margin-bottom: 18px; color: #ded9ff !important; font-size: 1rem; font-weight: 750; }
.growth-ai-card > p:not(.growth-ai-summary) { color: rgba(255,255,255,.52); font-size: .9rem; }
.growth-ai-list { margin: 22px 0 30px; padding: 0; display: grid; gap: 10px; list-style: none; }
.growth-ai-list li { position: relative; padding-left: 27px; color: rgba(255,255,255,.63); font-size: .88rem; }
.growth-ai-list li:before {
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  content: "✓";
  border-radius: 50%;
  color: var(--cyan);
  background: rgba(85,214,223,.10);
  font-size: .62rem;
  font-weight: 900;
}
.growth-ai-result { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
.growth-ai-result small {
  display: block;
  margin-bottom: 5px;
  color: rgba(255,255,255,.35);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .12em;
}
.growth-ai-result strong { color: #fff; font-size: .92rem; }
.growth-ai-connector {
  margin-top: 30px;
  padding: 30px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  background: linear-gradient(90deg, rgba(104,87,245,.13), rgba(85,214,223,.05));
}
.growth-ai-connector-copy { max-width: 760px; }
.growth-ai-connector-copy > span {
  display: block;
  margin-bottom: 9px;
  color: var(--cyan);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .13em;
}
.growth-ai-connector h3 { margin-bottom: 8px; color: #fff; font-size: 1.35rem; }
.growth-ai-connector p { margin: 0; color: rgba(255,255,255,.50); }

/* ======================================================
   TELNYX EMAIL ENGINE
====================================================== */
.email-engine-section {
  position: relative;
  padding: 135px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 15%, rgba(65,105,245,.09), transparent 32%),
    #f7f9fd;
}
.email-engine-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 82px; align-items: center; }
.email-kicker {
  width: fit-content;
  margin-bottom: 18px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 100px;
  color: var(--blue);
  background: #edf2ff;
  border: 1px solid #dce5ff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .14em;
}
.email-kicker-icon { font-size: 12px; }
.email-engine-copy h2 span { color: var(--blue); }
.email-engine-copy > p {
  max-width: 610px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}
.email-provider-note {
  width: fit-content;
  margin-top: 25px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #dde4ef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(38,56,90,.05);
}
.provider-chip-icon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: #101827;
  font-weight: 800;
}
.email-provider-note small, .email-provider-note strong { display: block; }
.email-provider-note small { color: #9aa6b6; font-size: 6px; letter-spacing: .12em; }
.email-provider-note strong { margin-top: 2px; font-size: 10px; }
.email-capability-grid { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.email-capability {
  display: flex;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e5eaf2;
  border-radius: 13px;
  background: rgba(255,255,255,.78);
}
.email-capability > span {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--green);
  background: rgba(40,201,138,.08);
  font-size: 9px;
}
.email-capability strong { font-size: 10px; }
.email-capability p { margin-top: 3px; color: #8290a3; font-size: 8px; line-height: 1.55; }

/* Email dashboard mockup */
.email-dashboard {
  padding: 20px;
  border: 1px solid #dfe5ee;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(35,54,88,.12);
}
.email-dashboard-top {
  padding: 4px 3px 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #edf0f4;
}
.email-dashboard-top small, .email-dashboard-top strong { display: block; }
.email-dashboard-top small { color: #9aa5b5; font-size: 6px; letter-spacing: .13em; }
.email-dashboard-top strong { margin-top: 2px; font-size: 12px; }
.campaign-status {
  padding: 6px 9px;
  border-radius: 100px;
  color: var(--green);
  background: #effbf6;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .13em;
}
.campaign-preview {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #e6e0d7;
  border-radius: 15px;
  background: #f9f4ec;
}
.campaign-preview-header {
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-bottom: 1px solid #eee9e2;
}
.campaign-brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: #315d55;
  font-size: 10px;
  font-weight: 800;
}
.campaign-preview-header strong, .campaign-preview-header span { display: block; }
.campaign-preview-header strong { font-size: 9px; }
.campaign-preview-header span { color: #9c9b96; font-size: 6px; }
.campaign-hero { padding: 31px 28px 35px; text-align: center; }
.campaign-hero small { color: #66867e; font-size: 6px; letter-spacing: .17em; }
.campaign-hero h3 {
  max-width: 390px;
  margin: 9px auto 10px;
  color: #263934;
  font-family: Georgia, serif;
  font-size: 24px;
  line-height: 1.15;
}
.campaign-hero p { max-width: 390px; margin: 0 auto 16px; color: #77827e; font-size: 8px; }
.campaign-hero button { padding: 9px 13px; border: 0; color: #fff; background: #315d55; font-size: 7px; }
.campaign-audience {
  margin-top: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  border: 1px solid #edf0f4;
  border-radius: 11px;
  background: #fbfcfe;
}
.audience-label span, .audience-label strong { display: block; }
.audience-label span { color: #9aa5b4; font-size: 6px; }
.audience-label strong { font-size: 8px; }
.audience-count {
  margin-left: auto;
  min-width: 42px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--blue);
  background: var(--soft-blue);
  font-size: 9px;
  font-weight: 800;
}
.campaign-metrics { margin-top: 14px; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.campaign-metrics > div {
  padding: 11px;
  border: 1px solid #edf0f4;
  border-radius: 10px;
  background: #fbfcfe;
}
.campaign-metrics small, .campaign-metrics strong, .campaign-metrics span { display: block; }
.campaign-metrics small { color: #a0a9b6; font-size: 5px; letter-spacing: .1em; }
.campaign-metrics strong { margin: 3px 0 1px; font-size: 12px; }
.campaign-metrics span { color: #7f8da0; font-size: 6px; }
.metric-revenue { background: #effbf6 !important; border-color: #d9f2e7 !important; }
.metric-revenue strong { color: #15865c; }
.campaign-channel-row {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
}
.channel-pill {
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 100px;
  color: #627087;
  background: #f3f5f8;
  font-size: 7px;
  font-weight: 700;
}
.active-channel { color: var(--blue); background: var(--soft-blue); }
.channel-plus { color: #b1bbc8; font-size: 8px; }

/* COMMUNICATION JOURNEY */
.communications-section { padding: 120px 0; background: #fff; }
.communications-heading { max-width: 800px; }
.journey-grid {
  display: grid;
  grid-template-columns: 1fr 42px 1fr 42px 1fr 42px 1fr;
  align-items: center;
  gap: 0;
}
.journey-card {
  min-height: 235px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fafbfe;
}
.journey-step { color: #a5afbd; font-size: 8px; }
.journey-icon { margin: 25px 0 13px; font-size: 26px; }
.journey-card h3 { margin-bottom: 8px; font-size: 16px; }
.journey-card p { color: var(--muted); font-size: 10px; line-height: 1.65; }
.journey-arrow { text-align: center; color: #bac2ce; }

/* AI EDITING */
.ai-edit-section {
  padding: 135px 0;
  background: linear-gradient(180deg, #f2f5fb, #f8f9fc);
}
.ai-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 95px; align-items: center; }
.ai-window {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: white;
  box-shadow: var(--shadow);
}
.ai-window-top { display: flex; align-items: center; gap: 11px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.ai-window-top .ai-avatar { margin: 0; }
.ai-window-top strong, .ai-window-top span { display: block; }
.ai-window-top strong { font-size: 10px; }
.ai-window-top span { color: #97a2b2; font-size: 7px; }
.user-message, .ai-message { max-width: 83%; margin-top: 20px; padding: 13px 15px; border-radius: 12px; font-size: 10px; line-height: 1.6; }
.user-message { margin-left: auto; color: white; background: var(--gradient); }
.ai-message { display: flex; gap: 8px; color: #68778c; background: #f4f6fa; }
.ai-message > span { color: var(--blue); }
.service-update {
  margin-top: 22px;
  padding: 17px;
  border-radius: 12px;
  border: 1px solid #e8e4dc;
  color: #24342f;
  background: #f8f4ed;
}
.service-update small, .service-update strong, .service-update span { display: block; }
.service-update small { color: #8f938c; font-size: 6px; letter-spacing: .14em; }
.service-update strong { margin: 4px 0; font-size: 12px; }
.service-update span { color: #3e7869; font-size: 8px; font-weight: 600; }
.ai-edit-copy > p { max-width: 530px; margin-top: 20px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.prompt-list { margin-top: 28px; display: grid; gap: 8px; }
.prompt-list div {
  padding: 12px 14px;
  display: flex;
  gap: 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  color: #67768a;
  font-size: 10px;
}
.prompt-list span { color: var(--blue); }

/* PROFESSIONALS */
.professionals-section { padding: 125px 0; background: white; }
.professional-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.professional {
  min-height: 125px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: #fbfcfe;
  transition: .2s;
}
.professional:hover {
  transform: translateY(-3px);
  border-color: rgba(65,105,245,.23);
  box-shadow: 0 15px 30px rgba(40,59,90,.06);
}
.professional div { margin-bottom: 12px; font-size: 24px; }
.professional strong { font-size: 11px; }

/* TRANSFORMATION */
.transformation-section { background: #f7f9fc; }
.transformation { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; }
.before-card, .after-card {
  min-height: 410px;
  padding: 40px;
  border: 1px solid var(--border);
  border-radius: 24px;
}
.before-card { background: white; }
.after-card {
  background:
    radial-gradient(circle at top right, rgba(72,91,245,.10), transparent 38%),
    #f8f9ff;
  border-color: rgba(65,105,245,.18);
}
.before-card small, .after-card small { color: #9ca7b5; font-size: 7px; letter-spacing: .15em; }
.before-card h3, .after-card h3 { margin-top: 11px; font-size: 26px; }
.scattered { margin: 32px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.scattered span {
  padding: 9px 12px;
  border: 1px solid #e5e8ee;
  border-radius: 8px;
  background: #fbfcfe;
  color: #758296;
  font-size: 9px;
}
.before-card p, .after-card p { color: var(--muted); font-size: 11px; }
.transform-arrow { text-align: center; color: #aeb7c4; font-size: 24px; }
.after-logo {
  width: 70px;
  height: 70px;
  margin: 38px 0 12px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: white;
  background: var(--gradient);
  font-family: Manrope;
  font-size: 32px;
  font-weight: 800;
  box-shadow: 0 15px 35px rgba(65,105,245,.22);
}
.after-name { display: block; margin-bottom: 25px; font-family: Manrope; font-size: 16px; }
.after-name span { color: var(--blue); }

/* FINAL CTA */
.final-cta {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background: var(--dark);
}
.cta-glow {
  position: absolute;
  width: 700px;
  height: 500px;
  left: 50%;
  bottom: -400px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(82,92,245,.25);
  filter: blur(100px);
}
.cta-panel { position: relative; z-index: 2; max-width: 900px; margin: auto; text-align: center; color: white; }
.cta-tag {
  width: fit-content;
  margin: 0 auto 23px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 100px;
  color: #9badff;
  background: rgba(255,255,255,.04);
  font-size: 8px;
  letter-spacing: .15em;
}
.cta-panel h2 span { color: #8da4ff; }
.cta-panel > p { max-width: 650px; margin: 22px auto 30px; color: #a7b2c2; font-size: 14px; line-height: 1.8; }
.cta-promise {
  margin: 10px auto 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
  color: #64758d;
}
.cta-promise div { display: flex; gap: 7px; align-items: center; color: #dce4f2; font-size: 10px; }
.cta-panel h4 { margin-bottom: 16px; color: #75859b; font-size: 9px; letter-spacing: .1em; }
.calendar-buttons { max-width: 620px; margin: auto; display: grid; gap: 9px; }
.calendar-button {
  padding: 13px 17px;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  transition: .2s;
}
.calendar-button:hover {
  transform: translateY(-2px);
  border-color: rgba(142,162,255,.38);
  background: rgba(255,255,255,.08);
}
.calendar-button small, .calendar-button strong { display: block; }
.calendar-button small { color: #65768e; font-size: 6px; letter-spacing: .12em; }
.calendar-button strong { font-size: 11px; }
.calendar-button > span { color: #8599ff; }
.cta-note { margin-top: 23px; color: #64758c; font-size: 8px; }
.cta-note span { margin: 0 8px; }

/* FOOTER */
.footer {
  padding: 48px 0 28px;
  background: #0d1422;
  color: white;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-top { display: flex; align-items: center; }
.footer-top p { margin-left: 28px; color: #66758a; font-size: 9px; }
.footer-links { margin-left: auto; display: flex; gap: 18px; color: #738399; font-size: 9px; }
.footer-links a:hover { color: white; }
.footer-bottom {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.06);
  color: #4d5e75;
  font-size: 8px;
}

/* ======================================================
   RESPONSIVE — LARGE TABLET
====================================================== */
@media (max-width: 1100px) {
  .nav-menu { display: none; }
  .hero-grid, .frontdesk-grid, .calendar-layout, .email-engine-grid, .ai-edit-grid { grid-template-columns: 1fr; }
  .hero-product { max-width: 720px; margin: 40px auto 0; }
  .steps { grid-template-columns: repeat(2,1fr); }
  .features-grid { grid-template-columns: repeat(2,1fr); }
  .feature-large { grid-column: span 2; }
  .professional-grid { grid-template-columns: repeat(3,1fr); }
  .calendar-sync-card { right: -20px; }
  .email-dashboard { max-width: 700px; margin: 0 auto; }
  .journey-grid { grid-template-columns: repeat(4,1fr); gap: 15px; }
  .journey-arrow { display: none; }
}

/* ======================================================
   RESPONSIVE — TABLET / MOBILE
====================================================== */
@media (max-width: 760px) {
  .container { width: calc(100% - 28px); }
  .site-header { position: relative; }
  .nav-container { min-height: 69px; }
  .login-link { display: none; }
  .brand-text { font-size: 15px; }
  .brand-icon { width: 35px; height: 35px; }
  .hero { padding: 75px 0 90px; }
  h1 { font-size: clamp(2.8rem, 12vw, 4.2rem); }
  h2 { font-size: clamp(2.1rem, 9vw, 3.2rem); }
  .hero-description { font-size: 15px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .calendar-mini-list { display: grid; grid-template-columns: 1fr; }
  .browser-window { transform: none; }
  .sample-nav-links { display: none; }
  .sample-hero { grid-template-columns: 1fr 1fr; }
  .sample-copy { padding: 45px 15px 30px 22px; }
  .sample-copy h3 { font-size: 25px; }
  .floating-booking { left: 4px; }
  .floating-call-card { right: 4px; }
  .product-bar-grid { grid-template-columns: 1fr 1fr; }
  .product-bar-item { justify-content: flex-start; }
  .section { padding: 88px 0; }
  .problem-grid, .steps, .features-grid, .growth-ai-grid { grid-template-columns: 1fr; }
  .feature-large { grid-column: auto; }
  .frontdesk-section, .calendar-section, .email-engine-section, .professionals-section, .ai-edit-section { padding: 90px 0; }
  .frontdesk-grid, .calendar-layout, .email-engine-grid, .ai-edit-grid { gap: 50px; }
  .frontdesk-features, .email-capability-grid { grid-template-columns: 1fr; }
  .calendar-copy ul { grid-template-columns: 1fr; }
  .provider-card { grid-template-columns: 50px 1fr; padding: 17px; }
  .provider-status { display: none; }
  .calendar-sync-card { position: static; margin-top: 15px; }
  .professional-grid { grid-template-columns: repeat(2,1fr); }
  .transformation { grid-template-columns: 1fr; gap: 17px; }
  .transform-arrow { transform: rotate(90deg); }
  .growth-ai-connector { align-items: flex-start; flex-direction: column; }
  .growth-ai-connector .btn { width: 100%; }
  .campaign-metrics { grid-template-columns: 1fr 1fr; }
  .journey-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .footer-top { align-items: flex-start; flex-direction: column; gap: 17px; }
  .footer-top p { margin-left: 0; }
  .footer-links { margin-left: 0; flex-wrap: wrap; }
}

/* ======================================================
   RESPONSIVE — SMALL MOBILE
====================================================== */
@media (max-width: 480px) {
  .nav-actions .btn { padding: 9px 11px; font-size: 10px; }
  .hero-benefits { display: grid; }
  .floating-calendar-card, .floating-call-card { display: none; }
  .sample-photo { margin-right: 10px; }
  .sample-services { grid-template-columns: 1fr; }
  .sample-services div:nth-child(n+2) { display: none; }
  .product-bar-grid { grid-template-columns: 1fr; }
  .professional-grid { grid-template-columns: 1fr 1fr; }
  .cta-promise { flex-direction: column; }
  .cta-promise > span { display: none; }
  .growth-ai-card { padding: 25px; min-height: auto; }
  .growth-ai-card h3 { font-size: 1.4rem; }
  .growth-ai-card-top { margin-bottom: 25px; }
  .growth-ai-connector { padding: 25px; }
  .campaign-metrics, .journey-grid { grid-template-columns: 1fr; }
}

/* ======================================================
   WELVANTA-STYLE VISUAL SYSTEM OVERRIDE
   Premium navy / violet / cyan, high-contrast and card-driven.
====================================================== */

:root {
  --bg: #07101f;
  --white: #ffffff;
  --dark: #07101f;
  --dark-2: #0b1628;
  --text: #f7f9fc;
  --muted: #96a5ba;
  --border: rgba(255,255,255,.085);
  --blue: #8170f7;
  --blue-dark: #6d5bea;
  --purple: #836df8;
  --cyan: #63dce9;
  --green: #5fe0b0;
  --soft-blue: rgba(129,112,247,.10);
  --soft-purple: rgba(131,109,248,.10);
  --gradient: linear-gradient(135deg, #9f8cff 0%, #7d70f7 48%, #65dce9 100%);
  --shadow: 0 35px 90px rgba(0,0,0,.32);
}

body {
  color: var(--text);
  background: #07101f;
}

/* Header */
.site-header {
  background: rgba(7,16,31,.86);
  border-bottom: 1px solid rgba(255,255,255,.055);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.brand-icon {
  color: #07101f;
  background: linear-gradient(135deg,#9d89ff,#63dce9);
  box-shadow: 0 0 30px rgba(99,220,233,.14);
}

.brand-text { color: #fff; }
.brand-text span { color: var(--cyan); }
.nav-menu a, .login-link { color: #9ba8bb; }
.nav-menu a:hover, .login-link:hover { color: #fff; }

.btn-primary {
  color: #07101f;
  background: linear-gradient(135deg,#a18dff 0%,#7f70f8 46%,#69dce8 100%);
  box-shadow: 0 14px 34px rgba(112,101,245,.19);
}

.btn-primary:hover { box-shadow: 0 20px 45px rgba(112,101,245,.28); }
.btn-secondary {
  color: #edf2f8;
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.12);
}
.btn-secondary:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
}

/* Hero */
.hero {
  position: relative;
  background:
    radial-gradient(circle at 82% 17%, rgba(116,92,247,.20), transparent 27%),
    radial-gradient(circle at 94% 72%, rgba(79,214,229,.08), transparent 25%),
    linear-gradient(180deg,#07101f 0%,#07101c 72%,#091421 100%);
  padding-top: 112px;
  padding-bottom: 112px;
}

.hero:before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:68px 68px;
  mask-image:linear-gradient(to bottom,transparent 3%,#000 24%,#000 80%,transparent);
}

.hero-grid { position:relative; z-index:2; }
.hero-badge {
  border-color: rgba(99,220,233,.14);
  background: rgba(99,220,233,.045);
  color: #87e4ed;
}
.badge-dot { background: #5fe0b0; box-shadow:0 0 12px rgba(95,224,176,.55); }
.hero h1 { color:#fff; }
.hero h1 span { color:#cbc5ff; }
.hero-description { color:#a4b2c4; }
.hero-benefits { color:#7c8ca1; }
.hero-benefits span { color:#5fe0b0; }
.calendar-trust > p { color:#62748b; }
.calendar-mini {
  color:#a7b5c7;
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.08);
}

/* Browser mockup in dark glass frame */
.browser-window {
  border-color: rgba(255,255,255,.10);
  background:#0d182a;
  box-shadow:0 45px 100px rgba(0,0,0,.40);
}
.browser-header { background:#121e31; border-color:rgba(255,255,255,.05); }
.browser-dots span { background:#465870; }
.browser-url { color:#64768d; background:#0c1625; }

.floating-calendar-card,
.floating-booking,
.floating-call-card {
  color:#fff;
  background:rgba(11,22,39,.96);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 20px 50px rgba(0,0,0,.34);
}
.floating-calendar-card small,
.floating-booking small,
.floating-call-card small { color:#64768c; }
.floating-booking span,
.floating-call-card span { color:#718298; }
.calendar-status-icon { background:#5fe0b0; color:#07110d; }
.booking-check { background:#8170f7; }
.call-pulse { background:linear-gradient(135deg,#8170f7,#63dce9); }

/* Four-pillar bar */
.product-bar {
  background:#091321;
  border-color:rgba(255,255,255,.06);
}
.product-bar-item { color:#eef2f7; }
.product-bar-item span { color:#687990; }
.pillar-icon {
  background:rgba(126,110,247,.10);
  border:1px solid rgba(126,110,247,.13);
}

/* Problem: clean light section like Welvanta's editorial sections */
.problem-section {
  color:#172033;
  background:#f7f8fb;
}
.problem-section .section-tag { color:#6559e8; }
.problem-section h2 span { color:#6255df; }
.problem-section .section-heading p { color:#718094; }
.problem-card {
  background:#fff;
  border-color:#e2e6ed;
  box-shadow:none;
}
.problem-card h3 { color:#172033; }
.problem-card p { color:#6f7c8f; }
.problem-icon {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#f0edff;
}

/* How it works: dark editorial */
.how-section {
  color:#fff;
  background:#08121f;
}
.how-section .section-tag { color:#7fe0ea; }
.how-section h2 span { color:#c8c2ff; }
.how-section .section-heading p { color:#8797aa; }
.step-card {
  color:#fff;
  border-color:rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.017));
}
.featured-step {
  border-color:rgba(112,94,245,.28);
  background:
    radial-gradient(circle at 90% 10%,rgba(98,216,231,.08),transparent 35%),
    linear-gradient(180deg,rgba(113,90,246,.10),rgba(255,255,255,.017));
}
.step-number { color:#5f6f85; }
.step-card > p { color:#8190a4; }
.calendar-options > div,
.business-form-preview,
.build-checks span,
.launch-check {
  color:#a9b6c7;
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.07);
}
.business-form-preview > div { border-color:rgba(255,255,255,.06); }
.business-form-preview span { color:#607187; }
.business-form-preview strong { color:#fff; }

/* AI FrontDesk: light cards */
.frontdesk-section {
  color:#172033;
  background:#f7f8fb;
}
.frontdesk-section .section-tag { color:#6658e8; }
.frontdesk-section h2 span { color:#6658e8; }
.frontdesk-section > .container > .frontdesk-copy > p,
.frontdesk-copy > p { color:#6d7b8d; }
.frontdesk-features p { color:#778497; }
.frontdesk-features strong { color:#172033; }
.frontdesk-check { color:#29a879; background:#eaf9f2; }
.phone-device {
  color:#172033;
  background:#fff;
  border-color:#121b2b;
  box-shadow:0 30px 80px rgba(26,38,63,.16);
}

/* Calendar section */
.calendar-section {
  background:
    radial-gradient(circle at 90% 25%,rgba(112,92,246,.12),transparent 30%),
    #091321;
}
.calendar-copy h2 span { color:#c8c2ff; }
.calendar-copy > p { color:#91a0b4; }
.calendar-copy li { color:#a6b2c2; }
.provider-card {
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.08);
}
.provider-card p { color:#7d8da2; }

/* Main feature grid: light, premium and quieter */
.features-section {
  color:#172033;
  background:#f7f8fb;
}
.features-section .section-tag { color:#6658e8; }
.features-section h2 span { color:#6658e8; }
.features-section .section-heading p { color:#6f7d90; }
.feature-card {
  background:#fff;
  border-color:#e1e6ed;
  box-shadow:none;
}
.feature-card small { color:#969fac; }
.feature-card p { color:#707d90; }
.feature-icon { color:#6658e8; background:#f0edff; }

/* Growth section: preserve the best dark section, tune it toward Welvanta */
.growth-ai-section {
  background:
    radial-gradient(circle at 12% 15%,rgba(104,87,245,.23),transparent 28%),
    radial-gradient(circle at 88% 75%,rgba(85,214,223,.13),transparent 30%),
    linear-gradient(180deg,#071020 0%,#0b1530 55%,#081126 100%);
}
.growth-ai-heading h2 { color:#fff; }
.growth-ai-heading h2 span { color:#cbc5ff; background:none; -webkit-text-fill-color:currentColor; }
.growth-ai-heading p { color:rgba(255,255,255,.58); }
.growth-ai-card {
  border-color:rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  box-shadow:0 24px 70px rgba(0,0,0,.14);
}
.growth-ai-card h3 { color:#fff; }
.growth-ai-summary { color:#d8d3ff !important; }
.growth-ai-card > p:not(.growth-ai-summary),
.growth-ai-list li { color:rgba(255,255,255,.55); }
.growth-ai-result strong { color:#fff; }
.btn-glass {
  color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
}

/* Email: premium light analytics panel */
.email-engine-section {
  color:#172033;
  background:#f7f8fb;
}
.email-kicker { color:#6658e8; }
.email-engine-copy h2 { color:#172033; }
.email-engine-copy h2 span { color:#6658e8; }
.email-engine-copy > p { color:#6e7c8f; }
.email-provider-note {
  background:#fff;
  border-color:#e0e5ec;
}
.email-provider-note small { color:#98a2af; }
.email-provider-note strong { color:#172033; }
.provider-chip-icon {
  color:#07101f;
  background:linear-gradient(135deg,#9d89ff,#63dce9);
}
.email-capability strong { color:#172033; }
.email-capability p { color:#758296; }
.email-capability > span { color:#2aa877; background:#eaf9f3; }
.email-dashboard {
  border-color:#dfe4eb;
  background:#fff;
  box-shadow:0 30px 75px rgba(25,40,68,.12);
}
.email-dashboard-top { background:#111c2d; color:#fff; }
.campaign-status { color:#5fe0b0; background:rgba(95,224,176,.05); }
.campaign-preview { background:#f3ede5; color:#26312f; }
.campaign-audience { background:#fafbfc; border-color:#e9edf2; }
.campaign-metrics > div { background:#fafbfc; border-color:#e9edf2; }
.metric-revenue { background:#f1efff !important; }
.channel-pill { background:#f0edff; color:#5d51ce; }

/* Communications: dark */
.communications-section {
  color:#fff;
  background:#091321;
}
.communications-section .section-tag { color:#7fe0ea; }
.communications-heading h2 span { color:#c8c2ff; }
.communications-heading p { color:#8797aa; }
.communication-card,
.communication-node,
.journey-card {
  border-color:rgba(255,255,255,.08) !important;
  background:rgba(255,255,255,.035) !important;
}

/* AI editor: light */
.ai-edit-section {
  color:#172033;
  background:#f7f8fb;
}
.ai-edit-copy h2 span { color:#6658e8; }
.ai-edit-copy > p { color:#6e7c8f; }
.ai-window {
  border-color:#dfe4eb;
  background:#fff;
  box-shadow:0 30px 75px rgba(25,40,68,.11);
}
.prompt-list div { background:#fff; border-color:#e0e5ec; color:#69778a; }

/* Professionals: dark */
.professionals-section {
  color:#fff;
  background:#08111f;
}
.professionals-section .section-tag { color:#7fe0ea; }
.professionals-section h2 span { color:#c8c2ff; }
.professional {
  color:#fff;
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.08);
}
.professional:hover {
  border-color:rgba(129,112,247,.30);
  box-shadow:0 18px 40px rgba(0,0,0,.16);
}

/* Transformation: editorial light */
.transformation-section {
  color:#172033;
  background:#f7f8fb;
}
.before-card,
.after-card {
  border-color:#e0e5ec;
  background:#fff;
}
.after-card {
  background:radial-gradient(circle at top right,rgba(112,91,247,.09),transparent 38%),#fff;
  border-color:rgba(112,91,247,.20);
}
.before-card p,
.after-card p { color:#6f7c8e; }
.scattered span { color:#707d90; background:#f8f9fb; border-color:#e4e8ee; }
.after-logo {
  background:linear-gradient(135deg,#9d89ff,#63dce9);
  color:#07101f;
}
.after-name { color:#172033; }

/* Final CTA */
.final-cta {
  background:
    radial-gradient(circle at 50% 0%,rgba(112,91,247,.18),transparent 36%),
    #08111f;
}
.cta-panel h2 { color:#fff; }
.cta-panel h2 span { color:#c8c2ff; }
.cta-panel > p { color:#8f9db1; }
.calendar-button {
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.09);
}
.calendar-button:hover {
  border-color:rgba(129,112,247,.32);
  background:rgba(255,255,255,.055);
}

/* Footer */
.footer { background:#050a13; border-color:rgba(255,255,255,.05); }
.footer-top p, .footer-links { color:#617288; }
.footer-bottom { color:#405268; border-color:rgba(255,255,255,.05); }

/* Better section headings */
.section-tag {
  font-size:9px;
  letter-spacing:.17em;
  font-weight:800;
}

/* Responsive refinements */
@media (max-width: 1050px) {
  .hero { padding-top:85px; }
}

@media (max-width: 760px) {
  .hero { padding-top:70px; padding-bottom:88px; }
  .product-bar { padding-top:24px; padding-bottom:24px; }
}

/* ======================================================
   FORMS — EARLY ACCESS PANEL + CONTACT
   Sits AFTER the Welvanta-style dark override, so every surface here is written for
   the dark palette. Reusing the light-theme values would have given a white card with
   --text (#f7f9fc) on it — invisible. Restyling a surface means restyling its text.
====================================================== */
:root {
  --panel: #0c1727;
  --field: rgba(255,255,255,.04);
  --field-border: rgba(255,255,255,.13);
}
.ea-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 520px;
  width: min(calc(100% - 32px), 520px);
  color: var(--text);
  /* Explicit rather than relying on the UA sheet, which differs between browsers. */
  margin: auto;
  /* The form is taller than a laptop viewport once the browser chrome is counted, and a
     dialog does not scroll on its own — without this the submit button is unreachable on
     a 13" screen and on most phones in landscape. dvh so a mobile URL bar sliding in
     does not clip it either. */
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ea-dialog::backdrop { background: rgba(16, 24, 39, .62); backdrop-filter: blur(4px); }

/* Fallback for browsers with no <dialog> support: app.js sets the open attribute
   instead of calling showModal, so the panel has to place itself. */
.ea-dialog:not([open]) { display: none; }
@supports not selector(dialog::backdrop) {
  .ea-dialog[open] {
    position: fixed;
    inset: 0;
    margin: auto;
    height: fit-content;
    z-index: 2000;
    box-shadow: 0 0 0 100vmax rgba(16, 24, 39, .62);
  }
}

.ea-form, .ea-done {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px 32px 28px;
}
.ea-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--soft-blue);
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.ea-close:hover { background: var(--border); color: var(--text); }

.ea-tag {
  display: inline-block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--blue);
  background: var(--soft-blue);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 14px;
}
.ea-form h3, .ea-done h3 {
  font-family: "Manrope", sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -.035em;
  margin-bottom: 8px;
}
.ea-sub { color: var(--muted); font-size: .95rem; margin-bottom: 20px; }

.ea-field { display: block; margin-bottom: 14px; }
.ea-field > span {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.ea-field > span em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .75; }
.ea-field input, .ea-field select, .ea-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--field-border);
  border-radius: 13px;
  background: var(--field);
  color: var(--text);
  font: inherit;
}
.ea-field textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.ea-field input::placeholder, .ea-field textarea::placeholder { color: #6d7d93; }
.ea-field input:focus, .ea-field select:focus, .ea-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(129, 112, 247, .22);
  /* Lifted, NOT white. A white focus background under near-white text would blank the
     field out at exactly the moment somebody is typing into it. */
  background: rgba(255,255,255,.07);
}
/* A native select renders its dropdown with the OS palette, not the page's. Without an
   explicit colour the options inherit near-white text on a white sheet and the list
   looks empty. */
.ea-field select option { background: #0b1628; color: #f7f9fc; }

.ea-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Not #d3324a — a mid red on a near-black card fails contrast, and an error nobody can
   read is an error nobody acts on. */
.ea-error { color: #ff8f7a; font-size: .88rem; min-height: 1.2em; margin: 2px 0 10px; }
.ea-submit { width: 100%; justify-content: center; margin-top: 4px; }
.ea-submit:disabled { opacity: .65; cursor: default; }
.ea-fine { font-size: .78rem; color: var(--muted); margin-top: 14px; text-align: center; }
.ea-fine a { color: var(--cyan); text-decoration: underline; }

.ea-done { text-align: center; }
.ea-tick {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--green);
  color: #07110d;
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 58px;
}
.ea-done p { color: var(--muted); margin-bottom: 20px; }

/* The three calendar CTAs are <button> now, not <a>. Buttons do not inherit the
   page font or a transparent background, so they would render as grey OS chrome. */
.calendar-button {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

/* ======================================================
   LEGAL PAGES
====================================================== */
.legal-page { padding: 60px 0 90px; }
.legal-page .container { max-width: 780px; }
.legal-page h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 10px; }
.legal-page .legal-updated { color: var(--muted); font-size: .9rem; margin-bottom: 34px; }
.legal-page h2 {
  font-size: 1.35rem;
  letter-spacing: -.02em;
  margin: 34px 0 10px;
  line-height: 1.3;
}
.legal-page h2 span { display: inline; color: inherit; }
.legal-page p, .legal-page li { color: var(--muted); margin-bottom: 12px; }
.legal-page ul { padding-left: 22px; }
.legal-page strong { color: var(--text); }

/* ======================================================
   LANGUAGE SWITCH
====================================================== */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
}
.lang-switch a { color: #93a2b7; padding: 0 3px; transition: .2s; }
.lang-switch a:hover { color: #fff; }
.lang-switch a.is-active { color: var(--cyan); }
.lang-switch span { color: rgba(255,255,255,.22); }

/* ======================================================
   CONTACT
====================================================== */
.contact-section {
  position: relative;
  padding: 110px 0 120px;
  border-top: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(760px 420px at 12% 0%, rgba(129,112,247,.14), transparent 62%),
    radial-gradient(620px 400px at 92% 100%, rgba(99,220,233,.10), transparent 60%);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: start;
}
.contact-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .17em;
  color: var(--cyan);
  background: rgba(99,220,233,.10);
  border: 1px solid rgba(99,220,233,.20);
  border-radius: 999px;
  padding: 7px 14px;
  margin-bottom: 22px;
}
.contact-copy h2 { margin-bottom: 20px; }
.contact-copy > p { color: var(--muted); font-size: 1.03rem; max-width: 48ch; }

.contact-points { list-style: none; margin-top: 34px; display: grid; gap: 18px; }
.contact-points li { display: flex; gap: 15px; align-items: flex-start; }
.contact-point-icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 1.05rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
}
.contact-points strong { display: block; color: var(--text); margin-bottom: 2px; }
.contact-points div > :not(strong) { color: var(--muted); }
.contact-points li > div:last-child { font-size: .94rem; color: var(--muted); }

.contact-card {
  background: var(--panel);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 34px 30px;
}
.contact-card h3 {
  font-family: "Manrope", sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 22px;
}
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-submit { width: 100%; justify-content: center; margin-top: 6px; }
.contact-submit:disabled { opacity: .65; cursor: default; }
/* The confirmation replaces the form inside the same card, so it must not draw a second
   card border on top of it. */
.contact-done { background: none; border: 0; box-shadow: none; padding: 20px 0 10px; }

@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 620px) {
  .contact-section { padding: 84px 0 90px; }
  .contact-card { padding: 26px 20px 24px; }
  .contact-row { grid-template-columns: 1fr; gap: 0; }
  .lang-switch { padding: 4px 8px; }
}

/* ======================================================
   FEEDBACK PASS — 24 Aug 2026
   Jose: "text is too small", "bold all with white background", and where the page went
   too white, use the main colour instead.

   Two things are happening here and they are not independent. The light sections carried
   their own dark-on-white text colours (#172033, #6f7c8f, …). Turning a section dark
   without also turning its TEXT light leaves near-black type on near-black — so every
   surface changed below has its text changed with it.
====================================================== */

/* ---------- 1. TYPE SCALE -------------------------------------------------
   The page was set almost entirely between 8px and 12px. That is not a stylistic
   choice at that size, it is unreadable — 8px body copy is smaller than a legal
   disclaimer. Nothing that a customer has to READ now sits below 15px.            */

.section-tag { font-size: 12px; letter-spacing: .15em; }
.section-heading p { font-size: 17px; line-height: 1.7; }

.problem-card h3 { font-size: 22px; }
.problem-card p,
.feature-card p,
.step-card p,
.journey-card p,
.email-capability p,
.frontdesk-features p,
.before-card p,
.after-card p,
.growth-ai-card > p { font-size: 15px; font-weight: 500; line-height: 1.72; }

.feature-card small,
.email-capability > strong,
.frontdesk-features strong,
.professional strong { font-size: 15px; font-weight: 700; }

.growth-ai-card li,
.calendar-copy ul li,
.check-list li { font-size: 15px; font-weight: 500; }

.scattered span { font-size: 14px; font-weight: 600; padding: 9px 14px; }

/* The three lines under the final CTA — Jose underlined every one of them. */
.cta-promise div { font-size: 15px; font-weight: 700; }
.cta-panel h4 { font-size: 13px; font-weight: 800; letter-spacing: .13em; }
.cta-note { font-size: 14px; font-weight: 500; }
.calendar-button small { font-size: 11px; letter-spacing: .13em; }
.calendar-button strong { font-size: 17px; }

/* Footer: item 1 on his list. 9px and 8px in a footer is a footer nobody reads. */
.footer-top p { font-size: 15px; font-weight: 500; color: #8b9bb1; }
.footer-links { gap: 24px; font-size: 15px; font-weight: 600; color: #9dabc0; }
.footer-links a:hover { color: #fff; }
.footer-bottom { font-size: 14px; color: #6a7d94; }

/* ---------- 2. THE WHITE SECTIONS GO DARK ---------------------------------
   #0b1424 rather than the #08111f used by the already-dark sections, so that two
   dark sections meeting each other still read as two sections.                    */

.problem-section,
.frontdesk-section,
.features-section,
.email-engine-section,
.ai-edit-section,
.transformation-section {
  color: #eef3fa;
  background: #0b1424;
}

.problem-section .section-tag,
.frontdesk-section .section-tag,
.features-section .section-tag { color: #7fe0ea; }

.problem-section h2 span,
.frontdesk-section h2 span,
.features-section h2 span,
.email-engine-copy h2 span,
.ai-edit-copy h2 span { color: #c8c2ff; }

.email-engine-copy h2,
.ai-edit-copy h2,
.after-name,
.email-provider-note strong,
.email-capability strong,
.frontdesk-features strong,
.problem-card h3 { color: #fff; }

.problem-section .section-heading p,
.frontdesk-section .section-heading p,
.features-section .section-heading p,
.email-engine-copy > p,
.ai-edit-copy > p,
.problem-card p,
.feature-card p,
.email-capability p,
.frontdesk-features p,
.before-card p,
.after-card p { color: #a9b8cc; }

.email-kicker { color: #7fe0ea; }
.feature-card small { color: #8fa0b6; }

/* Content cards — the same translucent surface the dark sections already use, so the
   whole page is one material instead of two. */
.problem-card,
.feature-card,
.email-capability,
.email-provider-note,
.before-card,
.after-card,
.prompt-list div,
.frontdesk-feature {
  color: #eef3fa;
  border-color: rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: none;
}
.after-card {
  background:
    radial-gradient(circle at top right, rgba(129,112,247,.16), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-color: rgba(129,112,247,.26);
}
.prompt-list div { color: #b7c4d6; }
.scattered span {
  color: #b7c4d6;
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}
.email-capability > span { color: #5fe0b0; background: rgba(95,224,176,.12); }
.transform-arrow { color: #6d7f96; }

/* ---------- 3. ICON TILES -------------------------------------------------
   One stroked set replacing three different families of glyph. The tile owns the
   colour; the icon inherits it, so a tile restyle can no longer leave the icon behind. */
.ico { width: 22px; height: 22px; display: block; }

.problem-icon,
.feature-icon,
.step-icon,
.growth-ai-icon,
.journey-icon {
  display: grid;
  place-items: center;
  color: #a99bff;
  background: rgba(129,112,247,.13);
  border: 1px solid rgba(129,112,247,.22);
}
.growth-ai-icon { color: #7fe0ea; background: rgba(99,220,233,.12); border-color: rgba(99,220,233,.22); }
.step-icon.ai-step { color: #c8c2ff; }

/* ---------- 4. The device mock-ups stay light ------------------------------
   The browser frame, the chat window and the email dashboard are pictures OF a screen.
   Darkening those would stop them reading as screenshots, which is the whole job they
   do on the page — so they keep their own light surface deliberately. */
.ai-window { border-color: rgba(255,255,255,.10); }

@media (max-width: 620px) {
  .section-heading p { font-size: 16px; }
  .footer-links { gap: 16px 20px; }
}

/* ---------- 5. The light mock-ups need their own ink -----------------------
   Caught in the browser, not in the diff: the campaign numbers (798 / 411 / 96) went
   almost invisible. Those mock-ups never set a text colour — they INHERITED the dark
   ink from the section they sat in, and that section is now dark, so they inherited
   near-white onto near-white. A light island inside a dark section has to declare its
   own colour rather than rely on what is above it.                                  */
.email-dashboard,
.ai-window,
.browser-window { color: #172033; }

.campaign-audience strong,
.campaign-metrics strong,
.audience-count { color: #172033; }
.campaign-audience span,
.campaign-metrics small,
.campaign-metrics > div > span { color: #7b8798; }
.metric-revenue strong { color: #15865c; }

/* strong sits inside a wrapper div here, so the child combinator never matched it and
   the label ended up SMALLER than the sentence beneath it. */
.email-capability strong { font-size: 15px; font-weight: 700; color: #fff; }
.email-capability p { margin-top: 4px; }

/* ---------- 6. Footer layout at the new size ------------------------------
   The footer was one flex row built for 9px type. At 15px the tagline and the link
   list collide and the links wrap into a ragged two-line block. Give the row room to
   break properly instead of squeezing it.                                          */
.footer-top {
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 40px;
}
.footer-top p { margin-left: 0; max-width: 34ch; }
.footer-links { flex-wrap: wrap; gap: 14px 26px; white-space: nowrap; }

/* The before/after kickers Jose underlined — 9px uppercase at 40% contrast. */
.before-card > small,
.after-card > small,
.before-card .card-kicker,
.after-card .card-kicker { font-size: 12px; letter-spacing: .15em; color: #8fa0b6; }

@media (max-width: 900px) {
  .footer-top { flex-direction: column; align-items: flex-start; }
  .footer-links { margin-left: 0; }
}

/* The promise row icons sit inline with the label, so they need to be smaller than a
   tile icon and to sit on the text baseline rather than above it. */
.ico-sm { width: 17px; height: 17px; }
.cta-promise div { gap: 9px; }
.cta-promise div .ico-sm { color: #9fd9f0; flex: none; }

/* ---------- 7. Tile geometry ----------------------------------------------
   Caught in a screenshot, not in the CSS: .step-icon and .journey-icon were bare emoji
   with only a font-size — no width, no height. Giving them a background and a border
   turned each one into a full-width bar the width of its card, because a block-level
   div with nothing to size it fills the row. Every tile now states its own size. */
.step-icon,
.journey-icon,
.problem-icon,
.feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
}
.step-icon { margin: 38px 0 19px; }
.journey-icon { margin: 25px 0 13px; }
.problem-icon { margin-bottom: 30px; }
.feature-icon { width: 41px; height: 41px; border-radius: 11px; }
.growth-ai-icon { width: 54px; height: 54px; border-radius: 16px; }

/* ---------- 8. The small print inside cards --------------------------------
   The lists and chips nested inside the step, calendar and frontdesk cards were the
   last things left at 9–11px. "Bigger everywhere" has to include these or the page
   still reads as small where a visitor is actually comparing options. */
.build-checks span,
.golive-checks span,
.calendar-options > div,
.provider-card small,
.step-number { font-size: 13px; }
.calendar-options > div { padding: 11px 13px; }
.calendar-options span { font-size: 12px; font-weight: 700; }
.step-number { font-weight: 700; letter-spacing: .1em; }

.frontdesk-features strong { font-size: 16px; }
.provider-card strong { font-size: 17px; }
.provider-card p { font-size: 15px; }
.calendar-copy ul li { font-size: 15px; }
.hero-benefits div { font-size: 14px; font-weight: 600; }
.calendar-trust p { font-size: 12px; letter-spacing: .14em; }
.calendar-mini { font-size: 14px; font-weight: 600; }
.product-bar-item { font-size: 14px; font-weight: 600; }

/* ======================================================
   AI ASSISTANT WINDOW — dark + readable
   Jose pointed at this panel: same treatment as the rest, and change the background.
   It was the last white block with 6px and 7px type inside it ("Website Assistant" at
   7px, the NEW SERVICE kicker at 6px) — small enough to be decoration rather than text.
====================================================== */
.ai-window {
  color: #eef3fa;
  background: var(--panel);
  border-color: rgba(255,255,255,.11);
  box-shadow: 0 30px 75px rgba(0,0,0,.38);
}
.ai-window-top { border-bottom-color: rgba(255,255,255,.09); }
.ai-window-top strong { font-size: 16px; color: #fff; }
.ai-window-top span { font-size: 13px; font-weight: 500; color: #93a3b8; }

.user-message,
.ai-message { font-size: 15px; line-height: 1.65; }
/* Dark ink on the light gradient, the same way the primary button does it — white on
   that violet-to-cyan ramp is the weakest contrast on the page. */
.user-message { color: #07101f; font-weight: 600; }
.ai-message {
  color: #b7c4d6;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
}
.ai-message > span { color: #a99bff; }

.service-update {
  color: #eef3fa;
  border-color: rgba(129,112,247,.26);
  background: rgba(129,112,247,.11);
}
.service-update small { font-size: 12px; letter-spacing: .15em; color: #9db0c6; }
.service-update strong { font-size: 18px; color: #fff; }
.service-update span { font-size: 14px; font-weight: 600; color: #7fe0ea; }

.prompt-list div { font-size: 15px; font-weight: 500; padding: 14px 16px; }
.prompt-list div span { color: #a99bff; }



/* Consent boxes — the Salud pattern. Two separate panels on purpose: SMS consent has to
   stand on its own, and the call permission gets its own box rather than being bundled
   into the same sentence. */
.sms-consent {
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(128,128,128,.28);
  border-radius: 12px;
  background: rgba(128,128,128,.06);
  text-align: left;
}
.sms-consent label {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  cursor: pointer;
  margin: 0;
  font-weight: 400;
}
.sms-consent input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  flex: none;
  cursor: pointer;
}
.sms-consent .consent-text {
  display: block;
  font-size: 13px;
  line-height: 1.6;
}
.sms-consent .consent-links {
  display: block;
  margin-top: 8px;
  opacity: .82;
}
.sms-consent .consent-links a { text-decoration: underline; }

/* ======================================================
   TRADE VIDEOS
   Three 16:9 rows replacing the twelve-card grid.
====================================================== */
.trade-videos { display: grid; gap: 22px; margin-top: 8px; }
.trade-video {
  width: 100%;
  /* Reserve the space before the file loads. Without this the page height jumps by
     three video-heights the moment they arrive, shoving whatever the visitor is
     reading off the screen. */
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.09);
  background: #06101d;
  object-fit: cover;
}

/* The trade names are burned into the footage. Keeping them in the DOM as well means
   search engines and screen readers still get twelve service keywords off this section.
   Clipped rather than display:none — a hidden element is skipped by assistive tech. */
.trade-names {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 620px) {
  .trade-videos { gap: 14px; }
  .trade-video { border-radius: 13px; }
}