/* ============================================================================
   Blitzly landing – Carbon-inspired dark UI (v2)
   - Neutral dark-gray background (not blue)
   - Global grid lives on the page background + fades to darkness with arch
   - Single accent: electric blue
   - Intro sequence: .intro-logo first, then .intro-item (staggered)
   - Drop-in: keeps original selectors so markup doesn't change
   ========================================================================== */

:root {
  /* Surfaces (neutral gray, no blue cast) */
  --bg-root: #0b0d12;        /* page base (dark gray) */
  --bg-elev-1: #0e1118;      /* elevated panels/cards */
  --bg-elev-2: #121623;      /* deeper panels */

  /* Text */
  --text:   #e6e9f2;         /* primary */
  --text-a: #a5adc2;         /* secondary */
  --muted:  #8a92a7;

  /* Accent — single electric blue */
  --accent: #2f6df6;
  --accent-600: #2759c9;
  --accent-300: #6ea0ff;

  /* Back-compat with the original tokens */
  --green-900: var(--accent);
  --green-700: var(--accent-600);
  --panel:     var(--bg-elev-1);
  --white:     #ffffff;
  --yellow:    var(--accent);            /* old “yellow” now routes to blue */
  --bg-gray:   rgba(255,255,255,0.03);
  --bg-light-gray: rgba(255,255,255,0.06);

  --shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  --gap: 5px;

  /* Grid */
  --grid-size: 80px;
  --grid-line: rgba(255,255,255,0.05);
  --grid-line-bold: rgba(255,255,255,0.07);

  /* Focus ring */
  --ring: 0 0 0 2px rgba(47,109,246,.45), 0 0 24px rgba(47,109,246,.35);
  --dbp-bg: #0b0d12;
  --dbp-panel: rgba(15, 18, 26, 0.7);
  --dbp-stroke: rgba(255, 255, 255, 0.08);
  --dbp-frost: rgba(255, 255, 255, 0.05);
  --dbp-text: #e8eefc;
  --dbp-sub: #9fb3d9;
  --dbp-accent: #71c2ff;           /* electric/cyber blue */
  --dbp-scout: #2bd3ff;
  --dbp-outreach: #ff79c6;
  --dbp-branding: #cfd8ff;
  --dbp-legal: #ffd166;
  --dbp-launch: #66f7ff;
  --dbp-radius: 18px;
  --dbp-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}

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


html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* ===========================================================
   PAGE BACKGROUND: global grid + vignette + bottom arch fade
   =========================================================== */
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background: var(--bg-root);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* Grid + fades are fixed to the viewport so they feel “environmental” */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* content sits above (z-index:1 in sections/containers) */
}

/* The grid itself */
body::before {
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
  opacity: .65;
  /* subtle top vignette so text pops on first load */
  mask-image:
    radial-gradient(1400px 600px at 50% 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,.6) 70%, rgba(0,0,0,.2) 85%, rgba(0,0,0,0) 100%);
  -webkit-mask-image:
    radial-gradient(1400px 600px at 50% 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,.6) 70%, rgba(0,0,0,.2) 85%, rgba(0,0,0,0) 100%);
}

/* Bottom “cinema arch” darkness + overall downward fade */
body::after {
  /* two layers: 1) long vertical fade to darkness
                  2) large arch-shaped radial fade at the very bottom */
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 30%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.65) 85%, rgba(0,0,0,.95) 100%),
    radial-gradient(1200px 520px at 50% 120%, rgba(0,0,0,1) 40%, rgba(0,0,0,.85) 65%, rgba(0,0,0,0) 100%);
  mix-blend-mode: normal;
  margin-bottom: -5rem;
}

/* Ensure all layout containers sit above the fixed grid/vignette */
.container, .hero, .ingredients-section, .product-section,
.benefit-section, .future-section, .t-slider, .medicine-area,
.blogs-sectoin, .registration-section, .footer, .site-header {
  position: relative;
  z-index: 1;
}

/* ============================ Intro sequence ============================ */
/* Add .intro-logo to your center Blitzly logo.
   Add .intro-item to hero headline, copy, buttons, etc. */
.intro-logo, .intro-item { opacity: 0; transform: translateY(8px); }
.intro-logo {
  animation: fadeScaleIn .7s cubic-bezier(.2,.7,.2,1) .15s forwards;
  will-change: transform, opacity;
}
.intro-stagger .intro-item {
  animation: fadeUpIn .6s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(.45s + var(--i, 0) * .12s);
  will-change: transform, opacity;
}
.intro-stagger > *:nth-child(1) { --i: 0; }
.intro-stagger > *:nth-child(2) { --i: 1; }
.intro-stagger > *:nth-child(3) { --i: 2; }
.intro-stagger > *:nth-child(4) { --i: 3; }
.intro-stagger > *:nth-child(5) { --i: 4; }
.intro-stagger > *:nth-child(6) { --i: 5; }
.intro-stagger > *:nth-child(7) { --i: 6; }
.intro-stagger > *:nth-child(8) { --i: 7; }

@keyframes fadeScaleIn {
  0%   { opacity: 0; transform: scale(.94); filter: blur(2px); }
  60%  { opacity: 1; transform: scale(1.015); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes fadeUpIn {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-logo, .intro-item { animation: none !important; opacity: 1 !important; transform: none !important; }
}

a { text-decoration: none; }
a:hover, button:hover { cursor: pointer; }
.container { width: 100%; padding: 0rem 1.25rem; }
@media (max-width: 768px)  { .container { padding: 1rem 0; } }
@media (max-width: 1024px) { .container { padding: 1rem 0; } }

/* ============================ Header ============================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0 2rem;
  background: rgba(11,13,18,0.8);
  backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; }
.brand__logo { height: 1.75rem; display: block; }
.main-nav { justify-self: center; display: flex; gap: 2rem; }
.main-nav a { color: var(--text-a); font-weight: 500; padding: .5rem .125rem; }
.main-nav a.is-active { color: var(--accent-300); font-weight: 700; }

.btn,
.header-btn,
.email-form button,
.newsletter-input-wrap button,
.t-nav,
.product-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; line-height: 1; border: 0;
}

.btn {
  background: #fff;
  color: #000;
  font-weight: 800;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  font-size: 1rem;
  box-shadow: var(--ring);
  transition: transform .06s ease, filter .18s ease, box-shadow .18s ease;
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.btn:hover  { filter: brightness(1.05); box-shadow: 0 0 0 2px rgba(255,255,255,.05), var(--ring); }
.btn:active { transform: translateY(1px) scale(.99); }

.header-cta { display: flex; align-items: center; gap: 1rem; justify-self: end; }
.cart { display: inline-flex; align-items: center; gap: .5rem; color: var(--accent-300); }

.header-btn {
  background: var(--accent);
  color: #fff;
  padding: .6rem 1.25rem;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: var(--ring);
  transition: transform .06s ease, filter .18s ease, box-shadow .18s ease;
}
.header-btn:hover  { filter: brightness(1.05); box-shadow: var(--ring); }
.header-btn:active { transform: translateY(1px) scale(.99); }

/* hidden by default (desktop/tablet) */
.hero-cta { display: none; }

/* show only on <= 1025px */
@media (max-width: 1025px){
  .hero-cta{
    display: flex;
    justify-content: center;
    margin-top: 1rem;               /* space under the subtitle */
  }
  /* optional: slightly larger tap target on phones */
  .hero-cta-btn{
    padding: .8rem 1.25rem;         /* keeps your .header-btn look & ring */
    font-size: 1rem;
  }
}


.menu-toggle {
  display: none;
  width: 42px; height: 42px; border-radius: 999px;
  background: white; color: #000; position: relative; padding: 0;
  box-shadow: inset 0 6px 20px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.10);
}
.menu-toggle .icon { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%,-50%) scale(1); }
.menu-toggle .icon--menu  { opacity: 1; }
.menu-toggle .icon--close { opacity: 0; transform: translate(-50%,-50%) scale(.85); }
.site-header.is-open .menu-toggle .icon--menu  { opacity: 0; transform: translate(-50%,-50%) scale(.85); }
.site-header.is-open .menu-toggle .icon--close { opacity: 1; transform: translate(-50%,-50%) scale(1); }

.mobile-nav {
  position: absolute; left: 0; right: 0; top: 100%;
  background: linear-gradient(180deg, rgba(14,17,24,.98), rgba(14,17,24,.88));
  color: var(--text);
  padding: 1rem 1.25rem 1.25rem; display: grid; gap: .875rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
  transition: max-height .28s ease, opacity .25s ease;
}
.mobile-nav a { color: var(--text); font-weight: 600; }
.mobile-nav a.is-active { color: var(--accent-300); }
.site-header.is-open .mobile-nav { max-height: 320px; opacity: 1; pointer-events: auto; }

@media (max-width: 1024px) {
  .header-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  .main-nav { display: none; }
  .header-btn { display: none; }
  .header-btnz { display: inline-flex !important; }
  .menu-toggle { display: flex; align-items: center; justify-content: center; }
}
@media (max-width: 768px) {
  .site-header { padding: 0 1rem; }
  .header-row { display: flex; justify-content: space-between; align-items: center; }
  .main-nav, .header-btn { display: none; }
  .menu-toggle { display: grid; }
  .cart span { font-weight: 600; }
}

#productFloater {
  position: fixed;
  top: 0; left: 0;
  display: none;
  transform: translate3d(-9999px,-9999px,0);
  z-index: 40;            /* must be above hero overlays */
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  pointer-events: none;
  will-change: transform, width, height;
}

/* Only if you already use these names — they’ll still work */
#productFloater.behind { z-index: 2; }
#productFloater.is-blurred-for-graph { filter: blur(1.2px) brightness(.92); }



.line {  width: 12vw !important;  }
/* ============================ Hero ============================ */
/* Let the global background/grid show through the hero */
.hero { margin: auto; width: 98vw; height: 90vh; position: relative; z-index: 1; }

.hero-wrap {
  border-radius: 2rem;
  height: 100%;
  display: flex; align-items: center;
  background: transparent;                 /* <— transparent to expose global grid */
  box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,0.05);
  overflow: hidden;
}

/* Remove any hero-local grid layers from older versions */
.hero-wrap::before,
.hero-wrap::after { content: none !important; }

.first-hero-box { display: flex; flex-direction: column; justify-content: end; width: 20%; height: 100%; }
.promotion-area { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 260px; }
.promotion-card { width: 48%; height: 100%; padding-top: 2rem; }
.promotion-card-wrap {
  height: 100%; display: flex; align-items: center; flex-direction: column; text-align: center; justify-content: space-evenly;
  padding: 1rem; background: rgba(18,22,35,0.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 1rem; border: 1px solid rgba(255,255,255,0.06);
}
.promotion-card-icon { width: 2rem; }
.promoton-card-title { color: var(--white); font-size: 1rem; font-weight: 700; line-height: 150%; margin: 0; }
.promotion-card-info-text { color: var(--text-a); font-size: .75rem; margin: 0; }
.promoton-card-btn { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid rgba(255,255,255,0.7); background: none; display: flex; justify-content: center; align-items: center; margin: 0 auto; }

.promotion-img-wrap { width: 48%; height: 100%; padding-bottom: 2rem; }
.promotion-img { width: 100%; height: 100%; border-radius: 1rem; object-fit: cover; }

.second-hero-box { width: 60%; height: 100%; display: flex; align-items: center; justify-content: space-evenly; flex-direction: column; }
.banner-title-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; }
.banner-sub-title-wrap { display: flex; justify-content: right; width: 100%; margin: 0; }

.banner-sub-title { margin: 0; font-size: 2.25rem; font-weight: 600; line-height: 130%; color: var(--text-a); }
.banner-title { margin: 0; color: var(--text); font-size: 3.5rem; font-weight: 800; line-height: 100%; letter-spacing: -0.02em; }
.banner-title span { margin: 0; font-style: italic; font-weight: 300; color: var(--text-a); }

