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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
  background: #efecf5;
  overflow-x: hidden;
}

/* ---------- Shared horizontal gutter so every section aligns ----------
   One variable drives the side padding of every section, so the left/right
   edges line up at every screen size. Desktop scales smoothly (≈190px on a
   1440px+ screen, smaller on narrower desktops); mobile uses tight gutters. */
:root {
  --gutter: clamp(48px, 13vw, 190px);
}

@media (max-width: 1023px) {
  :root {
    --gutter: 24px;
  }
}

@media (max-width: 600px) {
  :root {
    --gutter: 20px;
  }
}

#home,
#products,
#about,
#contact {
  scroll-margin-top: 96px;
}

.hero,
.features {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.stage {
  position: relative;
  flex: none;
  transform: scale(var(--scale, 1));
  transform-origin: center center;
}

/* ---------- Hero section ---------- */
.hero {
  background:
    radial-gradient(80% 70% at 50% 42%, #f6f4fa 0%, #efecf5 55%, #e7e3ef 100%);
}

/* Expanding "water ripple" rings */
.ripples {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 0;
  pointer-events: none;
}

.ripples span {
  position: absolute;
  left: 0;
  top: 0;
  width: 110vmax;
  height: 110vmax;
  margin: -55vmax 0 0 -55vmax;
  border: 3px solid #D6CBEA;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  animation: ripple 11s linear infinite;
}

.ripples span:nth-child(2) {
  animation-delay: 2.75s;
}

.ripples span:nth-child(3) {
  animation-delay: 5.5s;
}

.ripples span:nth-child(4) {
  animation-delay: 8.25s;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  12% {
    opacity: 0.9;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes ripple-center {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
  }

  12% {
    opacity: 0.65;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ripples span {
    animation: none;
    opacity: 0.1;
    transform: scale(0.65);
  }
}

/* ---------- Navbar — scrolls with page (menu scrolls away) ---------- */
.navbar {
  position: absolute;
  top: 24px;
  left: 0;
  width: 100%;
  z-index: 50;
}

/* full-width; side padding follows the shared section gutter */
.nav-inner {
  position: relative;
  width: 100%;
  height: 60px;
  padding: 0 var(--gutter);
}

/* logo scrolls away with the hero section (stays inside the navbar, not pinned) */
.logo {
  position: absolute;
  /* align the logo's visible edge with the gutter (-17px compensates for the
     logo image's transparent left padding at this height) */
  left: calc(var(--gutter) - 17px);
  top: 0;
  height: 90px;
  width: auto;
  z-index: 60;
}

/* Menu pill — pinned to the top so it follows the page on scroll
   (the logo stays in the navbar and scrolls away with the hero) */
.menu {
  position: fixed;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  z-index: 55;
  display: flex;
  width: 470px;
  height: 60px;
  align-items: stretch;
  /* children stretch to full height */
  justify-content: space-around;
  border-radius: 35px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 8px 32px rgba(70, 34, 136, 0.12);
  overflow: hidden;
  /* clip active pill to the rounded border */
  padding: 0;
  /* no padding — active item goes edge to edge */
}

.menu-item {
  text-decoration: none;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.3px;
  padding: 0 14px;
  border-radius: 35px;
  /* pill shape so hover/active backgrounds are rounded, not rectangular */
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  white-space: nowrap;
  /* each item takes equal width */
}

/* Hover feedback for non-active items */
.menu-item:hover:not(.active) {
  background: rgba(255, 255, 255, 0.45);
}

/* Active item covers its full slot — top, bottom, left, right all filled */
.menu-item.active {
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(70, 34, 136, 0.12);
  border-radius: 35px;
  /* pill shape on the active item itself */
}

/* hamburger toggle — hidden on desktop */
.nav-toggle {
  display: none;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 2.5px;
  border-radius: 2px;
  background: #462288;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* =======================================================
   Hero layout — mobile first
   ======================================================= */
.hero {
  /* *** CHANGED: 190px left/right padding on desktop (aligns with about/contact) *** */
  padding: clamp(96px, 14vh, 140px) var(--gutter) 56px;
  align-items: flex-start;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: clamp(22px, 5vw, 34px);
}

.welcome {
  color: #462288;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: clamp(2rem, 9.2vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.welcome .line-1,
.welcome .line-2 {
  display: block;
}

.welcome .line-2 {
  padding-left: clamp(60px, 19vw, 100px);
}

.phone-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

.home-img {
  position: relative;
  display: block;
  width: auto;
  height: clamp(240px, 58vw, 400px);
  object-fit: contain;
  object-position: bottom;
  transform: translateX(-22%);
  z-index: 1;
}

.phone-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* circle sits larger than the phone — a halo that spills beyond it on all sides */
  width: clamp(420px, 104vw, 760px);
  height: clamp(420px, 110vw, 720px);
  border-radius: 50%;
  background: radial-gradient(closest-side,
      rgba(78, 44, 140, 0.52) 0%,
      rgba(78, 44, 140, 0.26) 45%,
      rgba(78, 44, 140, 0) 75%);
  filter: blur(28px);
  z-index: 0;
  pointer-events: none;
}

.tagline {
  color: #462288;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: clamp(1.05rem, 4.8vw, 1.5rem);
  letter-spacing: -0.02em;
}

.info {
  width: 100%;
}

.desc {
  color: #000;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: clamp(0.95rem, 4vw, 1.125rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 24px;
}

.actions .btn {
  width: 100%;
}

/* =======================================================
   Desktop (>=1024px)
   ======================================================= */
@media (min-width: 1024px) {
  .hero {
    padding: 0;
    align-items: center;
  }

  .hero-inner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    height: 100vh;
    display: block;
    text-align: left;
    gap: 0;
  }

  .welcome {
    position: absolute;
    z-index: 2;
    top: clamp(104px, 13.5vh, 180px);
    left: 34%;
    text-align: left;
    font-size: clamp(3.4rem, 6.6vw, 6rem);
    line-height: 1.15;
  }

  .welcome .line-1 {
    padding-right: 0;
  }

  .welcome .line-2 {
    padding-left: clamp(140px, 13vw, 220px);
  }

  .phone-wrap {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: auto;
  }

  .home-img {
    height: clamp(480px, 66vh, 680px);
  }

  .phone-glow {
    top: 42%;
    /* phone is up to 680px tall here; ~860px keeps the circle larger than it */
    width: clamp(760px, 64vw, 1040px);
    height: clamp(720px, 62vw, 1000px);
  }

  .tagline {
    position: absolute;
    z-index: 2;
    /* aligns with every section's shared gutter */
    left: var(--gutter);
    bottom: 20%;
    width: 22%;
    max-width: 320px;
  }

  .info {
    position: absolute;
    z-index: 2;
    /* aligns with every section's shared gutter */
    right: var(--gutter);
    bottom: 20%;
    width: 24%;
    max-width: 340px;
  }

  .actions {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
  }

  .actions .btn {
    width: auto;
  }
}

/* =======================================================
   Mid-size laptops (1024–1279px) — phone keeps its full size;
   only the side text columns move outward so they clear it
   ======================================================= */
@media (min-width: 1024px) and (max-width: 1279px) {

  /* logo lines up with the "The future of Vault" tagline (both at 40px;
     -17px compensates for the logo's transparent left padding) */
  .logo {
    left: 23px;
  }

  .tagline {
    left: 40px;
    width: 22%;
    bottom: 16%;
  }

  .info {
    right: 40px;
    width: 22%;
    bottom: 16%;
  }
}

/* =======================================================
   Small screens (<=1023px)
   ======================================================= */
@media (max-width: 1023px) {
  .hero {
    min-height: 0;
    background: #ffffff;
    padding: clamp(96px, 14vh, 140px) var(--gutter) 56px;
  }

  .hero-inner {
    gap: 28px;
  }

  /* colour starts exactly where the phone image ends */
  .hero-lower {
    align-self: stretch;
    margin: -28px calc(-1 * var(--gutter)) -56px;
    padding: 28px var(--gutter) 56px;
    background:
      radial-gradient(80% 70% at 50% 40%, #f6f4fa 0%, #efecf5 55%, #e7e3ef 100%);
  }

  .hero>.ripples {
    display: none;
  }

  .welcome {
    position: relative;
    z-index: 1;
    transform: translateY(-2vw);
  }

  .welcome .line-1 {
    padding-left: clamp(20px, 8vw, 60px);
  }

  .welcome .line-2 {
    padding-left: clamp(64px, 20vw, 120px);
  }

  .phone-wrap {
    z-index: 2;
    margin-top: clamp(-46px, -9vw, -30px);
  }

  .home-img {
    transform: translateX(-22%);
  }

  .phone-wrap::before,
  .phone-wrap::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(90vw, 420px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 2.5px solid #D6CBEA;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
    animation: ripple-center 6s linear infinite;
    z-index: 0;
    pointer-events: none;
  }

  .phone-wrap::after {
    animation-delay: 3s;
  }

  /* navbar — scrolls away with the hero (same as desktop) */
  .navbar {
    position: absolute;
    top: 16px;
  }

  .nav-inner {
    height: 52px;
    padding: 0 var(--gutter);
  }

  .logo {
    left: calc(var(--gutter) - 2px);
    top: 0;
    height: clamp(42px, 7vw, 56px);
  }

  .nav-toggle {
    display: flex;
  }

  .menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    padding: 88px 40px 40px;
    border: none;
    border-radius: 0;
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
    z-index: 1;
  }

  .navbar.nav-open .menu {
    transform: translateX(0);
    visibility: visible;
  }

  .menu-item {
    flex: none;
    width: 100%;
    justify-content: flex-start;
    padding: 8px 0;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.5px;
    border: none;
    border-radius: 0;
    text-align: left;
    color: #1d1d1f;
    height: auto;
  }

  .menu-item.active {
    background: transparent;
    box-shadow: none;
    color: #462288;
  }

  .logo {
    z-index: 3;
  }

  .nav-toggle {
    z-index: 3;
  }

  .navbar.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
  }

  .navbar.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  .navbar.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
  }
}

/* =======================================================
   Tablet only (768–1023px)
   ======================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  .welcome {
    transform: translate(3vw, -30px);
  }

  .welcome .line-1 {
    padding-left: 160px;
  }

  .welcome .line-2 {
    padding-left: 290px;
  }

  .phone-wrap {
    margin-top: -90px;
  }

  .home-img {
    transform: translateX(-22%);
  }
}

/* =======================================================
   Phone only (<=767px)
   ======================================================= */
@media (max-width: 767px) {
  .welcome {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }
}

@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes btn-border-spin {
  to { --border-angle: 360deg; }
}

/* ---------- Buttons ---------- */
.btn {
  display: flex;
  height: 57px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 46px;
  border: none;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.3px;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

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

.btn-primary {
  padding: 15px 28px;
  background: #ffffff;
  color: #462288;
  white-space: nowrap;
  border: 1.5px solid #462288;
}

.btn-primary:hover {
  background: #462288;
  color: #ffffff;
}




.about-demo-btn {
  padding: 15px 18px;
 background: #ffffff;
  color: #462288;
  /* border: 1px solid #462288; */
}

.about-demo-btn:hover {
    background: #462288;
  color: #ffffff;
  /* border: 1px solid #462288; */
}

.submit-Request-btn {
  padding: 15px 18px;
  background: #462288;
  color: #ffffff;
}

.submit-Request-btn:hover {
    background: #462288;
  color: #ffffff;
  /* border: 1px solid #462288; */
}

.btn-secondary {
  --border-angle: 0deg;
  padding: 15px 28px;
  border: none;
  background: linear-gradient(270deg, #903FE9 0%, #E172E7 100%);
  color: #ffffff;
  box-shadow: 0 4px 15.6px 0 #9D64E8;
  white-space: nowrap;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-secondary svg path {
  fill: #ffffff;
}

.btn-secondary::before {
  content: '';
  display: block;
  position: absolute;
  inset: -2px;
  border-radius: 48px;
  padding: 2px;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0deg,
    transparent 5deg,
    rgba(98, 0, 206, 0.3) 15deg,
    #6200CE 30deg,
    #a855f7 50deg,
    #E172E7 65deg,
    rgba(225, 114, 231, 0.3) 80deg,
    transparent 95deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: btn-border-spin 2.4s linear infinite;
  pointer-events: none;
}

@keyframes wave-move {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

/* ====================================================== */
/* About Section - Centered Button                        */
/* ====================================================== */

/* New container for the centered button */
.ab-button-center {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Adjust the existing about-demo-btn style */
.about-demo-btn {
  padding: 18px 40px;
  background: #ffffff;
  color: #462288;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 46px;
  box-shadow: 0 12px 32px rgba(70, 34, 136, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  letter-spacing: -0.3px;
}

.about-demo-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 40px rgba(70, 34, 136, 0.35);
  background: #ffffff;
  color: #462288;
}

/* Adjust stat card positions to make room for the button */
.ab-stat {
  position: absolute;
  z-index: 3;
  bottom: 140px; /* Increased from 100px to lift them up */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 26px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(35, 18, 74, 0.2);
}

/* Hide the button inside ab-content on desktop (it's now centered) */
@media (min-width: 1024px) {
  .ab-content .about-demo-btn {
    display: none;
  }
}

/* Mobile responsive */
@media (max-width: 1023px) {
  .about-bottom-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    width: 100%;
    position: relative;
    z-index: 5;
    order: 2;
  }

  @media (min-width: 768px) {
    .about-bottom-row {
      flex-direction: row;
      justify-content: center;
      gap: 30px;
    }
  }

  .ab-stat {
    position: static !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 26px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(35, 18, 74, 0.15);
    width: 100%;
    max-width: 220px;
    transform: none !important;
  }
  
  .ab-button-center {
    position: static !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    transform: none !important;
    order: 0;
  }

  /* Show the button inside the bottom row on mobile */
  .about-demo-btn {
    padding: 18px 40px;
    font-size: 18px;
    font-weight: 600;
  }
}

.btn-secondary:hover {
  filter: brightness(1.12);
  box-shadow: 0 10px 28px rgba(70, 34, 136, 0.42);
}

.btn-secondary:hover svg path {
  fill: #ffffff;
}


/* ====================================================== */
/* Section 2 — Vault sensor showcase                      */
/* ====================================================== */
.vault {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 52px;
  padding: 96px var(--gutter) 64px;
  overflow: hidden;
  background: #ffffff;
}

.vault-head {
  position: relative;
  z-index: 2;
  text-align: center;
}

.vault-head h2 {
  color: #20202e;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.5px;
}

.vault-head p {
  margin: 8px auto 0;
  max-width: 760px;
  color: #76767f;
  font-size: clamp(0.95rem, 1.4vw, 1.125rem);
  letter-spacing: -0.3px;
}

/* ---------- Stage: vault + absolutely-placed annotations ----------
   Fixed width so the absolutely-placed annotations stay locked to the vault
   at every desktop size; it's centred (and overflows symmetrically into the
   gutters on narrower desktops). The stacked layout below resets the width. */
.vault-stage {
  position: relative;
  z-index: 2;
  width: 1066px;
  margin: 0 auto;
  height: 620px;
}

.anno-wrap {
  display: contents;
}

/* Wrapper around the vault image + annotations. On desktop/tablet it's a
   no-op (display:contents) so everything stays positioned relative to the
   stage exactly as before; on phones it becomes the scaled box so the quote
   and Watch Demo button can sit below it instead of scaling with it. */
.vault-diagram {
  display: contents;
}

.vault-img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 560px;
  width: auto;
  object-fit: contain;
}

/* ---------- Annotation label blocks ---------- */
.anno {
  position: absolute;
  z-index: 3;
}

.anno-label {
  display: flex;
  align-items: center;
  gap: 12px;
}

.anno-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #ece4f7;
}

.anno-ic img {
  width: 30px;
  height: auto;
}

.anno-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.anno-text b {
  color: #462288;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.anno-text small {
  color: #9b93ad;
  font-size: 13px;
}

.anno-edge {
  display: block;
  width: 157px;
  height: 5px;
  margin-top: 14px;
}

.anno-line {
  position: absolute;
  width: 218px;
  height: 73px;
  pointer-events: none;
}

.anno-dot {
  position: absolute;
  width: 13px;
  height: 13px;
}

/* fixed purple centre dot (drawn in CSS, no SVG) — sits on top */
.anno-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #462288;
}

/* white ring that ripples outward from behind the purple dot and fades,
   like a live "ping" indicator */
.anno-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #ffffff;
  animation: dot-pulse 1.8s ease-out infinite;
}

.anno-bolt .anno-dot::before {
  animation-delay: 0.45s;
}

.anno-key1 .anno-dot::before {
  animation-delay: 0.9s;
}

.anno-key2 .anno-dot::before {
  animation-delay: 1.35s;
}

@keyframes dot-pulse {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }

  70% {
    opacity: 0;
  }

  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .anno-dot::before {
    animation: none;
  }
}

/* right-side labels: edge bar is positioned individually (like the dot/line),
   so you can move each one freely with top / right. */
.anno-key1 .anno-edge {
  position: absolute;
  top: 66px;
  right: 0;
}

.anno-key2 .anno-edge {
  position: absolute;
  top: 66px;
  right: 0;
}

.anno-door .anno-edge {
  position: absolute;
  top: 66px;
  right: 0;
}

.anno-bolt .anno-edge {
  position: absolute;
  top: 66px;
  right: 0;
}





/* ----- per-annotation placement (desktop) ----- */
/* LEFT — Door Sensor (upper) */
.anno-door {
  top: 18px;
  left: 24px;
}

.anno-door .anno-label {
  position: relative;
  top: -50px;
  left: 0;
}



.anno-door .anno-edge {
  top: 0px;
  left: 38px;
}



.anno-door .anno-line {
  top: -7px;
  left: 193px;
  width: 242px;
  height: 127px;
}

.anno-door .anno-dot {
  top: 89px;
  left: 435px;
}

/* LEFT — Bolt Sensor (lower) */
.anno-bolt {
  top: 168px;
  left: 0;
}


.anno-bolt .anno-label {
  position: relative;
  top: -50px;
  left: 0;
}

.anno-bolt .anno-edge {
  top: 10px;
  left: 15px;
}



.anno-bolt .anno-line {
  top: 3px;
  left: 170px;
  width: 242px;
  height: 127px;
}

.anno-bolt .anno-dot {
  top: 99px;
  left: 410px;
}

/* RIGHT — Key 1 (upper) */
.anno-key1 {
  top: 90px;
  right: 5px;
}

.anno-key1 .anno-line {
  top: 93px;
  right: 203px;
  width: 303px;
  height: 127px;
}

.anno-key1 .anno-dot {
  top: 199px;
  right: 506px;
}

.anno-key1 .anno-edge {
  top: 90px;
  left: -99px;
}

.anno-key1 .anno-label {
  position: relative;
  top: 40px;
  left: -60px;
}

/* RIGHT — Key 2 (lower) */
.anno-key2 {
  top: 220px;
  right: 5px;
}

/* move ONLY the Key 2 label (icon + "Key 2" + "bero at ligula") */
.anno-key2 .anno-label {
  position: relative;
  top: 4px;
  left: -60px;
}

.anno-key2 .anno-line {
  top: 62px;
  right: 193px;
  width: 307px;
  height: 120px;
}

.anno-key2 .anno-dot {
  top: 165px;
  right: 500px;
}

.anno-key2 .anno-edge {
  top: 55px;
  left: -85px;
}

/* ---------- Quote + Watch Demo ---------- */
.vault-quote {
  position: absolute;
  left: 0;
  bottom: 64px;
  max-width: 240px;
  z-index: 3;
}

.vq-mark {
  display: block;
  width: 54px;
  height: auto;
  margin-bottom: 16px;
}

.vault-quote p {
  color: #20202e;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.3px;
}

/* Watch Demo — same look as the hero button, positioned in the stage */
.vault-demo {
  position: absolute;
  right: 0;
  bottom: 80px;
  z-index: 3;
}

/* ---------- Vault — laptop, tablet & mobile ----------
   Keep the EXACT desktop diagram on every screen by scaling the whole
   fixed-width stage down to fit the viewport. Every absolute position set
   for desktop is preserved — the connectors, labels, quote and button just
   shrink together proportionally, so the design stays identical. */
@media (max-width: 1279px) {
  .vault {
    min-height: 0;
    padding: 64px var(--gutter) 56px;
    gap: clamp(12px, 2.5vw, 28px);
  }

  .vault-stage {
    /* scale = usable width ÷ the stage's fixed width, never larger than 1 */
    --vs: min(1, calc((100vw - 32px) / 1066px));
    /* margin:0 so flexbox keeps the oversized box centred in the viewport */
    margin: 0;
    transform: scale(var(--vs));
    transform-origin: top center;
    /* reclaim the blank space the scaled-down stage leaves below it */
    margin-bottom: calc((var(--vs) - 1) * 620px);
  }
}

/* Phones: scale only the diagram (so the image + text fill the width), and
   drop the quote and Watch Demo button into normal flow BELOW it at full
   size, instead of overlapping the diagram's lower corners. */
@media (max-width: 600px) {
  .vault-stage {
    transform: none;
    width: 100%;
    height: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  /* the diagram becomes the scaled box, sized to fill the screen width */
  .vault-diagram {
    display: block;
    position: relative;
    flex: none;
    width: 1066px;
    height: 620px;
    --vs: min(1, calc(100vw / 1066px));
    transform: scale(var(--vs));
    transform-origin: top center;
    /* reclaim the empty space the scaled-down diagram leaves below it */
    margin-bottom: calc((var(--vs) - 1) * 620px);
  }

  /* quote + button now sit below, full size and centred */
  .vault-quote {
    position: static;
    max-width: 100%;
    text-align: center;
  }

  .vq-mark {
    margin: 0 auto 14px;
  }

  .vault-demo {
    position: relative;
    right: auto;
    bottom: auto;
    align-self: center;
  }
}


/* ====================================================== */
/* Section 3 — Products carousel                          */
/* ====================================================== */
.products {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 48px;
  padding: 110px var(--gutter) 64px;
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 50% 40%, #f6f4fa 0%, #efecf5 55%, #e7e3ef 100%);
}

/* ---------- Carousel shell ---------- */
.product-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
}

.pc-viewport {
  overflow: hidden;
}

.pc-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.pc-slide {
  flex: 0 0 100%;
  min-width: 100%;
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: center;
  gap: 32px;
  /* clear the arrows (48px) + 60px gap on each side */
  padding-inline: 108px;
}

.pc-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 470px;
}

