/* ==========================================================================
   Talkiyo - main stylesheet
   Visual language measured from talkiyo.in.

   Every value in the token block below was measured from the rendered
   talkiyo.in page (computed styles at 1440px) unless the comment says it was
   adjusted. Adjustments exist only where the reference colour pairing fails
   WCAG AA contrast - the look is kept, the value is nudged.

   Layout breakpoints live in css/responsive.css.
   ========================================================================== */

:root {
  /* --- brand palette (talkiyo.in) --------------------------------------- */
  --primary: #813dd6;            /* eyebrow, FAQ active panel, hero gradient */
  --primary-dark: #5813af;       /* eyebrow on the pink "process" band */
  --secondary: #9d51fe;          /* footer gradient end */
  --accent: #fdaa04;             /* header CTA pill */
  --accent-hover: #ffb934;
  --on-accent: #2a0b52;          /* adjusted: white on #fdaa04 is 1.9:1, this ink is 9:1 */
  --pink: #fe91e2;               /* process band start */
  --peach: #ffc46c;              /* process band end */
  --icon-from: #0259fe;          /* feature icon circle */
  --icon-to: #8ae8da;
  --lavender: #f0f1ff;           /* step blobs, icon badges */

  /* --- surfaces & ink ---------------------------------------------------- */
  --background: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f8f6fd;
  --text-heading: #1c1c1c;       /* reference h2: #000 / #252525 */
  --text-primary: #252525;
  --text-secondary: #6e6e6e;     /* reference body copy */
  --text-on-band: #33303a;       /* adjusted: grey body copy fails on the pink band */
  --border: #ebe8f2;

  /* --- shape ------------------------------------------------------------- */
  --radius-sm: 10px;             /* FAQ panel */
  --radius-md: 15px;             /* testimonial-style cards */
  --radius-lg: 30px;             /* CTA panel */
  --radius-pill: 50px;           /* every button */

  /* --- layout ------------------------------------------------------------ */
  --container-width: 1140px;     /* reference content starts at x=150 on 1440 */
  --gutter: 24px;
  --header-h: 100px;             /* over the hero */
  --header-h-scrolled: 80px;     /* once scrolled */
  --section-space: 100px;        /* reference: section-padding 100px 0 */
  --head-gap: 70px;              /* section head -> content */

  /* --- elevation (reference box-shadows) --------------------------------- */
  --shadow-card: 0 16px 32px rgba(199, 199, 199, 0.3);
  --shadow-card-strong: 0 16px 32px rgba(221, 221, 221, 0.82);
  --shadow-card-hover: 0 24px 48px rgba(129, 61, 214, 0.16);
  --shadow-btn: 0 16px 32px rgba(0, 0, 0, 0.1);
  --shadow-header: 0 10px 30px rgba(0, 0, 0, 0.06);

  /* --- gradients --------------------------------------------------------- */
  /* reference stop is 46%; 58% keeps the hero's lower-left small print on purple */
  --grad-hero: radial-gradient(at 0% 0%, #813dd6 58%, #fdaa04 100%);
  --grad-hero-stacked: radial-gradient(120% 55% at 100% 100%, rgba(253, 170, 4, 0.95) 0%, rgba(253, 170, 4, 0) 72%), #813dd6;
  --grad-process: linear-gradient(135deg, #fe91e2, #ffc46c);
  --grad-soft: linear-gradient(135deg, #f4f4f6, #e1f7f4);
  --grad-icon: linear-gradient(135deg, #0259fe, #8ae8da);
  --grad-badge: linear-gradient(135deg, #813dd6, #fdaa04);
  /* adjusted: the reference lilac band (#7b5bd1 -> #c68bf6) is 2.5:1 behind white text */
  --grad-stats: linear-gradient(115deg, #5813af 0%, #7a36cf 55%, #8a3fd8 100%);
  /* adjusted: the reference #fdaa04 -> #9d51fe footer puts white text at 1.9:1 */
  --grad-footer: linear-gradient(90deg, #a84a06 0%, #8f3a93 50%, #7f35d0 100%);

  /* --- type -------------------------------------------------------------- */
  /* Reference headings use Gilroy (commercial); Outfit is the closest free match. */
  --font-heading: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(2.125rem, 1.35rem + 3.1vw, 3.75rem);   /* 34 -> 60 */
  --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);              /* 28 -> 48 */
  --fs-h3: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);           /* 20 -> 24 */
  --fs-h4: 1.25rem;                                            /* 20 */
  --fs-body: 1rem;                                             /* 16 */
  --fs-small: 0.875rem;                                        /* 14 */
  --fs-label: 1rem;                                            /* eyebrow 16 */
  --fs-button: 0.875rem;                                       /* 14 */
  --lh-body: 1.7;                                              /* reference 27.2 / 16 */

  /* --- motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.3s;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-scrolled) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0.3px;
  color: var(--text-secondary);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
address {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  color: var(--text-heading);
  letter-spacing: 0.3px;
  text-wrap: balance;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

img {
  height: auto;
}

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

address {
  font-style: normal;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

strong {
  font-weight: 500;
  color: var(--text-primary);
}

:focus-visible {
  outline: 3px solid var(--primary-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--primary-dark);
  font-weight: 500;
  box-shadow: var(--shadow-btn);
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus {
  transform: none;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--container-width));
  margin-inline: auto;
}

/* ==========================================================================
   Typography primitives
   ========================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-family: var(--font-heading);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--primary);
}

.eyebrow--light {
  color: #fff;
  letter-spacing: 2px;
}

.eyebrow--deep {
  color: var(--primary-dark);
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.2;
}

.section-title em {
  font-style: normal;
  color: var(--primary);
}

.section-title--light {
  color: #fff;
}

.section-text {
  margin-top: 22px;
  max-width: 640px;
}

.section-head {
  margin-bottom: var(--head-gap);
}

.section-head--center {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.section-head--center .section-text {
  margin-inline: auto;
}

.section-head--left {
  max-width: 600px;
}

.text-link {
  font-weight: 500;
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: rgba(129, 61, 214, 0.35);
  text-underline-offset: 3px;
  transition: color var(--dur), text-decoration-color var(--dur);
}

.text-link:hover {
  color: var(--primary-dark);
  text-decoration-color: currentColor;
}

.text-link--light {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

.text-link--light:hover {
  color: #fff;
  text-decoration-color: #fff;
}

/* ==========================================================================
   Buttons (reference: 50px pill, 15px 40px padding, 3px tracked caps)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 55px;
  padding: 15px 36px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur),
    border-color var(--dur),
    color var(--dur);
}

.btn:hover {
  transform: translateY(-3px);
}

.btn:active {
  transform: translateY(-1px);
}

.btn .btn__arrow {
  width: 17px;
  height: 17px;
  stroke-width: 2.2;
  transition: transform var(--dur) var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

.btn--accent {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-btn);
}

.btn--accent:hover {
  background: var(--accent-hover);
  box-shadow: 0 20px 36px rgba(253, 170, 4, 0.35);
}

.btn--primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 16px 32px rgba(129, 61, 214, 0.25);
}

.btn--primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 20px 38px rgba(88, 19, 175, 0.32);
}

.btn--outline-light {
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

.btn--outline-light:hover {
  background: #fff;
  border-color: #fff;
  color: var(--primary-dark);
}

.btn--light {
  background: #fff;
  color: var(--primary-dark);
  box-shadow: var(--shadow-btn);
}

.btn--light:hover {
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.18);
}

.btn--block {
  width: 100%;
}

/* store badges */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.store {
  display: block;
  border-radius: 9px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.store img {
  width: auto;
  height: 48px;
}

.store:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   Header
   ========================================================================== */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  transition:
    height var(--dur) var(--ease),
    background-color var(--dur),
    box-shadow var(--dur),
    border-color var(--dur);
}

.header.is-scrolled,
.header.is-open {
  height: var(--header-h-scrolled);
  background: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-header);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}

/* Talkiyo's wordmark: the file is purple; over the hero it is rendered white,
   as on talkiyo.in, and returns to purple on the white header */
.brand__logo {
  width: auto;
  height: 46px;
  filter: brightness(0) invert(1);
  transition: filter var(--dur), height var(--dur) var(--ease);
}

.is-scrolled .brand__logo,
.is-open .brand__logo {
  height: 40px;
  filter: none;
}

.nav {
  margin-left: auto;
}

.nav__list {
  display: flex;
  align-items: center;
}

.nav__link {
  position: relative;
  display: block;
  padding: 10px 15px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 1px;
  color: #fff;
  transition: color var(--dur);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
}

.is-scrolled .nav__link {
  color: var(--text-primary);
}

.is-scrolled .nav__link:hover,
.is-scrolled .nav__link.is-active {
  color: var(--primary);
}

/* reference header CTA: 16px / 500 / 1px caps, 15px 50px, 45px tall */
.btn--header {
  min-height: 48px;
  margin-left: 18px;
  padding: 12px 34px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 1px;
}

.burger {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  margin-left: auto;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  background: transparent;
  color: #fff;
  transition: border-color var(--dur), color var(--dur), background-color var(--dur);
}

.is-scrolled .burger,
.is-open .burger {
  border-color: var(--border);
  color: var(--text-primary);
}

.burger__bar {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur), top var(--dur) var(--ease);
}

.burger__bar:nth-child(1) { top: 15px; }
.burger__bar:nth-child(2) { top: 21px; }
.burger__bar:nth-child(3) { top: 27px; }

.is-open .burger__bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
.is-open .burger__bar:nth-child(2) { opacity: 0; }
.is-open .burger__bar:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.mobile-menu {
  display: none;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  z-index: 2;
  /* x only: the tilted phones are clipped, the facts bar still overhangs below */
  overflow-x: clip;
  padding-top: calc(var(--header-h) + 80px);
  background: var(--grad-hero);
  color: #fff;
}

.hero__decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__ring {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
}

.hero__ring--1 {
  width: 760px;
  height: 760px;
  right: -200px;
  top: 110px;
}

.hero__ring--2 {
  width: 520px;
  height: 520px;
  right: -80px;
  top: 230px;
  border-color: rgba(255, 255, 255, 0.1);
}

.hero__dots {
  position: absolute;
  /* ends 30px before the content column, so it never sits under the copy
     (30px from the window edge at 1440, slides off-screen on narrower ones) */
  left: calc((100% - var(--container-width)) / 2 - 118px);
  bottom: 170px;
  width: 88px;
  height: 132px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 1.6px, transparent 2px) 0 0 / 22px 22px;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: 40px;
}

.hero__copy .eyebrow {
  margin-bottom: 26px;
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

.hero__title em {
  font-style: normal;
  color: var(--peach);
}

.hero__text {
  max-width: 560px;
  margin-top: 26px;
  color: rgba(255, 255, 255, 0.94);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 38px;
}

.hero__stores {
  margin-top: 30px;
}

.hero__note {
  margin-top: 18px;
  font-size: var(--fs-small);
  color: #fff;
}

.hero__visual {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 620px;
}

.hero__glow {
  position: absolute;
  inset: 12% 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  filter: blur(10px);
}

.hero__device {
  position: relative;
  padding: 10px 0 30px;
}

/* two app screens, tilted and overlapping, gently floating */
.hero__img {
  position: relative;
  z-index: 1;
  width: 50%;
  max-width: 290px;
  margin-left: 14%;
  rotate: -6deg;
  filter: drop-shadow(0 40px 50px rgba(42, 11, 82, 0.4));
  animation: float 7s ease-in-out infinite;
}

.hero__phone-back {
  position: absolute;
  top: 12%;
  right: 6%;
  width: 42%;
  max-width: 245px;
  rotate: 9deg;
  opacity: 0.95;
  filter: drop-shadow(0 30px 40px rgba(42, 11, 82, 0.3));
  animation: float 8s ease-in-out -3s infinite;
}

/* floating status chips, above both phones */
.chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(42, 11, 82, 0.22);
  line-height: 1.3;
  animation: float 6s ease-in-out infinite;
}

.chip__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-heading);
}

.chip__sub {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.chip--online {
  top: 16%;
  left: -4%;
  animation-delay: -1.5s;
}

.chip--call {
  top: 48%;
  right: -2%;
  animation-delay: -3s;
}

.chip--safe {
  bottom: 10%;
  left: 2%;
  animation-delay: -4.5s;
}

.chip__live {
  position: relative;
  width: 12px;
  height: 12px;
  margin: 0 4px;
  border-radius: 50%;
  background: #16a34a;
}

.chip__live::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid #16a34a;
  opacity: 0;
  animation: pulse 2s ease-out infinite;
}

.chip__wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  padding: 0 4px;
}