.medicine-box { width: 250px; height: 300px; }
.third-hero-box { width: 20%; height: 100%; display: flex; flex-direction: column; justify-content: end; }
.banner-deteils-title { color: var(--text); font-size: 1rem; margin-bottom: .375rem; font-weight: 700; }
.banner-details-text { color: var(--muted); font-weight: 400; line-height: 130%; }

/* Responsive bits preserved */
@media (max-width: 1024px) {
  .hero { height: 52vh; padding: 1rem; }
  #heroProduct { display: none; }
  .hero-wrap { padding: 1.25rem; flex-direction: column-reverse; }
  .first-hero-box { width: 100%; height: 160px; display: block; }
  .promotion-area { gap: 1rem; width: 100%; height: 100%; }
  .promotion-card { width: 100%; padding-top: 0; }
  .promotion-img-wrap { width: 100%; padding-bottom: 0; }
  .promotion-img { object-position: 50% 10%; }
  .second-hero-box { margin-bottom: 5rem; width: 100%; height: auto; justify-content: flex-start; gap: 1.2rem; }
  .banner-sub-title { font-size: 1.375rem; }
  .banner-title { font-size: clamp(3.8rem, 4vw, 6rem); }
  .third-hero-box { display: none; }
  .banner-details-wrap { text-align: right; }
  .banner-deteils-title { font-size: .95rem; }
  .banner-details-text { font-size: .85rem; max-width: 40ch; }
}
@media (max-width: 768px) {
  .hero-wrap { border-radius: 1rem; }
  .banner-sub-title { font-size: 1.125rem; }
  .banner-title { font-size: clamp(2rem, 9vw, 1.6rem); }
  .second-hero-box { gap: .75rem; }
  .medicine-box { width: clamp(180px, 44vw, 260px); height: auto; margin-top: .25rem; }
  .first-hero-box { width: 100%; height: 120px; }
  .promotion-area { gap: .75rem; }
  .promotion-card { width: 48%; }
  .promotion-img-wrap { width: 52%; }
  .third-hero-box { display: none; }
}

/* ============================ Ingredient ============================ */
.ingredients-section {
  height: 100vh;
  display: flex; align-items: center; justify-content: space-between; flex-direction: column;
  position: relative; z-index: 1;
  background: var(--bg-gray);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ingredients-section>* { position: relative; z-index: 1; }
.ingredients-section::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity .25s ease, backdrop-filter .25s ease, -webkit-backdrop-filter .25s ease;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  backdrop-filter: blur(0px);
}
.ingredients-section.is-blurred::before { opacity: 1; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

.hero-ingredients { max-width: 1200px; margin: 0 auto; padding: 3.5rem 2.25rem; text-align: center; }
.headline-lead { font-weight: 900; font-size: 2.5rem; color: var(--text); margin-bottom: 1rem; }
.headline-sub  { font-weight: 700; font-size: 1.5rem; color: var(--text-a); }

.inline-img { display: inline-block; width: 4.5rem; height: 3rem; object-fit: cover; border-radius: 9999px; vertical-align: middle; margin: -6px 10px 0 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.25); }
.ingredients-box-wrap { display: flex; align-items: center; justify-content: space-between; flex-direction: column; }
.ingredients-rows { display: flex; align-items: center; justify-content: space-between; width: 50vw; margin-bottom: 1.5rem; }
.ingredients-img-wrap { width: 3.5rem; }
.ingredients-img { width: 100%; }

@media (max-width: 1024px) { .ingredients-section { height: auto; } .ingredients-rows { width: 95vw; } .inline-img { width: 4rem; height: 2.75rem; } }
@media (max-width: 768px)  { .headline-lead { font-size: 1.25rem; } .headline-sub { font-size: 1.125rem; } .inline-img { width: 2rem; height: 1.25rem; margin: -4px 8px 0 8px; } .ingredients-rows { width: 90vw; } }

/* ============================ Product ============================ */
.product-section { position: relative; padding-top: 7rem; padding-bottom: 7rem; isolation: isolate; overflow: hidden; z-index: 1; }
.product-section::before {
  content: ""; position: absolute; left: 50%; bottom: -2rem; transform: translateX(-50%);
  width: 100vw; height: clamp(360px, 48vw, 560px);
  background: url("/_static/landing/images/product-background-image.png") center bottom / clamp(900px, 120vw, 1600px) no-repeat;
  filter: brightness(.65) contrast(1.05); opacity: .28; z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
}
.product-container { max-width: 75rem; margin-inline: auto; }
.product-title-wrapper { text-align: center; margin-bottom: 3.125rem; }
.product-title { color: var(--text); font-size: 8.6vw; font-weight: 900; line-height: 110%; }
.section-title-italic { font-style: italic; font-weight: 400; display: inline-block; color: var(--accent-300); }

.products-heading-bar { background-color: rgba(255,255,255,0.05); border-radius: 6.25rem; margin-bottom: 1.5rem; padding: 1rem 2.75rem; border: 1px solid rgba(255,255,255,0.06); }
.products-heading-bar-content { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
.products-heading-bar-text { color: var(--text-a); font-size: 1rem; line-height: 150%; }

.view-btn { display: inline-block; max-width: 100%; }
.view-btn-flex { display: flex; align-items: center; gap: .625rem; }
.view-button-text { color: var(--text); font-size: 1rem; font-weight: 600; }
.view-button-icon-wrap { background-color: var(--accent); border-radius: 50%; display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; box-shadow: var(--ring); }
.view-button-arrow { max-width: 0.75rem; filter: drop-shadow(0 0 4px rgba(0,0,0,.6)); }

.product-grid-wrap { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 1.5rem; grid-row-gap: 1.5rem; }
.single-product-wrap {
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  background-color: rgba(18,22,35,.66); border-radius: 1.5rem; padding: 3.5rem;
  border: 1px solid rgba(255,255,255,0.06); box-shadow: var(--ring);
}
.product-content-wrap { text-align: center; margin-bottom: 1.25rem; }
.product-details-wrap { display: flex; flex-direction: column; justify-content: center; text-align: center; margin-bottom: 1.25rem; }
.product-name-wrap { margin-bottom: .313rem; }
.product-info-text { color: var(--muted); font-size: .85rem; margin-bottom: .75rem; }
.product-name { color: var(--text); font-size: 1.125rem; font-weight: 700; }

.product-button {
  background-color: var(--accent); color: #fff; border-radius: 25rem; padding: .5rem 1.125rem;
  min-width: 6rem; font-weight: 800; box-shadow: var(--ring);
  transition: transform .06s ease, filter .18s ease, box-shadow .18s ease;
}
.product-button:hover  { filter: brightness(1.05); box-shadow: var(--ring); }
.product-button:active { transform: translateY(1px) scale(.99); }
.product-button-text { color: #fff; font-size: .875rem; font-weight: 800; }

.product-image-wrap { display: flex; justify-content: center; height: 19rem; }
.product-image { max-width: 16.188rem; max-height: 100%; filter: drop-shadow(0 20px 40px rgba(0,0,0,.55)); }

.hidden { opacity: 0; }

@media (max-width: 1024px) { .product-section { margin-top: 4rem; padding: 3rem; } .product-grid-wrap { grid-template-columns: repeat(2, 1fr); } .hidden { opacity: 100%; } }
@media (max-width: 768px)  { .product-section { padding: 3rem 1rem; } .product-grid-wrap { grid-template-columns: 1fr; } .product-title {font-size: 15vw} .single-product-wrap { padding: 1rem; } .products-heading-bar-content { flex-flow: column; row-gap: .5rem; } .product-title { margin-bottom: 2rem; } .newsletter-input-wrap input {font-size: .8rem !important;} .newsletter-input-wrap button {padding: 05px 10px !important; font-size: 0.9rem !important;} }

/* allow bottom badge to anchor inside the card without changing height */
.single-product-wrap { position: relative; }

/* coin badge */
.product-coin{position:absolute;left:50%;bottom:1rem;white-space:nowrap;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .75rem;border-radius:999px;color:var(--text);font-weight:700;font-size:.95rem;line-height:1;pointer-events:none;}
.product-coin img.coin-ic{height:50px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));}