.pc-eyebrow {
  color: #462288;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.2px;
  margin-bottom: 18px;
}

.pc-text h2 {
  color: #20202e;
  font-size: clamp(2rem, 3.3vw, 3rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}

.pc-text p {
  color: #76767f;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.2px;
  margin-bottom: 34px;
}

.pc-text .btn {
  width: auto;
  align-self: flex-start;
  padding: 15px 34px;
}

.pc-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pc-media img {
  width: auto;
  max-width: 100%;
  height: clamp(300px, 32vw, 440px);
  object-fit: contain;
  filter: drop-shadow(0 26px 46px rgba(32, 32, 46, 0.20));
}

/* ---------- Arrows ---------- */
.pc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #b6afc7;
  box-shadow: 0 8px 20px rgba(70, 34, 136, 0.14);
  cursor: pointer;
  z-index: 4;
  transition: color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pc-arrow:hover {
  color: #462288;
  box-shadow: 0 10px 26px rgba(70, 34, 136, 0.22);
}

.pc-prev {
  left: 0;
}

.pc-next {
  right: 0;
}

/* ---------- Dots ---------- */
.pc-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.pc-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(70, 34, 136, 0.25);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}

.pc-dot.is-active {
  width: 26px;
  border-radius: 6px;
  background: #462288;
}