.chip__wave span {
  width: 3px;
  height: 100%;
  border-radius: 3px;
  background: var(--primary);
  animation: wave 1.2s ease-in-out infinite;
}

.chip__wave span:nth-child(2) { animation-delay: -1s; }
.chip__wave span:nth-child(3) { animation-delay: -0.8s; }
.chip__wave span:nth-child(4) { animation-delay: -0.6s; }
.chip__wave span:nth-child(5) { animation-delay: -0.4s; }

.chip__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad-badge);
  color: #fff;
}

.chip__icon .icon {
  width: 19px;
  height: 19px;
}

/* facts bar: white card straddling the hero / about boundary */
.hero__facts {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 70px;
  margin-bottom: -56px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-card-strong);
}

.hero__facts li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 18px;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-heading);
}

.hero__facts li + li {
  border-left: 1px solid var(--border);
}

.hero__fact-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--grad-icon);
  color: #fff;
}

.hero__fact-icon .icon {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   Sections - shared
   ========================================================================== */

.section {
  position: relative;
  /* decoration may bleed sideways; clip (unlike hidden) keeps sticky working */
  overflow-x: clip;
  padding-block: var(--section-space);
}

/* soft reference dot grid */
.dot-grid {
  position: absolute;
  pointer-events: none;
  background: radial-gradient(circle, rgba(37, 37, 37, 0.55) 2px, transparent 2.5px) 0 0 / 25px 25px;
}

/* circle icon - reference feature icon: 80px, blue -> aqua */
.icon-circle {
  display: grid;
  place-items: center;
  flex: none;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--grad-icon);
  color: #fff;
  box-shadow: 0 12px 24px rgba(2, 89, 254, 0.2);
  transition: transform 0.5s var(--ease);
}