/* ============================ Agents (Radial + Mobile Rail) ============================ */
.benefit-section { padding-bottom: 10rem; margin-top: 10rem; }
.ring-section { position: relative; isolation: isolate; margin: 0 auto; padding: clamp(72px, 10vw, 120px) 16px; min-height: 640px; --radius: clamp(120px, 32vw, 340px); }
.ring-leaves { position: absolute; inset: 0; margin: auto; width: min(800px, 75vw); height: auto; object-fit: contain; filter: drop-shadow(0 30px 50px rgba(0,0,0,.35)); z-index: -1; pointer-events: none; opacity: .75; }
.ring-stage { position: relative; width: min(520px, 60vw); aspect-ratio: 1 / 1; margin: 0 auto; }
.ring-rotating { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: spin 18s linear infinite; filter: saturate(0) brightness(1.22) contrast(1.25) drop-shadow(0 0 18px #fff) drop-shadow(0 0 56px rgba(255,255,255,.16)); opacity: .92; }
.ring-product { position: absolute; inset: 12% 12% 12% 12%; width: 60%; margin: auto; object-fit: contain; z-index: 2; }
.ring-badge { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 16px; padding: 10px 18px 10px 10px; background: linear-gradient(90deg, rgba(18,22,35,.65), rgba(18,22,35,.35)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 4.25rem; box-shadow: var(--shadow, 0 4px 16px rgba(0,0,0,.35)); white-space: nowrap; border: 1px solid rgba(255,255,255,0.06); translate: 0 0; transition: translate 260ms cubic-bezier(.2,.8,.2,1), filter 220ms ease; will-change: translate; z-index: 2; touch-action: manipulation; --angle: 0deg; transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle))); }
.ring-badge__icon { flex: 0 0 auto; width: 4rem; height: 4rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center; box-shadow: 0 0 20px rgb(255 255 255 / 60%) }
.ring-badge__icon img { width: 90%; height: 90%; display: block; object-fit: cover; }
.ring-badge__text small { display: block; font-size: 0.75rem; color: var(--muted); line-height: 1.2; }
.ring-badge__text strong { display: block; font-size: clamp(16px, 2vw, 20px); line-height: 1.2; font-weight: 600; color: var(--text); }
.ring-badge--tr { --angle: 45deg; }
.ring-badge--br { --angle: 135deg; }
.ring-badge--bc { --angle: 180deg; }
.ring-badge--bl { --angle: 225deg; }
.ring-badge--tl { --angle: 315deg; }
.ring-badge.is-open { filter: brightness(1.05); }
.arc-pad { position: absolute; inset: auto auto 100% 0; transform: translateY(-8px); min-width: max(220px, 22ch); max-width: min(66vw, 420px); padding: 12px 14px; font-size: 14px; line-height: 1.35; color: #fff; background: rgba(12,14,22,.9); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); white-space: pre-line; opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 200ms ease; z-index: 5; }
.arc-pad.is-open { opacity: 1; transform: translateY(-12px); pointer-events: auto; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1024px) { .benefit-section { margin-top: 5rem; } .ring-section { min-height: 720px; } }
/* ===== Mobile: stack badges under the ring (no rail, no absolute/polar) ===== */
@media (max-width: 600px) {
  .ring-section { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 24px; --radius: 0; }
  .ring-stage { width: min(82vw, 420px); margin: 0 0 8px 0; order: 0; }
  .ring-badge { position: static; transform: none; translate: 0 0; width: min(92vw, 520px); max-width: 520px; margin: 0; padding: 10px 14px 10px 10px; gap: 12px; z-index: 1; }
  .ring-badge.is-open { translate: 0 0 !important; filter: none; }
  .ring-badge--tl, .ring-badge--tr, .ring-badge--bl, .ring-badge--bc, .ring-badge--br { --angle: 0deg; }
  .arc-pad { display: none; } /* optional: hide hover pads on touch */
}

/* ===== Mobile: hint + straight-down pads ===== */
@media (max-width: 600px) {
  /* Make badges a vertical list (you already did position:static/transform:none elsewhere) */
  .ring-badge { position: static; transform: none; translate: 0 0; }

  /* TAP HINT (no HTML change needed) */
  .ring-badge::after { content: ""; flex: 0 0 auto; width: 20px; height: 20px; margin-left: auto; background: url("/_static/landing/images/tap-hint.svg") no-repeat center / contain; opacity: .85; filter: drop-shadow(0 0 6px rgba(0,0,0,.35)); }
  .ring-badge.is-open::after { opacity: .35; }

  /* Reset any badge-specific arc-pad vectors you set earlier */
  .ring-badge--tl .arc-pad,
  .ring-badge--tr .arc-pad,
  .ring-badge--bl .arc-pad,
  .ring-badge--br .arc-pad,
  .ring-badge--bc .arc-pad { --pad-tx: 0 !important; --pad-ty: 12px !important; }

  /* Anchor pad below the badge and ignore polar transform */
  .arc-pad { left: 50% !important; top: 100% !important; transform: translate(-50%, 8px) !important; max-width: min(92vw, 520px) !important; }

  /* Remove the radial “seed” effect so it doesn’t overlap */
  .arc-pad::before { content: none !important; }
}

@media (max-width:600px){ .arc-pad{transform:translate(calc(-50% + 2px),12px)!important;} .arc-pad.is-open{transform:translate(calc(-50% + 35px),16px)!important;} }
@media (max-width:600px){ .arc-pad{transform:translate(calc(-50% + var(--pad-tx,0px)),12px)!important;} .ring-badge--tr .arc-pad{--pad-tx:2px!important;} }

/* Mobile override: ensure we beat the rail/background layers */
@media (max-width: 600px) {
  .ring-section::after { z-index: 19; }
  .ring-rail { z-index: 21; }
  .ring-badge { z-index: 22; }
  .ring-badge.is-open { z-index: 29; }
  .arc-pad { z-index: 32; }
}
/* ============================ Manifesto ============================ */
.future-section { padding: clamp(56px, 7vw, 110px) 1rem; }

/* Wider, darker, lower-contrast panel */
.mf-wrap{
  max-width: 1280px;                 /* wider */
  margin: 0 auto;
  padding: clamp(26px, 3.6vw, 40px);
  border-radius: 18px;

  /* darker glass with milder gradients */
  background:
    radial-gradient(1200px 520px at 50% 120%, rgba(255,255,255,.025), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 18px 48px rgba(0,0,0,.40);   /* slightly softer */
  position: relative;
  overflow: clip;
}

/* Subtle perimeter sheen (less neon) */
.mf-wrap::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:18px; padding:1px;
  background:
    linear-gradient(120deg,
      rgba(47,109,246,.28),
      rgba(255,255,255,.06) 35%,
      rgba(47,109,246,.18) 70%,
      transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}

/* Header */
.mf-head{ text-align:center; margin-bottom: clamp(24px, 3.4vw, 40px); }
.mf-eyebrow{
  display:inline-block;
  font-weight: 900;
  letter-spacing:.12em;
  text-transform:uppercase;
  /* dim the accent gradient */
  background: linear-gradient(217deg, color-mix(in srgb, #fff 70%, #ffffff), #dbe4ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.8;
}
.mf-title{
  font-weight: 900;
  font-size: clamp(2rem, 5.4vw, 3rem);
  line-height: 1.05;
  margin-top: .3rem;
  color: var(--text);
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);     /* tiny lift, not bright */
}
.mf-sub{
  color: color-mix(in srgb, var(--text-a) 88%, #ffffff 12%);
  font-weight: 700;
  opacity:.9;
  margin-top:.4rem;
}

/* Body layout: give text a bit more real estate */
.mf-body{
  display: grid;
  grid-template-columns: 1.15fr .85fr;      /* wider left column */
  gap: clamp(18px, 2.6vw, 34px);
  align-items:start;
}
.mf-col{ display: grid; gap: 1rem; }

.mf-lead{
  font-size: clamp(1rem, 1.2rem + .1vw, 1.15rem);
  color: color-mix(in srgb, var(--text) 92%, #aeb6c8 8%); /* slightly toned text */
  font-weight: 700;
}

/* Paragraphs inherit toned color */
#manifesto .mf-col p{
  color: color-mix(in srgb, var(--text) 90%, #aeb6c8 10%);
}

/* Quote: darker card, softer border */
.mf-quote{
  position: relative;
  margin: .4rem 0;
  padding: .9rem 1rem 1rem 3rem;
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.055);
  color: color-mix(in srgb, var(--text) 92%, #cbd3e4 8%);
  font-weight: 800;
  line-height: 1.35;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.mf-quote-mark{
  position: absolute;
  left: 12px; top: 4px;
  font-size: 2rem; line-height:1;
  color: color-mix(in srgb, var(--accent) 70%, #9fb3d9 30%);
  filter: drop-shadow(0 0 8px rgba(47,109,246,.28));
}

/* Principles: deeper background, remove strong glow */
.mf-principles{
  list-style:none; display:grid; gap:.6rem; padding:0; margin:0;
}
.mf-principles li{
  display:grid; grid-template-columns: 16px 1fr; gap:.55rem; align-items:start;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px;
  padding: .55rem .7rem;
  color: color-mix(in srgb, var(--text) 90%, #b9c2d5 10%);
  font-weight: 700;
}
.mf-dot{
  width: 8px; height: 8px; margin-top:.34rem; border-radius:50%;
  background: color-mix(in srgb, var(--accent) 65%, #cdd7ff 35%);
  box-shadow: 0 0 10px rgba(47,109,246,.25); /* softer */
}

/* Commitment card: darker & quieter */
.mf-card{
  margin-top:.4rem;
  border-radius: 12px;
  background: linear-gradient(180deg, rgb(34 38 47), rgb(17 18 18));
  border: 1px solid rgba(255,255,255,.055);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: .9rem .85rem .95rem;
  box-shadow: 0 14px 34px rgba(0,0,0,.38);
}
.mf-card-title{
  margin-bottom:.3rem;
  font-size: 1rem;
  font-weight: 900;
  color: color-mix(in srgb, var(--text) 94%, #cbd3e4 6%);
}
.mf-card-text{ color: color-mix(in srgb, var(--text-a) 90%, #c9d3ea 10%); }

.mf-sign{
  display:flex; align-items:center; gap:.55rem; margin-top:.7rem;
}
.mf-sign-mark{
  width:26px; height:26px; border-radius:8px;
  background: color-mix(in srgb, #fff 80%, #949494 20%);
  padding:6px; object-fit:contain;
  box-shadow: 0 0 14px rgba(47,109,246,.22);
}
.mf-sign-text strong{
  color: color-mix(in srgb, var(--text) 95%, #dbe2f1 5%);
  font-weight: 900; display:block;
}
.mf-sign-text small{ color: color-mix(in srgb, var(--muted) 85%, #b2bbcf 15%); display:block; margin-top:-2px; }

/* CTA spacing */
.mf-cta{ display:grid; place-items:center; margin-top: clamp(18px, 3.6vw, 30px); }

/* Keep your intro-stagger but slightly subtler */
.mf-wrap .intro-item{
  opacity:0; transform: translateY(6px);
  animation: fadeUpIn .55s cubic-bezier(.2,.7,.2,1) .12s forwards;
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Responsive */
@media (max-width: 1180px){
  .mf-body { grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .mf-wrap{ padding: .9rem; border-radius: 14px; }
  .mf-title{ font-size: clamp(1.8rem, 7.4vw, 2.3rem); }
  .mf-quote{ padding-left: 2.3rem; }
}

/* ============================ Testimonials ============================ */

.t-section {
  padding: 80px 16px 120px;
  position: relative;
}

.t-inner {
  max-width: 960px;
  margin: 0 auto;
}

/* Center the hero-style heading */
.t-header {
  text-align: center;
}

/* Card stack container */
.t-stack {
  position: relative;
  margin: 56px auto 0;
  max-width: 760px;
  height: 230px; /* enough height for the stack & animation */
}

/* Base card style */
.t-card {
  border-radius: 16px;
  background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.05), transparent 40%),
    rgba(10, 12, 20, 0.96);
  padding: 24px 28px 26px;
  text-align: left;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.9),
    0 0 40px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Rotating cards */
.t-card-main {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  transform: translate(-50%, 18px) scale(0.985);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.5s ease,
    opacity 0.5s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
  z-index: 1;
}

/* Current visible card */
.t-card-main.is-active {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
  z-index: 3;
}

/* Hover on active: subtle lift + glow */
.t-card-main.is-active:hover {
  transform: translate(-50%, -4px) scale(1.015);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.95),
    0 0 60px rgba(255, 255, 255, 0.61);
  border-color: rgba(165, 165, 165, 0.9);
  background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.07), transparent 42%),
    rgba(12, 14, 24, 0.98);
}

/* Next card already visible underneath */
.t-card-main.is-next {
  opacity: 0.6;
  transform: translate(-50%, 22px) scale(0.985);
  filter: blur(0.1px);
  z-index: 2;
}

/* Previous card fading up and out */
.t-card-main.is-previous {
  opacity: 0;
  transform: translate(-50%, -32px) scale(0.99);
  z-index: 1;
}

/* Card header: avatar + name */
.t-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

/* Simple avatar with initial – no external image needed */
.t-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 0%, #ffffff, #686868 35%, #ffffff 75%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: #050611;
  flex-shrink: 0;
}

.t-avatar-initial {
  transform: translateY(1px);
}

.t-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.t-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.t-handle {
  font-size: 0.8rem;
  opacity: 0.7;
}

/* Testimonial text */
.t-text {
  margin: 0;
  margin-top: 4px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(236, 241, 255, 0.9);
}

/* Subtle background texture behind cards (optional) */
.t-section::before {
  content: "";
  position: absolute;
  inset: 0;
  margin-top: 60px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.07), transparent 55%),
    radial-gradient(circle at 10% 80%, rgba(255, 255, 255, 0.02), transparent 55%),
    radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.02), transparent 55%);
  opacity: 0.4;
  pointer-events: none;
  mix-blend-mode: soft-light;
  z-index: -1;
}

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

}

/* ============================ Blog ============================ */
.blogs-sectoin { padding-top: 10vw; }
.blog-grid-wrap { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem 5rem; }
.blog-img { width: 100%; border-radius: 1rem; margin-bottom: 2rem; display: block; overflow: hidden; }
.blog-post-title { color: var(--text); font-size: 1.25rem; font-weight: 700; line-height: 120%; }
.post-author-wrapper { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; gap: .75rem; }
.post-author-wrap { display: flex; align-items: center; gap: 1rem; }
.post-author-profile { border-radius: 50%; width: 2rem; height: 2rem; }
.post-author-info-wrap { text-align: left; }
.post-author-name { color: var(--text); font-size: .9rem; font-weight: 700; }
.post-author-designation { color: var(--muted); font-size: .8rem; }
.post-time-wrap { display: flex; align-items: center; gap: .625rem; }
.post-time-icon { max-width: 100%; display: inline-block; }
.post-time { color: var(--accent-300); font-size: .8rem; font-weight: 700; }
.single-btn-wrap { display: flex; justify-content: center; align-items: center; margin-top: 3.75rem; }

@media (max-width: 1024px) { .blogs-sectoin { padding: 0 2rem; margin: 5rem 0; } .blog-grid-wrap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .blogs-sectoin { margin-top: 5rem; padding: 0 1rem; } .blog-grid-wrap { grid-template-columns: 1fr; margin-top: 3rem; } }

/* ============================ CTA ============================ */
.registration-section { height: 40vh; }
.registration-wrapper {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.registration-info-wrap { max-width: 40rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.registration-title { color: var(--text); font-size: 3rem; margin-bottom: 4rem; font-weight: 900; line-height: 125%; }

.email-form {
  display: flex; align-items: center; background: rgba(0,0,0,0.35);
  border-radius: 3rem; padding: .375rem; width: fit-content; margin-top: 50px;
  border: 1px solid rgba(255,255,255,0.06); box-shadow: var(--shadow);
}
.email-form input { border: none; outline: none; padding: 10px 15px; background: transparent; color: var(--white); flex: 1; }
.email-form input::placeholder { color: rgba(255,255,255,0.75); }
.email-form button {
  padding: .6125rem 1.5rem; border-radius: 3rem; background: var(--accent);
  color: #fff; font-size: 1rem; font-weight: 900; cursor: pointer;
  transition: transform .06s ease, filter .18s ease, box-shadow .18s ease;
  box-shadow: var(--ring);
}
.email-form button:hover  { filter: brightness(1.05); box-shadow: var(--ring); }
.email-form button:active { transform: translateY(1px) scale(.99); }

@media (max-width: 1024px) { .registration-section { height: 50vh; padding: 2rem; } }
@media (max-width: 768px)  { .registration-section { height: 40vh; padding: 2rem 1rem; } .registration-title { font-size: 1.75rem; margin-bottom: 1rem; } .registration-info-wrap { padding: 0 1rem; } .email-form { margin-top: 0; width: 100%; } }

/* ============================ Footer ============================ */
/* ============================ Minimal Arc Footer ============================ */
/* ================== FOOTER LAYOUT ================== */
.lf-footer {
  position: relative;
  padding: 220px 15rem 80px; /* taller + a bit more bottom */
  color: #f5f5ff;
  overflow: visible;
}

.lf-footer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 48px; /* was 72px */
}


/* top row */

.lf-footer-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
}

.lf-footer-copy {
  max-width: 520px;
}

.lf-footer-eyebrow {
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.85rem;
}

.lf-footer-title {
  font-size: 5rem;
  line-height: 1.1;
  font-weight: 600;
  margin: 0;
}

.lf-footer-tag img {
  margin-top: 0.9rem;
  height: 81px;
  width: auto;
  display: block;
  opacity: 0.9;
}

.lf-footer-cta {
  padding-inline: 2.75rem;
  height: 3rem;
  border-radius: 999px;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* bottom row */

/* Bottom bar layout */
.lf-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.75rem;
  color: rgba(218, 220, 224, 0.72);
}

/* Brand on the left */
.lf-footer-brand {
  flex: 0 0 auto;
}

/* Meta in the middle */
.lf-footer-meta {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
}

.lf-footer-link {
  color: inherit;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 160ms ease, color 160ms ease;
}

.lf-footer-link:hover {
  opacity: 1;
  color: rgba(255, 255, 255, 0.95);
}

/* Socials on the right */
.lf-footer-socials {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* Icon base style */
.lf-footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  opacity: 0.55;
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    filter 160ms ease;
}

.lf-footer-social svg {
  width: 100%;
  height: 100%;
  fill: #d9d9d9;
}

/* Hover brighten + tiny lift */
.lf-footer-social:hover {
  opacity: 1;
  transform: translateY(-1px);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.38));
}

/* Mobile layout */
@media (max-width: 768px) {
  .lf-footer-bottom {
    align-items: center;
    gap: 1.2rem;
  }

  .lf-footer-meta {
    justify-content: center;
  }

  .lf-footer-socials {
    margin-top: 0.25rem;
  }
}

/* ================== CANVAS BACKGROUND ================== */

.lf-footer-canvas {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 52rem; /* more vertical room for the dome */
  pointer-events: none;
  z-index: 0;
}


#footerArc {
  width: 100%;
  height: 100%;
  display: block;
}

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

@media (max-width: 800px) {
  .lf-footer {
      padding: 170px 20px 48px;
      overflow: hidden;
  }

  .lf-footer-tag img {
    height: 40px;
  }

  .lf-footer-main {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 2rem;
  }

  .lf-footer-title {
    font-size: 2rem;
  }


  .t-text {
    font-size: 0.7rem;
  }
}


.lf-footer-canvas {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45rem;
  pointer-events: none;
  z-index: 0;
}

#footerArc {
  width: 100%;
  height: 100%;
  display: block;
}

/* ===== Sector fan-out textbox ===== */

/* IMPORTANT FIX 1: remove old transform override that broke BC centering.
   (If it existed in your sheet, it’s now gone.) */

/* The badge itself gets a mild highlight on open */
.ring-badge.is-open { filter: brightness(1.06); }





/* Arc pad: anchored to badge center; spawns from a fixed side per badge */
.arc-pad {
  position: absolute;
  z-index: 20;

  pointer-events: auto;
  user-select: text;
  caret-color: transparent;

  /* anchor on badge center */
  transform: translate3d(-50%, -50%, 0);
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), opacity 140ms ease-out, filter 200ms ease-out;
  opacity: 0;
  filter: blur(6px) saturate(0.95);

  display: inline-block;
  max-width: 400px; min-width: 200px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(18,22,35,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 34px rgba(0,0,0,.40);
  color: var(--text, #fff);
  font: 500 14px/1.35 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  white-space: normal; word-break: break-word;

  /* FIX 2: default vectors (overridden per badge to lock direction) */
  --pad-tx: 0px;
  --pad-ty: -120px;

  /* “non-editable” behavior */
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  caret-color: transparent;
  cursor: default;
}

.arc-pad.is-open {
  opacity: 1;
  transform: translate3d(calc(-50% + var(--pad-tx)), calc(-50% + var(--pad-ty)), 0);
  filter: blur(0px) saturate(1);
  
}

/* Tiny ring “seed” burst */
.arc-pad::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 10px;
  border-radius: 999px;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  background: radial-gradient(closest-side, rgba(255,255,255,.65), rgba(255,255,255,0.2) 60%, transparent 70%);
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease-out;
  content: none !important;
}
.arc-pad.is-open::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(2.6);
}

/* Obvious hover cue */
.ring-badge:hover .ring-badge__icon {
  box-shadow: 0 0 26px rgba(47,109,246,.75);
  filter: brightness(1.05);
}

/* Stacking */
.ring-stage { z-index: 1; }

/* ========= Badge nudge along an arc (translate-only, no transform conflicts) ========= */
.ring-badge--tl.is-open { translate: 25px 17px; }
.ring-badge--tr.is-open { translate:  -21px 17px; }
.ring-badge--bc.is-open { translate:   0px  -19px; }
.ring-badge--bl.is-open { translate: 19px  -17px; }
.ring-badge--br.is-open { translate:  -19px  -17px; }

/* FIX 3: lock arc-pad direction per badge (no “last hover” bleed) */
.ring-badge--tl .arc-pad { --pad-tx: -160px; --pad-ty:  -80px; }
.ring-badge--tr .arc-pad { --pad-tx:  160px; --pad-ty:  -80px; }
.ring-badge--bl .arc-pad { --pad-tx: -160px; --pad-ty:   80px; }
.ring-badge--br .arc-pad { --pad-tx:  160px; --pad-ty:   80px; }
.ring-badge--bc .arc-pad { --pad-tx:    0px; --pad-ty:  120px; }

/* Mobile: hide badges as before */
@media (max-width: 768px)  {
  .benefit-section { padding: 0; height: 65vh; }
  .ring-stage { margin-bottom: 22px; }
  .product-title-wrapper { margin-bottom: 0; }
}
@media (max-width: 768px)  {
  .benefit-section { padding-bottom: 66rem; }
  }
/* Anchor the pad to the badge center now that it lives inside the badge */
.arc-pad {
  position: absolute;
  left: 50%;
  top: 50%;
  /* existing transform in your file is fine; keep the translate + var offsets */
  transform: translate3d(-50%, -50%, 0);
}

/* Open state applies the offset; you already had a rule like this: */
.arc-pad.is-open {
  transform: translate3d(calc(-50% + var(--pad-tx)), calc(-50% + var(--pad-ty)), 0);
  height: 5rem;
}
/* ===========================
   SIGNAL GRAPH – iPhone video
   =========================== */

.signal-graph {
  position: relative;
  padding: 6rem 0 7rem;
  overflow: hidden;
}

.signal-graph .sg-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2.5rem;
}

.signal-graph .sg-title {
  font-size: clamp(1.9rem, 3vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f6f7fb;
}

.signal-graph .sg-sub {
  margin-top: 0.6rem;
  font-size: 0.96rem;
  color: rgba(195, 201, 215, 0.86);
}

/* main wrapper for the video card */
.signal-graph .sg-wrap--video {
  position: relative;
  max-width: 400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (max-width: 768px)  {
  .signal-graph .sg-wrap--video {
  
  }

  }

/* soft halo behind the video frame */
.signal-graph .sg-videoShell {
  position: absolute;
  inset: 0;
  border-radius: 42px;
  background: radial-gradient(
    circle at 20% 50%,
    rgba(255, 255, 255, 0.12) 0,
    rgba(255, 255, 255, 0.02) 26%,
    transparent 70%
  );
  filter: blur(28px);
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}

/* actual video “card” sitting on top of the halo */
.signal-graph .sg-videoFrame {
  position: relative;
  z-index: 5;
  border-radius: 4rem;
  overflow: visible;
  background: radial-gradient(
    circle at 50% 0%,
    #171923 0,
    #050608 60%,
    #020306 100%
  );
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* <video> element itself */
.signal-graph .sg-video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 17;   /* portrait iPhone export */
  /* if you re-export landscape, swap to: aspect-ratio: 16 / 9; */
  border-radius: 4rem;
}

/* Caption pill under the video */
.signal-graph .sg-caption {
  position: relative;
  z-index: 1;
  margin: 1.6rem auto 0;
  max-width: 720px;
  font-size: 0.9rem;
  color: rgba(200, 205, 220, 0.86);
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: radial-gradient(
    circle at 50% 0%,
    rgba(255, 255, 255, 0.06) 0,
    rgba(5, 6, 8, 0.94) 50%,
    rgba(5, 6, 8, 0.98) 100%
  );
}

/* --------- Mobile tweaks --------- */

@media (max-width: 768px) {
  .signal-graph {
    padding: 4.5rem 0 4.5rem;
  }

  .signal-graph .sg-wrap--video {
    padding-inline: 1rem;
  }


  .signal-graph .sg-caption {
    font-size: 0.82rem;
    padding-inline: 1rem;
  }
}


/* ===========================
   SIGNAL GRAPH – sound toggle
   =========================== */

.signal-graph .sg-audioToggle {
  position: absolute;
  /* move it ON TOP of the phone, right corner */
  top: 1.9rem;
  right: 1.1rem;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;

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

  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 220ms ease-out,
    transform 220ms ease-out;
}

/* show when ready */
.signal-graph .sg-audioToggle.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* size of the SVG */
.signal-graph .sg-audioToggle img {
  width: 26px;
  height: 26px;
}

/* (optional) tweak on mobile if you want it a bit smaller */
@media (max-width: 768px) {
  .signal-graph .sg-audioToggle img {
    width: 22px;
    height: 22px;}

  .product-title-agents-img {
      height: 5rem !important;

}
}

/* tiny hover love, no extra decoration */
.signal-graph .sg-audioToggle:hover img {
  transform: scale(1.06);
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.9));
}


/* ===== shell ===== */


/* === Phone stack overrides (single column, reset fixed rows) === */
@media (max-width: 720px){
  /* board stacks to 1 column */
  #apx-dashboard .apx-surface{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* every card spans the full row and loses hard-coded grid-row */
  #apx-dashboard .apx-agent{
    grid-column: 1 / -1 !important;
    grid-row: auto !important;        /* <-- critical: cancels .apx-*- {grid-row:1/2} */
  }

  /* Branding had a fixed width on desktop; release it on phones */
  #apx-dashboard .apx-agent.apx-brand{
    width: auto !important;
  }

  /* Inside-card two-column grids collapse to one column on phones */
  #apx-dashboard #outreach-tiles .viz-grid--two,
  #apx-dashboard #branding-tiles .viz-grid--two{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
}