/* ---------- Feature row ---------- */
.product-features {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  list-style: none;
  /* fade when the feature set swaps to match the active product */
  transition: opacity 0.25s ease;
}

.product-features li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.pf-ic svg,
.pf-ic img {
  width: 44px;
  height: 44px;
}

.pf-label {
  color: #626262;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 15.238px;
  font-style: normal;
  font-weight: 500;
  line-height: 151.35%;
  /* 23.062px */
  letter-spacing: -0.457px;
  max-width: 200px;
}

/* ---------- Products mobile ---------- */
@media (max-width: 1023px) {
  .products {
    min-height: 0;
    padding: 88px var(--gutter) 56px;
    gap: 40px;
  }

  .pc-slide {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
    padding-inline: 0;
  }

  .pc-media {
    order: -1;
  }

  .pc-media img {
    height: clamp(220px, 58vw, 320px);
  }

  .pc-text {
    align-items: center;
    max-width: 520px;
    margin: 0 auto;
  }

  .pc-eyebrow {
    margin-bottom: 12px;
  }

  .pc-text h2 {
    font-size: clamp(1.6rem, 6.4vw, 2.2rem);
    margin-bottom: 14px;
  }

  .pc-text p {
    font-size: 16px;
    margin-bottom: 26px;
  }

  .pc-text .btn {
    align-self: center;
  }

  .pc-arrow {
    top: 26%;
    width: 40px;
    height: 40px;
  }

  .pc-prev {
    left: -6px;
  }

  .pc-next {
    right: -6px;
  }

  .product-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 18px;
    max-width: 460px;
  }

  .pf-ic svg,
  .pf-ic img {
    width: 40px;
    height: 40px;
  }

  .pf-label {
    font-size: 15px;
    max-width: 160px;
  }
}