.icon-circle .icon {
  width: 32px;
  height: 32px;
}

/* square-ish lavender badge - reference process icon treatment */
.icon-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50% 16px 50% 50%;
  background: var(--lavender);
  color: var(--primary);
}

.icon-badge .icon {
  width: 26px;
  height: 26px;
}

/* ==========================================================================
   About
   ========================================================================== */

.about {
  padding-top: calc(var(--section-space) + 56px);
}

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 70px;
}

.about .section-head {
  margin-bottom: 32px;
}

.about__prose p + p {
  margin-top: 18px;
}

.about__cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.dot-grid--about {
  right: -40px;
  bottom: -40px;
  width: 200px;
  height: 200px;
}

.info-card {
  position: relative;
  padding: 34px 28px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card-strong);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.info-card:nth-child(odd) {
  /* offset alternate cards like the reference staggered screenshots */
  transform: translateY(30px);
}

.info-card:hover {
  box-shadow: var(--shadow-card-hover);
}

.info-card__title {
  margin: 22px 0 10px;
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
}

.info-card p {
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* ==========================================================================
   How it works (reference "process" band)
   ========================================================================== */

.process {
  overflow: hidden;
  background: var(--grad-process);
  color: var(--text-on-band);
}

.process .section-text {
  color: var(--text-on-band);
}

.process .section-title em {
  color: var(--primary-dark);
}

.process__zigzag {
  position: absolute;
  inset: 38% 0 0;
  pointer-events: none;
  opacity: 0.55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='390' height='306' viewBox='0 0 390 306'%3E%3Cpath d='M0 150 L90 60 L180 150 L270 60 L390 180' fill='none' stroke='%23ffffff' stroke-opacity='.35' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 390px 306px repeat;
}

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px 30px;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.step::after {
  /* reference: short white rule under each step, aligned along the row */
  content: "";
  width: 50px;
  height: 2px;
  margin-top: auto;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
}

.step__media {
  position: relative;
  margin-bottom: 30px;
}

.step__blob {
  display: grid;
  place-items: center;
  width: 100px;
  height: 90px;
  border-radius: 50% 12px 50% 50% / 55% 12px 50% 50%;
  background: var(--lavender);
  color: var(--primary);
  box-shadow: 0 14px 30px rgba(129, 61, 214, 0.14);
  transition: transform 0.5s var(--ease);
}

.step__blob .icon {
  width: 38px;
  height: 38px;
  stroke-width: 1.7;
}

.step:hover .step__blob {
  transform: translateY(-6px) rotate(-4deg);
}

.step__num {
  position: absolute;
  top: -16px;
  left: -18px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 10px 22px rgba(253, 170, 4, 0.45);
}

.step__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.3;
}