/* ===== shell ===== */
.apx-section{position:relative;padding:clamp(64px,8vw,120px) 16px}
.apx-stage{position:relative;width:min(1200px,96vw);margin:0 auto}
.apx-desktop{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08)}
.apx-desktop-glow{position:absolute;inset:-10%;pointer-events:none;z-index:0;background:radial-gradient(1000px 420px at 50% 100%,rgba(47,109,246,.22),transparent 60%),radial-gradient(900px 360px at 0% 100%,rgba(255,255,255,.08),transparent 65%),radial-gradient(900px 360px at 100% 100%,rgba(255,255,255,.08),transparent 65%);filter:blur(14px)}
.apx-wallpaper{position:absolute;inset:0;z-index:1;background:url('/_static/landing/images/wallpaper-bright.jpg') center/cover no-repeat}

/* status pill + dock */
.apx-statusbar{position:absolute;left:50%;top:10px;transform:translateX(-50%);height:28px;min-width:240px;max-width:58%;padding:0 12px;display:flex;align-items:center;justify-content:space-between;z-index:3;background:rgba(18,20,28,.35);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08)}
.apx-url-text{font:800 12px/1 Inter,system-ui,sans-serif;color:#e9efff;letter-spacing:.2px;opacity:.95}
.apx-logo{height:14px;opacity:.95}
.apx-dock{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:12px;padding:10px 16px;z-index:3;background:rgba(20,22,28,.22);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.apx-dock-item{width:48px;height:48px;border-radius:10px;border:0;padding:6px;background:rgba(255,255,255,.05);display:grid;place-items:center}
.apx-dock-item img{width:100%;height:100%;object-fit:contain}

/* board surface */
.apx-browser{position:relative;z-index:2;overflow:hidden;margin-top:56px;background:rgba(255,255,255,.35);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border-top:48px solid rgba(255,255,255,.86);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.08)}
/* arcs */
.apx-links{position:absolute;inset:0 0 0 0;z-index:0;pointer-events:none}
.apx-link{fill:none;stroke:rgba(47,109,246,.18);stroke-width:3;stroke-linecap:round}
.apx-link.is-on{stroke:#2f6ef600;stroke-dasharray:8 8;animation:apx-dash 1.1s linear infinite}
@keyframes apx-dash{to{stroke-dashoffset:-32}}

/* floating pills */
.apx-feed,.apx-queue{position:absolute;width:220px;background:rgba(255,255,255,.86);border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:10px;box-shadow:0 10px 26px rgba(0,0,0,.18);z-index:2}
.apx-feed{left:16px;top:112px;display:grid;gap:8px}
.apx-queue{right:16px;top:68px}
.apx-queue h6{margin:0 0 8px;font:800 12px/1 Inter,system-ui,sans-serif;color:#1b2140;opacity:.7}
.q-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.q-item{font:700 12px/1.2 Inter,system-ui,sans-serif;color:#243053;opacity:.78}
.q-item.done{opacity:1;color:#1a8f3a}
.q-item.done::before{content:"✅ ";}

/* feed lines */
.feed-line{height:22px;border-radius:6px;background:#fff;border:1px solid rgba(0,0,0,.06);display:flex;align-items:center;padding:0 8px;font:700 12px/1.2 Inter,system-ui,sans-serif;color:#1b2140;opacity:0;transform:translateY(6px)}
.feed-line.show{opacity:1;transform:translateY(0);transition:opacity .28s ease,transform .28s ease}
.feed-line.type::after{content:"";display:inline-block;width:8px;height:12px;margin-left:3px;background:#1b2140;animation:apx-caret .9s steps(1,end) infinite}
@keyframes apx-caret{50%{opacity:0}}

/* grid for cards (desktop 12-col) */
.apx-surface{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,1fr);gap:16px;padding:16px 16px 22px}
.apx-agent{opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease,filter .18s ease}
.apx-agent.inview{opacity:1;transform:none}
.apx-agent:hover{filter:brightness(1.02)}

/* placements (match the old good layout) */
.apx-scout   {grid-column:1 / span 4; grid-row:1}
.apx-outreach{grid-column:5 / span 4; grid-row:1}
.apx-brand   {grid-column:9 / span 4; grid-row:1}
.apx-legal   {grid-column:3 / span 4; grid-row:2}
.apx-launch  {grid-column:7 / span 4; grid-row:2}

/* heads + cards */
.apx-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.apx-ic{width:20px;height:20px}
.apx-head span{font:800 14px/1 Inter,system-ui,sans-serif;color:#1b2140;letter-spacing:.2px}
.apx-head::after{content:"";width:8px;height:8px;border-radius:50%;margin-left:auto;background:radial-gradient(circle at 30% 30%,#86f,#2f6df6 70%);opacity:.6}
.apx-agent.is-active .apx-head::after{opacity:1;box-shadow:0 0 0 5px rgba(47,109,246,.18)}

.apx-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:10px;box-shadow:0 10px 28px rgba(0,0,0,.08)}
/* scout (v1 list still supported) */
.apx-card.scout .chip{display:inline-block;padding:4px 10px;border-radius:999px;background:#e9f1ff;color:#2b3d66;font:800 12px/1 Inter,system-ui}
.apx-card.scout .list{list-style:none;margin-top:8px;display:grid;gap:6px;color:#1b2140;font:800 14px/1.1 Inter,system-ui}
.apx-card.scout .list .new{color:#2f6df6}

/* === Scout v2: 3 labels + 3 animations (Lottie) === */
.apx-card.scout.scout-v2{padding:12px 12px 14px;display:grid;gap:12px}
.scout-v2 .pill-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:#eaf1ff;border-radius:14px;padding:6px}
.scout-v2 .pill{display:block;text-align:center;font:800 13px/1 Inter,system-ui,sans-serif;color:#1c2a52;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:999px;padding:8px 10px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.scout-v2 .viz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:center;justify-items:center;padding-top:2px}
.scout-v2 .viz{display:grid;gap:8px;justify-items:center}
.scout-v2 lottie-player{width:72px;height:72px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.12));border-radius:50%}
.scout-v2 .viz-label{font:700 12px/1.2 Inter,system-ui,sans-serif;color:#2b3d66;opacity:.85;text-align:center}

/* outreach */
.apx-card.outreach .ad{height:72px;border-radius:10px;background:#eef3ff;padding:10px;display:grid;align-content:center;gap:8px}
.apx-card.outreach .l1{height:10px;border-radius:6px;background:#cddcff;width:80%}
.apx-card.outreach .l2{height:8px;border-radius:5px;background:#dce6ff;width:60%}
.apx-card.outreach .cta{width:64px;height:20px;border-radius:6px;background:#2f6df6;padding-left:1rem}
.apx-card.outreach .badge{font:800 12px/1 Inter;color:#536089;margin-top:6px}
/* branding */
.apx-card.branding .logo{height:26px;display:grid;grid-auto-flow:column;gap:6px;align-items:center}
.apx-card.branding .dot{width:10px;height:10px;border-radius:50%;background:#b9c6ff}
.apx-card.branding .lp{height:56px;border-radius:10px;background:#eef1ff;display:grid;gap:6px;padding:8px}
.apx-card.branding .hero{height:14px;border-radius:6px;background:#cbd7ff}
.apx-card.branding .copy{height:10px;width:70%;border-radius:5px;background:#dbe3ff}
/* legal */
.apx-card.legal{position:relative;display:grid;gap:6px;padding-top:2rem}
.apx-card.legal .ln{height:8px;border-radius:4px;background:#e8eefb}
.apx-card.legal .ln.warn{background:linear-gradient(90deg,#ffd166,#f3f6ff)}
.apx-card.legal .badge{position:absolute;right:8px;top:3px;padding:3px 8px;border-radius:999px;background:#fff2cc;color:#4c3b09;font:900 11px/1 Inter;border:1px solid rgba(0,0,0,.06)}
/* launch */
.apx-card.launch .progress{height:12px;border-radius:999px;background:#eaf2ff;overflow:hidden}
.apx-card.launch .fill{display:block;height:100%;width:8%;background:linear-gradient(90deg,#2bd3ff,#2f6df6)}

/* finale */
.apx-finale{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .35s ease}
.apx-finale-dim{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.apx-finale-card{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.apx-finale-text{font:900 clamp(26px,3.6vw,38px)/1.1 Inter,system-ui,sans-serif;color:#fff}

/* ========= responsive ========= */
@media (max-width:1024px){
  .apx-surface{grid-template-columns:1fr;gap:14px}
  .apx-scout,.apx-outreach,.apx-brand,.apx-legal,.apx-launch{grid-column:auto}
  .apx-feed{position:static;margin:12px 16px 0}
  .apx-queue{position:static;margin:8px 16px 16px}
  .apx-links{display:none} /* arcs off on mobile for clarity */
  .apx-browser{border-top-width:42px}

  /* Scout v2 compact */
  .scout-v2 .viz-grid{gap:16px}
  .scout-v2 lottie-player{width:60px;height:60px}
  .scout-v2 .pill{font-size:12px;padding:7px 8px}
}

@media (max-width:360px){
  .apx-dock-item{width:40px;height:40px}
  .q-item,.feed-line{font-size:11px}

  /* Scout v2 ultra-compact */
  .scout-v2 .viz-grid{gap:12px}
  .scout-v2 lottie-player{width:52px;height:52px}
  .scout-v2 .pill{font-size:11px;padding:6px 6px}
}

/* ---------- Board sizing + glass opacity ---------- */
.apx-stage{ height: clamp(620px, 62vw, 760px); }
.apx-browser{ --boardH: clamp(520px, 54vw, 640px); min-height: var(--boardH); background: rgba(255,255,255,.46); }
.apx-surface{ padding: 16px 16px calc(22px + env(safe-area-inset-bottom)); }

/* ---------- Card size system (desktop defaults) ---------- */
.apx-agent{ --card-min: 150px; }
.apx-card{ min-height: var(--card-min); overflow: hidden; display: grid; align-content: start; }

/* per-card floor heights (so the grid doesn’t jump) */
.apx-scout{   --card-min: 175px; }
.apx-outreach{--card-min: 150px; }
.apx-brand{   --card-min: 150px; width: 15rem;}
.apx-legal{   --card-min: 130px; }
.apx-launch{  --card-min:  92px; }

/* keep Scout from ballooning on long lists */
.apx-card.scout .list{ max-height: 96px; overflow: hidden; }

/* ---------- Tablet / small laptop (stack + compact) ---------- */
@media (max-width:1024px){
  .apx-stage{ height: auto; }
  .apx-browser{ --boardH: auto; }
  .apx-surface{ grid-template-columns: 1fr; gap: 12px; }
  .apx-agent{ --card-min: 128px; }
  .apx-scout{  --card-min: 148px; }
  .apx-legal{  --card-min: 80px; padding-bottom: 4rem;}
  .apx-launch{ --card-min:  80px; }
  .apx-card{ padding: 8px; }
  .apx-head span{ font-size: 13px; }
  .apx-card.outreach .ad{ height: 64px; }
  .apx-card.branding .lp{ height: 48px; }
  .apx-card.scout .list{ max-height: 82px; }
}

/* ---------- Tiny phones (ultra-compact) ---------- */
@media (max-width:360px){
  .apx-agent{ --card-min: 110px; }
  .apx-card.scout .list{ max-height: 72px; }
  .apx-queue,.apx-feed{ width: 200px; }
}

/* XL desktop: hide hint pills so nothing overlaps */
@media (min-width: 1200px){
  .apx-feed, .apx-queue { display: none; }
}
/* === Scout rotator: plain shimmer, no rotation === */
/* Hide the old static labels under icons */
#apx-dashboard .scout-v2 .viz-label { display: none !important; }

/* Each tile provides a positioning context */
#apx-dashboard .scout-v2 .viz { position: relative; }

/* Rotator container: centered under the icon, always visible, above Lottie */
#apx-dashboard .scout-v2 .tile-rot{
  position: absolute;
  left: 50%;
  bottom: -0.25rem;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  white-space: nowrap;
  text-align: center;

  /* requested size */
  font: 600 8px/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: rgba(230,235,248,.96);
}

/* The real text (base layer) */
#apx-dashboard .scout-v2 .tile-rot .rot-line{
  position: relative;
  display: inline-block;
  opacity: 1 !important;            /* kill any legacy 0 */
  visibility: visible !important;
  transform: none !important;
  clip-path: none !important;
  mask: none !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Shimmer overlay on a pseudo-element so base text stays visible */
#apx-dashboard .scout-v2 .tile-rot .rot-line::after{
  content: attr(data-txt);
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: inherit;                    /* fallback if no clip support */
  opacity: 0;                        /* turned on below when supported */
}

/* True ChatGPT-like shimmer band */
@supports (-webkit-background-clip:text) or (background-clip:text){
  #apx-dashboard .scout-v2 .tile-rot .rot-line::after{
    opacity: 1;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text; background-clip: text;

    /* tweak band thickness via these variables */
    --rot-s1: 12%;
    --rot-s2: 19%;
    --rot-s3: 26%;

    background-image: linear-gradient(
      100deg,
      rgba(255,255,255,.24) var(--rot-s1),
      rgba(255,255,255,.58) var(--rot-s2),
      rgba(255,255,255,.24) var(--rot-s3)
    );
    background-size: 180% 100%;
    animation: rot-shimmer 1.1s linear infinite;
  }
}

@keyframes rot-shimmer { from {background-position:0 0} to {background-position:180% 0} }

@media (max-width: 900px){
  #apx-dashboard .scout-v2 .tile-rot{ font-size: 8px; bottom: -0.35rem; }
}

/* Move the spinner text further down under each icon */
#apx-dashboard .scout-v2 .viz .tile-rot{
  bottom: 0;                              /* anchor to bottom edge of the viz */
  transform: translate(-50%, 16px);       /* push it down 12px */
}

/* (optional) a touch lower on phones */
@media (max-width:900px){
  #apx-dashboard .scout-v2 .viz .tile-rot{
    transform: translate(-50%, 16px);
  }
}





/* ===== Outreach v2 — mirror Scout look/scale ===== */
#outreach-tiles .viz-grid--two{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  align-items:center; padding:16px 16px 22px; position:relative;
}
#outreach-tiles .viz{ position:relative; display:flex; flex-direction:column; align-items:center; }

/* ICON SIZE — smaller than before and locked */
#outreach-tiles .viz-lottie{
  width:48px !important; height:48px !important;
}
@media (max-width:900px){
  #outreach-tiles .viz-lottie{ width:44px !important; height:44px !important; }
}

/* Scout-style pills (white pills, blue tray) */
#outreach-tiles .pill-tabs{
  display:flex; justify-content:center; gap:14px;
  margin:6px auto 6px; padding:6px;
  max-width:min(92%,640px);
  background:rgba(120,150,255,.10);
  border-radius:28px;
  box-shadow:inset 0 0 0 1px rgba(140,170,255,.18);
}
#outreach-tiles .pill{
  background:#fff; border-radius:999px; padding:6px;
  font:800 13px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:#2b2f3a;
  box-shadow:0 6px 20px rgba(120,160,255,.22);
}
@media (max-width:900px){
  #outreach-tiles .pill{ font-size:14px; padding:7px 12px; }
}

/* soft vertical split */
#outreach-tiles .split-line{
  position:absolute; left:50%; top:115px; bottom:216px; width:1px;
  background:linear-gradient(to bottom, transparent, rgba(30,40,80,.14) 18%, rgba(30,40,80,.14) 82%, transparent);
  pointer-events:none;
}

/* Followers caption */
#outreach-tiles .viz-caption{ margin-top:8px; text-align:center; }
#outreach-tiles .viz-caption .cap-title{
  font:600 12px/1.15 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:rgba(25,30,45,.55);
}
#outreach-tiles .viz-caption .cap-metric{
  font:800 8px/1.1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: rgba(230, 235, 248, .96);;
}

/* Sales achievement spinner — same gray shimmer as Scout */
#outreach-tiles .tile-rot{
  position:absolute; left:50%; bottom:0; transform:translate(-50%, 16px);
  pointer-events:none; white-space:nowrap; text-align:center;
  font:600 8px/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:rgba(230,235,248,.96);
}
#outreach-tiles .tile-rot .rot-line{
  position:relative; display:inline-block;
  opacity:1 !important; visibility:visible !important;
  clip-path:none !important; mask:none !important; transform:none !important;
  background:none !important; -webkit-text-fill-color:currentColor !important;
}
/* shimmer overlay using data-txt (keeps base text visible) */
#outreach-tiles .tile-rot .rot-line::after{
  content:attr(data-txt); position:absolute; inset:0; pointer-events:none; opacity:0;
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  #outreach-tiles .tile-rot .rot-line::after{
    opacity:1; color:transparent; -webkit-text-fill-color:transparent;
    -webkit-background-clip:text; background-clip:text;
    --rot-s1:10%; --rot-s2:16%; --rot-s3:22%;
    background-image:linear-gradient(100deg,
      rgba(255,255,255,.22) var(--rot-s1),
      rgba(255,255,255,.70) var(--rot-s2),
      rgba(255,255,255,.22) var(--rot-s3)
    );
    background-size:160% 100%;
    animation: outreach-shimmer 1.05s linear infinite;
  }
}
@keyframes outreach-shimmer{ from{background-position:0 0} to{background-position:160% 0} }




/* ===== Branding v2 — mirror Outreach look/scale ===== */
#branding-tiles .viz-grid--two{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  align-items:center; padding:16px 16px 22px; position:relative;
}
#branding-tiles .viz{ position:relative; display:flex; flex-direction:column; align-items:center; }

/* Scout-style header pills (white pills on blue tray) */
#branding-tiles .pill-tabs{
  display:flex; justify-content:center; gap:14px;
  margin:6px auto 6px; padding:6px;
  max-width:min(92%,640px);
  background:rgba(120,150,255,.10);
  border-radius:28px;
  box-shadow:inset 0 0 0 1px rgba(140,170,255,.18);
}
#branding-tiles .pill{
  background:#fff; border-radius:999px; padding:8px 16px;
  font:800 13px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:#2b2f3a;
  box-shadow:0 6px 20px rgba(120,160,255,.22);
}
@media (max-width:900px){
  #branding-tiles .pill{ font-size:14px; padding:7px 12px; }
}

/* tiny icons (same scale as new Outreach) */
#branding-tiles .icon-box{ width:48px; height:48px; display:grid; place-items:center; }
#branding-tiles .icon-img{ width:42px; height:42px; opacity:.92; }
@media (max-width:900px){
  #branding-tiles .icon-box{ width:44px; height:44px; }
  #branding-tiles .icon-img{ width:40px; height:40px; }
}

/* stylized tiny “logo” (3 dots) for Brand Kit */
#branding-tiles .logo-mini{
  width:40px; height:40px; border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75));
  box-shadow:0 6px 18px rgba(20,30,60,.16), inset 0 0 0 2px rgba(30,40,80,.06);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
#branding-tiles .logo-mini .d{
  width:7px; height:7px; border-radius:50%;
  background:#2ad1c9;
  box-shadow:0 0 0 2px rgba(0,0,0,.06);
}

/* Brand Kit’s three mini pills under the icon */
#branding-tiles .bk-pills{
  display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; justify-content:center;
}
#branding-tiles .mini-pill{
  padding:4px 8px; border-radius:999px; background:#fff;
  font:700 10px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:#3a4152;
  box-shadow:0 4px 14px rgba(120,160,255,.18), inset 0 0 0 1px rgba(140,170,255,.18);
}

/* small caption on the right */
#branding-tiles .viz-caption{ margin-top:8px; text-align:center; }
#branding-tiles .viz-caption .cap-title{
  font:600 12px/1.15 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:rgba(25,30,45,.55);
}

/* soft vertical split (same as Outreach) */
#branding-tiles .split-line{
  position:absolute; left:50%; top:72px; bottom:12px; width:1px;
  background:linear-gradient(to bottom, transparent, rgba(30,40,80,.14) 18%, rgba(30,40,80,.14) 82%, transparent);
  pointer-events:none;
}

/* neutralize any legacy Branding v1 internals so they don't show */
.apx-card.branding:not(.branding-v2) { display:none; }

/* tiny lotties for Branding */
#branding-tiles .icon-lottie{
  width:48px; height:48px; display:block;
  filter: drop-shadow(0 2px 6px rgba(20,30,60,.10));
}
@media (max-width:900px){
  #branding-tiles .icon-lottie{ width:44px; height:44px; }
}





/* -------- Legal v2 -------- */
.apx-card.legal.legal-v2{
  --ink: #2c3341;
  --muted: rgba(44,51,65,.52);
  --pill-bg: rgba(255,255,255,.66);
  --pill-ring: rgba(75,105,255,.15);
  --stamp: #2b6fff;
  --stamp-bg: rgba(43,111,255,.08);

  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  min-height: 210px;
  padding: 14px 16px 12px;
}

/* top strip */
.legal-v2 .leg-top{
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 12px;
}
.legal-v2 .leg-ic{ width: 44px; height: 44px; }
.legal-v2 .leg-pill{
  justify-self: start;
  font: 700 12px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #2f3440;
  padding: 14px 16px;
  background: var(--pill-bg);
  border-radius: 18px;
  box-shadow: 0 0 0 10px var(--pill-ring) inset;
  letter-spacing: .04em;
}
.legal-v2 .leg-jur{
  font: 600 14px/1.1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--muted);
  white-space: nowrap;
}

/* list */
.legal-v2 .leg-list{
  list-style: none;
  margin: 6px 0 0;
  padding: 0 2px 0 2px;
  display: grid;
  gap: 14px;
}
.legal-v2 .leg-row{
  position: relative;
  padding-right: 130px; /* room for stamp */
}
.legal-v2 .leg-title{
  font: 800 18px/1.15 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
}
.legal-v2 .leg-sub{
  margin-top: 4px;
  font: 600 13px/1.1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--muted);
}

/* STAMP */
.legal-v2 .stamp{
  position: absolute;
  right: 0; top: -6px;
  padding: 8px 16px 9px;
  border: 3px solid var(--stamp);
  color: var(--stamp);
  background: var(--stamp-bg);
  border-radius: 8px;
  font: 800 16px/1.05 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: .06em;
  transform: rotate(-6deg) scale(.9);
  transform-origin: 60% 50%;
  opacity: 0;
  filter: saturate(1.2);
}
/* when row becomes stamped */
.legal-v2 .leg-row.is-stamped .stamp{
  animation: stamp-pop .55s cubic-bezier(.2,.9,.2,1.1) forwards;
}
@keyframes stamp-pop{
  0%   { opacity: 0; transform: rotate(-6deg) scale(.85); }
  60%  { opacity: 1; transform: rotate(-2deg) scale(1.06); }
  100% { opacity: 1; transform: rotate(-4deg) scale(1.0); }
}

/* footer */
.legal-v2 .leg-foot{
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
.legal-v2 .leg-hint{
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font: 700 15px/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.legal-v2 .hint-ic{ font-size: 18px; }

/* compact at <= 1024 just like other cards */
@media (max-width:1024px){
  .legal-v2 .leg-title{ font-size: 19px; }
  .legal-v2 .leg-sub{ font-size: 14px; }
  .legal-v2 .stamp{ font-size: 18px; padding: 6px 12px; }
  .legal-v2 .leg-pill{ font-size: 13px; padding: 8px 14px; }
  .legal-v2 .leg-jur{ font-size: 13px; }
  .legal-v2 .leg-ic{ width: 38px; height: 38px; }
}

/* ultra-compact */
@media (max-width:360px){
  .legal-v2 .leg-title{ font-size: 17px; }
  .legal-v2 .leg-sub{ font-size: 13px; }
  .legal-v2 .stamp{ font-size: 16px; border-width: 2px; }
}




/* -------- Launch v2 (compact, single-row checks) -------- */
.apx-card.launch.launch-v2{
  --ink: #2c3341;
  --teal: #21d0c3;
  --tick-ring: rgba(33,208,195,.14);

  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  padding: 10px 14px 16px;
  margin-bottom: 4rem;
}

/* top row layout */
.launch-v2 .launch-top{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

/* small coin icon */
.launch-v2 .launch-ic{
  width: 44px; height: 44px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.08));
}

/* SINGLE ROW checks (don’t stack) */
.launch-v2 .check-list{
  display: flex;
  flex-wrap: nowrap;            /* keep in one line on desktop */
  align-items: center;
  gap: clamp(4px, 2vw, 6px);
  min-height: 30px;
  overflow: hidden;             /* prevents wrapping jitter */
}

/* smaller sizing */
.launch-v2 .check-item{
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
  font: 700 clamp(12px, 1.2vw, 14px)/1.1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  white-space: nowrap;
}

/* tiny circular tick */
.launch-v2 .check-ic{
  --d: 18px;                    /* icon diameter */
  width: var(--d); height: var(--d);
  display: inline-grid; place-items: center;
  border-radius: 999px;
  background: var(--tick-ring);
  color: var(--teal);
  font-size: 11px; font-weight: 900;
  opacity: 0; transform: scale(.85);
  transition: transform .35s cubic-bezier(.2,.9,.2,1.1), opacity .25s ease;
}

.launch-v2 .check-txt{ opacity: .55; transition: opacity .3s ease; }
.launch-v2 .check-item.is-done .check-ic{ opacity: 1; transform: scale(1); }
.launch-v2 .check-item.is-done .check-txt{ opacity: 1; }

/* keep your existing bottom bar look; just a tiny spacing guard */
.launch-v2 .progress{ margin-top: 4px; }
.launch-v2 .progress .fill{ transition: width .7s cubic-bezier(.2,.8,.2,1); }

/* allow wrap on small screens only */
@media (max-width: 720px){
  .launch-v2 .check-list{ flex-wrap: wrap; row-gap: 6px; }
  .launch-v2 .launch-ic{ width: 40px; height: 40px; }
  .launch-v2 .check-ic{ --d: 16px; font-size: 10px; }
}


/* Gold state after all checks complete */
.launch-v2.is-gold .progress .fill{
  background: linear-gradient(90deg,#ffcc33 0%, #ffd65e 45%, #ffb321 100%);
  box-shadow: 0 6px 18px rgba(255,179,0,.35);
}

/* tiny celebratory pop on the coin */
.launch-v2 .launch-ic{ transition: transform .25s ease; }
.launch-v2.is-gold .launch-ic{ transform: scale(1.08) rotate(-6deg); }






/* ===================== UNFAIR ADVANTAGE – Styles (FULL) ===================== */
:root{
  --ua-bg:#0e1117;
  --ua-card:#121621;
  --ua-text:#e9eefc;
  --ua-dim:#9fb0d9;
  --ua-accent:#2F6DF6;
  --ua-radius:16px;
  --ua-shadow:0 20px 60px rgba(0,0,0,.45);
}

.ua-section{
  padding: clamp(48px,7vw,96px) 16px;
  color: var(--ua-text);
}
.ua-wrap{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(12,1fr);
}

.ua-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--ua-radius);
  box-shadow: var(--ua-shadow);
  padding: 14px;
  display: grid;
  gap: 12px;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* layout: 3 columns on desktop */
.ua-left  { grid-column: 1 / span 4; }
.ua-middle{ grid-column: 5 / span 4; }
.ua-right { grid-column: 9 / span 4; }

/* headings */
.ua-head h2{
  font: 800 clamp(18px,2.2vw,22px)/1.15 Inter, system-ui, sans-serif;
  letter-spacing:.2px;
}
.ua-head p{
  font: 600 13px/1.3 Inter, system-ui, sans-serif;
  color: var(--ua-dim);
  margin-top: 2px;
}

/* figure / bullets */
.ua-figure{
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.ua-figure img{ width:100%; height:auto; display:block; }

.ua-points{
  list-style:none; display:grid; gap:8px; margin:6px 0 0; padding:0;
}
.ua-points li{
  font: 700 13px/1.25 Inter, system-ui, sans-serif;
  color: #cfd8ff;
  position: relative; padding-left: 14px;
}
.ua-points li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #86a7ff, var(--ua-accent));
  position:absolute; left:0; top:6px;
}

/* ===================== Split slider (updated look + center line) ===================== */
.ua-split{
  position: relative; border-radius: 12px; overflow: hidden;
  border:1px solid rgba(255,255,255,.08);
  isolation:isolate;
  --pos:50%;                       /* current divider position */
}
.ua-split img{ display:block; width:100%; height:auto; user-select:none; pointer-events:none;}
.ua-before{ position:absolute; inset:0; clip-path: polygon(0 0, var(--pos) 0, var(--pos) 100%, 0 100%); }
.ua-after { position:relative; }

/* static center reference line (thin, subtle) */
.ua-split::before{
  content:""; position:absolute; z-index:2; inset:0 auto 0 50%;
  width:2px; transform:translateX(-50%);
  mix-blend-mode: screen; pointer-events:none;
}

/* moving divider line under handle (follows --pos) */
.ua-split::after{
  content:""; position:absolute; z-index:3; inset:0 auto 0 var(--pos);
  width:2px; transform:translateX(-50%);
  background: linear-gradient(180deg, #0000, rgba(255,255,255,.85) 14%, rgba(255,255,255,.85) 86%, #0000);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  pointer-events:none;
}

/* Handle – Cluely-style puck with chevrons */
.ua-handle{
  position:absolute; top:50%; left:var(--pos);
  transform: translate(-50%,-50%);
  width:36px; height:36px; border-radius:50%;
  border:0;
  background: linear-gradient(180deg,#ffffff,#e9eefc);
  box-shadow:
    0 6px 16px rgba(0,0,0,.35),
    0 0 0 6px rgba(47,109,246,.22),
    inset 0 0 0 1px rgba(0,0,0,.08);
  cursor: ew-resize;
  z-index:4;
}

/* left/right chevrons */
.ua-handle::before,
.ua-handle::after{
  content:""; position:absolute; top:50%;
  width:8px; height:8px; border:2px solid #1b2140; border-left:0; border-bottom:0;
}
.ua-handle::before{
  left:9px; transform: translateY(-50%) rotate(225deg);
}
.ua-handle::after{
  right:9px; transform: translateY(-50%) rotate(45deg);
}

.ua-range{
  position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:ew-resize; z-index:5;
}

/* Centers the inline SVG inside the handle */
.ua-handle{
  display: grid;
  place-items: center;
}

/* Size the chevrons like your Tailwind snippet: 12px; 16px on xl */
.ua-handle svg{
  width: 12px;
  height: 9px;
  transform: rotate(90deg);
  display: block;
}
@media (min-width:1280px){
  .ua-handle svg{ width:16px; height:9px; }
}

/* Optional: smooth autorun sweep, disabled while dragging */
.ua-split.is-animating .ua-divider,
.ua-split.is-animating .ua-handle { transition: left 600ms cubic-bezier(.2,.8,.2,1); }
.ua-split.is-animating .ua-before { transition: clip-path 600ms cubic-bezier(.2,.8,.2,1); }


/* ===================== Carousel ===================== */
.ua-carousel{ position:relative; }
.ua-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:100%;
  overflow:hidden; border-radius:12px; border:1px solid rgba(255,255,255,.08);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.ua-track img{ width:100%; height:auto; display:block; }
.ua-dots{ display:flex; gap:8px; justify-content:center; margin-top:10px; }
.ua-dots button{
  width:8px; height:8px; border-radius:50%; border:0; background: rgba(255,255,255,.35);
}
.ua-dots button.is-active{ background: var(--ua-accent); }

/* ===================== Responsive ===================== */
@media (max-width: 1024px){
  .ua-wrap{ grid-template-columns: 1fr; }
  .ua-left, .ua-middle, .ua-right{ grid-column: auto; }
}

@media (prefers-reduced-motion: reduce){
  .ua-track{ transition: none !important; }
}







/* === UA Right — cross-fade slideshow (fast phrases, per-slide fit) === */

.ua-right .ua-carousel.ua-fader{
  position: relative;
  overflow: hidden;
  min-height: 300px;
  aspect-ratio: 44 / 51; 
  border-radius: 16px;
  background: #0b1020;
}

.ua-right .ua-fslide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.ua-right .ua-fslide.is-active{
  opacity: 1;
  pointer-events: auto;
}

/* image fitting controlled by data-fit */
.ua-right .ua-fslide > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-position: center;
}
.ua-right .ua-fslide[data-fit="cover"]   > img{ object-fit: cover; }
.ua-right .ua-fslide[data-fit="contain"] > img{
  object-fit: contain;               /* show whole phone shot */
  background: #0b1020;               /* nice letterbox fill */
}

/* overlays */
.ua-right .ua-overlay{ position:absolute; inset:0; pointer-events:none; }
.ua-right .ua-center{ display:grid; place-items:center; }

/* phrase (replaces typewriter) */
.ua-right .ua-phrase{

  /* control with vars instead of hard-coded clamp */
  --uaPhraseMin: 22px;     /* mobile floor */
  --uaPhraseFluid: 3.6vw;  /* fluid middle */
  --uaPhraseMax: 48px;     /* desktop cap */

  font: 800 clamp(18px,2.2vw,28px)/1.15 Inter,system-ui,sans-serif;
  color:#0f172a;
  padding: .55rem .85rem;
  border-radius: 12px;
  opacity: 0;
  transition: opacity .22s ease;
}
.ua-right .ua-phrase.show{ opacity:1; }



/* === Agents orbit around center logo (no text) === */

.ua-right .ua-orbit{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
}



/* center Blitzly logo with a soft “breathe” glow */
.ua-right .ua-core{
  width: clamp(40px, 6vw, 68px);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));
  opacity:.95;
  animation: ua-breathe 2.6s ease-in-out infinite;
}

/* place each agent on an arc using polar placement */
.ua-right .ua-node{
  position:absolute; inset:50% auto auto 50%;
  translate:-50% -50%;
  /* rotate to angle, translate outward, rotate back so glyph stays upright */
  transform:
    rotate(var(--angle,0deg))
    translate(var(--radius,100px))
    rotate(calc(-1 * var(--angle,0deg)));
}

/* ring = progress arc using conic-gradient (masked donut) */
.ua-right .ua-node .ring{
  position:relative;
  width: clamp(78px, 8vw, 50px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(var(--ring, #6aa8ff) var(--pct,65%), #e7e9f0 0);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 56%, #000 57%);
          mask: radial-gradient(circle at 50% 50%, transparent 56%, #000 57%);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
  animation: ua-breathe 2.8s ease-in-out infinite;
  opacity:.9;
}

/* tiny status pip on ring edge */
.ua-right .ua-node .ring::after{
  content:"";
  position:absolute; left:50%; top:8%;
  width:10px; height:10px; border-radius:50%;
  transform: translateX(-50%);
}

/* icon inside ring */
.ua-right .ua-node .glyph{
  position:absolute; inset:50% auto auto 50%;
  translate:-50% -50%;
  width: 52%;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* gentle float offsets per node for life */
.ua-right .ua-node{ animation: ua-float 3.6s ease-in-out infinite; }
.ua-right .ua-node:nth-child(2){ animation-delay:.15s } /* Scout */
.ua-right .ua-node:nth-child(3){ animation-delay:.30s } /* Outreach */
.ua-right .ua-node:nth-child(4){ animation-delay:.45s } /* Brand */
.ua-right .ua-node:nth-child(5){ animation-delay:.60s } /* Launch */

/* keyframes shared with your set */
@keyframes ua-breathe { 0%,100%{opacity:.8} 50%{opacity:1} }
@keyframes ua-float { 0%,100%{ transform: translateZ(0) rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1*var(--angle))); }
                       50%    { transform: translateZ(0) rotate(var(--angle)) translate(calc(var(--radius) - 6px)) rotate(calc(-1*var(--angle))); } }

/* success overlay */
.ua-right .ua-success{ display:grid; place-items:center; }
.ua-right .ua-success-img{
  width:min(500px,65%); opacity:0; transform:scale(.96);
  transition:opacity .35s ease, transform .35s ease;padding-top: 10rem;
}
.ua-right .ua-success-img.is-on{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .ua-right .ua-fslide,
  .ua-right .ua-agent,
  .ua-right .ua-success-img,
  .ua-right .ua-phrase{ transition:none !important; }
}









/* OVER RIDES OVERRIDES OVER-RIDES */

/* ===== Desktop: restore original absolute positions & order ===== */
@media (min-width:1024px){
  .ring-section{ --radius:0; }                                        /* kill polar radius */
  .ring-badge{ position:absolute; left:auto; top:auto; right:auto; bottom:auto; transform:none; translate:0 0; }  /* neutralize polar transform */
  .ring-badge--tl, .ring-badge--tr, .ring-badge--bl, .ring-badge--br, .ring-badge--bc{ --angle:0deg; }             /* ignore angles */

  /* your old coordinates (restore spacing/order) */
  .ring-badge--tl{ top:clamp(24px,7vw,70px); left:max(10px,22%); }
  .ring-badge--tr{ top:clamp(24px,9vw,150px); right:max(10px,15%); }
  .ring-badge--bl{ bottom:clamp(40px,9vw,90px); left:max(10px,16%); }
  .ring-badge--br{ bottom:clamp(40px,8vw,1000px); right:max(200px,22%); }  /* keep your original large bottom-right offset */
  .ring-badge--bc{ top:clamp(500px,75svh,800px); left:50%; transform:translateX(-50%); }
}




/* NEW ADDITIONS */


/* SVG container under headline */
.banner-tag-svg {
  margin-top: 0.4rem;
  display: flex;
  justify-content: center;
  width: 100%;
}

.nobody-svg {
  width: 340px;      /* adjust to match your design */
  max-width: 80%;
  opacity: 0.92;
  filter: drop-shadow(0 0 14px rgba(255,255,255,0.04));
  animation: svgFade 0.85s ease forwards;
}


.prettywild {
  width: 500px;      /* adjust to match your design */
  max-width: 80%;
  opacity: 0.92;
  filter: drop-shadow(0 0 14px rgba(255,255,255,0.04));
  animation: svgFade 0.85s ease forwards;
}

/* Fade-in to match your intro-stagger */
@keyframes svgFade {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 0.92;
    transform: translateY(0);
  }
}

/* Center headline better with SVG */
.banner-title {
  margin-bottom: 0.4rem !important;
}




/* Base section layout */
.ua-video-section {
  padding: 96px 16px;              /* adjust to match your other sections */
  display: flex;
  justify-content: center;
}

/* Center the video and make it a bit larger on desktop */
.ua-video-shell {
  width: 100%;
  max-width: 720px;                /* larger on full desktop */
  margin: 0 auto;
}

/* Frame that carries the shadow + rounded corners */
.ua-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;             /* keep 1:1 ratio */
  border-radius: 24px;
  overflow: hidden;

  /* Dark, soft shadow so it sits naturally on the grid */
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.95),
    0 0 40px rgba(0, 0, 0, 0.8);

  /* Subtle panel background behind the video edges */
  background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.04), transparent 55%);
}