/* ====================================================== */
/* Section 4 — Industries / About / Stats                 */
/* ====================================================== */
.industries {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
  padding: 88px var(--gutter) 64px;
  overflow: hidden;
  background: #ffffff;
}

/* ---------- Water ripples from edges ---------- */
.ripples-edge {
  top: 34%;
  z-index: 0;
}

.ripples-left {
  left: 0;
}

.ripples-right {
  left: auto;
  right: 0;
}

.ripples-edge span {
  width: 100vw;
  height: 100vw;
  margin: -50vw 0 0 -50vw;
}

/* ---------- Heading ---------- */
.ind-head {
  position: relative;
  z-index: 2;
  text-align: center;
}

.ind-head h2 {
  color: #20202e;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.ind-head p {
  margin-top: 8px;
  color: #76767f;
  font-size: 18px;
  letter-spacing: -0.3px;
}

/* ---------- Industries carousel ---------- */
.ind-carousel {
  position: relative;
  z-index: 2;
  /* match the container so side cards end at the same edges as the About box */
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ic-viewport {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  /* extra top/bottom room so the scaled-up active card and its name aren't clipped */
  padding: 48px 0 56px;
}

.ic-track {
  position: relative;
  display: flex;
  gap: 64px;
  will-change: transform;
}

/* Add this to your style.css - overlay title on image */

.ic-slide {
  position: relative;
  flex: 0 0 auto;
  width: calc((100vw - 2 * var(--gutter) - 128px) / 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transform: scale(1);
  opacity: 0.8;
  transition: transform 0.45s ease, opacity 0.45s ease;
}

/* Card container - make it relative for overlay positioning */
.ic-card {
  position: relative; /* Added */
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  padding: 12px;
  box-shadow: 0 12px 28px rgba(32, 32, 46, 0.14);
}

.ic-card img {
  display: block;
  width: 100%;
  height: 430px;
  border-radius: 12px;
  object-fit: cover;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .ic-card img {
    height: 340px;
  }
}

.ic-name {
  color: #20202e;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.2px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ic-slide.is-active {
  transform: scale(1.1);
  opacity: 1;
  z-index: 20;
}

.ic-slide.is-active .ic-card {
  /* box-shadow: 0 26px 54px rgba(0, 0, 0, 0.4); */
}

.ic-slide.is-active .ic-name {
  opacity: 1;
}

.ic-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #b6afc7;
  box-shadow: 0 8px 20px rgba(70, 34, 136, 0.14);
  cursor: pointer;
  z-index: 4;
  transition: color 0.2s ease, box-shadow 0.2s ease;
}

.ic-arrow:hover {
  color: #462288;
  box-shadow: 0 10px 26px rgba(70, 34, 136, 0.22);
}

/* arrows sit outside the container, centred in the gutter */
.ic-prev {
  left: calc(-1 * var(--gutter) / 2 - 24px);
}

.ic-next {
  right: calc(-1 * var(--gutter) / 2 - 24px);
}

/* ---------- Purple About box ---------- */
.about-box {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  border-radius: 28px;
  padding: 96px 60px 156px;
  overflow: visible;
  text-align: center;
  color: #ffffff;
  background: linear-gradient(125deg, #7a52c8 0%, #5d30a4 52%, #4a2390 100%);
}

.about-box::before,
.about-box::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 150px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 0;
  pointer-events: none;
}

/* left circle rises from the bottom corner up to the top, then restarts */
.about-box::before {
  left: -150px;
  bottom: -150px;
  background: rgba(255, 255, 255, 0.06);
  animation: ab-orb-rise 7s linear infinite;
}

.about-box::after {
  right: -150px;
  top: -150px;
  animation: ab-orb-fall 7s linear infinite;
}

@keyframes ab-orb-rise {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }

  18% {
    transform: translate(120px, -70px);
    opacity: 1;
  }

  85% {
    transform: translate(470px, -410px);
    opacity: 1;
  }

  100% {
    transform: translate(520px, -460px);
    opacity: 0;
  }
}

@keyframes ab-orb-fall {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }

  18% {
    transform: translate(-120px, 70px);
    opacity: 1;
  }

  85% {
    transform: translate(-470px, 410px);
    opacity: 1;
  }

  100% {
    transform: translate(-520px, 460px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .about-box::before,
  .about-box::after {
    animation: none;
  }
}

.ab-content {
  position: relative;
  z-index: 2;
  max-width: 940px;
  margin: 0 auto;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ab-pill {
  position: absolute;
  top: 71px;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: inline-block;
  padding: 6px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 13px;
  font-weight: 400;
}

.ab-content h2 {
  color: #fff;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 21.6px;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-top: 50px;
  margin-bottom: 14px;
}

.ab-content p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.2px;
  margin-bottom: 28px;
}

/* ====================================================== */
/* Book Appointment Button with Decorative Lines          */
/* ====================================================== */
.btn-appoint {
  position: relative;
  background: #ffffff;
  color: #20202e;
  border: none;
  border-radius: 40px;
  padding: 0;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.2px;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
  transition: transform 0.15s ease, box-shadow 0.3s ease;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  height: 57px;
  width: auto;
  min-width: 220px;
}

.btn-appoint:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
}

/* Pause animation on hover */
.btn-appoint:hover .btn-appoint-lines {
  animation-play-state: paused;
}

.btn-appoint-lines {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  pointer-events: none;
  overflow: visible;
  animation: moveLeftToRight 6s linear infinite;
}

.btn-appoint-lines svg {
  display: block;
  height: 100%;
  width: auto;
  flex-shrink: 0;
}