.step__text {
  max-width: 330px;
  margin-top: 14px;
  margin-bottom: 26px;
  color: var(--text-on-band);
}

.step--highlight .step__blob {
  background: #fff;
  box-shadow: 0 18px 36px rgba(88, 19, 175, 0.25);
}

.step__spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 80px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.step__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -8px 0 26px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--primary-dark);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(88, 19, 175, 0.18);
  transition: transform var(--dur) var(--ease), background-color var(--dur), color var(--dur);
}

.step__tag .icon {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}

.step__tag:hover {
  transform: translateY(-2px);
  background: var(--primary-dark);
  color: #fff;
}

/* ==========================================================================
   Features - reference "Powerful Set Of Products": heading left, thin arrows
   right, a row of cards that runs off the right edge of the page
   ========================================================================== */

.features__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 60px;
}

.features__head .section-head {
  max-width: 640px;
  margin-bottom: 0;
}

.features__arrows {
  display: flex;
  gap: 16px;
  flex: none;
  margin-top: 52px;
}

.features__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--primary-dark);
  transition: color var(--dur), background-color var(--dur), opacity var(--dur);
}

.features__arrow .icon {
  width: 28px;
  height: 28px;
  stroke-width: 1.6;
}

.features__arrow:hover:not(:disabled) {
  background: var(--lavender);
  color: var(--primary);
}

.features__arrow:disabled {
  cursor: default;
  opacity: 0.35;
}

/* the viewport extends to the window's right edge; cards snap to the grid */
.features__viewport {
  margin-right: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30px);
  mask-image: linear-gradient(90deg, transparent 0, #000 30px);
}

.features__track {
  --slide: calc((min(100vw - 2 * var(--gutter), var(--container-width)) - 3 * 30px) / 4);
  --slide-gap: 30px;
  padding-right: 30px;
}

/* beats the generic .carousel__track sizing used by the support slider */
.carousel__track.features__track {
  grid-auto-columns: var(--slide);
  gap: var(--slide-gap);
}

/* reference single-features card: centred, soft grey shadow */
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 24px 40px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-align: center;
  scroll-snap-align: start;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.feature-card::after {
  /* reference: short lavender rule at the foot of each card */
  content: "";
  width: 50px;
  height: 3px;
  margin-top: auto;
  border-radius: 3px;
  background: #e2dcf6;
  transition: width 0.4s var(--ease), background-color 0.4s;
}

.feature-card > p {
  margin-bottom: 24px;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card-hover);
}

.feature-card:hover::after {
  width: 80px;
  background: var(--primary);
}

.feature-card:hover .icon-circle {
  transform: rotateY(180deg);
}

.feature-card:hover .icon-circle .icon {
  transform: rotateY(180deg);
}