/* The video itself */
.ua-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;               /* fill the square */
  display: block;

  pointer-events: none;            /* can't click/pause */
  user-select: none;
}

/* Mobile: full width, slightly tighter padding */
@media (max-width: 768px) {
  .ua-video-section {
    padding: 64px 12px;
  }

  .ua-video-shell {
    max-width: 100%;               /* full width on mobile */
  }
}




/* BUTTON GET STARTED WITH BLITZLY */



/* =========================================================
   TAKE ACTION / FOOTER CTA SECTION
   HTML structure assumed:

   <section class="container registration-section">
     <div class="lf-footer-main">
       <div class="lf-footer-copy">
         <p class="lf-footer-eyebrow">MOMENTUM OVER PERFECTION</p>
         <h2 class="lf-footer-title">Take Action</h2>
         <div class="lf-footer-tag">
           <img src="./images/blitzit.png" alt="Get Blitzly" />
         </div>
       </div>

       <div class="lf-footer-cta">
         <button class="lf-footer-btn" id="lfFooterBtn">
           Get started with Blitzly now
         </button>
       </div>
     </div>

     <div class="lf-footer-orbit">
       <canvas id="lfFooterOrbit"></canvas>
     </div>
   </section>
   ========================================================= */

/* Section container */
.registration-section {
  position: relative;
  padding: 4.5rem 0 3.5rem;
  overflow: hidden;
}