/* Color for the first SVG line - Purple with opacity */
.btn-appoint-lines svg:first-child path {
  fill: #462288;
  fill-opacity: 0.15;
}

/* Color for the second SVG line - Different purple shade */
.btn-appoint-lines svg:last-child path {
  fill: #7a52c8;
  fill-opacity: 0.12;
}

.btn-appoint-lines svg:first-child {
  margin-right: -15px;
}

.btn-appoint-text {
  padding: 14px 30px 14px 52px;
  display: inline-flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}

/* Continuous left to right movement */
@keyframes moveLeftToRight {
  0% {
    transform: translateX(-0%);
  }
  100% {
    transform: translateX(500%);
  }
}

/* ====================================================== */
/* Responsive Styles                                      */
/* ====================================================== */

/* Tablet and smaller screens */
@media (max-width: 1023px) {
  .btn-appoint {
    height: 50px;
    font-size: 14px;
    min-width: 180px;
  }
  
  .btn-appoint-text {
    padding: 12px 24px 12px 44px;
  }
  
  .btn-appoint-lines svg {
    height: 50px;
    width: auto;
  }
  
  .btn-appoint-lines {
    animation-duration: 5s;
  }
  
  .btn-appoint-lines svg:first-child {
    margin-right: -12px;
  }
}

/* Mobile screens */
@media (max-width: 600px) {
  .btn-appoint {
    height: 46px;
    font-size: 13px;
    min-width: 160px;
  }
  
  .btn-appoint-text {
    padding: 10px 20px 10px 38px;
  }
  
  .btn-appoint-lines svg {
    height: 46px;
    width: auto;
  }
  
  .btn-appoint-lines {
    animation-duration: 4s;
  }
  
  .btn-appoint-lines svg:first-child {
    margin-right: -10px;
  }
}

/* Reduced motion preference - disable animation */
@media (prefers-reduced-motion: reduce) {
  .btn-appoint-lines {
    animation: none;
    transform: translateX(0);
  }
}
/* floating stat cards flanking the button */
.ab-stat {
  position: absolute;
  z-index: 3;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 26px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(35, 18, 74, 0.2);
}

.ab-stat-left {
  left: 20%;
  transform: translateX(-50%);
}

.ab-stat-right {
  right: 20%;
  transform: translateX(50%);
}