.feature-card__title {
  margin: 28px 0 12px;
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
  color: var(--primary);
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -8px 0 24px;
  font-weight: 500;
  color: var(--primary-dark);
  text-decoration: underline;
  text-decoration-color: rgba(88, 19, 175, 0.3);
  text-underline-offset: 3px;
  transition: color var(--dur), gap var(--dur) var(--ease);
}

.card-link .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

.card-link:hover {
  gap: 12px;
  text-decoration-color: currentColor;
}

/* ==========================================================================
   Connect with a listener anytime - centered heading + text, four large
   counters beneath, split by thin dividers
   ========================================================================== */

.stats {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-space);
  background: var(--grad-stats);
  color: #fff;
}

.stats__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 1.2px, transparent 1.6px) 0 0 / 20px 20px;
  /* texture stays in the side margins outside the content column, never behind text */
  --dots-edge: max(0px, (100% - var(--container-width)) / 2 - 10px);
  -webkit-mask-image: linear-gradient(90deg, #000 0, transparent var(--dots-edge), transparent calc(100% - var(--dots-edge)), #000 100%);
  mask-image: linear-gradient(90deg, #000 0, transparent var(--dots-edge), transparent calc(100% - var(--dots-edge)), #000 100%);
}

.stats__head {
  position: relative;
  max-width: 860px;
  margin-bottom: 70px;
}

.stats__head .section-title {
  max-width: 700px;
  margin-inline: auto;
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem);
  font-weight: 600;
  line-height: 1.15;
}

.stats__text {
  max-width: 820px;
  margin-top: 28px;
  font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.5rem);
  line-height: 1.6;
  color: #fff;
}

.stats__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat + .stat {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.stat__value {
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 1.8rem + 2.4vw, 4rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1px;
  color: #fff;
}

.stat__label {
  max-width: 250px;
  margin-top: 14px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
  color: #fff;
}

/* ==========================================================================
   Safety - reference "A Simple Way to Feel Heard": copy left, two app
   screens overlapping on a dot grid right
   ========================================================================== */

.safety__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 60px;
}

/* 458x600 reference box; everything inside is a percentage so it scales */
.safety__visual {
  position: relative;
  justify-self: end;
  width: 458px;
  max-width: 100%;
  aspect-ratio: 458 / 600;
}

.dot-grid--safety {
  left: 0;
  top: 23.3%;
  width: 100%;
  height: 76.3%;
  background-size: 24px 24px;
}

.safety__phone {
  position: absolute;
  filter: drop-shadow(0 26px 40px rgba(42, 11, 82, 0.2));
}

/* reference: the block dialog sits lower-left, the report sheet upper-right in front */
.safety__phone--block {
  left: 0;
  top: 16.7%;
  width: 51.1%;
}

.safety__phone--report {
  z-index: 2;
  left: 45.6%;
  top: 0;
  width: 54.1%;
}

/* sits on the dot grid below the screens, arrow pointing up at the report sheet */
.report-badge {
  position: absolute;
  z-index: 3;
  bottom: 2%;
  left: -118px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.report-badge__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--grad-badge);
  color: #fff;
  box-shadow: 0 14px 28px rgba(129, 61, 214, 0.35);
}

.report-badge__label {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-heading);
}

.report-badge__arrow {
  width: 64px;
  height: 68px;
  order: -1;
  margin-left: 60px;
  fill: none;
  stroke: var(--primary);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: scaleY(-1);
}

.safety .section-head {
  margin-bottom: 40px;
}

.safety__list {
  display: grid;
  gap: 28px;
}

.safety-item {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.safety-item__title {
  margin-bottom: 6px;
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
}

.safety__cta {
  margin-top: 44px;
}

/* ==========================================================================
   The shape of a Talkiyo call - testtokify layout (pill eyebrow, centred
   heading, one rounded panel split into four facts) in the site's purple
   ========================================================================== */

.shape {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-space);
  background: linear-gradient(160deg, var(--primary-dark) 0%, #6a24c2 55%, var(--primary) 100%);
  color: #fff;
}

/* soft light pools, as in the reference band */
.shape__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 55% at 12% 18%, rgba(157, 81, 254, 0.45), rgba(157, 81, 254, 0) 70%),
    radial-gradient(40% 60% at 88% 92%, rgba(157, 81, 254, 0.35), rgba(157, 81, 254, 0) 70%);
}

.shape .container {
  position: relative;
}

.shape .section-head {
  margin-bottom: 60px;
}

.shape__pill {
  display: inline-block;
  margin-bottom: 26px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
}

.shape__panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 30px 60px rgba(42, 11, 82, 0.25);
}

.shape__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 28px 44px;
  text-align: center;
}

