/* =========================================================
   BOT AI
   EDITORIAL / MOTION-LED HOMEPAGE
========================================================= */

:root {
  --cream: #f4eee9;
  --cream-2: #eee5df;
  --paper: #f8f4f0;
  --black: #111111;
  --soft-black: #191919;
  --grey: #77736f;
  --line: rgba(17, 17, 17, 0.18);

  --blue: #3155ff;
  --blue-dark: #1738db;
  --orange: #ff5b2d;
  --orange-light: #ff805e;
  --pink: #efb9c6;
  --yellow: #f4df4e;
  --green: #8ed6a4;

  --white: #fffdf9;

  --page-pad: clamp(20px, 3vw, 54px);
  --radius: 28px;
}


/* =========================================================
   RESET
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
}

body {
  width: 100%;
  overflow-x: hidden;

  background: var(--cream);
  color: var(--black);

  font-family: "Inter", sans-serif;

  -webkit-font-smoothing: antialiased;
}

body,
button,
a {
  cursor: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
  font: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

main {
  overflow: hidden;
}


/* =========================================================
   SELECTION
========================================================= */

::selection {
  background: var(--blue);
  color: var(--white);
}


/* =========================================================
   CUSTOM CURSOR
========================================================= */

.custom-cursor {
  position: fixed;
  left: 0;
  top: 0;

  width: 18px;
  height: 18px;

  z-index: 99999;

  pointer-events: none;

  transform:
    translate(-50%, -50%);

  mix-blend-mode: difference;
}

.custom-cursor span {
  display: block;

  width: 100%;
  height: 100%;

  border-radius: 50%;

  background: #ffffff;

  transition:
    width 0.25s ease,
    height 0.25s ease;
}

.custom-cursor.is-active span {
  width: 46px;
  height: 46px;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  padding:
    22px
    var(--page-pad);

  z-index: 500;

  mix-blend-mode: difference;

  color: white;
}

.navbar {
  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  width: 100%;
}

.logo {
  justify-self: start;

  font-family: "Manrope", sans-serif;

  font-size: 22px;
  line-height: 1;

  font-weight: 800;

  letter-spacing: -0.06em;
}

.logo span {
  font-weight: 400;
}

.nav-center {
  display: flex;
  align-items: center;

  gap: 34px;
}

.nav-center a {
  position: relative;

  font-size: 12px;
  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.02em;
}

.nav-center a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -4px;

  width: 100%;
  height: 1px;

  background: currentColor;

  transform: scaleX(0);

  transform-origin: right;

  transition: transform 0.3s ease;
}

.nav-center a:hover::after {
  transform: scaleX(1);

  transform-origin: left;
}

.nav-button {
  justify-self: end;

  display: flex;
  align-items: center;

  gap: 15px;

  padding:
    12px
    18px;

  border: 1px solid currentColor;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.04em;
}

.nav-button span {
  font-size: 15px;
}


/* =========================================================
   HERO
========================================================= */

.hero {
  position: relative;

  min-height: 100svh;

  padding:
    112px
    var(--page-pad)
    34px;

  display: flex;
  flex-direction: column;

  justify-content: space-between;

  background: var(--cream);

  overflow: hidden;
}

.hero::before {
  content: "";

  position: absolute;

  width: 36vw;
  height: 36vw;

  min-width: 380px;
  min-height: 380px;

  right: -12vw;
  top: -12vw;

  border-radius: 50%;

  background: var(--pink);

  opacity: 0.24;

  filter: blur(1px);
}

.hero-topline {
  position: relative;
  z-index: 3;

  display: flex;
  justify-content: space-between;

  padding-bottom: 15px;

  border-bottom: 1px solid var(--line);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.08em;
}

.hero-title-wrap {
  position: relative;

  z-index: 2;

  padding:
    3vh
    0;
}

.hero-title {
  font-family: "Manrope", sans-serif;

  font-size:
    clamp(72px, 10.4vw, 190px);

  line-height: 0.78;

  font-weight: 500;

  letter-spacing: -0.085em;

  text-transform: uppercase;
}

.hero-line {
  display: block;

  width: fit-content;
}

.hero-line-one {
  margin-left: 0;
}

.hero-line-two {
  margin-left: 17%;
}

.hero-line-three {
  margin-left: 4%;
}

.hero-line-four {
  margin-left: 32%;
}

.hero-title em {
  position: relative;

  z-index: 3;

  color: var(--blue);

  font-style: normal;
}

.hero-title em::after {
  content: "";

  position: absolute;

  z-index: -1;

  left: -2%;
  bottom: 3%;

  width: 104%;
  height: 13%;

  background: var(--orange);
}

.hero-bottom {
  position: relative;
  z-index: 4;

  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.hero-description {
  width: min(420px, 40vw);

  margin-left: 5%;

  font-size: clamp(14px, 1.15vw, 18px);

  line-height: 1.55;

  letter-spacing: -0.02em;
}

.round-cta {
  width: 115px;
  height: 115px;

  flex-shrink: 0;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 7px;

  border-radius: 50%;

  background: var(--orange);

  transition:
    transform 0.4s cubic-bezier(.2,.8,.2,1),
    background 0.3s ease;
}

.round-cta span {
  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.05em;
}

.round-cta strong {
  font-size: 21px;
}

.round-cta:hover {
  background: var(--blue);

  color: white;
}


/* =========================================================
   HERO OBJECT
========================================================= */

.hero-object {
  position: absolute;

  z-index: 1;

  right: 9%;
  top: 42%;

  width: clamp(230px, 22vw, 400px);
  height: clamp(230px, 22vw, 400px);

  transform: translateY(-50%);
}

.hero-orbit {
  position: absolute;

  top: 50%;
  left: 50%;

  border-radius: 50%;

  border: 1px solid rgba(17,17,17,0.16);

  transform:
    translate(-50%, -50%);
}

.orbit-one {
  width: 100%;
  height: 100%;
}

.orbit-two {
  width: 135%;
  height: 135%;

  border-style: dashed;
}

.voice-object {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 62%;
  aspect-ratio: 1;

  transform:
    translate(-50%, -50%);

  display: flex;
  flex-direction: column;

  justify-content: space-between;

  padding: 18px;

  border-radius: 50%;

  background: var(--black);

  color: white;

  box-shadow:
    0 25px 80px rgba(0,0,0,0.16);
}

.voice-object-top {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 7px;

  padding-top: 7%;

  font-size: 7px;
  font-weight: 700;

  letter-spacing: 0.08em;
}

.live-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--orange);
}

.voice-name {
  text-align: center;

  font-family: "Manrope", sans-serif;

  font-size: clamp(23px, 2vw, 37px);

  font-weight: 600;

  letter-spacing: -0.06em;
}

.voice-bars {
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 3px;
}

.voice-bars i {
  display: block;

  width: 3px;
  height: 12px;

  border-radius: 100px;

  background: var(--blue);
}

.voice-bars i:nth-child(2n) {
  background: var(--orange);
}

.voice-caption {
  padding-bottom: 8%;

  text-align: center;

  font-size: 6px;
  font-weight: 700;

  letter-spacing: 0.08em;

  opacity: 0.65;
}

.hero-scroll {
  position: absolute;

  left: var(--page-pad);
  bottom: 32px;

  display: flex;
  align-items: center;

  gap: 9px;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.1em;
}


/* =========================================================
   GIANT STATEMENT
========================================================= */

.statement-section {
  position: relative;

  min-height: 120vh;

  padding:
    120px
    var(--page-pad);

  display: flex;
  flex-direction: column;

  justify-content: center;

  background: var(--paper);
}

.statement-small {
  position: absolute;

  top: 55px;
  left: var(--page-pad);

  display: flex;

  gap: 30px;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.07em;
}

.statement-small span {
  color: var(--blue);
}

.statement-text {
  width: 100%;
}

.statement-line {
  font-family: "Manrope", sans-serif;

  font-size:
    clamp(60px, 9.6vw, 170px);

  line-height: 0.91;

  font-weight: 500;

  letter-spacing: -0.075em;
}

.statement-offset {
  padding-left: 10%;
}

.statement-pill {
  display: inline-block;

  padding:
    0.04em
    0.18em
    0.08em;

  border-radius: 999px;

  font-size: 0.76em;

  letter-spacing: -0.06em;

  vertical-align: 0.1em;
}

.blue-pill {
  background: var(--blue);

  color: white;
}

.statement-foot {
  position: absolute;

  right: var(--page-pad);
  bottom: 55px;

  max-width: 290px;

  font-size: 14px;

  line-height: 1.45;
}


/* =========================================================
   MISSED STORY
========================================================= */

.missed-story {
  position: relative;

  height: 250vh;

  background: var(--black);
}

.missed-sticky {
  position: sticky;

  top: 0;

  height: 100vh;

  overflow: hidden;

  padding:
    45px
    var(--page-pad);

  color: var(--white);
}

.missed-counter {
  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.08em;

  opacity: 0.55;
}

.missed-stage {
  position: relative;

  width: 100%;
  height: calc(100% - 20px);

  display: flex;
  align-items: center;
  justify-content: center;
}

.missed-word {
  position: absolute;

  left: -3vw;

  top: 50%;

  transform:
    translateY(-50%);

  font-family: "Manrope", sans-serif;

  font-size:
    clamp(130px, 24vw, 450px);

  line-height: 0.7;

  font-weight: 600;

  letter-spacing: -0.1em;

  color: var(--orange);

  white-space: nowrap;
}

.missed-call-card {
  position: relative;

  z-index: 3;

  width: min(340px, 28vw);

  aspect-ratio: 0.82;

  padding: 25px;

  display: flex;
  flex-direction: column;

  justify-content: flex-end;

  border-radius: 28px;

  background: var(--cream);

  color: var(--black);

  transform: rotate(4deg);
}

.missed-icon {
  position: absolute;

  top: 24px;
  right: 24px;

  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--orange);

  font-size: 22px;
}

.missed-call-card > span {
  margin-bottom: 12px;

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.1em;
}

.missed-call-card strong {
  max-width: 220px;

  font-family: "Manrope", sans-serif;

  font-size: clamp(28px, 3vw, 45px);

  line-height: 0.95;

  letter-spacing: -0.055em;
}

.missed-call-card small {
  margin-top: 20px;

  color: var(--orange);

  font-weight: 700;
}

.missed-result {
  position: absolute;

  bottom: 30px;
  right: 0;

  display: flex;
  align-items: center;

  gap: 15px;

  font-size: clamp(18px, 2vw, 32px);

  font-weight: 600;

  letter-spacing: -0.04em;
}

.missed-result .strike {
  text-decoration:
    line-through
    var(--orange)
    4px;
}


/* =========================================================
   SOLUTION
========================================================= */

.solution-section {
  position: relative;

  min-height: 110vh;

  padding:
    70px
    var(--page-pad);

  display: flex;
  flex-direction: column;

  justify-content: space-between;

  background: var(--blue);

  color: var(--white);

  overflow: hidden;
}

.solution-section::after {
  content: "";

  position: absolute;

  right: -7vw;
  top: 7%;

  width: 24vw;
  height: 24vw;

  border-radius: 50%;

  background: var(--orange);
}

.solution-index {
  position: relative;

  z-index: 2;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.08em;
}

.solution-title {
  position: relative;

  z-index: 2;

  display: flex;
  flex-direction: column;

  font-family: "Manrope", sans-serif;

  font-size:
    clamp(66px, 10.8vw, 190px);

  line-height: 0.78;

  font-weight: 500;

  letter-spacing: -0.085em;

  text-transform: uppercase;
}

.solution-title span:nth-child(2) {
  margin-left: 9%;
}

.solution-title span:nth-child(3) {
  margin-left: 21%;
}

.solution-title span:nth-child(4) {
  margin-left: 5%;
}

.solution-accent {
  color: var(--orange);
}

.solution-bottom {
  position: relative;

  z-index: 2;

  display: flex;

  justify-content: space-between;
  align-items: flex-end;
}

.solution-bottom p {
  width: min(350px, 30vw);

  font-size: 15px;

  line-height: 1.5;
}

.solution-stamp {
  font-family: "Manrope", sans-serif;

  font-size: clamp(80px, 10vw, 160px);

  line-height: 0.7;

  font-weight: 600;

  letter-spacing: -0.08em;
}

.solution-stamp small {
  font-size: 0.2em;

  letter-spacing: 0;
}


/* =========================================================
   LIVE EXPERIENCE
========================================================= */

.live-experience {
  position: relative;

  padding:
    120px
    var(--page-pad)
    180px;

  background: var(--cream);
}

.live-heading {
  display: grid;

  grid-template-columns:
    1fr
    2.2fr;

  align-items: start;

  padding-bottom: 80px;
}

.live-heading > div {
  display: flex;

  gap: 18px;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.07em;
}

.live-heading > div span {
  color: var(--blue);
}

.live-heading h2 {
  font-family: "Manrope", sans-serif;

  font-size:
    clamp(65px, 8vw, 140px);

  line-height: 0.82;

  font-weight: 500;

  letter-spacing: -0.075em;
}

.live-heading h2 em {
  display: block;

  color: var(--orange);

  font-style: normal;
}

.conversation-stage {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(380px, 0.85fr);

  gap: 8vw;
}

.conversation-steps {
  padding-top: 10vh;
}

.conversation-step {
  min-height: 65vh;

  padding:
    40px
    0;

  border-top: 1px solid var(--line);

  display: grid;

  grid-template-columns:
    80px
    1fr;

  align-content: start;
}

.conversation-step > span {
  color: var(--blue);

  font-size: 11px;
  font-weight: 700;
}

.conversation-step h3 {
  font-family: "Manrope", sans-serif;

  font-size:
    clamp(52px, 6vw, 100px);

  line-height: 0.9;

  font-weight: 500;

  letter-spacing: -0.07em;
}

.conversation-step p {
  grid-column: 2;

  max-width: 360px;

  margin-top: 25px;

  color: var(--grey);

  font-size: 15px;

  line-height: 1.55;
}

.conversation-phone-wrap {
  position: relative;
}

.conversation-phone {
  position: sticky;

  top: 14vh;

  width: min(100%, 470px);

  margin-left: auto;

  overflow: hidden;

  border-radius: 34px;

  background: var(--black);

  color: white;

  box-shadow:
    0 35px 100px rgba(0,0,0,0.16);
}

.phone-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  padding:
    20px
    22px;

  border-bottom:
    1px solid
    rgba(255,255,255,0.1);

  font-size: 9px;

  letter-spacing: 0.07em;
}

.phone-top div {
  display: flex;

  align-items: center;

  gap: 8px;
}

.phone-top div span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--orange);
}

.phone-top small {
  padding:
    6px
    9px;

  border-radius: 999px;

  background: var(--blue);
}

.phone-screen {
  min-height: 570px;

  padding:
    38px
    27px;

  display: flex;
  flex-direction: column;
}

.phone-stage-label {
  color: var(--orange);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.1em;
}

.phone-stage-title {
  margin-top: 10px;

  font-family: "Manrope", sans-serif;

  font-size: 42px;

  line-height: 0.95;

  font-weight: 500;

  letter-spacing: -0.055em;
}

.phone-stage-copy {
  margin-top: 10px;

  color: #929292;

  font-size: 12px;
}