.ab-stat b {
  color: #462288;
  font-family: "Poppins", sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.ab-stat span {
  color: #76767f;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

/* decorative corner chips */
.ab-chip {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
}

.ab-chip img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* chips centred on the grid intersections */
.ab-tl {
  top: 50px;
  left: 20%;
  transform: translateX(-50%);
}

.ab-tr {
  top: 50px;
  right: 20%;
  transform: translateX(50%);
}

.ab-bc {
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}

/* ---------- Industries mobile ---------- */
@media (max-width: 1023px) {
  .industries {
    min-height: 0;
    padding: 72px var(--gutter) 52px;
    gap: 36px;
  }

  .ripples-edge {
    display: none;
  }

  .ind-head h2 {
    font-size: 24px;
  }

  .ind-head p {
    font-size: 14px;
  }

  .ic-slide {
    width: 74vw;
    max-width: 320px;
  }

  .ic-card img {
    height: 230px;
  }

  .ic-name {
    font-size: 16px;
  }

  .ind-carousel {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .ic-arrow {
    width: 38px;
    height: 38px;
  }

  .ic-prev {
    left: 2px;
  }

  .ic-next {
    right: 2px;
  }

  .about-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 18px;
  }

  .ab-chip {
    display: none;
  }

  .ab-content {
    order: 1;
    margin-bottom: 12px;
  }

  .ab-content p {
    margin-bottom: 12px;
  }

  .ab-pill {
    position: static;
    transform: none;
    margin-bottom: 12px;
  }

  .ab-content h2 {
    margin-top: 0;
  }
}

/* ====================================================== */
/* Section 5 — Contact                                     */
/* ====================================================== */
.contact {
  position: relative;
  width: 100%;
  padding: 96px var(--gutter);
  background: #ffffff;
}

.contact-inner {
  width: 100%;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* ---- Left column: details ---- */
.contact-info-col h2 {
  color: #1c1830;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.contact-sub {
  margin-top: 14px;
  max-width: 360px;
  color: #6b6580;
  font-size: 15px;
  line-height: 1.65;
}

.contact-info {
  margin-top: 38px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  list-style: none;
}

.contact-info li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.ci-ic {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #f1ebfb;
}

.ci-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ci-text b {
  color: #8a84a0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.ci-text a,
.ci-text span {
  color: #2a2640;
  font-size: 15px;
  text-decoration: none;
  line-height: 1.55;
}

.ci-text a:hover {
  color: #462288;
}

/* ---- Right column: form card ---- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 36px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #ece7f5;
  box-shadow: 0 24px 60px rgba(70, 34, 136, 0.10);
}

.cf-head {
  margin-bottom: 4px;
}

.cf-head h3 {
  color: #1c1830;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.cf-head p {
  margin-top: 8px;
  color: #6b6580;
  font-size: 14px;
  line-height: 1.55;
}

.cf-row {
  display: flex;
  gap: 18px;
}

.cf-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.cf-field span {
  color: #3a3550;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.1px;
}

.cf-field input,
.cf-field textarea,
.cf-select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e4def0;
  border-radius: 10px;
  background: #faf9fc;
  color: #20202e;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  letter-spacing: -0.1px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.cf-field textarea {
  resize: vertical;
  min-height: 120px;
}

.cf-field input::placeholder,
.cf-field textarea::placeholder {
  color: #a9a4b8;
}

.cf-field input:focus,
.cf-field textarea:focus,
.cf-select:focus {
  border-color: #462288;
  box-shadow: 0 0 0 3px rgba(70, 34, 136, 0.10);
  background: #ffffff;
}

/* custom select with chevron */
.cf-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  color: #a9a4b8;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a84a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.cf-select:valid {
  color: #20202e;
}

.cf-submit {
  width: 100%;
  height: 52px;
  margin-top: 6px;
  border-radius: 10px;
  font-size: 16px;
}

.cf-note {
  text-align: center;
  color: #9a94ab;
  font-size: 12.5px;
  line-height: 1.5;
}

/* Contact — tablet & mobile */
@media (max-width: 1023px) {
  .contact {
    padding: 72px var(--gutter);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .contact-info-col h2 {
    font-size: 26px;
  }
}

@media (max-width: 600px) {
  .cf-row {
    flex-direction: column;
  }

  .contact-form {
    padding: 24px;
  }
}

/* ====================================================== */
/* Get Started popover / modal                             */
/* ====================================================== */
.gs-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(32, 20, 64, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.gs-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.gs-modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(32, 20, 64, 0.35);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.25s ease;
}

.gs-overlay.is-open .gs-modal {
  transform: translateY(0) scale(1);
}

.gs-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(70, 34, 136, 0.06);
  color: #462288;
  cursor: pointer;
  transition: background 0.2s ease;
}

.gs-close:hover {
  background: rgba(70, 34, 136, 0.14);
}

.gs-head {
  margin-bottom: 24px;
}

.gs-pill {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 30px;
  background: rgba(70, 34, 136, 0.08);
  color: #462288;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

.gs-head h3 {
  margin-top: 14px;
  color: #20202e;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.gs-head p {
  margin-top: 8px;
  color: #76767f;
  font-size: 16px;
  letter-spacing: -0.2px;
  line-height: 1.5;
}

.gs-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gs-form .btn-primary {
  margin-top: 6px;
  width: 100%;
}

@media (max-width: 600px) {
  .gs-modal {
    padding: 28px 20px;
  }

  .gs-form .cf-row {
    flex-direction: column;
  }
}

/* ====================================================== */
/* Footer                                                  */
/* ====================================================== */
.site-footer {
  position: relative;
  color: #f3eefc;
  background: linear-gradient(120deg, #8b5fe0 0%, #6f3fce 45%, #5a2eb8 100%);
  overflow: hidden;
}

.footer-inner {
  width: 100%;
  padding: 64px var(--gutter) 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 1.1fr;
  gap: 40px;
  align-items: start;
}

/* --- Brand column --- */
.footer-logo {
  height: 84px;
  width: auto;
  display: block;
  margin-left: -3px;
  margin-bottom: 22px;
}

.footer-tagline {
  font-size: 15px;
  line-height: 1.6;
  color: #e7ddf7;
  max-width: 260px;
  margin-bottom: 26px;
  margin-left: 10px;
}

.footer-subscribe {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 999px;
  padding: 6px 6px 6px 16px;
  max-width: 300px;
  box-shadow: 0 8px 24px rgba(40, 16, 80, 0.18);
}

.footer-subscribe .fs-icon {
  display: flex;
  color: #9a8bb5;
  margin-right: 8px;
}

.footer-subscribe input {
  flex: 1;
  border: 0;
  outline: 0;
  font-family: inherit;
  font-size: 14px;
  color: #3a2a55;
  background: transparent;
  min-width: 0;
}

.footer-subscribe input::placeholder {
  color: #9a8bb5;
}

.footer-subscribe button {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #4a2390;
  background: #f0e9fb;
  padding: 9px 18px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}

.footer-subscribe button:hover {
  background: #4a2390;
  color: #fff;
}

.footer-social {
  display: flex;
  gap: 14px;
  margin-top: 28px;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #f3eefc;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: background 0.2s ease, transform 0.2s ease;
}

.footer-social a:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

/* --- Quick links column --- */
.footer-links {
  display: flex;
  flex-direction: column;
}

.footer-links h4 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 22px;
}

.footer-links a {
  font-size: 15px;
  color: #e2d7f4;
  text-decoration: none;
  padding: 9px 0;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-links a:hover {
  color: #fff;
  padding-left: 4px;
}

/* --- Product image column --- */
.footer-art {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: center;
  /* vertically center the image within the footer row */
  height: 100%;
}

.footer-art img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  filter: drop-shadow(0 18px 32px rgba(30, 12, 60, 0.35));
}

/* --- Bottom bar --- */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.footer-bottom p {
  font-size: 14px;
  color: #d9ccef;
}

.footer-legal {
  display: flex;
  gap: 32px;
}

.footer-legal a {
  font-size: 14px;
  color: #d9ccef;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-legal a:hover {
  color: #fff;
}

/* --- Responsive --- */
@media (max-width: 980px) {

  /* gutter follows the shared --gutter variable; only the grid changes here */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .footer-art {
    grid-column: 1 / -1;
    justify-content: center;
    order: 3;
  }
}

@media (max-width: 600px) {
  .footer-inner {
    padding: 48px var(--gutter) 24px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* scale the art down proportionally on phones */
  .footer-art img {
    width: 100%;
    max-width: 340px;
    max-height: none;
    height: auto;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-legal {
    gap: 20px;
    flex-wrap: wrap;
  }
}

/* ======================================================
   Privacy Policy Modal — Glassmorphism overlay
   ====================================================== */
.pp-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 10, 50, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  overflow-y: auto;
}

.pp-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.pp-modal {
  position: relative;
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  height: 90vh;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 30px 80px rgba(70, 34, 136, 0.2), 0 8px 32px rgba(70, 34, 136, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}

.pp-overlay.is-open .pp-modal {
  transform: translateY(0) scale(1);
}

.pp-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(70, 34, 136, 0.08);
  color: #462288;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.pp-modal-close:hover {
  background: rgba(70, 34, 136, 0.18);
  transform: rotate(90deg);
}

.pp-page-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  flex: 1;
}

.pp-page-header {
  padding: 20px 48px 16px;
  border-bottom: 1px solid rgba(238, 240, 245, 0.6);
  flex-shrink: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.4);
}

.pp-page-header h2 {
  font-size: 22px;
  font-weight: 600;
  color: #1a1a2e;
  letter-spacing: -0.3px;
  margin: 0;
}

.pp-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

.pp-sidebar {
  width: 320px;
  flex-shrink: 0;
  padding: 20px 16px 20px 24px;
  border-right: 1px solid rgba(238, 240, 245, 0.6);
  background: rgba(250, 251, 252, 0.5);
  overflow-y: auto;
  height: 100%;
}

.pp-sidebar::-webkit-scrollbar {
  width: 4px;
}

.pp-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.pp-sidebar::-webkit-scrollbar-thumb {
  background: #d0d5e0;
  border-radius: 4px;
}

.pp-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(232, 236, 243, 0.8);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.pp-search:focus-within {
  border-color: #462288;
  box-shadow: 0 0 0 3px rgba(70, 34, 136, 0.08);
  background: rgba(255, 255, 255, 0.9);
}

.pp-search svg {
  flex-shrink: 0;
  color: #aab0c0;
}

.pp-search input {
  border: none;
  outline: none;
  background: transparent;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  color: #1a1a2e;
  width: 100%;
}

.pp-search input::placeholder {
  color: #b5bccd;
}

.pp-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pp-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 15px;
  color: #6b6b7a;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  line-height: 1.4;
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
  border: none;
  background: transparent;
}

.pp-nav-item:hover {
  background: rgba(70, 34, 136, 0.06);
  color: #462288;
}

.pp-nav-item.active {
  background: rgba(70, 34, 136, 0.1);
  color: #462288;
  font-weight: 500;
}

.pp-nav-num {
  font-size: 13px;
  font-weight: 500;
  color: #aab0c0;
  min-width: 28px;
  flex-shrink: 0;
  transition: color 0.15s ease;
  letter-spacing: 0.3px;
}

.pp-nav-item.active .pp-nav-num,
.pp-nav-item:hover .pp-nav-num {
  color: #462288;
}

.pp-nav-separator {
  display: none;
  width: 3px;
  height: 20px;
  border-radius: 2px;
  background: #462288;
  flex-shrink: 0;
}

.pp-nav-item.active .pp-nav-separator {
  display: block;
}

.pp-content {
  flex: 1;
  padding: 24px 48px 48px;
  overflow-y: auto;
  height: 100%;
  min-height: 0;
}

.pp-content::-webkit-scrollbar {
  width: 4px;
}

.pp-content::-webkit-scrollbar-track {
  background: transparent;
}

.pp-content::-webkit-scrollbar-thumb {
  background: #d0d5e0;
  border-radius: 4px;
}

.pp-entry {
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-margin-top: 20px;
}

.pp-entry:not(:last-child) {
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(240, 242, 247, 0.6);
}

.pp-entry-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pp-entry-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(70, 34, 136, 0.08);
  color: #462288;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  flex-shrink: 0;
}

.pp-entry h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a2e;
  letter-spacing: -0.3px;
  margin: 0;
}

.pp-entry p {
  font-size: 14.5px;
  line-height: 1.8;
  color: #3d3d4a;
  margin: 0;
}

.pp-entry p + p {
  margin-top: 8px;
}

.pp-entry a {
  color: #462288;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pp-entry a:hover {
  color: #5a2eaa;
}

.pp-entry strong {
  color: #1a1a2e;
  font-weight: 600;
}