.shape__cell + .shape__cell {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.shape__value {
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1px;
  color: #fff;
}

.shape__label {
  max-width: 250px;
  margin-top: 16px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #fff;
}

/* ==========================================================================
   When you need support (reference testimonial band + slider)
   ========================================================================== */

.support {
  overflow: hidden;
  background: var(--grad-soft);
}

/* reference layers: a large ring with a half disc (left), squares (top
   right), zigzag rules (bottom right) */
.support__layer {
  position: absolute;
  pointer-events: none;
}

.support__layer--circle {
  left: 5%;
  top: 88px;
  width: 163px;
  height: 363px;
  background:
    radial-gradient(circle at 100% 55px, #dfe4e3 0 55px, transparent 56px),
    radial-gradient(circle at 180px 180px, transparent 178px, #dfe4e3 179px 180px, transparent 181px);
}

.support__layer--zigzag {
  right: 7%;
  bottom: 110px;
  width: 251px;
  height: 82px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='251' height='82' viewBox='0 0 251 82'%3E%3Cg fill='none' stroke='%23cfd6d5' stroke-width='1.5'%3E%3Cpath d='M0 14 12 2l12 12 12-12 12 12 12-12 12 12 12-12 12 12 12-12 12 12 12-12 12 12 12-12 12 12 12-12 12 12 12-12 12 12 12-12 12 12'/%3E%3Cpath d='M0 44 12 32l12 12 12-12 12 12 12-12 12 12 12-12 12 12 12-12 12 12 12-12 12 12 12-12 12 12 12-12 12 12 12-12 12 12 12-12 12 12'/%3E%3Cpath d='M0 74 12 62l12 12 12-12 12 12 12-12 12 12 12-12 12 12 12-12 12 12 12-12 12 12 12-12 12 12 12-12 12 12 12-12 12 12 12-12 12 12'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
}

.support__squares {
  position: absolute;
  top: 40px;
  right: 3%;
  width: 360px;
  height: 160px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='160' viewBox='0 0 360 160'%3E%3Cg fill='%23cfd8d6' fill-opacity='.7'%3E%3Crect x='10' y='20' width='13' height='13'/%3E%3Crect x='92' y='8' width='28' height='28'/%3E%3Crect x='44' y='80' width='19' height='19'/%3E%3Crect x='300' y='30' width='30' height='30'/%3E%3Crect x='250' y='90' width='14' height='14'/%3E%3Crect x='330' y='130' width='11' height='11'/%3E%3C/g%3E%3Crect x='190' y='26' width='36' height='36' fill='none' stroke='%23cfd8d6' stroke-width='8'/%3E%3C/svg%3E") no-repeat;
}

.carousel {
  position: relative;
}

.carousel__viewport {
  /* room for card shadows without clipping; scroll-padding keeps snapped
     cards on the container edge */
  margin: -30px -30px -60px;
  padding: 30px 30px 60px;
  scroll-padding-inline: 30px;
  overflow-x: auto;
  /* fade only the side padding, so an off-screen card's shadow never shows */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

/* while the marquee glides, snapping and smooth scrolling would fight it */
.carousel__viewport.is-marquee {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.carousel__viewport::-webkit-scrollbar {
  display: none;
}

.carousel__viewport:focus-visible {
  outline-offset: -6px;
  border-radius: var(--radius-md);
}

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 30px) / 3);
  gap: 30px;
}

.situation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 40px 30px;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-card-strong);
  scroll-snap-align: start;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.situation:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 44px rgba(129, 61, 214, 0.14);
}

.situation__top {
  display: flex;
  align-items: center;
  gap: 16px;
}

.situation__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--grad-badge);
  color: #fff;
}

.situation__avatar .icon {
  width: 26px;
  height: 26px;
}

.situation__title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.situation__tag {
  display: block;
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--primary);
}

.situation__text {
  position: relative;
  z-index: 1;
  margin-top: 26px;
  max-width: 290px;
}

/* stands in for the reference card's oversized faded quote mark */
.situation__mark {
  position: absolute;
  right: 26px;
  bottom: 22px;
  width: 64px;
  height: 64px;
  color: #efedf3;
  stroke-width: 1.6;
}

.carousel__controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 40px;
}

.carousel__dots {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 24px hit area around a slim reference-style dash */
.carousel__dot {
  display: grid;
  place-items: center;
  height: 24px;
  padding: 0 4px;
  border: 0;
  background: none;
}

.carousel__dot::before {
  content: "";
  width: 14px;
  height: 4px;
  border-radius: 4px;
  background: #8573c0;
  transition: width var(--dur) var(--ease), background-color var(--dur);
}

.carousel__dot[aria-current="true"]::before {
  width: 34px;
  background: var(--primary);
}

/* ==========================================================================
   FAQ - reference layout: app screen + 3D question mark on the left, sitting
   on the section's bottom edge; eyebrow, 30px heading and accordion right
   ========================================================================== */

.faq {
  /* the parallax phone slides below the section edge and is cut off there */
  overflow: clip;
  padding-bottom: 0;
}

.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
}

.faq__visual {
  position: relative;
  align-self: end;
  justify-self: center;
  width: 100%;
  max-width: 555px;
}