/* Main row – copy left, button right */
.lf-footer-main {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  padding-inline: 15rem;        /* keep away from walls */
  padding-bottom: 3rem;
}

/* Left copy block */
.lf-footer-copy {
  max-width: 520px;
}

.lf-footer-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.45);
  margin-bottom: 0.85rem;
}

.lf-footer-title {
  font-size: clamp(2.5rem, 3vw, 3.1rem);
  line-height: 1.08;
  font-weight: 600;
  color: #f9fafb;
  margin-bottom: 1.6rem;
}

/* “BLITZ IT” tag / svg image */
.lf-footer-tag img {
  display: block;
  max-width: 260px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.75));
}

/* Right CTA area */
.lf-footer-cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ===================== ORBIT BUTTON ===================== */

/* pointer coordinates default */
.lf-footer-btn {
  --mx: 50%;
  --my: 50%;

  position: relative;
  overflow: hidden;
  border-radius: 999px;
  padding: 0.95rem 3.2rem;

  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 8, 10, 0.96);
  color: #f5f5f7;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;

  box-shadow: none;
  transition:
    transform 0.12s ease,
    border-color 0.16s ease,
    background-color 0.16s ease;
}

/* pointer-driven halo – subtle & only around cursor */
.lf-footer-btn::before {
  content: "";
  position: absolute;
  inset: -35%;
  border-radius: inherit;
  pointer-events: none;

  background: radial-gradient(
    circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.20),
    rgba(255, 255, 255, 0.06) 25%,
    transparent 55%
  );
  mix-blend-mode: screen;
  opacity: 0;                 /* hidden until hover/focus */
  filter: blur(12px);
  transition: opacity 0.16s ease;
}