.phone-wave {
  height: 75px;

  margin:
    35px
    0;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 5px;
}

.phone-wave i {
  display: block;

  width: 4px;
  height: 20px;

  border-radius: 100px;

  background: var(--blue);
}

.phone-wave i:nth-child(3n) {
  background: var(--orange);
}

.phone-message {
  width: 83%;

  padding:
    15px
    17px;

  border-radius: 18px;

  font-size: 12px;

  line-height: 1.45;
}

.phone-message small {
  display: block;

  margin-bottom: 5px;

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.08em;
}

.customer-bubble {
  align-self: flex-start;

  background: #292929;
}

.customer-bubble small {
  color: #858585;
}

.bot-bubble {
  align-self: flex-end;

  margin-top: 11px;

  background: var(--blue);
}

.bot-bubble small {
  opacity: 0.7;
}

.phone-success {
  margin-top: auto;

  padding-top: 25px;

  display: flex;

  align-items: center;

  gap: 12px;

  border-top:
    1px solid
    rgba(255,255,255,0.09);
}

.phone-success > span {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--orange);
}

.phone-success div {
  display: flex;
  flex-direction: column;

  gap: 2px;
}

.phone-success small {
  color: #777;

  font-size: 7px;

  letter-spacing: 0.08em;
}

.phone-success strong {
  font-size: 11px;
}


/* =========================================================
   CAPABILITIES
========================================================= */

.capabilities {
  padding:
    110px
    var(--page-pad);

  background: var(--paper);
}

.capabilities-header {
  display: grid;

  grid-template-columns:
    1fr
    2fr;

  margin-bottom: 80px;
}

.capabilities-header > span {
  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.07em;
}

.capabilities-header h2 {
  font-family: "Manrope", sans-serif;

  font-size:
    clamp(65px, 8vw, 140px);

  line-height: 0.82;

  font-weight: 500;

  letter-spacing: -0.075em;
}

.capabilities-header em {
  display: block;

  color: var(--blue);

  font-style: normal;
}

.capability-list {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 14px;
}

.capability {
  position: relative;

  min-height: 620px;

  padding:
    30px;

  overflow: hidden;

  border-radius: var(--radius);
}

.capability-number {
  font-size: 10px;
  font-weight: 800;
}

.capability h3 {
  margin-top: 90px;

  font-family: "Manrope", sans-serif;

  font-size:
    clamp(55px, 6vw, 105px);

  line-height: 0.82;

  font-weight: 500;

  letter-spacing: -0.075em;
}

.capability > p {
  position: absolute;

  left: 30px;
  bottom: 30px;

  max-width: 270px;

  font-size: 13px;

  line-height: 1.5;
}

.capability-blue {
  background: var(--blue);

  color: white;
}

.capability-orange {
  background: var(--orange);
}

.capability-dark {
  background: var(--black);

  color: white;
}

.capability-pink {
  background: var(--pink);
}


/* =========================================================
   CAPABILITY ART
========================================================= */

.capability-art {
  position: absolute;

  right: 25px;
  bottom: 20px;

  display: flex;
  flex-direction: column;

  align-items: flex-end;
}

.capability-art span {
  font-family: "Manrope", sans-serif;

  font-size:
    clamp(110px, 13vw, 230px);

  line-height: 0.7;

  font-weight: 600;

  letter-spacing: -0.1em;

  opacity: 0.22;
}

.capability-art small {
  margin-top: 10px;

  font-size: 9px;

  letter-spacing: 0.1em;
}

.qualification-art {
  position: absolute;

  right: 25px;
  bottom: 25px;

  width: 45%;

  display: flex;
  flex-direction: column;
}

.qualification-art span {
  padding:
    13px
    0;

  border-bottom:
    1px solid
    rgba(17,17,17,0.25);

  font-size: 11px;
  font-weight: 700;
}

.qualification-art span:last-child {
  color: var(--blue);

  border-bottom: 0;
}

.calendar-art {
  position: absolute;

  right: 25px;
  bottom: 25px;

  width: 46%;

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 6px;
}

.calendar-art span {
  min-height: 100px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(255,255,255,0.15);

  border-radius: 12px;

  font-size: 9px;
}

.calendar-art .selected {
  background: var(--orange);

  color: var(--black);

  border-color: var(--orange);
}

.handoff-art {
  position: absolute;

  right: 25px;
  bottom: 25px;

  display: flex;
  align-items: center;

  gap: 12px;
}

.handoff-art div {
  width: 100px;
  height: 100px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--black);

  color: white;

  font-family: "Manrope", sans-serif;

  font-size: 25px;
}

.handoff-art div:last-child {
  background: var(--blue);
}

.handoff-art > span {
  font-size: 30px;
}


/* =========================================================
   TICKERS
========================================================= */

.ticker-section {
  padding:
    35px
    0;

  overflow: hidden;

  background: var(--cream);
}

.ticker {
  width: 100%;

  overflow: hidden;

  white-space: nowrap;
}

.ticker + .ticker {
  margin-top: 10px;
}

.ticker-track {
  width: max-content;

  display: flex;

  align-items: center;

  gap: 25px;

  font-family: "Manrope", sans-serif;

  font-size:
    clamp(55px, 8vw, 130px);

  line-height: 0.95;

  font-weight: 600;

  letter-spacing: -0.065em;
}

.ticker-left {
  color: var(--blue);
}

.ticker-right {
  color: var(--orange);
}


/* =========================================================
   HOW IT WORKS
========================================================= */

.how-section {
  padding:
    120px
    var(--page-pad)
    180px;

  background: var(--cream);
}

.how-header {
  display: grid;

  grid-template-columns:
    1fr
    2fr;

  margin-bottom: 80px;
}

.how-header > span {
  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.07em;
}

.how-header h2 {
  font-family: "Manrope", sans-serif;

  font-size:
    clamp(65px, 8vw, 140px);

  line-height: 0.82;

  font-weight: 500;

  letter-spacing: -0.075em;
}

.how-header em {
  display: block;

  color: var(--orange);

  font-style: normal;
}

.how-stack {
  position: relative;
}

.how-card {
  position: relative;

  min-height: 82vh;

  margin-bottom: 30px;

  padding:
    35px;

  overflow: hidden;

  border-radius: 32px;

  display: grid;

  grid-template-columns:
    90px
    1fr
    1fr;

  align-items: center;
}

.how-card-blue {
  background: var(--blue);

  color: white;
}

.how-card-orange {
  background: var(--orange);
}

.how-card-black {
  background: var(--black);

  color: white;
}

.how-number {
  align-self: start;

  font-size: 11px;
  font-weight: 700;
}

.how-content {
  align-self: center;
}

.how-content small {
  display: block;

  margin-bottom: 20px;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.1em;
}

.how-content h3 {
  max-width: 570px;

  font-family: "Manrope", sans-serif;

  font-size:
    clamp(58px, 7vw, 120px);

  line-height: 0.82;

  font-weight: 500;

  letter-spacing: -0.075em;
}

.how-content p {
  max-width: 330px;

  margin-top: 30px;

  font-size: 14px;

  line-height: 1.55;
}

.how-art {
  align-self: center;
}


/* =========================================================
   HOW ART
========================================================= */

.connect-art {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 15px;
}

.connect-art span,
.connect-art strong {
  width: 115px;
  height: 115px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  border:
    1px solid
    rgba(255,255,255,0.4);

  font-size: 9px;
}

.connect-art strong {
  background: white;

  color: var(--blue);

  border: 0;
}

.connect-path {
  width: 100px;
  height: 1px;

  background:
    rgba(255,255,255,0.5);
}

.training-art {
  display: flex;
  flex-direction: column;
}

.training-art span {
  padding:
    20px
    0;

  border-bottom:
    1px solid
    rgba(17,17,17,0.25);

  font-size: 12px;
  font-weight: 700;
}

.live-art {
  display: grid;
  place-items: center;
}

.live-circle {
  position: relative;

  width: min(28vw, 360px);
  aspect-ratio: 1;

  display: grid;
  place-items: center;

  border-radius: 50%;

  border:
    1px solid
    rgba(255,255,255,0.2);

  font-family: "Manrope", sans-serif;

  font-size: 40px;
}

.live-circle span {
  position: absolute;

  width: 20px;
  height: 20px;

  top: 20%;
  right: 20%;

  border-radius: 50%;

  background: var(--orange);
}


/* =========================================================
   INDUSTRIES
========================================================= */

.industries {
  position: relative;

  padding:
    120px
    0;

  background: var(--blue);

  color: white;

  overflow: hidden;
}

.industries-top {
  padding:
    0
    var(--page-pad)
    90px;
}

.industries-top > span {
  display: block;

  margin-bottom: 55px;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.08em;
}

.industries-top h2 {
  font-family: "Manrope", sans-serif;

  font-size:
    clamp(70px, 9vw, 155px);

  line-height: 0.8;

  font-weight: 500;

  letter-spacing: -0.08em;
}

.industry-marquee {
  width: 100%;
}

.industry-track {
  width: max-content;

  display: flex;

  gap: 15px;

  padding:
    0
    var(--page-pad);
}

.industry-card {
  width:
    clamp(300px, 31vw, 530px);

  height:
    clamp(430px, 50vw, 650px);

  flex-shrink: 0;

  padding: 27px;

  border-radius: 27px;

  display: flex;
  flex-direction: column;

  justify-content: space-between;

  color: var(--black);
}

.industry-card > span {
  font-size: 10px;
  font-weight: 700;
}

.industry-card h3 {
  margin-top: auto;

  font-family: "Manrope", sans-serif;

  font-size:
    clamp(55px, 6vw, 95px);

  line-height: 0.83;

  font-weight: 500;

  letter-spacing: -0.07em;
}

.industry-card p {
  max-width: 250px;

  margin-top: 25px;

  font-size: 14px;

  line-height: 1.4;
}

.industry-one {
  background: var(--orange);
}

.industry-two {
  background: var(--pink);
}

.industry-three {
  background: var(--yellow);
}

.industry-four {
  background: var(--green);
}

.industry-five {
  background: var(--paper);
}


/* =========================================================
   ALWAYS ON
========================================================= */

.always-section {
  position: relative;

  min-height: 130vh;

  padding:
    100px
    var(--page-pad);

  display: flex;
  flex-direction: column;

  justify-content: space-between;

  background: var(--black);

  color: white;

  overflow: hidden;
}

.always-copy > span {
  display: block;

  margin-bottom: 55px;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.08em;

  opacity: 0.55;
}

.always-copy h2 {
  position: relative;

  z-index: 2;

  max-width: 1000px;

  font-family: "Manrope", sans-serif;

  font-size:
    clamp(70px, 9vw, 155px);

  line-height: 0.82;

  font-weight: 500;

  letter-spacing: -0.08em;
}

.always-copy em {
  display: block;

  color: var(--orange);

  font-style: normal;
}

.clock-stage {
  position: absolute;

  right: -4vw;
  bottom: -8vw;
}

.clock-circle {
  position: relative;

  width:
    clamp(450px, 52vw, 900px);

  aspect-ratio: 1;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: var(--blue);
}

.clock-number {
  font-family: "Manrope", sans-serif;

  font-size:
    clamp(170px, 24vw, 400px);

  line-height: 0.68;

  font-weight: 600;

  letter-spacing: -0.12em;
}

.clock-circle small {
  margin-top: 30px;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.1em;
}

.clock-hand {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 2px;
  height: 37%;

  background: var(--orange);

  transform-origin: 50% 0%;
}

.always-footer {
  position: relative;

  z-index: 3;

  display: flex;
  justify-content: space-between;

  padding-top: 20px;

  border-top:
    1px solid
    rgba(255,255,255,0.18);

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.05em;
}


/* =========================================================
   PRICING
========================================================= */

.pricing {
  padding:
    120px
    var(--page-pad);

  background: var(--paper);
}

.pricing-header {
  margin-bottom: 80px;
}

.pricing-header > span {
  display: block;

  margin-bottom: 50px;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.08em;
}

.pricing-header h2 {
  max-width: 1050px;

  font-family: "Manrope", sans-serif;

  font-size:
    clamp(70px, 9vw, 150px);

  line-height: 0.82;

  font-weight: 500;

  letter-spacing: -0.08em;
}

.pricing-header h2 em {
  display: block;

  color: var(--blue);

  font-style: normal;
}

.pricing-header > p {
  max-width: 420px;

  margin-top: 30px;

  color: var(--grey);

  font-size: 12px;

  line-height: 1.5;
}

.pricing-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 12px;
}

.price-card {
  position: relative;

  min-height: 540px;

  padding:
    25px;

  display: flex;
  flex-direction: column;

  border:
    1px solid
    var(--line);

  border-radius: 24px;

  background: var(--cream);
}

.price-index {
  font-size: 9px;
  font-weight: 700;
}

.price-card h3 {
  margin-top: 70px;

  font-family: "Manrope", sans-serif;

  font-size: 52px;

  font-weight: 500;

  letter-spacing: -0.06em;
}

.price {
  margin-top: 12px;

  color: var(--blue);

  font-family: "Manrope", sans-serif;

  font-size: 27px;

  font-weight: 600;
}

.price-card ul {
  margin-top: 45px;

  list-style: none;
}

.price-card li {
  padding:
    13px
    0;

  border-bottom:
    1px solid
    var(--line);

  font-size: 12px;
}

.price-card a {
  margin-top: auto;

  padding-top: 20px;

  font-size: 12px;
  font-weight: 700;
}

.featured-price {
  background: var(--orange);

  border-color: var(--orange);
}

.featured-price .price {
  color: var(--black);
}

.popular {
  position: absolute;

  right: 20px;
  top: 20px;

  padding:
    7px
    10px;

  border-radius: 999px;

  background: var(--black);

  color: white;

  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.08em;
}


/* =========================================================
   FAQ
========================================================= */

.faq-section {
  padding:
    120px
    var(--page-pad);

  display: grid;

  grid-template-columns:
    0.9fr
    1.1fr;

  gap: 8vw;

  background: var(--cream);
}

.faq-heading > span {
  display: block;

  margin-bottom: 50px;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.08em;
}

.faq-heading h2 {
  font-family: "Manrope", sans-serif;

  font-size:
    clamp(65px, 7vw, 120px);

  line-height: 0.82;

  font-weight: 500;

  letter-spacing: -0.075em;
}

.faq-heading em {
  display: block;

  color: var(--orange);

  font-style: normal;
}

.faq-list {
  padding-top: 20px;
}