/* talkiyo.in scroll parallax (data-parallax y:150): the phone starts 100px
   high and drifts 150px down over one viewport of scrolling. js/main.js
   reads these two offsets; without JS the phone simply rests at 0. */
.faq__phone {
  --parallax-from: -100px;
  --parallax-to: 50px;
  display: block;
  width: 70%;
  max-width: 388px;
  margin: 0 auto;
  filter: drop-shadow(0 20px 40px rgba(42, 11, 82, 0.12));
  will-change: transform;
}

/* talkiyo.in "zbounce": the question mark breathes up and down forever.
   Its resting transform is the first keyframe, so it sits in the same
   place when motion is reduced. */
.faq__question {
  position: absolute;
  left: 39%;
  top: 51%;
  width: 51.5%;
  max-width: 286px;
  filter: drop-shadow(0 20px 30px rgba(180, 83, 9, 0.25));
  transform: scale(0.9) translateY(-50%);
  animation: zbounce 5s ease infinite;
}

@keyframes zbounce {
  0% { transform: scale(0.9) translateY(-50%); }
  50% { transform: scale(1) translateY(-60%); }
  100% { transform: scale(0.9) translateY(-50%); }
}

/* talkiyo.in subtitle letter effect: every letter starts upside down, below
   and to the right of its place, then swings up into position (anime.js:
   1000ms easeOutQuart, 10ms stagger). Letters are only split with JS. */
[data-letters] .letter {
  display: inline-block;
  line-height: 1em;
  transform-origin: 0 100%;
}

.letters-armed .letter {
  transform: translateY(1.1em) translateX(0.55em) rotate(180deg);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-delay: calc(var(--i) * 10ms);
}

.letters-armed.is-lettered .letter {
  transform: translateY(0) translateX(0) rotate(0deg);
}

.faq__content {
  padding-bottom: var(--section-space);
}

.faq .section-head {
  margin-bottom: 26px;
}

/* reference heading is noticeably smaller than other section titles */
.faq__title {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
}

.faq__more {
  margin-top: 30px;
}

.accordion {
  counter-reset: faq;
}

/* reference panel: 47px row, 20px apart, hairline beneath */
/* talkiyo.in: the clicked panel turns purple at once (no colour fade) */
.accordion__item {
  counter-increment: faq;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 -1px 0 var(--border);
}

.js .accordion__item.reveal {
  transition:
    opacity 0.8s var(--ease) var(--stagger, 0ms),
    translate 0.8s var(--ease) var(--stagger, 0ms);
}

.accordion__item + .accordion__item {
  margin-top: 20px;
}

.accordion__heading {
  font-size: inherit;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 47px;
  padding: 10px 15px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: var(--text-primary);
  transition: color 0.3s;
}

.accordion__trigger::before {
  /* reference: the question number, set in the same ink as the question */
  content: counter(faq);
  flex: none;
  min-width: 0.9em;
}

.accordion__q {
  flex: 1;
}

.accordion__trigger:hover {
  color: var(--primary);
}

.accordion__chevron {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  transform: rotate(-180deg);
  transition: transform 0.3s;
}

.accordion__inner > p {
  padding: 15px 15px 22px;
}

.accordion__inner a {
  font-weight: 500;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* open state: the whole item fills purple */
.accordion__item.is-open {
  background: var(--primary);
  box-shadow: 0 18px 36px rgba(129, 61, 214, 0.25);
}

.accordion__item.is-open .accordion__trigger {
  color: #fff;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.28);
}

.accordion__item.is-open .accordion__chevron {
  transform: rotate(0deg);
}

.accordion__item.is-open .accordion__inner {
  color: #fff;
}

.accordion__item.is-open .accordion__inner strong,
.accordion__item.is-open .accordion__inner a {
  color: #fff;
}

.accordion__item.is-open :focus-visible {
  outline-color: #fff;
}

/* collapsing only happens with JS - without it every answer stays open */
.js .accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.35s ease, visibility 0s linear 0.35s;
}

.js .accordion__item.is-open .accordion__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.35s ease, visibility 0s;
}

.js .accordion__panel > .accordion__inner {
  min-height: 0;
  overflow: hidden;
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact {
  background: var(--surface-alt);
}

.contact__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 30px;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.contact-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card-hover);
}

.contact-card__title {
  margin: 26px 0 10px;
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
}

.contact-card__mail {
  margin-bottom: 12px;
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--primary);
  overflow-wrap: anywhere;
  transition: color var(--dur);
}