.pp-entry ul {
  margin: 4px 0 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pp-entry ul li {
  font-size: 14.5px;
  line-height: 1.8;
  color: #3d3d4a;
}

.pp-entry h4 {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 8px 0 4px 0;
}

/* ======================================================
   Responsive - Tablet
   ====================================================== */
@media (max-width: 820px) {
  .pp-overlay {
    padding: 16px;
  }

  .pp-modal {
    border-radius: 16px;
    max-height: 95vh;
    height: 95vh;
    background: rgba(255, 255, 255, 0.9);
  }

  .pp-page-header {
    padding: 16px 20px 12px;
  }

  .pp-page-header h2 {
    font-size: 18px;
  }

  .pp-body {
    flex-direction: column;
    overflow: hidden;
  }

  .pp-sidebar {
    width: 100%;
    height: auto;
    max-height: 210px;
    border-right: none;
    border-bottom: 1px solid rgba(238, 240, 245, 0.6);
    padding: 12px 16px;
    overflow-y: auto;
    flex-shrink: 0;
  }

  .pp-search {
    margin-bottom: 10px;
  }

  .pp-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 4px;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .pp-nav::-webkit-scrollbar {
    display: none;
  }

  .pp-nav-item {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 9px 18px;
    font-size: 14px;
    border-radius: 20px;
    gap: 6px;
  }

  .pp-nav-separator {
    display: none !important;
  }

  .pp-content {
    padding: 20px 20px 28px;
    height: 100%;
    min-height: 300px;
    overflow-y: auto;
  }

  .pp-entry h3 {
    font-size: 17px;
  }

  .pp-entry p,
  .pp-entry ul li {
    font-size: 14px;
  }

  .pp-entry h4 {
    font-size: 14px;
  }

  .pp-entry:not(:last-child) {
    padding-bottom: 24px;
  }
}

@media (max-width: 480px) {
  .pp-overlay {
    padding: 8px;
  }

  .pp-modal {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    max-height: 98vh;
    height: 98vh;
  }

  .pp-page-header {
    padding: 12px 16px 10px;
  }

  .pp-page-header h2 {
    font-size: 16px;
  }

  .pp-sidebar {
    padding: 10px 12px;
    max-height: 150px;
  }

  .pp-nav-item {
    padding: 5px 10px;
    font-size: 12px;
    gap: 4px;
  }

  .pp-nav-num {
    font-size: 11px;
    min-width: 20px;
  }

  .pp-content {
    padding: 16px 16px 24px;
    min-height: 250px;
  }

  .pp-entry-header {
    gap: 10px;
  }

  .pp-entry-num {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .pp-entry h3 {
    font-size: 15px;
  }

  .pp-entry p,
  .pp-entry ul li {
    font-size: 13.5px;
    line-height: 1.7;
  }

  .pp-entry h4 {
    font-size: 13.5px;
  }

  .pp-entry:not(:last-child) {
    padding-bottom: 20px;
  }
}
/* ── Enquiry form status message (see window.sternaSubmitForm in index.html) ── */
.form-status {
  display: none;
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
}

.form-status.is-visible {
  display: block;
}

.form-status.is-info {
  color: #462288;
}

.form-status.is-ok {
  color: #157347;
}

.form-status.is-err {
  color: #b02a37;
}

.footer-subscribe+.form-status {
  max-width: 300px;
  color: #fff;
  word-break: break-word;
}

.footer-subscribe+.form-status.is-info,
.footer-subscribe+.form-status.is-ok {
  color: #d9ccf5;
}

.footer-subscribe+.form-status.is-err {
  color: #ffb3ba;
}

/* ── Demo video lightbox — FLIP morph from the Watch Demo button ───────────
   The player is not a separate popup: .vm-box is measured at its final size,
   transformed back onto the clicked button's exact bounding box, and animated
   to identity. Only transform and opacity are ever animated — no width, top,
   box-shadow or filter — so every frame stays on the compositor.

   The three moving parts are deliberately separate elements, because the thing
   that makes a morph look cheap is scaling the content along with the box:
     .vm-box    changes shape; it is only a coloured rectangle
     .vm-face   the button's label, parked over the button, only ever faded
     .vm-media  the player, already at its final size, only ever faded
   Nothing is ever scaled and counter-scaled, so nothing can shear or blur. */
.video-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
}

.video-overlay.is-open {
  visibility: visible;
}

/* The dimmer is its own layer rather than a background on .video-overlay, so
   fading it in cannot also fade the box that sits on top of it. */
.vm-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
}

/* Blur is a static end state, never part of the transition — compositing a
   backdrop-filter on a moving layer is what makes this kind of overlay stutter. */
.video-overlay.is-playing .vm-scrim {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 1;
}

.video-modal {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
}

/* Not painted itself — it only defines the box the player ends up occupying,
   which is the "Last" rect the morph is measured against. */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  margin: 0 auto;
}

/* The morphing container. transform-origin is the centre so the FLIP maths is
   a straight centre-to-centre translate plus a scale. */
.vm-box {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: #0b0713;
  transform-origin: 50% 50%;
}

/* The button's gradient, riding on the container and fading out early so the
   box drains from pill-purple to player-black as it unfolds. Distortion here is
   invisible: it is a flat gradient with nothing to shear. */
.vm-tint {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(270deg, #903FE9 0%, #E172E7 100%);
}

/* The same rotating conic-gradient border the Watch Demo button wears, carried
   onto the player it becomes — same stops, same 2.4s btn-border-spin, so the two
   read as the same object.

   It rides inside .vm-box rather than on the frame so it inherits the
   container's exact shape, position and settle overshoot for free. Its 2px band
   is scaled by the container like anything else, but it only fades in over the
   last 150ms, by which point the box is within 2% of full size — so the band
   never visibly thickens or thins. */
.vm-ring {
  --border-angle: 0deg;
  position: absolute;
  inset: -2px;
  /* the box's 12px, plus the 2px this sits outside it */
  border-radius: 14px;
  padding: 2px;
  background: conic-gradient(from var(--border-angle),
      transparent 0deg,
      transparent 5deg,
      rgba(98, 0, 206, 0.3) 15deg,
      #6200CE 30deg,
      #a855f7 50deg,
      #E172E7 65deg,
      rgba(225, 114, 231, 0.3) 80deg,
      transparent 95deg,
      transparent 360deg);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  /* Paused while the player is shut: an animated conic gradient this size has
     no business repainting behind a hidden overlay for the life of the page. */
  animation: btn-border-spin 2.4s linear infinite paused;
  opacity: 0;
  pointer-events: none;
}

.video-overlay.is-open .vm-ring {
  animation-play-state: running;
}

.video-overlay.is-playing .vm-ring {
  opacity: 1;
}

/* Held off once the box has landed, so cancelling the morph animations can
   never snap the purple back over a playing video. */
.video-overlay.is-playing .vm-tint {
  opacity: 0;
}

/* Shadow appears only once the box has landed: it is never animated, so it
   costs nothing during the morph. */
.video-overlay.is-playing .vm-box {
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

/* Fixed to the viewport and positioned by transform alone, so showing it costs
   no layout. JS parks it over the source button. */
.vm-face {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.3px;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

.vm-face svg path {
  fill: #fff;
}

/* Never transformed — the player sits at its final size from the first frame
   and is simply cross-faded in once the container is nearly open. */
.vm-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #0b0713;
  opacity: 0;
}

.video-overlay.is-playing .vm-media {
  opacity: 1;
}

.vm-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Shown only if the embed is still not ready 300ms in. Stacked above .vm-media
   because that layer is already opaque black by the time the container opens —
   without this the spinner would be hidden behind the very wait it explains. */
.vm-spinner {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.vm-spinner span {
  display: block;
  width: 100%;
  height: 100%;
  border: 2.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vm-spin 0.7s linear infinite;
}

@keyframes vm-spin {
  to {
    transform: rotate(360deg);
  }
}

.video-close {
  position: absolute;
  top: -52px;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: background 0.2s ease;
}

.video-overlay.is-playing .video-close {
  opacity: 1;
}

.video-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* The source button is hidden for as long as the player is open, so the pill
   reads as having lifted off the page rather than being duplicated. */
.is-morph-source {
  visibility: hidden;
}

@media (max-width: 640px) {
  .video-overlay {
    padding: 16px;
  }

  .video-close {
    top: -46px;
  }

  .vm-face {
    font-size: 16px;
  }
}

/* Nothing here is load-bearing for the player, so drop the whole morph when the
   visitor asks for less motion — the script falls back to a plain open. */
@media (prefers-reduced-motion: reduce) {
  .vm-spinner span {
    animation-duration: 1.4s;
  }
}

/* ── WhatsApp floating action ──────────────────────────────────────────────
   The only floating control on the site. Sits above all page content but below
   the dialogs, and steps aside entirely while one is open. */
.wa-fab {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.wa-fab:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.55);
}

.wa-fab svg {
  position: relative;
  z-index: 1;
}

/* Ring that breathes outwards, purely decorative. */
.wa-fab-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  opacity: 0.55;
  pointer-events: none;
  animation: wa-pulse 2.4s ease-out infinite;
}

@keyframes wa-pulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }

  70%,
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