/* Hover / focus – very gentle lift */
.lf-footer-btn:hover,
.lf-footer-btn:focus-visible {
  border-color: rgba(255, 255, 255, 0.22);
  background-color: rgba(12, 12, 16, 0.98);
  transform: translateY(-0.5px);
  box-shadow: none;
}

.lf-footer-btn:hover::before,
.lf-footer-btn:focus-visible::before {
  opacity: 1;
}

/* Pressed */
.lf-footer-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ===================== ORBIT ARC CANVAS ===================== */

.lf-footer-orbit {
  position: relative;
  z-index: 1;
  margin-top: 2.5rem;
  height: 260px;              /* controls arc height */
  pointer-events: none;       /* canvas is purely visual */
}

.lf-footer-orbit canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

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

@media (max-width: 1200px) {
  .lf-footer-main {
    padding-inline: 6rem;
  }
}

@media (max-width: 900px) {
  .lf-footer-main {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-inline: 1.5rem;
    gap: 2.25rem;
  }

  .lf-footer-cta {
    justify-content: center;
  }

  .lf-footer-tag img {
    margin-inline: auto;
  }

  .lf-footer-orbit {
    height: 220px;
  }

  .lf-footer-btn {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
}

@media (max-width: 600px) {
  .registration-section {
    padding-top: 3.5rem;
    padding-bottom: 3rem;
  }

  .lf-footer-title {
    font-size: 2.25rem;
  }

  .lf-footer-orbit {
    height: 190px;
  }
  
  .holy {
    margin-bottom: -10rem;
  }
}




/* WAITLIST MODAL */





/* =========================
   Waitlist Modal (slate / low depth)
   ========================= */

.waitlist-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  font-family: inherit;
}