.contact-card__mail:hover {
  color: var(--primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-card address {
  line-height: 1.75;
}

.contact-card__links {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

/* ==========================================================================
   Final CTA
   ========================================================================== */

.cta {
  position: relative;
  z-index: 2;
  margin-bottom: -150px;
  padding-top: var(--section-space);
}

.cta__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-areas:
    "eyebrow actions"
    "title   actions"
    "text    actions"
    "note    actions";
  align-items: start;
  column-gap: 60px;
  padding: 70px 70px;
  border-radius: var(--radius-lg);
  background: radial-gradient(at 0% 0%, #813dd6 64%, #fdaa04 100%);
  box-shadow: 0 30px 60px rgba(88, 19, 175, 0.28);
  color: #fff;
  overflow: hidden;
}

.cta__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.cta__ring--1 {
  width: 440px;
  height: 440px;
  right: -120px;
  top: -200px;
}

.cta__ring--2 {
  width: 280px;
  height: 280px;
  right: -40px;
  top: -120px;
  border-color: rgba(255, 255, 255, 0.14);
}

.cta__eyebrow {
  grid-area: eyebrow;
  justify-self: start;
  margin-bottom: 20px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: rgba(42, 11, 82, 0.28);
  font-size: 0.8125rem;
}

.live-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4ade80;
}

.live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #4ade80;
  opacity: 0;
  animation: pulse 2s ease-out infinite;
}

.cta__title {
  grid-area: title;
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}

.cta__text {
  grid-area: text;
  max-width: 520px;
  margin-top: 20px;
  color: #fff;
}

.cta__note {
  grid-area: note;
  position: relative;
  margin-top: 18px;
  font-size: var(--fs-small);
  color: #fff;
}

.cta__actions {
  grid-area: actions;
  position: relative;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  position: relative;
  overflow: hidden;
  padding-top: calc(150px + 90px);
  background: var(--grad-footer);
  color: #fff;
}

.footer__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1.5px, transparent 2px) 0 0 / 16px 16px;
  -webkit-mask-image: radial-gradient(60% 70% at 55% 55%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 70% at 55% 55%, #000 0%, transparent 75%);
}

.footer .container {
  position: relative;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: 50px 40px;
  padding-bottom: 70px;
}

.brand--footer .brand__logo {
  height: 56px;
}

.footer__about {
  max-width: 320px;
  margin-top: 22px;
}

.footer__stores {
  margin-top: 28px;
}

.footer__stores .store img {
  height: 42px;
}

/* social: talkiyo.in "Follow Us" accounts, as round outline buttons */
.footer__social {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}

.footer__social-label {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
}

.footer__social-list {
  display: flex;
  gap: 12px;
}

.footer__social-link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  color: #fff;
  transition: background-color var(--dur), border-color var(--dur), color var(--dur), transform var(--dur) var(--ease);
}

.footer__social-link .icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}

.footer__social-link:hover {
  transform: translateY(-3px);
  border-color: #fff;
  background: #fff;
  color: var(--primary-dark);
}

.footer__heading {
  position: relative;
  margin-bottom: 34px;
  font-size: 1.375rem;
  font-weight: 500;
  color: #fff;
}

.footer__heading::after {
  /* reference: short rule under footer headings */
  content: "";
  position: absolute;
  left: 0;
  bottom: -14px;
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
}

.footer__links {
  display: grid;
  gap: 12px;
}

.footer__links a,
.footer__bar-links a {
  position: relative;
  color: #fff;
  transition: color var(--dur), padding-left var(--dur) var(--ease);
}

.footer__links a:hover {
  color: #fff;
  padding-left: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__address {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}

.footer__contact {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.footer__contact .icon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

a.footer__contact:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 0 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  text-align: center;
  font-size: 0.9375rem;
}

.footer__bar-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 24px;
}

.footer__bar-links a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer :focus-visible,
.hero :focus-visible,
.stats :focus-visible,
.cta__panel :focus-visible,
.cta__panel .text-link:focus-visible {
  outline-color: #fff;
}

/* back to top (reference: round gradient button, bottom right) */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--grad-badge);
  color: #fff;
  box-shadow: 0 14px 30px rgba(88, 19, 175, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--dur), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur), transform var(--dur) var(--ease), visibility 0s;
}

.to-top:hover {
  transform: translateY(-4px);
}

.to-top .icon {
  width: 24px;
  height: 24px;
  stroke-width: 2.4;
}

/* ==========================================================================
   Motion
   ========================================================================== */

@keyframes float {
  0%,
  100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes pulse {
  0% { opacity: 0.7; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.6); }
}

@keyframes wave {
  0%,
  100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}

/* Load-in and scroll reveal move elements with the individual `translate`
   property, so they never fight the `transform` used by hover states and
   card offsets. */

/* load-in for hero content (reference: fadeInUp) */
.js .enter {
  opacity: 0;
  translate: 0 26px;
  animation: enter 0.9s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes enter {
  to {
    opacity: 1;
    translate: none;
  }
}

/* scroll reveal - armed only when JS is running. The list repeats the hover
   transitions of the elements that carry .reveal, with no delay, because
   this declaration replaces theirs. */
.js .reveal {
  opacity: 0;
  translate: 0 34px;
  transition:
    opacity 0.8s var(--ease) var(--stagger, 0ms),
    translate 0.8s var(--ease) var(--stagger, 0ms),
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    background-color 0.35s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js .enter,
  .js .reveal {
    opacity: 1;
    translate: none;
    animation: none;
  }

  .hero__img,
  .hero__phone-back,
  .chip {
    animation: none;
  }
}