.wa-fab-tip {
  position: absolute;
  right: calc(100% + 14px);
  padding: 8px 14px;
  border-radius: 10px;
  background: #20202e;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.wa-fab:hover .wa-fab-tip,
.wa-fab:focus-visible .wa-fab-tip {
  opacity: 1;
  transform: translateX(0);
}

/* Any dialog outranks the button. :has() carries this without every modal
   having to know the button exists; where it is unsupported the button simply
   stays put, which is how it behaved before. */
body:has(.promo-overlay.is-open) .wa-fab,
body:has(.gs-overlay.is-open) .wa-fab,
body:has(.pp-overlay.is-open) .wa-fab,
body:has(.video-overlay.is-open) .wa-fab {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 600px) {
  .wa-fab {
    right: 18px;
    bottom: 18px;
    width: 54px;
    height: 54px;
  }

  .wa-fab-tip {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab-pulse {
    animation: none;
    opacity: 0;
  }
}

/* ── Landing promo popup — a reply already half-written ────────────────────
   One message from Sterna lands, then the visitor's own side starts typing and
   never finishes. Finishing an open reply is a far smaller ask than starting a
   conversation, and the button is what completes it.

   Only transform and opacity animate. */
.promo-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(9, 21, 15, 0.68);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  /* Hiding waits for the fade; showing happens at once. Transitioning
     visibility itself would leave the dialog unfocusable on its opening frame. */
  transition: opacity 0.2s ease, visibility 0s 0.2s;
}

.promo-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s 0s;
}

.promo-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  border-radius: 24px;
  background: #ece5dd;
  box-shadow: 0 34px 80px rgba(4, 20, 12, 0.55);
  overflow: hidden;
  opacity: 0;
  transform: translateY(26px) scale(0.94);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
}

.promo-overlay.is-open .promo-card {
  opacity: 1;
  transform: none;
}

.promo-card:focus {
  outline: none;
}

.promo-card :focus-visible {
  outline: 2px solid #0b8a6b;
  outline-offset: 2px;
}

/* ── header ── */
.promo-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 20px;
  background: linear-gradient(135deg, #128c4a 0%, #075e54 100%);
}

.promo-avatar {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ffffff;
  color: #0d7a45;
}

.promo-online {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 11px;
  height: 11px;
  border: 2px solid #0d7a45;
  border-radius: 50%;
  background: #4bea86;
}

.promo-online--sm {
  position: relative;
  right: auto;
  bottom: auto;
  flex: none;
  width: 7px;
  height: 7px;
  border: 0;
  background: #12a150;
}

.promo-who b {
  display: block;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.promo-who span {
  color: rgba(255, 255, 255, 0.72);
  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
}

.promo-close {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.promo-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/* ── thread ── */
.promo-thread {
  padding: 18px 18px 20px;
  /* the faint doodle wash a chat background has */
  background-color: #ece5dd;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(0, 0, 0, 0.04) 2px, transparent 2px),
    radial-gradient(circle at 62% 46%, rgba(0, 0, 0, 0.04) 2px, transparent 2px),
    radial-gradient(circle at 34% 78%, rgba(0, 0, 0, 0.04) 2px, transparent 2px);
  background-size: 90px 90px;
}

.promo-day {
  display: block;
  width: fit-content;
  margin: 0 auto 14px;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.75);
  color: #6b7a72;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.promo-msg {
  position: relative;
  max-width: 84%;
  padding: 10px 14px 8px;
  border-radius: 14px 14px 14px 4px;
  background: #ffffff;
  color: #1f2c26;
  font-family: "Poppins", sans-serif;
  font-size: 14.5px;
  line-height: 1.45;
  letter-spacing: -0.1px;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.13);
}

.promo-msg time {
  display: block;
  margin-top: 3px;
  color: #93a09a;
  font-size: 11px;
  text-align: right;
}

/* The visitor's side: an outgoing bubble that only ever shows the dots.
   flex, not inline-flex — margin-left:auto only pushes a block-level box right. */
.promo-typing {
  display: flex;
  gap: 4px;
  width: fit-content;
  margin: 10px 0 0 auto;
  padding: 13px 15px;
  border-radius: 14px 14px 4px 14px;
  background: #d9fdd3;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.13);
}

.promo-typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7fa886;
  animation: promo-dot 1.2s ease-in-out infinite;
}

.promo-typing i:nth-child(2) {
  animation-delay: 0.18s;
}

.promo-typing i:nth-child(3) {
  animation-delay: 0.36s;
}

/* ── the sequence ── */
.promo-overlay.is-open .promo-day {
  animation: promo-pop 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.12s backwards;
}

.promo-overlay.is-open .promo-msg {
  animation: promo-pop 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.4s backwards;
}

.promo-overlay.is-open .promo-typing {
  animation: promo-pop 0.36s cubic-bezier(0.22, 1, 0.36, 1) 1s backwards;
}

@keyframes promo-pop {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes promo-dot {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }

  30% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

/* ── the ask ── */
.promo-foot {
  padding: 16px 18px 18px;
  background: #f6f4ef;
}

.promo-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2ee06f 0%, #14a94c 100%);
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(20, 169, 76, 0.38);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.22s ease;
}

/* In early and staying: a visitor who has decided should never have to wait for
   the thread to finish playing before they can act. */
.promo-overlay.is-open .promo-cta {
  animation: promo-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.24s backwards;
}

.promo-cta:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 18px 34px rgba(20, 169, 76, 0.5);
}

.promo-cta:active {
  transform: translateY(0) scale(0.99);
}

/* Light sweeping across the button, starting once the thread has settled. */
.promo-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg);
  animation: promo-shine 3.4s ease-in-out 1.6s infinite;
  pointer-events: none;
}

@keyframes promo-shine {

  0%,
  55% {
    left: -60%;
  }

  100% {
    left: 130%;
  }
}

@keyframes promo-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.promo-reply {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
  color: #7c8a83;
  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
  letter-spacing: -0.1px;
}

.promo-later {
  display: block;
  margin: 8px auto 0;
  padding: 5px 10px;
  border: none;
  background: none;
  color: #9aa8a1;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.promo-later:hover {
  color: #0d7a45;
}

.promo-overlay.is-open .promo-reply,
.promo-overlay.is-open .promo-later {
  animation: promo-rise 0.45s ease 0.32s backwards;
}

@media (max-width: 600px) {
  .promo-card {
    border-radius: 20px;
  }

  .promo-thread {
    padding: 14px 14px 16px;
  }

  .promo-msg {
    font-size: 13.5px;
    max-width: 88%;
  }

  .promo-foot {
    padding: 14px 16px 16px;
  }

  .promo-cta {
    height: 54px;
    font-size: 16px;
  }
}

/* With motion turned down the thread is simply already there, dots at rest. */
@media (prefers-reduced-motion: reduce) {
  .promo-card {
    transform: none;
    transition: opacity 0.2s ease;
  }

  .promo-overlay.is-open .promo-day,
  .promo-overlay.is-open .promo-msg,
  .promo-overlay.is-open .promo-typing,
  .promo-overlay.is-open .promo-cta,
  .promo-overlay.is-open .promo-reply,
  .promo-overlay.is-open .promo-later,
  .promo-cta::after,
  .promo-typing i {
    animation: none;
  }
}