.waitlist-modal.is-open {
  display: flex;
}

.waitlist-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72); /* clean, neutral dark */
  /* no blur, no blue glow */
}

.waitlist-modal__dialog {
  position: relative;
  max-width: 420px;
  width: 100%;
  margin: 0 1.5rem;
  padding: 1.5rem 1.5rem 1.7rem;
  background: #050509; /* slate-ish black */
  border-radius: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.24); /* subtle slate border */
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55); /* lighter than before */
  color: #f9fafb;
}

.waitlist-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  border: none;
  background: transparent;
  color: rgba(156, 163, 175, 0.9);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.1rem;
  line-height: 1;
}

.waitlist-modal__close:hover {
  color: #e5e7eb;
}

.waitlist-modal__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(156, 163, 175, 0.9);
  margin: 0 0 0.35rem;
}

.waitlist-modal__title {
  font-size: 1.3rem;
  line-height: 1.2;
  margin: 0 0 0.3rem;
}

.waitlist-modal__sub {
  font-size: 0.9rem;
  color: rgba(209, 213, 219, 0.9);
  margin: 0 0 1.1rem;
}

.waitlist-modal__form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.waitlist-modal__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(156, 163, 175, 0.95);
}

.waitlist-modal__input {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: #131313;
  color: #f9fafb;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  outline: none;
}

.waitlist-modal__input::placeholder {
  color: rgba(148, 163, 184, 0.9);
}

.waitlist-modal__input:focus {
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.waitlist-modal__submit {
  margin-top: 0.3rem;
  width: 100%;
  justify-content: center;
  font-size: 0.95rem;
}

.waitlist-modal__divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.2rem 0 0.5rem;
  font-size: 0.75rem;
  color: rgba(148, 163, 184, 0.9);
}

.waitlist-modal__divider span {
  flex: 1;
  height: 1px;
  background: rgba(55, 65, 81, 0.9);
}

.waitlist-modal__google {
  border-radius: 0.75rem;
  border: 1px solid rgba(55, 65, 81, 0.9);
  background: #1e1f20;
  color: #e5e7eb;
  font-size: 0.9rem;
  padding: 0.55rem 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  cursor: pointer;
}

.waitlist-modal__google:hover {
  background: #131314;
  border-color: rgba(75, 85, 99, 1);
}

.waitlist-modal__google-icon {
  width: 18px;
  height: 18px;
}

/* Small screens */
@media (max-width: 480px) {
  .waitlist-modal__dialog {
    margin: 0 1rem;
    padding: 1.35rem 1.2rem 1.5rem;
    border-radius: 1rem;
  }
}




/* Magnetic-style particle field around waitlist email */
.waitlist-input-shell {
  position: relative;
  width: 100%;
}

.waitlist-modal__input {
  position: relative;
  z-index: 1; /* keep the input above the particles */
}

/* Re-using the idea of .particles-field / .particle */
.particles-field {
  position: absolute;
  inset: -80%;
  opacity: 0; /* start invisible */
  pointer-events: none;
  overflow: hidden;
  transition: opacity 1.45s ease-out; /* fade in */
}
.waitlist-modal.is-open .particles-field {
  opacity: 1;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}

@keyframes particleFloat {
  0% {
    transform: translate(var(--x), var(--y)) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(calc(var(--x) * -1), calc(var(--y) * -1)) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--x), var(--y)) scale(0);
    opacity: 0;
  }
}





/* LANDING AUTH */


/* ─────────────────────────────────────────────
   Landing toast (replaces window.alert)
   ───────────────────────────────────────────── */

/* container – bottom-center on page */
.landing-toast-container {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 9999;
}

/* toast bubble */
.landing-toast {
  pointer-events: auto;
  max-width: 320px;
  padding: 0.8rem 1.1rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #f9fafb;
  background: #111827;
  border: 1px solid rgba(249, 250, 251, 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.landing-toast.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* error variant */
.landing-toast--error {
  background: #7f1d1d;
  border-color: rgba(248, 113, 113, 0.85);
}