.faq-item {
  border-top: 1px solid var(--line);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-question {
  width: 100%;

  padding:
    25px
    0;

  border: 0;

  background: transparent;

  display: flex;
  align-items: center;
  justify-content: space-between;

  text-align: left;
}

.faq-question span {
  font-family: "Manrope", sans-serif;

  font-size:
    clamp(20px, 2vw, 31px);

  letter-spacing: -0.04em;
}

.faq-question strong {
  font-size: 28px;

  font-weight: 400;
}

.faq-answer {
  height: 0;

  overflow: hidden;
}

.faq-answer p {
  max-width: 570px;

  padding:
    0
    50px
    25px
    0;

  color: var(--grey);

  font-size: 14px;

  line-height: 1.55;
}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {
  position: relative;

  min-height: 110vh;

  padding:
    80px
    var(--page-pad);

  display: flex;
  flex-direction: column;

  justify-content: space-between;

  background: var(--orange);

  overflow: hidden;
}

.final-cta::before {
  content: "";

  position: absolute;

  width: 40vw;
  height: 40vw;

  right: -10vw;
  top: -12vw;

  border-radius: 50%;

  background: var(--pink);
}

.final-label {
  position: relative;

  z-index: 2;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.1em;
}

.final-title {
  position: relative;

  z-index: 2;

  display: flex;
  flex-direction: column;

  font-family: "Manrope", sans-serif;

  font-size:
    clamp(85px, 12vw, 210px);

  line-height: 0.76;

  font-weight: 500;

  letter-spacing: -0.095em;

  text-transform: uppercase;
}

.final-title span:nth-child(2) {
  margin-left: 11%;
}

.final-title span:nth-child(3) {
  margin-left: 28%;
}

.final-highlight {
  color: var(--blue);
}

.final-action {
  position: relative;

  z-index: 3;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.final-action p {
  font-size: 15px;
}

.final-voice {
  position: absolute;

  left: 50%;
  bottom: 30px;

  transform: translateX(-50%);

  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 8px;
}

.final-wave {
  height: 28px;

  display: flex;
  align-items: center;

  gap: 3px;
}

.final-wave i {
  width: 2px;
  height: 8px;

  border-radius: 50px;

  background: var(--black);
}

.final-voice > span {
  font-size: 7px;
  font-weight: 800;

  letter-spacing: 0.1em;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
  padding:
    80px
    var(--page-pad)
    25px;

  background: var(--black);

  color: white;
}

.footer-logo {
  font-family: "Manrope", sans-serif;

  font-size:
    clamp(100px, 18vw, 300px);

  line-height: 0.72;

  font-weight: 700;

  letter-spacing: -0.1em;
}

.footer-logo span {
  color: var(--blue);

  font-weight: 400;
}

.footer-links {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  width: 50%;

  margin:
    100px
    0
    80px
    auto;

  gap: 40px;
}

.footer-links div {
  display: flex;
  flex-direction: column;

  gap: 10px;
}

.footer-links small {
  margin-bottom: 12px;

  color: #686868;

  font-size: 8px;

  letter-spacing: 0.08em;
}

.footer-links a {
  width: fit-content;

  font-size: 12px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;

  padding-top: 20px;

  border-top:
    1px solid
    rgba(255,255,255,0.13);

  color: #777;

  font-size: 8px;

  letter-spacing: 0.07em;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1000px) {

  body,
  button,
  a {
    cursor: auto;
  }

  .custom-cursor {
    display: none;
  }

  .nav-center {
    display: none;
  }

  .navbar {
    grid-template-columns:
      1fr
      1fr;
  }

  .hero-title {
    font-size:
      clamp(68px, 13vw, 130px);
  }

  .hero-line-two {
    margin-left: 8%;
  }

  .hero-line-three {
    margin-left: 0;
  }

  .hero-line-four {
    margin-left: 15%;
  }

  .hero-object {
    right: -3%;
    top: 46%;
  }

  .live-heading,
  .capabilities-header,
  .how-header {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  .conversation-stage {
    grid-template-columns:
      1fr
      0.85fr;

    gap: 35px;
  }

  .capability {
    min-height: 520px;
  }

  .how-card {
    grid-template-columns:
      60px
      1fr;

    gap: 20px;
  }

  .how-art {
    grid-column: 2;

    margin-top: 50px;
  }

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

  .price-card {
    min-height: 440px;
  }

  .faq-section {
    grid-template-columns: 1fr;

    gap: 70px;
  }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 700px) {

  :root {
    --page-pad: 18px;
    --radius: 20px;
  }

  .site-header {
    padding-top: 16px;
  }

  .nav-button {
    padding:
      10px
      13px;

    font-size: 8px;
  }

  .hero {
    min-height: 100svh;

    padding-top: 95px;
  }

  .hero-topline {
    font-size: 7px;
  }

  .hero-title {
    margin-top: 5vh;

    font-size:
      clamp(58px, 19vw, 95px);

    line-height: 0.82;
  }

  .hero-line-two {
    margin-left: 4%;
  }

  .hero-line-three {
    margin-left: 0;
  }

  .hero-line-four {
    margin-left: 8%;
  }

  .hero-object {
    width: 200px;
    height: 200px;

    right: -70px;
    top: 61%;
  }

  .hero-description {
    width: 64%;

    margin-left: 0;

    font-size: 11px;
  }

  .round-cta {
    width: 85px;
    height: 85px;
  }

  .round-cta span {
    font-size: 8px;
  }

  .hero-scroll {
    display: none;
  }


  /* Statement */

  .statement-section {
    min-height: 100vh;

    padding-top: 120px;
  }

  .statement-line {
    font-size:
      clamp(50px, 16vw, 82px);
  }

  .statement-offset {
    padding-left: 0;
  }

  .statement-pill {
    display: table;

    margin-top: 10px;
  }

  .statement-foot {
    left: var(--page-pad);
    right: auto;

    max-width: 230px;

    font-size: 11px;
  }


  /* Missed */

  .missed-story {
    height: 200vh;
  }

  .missed-word {
    font-size: 43vw;
  }

  .missed-call-card {
    width: 72vw;
  }

  .missed-result {
    font-size: 12px;
  }


  /* Solution */

  .solution-section {
    min-height: 100vh;

    padding-top: 90px;
  }

  .solution-title {
    font-size:
      clamp(54px, 17vw, 85px);

    line-height: 0.82;
  }

  .solution-title span:nth-child(2),
  .solution-title span:nth-child(3),
  .solution-title span:nth-child(4) {
    margin-left: 0;
  }

  .solution-bottom p {
    width: 55%;

    font-size: 11px;
  }

  .solution-stamp {
    font-size: 65px;
  }


  /* Conversation */

  .live-experience {
    padding-top: 90px;
  }

  .live-heading {
    padding-bottom: 55px;
  }

  .live-heading h2 {
    font-size: 17vw;
  }

  .conversation-stage {
    display: block;
  }

  .conversation-steps {
    padding-top: 0;
  }

  .conversation-step {
    min-height: auto;

    padding:
      45px
      0;

    grid-template-columns:
      45px
      1fr;
  }

  .conversation-step h3 {
    font-size: 14vw;
  }

  .conversation-step p {
    font-size: 11px;
  }

  .conversation-phone-wrap {
    margin-top: 50px;
  }

  .conversation-phone {
    position: relative;

    top: auto;

    width: 100%;
  }


  /* Capabilities */

  .capabilities {
    padding-top: 90px;
  }

  .capabilities-header h2 {
    font-size: 17vw;
  }

  .capability-list {
    grid-template-columns: 1fr;
  }

  .capability {
    min-height: 510px;

    padding: 22px;
  }

  .capability h3 {
    margin-top: 60px;

    font-size: 16vw;
  }

  .capability > p {
    left: 22px;
    bottom: 22px;

    width: 42%;

    font-size: 10px;
  }

  .qualification-art,
  .calendar-art {
    right: 20px;
    bottom: 20px;

    width: 45%;
  }

  .handoff-art {
    right: 20px;
    bottom: 20px;
  }

  .handoff-art div {
    width: 65px;
    height: 65px;

    font-size: 16px;
  }


  /* How */

  .how-section {
    padding-top: 90px;
  }

  .how-header h2 {
    font-size: 17vw;
  }

  .how-card {
    min-height: 82vh;

    padding: 22px;

    grid-template-columns: 1fr;

    align-content: start;
  }

  .how-number {
    margin-bottom: 70px;
  }

  .how-content h3 {
    font-size: 16vw;
  }

  .how-content p {
    font-size: 11px;
  }

  .how-art {
    grid-column: 1;

    margin-top: 70px;
  }

  .connect-art span,
  .connect-art strong {
    width: 75px;
    height: 75px;

    font-size: 7px;
  }

  .connect-path {
    width: 45px;
  }

  .live-circle {
    width: 230px;

    font-size: 28px;
  }


  /* Industries */

  .industries {
    padding-top: 90px;
  }

  .industries-top h2 {
    font-size: 17vw;
  }

  .industry-card {
    width: 78vw;

    height: 480px;
  }

  .industry-card h3 {
    font-size: 15vw;
  }


  /* Always */

  .always-section {
    min-height: 110vh;

    padding-top: 90px;
  }

  .always-copy h2 {
    font-size: 17vw;
  }

  .clock-stage {
    right: -40vw;
    bottom: 5vh;
  }

  .clock-circle {
    width: 110vw;
  }

  .always-footer {
    display: none;
  }


  /* Pricing */

  .pricing {
    padding-top: 90px;
  }

  .pricing-header h2 {
    font-size: 17vw;
  }


  /* FAQ */

  .faq-section {
    padding-top: 90px;
  }

  .faq-heading h2 {
    font-size: 17vw;
  }


  /* Final */

  .final-cta {
    min-height: 100vh;

    padding-top: 80px;
  }

  .final-title {
    font-size: 19vw;
  }

  .final-title span:nth-child(2),
  .final-title span:nth-child(3) {
    margin-left: 0;
  }

.final-button span {
    font-size: 7px;
  }

  .final-action p {
    max-width: 120px;

    font-size: 10px;
  }


  /* Footer */

  .footer {
    padding-top: 70px;
  }

  .footer-logo {
    font-size: 29vw;
  }

  .footer-links {
    width: 100%;

    margin:
      80px
      0
      60px;

    gap: 15px;
  }

  .footer-links a {
    font-size: 10px;
  }
} /* =========================================================
   BOT AI — LIVE EXPERIENCE HARD SPACING FIX
   Removes dead vertical space without changing JS animations
========================================================= */


/* Main section should only be as tall as its real content */
.live-experience {
  padding-top: 90px !important;
  padding-bottom: 70px !important;
}


/* Reduce gap below section heading */
.live-heading {
  padding-bottom: 30px !important;
}


/* Make both columns start from the top */
.conversation-stage {
  align-items: start !important;
}


/* Remove artificial top space */
.conversation-steps {
  padding-top: 0 !important;

  display: flex !important;
  flex-direction: column !important;
}


/* ---------------------------------------------------------
   IMPORTANT FIX
   Remove 65vh / viewport based sizing completely
--------------------------------------------------------- */

.conversation-step {
  min-height: 0 !important;
  height: auto !important;

  padding-top: 55px !important;
  padding-bottom: 55px !important;

  display: grid !important;

  grid-template-columns:
    80px
    1fr !important;

  align-content: start !important;
}


/* Make every step naturally follow the previous one */
.conversation-step + .conversation-step {
  margin-top: 0 !important;
}


/* Last step doesn't need huge ending space */
.conversation-step:last-child {
  padding-bottom: 25px !important;
}


/* Cleaner paragraph spacing */
.conversation-step p {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}


/* ---------------------------------------------------------
   STICKY PHONE
--------------------------------------------------------- */

.conversation-phone-wrap {
  align-self: stretch !important;

  min-height: 0 !important;
}


/* Keep the animation, but stop the phone creating
   unnecessary layout height */
.conversation-phone {
  top: 100px !important;

  max-height: calc(100vh - 125px);
}


/* Slightly more compact phone */
.phone-screen {
  min-height: 500px !important;
}


/* =========================================================
   DESKTOP TIGHTER VERSION
========================================================= */

@media (min-width: 1200px) {

  .conversation-step {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }

  .conversation-step:last-child {
    padding-bottom: 10px !important;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .live-experience {
    padding-top: 70px !important;
    padding-bottom: 65px !important;
  }

  .live-heading {
    padding-bottom: 30px !important;
  }

  .conversation-step {
    grid-template-columns:
      45px
      1fr !important;

    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .conversation-step:last-child {
    padding-bottom: 15px !important;
  }

  .conversation-phone-wrap {
    margin-top: 30px !important;
  }

  .conversation-phone {
    position: relative !important;
    top: auto !important;

    max-height: none !important;
  }

} /* =========================================================
   BOT AI — FINAL SPACING / STICKY FIX
   PASTE THIS AT THE VERY END OF style.css
========================================================= */


/* =========================================================
   CRITICAL STICKY FIX
========================================================= */

/*
  main ka overflow:hidden sticky phone ko break kar raha tha.
  Is override ke baad vertical sticky positioning work karegi.
*/

main {
  overflow-x: clip !important;
  overflow-y: visible !important;
}


/* =========================================================
   MISSED CALL BLACK SECTION
========================================================= */

/*
  Original section 250vh thi, jiski wajah se animation
  finish hone ke baad bohat zyada blank black scroll tha.
*/

.missed-story {
  height: 185vh !important;
}


/* =========================================================
   LIVE EXPERIENCE
========================================================= */

.live-experience {
  padding-top: 90px !important;
  padding-bottom: 75px !important;
}


.live-heading {
  padding-bottom: 35px !important;
}


.conversation-stage {
  align-items: start !important;
}


/* Remove viewport-height based gaps */

.conversation-steps {
  padding-top: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  gap: 0 !important;
}


/* Each step now takes only its natural content height */

.conversation-step {
  min-height: 0 !important;
  height: auto !important;

  padding-top: 58px !important;
  padding-bottom: 58px !important;

  margin: 0 !important;

  display: grid !important;

  grid-template-columns:
    80px
    minmax(0, 1fr) !important;

  align-content: start !important;
}


/* First step slightly tighter */

.conversation-step:first-child {
  padding-top: 45px !important;
}


/* Last step should not create dead space */

.conversation-step:last-child {
  padding-bottom: 25px !important;
}


/* Text spacing */

.conversation-step h3 {
  margin: 0 !important;
}


.conversation-step p {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}


/* =========================================================
   STICKY PHONE
========================================================= */

/*
  This parent must stretch with the left-side steps.
  The phone then remains visible as Understand / Qualify /
  Book / Follow Up scroll beside it.
*/

.conversation-phone-wrap {
  position: relative !important;

  align-self: stretch !important;

  min-height: 100% !important;

  margin: 0 !important;
}


.conversation-phone {
  position: sticky !important;

  top: 90px !important;

  width: min(100%, 470px) !important;

  margin-left: auto !important;

  max-height: calc(100vh - 110px) !important;
}


/* Phone slightly more compact */

.phone-screen {
  min-height: 495px !important;

  padding-top: 32px !important;
  padding-bottom: 28px !important;
}


.phone-wave {
  margin-top: 27px !important;
  margin-bottom: 27px !important;

  height: 60px !important;
}


/* =========================================================
   OTHER SECTION SPACING POLISH
========================================================= */

.capabilities {
  padding-top: 90px !important;
  padding-bottom: 95px !important;
}


.capabilities-header {
  margin-bottom: 55px !important;
}


.how-section {
  padding-top: 100px !important;
  padding-bottom: 120px !important;
}


.how-header {
  margin-bottom: 55px !important;
}


.industries {
  padding-top: 95px !important;
  padding-bottom: 95px !important;
}


.industries-top {
  padding-bottom: 60px !important;
}


.pricing {
  padding-top: 95px !important;
  padding-bottom: 95px !important;
}


.pricing-header {
  margin-bottom: 55px !important;
}


.faq-section {
  padding-top: 95px !important;
  padding-bottom: 95px !important;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

  .conversation-step {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  .conversation-step:first-child {
    padding-top: 40px !important;
  }

  .conversation-step:last-child {
    padding-bottom: 18px !important;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) and (min-width: 701px) {

  .conversation-stage {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(320px, 0.85fr) !important;

    gap: 35px !important;
  }


  .conversation-step {
    grid-template-columns:
      55px
      1fr !important;

    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }


  .conversation-phone {
    top: 80px !important;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  main {
    overflow-x: hidden !important;
  }


  .missed-story {
    height: 155vh !important;
  }


  .live-experience {
    padding-top: 70px !important;
    padding-bottom: 65px !important;
  }


  .live-heading {
    padding-bottom: 30px !important;
  }


  .conversation-stage {
    display: block !important;
  }


  .conversation-step {
    grid-template-columns:
      45px
      1fr !important;

    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }


  .conversation-step:first-child {
    padding-top: 30px !important;
  }


  .conversation-step:last-child {
    padding-bottom: 15px !important;
  }


  .conversation-phone-wrap {
    margin-top: 30px !important;

    min-height: 0 !important;
  }


  .conversation-phone {
    position: relative !important;

    top: auto !important;

    width: 100% !important;

    max-height: none !important;
  }


  .phone-screen {
    min-height: 470px !important;
  }

} /* =========================================================
   GOBOTAI — REFINED BRAND COLOR SYSTEM
   Paste at the VERY END of style.css
   Layout + animations remain untouched
========================================================= */

:root {
  --gb-blue: #4FA5F5;
  --gb-bright: #3794EA;
  --gb-cobalt: #287FD5;
  --gb-deep-blue: #155A9F;

  --gb-navy: #142638;
  --gb-dark: #0F1C29;

  --gb-slate: #3F4C5C;
  --gb-slate-light: #647588;

  --gb-sky: #A9D6FF;
  --gb-ice: #DCEEFF;
  --gb-pale: #EDF6FD;

  --gb-offwhite: #F6F7F8;
  --gb-paper: #F1F5F7;

  --gb-text: #142638;
  --gb-muted: #657586;
}


/* =========================================================
   GLOBAL
========================================================= */

body {
  background: var(--gb-offwhite);
  color: var(--gb-text);
}

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


/* =========================================================
   HEADER / NAV
   Fixes the orange-looking navigation
========================================================= */

.site-header {
  mix-blend-mode: normal !important;
}

.logo,
.nav-center a,
.nav-button {
  color: var(--gb-navy) !important;
}

.nav-button {
  border-color: rgba(20, 38, 56, 0.55) !important;
}

.nav-button:hover {
  background: var(--gb-navy) !important;
  color: #fff !important;
  border-color: var(--gb-navy) !important;
}


/* =========================================================
   HERO
   Light opening so blue sections later have impact
========================================================= */

.hero {
  background:
    linear-gradient(
      135deg,
      #F6F7F8 0%,
      #EDF6FD 55%,
      #DCEEFF 100%
    ) !important;
}

.hero::before {
  background: var(--gb-sky) !important;
  opacity: 0.38 !important;
}

.hero-title {
  color: var(--gb-navy) !important;
}

.hero-title em {
  color: var(--gb-cobalt) !important;
}

.hero-title em::after {
  background: var(--gb-sky) !important;
}

.hero p {
  color: var(--gb-slate-light) !important;
}

.round-cta {
  background: var(--gb-cobalt) !important;
  color: #fff !important;
}

.round-cta:hover {
  background: var(--gb-navy) !important;
}


/* =========================================================
   HERO VOICE / AI VISUAL
========================================================= */

.voice-object {
  background:
    linear-gradient(
      145deg,
      #142638,
      #203A52
    ) !important;
}

.live-dot {
  background: var(--gb-blue) !important;
}

.voice-bars i {
  background: var(--gb-blue) !important;
}

.voice-bars i:nth-child(2n) {
  background: var(--gb-sky) !important;
}


/* =========================================================
   STATEMENT SECTION
   Neutral breathing space
========================================================= */

.statement-section {
  background: var(--gb-offwhite) !important;
  color: var(--gb-navy) !important;
}

.statement-small span {
  color: var(--gb-cobalt) !important;
}

.blue-pill {
  background: var(--gb-cobalt) !important;
  color: #fff !important;
}


/* =========================================================
   MISSED CALL STORY
   DARK section for major contrast
========================================================= */

.missed-story {
  background:
    linear-gradient(
      145deg,
      #0F1C29 0%,
      #142638 100%
    ) !important;

  color: #fff !important;
}

.missed-sticky {
  color: #fff !important;
}

.missed-word {
  color: var(--gb-blue) !important;
}

.missed-call-card {
  background: var(--gb-pale) !important;
  color: var(--gb-navy) !important;
}

.missed-icon {
  background: var(--gb-cobalt) !important;
  color: #fff !important;
}

.missed-call-card small {
  color: var(--gb-deep-blue) !important;
}

.missed-result .strike {
  text-decoration-color: var(--gb-blue) !important;
}


/* =========================================================
   SOLUTION / WHAT IF SECTION
   Strong cobalt — NOT same blue everywhere
========================================================= */

.solution-section {
  background:
    linear-gradient(
      135deg,
      #155A9F 0%,
      #287FD5 58%,
      #3794EA 100%
    ) !important;

  color: #fff !important;
}

.solution-section::after {
  background: var(--gb-sky) !important;
  opacity: 0.8 !important;
}

.solution-accent {
  color: var(--gb-ice) !important;
}


/* =========================================================
   ANIMATION RESERVOIR
   Different brand shades so balls stay visible
========================================================= */

.signal-reservoir {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.30) !important;
}

.reservoir-ball {
  background: #fff !important;
}

.reservoir-ball:nth-child(2n) {
  background: var(--gb-sky) !important;
}

.reservoir-ball:nth-child(3n) {
  background: var(--gb-navy) !important;
}

.reservoir-ball:nth-child(4n) {
  background: var(--gb-ice) !important;
}

.reservoir-ball:nth-child(5n) {
  background: var(--gb-blue) !important;
}

.reservoir-ball:nth-child(7n) {
  background: var(--gb-slate) !important;
}


/* =========================================================
   LIVE EXPERIENCE
   Light blue/off-white transition
========================================================= */

.live-experience {
  background:
    linear-gradient(
      180deg,
      #F6F7F8 0%,
      #EDF6FD 100%
    ) !important;
}

.live-heading {
  color: var(--gb-navy) !important;
}

.live-heading > div span {
  color: var(--gb-cobalt) !important;
}

.live-heading h2 {
  color: var(--gb-navy) !important;
}

.live-heading h2 em {
  color: var(--gb-cobalt) !important;
}

.conversation-step > span {
  color: var(--gb-cobalt) !important;
}

.conversation-step h3 {
  color: var(--gb-navy) !important;
}

.conversation-step p {
  color: var(--gb-muted) !important;
}


/* =========================================================
   PHONE / CONVERSATION UI
========================================================= */

.conversation-phone {
  background:
    linear-gradient(
      145deg,
      #101E2C,
      #1B3249
    ) !important;
}

.phone-top small {
  background: var(--gb-cobalt) !important;
}

.phone-top div span {
  background: var(--gb-blue) !important;
}

.phone-stage-label {
  color: var(--gb-sky) !important;
}

.phone-stage-copy {
  color: #9FB2C5 !important;
}

.phone-wave i {
  background: var(--gb-blue) !important;
}

.phone-wave i:nth-child(2n) {
  background: var(--gb-sky) !important;
}

.customer-bubble {
  background: #293D51 !important;
}

.bot-bubble {
  background:
    linear-gradient(
      135deg,
      var(--gb-cobalt),
      var(--gb-blue)
    ) !important;
}

.phone-success > span {
  background: var(--gb-sky) !important;
  color: var(--gb-navy) !important;
}


/* =========================================================
   CAPABILITIES
   Controlled variation — same brand, not same color
========================================================= */

.capabilities {
  background: var(--gb-offwhite) !important;
}

.capabilities-header {
  color: var(--gb-navy) !important;
}

.capabilities-header em {
  color: var(--gb-cobalt) !important;
}


/* Strong blue card */

.capability-blue {
  background:
    linear-gradient(
      145deg,
      #287FD5,
      #4FA5F5
    ) !important;

  color: #fff !important;
}


/* Light sky card */

.capability-orange {
  background:
    linear-gradient(
      145deg,
      #DCEEFF,
      #A9D6FF
    ) !important;

  color: var(--gb-navy) !important;
}


/* Dark card */

.capability-dark {
  background:
    linear-gradient(
      145deg,
      #142638,
      #304B64
    ) !important;

  color: #fff !important;
}


/* Ice card */

.capability-pink {
  background:
    linear-gradient(
      145deg,
      #EDF6FD,
      #DCEEFF
    ) !important;

  color: var(--gb-navy) !important;
}

.qualification-art span:last-child {
  color: var(--gb-deep-blue) !important;
}

.calendar-art .selected {
  background: var(--gb-cobalt) !important;
  border-color: var(--gb-cobalt) !important;
  color: #fff !important;
}

.handoff-art div {
  background: var(--gb-slate) !important;
}

.handoff-art div:last-child {
  background: var(--gb-cobalt) !important;
}


/* =========================================================
   TICKER
========================================================= */

.ticker-section {
  background: var(--gb-pale) !important;
}

.ticker-left {
  color: var(--gb-cobalt) !important;
}

.ticker-right {
  color: var(--gb-slate) !important;
}


/* =========================================================
   HOW IT WORKS
========================================================= */

.how-section {
  background: var(--gb-offwhite) !important;
}

.how-header {
  color: var(--gb-navy) !important;
}

.how-header em {
  color: var(--gb-cobalt) !important;
}


/* Connect */

.how-card-blue {
  background:
    linear-gradient(
      135deg,
      #287FD5,
      #4FA5F5
    ) !important;

  color: #fff !important;
}


/* Train */

.how-card-orange {
  background:
    linear-gradient(
      135deg,
      #DCEEFF,
      #A9D6FF
    ) !important;

  color: var(--gb-navy) !important;
}


/* Go Live */

.how-card-black {
  background:
    linear-gradient(
      135deg,
      #142638,
      #3F4C5C
    ) !important;

  color: #fff !important;
}

.connect-art strong {
  background: #fff !important;
  color: var(--gb-cobalt) !important;
}

.live-circle span {
  background: var(--gb-blue) !important;
}


/* =========================================================
   INDUSTRIES
   Slate creates separation from blue sections
========================================================= */

.industries {
  background:
    linear-gradient(
      145deg,
      #354658,
      #46586B
    ) !important;

  color: #fff !important;
}

.industry-one {
  background: var(--gb-blue) !important;
}

.industry-two {
  background: var(--gb-sky) !important;
  color: var(--gb-navy) !important;
}

.industry-three {
  background: var(--gb-offwhite) !important;
  color: var(--gb-navy) !important;
}

.industry-four {
  background: var(--gb-ice) !important;
  color: var(--gb-navy) !important;
}

.industry-five {
  background: var(--gb-navy) !important;
  color: #fff !important;
}


/* =========================================================
   ALWAYS ON / 24-7
========================================================= */

.always-section {
  background:
    radial-gradient(
      circle at 70% 50%,
      #203A52 0%,
      #142638 45%,
      #0F1C29 100%
    ) !important;

  color: #fff !important;
}

.always-copy em {
  color: var(--gb-sky) !important;
}

.clock-circle {
  background:
    linear-gradient(
      145deg,
      var(--gb-cobalt),
      var(--gb-blue)
    ) !important;
}

.clock-hand {
  background: #fff !important;
}


/* =========================================================
   PRICING
========================================================= */

.pricing {
  background: var(--gb-paper) !important;
}

.pricing-header {
  color: var(--gb-navy) !important;
}

.pricing-header h2 em {
  color: var(--gb-cobalt) !important;
}

.price-card {
  background: #fff !important;
  color: var(--gb-navy) !important;
}

.featured-price {
  background:
    linear-gradient(
      145deg,
      #A9D6FF,
      #DCEEFF
    ) !important;

  border-color: var(--gb-sky) !important;
}

.price {
  color: var(--gb-cobalt) !important;
}

.featured-price .price {
  color: var(--gb-deep-blue) !important;
}

.popular {
  background: var(--gb-navy) !important;
  color: #fff !important;
}


/* =========================================================
   FAQ
========================================================= */

.faq-section {
  background: var(--gb-offwhite) !important;
}

.faq-heading {
  color: var(--gb-navy) !important;
}

.faq-heading em {
  color: var(--gb-cobalt) !important;
}

.faq-answer p {
  color: var(--gb-muted) !important;
}


/* =========================================================
   FINAL CTA
   Deep blue gives ending more weight
========================================================= */

.final-cta {
  background:
    linear-gradient(
      135deg,
      #155A9F 0%,
      #287FD5 100%
    ) !important;

  color: #fff !important;
}

.final-cta::before {
  background: var(--gb-sky) !important;
  opacity: 0.82 !important;
}

.final-highlight {
  color: var(--gb-ice) !important;
}

.final-wave i {
  background: var(--gb-sky) !important;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
  background: var(--gb-navy) !important;
  color: #fff !important;
}

.footer-logo span {
  color: var(--gb-blue) !important;
}


/* =========================================================
   GENERAL SIGNAL ANIMATION COLORS
   NO ORANGE
========================================================= */

.bot-signal-orb:not(.bot-mascot-orb) {
  background: var(--gb-blue) !important;
}

.signal-trail-dot {
  background: var(--gb-blue) !important;
}

.signal-ring-flash {
  border-color: rgba(79,165,245,0.85) !important;
} /* =========================================================
   GOBOTAI — SOLUTION SECTION CONTRAST FIX
   Keeps all existing animations
========================================================= */

.solution-section {
  background:
    linear-gradient(
      135deg,
      #F6F7F8 0%,
      #EDF6FD 58%,
      #DCEEFF 100%
    ) !important;

  color: #142638 !important;
}


/* Decorative giant circle */

.solution-section::after {
  background:
    linear-gradient(
      145deg,
      #A9D6FF,
      #DCEEFF
    ) !important;

  opacity: 0.95 !important;
}


/* Small section label */

.solution-index {
  color: #287FD5 !important;
}


/* Main giant typography */

.solution-title {
  color: #142638 !important;
}


/* Keep ONE strong branded blue moment */

.solution-accent {
  color: #287FD5 !important;
}


/* Bottom description */

.solution-bottom p {
  color: #52677A !important;
}


/* 24 / 7 number */

.solution-stamp {
  color: #155A9F !important;
}


/* =========================================================
   SIGNAL RESERVOIR
   Make it a strong dark visual object
========================================================= */

.signal-reservoir {
  background:
    linear-gradient(
      145deg,
      rgba(20, 38, 56, 0.96),
      rgba(31, 61, 88, 0.94)
    ) !important;

  border:
    1px solid
    rgba(255,255,255,0.25) !important;

  box-shadow:
    0 30px 70px
    rgba(20, 38, 56, 0.16) !important;
}


.signal-reservoir-label {
  color:
    rgba(255,255,255,0.72) !important;
}


/* =========================================================
   BALLS — CONTROLLED BLUE PALETTE
========================================================= */

.reservoir-ball {
  background: #4FA5F5 !important;
}

.reservoir-ball:nth-child(2n) {
  background: #A9D6FF !important;
}

.reservoir-ball:nth-child(3n) {
  background: #FFFFFF !important;
}

.reservoir-ball:nth-child(4n) {
  background: #287FD5 !important;
}

.reservoir-ball:nth-child(5n) {
  background: #607286 !important;
}

.reservoir-ball:nth-child(7n) {
  background: #DCEEFF !important;
} /* =========================================================
   GOBOTAI — CLEAN SOLUTION SECTION
   Fixes the messy WHAT IF section
   Keeps existing animations intact
========================================================= */


/* =========================================================
   MAIN SECTION
========================================================= */

.solution-section {
  min-height: 105vh !important;

  padding:
    105px
    var(--page-pad)
    70px !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(330px, .65fr) !important;

  grid-template-rows:
    auto
    1fr
    auto !important;

  column-gap: 55px !important;

  align-items: center !important;

  background:
    linear-gradient(
      135deg,
      #F7FAFC 0%,
      #EDF6FD 60%,
      #DFEFFB 100%
    ) !important;

  color: #142638 !important;

  overflow: hidden !important;
}


/* =========================================================
   SECTION LABEL
========================================================= */

.solution-index {
  grid-column: 1;
  grid-row: 1;

  position: relative !important;

  margin-bottom: 45px !important;

  color: #287FD5 !important;

  font-size: 9px !important;
  font-weight: 800 !important;

  letter-spacing: .10em !important;

  z-index: 5 !important;
}


/* =========================================================
   MAIN TYPOGRAPHY
========================================================= */

.solution-title {
  grid-column: 1;
  grid-row: 2;

  width: 100% !important;
  max-width: 980px !important;

  position: relative !important;

  z-index: 5 !important;

  display: flex !important;
  flex-direction: column !important;

  justify-content: center !important;

  font-size:
    clamp(72px, 7.4vw, 132px) !important;

  line-height: .84 !important;

  letter-spacing: -.075em !important;

  color: #142638 !important;
}


/* Remove excessive offsets */

.solution-title span:nth-child(1) {
  margin-left: 0 !important;
}

.solution-title span:nth-child(2) {
  margin-left: 7% !important;
}

.solution-title span:nth-child(3) {
  margin-left: 14% !important;
}

.solution-title span:nth-child(4) {
  margin-left: 3% !important;
}


/* Main accent */

.solution-accent {
  color: #287FD5 !important;
}


/* =========================================================
   RIGHT VISUAL AREA
========================================================= */

.signal-reservoir {
  grid-column: 2;
  grid-row: 2;

  position: relative !important;

  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;

  justify-self: end !important;
  align-self: center !important;

  width:
    min(100%, 430px) !important;

  aspect-ratio: 1 / 1 !important;

  border-radius: 38px !important;

  overflow: hidden !important;

  background:
    linear-gradient(
      145deg,
      #172B40 0%,
      #213D59 100%
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.18) !important;

  box-shadow:
    0 35px 90px
    rgba(20,38,56,.16) !important;

  z-index: 3 !important;
}


/* =========================================================
   RESERVOIR LABEL
========================================================= */

.signal-reservoir-label {
  top: 23px !important;
  left: 24px !important;

  color:
    rgba(255,255,255,.68) !important;

  font-size: 8px !important;

  letter-spacing: .13em !important;
}


/* =========================================================
   PARTICLES
   Less noisy / more premium
========================================================= */

.reservoir-ball {
  width: 19px !important;
  height: 19px !important;

  opacity: .78 !important;
}


/* Give some visual depth */

.reservoir-ball:nth-child(2n) {
  opacity: .55 !important;
}

.reservoir-ball:nth-child(3n) {
  width: 25px !important;
  height: 25px !important;

  opacity: .88 !important;
}

.reservoir-ball:nth-child(5n) {
  width: 13px !important;
  height: 13px !important;

  opacity: .50 !important;
}


/* =========================================================
   24 / 7
========================================================= */

.solution-stamp {
  position: absolute !important;

  right: 45px !important;
  bottom: 40px !important;

  z-index: 7 !important;

  margin: 0 !important;

  font-size:
    clamp(72px, 7vw, 115px) !important;

  line-height: .72 !important;

  color: #287FD5 !important;

  transform: rotate(-7deg);

  pointer-events: none;
}

.solution-stamp small {
  font-size: .19em !important;

  color: #155A9F !important;
}


/* =========================================================
   BOTTOM COPY
========================================================= */

.solution-bottom {
  grid-column: 1 / -1;
  grid-row: 3;

  position: relative !important;

  z-index: 8 !important;

  display: flex !important;

  justify-content: flex-start !important;

  align-items: flex-end !important;

  margin-top: 45px !important;
}

.solution-bottom p {
  width: min(390px, 100%) !important;

  color: #5F7183 !important;

  font-size: 14px !important;

  line-height: 1.55 !important;
}


/* =========================================================
   DECORATIVE BACKGROUND CIRCLE
========================================================= */

.solution-section::after {
  width: 270px !important;
  height: 270px !important;

  right: -70px !important;
  top: -55px !important;

  background:
    #A9D6FF !important;

  opacity: .55 !important;

  z-index: 0 !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

  .solution-section {
    grid-template-columns:
      1fr
      380px !important;

    column-gap: 30px !important;
  }

  .solution-title {
    font-size:
      clamp(62px, 7vw, 105px) !important;
  }

}


@media (max-width: 820px) {

  .solution-section {
    display: block !important;

    min-height: auto !important;

    padding:
      90px
      var(--page-pad)
      70px !important;
  }

  .solution-index {
    margin-bottom: 45px !important;
  }

  .solution-title {
    max-width: 100% !important;

    font-size:
      clamp(55px, 14vw, 90px) !important;
  }

  .solution-title span:nth-child(1),
  .solution-title span:nth-child(2),
  .solution-title span:nth-child(3),
  .solution-title span:nth-child(4) {
    margin-left: 0 !important;
  }

  .signal-reservoir {
    width: min(100%, 400px) !important;

    margin:
      65px
      auto
      0 !important;
  }

  .solution-bottom {
    margin-top: 40px !important;
  }

  .solution-stamp {
    right: 20px !important;
    bottom: 25px !important;

    font-size: 70px !important;
  }

}  /* =========================================================
   GOBOTAI — FINAL CTA CLEANUP
   Keeps existing animation, fixes hierarchy + contrast
========================================================= */

.final-cta {
  min-height: 100vh !important;

  padding:
    110px
    var(--page-pad)
    70px !important;

  background:
    linear-gradient(
      135deg,
      #F6F7F8 0%,
      #EDF6FD 100%
    ) !important;

  color: #142638 !important;

  overflow: hidden !important;
}


/* =========================================================
   DECORATIVE CIRCLE
========================================================= */

.final-cta::before {
  width: 360px !important;
  height: 360px !important;

  right: -95px !important;
  top: -85px !important;

  background:
    #A9D6FF !important;

  opacity: .62 !important;
}


/* =========================================================
   SMALL LABEL
========================================================= */

.final-label {
  color: #287FD5 !important;

  font-size: 9px !important;
  font-weight: 800 !important;

  letter-spacing: .11em !important;
}


/* =========================================================
   MAIN TITLE
   Much cleaner scale
========================================================= */

.final-title {
  max-width: 1250px !important;

  margin-top: 55px !important;

  font-size:
    clamp(76px, 8.6vw, 145px) !important;

  line-height: .84 !important;

  letter-spacing: -.075em !important;

  color: #142638 !important;

  text-transform: uppercase !important;
}


/* Remove extreme offsets */

.final-title span:nth-child(1) {
  margin-left: 0 !important;
}

.final-title span:nth-child(2) {
  margin-left: 8% !important;
}

.final-title span:nth-child(3) {
  margin-left: 18% !important;
}


/* Highlight */

.final-highlight {
  color: #287FD5 !important;
}


/* =========================================================
   BOTTOM AREA
========================================================= */

.final-action {
  margin-top: 65px !important;

  align-items: flex-end !important;
}

.final-action p {
  max-width: 320px !important;

  color: #5F7183 !important;

  font-size: 15px !important;

  line-height: 1.5 !important;
}


/* =========================================================
   CTA BUTTON
========================================================= */

/* =========================================================
   VOICE WAVE
========================================================= */

.final-voice {
  bottom: 28px !important;
}

.final-wave i {
  background: #4FA5F5 !important;
}

.final-voice > span {
  color: #5F7183 !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .final-title {
    font-size:
      clamp(60px, 12vw, 110px) !important;
  }

  .final-title span:nth-child(1),
  .final-title span:nth-child(2),
  .final-title span:nth-child(3) {
    margin-left: 0 !important;
  }

}


@media (max-width: 700px) {

  .final-cta {
    min-height: 90vh !important;

    padding:
      90px
      var(--page-pad)
      60px !important;
  }

  .final-title {
    margin-top: 45px !important;

    font-size:
      clamp(54px, 17vw, 82px) !important;
  }

  .final-action {
    margin-top: 50px !important;
  }

} /* =========================================================
   GOBOTAI — FINAL PURPLE / BLACK / GREY BRAND THEME
   Paste at the VERY END of style.css
   Layout + animations remain untouched
========================================================= */

:root {
  --go-purple: #76537c;
  --go-purple-strong: #634269;
  --go-purple-deep: #4c3551;

  --go-black: #111111;
  --go-charcoal: #1c1b1d;
  --go-dark-grey: #363337;

  --go-mouse: #777277;
  --go-grey: #a9a4a8;
  --go-soft-grey: #d9d5d8;

  --go-lilac: #e8e0e9;
  --go-lilac-soft: #f0ebf1;

  --go-offwhite: #f7f6f5;
  --go-paper: #f2f0f1;
  --go-white: #ffffff;

  --go-text: #181618;
  --go-muted: #6f6a6f;
}


/* =========================================================
   GLOBAL
========================================================= */

body {
  background: var(--go-offwhite) !important;
  color: var(--go-text) !important;
}

::selection {
  background: var(--go-purple) !important;
  color: #fff !important;
}


/* =========================================================
   HEADER / NAV
========================================================= */

.site-header {
  mix-blend-mode: normal !important;
}

.logo,
.nav-center a,
.nav-button {
  color: var(--go-black) !important;
}

.nav-button {
  border-color: rgba(17,17,17,.42) !important;
}

.nav-button:hover {
  background: var(--go-purple-deep) !important;
  border-color: var(--go-purple-deep) !important;
  color: #fff !important;
}


/* =========================================================
   HERO
========================================================= */

.hero {
  background:
    linear-gradient(
      135deg,
      #f7f6f5 0%,
      #f0ebf1 58%,
      #e5dce7 100%
    ) !important;
}

.hero::before {
  background: var(--go-lilac) !important;
  opacity: .48 !important;
}

.hero-title {
  color: var(--go-black) !important;
}

.hero-title em {
  color: var(--go-purple-strong) !important;
}

.hero-title em::after {
  background: #c9b5cd !important;
}

.hero-description {
  color: var(--go-muted) !important;
}

.round-cta {
  background: var(--go-purple) !important;
  color: #fff !important;
}

.round-cta:hover {
  background: var(--go-black) !important;
}


/* =========================================================
   HERO AI / VOICE OBJECT
========================================================= */

.voice-object {
  background:
    linear-gradient(
      145deg,
      #171518,
      #2b272c
    ) !important;
}

.live-dot {
  background: #a880ad !important;
}

.voice-bars i {
  background: #a880ad !important;
}

.voice-bars i:nth-child(2n) {
  background: #d7c7da !important;
}


/* =========================================================
   STATEMENT SECTION
========================================================= */

.statement-section {
  background: var(--go-white) !important;
  color: var(--go-black) !important;
}

.statement-small span {
  color: var(--go-purple) !important;
}

.blue-pill {
  background: var(--go-purple-strong) !important;
  color: #fff !important;
}

.statement-foot {
  color: var(--go-muted) !important;
}


/* =========================================================
   MISSED STORY
========================================================= */

.missed-story {
  background:
    linear-gradient(
      145deg,
      #0e0d0f,
      #1c1a1d
    ) !important;
}

.missed-sticky {
  color: #fff !important;
}

.missed-word {
  color: #8b6690 !important;
}

.missed-call-card {
  background: #f2eef2 !important;
  color: var(--go-black) !important;
}

.missed-icon {
  background: var(--go-purple-strong) !important;
  color: #fff !important;
}

.missed-call-card small {
  color: var(--go-purple-deep) !important;
}

.missed-result .strike {
  text-decoration-color: #9c7aa1 !important;
}


/* =========================================================
   SOLUTION / WHAT IF
========================================================= */

.solution-section {
  background:
    linear-gradient(
      135deg,
      #f7f6f5 0%,
      #eee9ef 58%,
      #ddd3df 100%
    ) !important;

  color: var(--go-black) !important;
}

.solution-section::after {
  background: #cec0d1 !important;
  opacity: .55 !important;
}

.solution-index {
  color: var(--go-purple) !important;
}

.solution-title {
  color: var(--go-black) !important;
}

.solution-accent {
  color: var(--go-purple-strong) !important;
}

.solution-bottom p {
  color: var(--go-muted) !important;
}

.solution-stamp {
  color: var(--go-purple-deep) !important;
}

.solution-stamp small {
  color: var(--go-purple) !important;
}


/* =========================================================
   SIGNAL RESERVOIR
========================================================= */

.signal-reservoir {
  background:
    linear-gradient(
      145deg,
      #1c1a1d,
      #343036
    ) !important;

  border-color: rgba(255,255,255,.18) !important;

  box-shadow:
    0 35px 90px
    rgba(35,30,36,.16) !important;
}

.signal-reservoir-label {
  color: rgba(255,255,255,.68) !important;
}

.reservoir-ball {
  background: #8a6690 !important;
}

.reservoir-ball:nth-child(2n) {
  background: #cbb9cf !important;
}

.reservoir-ball:nth-child(3n) {
  background: #ffffff !important;
}

.reservoir-ball:nth-child(4n) {
  background: #5e4364 !important;
}

.reservoir-ball:nth-child(5n) {
  background: #777277 !important;
}

.reservoir-ball:nth-child(7n) {
  background: #e8e0e9 !important;
}


/* =========================================================
   LIVE EXPERIENCE
========================================================= */

.live-experience {
  background:
    linear-gradient(
      180deg,
      #f7f6f5 0%,
      #f0ecef 100%
    ) !important;
}

.live-heading {
  color: var(--go-black) !important;
}

.live-heading > div span {
  color: var(--go-purple) !important;
}

.live-heading h2 {
  color: var(--go-black) !important;
}

.live-heading h2 em {
  color: var(--go-purple-strong) !important;
}

.conversation-step > span {
  color: var(--go-purple) !important;
}

.conversation-step h3 {
  color: var(--go-black) !important;
}

.conversation-step p {
  color: var(--go-muted) !important;
}


/* =========================================================
   CONVERSATION PHONE
========================================================= */

.conversation-phone {
  background:
    linear-gradient(
      145deg,
      #151316,
      #29252a
    ) !important;
}

.phone-top div span {
  background: #a57bab !important;
}

.phone-top small {
  background: var(--go-purple-strong) !important;
}

.phone-stage-label {
  color: #c8b3cc !important;
}

.phone-stage-copy {
  color: #9f989f !important;
}

.phone-wave i {
  background: #9b74a1 !important;
}

.phone-wave i:nth-child(2n) {
  background: #d5c5d8 !important;
}

.customer-bubble {
  background: #373238 !important;
}

.bot-bubble {
  background:
    linear-gradient(
      135deg,
      #76537c,
      #936c99
    ) !important;
}

.phone-success > span {
  background: #d7c7da !important;
  color: var(--go-black) !important;
}


/* =========================================================
   CAPABILITIES
========================================================= */

.capabilities {
  background: var(--go-offwhite) !important;
}

.capabilities-header {
  color: var(--go-black) !important;
}

.capabilities-header em {
  color: var(--go-purple-strong) !important;
}


/* Card 1 — Purple */

.capability-blue {
  background:
    linear-gradient(
      145deg,
      #67466d,
      #85628b
    ) !important;

  color: #fff !important;
}


/* Card 2 — Light Lilac */

.capability-orange {
  background:
    linear-gradient(
      145deg,
      #eee9ef,
      #d8cbdc
    ) !important;

  color: var(--go-black) !important;
}


/* Card 3 — Black */

.capability-dark {
  background:
    linear-gradient(
      145deg,
      #151316,
      #302c31
    ) !important;

  color: #fff !important;
}


/* Card 4 — Mouse grey */

.capability-pink {
  background:
    linear-gradient(
      145deg,
      #dedbdd,
      #c9c4c8
    ) !important;

  color: var(--go-black) !important;
}

.qualification-art span:last-child {
  color: var(--go-purple-deep) !important;
}

.calendar-art .selected {
  background: var(--go-purple) !important;
  border-color: var(--go-purple) !important;
  color: #fff !important;
}

.handoff-art div {
  background: var(--go-dark-grey) !important;
}

.handoff-art div:last-child {
  background: var(--go-purple-strong) !important;
}


/* =========================================================
   TICKER
========================================================= */

.ticker-section {
  background: #f0edef !important;
}

.ticker-left {
  color: var(--go-purple-strong) !important;
}

.ticker-right {
  color: #5f5b5f !important;
}


/* =========================================================
   HOW IT WORKS
========================================================= */

.how-section {
  background: var(--go-offwhite) !important;
}

.how-header {
  color: var(--go-black) !important;
}

.how-header em {
  color: var(--go-purple-strong) !important;
}


/* Connect */

.how-card-blue {
  background:
    linear-gradient(
      135deg,
      #67466d,
      #85628b
    ) !important;

  color: #fff !important;
}


/* Train */

.how-card-orange {
  background:
    linear-gradient(
      135deg,
      #e5dde7,
      #cdc0d0
    ) !important;

  color: var(--go-black) !important;
}


/* Go Live */

.how-card-black {
  background:
    linear-gradient(
      135deg,
      #151316,
      #3a353b
    ) !important;

  color: #fff !important;
}

.connect-art strong {
  background: #fff !important;
  color: var(--go-purple-strong) !important;
}

.live-circle span {
  background: #a67fac !important;
}


/* =========================================================
   INDUSTRIES
========================================================= */

.industries {
  background:
    linear-gradient(
      145deg,
      #3b343d,
      #4c444e
    ) !important;

  color: #fff !important;
}

.industry-one {
  background: #806087 !important;
  color: #fff !important;
}

.industry-two {
  background: #d8cbdc !important;
  color: var(--go-black) !important;
}

.industry-three {
  background: #f7f6f5 !important;
  color: var(--go-black) !important;
}

.industry-four {
  background: #c2bec1 !important;
  color: var(--go-black) !important;
}

.industry-five {
  background: #1b191c !important;
  color: #fff !important;
}


/* =========================================================
   ALWAYS ON
========================================================= */

.always-section {
  background:
    radial-gradient(
      circle at 70% 50%,
      #342d36 0%,
      #1b191c 45%,
      #100f11 100%
    ) !important;

  color: #fff !important;
}

.always-copy em {
  color: #b493ba !important;
}

.clock-circle {
  background:
    linear-gradient(
      145deg,
      #68486e,
      #89678f
    ) !important;
}

.clock-hand {
  background: #f5edf6 !important;
}


/* =========================================================
   PRICING
========================================================= */

.pricing {
  background: var(--go-paper) !important;
}

.pricing-header {
  color: var(--go-black) !important;
}

.pricing-header h2 em {
  color: var(--go-purple-strong) !important;
}

.price-card {
  background: #fff !important;
  color: var(--go-black) !important;
}

.featured-price {
  background:
    linear-gradient(
      145deg,
      #ded3e0,
      #cdbfd0
    ) !important;

  border-color: #c7b7ca !important;
}

.price {
  color: var(--go-purple-strong) !important;
}

.featured-price .price {
  color: var(--go-purple-deep) !important;
}

.popular {
  background: var(--go-black) !important;
  color: #fff !important;
}


/* =========================================================
   FAQ
========================================================= */

.faq-section {
  background: var(--go-offwhite) !important;
}

.faq-heading {
  color: var(--go-black) !important;
}

.faq-heading em {
  color: var(--go-purple-strong) !important;
}

.faq-answer p {
  color: var(--go-muted) !important;
}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {
  background:
    linear-gradient(
      135deg,
      #f7f6f5 0%,
      #eee8ef 100%
    ) !important;

  color: var(--go-black) !important;
}

.final-cta::before {
  background: #d2c2d5 !important;
  opacity: .7 !important;
}

.final-label {
  color: var(--go-purple) !important;
}

.final-title {
  color: var(--go-black) !important;
}

.final-highlight {
  color: var(--go-purple-strong) !important;
}

.final-action p {
  color: var(--go-muted) !important;
}

.final-wave i {
  background: #8e6994 !important;
}

.final-voice > span {
  color: #756f75 !important;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
  background: #111111 !important;
  color: #fff !important;
}

.footer-logo span {
  color: #9b77a1 !important;
}

.footer-links small,
.footer-bottom {
  color: #8a858a !important;
}


/* =========================================================
   GENERAL SIGNAL COLORS
========================================================= */

.bot-signal-orb:not(.bot-mascot-orb) {
  background: #8d6993 !important;
}

.signal-trail-dot {
  background: #9f79a5 !important;
}

.signal-ring-flash {
  border-color: rgba(142,105,148,.8) !important;
}


/* =========================================================
   NAVBAR GLASS SURFACE
========================================================= */

.navbar {
  background:
    rgba(247,246,245,.78) !important;

  border-color:
    rgba(17,17,17,.08) !important;

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}  /* =========================================================
   GOBOTAI — PURPLE THEME CONTRAST POLISH
   Paste at VERY END of style.css
   Keeps current theme + animations
========================================================= */


/* =========================================================
   RICHER BRAND PURPLE
========================================================= */

:root {
  --go-purple-rich: #6f4a77;
  --go-purple-deepest: #4a2f50;
  --go-purple-soft: #bca9c0;

  --go-grey-mid: #8a8589;
  --go-grey-deep: #5f5a5f;

  --go-neutral-light: #ece9eb;
  --go-neutral-mid: #d7d2d6;
}


/* =========================================================
   HERO — stronger focal contrast
========================================================= */

.hero-title em {
  color: var(--go-purple-rich) !important;
}

.hero-title em::after {
  background: #d7c8da !important;
}

.round-cta {
  background:
    linear-gradient(
      145deg,
      #76537c,
      #5d3d64
    ) !important;
}

.hero::before {
  background:
    radial-gradient(
      circle,
      rgba(118,83,124,.22),
      rgba(118,83,124,.05),
      transparent 72%
    ) !important;
}


/* =========================================================
   STATEMENT
========================================================= */

.blue-pill {
  background:
    linear-gradient(
      135deg,
      #76537c,
      #5a3b61
    ) !important;
}


/* =========================================================
   MISSED — make purple pop more against black
========================================================= */

.missed-word {
  color: #9b73a2 !important;
}

.missed-icon {
  background: #76537c !important;
}

.missed-call-card {
  background:
    linear-gradient(
      145deg,
      #f4f1f4,
      #e5dde7
    ) !important;
}


/* =========================================================
   SOLUTION / WHAT IF
========================================================= */

.solution-section {
  background:
    linear-gradient(
      135deg,
      #faf9f9 0%,
      #efe9f0 52%,
      #d9cddd 100%
    ) !important;
}

.solution-accent {
  color: #6c4773 !important;
}

.solution-stamp {
  color: #59365f !important;
}

.solution-section::after {
  background:
    linear-gradient(
      145deg,
      #c7b3cb,
      #e1d6e3
    ) !important;
}


/* =========================================================
   SIGNAL BOX
========================================================= */

.signal-reservoir {
  background:
    linear-gradient(
      145deg,
      #171518,
      #322c34
    ) !important;
}

.reservoir-ball:nth-child(1n) {
  background: #8a6291 !important;
}

.reservoir-ball:nth-child(2n) {
  background: #c9b7cd !important;
}

.reservoir-ball:nth-child(3n) {
  background: #ffffff !important;
}

.reservoir-ball:nth-child(4n) {
  background: #5b3d61 !important;
}

.reservoir-ball:nth-child(5n) {
  background: #8c878b !important;
}


/* =========================================================
   LIVE EXPERIENCE
========================================================= */

.live-heading h2 em {
  color: #6c4773 !important;
}

.conversation-step > span {
  color: #76537c !important;
}

.conversation-phone {
  background:
    linear-gradient(
      145deg,
      #121113,
      #2e292f
    ) !important;
}

.bot-bubble {
  background:
    linear-gradient(
      135deg,
      #68466f,
      #8d6893
    ) !important;
}


/* =========================================================
   CAPABILITIES — stronger separation between cards
========================================================= */

.capability-blue {
  background:
    linear-gradient(
      145deg,
      #6b4772,
      #8d6793
    ) !important;
}

.capability-orange {
  background:
    linear-gradient(
      145deg,
      #eee8ef,
      #cdbed1
    ) !important;
}

.capability-dark {
  background:
    linear-gradient(
      145deg,
      #111011,
      #2f2a30
    ) !important;
}

.capability-pink {
  background:
    linear-gradient(
      145deg,
      #d7d3d6,
      #bdb7bc
    ) !important;
}


/* =========================================================
   TICKERS
========================================================= */

.ticker-left {
  color: #6c4773 !important;
}

.ticker-right {
  color: #595459 !important;
}


/* =========================================================
   HOW IT WORKS
========================================================= */

.how-card-blue {
  background:
    linear-gradient(
      135deg,
      #67436e,
      #8b6591
    ) !important;
}

.how-card-orange {
  background:
    linear-gradient(
      135deg,
      #e8e0e9,
      #cbbdce
    ) !important;
}

.how-card-black {
  background:
    linear-gradient(
      135deg,
      #121113,
      #383239
    ) !important;
}


/* =========================================================
   INDUSTRIES — stronger visual rhythm
========================================================= */

.industries {
  background:
    linear-gradient(
      145deg,
      #332e35,
      #514853
    ) !important;
}

.industry-one {
  background:
    linear-gradient(
      145deg,
      #795080,
      #936b99
    ) !important;
  color: #fff !important;
}

.industry-two {
  background: #d7c9da !important;
}

.industry-three {
  background: #f7f6f5 !important;
}

.industry-four {
  background: #bdb8bc !important;
}

.industry-five {
  background: #171518 !important;
}


/* =========================================================
   24 / 7 — make it a stronger focal section
========================================================= */

.always-section {
  background:
    radial-gradient(
      circle at 72% 48%,
      #403645 0%,
      #211e22 42%,
      #111011 100%
    ) !important;
}

.always-copy em {
  color: #bea5c3 !important;
}

.clock-circle {
  background:
    radial-gradient(
      circle at 34% 25%,
      #9a78a0 0%,
      #74517b 45%,
      #56385c 100%
    ) !important;

  box-shadow:
    0 40px 100px rgba(73,45,79,.26) !important;
}


/* =========================================================
   PRICING
========================================================= */

.pricing {
  background:
    linear-gradient(
      180deg,
      #f4f2f3,
      #ece8eb
    ) !important;
}

.price-card {
  box-shadow:
    0 12px 30px
    rgba(42,35,43,.04) !important;
}

.featured-price {
  background:
    linear-gradient(
      145deg,
      #ddcfe0,
      #c4b2c8
    ) !important;
}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {
  background:
    linear-gradient(
      135deg,
      #faf9f9 0%,
      #eee8ef 62%,
      #ded2e1 100%
    ) !important;
}

.final-highlight {
  color: #6c4773 !important;
}

.final-cta::before {
  background:
    radial-gradient(
      circle,
      #cbb9cf,
      #ded2e1
    ) !important;
}

/* =========================================================
   FOOTER
========================================================= */

.footer {
  background:
    linear-gradient(
      180deg,
      #111011,
      #181619
    ) !important;
}

.footer-logo span {
  color: #a27da7 !important;
}   /* =========================================
   GOBOTAI — HEADER LOGO SIZE
========================================= */

.navbar .logo {
  display: flex !important;
  align-items: center !important;

  width: 190px !important;
  height: 60px !important;

  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.navbar .logo img {
  display: block !important;

  width: 190px !important;
  height: auto !important;

  object-fit: contain !important;
}


/* Tablet */
@media (max-width: 1000px) {

  .navbar .logo,
  .navbar .logo img {
    width: 165px !important;
  }

}


/* Mobile */
@media (max-width: 700px) {

  .navbar .logo {
    width: 135px !important;
    height: 45px !important;
  }

  .navbar .logo img {
    width: 135px !important;
  }

} /* =========================================================
   GOBOTAI — FINAL TYPOGRAPHY SCALE PASS
   Keeps animation + structure intact
========================================================= */


/* HERO — keep it dramatic */
.hero-title {
  font-size:
    clamp(68px, 9vw, 155px) !important;

  line-height: .82 !important;
}


/* GIANT STATEMENT — still large, but less overwhelming */
.statement-line {
  font-size:
    clamp(54px, 7.7vw, 125px) !important;

  line-height: .92 !important;
}


/* MISSED — major reduction */
.missed-word {
  font-size:
    clamp(105px, 18vw, 300px) !important;

  line-height: .76 !important;

  letter-spacing: -.085em !important;
}


/* WHAT IF / SOLUTION */
.solution-title {
  font-size:
    clamp(64px, 6.5vw, 112px) !important;

  line-height: .88 !important;
}


/* ONE CALL / LIVE EXPERIENCE */
.live-heading h2 {
  font-size:
    clamp(58px, 6.7vw, 115px) !important;

  line-height: .88 !important;
}

.conversation-step h3 {
  font-size:
    clamp(46px, 4.9vw, 82px) !important;

  line-height: .94 !important;
}


/* CAPABILITIES */
.capabilities-header h2 {
  font-size:
    clamp(58px, 6.7vw, 115px) !important;

  line-height: .88 !important;
}

.capability h3 {
  font-size:
    clamp(48px, 4.9vw, 82px) !important;

  line-height: .88 !important;
}


/* TICKERS */
.ticker-track {
  font-size:
    clamp(46px, 6vw, 96px) !important;
}


/* HOW IT WORKS */
.how-header h2 {
  font-size:
    clamp(58px, 6.7vw, 115px) !important;

  line-height: .88 !important;
}

.how-content h3 {
  font-size:
    clamp(48px, 5.2vw, 90px) !important;

  line-height: .88 !important;
}


/* INDUSTRIES */
.industries-top h2 {
  font-size:
    clamp(58px, 6.8vw, 112px) !important;

  line-height: .88 !important;
}

.industry-card h3 {
  font-size:
    clamp(44px, 4.5vw, 72px) !important;

  line-height: .9 !important;
}


/* 24/7 SECTION — heading smaller, big 24 remains intentional */
.always-copy h2 {
  font-size:
    clamp(58px, 6.8vw, 115px) !important;

  line-height: .88 !important;
}


/* PRICING */
.pricing-header h2 {
  font-size:
    clamp(58px, 6.7vw, 112px) !important;

  line-height: .88 !important;
}


/* FAQ */
.faq-heading h2 {
  font-size:
    clamp(54px, 6vw, 100px) !important;

  line-height: .9 !important;
}


/* FINAL CTA */
.final-title {
  font-size:
    clamp(68px, 7.3vw, 125px) !important;

  line-height: .87 !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .hero-title {
    font-size:
      clamp(62px, 11vw, 112px) !important;
  }

  .missed-word {
    font-size:
      clamp(95px, 20vw, 220px) !important;
  }

  .solution-title,
  .live-heading h2,
  .capabilities-header h2,
  .how-header h2,
  .industries-top h2,
  .always-copy h2,
  .pricing-header h2 {
    font-size:
      clamp(54px, 9vw, 90px) !important;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .hero-title {
    font-size:
      clamp(52px, 16vw, 78px) !important;
  }

  .statement-line {
    font-size:
      clamp(46px, 14vw, 68px) !important;
  }

  .missed-word {
    font-size:
      clamp(82px, 30vw, 145px) !important;
  }

  .solution-title,
  .live-heading h2,
  .capabilities-header h2,
  .how-header h2,
  .industries-top h2,
  .always-copy h2,
  .pricing-header h2,
  .faq-heading h2 {
    font-size:
      clamp(48px, 14vw, 70px) !important;
  }

  .conversation-step h3,
  .capability h3,
  .how-content h3,
  .industry-card h3 {
    font-size:
      clamp(42px, 12vw, 60px) !important;
  }

  .final-title {
    font-size:
      clamp(52px, 15vw, 74px) !important;
  }

} /* =========================================================
   GOBOTAI V4 — TYPOGRAPHY CLEANUP
   Desktop + Tablet + Mobile
========================================================= */

/* Main oversized section headings */
.hero-title,
.solution-title,
.live-heading h2,
.capabilities-header h2,
.how-header h2,
.industries-top h2,
.always-copy h2,
.pricing-header h2,
.faq-heading h2,
.final-title {
  font-size: clamp(44px, 5vw, 64px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  text-wrap: balance;
}

/* Keep normal section copy comfortably readable */
.hero-sub,
.solution-copy,
.live-heading p,
.capabilities-header p,
.how-header p,
.industries-top p,
.always-copy p,
.pricing-header p,
.faq-heading p {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* Tablet */
@media (max-width: 900px) {
  .hero-title,
  .solution-title,
  .live-heading h2,
  .capabilities-header h2,
  .how-header h2,
  .industries-top h2,
  .always-copy h2,
  .pricing-header h2,
  .faq-heading h2,
  .final-title {
    font-size: clamp(38px, 7vw, 52px) !important;
    line-height: 1.04 !important;
  }
}

/* Mobile */
@media (max-width: 700px) {
  .hero-title,
  .solution-title,
  .live-heading h2,
  .capabilities-header h2,
  .how-header h2,
  .industries-top h2,
  .always-copy h2,
  .pricing-header h2,
  .faq-heading h2,
  .final-title {
    font-size: clamp(32px, 10vw, 40px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
  }
} /* =========================================================
   GOBOTAI V4 — MOBILE LAYOUT CLEANUP
========================================================= */

@media (max-width: 700px) {

  /* General mobile breathing room */
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Prevent sideways mess */
  html,
  body {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Main content blocks */
  .hero,
  .solution-section,
  .live-section,
  .capabilities,
  .how-section,
  .industries,
  .always-section,
  .pricing,
  .faq-section,
  .final-cta {
    min-height: auto !important;
    height: auto !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* Less extreme dark statement section */
  .missed-section {
    min-height: 420px !important;
    height: auto !important;
    padding: 70px 20px !important;
  }

  /* Keep text blocks readable */
  .hero-copy,
  .solution-copy,
  .live-heading,
  .capabilities-header,
  .how-header,
  .industries-top,
  .always-copy,
  .pricing-header,
  .faq-heading {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Cards stack naturally */
  .capabilities-grid,
  .industry-grid,
  .pricing-grid,
  .how-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Stop cards becoming giant */
  .capability,
  .industry-card,
  .pricing-card,
  .how-card {
    min-height: auto !important;
    height: auto !important;
  }

  /* Conversation / demo blocks */
  .conversation-layout,
  .live-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  .conversation-phone {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;

    width: 100% !important;
    max-width: 360px !important;

    margin: 0 auto !important;

    transform: none !important;
  }

  /* Decorative elements must not cover copy */
  .hero-orb,
  .signal-reservoir,
  .floating-orb,
  .decorative-circle {
    pointer-events: none !important;
    opacity: 0.35 !important;
  }

  /* Industries horizontal animation becomes cleaner */
  .industry-track {
    transform: none !important;
  }

  /* Final CTA */
  .final-action {
    width: 100% !important;
    max-width: 100% !important;
  }
} /* FORCE REMOVE MASCOT FROM MISSED SECTION */

.missed-stage::before,
.missed-stage::after,
.missed-sticky::before,
.missed-sticky::after,
.missed-story::before,
.missed-story::after {
  background-image: none !important;
  content: none !important;
  display: none !important;
} /* HERO SECONDARY CTA */
.hero-secondary-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  margin-left: 18px;

  color: #60416C;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.hero-secondary-link:hover {
  text-decoration: underline;
}

@media (max-width: 700px) {
  .hero-secondary-link {
    margin-left: 0;
    margin-top: 16px;
    font-size: 13px;
  }
} .pricing-note {
  max-width: 1200px;
  margin: 20px auto 0;
  padding: 0 24px;
  font-size: 14px;
  line-height: 1.6;
  color: #514B55;
}

.pricing-link-wrap {
  max-width: 1200px;
  margin: 10px auto 0;
  padding: 0 24px;
}

.pricing-link-wrap a {
  color: #60416C;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.pricing-link-wrap a:hover {
  text-decoration: underline;
} /* =========================================
   INDUSTRY MARQUEE — LIGHTER / SIMPLER
   Targets ONLY "One AI. Different conversations."
========================================= */

/* Desktop: keep horizontal layout, but calm it down */
.industry-marquee {
  overflow: hidden;
}

.industry-track {
  animation-duration: 28s !important;
  animation-timing-function: linear !important;
}

/* Mobile/tablet: remove forced sideways marquee */
@media (max-width: 768px) {

  .industry-marquee {
    overflow: visible !important;
  }

  .industry-track {
    animation: none !important;
    transform: none !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;

    width: 100% !important;
  }

  .industry-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    transform: none !important;
  }
} /* =========================================
   MOBILE = FULLY STATIC
   No animations, no transitions, no swipe effects
========================================= */

@media (max-width: 768px) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .industry-marquee,
  .industry-track,
  .industry-card,
  .hero-orb,
  .floating-orb,
  .signal-reservoir,
  .bot-signal-orb,
  .conversation-phone,
  .ticker-track,
  .marquee-track {
    animation: none !important;
    transform: none !important;
  }

  .industry-marquee {
    overflow: visible !important;
  }

  .industry-track {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .industry-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html {
    scroll-behavior: auto !important;
  }
}  .pricing-grid.two-plan-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 768px) {
  .pricing-grid.two-plan-grid {
    grid-template-columns: 1fr;
  }
} /* =========================================
   PRICING CARDS — COMPACT HEIGHT OVERRIDE
========================================= */

#pricing .pricing-grid {
  align-items: stretch !important;
}

#pricing .price-card {
  min-height: auto !important;
  height: auto !important;
  justify-content: flex-start !important;
}

#pricing .price-card h3 {
  margin-bottom: 10px !important;
}

#pricing .price {
  margin-bottom: 22px !important;
}

#pricing .price-card ul {
  margin-top: 0 !important;
  margin-bottom: 22px !important;
}

#pricing .price-card li {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

#pricing .price-card a {
  margin-top: auto !important;
}

#pricing .pricing-note {
  margin-top: 28px !important;
}

#pricing .pricing-link-wrap {
  margin-top: 10px !important;
}


/* MOBILE */
@media (max-width: 768px) {

  #pricing .price-card {
    min-height: auto !important;
    height: auto !important;
  }

  #pricing .price-card li {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

} /* =========================================
   MOBILE INDUSTRY SECTION — STATIC CLEAN GRID
========================================= */

@media (max-width: 768px) {

  .industry-marquee {
    overflow: visible !important;
  }

  .industry-track {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;

    width: 100% !important;
    transform: none !important;
    animation: none !important;
  }

  .industry-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .industry-track .industry-card:nth-child(n+4) {
    display: none !important;
  }

} /* =========================================
   GLOBAL MOBILE RESPONSIVE FIX
========================================= */

@media (max-width: 768px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  * {
    box-sizing: border-box !important;
  }

  img,
  video,
  svg,
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  section,
  header,
  footer,
  main,
  .container,
  .section-inner {
    max-width: 100% !important;
  }

  h1,
  h2,
  h3,
  p,
  span,
  a,
  li {
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  h1 {
    font-size: clamp(36px, 12vw, 56px) !important;
    line-height: 0.95 !important;
  }

  h2 {
    font-size: clamp(30px, 10vw, 44px) !important;
    line-height: 1 !important;
  }

  .hero,
  .industries,
  .pricing,
  .faq-section,
  .final-cta {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .pricing-grid,
  .feature-grid,
  .benefit-grid,
  .setup-grid {
    grid-template-columns: 1fr !important;
  }

  .price-card,
  .feature-card,
  .benefit-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .industry-track {
    width: 100% !important;
    max-width: 100% !important;
  }

  .industry-card {
    width: 100% !important;
    max-width: 100% !important;
  }

} /* =========================================
   HERO — MOBILE FIX
========================================= */

@media (max-width: 768px) {

  .hero {
    min-height: auto !important;

    padding:
      90px
      20px
      34px !important;

    justify-content: flex-start !important;

    overflow: hidden !important;
  }

  .hero::before {
    width: 280px !important;
    height: 280px !important;

    min-width: 0 !important;
    min-height: 0 !important;

    right: -120px !important;
    top: -90px !important;
  }

  .hero-topline {
    gap: 16px !important;

    font-size: 8px !important;
    line-height: 1.3 !important;

    padding-bottom: 12px !important;
  }

  .hero-title-wrap {
    padding: 40px 0 34px !important;
  }

  .hero-title {
    font-size: clamp(44px, 13vw, 64px) !important;

    line-height: 0.9 !important;

    letter-spacing: -0.065em !important;
  }

  .hero-line {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-line-one,
  .hero-line-two,
  .hero-line-three,
  .hero-line-four {
    margin-left: 0 !important;
  }

  .hero-line-two,
  .hero-line-four {
    color: var(--blue);
  }

  .hero-bottom {
    display: flex !important;
    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: flex-start !important;

    gap: 24px !important;
  }

  .hero-description {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;

    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .round-cta {
    width: 86px !important;
    height: 86px !important;

    align-self: flex-end !important;
  }

  .round-cta span {
    font-size: 9px !important;
  }

  .round-cta strong {
    font-size: 17px !important;
  }

}

/* =========================================================
   GOBOTAI — FINAL RESPONSIVE LAYOUT FIX
   Authoritative mobile/tablet layer.
   Desktop styling above remains unchanged.
========================================================= */

@media (max-width: 1000px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body,
  button,
  a {
    cursor: auto !important;
  }

  .custom-cursor {
    display: none !important;
  }

  .nav-center {
    display: none !important;
  }

  .navbar {
    grid-template-columns: 1fr auto !important;
  }

  .conversation-stage {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr) !important;
    gap: 32px !important;
  }

  .pricing-grid,
  .pricing-grid.two-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  :root {
    --page-pad: 20px;
    --radius: 20px;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  main,
  section,
  header,
  footer {
    width: 100%;
    max-width: 100%;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100%;
    height: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .industry-track,
  .industry-card,
  .hero-orb,
  .floating-orb,
  .signal-reservoir,
  .bot-signal-orb,
  .conversation-phone,
  .ticker-track,
  .marquee-track,
  .missed-word,
  .missed-call-card,
  .clock-stage,
  .clock-circle,
  .final-voice {
    transform: none !important;
  }

  /* HEADER */
  .site-header {
    padding: 12px 14px !important;
  }

  .navbar {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 7px 8px !important;
    border-radius: 22px !important;
  }

  .nav-center {
    display: none !important;
  }

  .navbar .logo {
    width: 118px !important;
    height: 38px !important;
    min-width: 0 !important;
  }

  .navbar .logo img {
    width: 118px !important;
    height: auto !important;
  }

  .nav-button {
    padding: 9px 11px !important;
    gap: 6px !important;
    font-size: 8px !important;
    white-space: nowrap !important;
  }

  /* HERO */
  .hero {
    min-height: auto !important;
    height: auto !important;
    padding: 88px 20px 44px !important;
    display: block !important;
    overflow: hidden !important;
  }

  .hero-topline {
    padding-bottom: 12px !important;
    gap: 12px !important;
    font-size: 7px !important;
  }

  .hero-title-wrap {
    padding: 34px 0 22px !important;
  }

  .hero-title {
    margin: 0 !important;
    font-size: clamp(42px, 12.5vw, 58px) !important;
    line-height: .92 !important;
    letter-spacing: -.055em !important;
  }

  .hero-line,
  .hero-line-one,
  .hero-line-two,
  .hero-line-three,
  .hero-line-four {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  .hero-object {
    position: relative !important;
    inset: auto !important;
    width: min(230px, 64vw) !important;
    height: min(230px, 64vw) !important;
    margin: 18px 0 12px auto !important;
  }

  .hero-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .hero-description {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  .round-cta {
    width: 84px !important;
    height: 84px !important;
    align-self: flex-end !important;
  }

  .hero-scroll {
    display: none !important;
  }

  .hero-secondary-link {
    margin: 14px 0 0 !important;
  }

  /* STATEMENT */
  .statement-section {
    min-height: auto !important;
    height: auto !important;
    padding: 72px 20px 84px !important;
  }

  .statement-small {
    position: static !important;
    margin-bottom: 34px !important;
  }

  .statement-line {
    font-size: clamp(42px, 12vw, 58px) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
  }

  .statement-offset {
    padding-left: 0 !important;
  }

  .statement-foot {
    position: static !important;
    max-width: 100% !important;
    margin-top: 36px !important;
  }

  /* MISSED */
  .missed-story {
    height: auto !important;
    min-height: 0 !important;
  }

  .missed-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 620px !important;
    padding: 70px 20px !important;
  }

  .missed-stage {
    height: auto !important;
    min-height: 480px !important;
  }

  .missed-word {
    left: 0 !important;
    top: 22% !important;
    font-size: clamp(74px, 23vw, 110px) !important;
    white-space: normal !important;
  }

  .missed-call-card {
    width: min(100%, 300px) !important;
    margin: 145px auto 0 !important;
  }

  .missed-result {
    position: static !important;
    margin-top: 24px !important;
    justify-content: center !important;
  }

  /* SOLUTION */
  .solution-section {
    min-height: auto !important;
    height: auto !important;
    display: block !important;
    padding: 72px 20px !important;
    overflow: hidden !important;
  }

  .solution-index {
    margin-bottom: 32px !important;
  }

  .solution-title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(42px, 12vw, 58px) !important;
    line-height: .94 !important;
  }

  .solution-title span {
    margin-left: 0 !important;
  }

  .signal-reservoir {
    position: relative !important;
    inset: auto !important;
    width: min(100%, 340px) !important;
    margin: 42px auto 0 !important;
  }

  .solution-bottom {
    display: block !important;
    margin-top: 30px !important;
  }

  .solution-bottom p {
    width: 100% !important;
    max-width: 100% !important;
  }

  .solution-stamp {
    position: static !important;
    display: inline-block !important;
    margin-top: 24px !important;
    font-size: 62px !important;
  }

  /* LIVE EXPERIENCE */
  .live-experience {
    padding: 72px 20px !important;
  }

  .live-heading {
    display: block !important;
    padding-bottom: 24px !important;
  }

  .live-heading > div {
    margin-bottom: 22px !important;
  }

  .live-heading h2 {
    font-size: clamp(40px, 11vw, 54px) !important;
    line-height: .96 !important;
  }

  .conversation-stage {
    display: block !important;
  }

  .conversation-steps {
    width: 100% !important;
  }

  .conversation-step {
    min-height: 0 !important;
    height: auto !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    padding: 32px 0 !important;
  }

  .conversation-step h3 {
    font-size: clamp(34px, 10vw, 46px) !important;
    line-height: 1 !important;
  }

  .conversation-step p {
    grid-column: 2 !important;
    max-width: 100% !important;
  }

  .conversation-phone-wrap {
    min-height: 0 !important;
    height: auto !important;
    margin-top: 28px !important;
  }

  .conversation-phone {
    position: relative !important;
    top: auto !important;
    width: min(100%, 380px) !important;
    max-height: none !important;
    margin: 0 auto !important;
  }

  /* CAPABILITIES */
  .capabilities {
    padding: 72px 20px !important;
  }

  .capabilities-header {
    display: block !important;
    margin-bottom: 32px !important;
  }

  .capabilities-header > span {
    display: block !important;
    margin-bottom: 20px !important;
  }

  .capabilities-header h2 {
    font-size: clamp(40px, 11vw, 54px) !important;
    line-height: .96 !important;
  }

  .capability-list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .capability {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 430px !important;
    padding: 22px !important;
  }

  .capability h3 {
    margin-top: 46px !important;
    font-size: clamp(36px, 10vw, 48px) !important;
  }

  /* TICKER */
  .ticker-section {
    padding: 24px 0 !important;
    overflow: hidden !important;
  }

  .ticker-track {
    width: 100% !important;
    display: block !important;
    white-space: normal !important;
    padding: 0 20px !important;
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.05 !important;
  }

  /* HOW IT WORKS */
  .how-section {
    padding: 72px 20px !important;
  }

  .how-header {
    display: block !important;
    margin-bottom: 32px !important;
  }

  .how-header > span {
    display: block !important;
    margin-bottom: 20px !important;
  }

  .how-header h2 {
    font-size: clamp(40px, 11vw, 54px) !important;
    line-height: .96 !important;
  }

  .how-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: block !important;
    padding: 24px !important;
    margin-bottom: 16px !important;
  }

  .how-number {
    display: block !important;
    margin-bottom: 40px !important;
  }

  .how-content h3 {
    font-size: clamp(36px, 10vw, 48px) !important;
  }

  .how-art {
    grid-column: auto !important;
    margin-top: 40px !important;
  }

  /* INDUSTRIES */
  .industries {
    min-height: 0 !important;
    height: auto !important;
    padding: 72px 20px !important;
    overflow: visible !important;
  }

  .industries-top {
    padding: 0 0 32px !important;
  }

  .industries-top h2 {
    font-size: clamp(40px, 11vw, 54px) !important;
    line-height: .96 !important;
  }

  .industry-marquee {
    width: 100% !important;
    overflow: visible !important;
  }

  .industry-track {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 !important;
  }

  .industry-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 320px !important;
    padding: 22px !important;
  }

  .industry-card h3 {
    font-size: clamp(34px, 10vw, 46px) !important;
  }

  /* ALWAYS ON */
  .always-section {
    min-height: 0 !important;
    height: auto !important;
    padding: 72px 20px 0 !important;
    overflow: hidden !important;
  }

  .always-copy h2 {
    font-size: clamp(40px, 11vw, 54px) !important;
    line-height: .96 !important;
  }

  .clock-stage {
    position: relative !important;
    inset: auto !important;
    margin-top: 36px !important;
  }

  .clock-circle {
    width: min(115vw, 480px) !important;
    margin-left: 8% !important;
  }

  .clock-number {
    font-size: clamp(108px, 38vw, 168px) !important;
  }

  .always-footer {
    display: none !important;
  }

  /* PRICING */
  .pricing {
    padding: 72px 20px !important;
  }

  .pricing-header {
    margin-bottom: 32px !important;
  }

  .pricing-header h2 {
    font-size: clamp(40px, 11vw, 54px) !important;
    line-height: .96 !important;
  }

  .pricing-grid,
  .pricing-grid.two-plan-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .price-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 22px !important;
  }

  .price-card h3 {
    margin-top: 40px !important;
    font-size: 42px !important;
  }

  .pricing-note,
  .pricing-link-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* FAQ */
  .faq-section {
    padding: 72px 20px !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .faq-heading h2 {
    font-size: clamp(40px, 11vw, 54px) !important;
    line-height: .96 !important;
  }

  .faq-list {
    padding-top: 0 !important;
  }

  .faq-answer p {
    max-width: 100% !important;
  }

  /* FINAL CTA */
  .final-cta {
    min-height: 0 !important;
    height: auto !important;
    padding: 72px 20px 52px !important;
  }

  .final-title {
    margin-top: 32px !important;
    font-size: clamp(42px, 12vw, 58px) !important;
    line-height: .94 !important;
  }

  .final-title span {
    margin-left: 0 !important;
  }

  .final-action {
    margin-top: 38px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 22px !important;
  }

  .final-action p {
    max-width: 100% !important;
  }

.final-voice {
    position: static !important;
    margin-top: 30px !important;
  }

  /* FOOTER */
  .footer {
    padding: 60px 20px 24px !important;
  }

  .footer-logo {
    font-size: clamp(66px, 23vw, 102px) !important;
  }

  .footer-links {
    width: 100% !important;
    margin: 52px 0 40px !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 26px 20px !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

@media (max-width: 390px) {
  :root {
    --page-pad: 16px;
  }

  .site-header {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .navbar .logo,
  .navbar .logo img {
    width: 105px !important;
  }

  .nav-button {
    padding: 8px 9px !important;
    font-size: 7px !important;
  }

  .hero,
  .statement-section,
  .solution-section,
  .live-experience,
  .capabilities,
  .how-section,
  .industries,
  .pricing,
  .faq-section,
  .final-cta {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero-title,
  .statement-line,
  .solution-title,
  .final-title {
    font-size: clamp(39px, 12vw, 50px) !important;
  }

  .live-heading h2,
  .capabilities-header h2,
  .how-header h2,
  .industries-top h2,
  .always-copy h2,
  .pricing-header h2,
  .faq-heading h2 {
    font-size: clamp(37px, 11vw, 48px) !important;
  }
}
/* =========================================
   MISSED CALL — FINAL DESKTOP FIX
========================================= */

@media (min-width: 769px) {

  .missed-story {
    height: 130vh !important;
    min-height: 0 !important;

    background: #111011 !important;

    overflow: hidden !important;
  }


  .missed-sticky {
    position: sticky !important;

    top: 0 !important;

    width: 100% !important;
    height: 100vh !important;

    padding:
      110px
      5vw
      60px !important;

    overflow: hidden !important;
  }


  .missed-stage {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;
  }


  /* MISSED heading */

  .missed-word {
    position: absolute !important;

    left: 1vw !important;
    top: 31% !important;

    width: auto !important;

    font-size:
      clamp(110px, 13vw, 220px) !important;

    line-height: .82 !important;

    letter-spacing:
      -0.075em !important;

    white-space: nowrap !important;

    color: #9b73a2 !important;

    z-index: 1 !important;
  }


  /* Incoming call card */

  .missed-call-card {
    position: absolute !important;

    left: 58% !important;
    top: 13% !important;

    width:
      clamp(300px, 24vw, 390px) !important;

    height:
      clamp(410px, 55vh, 520px) !important;

    min-height: 0 !important;

    padding:
      32px !important;

    border-radius:
      34px !important;

    z-index: 4 !important;

    background:
      linear-gradient(
        145deg,
        #f6f2f6,
        #e7dee9
      ) !important;

    box-shadow:
      0 30px 80px
      rgba(0,0,0,.24) !important;
  }


  .missed-call-card h3 {
    font-size:
      clamp(38px, 3vw, 60px) !important;

    line-height:
      .92 !important;

    letter-spacing:
      -.055em !important;
  }


  .missed-call-card small {
    font-size:
      11px !important;
  }


  .missed-icon {
    width: 64px !important;
    height: 64px !important;
  }


  /* Bottom result */

  .missed-result {
    position: absolute !important;

    right: 4vw !important;
    bottom: 9vh !important;

    z-index: 5 !important;

    font-size:
      13px !important;
  }

} /* =========================================
   MISSED SECTION — FINAL CLEAN FIX
========================================= */

@media (min-width: 769px) {

  .missed-call-card {
    transform: none !important;
    rotate: 0deg !important;

    left: 56% !important;
    top: 14% !important;

    width: clamp(300px, 23vw, 380px) !important;
    height: clamp(400px, 52vh, 500px) !important;

    border-radius: 32px !important;
  }

  .missed-word {
    left: 2vw !important;
    top: 43% !important;

    transform: translateY(-50%) !important;

    font-size: clamp(110px, 15vw, 240px) !important;
    line-height: .8 !important;

    z-index: 1 !important;
  }

  .missed-result {
    right: 4vw !important;
    bottom: 12vh !important;
  }

} /* =========================================
   MISSED SECTION — SPACING + HEIGHT FIX
========================================= */

@media (min-width: 769px) {

  .missed-story {
    height: 100vh !important;
    min-height: 100vh !important;
  }

  .missed-sticky {
    height: 100vh !important;
    min-height: 100vh !important;

    padding:
      95px
      5vw
      45px !important;
  }

  .missed-stage {
    height: calc(100vh - 140px) !important;
    min-height: 0 !important;
  }

  .missed-word {
    left: 2vw !important;
    top: 42% !important;

    font-size:
      clamp(105px, 12.5vw, 205px) !important;

    transform:
      translateY(-50%) !important;
  }

  .missed-call-card {
    left: 61% !important;
    top: 11% !important;

    width:
      clamp(290px, 22vw, 360px) !important;

    height:
      clamp(380px, 49vh, 470px) !important;

    transform: none !important;
  }

  .missed-result {
    right: 5vw !important;
    bottom: 8vh !important;
  }

} /* =========================================
   NAV AUTH ACTIONS
========================================= */

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-signin,
.nav-signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: 0.25s ease;
}

.nav-signin {
  padding: 14px 18px;
  color: var(--black);
}

.nav-signin:hover {
  opacity: 0.6;
}

.nav-signup {
  gap: 10px;
  padding: 16px 22px;
  border: 1px solid var(--black);
  border-radius: 999px;
  color: var(--black);
  background: transparent;
}

.nav-signup:hover {
  background: var(--black);
  color: var(--white);
}


/* =========================================
   MOBILE NAV AUTH ACTIONS
========================================= */

@media (max-width: 768px) {

  .nav-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 22px;
  }

  .nav-signin {
    width: 100%;
    padding: 14px 18px;
    text-align: center;
  }

  .nav-signup {
    width: 100%;
    min-height: 54px;
    border-radius: 12px;
    padding: 16px 20px;
  }
} /* =========================================
   SIGN IN + START FREE BUTTONS
========================================= */

.nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 10px;

  color: #111;
  text-decoration: none;

  font-size: 15px;
  font-weight: 700;
}

.nav-signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 150px;
  min-height: 54px;

  padding: 14px 28px;

  border-radius: 999px;

  background: #6f4b7c;
  color: #fff;

  text-decoration: none;

  font-size: 15px;
  font-weight: 800;

  transition: 0.25s ease;
}

.nav-signup:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}


/* =========================================
   MOBILE VERSION
========================================= */

@media (max-width: 768px) {

  .nav-actions {
    width: 100%;

    flex-direction: column;
    align-items: center;

    gap: 18px;

    margin-top: 28px;
  }

  .nav-signin {
    width: 100%;

    padding: 12px 0;

    text-align: center;

    font-size: 18px;
  }

  .nav-signup {
    width: 100%;

    min-width: 0;
    min-height: 58px;

    border-radius: 10px;

    font-size: 18px;
  }
} /* =========================================
   FINAL MOBILE HEADER FIX
========================================= */

@media (max-width: 700px) {

  .site-header {
    position: relative !important;
    top: auto !important;
    padding: 12px 14px !important;
  }

  .navbar {
    width: 100% !important;
    min-height: auto !important;

    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;

    gap: 14px !important;

    padding: 14px !important;
  }

  .logo {
    grid-column: 1 !important;
    grid-row: 1 !important;

    display: flex !important;
    align-items: center !important;
  }

  .logo img {
    width: 125px !important;
    height: auto !important;
  }

  /* Hide desktop navigation links on mobile */
  .nav-center {
    display: none !important;
  }

  .nav-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: auto !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 10px !important;
    margin: 0 !important;
  }

  .nav-signin {
    width: auto !important;

    padding: 10px 8px !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    white-space: nowrap !important;
  }

  .nav-signup {
    width: auto !important;
    min-width: 0 !important;
    min-height: 42px !important;

    padding: 10px 15px !important;

    border-radius: 999px !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    white-space: nowrap !important;
  }

  .hero {
    padding-top: 85px !important;
  }
} /* =========================================
   FINAL DESKTOP NAV ACTIONS — SAFE ALIGNMENT
========================================= */

@media (min-width: 701px) {

  .nav-actions {
    margin-left: auto;
    margin-right: 18px;
    gap: 14px;
    transform: none !important;
  }

  .nav-signin {
    padding: 8px 6px;
    font-size: 14px;
    font-weight: 800;
  }

  .nav-signup {
    min-width: 122px;
    min-height: 42px;

    padding: 9px 18px;

    border-radius: 999px;

    font-size: 14px;
    font-weight: 800;
  }
}