/* ============================================================
   Delto Web 2.0 — Site Styles
   Built on brand tokens from assets/tokens.css
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--dt-font-body);
  color: var(--dt-teal);
  background: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

:root {
  --nav-h: 68px;
  --gutter: clamp(20px, 5vw, 80px);
  --max-w: 1320px;
  --dt-teal-deep: #012830;
  --dt-teal-mid: #01535b;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ================================================
   NAV
   ================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  background: rgba(1, 40, 48, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background .3s ease, border-color .3s ease;
}
.nav.scrolled { background: rgba(1, 40, 48, 0.92); }
.nav-left { display: flex; align-items: center; gap: 48px; }
.nav-logo { height: 22px; width: 86px; display: block; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
  position: relative;
  color: rgba(255,255,255,.75);
  font-size: 13.5px; font-weight: 500;
  padding: 8px 14px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .2s, background .2s;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,.04); }
.nav-link .chev { width: 10px; height: 10px; opacity: .6; transition: transform .2s; }
.nav-link:hover .chev { transform: translateY(1px); opacity: 1; }

.nav-right { display: flex; align-items: center; gap: 12px; }
.lang-pick {
  display: flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 100px; padding: 3px;
}
.lang-opt {
  padding: 4px 10px; font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.5);
  border-radius: 100px;
  letter-spacing: .3px;
  transition: all .2s;
}
.lang-opt.active { background: var(--dt-lime); color: var(--dt-teal); }
.nav-signin {
  color: rgba(255,255,255,.8);
  font-size: 13.5px; font-weight: 500;
  padding: 8px 14px;
}
.nav-signin:hover { color: #fff; }
.btn-demo {
  background: var(--dt-lime); color: var(--dt-teal);
  font-weight: 700; font-size: 13.5px;
  padding: 9px 18px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap !important;
  flex-shrink: 0;
  transition: all .25s var(--dt-ease-out);
  box-shadow: 0 4px 24px rgba(192,244,61,.25);
}
.btn-demo:hover { transform: translateY(-1px); box-shadow: 0 8px 32px rgba(192,244,61,.4); }
.btn-demo .arrow { transition: transform .2s; }
.btn-demo:hover .arrow { transform: translateX(2px); }

/* ─── Mobile nav: burger + drawer ──────────────────── */
.nav-burger {
  display: none;
  width: 42px; height: 42px;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.nav-burger:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.24); }
.nav-burger span {
  display: block;
  width: 18px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform .25s var(--dt-ease-out), opacity .2s;
}
.nav.mobile-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.mobile-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.mobile-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  background: #012026;
  opacity: 0; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .25s var(--dt-ease-out), transform .25s var(--dt-ease-out);
  overflow-y: auto;
  z-index: 99;
}
.nav-drawer.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-drawer-inner {
  display: flex; flex-direction: column;
  min-height: 100%;
  padding: 16px 20px 32px;
  gap: 24px;
}
.nav-drawer-section { display: flex; flex-direction: column; gap: 2px; }
.nav-drawer-link {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 12px;
  font-size: 17px; font-weight: 600;
  color: rgba(255,255,255,.92);
  border: 0; background: transparent;
  border-radius: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: left;
  cursor: pointer;
  transition: background .2s;
}
.nav-drawer-link:active { background: rgba(255,255,255,.04); }
.nav-drawer-toggle svg { transition: transform .25s var(--dt-ease-out); }
.nav-drawer-toggle.open svg { transform: rotate(180deg); }
.nav-drawer-products {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 0 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  animation: drawer-expand .25s var(--dt-ease-out);
}
@keyframes drawer-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-drawer-product {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 12px 12px 16px;
  border-radius: 10px;
}
.nav-drawer-product-ico {
  flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(192,244,61,.12); color: var(--dt-lime);
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-drawer-product-t {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 700; color: #fff; line-height: 1.2;
}
.nav-drawer-product-d {
  display: block;
  font-size: 12.5px; color: rgba(255,255,255,.55);
  margin-top: 4px; line-height: 1.4;
}
.nav-drawer-foot {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.nav-drawer-cta {
  width: 100%; justify-content: center;
  font-size: 15px; padding: 14px 18px;
}
.nav-drawer-signin {
  text-align: center;
  font-size: 14px; color: rgba(255,255,255,.7);
  padding: 8px;
}
.nav-drawer-lang { align-self: center; }

@media (max-width: 900px) {
  .nav-left .nav-links { display: none; }
  .nav-right { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-left { gap: 0; }
}

/* Mega menu — legacy (still used by drawer styles) */
.mega {
  position: absolute; top: calc(100% + 8px); left: 0; transform: translateY(-6px);
  width: 720px; max-width: calc(100vw - 48px);
  background: #012026; border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px; padding: 20px;
  box-shadow: 0 40px 80px rgba(0,0,0,.5);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px;
  opacity: 0; pointer-events: none;
  transition: all .25s var(--dt-ease-out);
}
.mega.open { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* Full-width AI Agents mega — 3-col layout (agents · capabilities · resources) */
.nav-link-wrap {
  position: static;
  /* Wrapper takes full nav height so the cursor never leaves it
     when traveling vertically from the trigger button down to the
     mega (which sits flush at top: var(--nav-h)). */
  height: var(--nav-h);
  display: flex; align-items: center;
}
.mega-agents {
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  width: 100vw;
  background: var(--dt-tone-cream);
  border-bottom: 1px solid rgba(1,55,61,.08);
  box-shadow: 0 30px 60px rgba(1,55,61,.18);
  padding: 0;
  opacity: 0; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .22s var(--dt-ease-out), transform .22s var(--dt-ease-out);
  z-index: 200;
}
.mega-agents.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mega-agents-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.mega-agents-cols {
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  gap: 32px;
  padding: 28px 0 24px;
}
@media (max-width: 1100px) {
  .mega-agents-cols { grid-template-columns: 280px 1fr; }
  .mega-col-r { display: none; }
}
.mega-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* LEFT — agent list */
.mega-agent-item {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease;
}
.mega-agent-item:hover { background: rgba(1,55,61,.04); }
.mega-agent-item.active { background: #fff; box-shadow: 0 4px 14px rgba(1,55,61,.06); }
.mega-agent-item.active::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; background: var(--dt-lime-dark); border-radius: 2px;
}
.mega-agent-item-ico {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 12px;
  /* Bi-color: lime → lilac gradient bg with dark teal icon */
  background: linear-gradient(135deg, var(--dt-lime) 0%, var(--dt-lilac) 100%);
  color: var(--dt-teal);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .25s;
  box-shadow: 0 2px 6px rgba(1,55,61,.06);
}
.mega-agent-item.active .mega-agent-item-ico {
  transform: scale(1.04);
  box-shadow: 0 6px 14px rgba(192,244,61,.32), 0 2px 4px rgba(206,199,255,.24);
}
.mega-agent-item-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mega-agent-item-n {
  font-family: var(--dt-font-display);
  font-size: 15px; font-weight: 700;
  color: var(--dt-teal); letter-spacing: -.2px;
  line-height: 1.2;
}
.mega-agent-item-d {
  font-size: 12.5px; line-height: 1.35;
  color: rgba(1,55,61,.6);
}

/* CENTER — capabilities of active agent */
.mega-col-c {
  border-left: 1px solid rgba(1,55,61,.08);
  padding-left: 32px;
}
.mega-cap-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(1,55,61,.08);
}
.mega-cap-name {
  font-family: var(--dt-font-display);
  font-size: 17px; font-weight: 700;
  color: var(--dt-lime-dark); letter-spacing: -.2px;
}
.mega-cap-tag {
  font-size: 12.5px;
  color: rgba(1,55,61,.55);
}
.mega-cap-list { display: flex; flex-direction: column; gap: 2px; }
.mega-cap {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background .2s;
}
.mega-cap:hover { background: rgba(1,55,61,.04); }
.mega-cap-t {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  color: var(--dt-teal); letter-spacing: -.1px;
  line-height: 1.2;
}
.mega-cap-badge {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(192,244,61,.30);
  color: var(--dt-teal);
  text-transform: uppercase;
}
.mega-cap-d {
  font-size: 12.5px; line-height: 1.4;
  color: rgba(1,55,61,.6);
}

/* RIGHT — featured cases + resource */
.mega-col-r {
  border-left: 1px solid rgba(1,55,61,.08);
  padding-left: 32px;
}
.mega-side-head {
  font-size: 11px; font-weight: 700;
  color: rgba(1,55,61,.50);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.mega-side-head-2 { margin-top: 16px; }
.mega-side-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 4px;
  transition: background .2s;
}
.mega-side-card:hover { background: rgba(1,55,61,.04); }
.mega-side-card-thumb {
  flex-shrink: 0;
  width: 56px; height: 48px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--dt-font-display);
  font-size: 14px; font-weight: 800;
  color: var(--dt-teal); letter-spacing: 1px;
  background: linear-gradient(135deg, #c0f43d 0%, #9bc832 100%);
  border: 1px solid rgba(1,55,61,.08);
}
.mega-thumb-ficohsa {
  background: linear-gradient(135deg, #c0f43d 0%, #9bc832 100%);
  color: var(--dt-teal);
  border-color: rgba(155,200,50,.4);
}
.mega-thumb-banreservas {
  background: linear-gradient(135deg, #cec7ff 0%, #a89eff 100%);
  color: var(--dt-teal);
  border-color: rgba(168,158,255,.4);
}
.mega-side-card-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-side-card-t {
  font-family: var(--dt-font-display);
  font-size: 14px; font-weight: 700;
  color: var(--dt-teal); letter-spacing: -.1px;
}
.mega-side-card-d {
  font-size: 12px; line-height: 1.35;
  color: rgba(1,55,61,.6);
}
.mega-side-feature {
  display: block;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(192,244,61,.22) 0%, rgba(206,199,255,.22) 100%);
  border: 1px solid rgba(155,200,50,.30);
  transition: all .2s;
}
.mega-side-feature:hover {
  border-color: rgba(155,200,50,.50);
  background: linear-gradient(160deg, rgba(192,244,61,.30) 0%, rgba(206,199,255,.30) 100%);
}
.mega-side-feature-eyebrow {
  font-size: 10px; font-weight: 700;
  color: var(--dt-lime-dark);
  letter-spacing: 1.4px;
  margin-bottom: 6px;
}
.mega-side-feature-t {
  font-family: var(--dt-font-display);
  font-size: 14px; font-weight: 700;
  color: var(--dt-teal); letter-spacing: -.1px;
  line-height: 1.25;
  margin-bottom: 8px;
}
.mega-side-feature-cta {
  font-size: 12.5px; font-weight: 600;
  color: var(--dt-lime-dark);
}

/* BOTTOM strip — feature pills */
.mega-agents-foot {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  padding: 14px 0 18px;
  border-top: 1px solid rgba(1,55,61,.08);
}
.mega-foot-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(1,55,61,.04);
  border: 1px solid rgba(1,55,61,.10);
  font-size: 11.5px; font-weight: 500;
  color: rgba(1,55,61,.75);
  letter-spacing: .1px;
}
.mega-foot-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dt-lime-dark);
  box-shadow: 0 0 8px rgba(155,200,50,.5);
}
.mega-foot-dot-lilac { background: #a89eff; box-shadow: 0 0 8px rgba(168,158,255,.5); }
.mega-foot-pill-new {
  background: var(--dt-lime);
  border-color: var(--dt-lime);
  color: var(--dt-teal);
  font-weight: 700;
  letter-spacing: .8px;
}
.mega-item {
  display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: flex-start;
  padding: 14px; border-radius: 12px;
  transition: background .2s;
  text-align: left;
}
.mega-item:hover { background: rgba(255,255,255,.04); }
.mega-ico {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(192,244,61,.12); color: var(--dt-lime);
  display: flex; align-items: center; justify-content: center;
}
.mega-t { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.2; display: flex; align-items: center; gap: 6px; }
.mega-badge { background: var(--dt-lilac); color: var(--dt-teal); font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: .3px; }
.mega-d { font-size: 11.5px; color: rgba(255,255,255,.55); margin-top: 3px; line-height: 1.4; }

/* ================================================
   HERO
   ================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--nav-h) + 80px) var(--gutter) 100px;
  background: linear-gradient(165deg, #011a1f 0%, #01373d 55%, #012228 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  --scroll-p: 0;
}

/* Layered animated background for the hero */
.hero-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-aurora {
  position: absolute;
  filter: blur(120px);
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.hero-aurora-a {
  width: 720px; height: 540px;
  top: -10%; right: -8%;
  background: radial-gradient(closest-side, rgba(192,244,61,.55), transparent 70%);
  opacity: .42;
  animation: dt-float-lg 14s var(--dt-ease-in-out) infinite;
  /* `translate` composes with `transform` from the animation so
     scroll-driven parallax doesn't override the gentle float. */
  translate: calc(var(--scroll-p) * -40px) calc(var(--scroll-p) * -60px);
}
.hero-aurora-b {
  width: 640px; height: 640px;
  bottom: -16%; left: -12%;
  background: radial-gradient(closest-side, rgba(206,199,255,.50), transparent 70%);
  opacity: .55;
  animation: dt-float 18s var(--dt-ease-in-out) -3s infinite;
  translate: calc(var(--scroll-p) * 30px) calc(var(--scroll-p) * 80px);
}
.hero-aurora-c {
  width: 480px; height: 320px;
  top: 38%; left: 32%;
  background: radial-gradient(closest-side, rgba(91,213,213,.30), transparent 70%);
  opacity: .35;
  animation: dt-float 22s var(--dt-ease-in-out) -6s infinite;
}

.hero-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: 0 0;
  mask-image:
    radial-gradient(ellipse 70% 60% at 30% 38%, #000 0%, transparent 75%);
  -webkit-mask-image:
    radial-gradient(ellipse 70% 60% at 30% 38%, #000 0%, transparent 75%);
  opacity: .55;
  animation: hero-grid-pan 90s linear infinite;
}
@keyframes hero-grid-pan {
  from { background-position: 0 0; }
  to   { background-position: 320px 320px; }
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 72px; align-items: center;
}
@media (max-width: 1024px) { .hero-inner { grid-template-columns: 1fr; gap: 60px; } }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(192,244,61,.08);
  border: 1px solid rgba(192,244,61,.25);
  color: var(--dt-lime);
  font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  padding: 8px 16px; border-radius: 100px;
  margin-bottom: 32px;
  backdrop-filter: blur(6px);
}
.hero-eyebrow .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--dt-lime); box-shadow: 0 0 10px var(--dt-lime); animation: dt-pulse 1.8s var(--dt-ease-in-out) infinite; }

/* Cycling word — animated word swap inside flowing text.
   `.cycle-flow` (visible-but-obscured) provides the natural width
   so the surrounding text reflows; `.cycle-w` siblings overlay
   it with a vertical-slide cross-fade.                          */
.cycle {
  position: relative; display: inline-block;
  vertical-align: baseline;
  height: 1.15em; line-height: 1.15em;
  overflow: hidden;
  color: var(--dt-lime);
  font-weight: 700;
}
.cycle-flow {
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.cycle-w {
  position: absolute; left: 0; top: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(110%);
  transition:
    opacity   480ms var(--dt-ease-emph),
    transform 560ms var(--dt-ease-emph);
}
.cycle-w.is-in  { opacity: 1; transform: translateY(0); }
.cycle-w.is-out { opacity: 0; transform: translateY(-110%); }

/* Live ops chip — sits next to CTAs */
.hero-live {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 100px;
  font-size: 12.5px; color: rgba(255,255,255,.78);
  white-space: nowrap;
  backdrop-filter: blur(8px);
}
.hero-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.5);
  position: relative;
  animation: dt-pulse 2s var(--dt-ease-in-out) infinite;
}
.hero-live-dot::before {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(34,197,94,.45);
  animation: hero-live-ring 2s var(--dt-ease-out) infinite;
}
@keyframes hero-live-ring {
  0%   { transform: scale(.5); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.hero-live-n {
  font-variant-numeric: tabular-nums;
  font-weight: 700; color: #fff;
}
.hero-live-l { color: rgba(255,255,255,.55); }

.hero h1 {
  font-family: var(--dt-font-display);
  font-size: clamp(44px, 6vw, 88px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 28px;
}
.hero h1 .hl { color: var(--dt-lime); position: relative; display: inline-block; }
.hero h1 .hl::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 14px;
  background: var(--dt-lime); opacity: .18; border-radius: 4px; z-index: -1;
}
.hero h1 em { font-style: normal; color: var(--dt-lilac); }

.hero-sub {
  font-size: 19px; line-height: 1.6; color: rgba(255,255,255,.72);
  max-width: 560px; margin-bottom: 40px;
  text-wrap: pretty;
}
.hero-sub .cycle { font-size: inherit; }
.hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600;
  padding: 14px 24px; border-radius: 100px;
  transition: all .25s var(--dt-ease-out);
  white-space: nowrap;
}
.btn-primary { background: var(--dt-lime); color: var(--dt-teal); box-shadow: 0 0 0 1px rgba(192,244,61,.4), 0 8px 32px rgba(192,244,61,.25); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(192,244,61,.6), 0 16px 48px rgba(192,244,61,.35); }
.btn-ghost { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.12); }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }

.hero-trust {
  margin-top: 48px;
  display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap;
}
.hero-trust-t { font-size: 12px; color: rgba(255,255,255,.4); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }
.hero-trust-logos { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero-trust-logo { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.55); display: inline-flex; align-items: center; gap: 8px; }

/* Hero right — device area */
.hero-device { position: relative; display: flex; justify-content: center; align-items: center; min-height: 560px; }
.hero-device .glow-a { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: var(--dt-lime); filter: blur(120px); opacity: .2; top: 20%; right: -10%; animation: float 8s ease-in-out infinite; }
.hero-device .glow-b { position: absolute; width: 340px; height: 340px; border-radius: 50%; background: var(--dt-lilac); filter: blur(120px); opacity: .25; bottom: 10%; left: -15%; animation: float 10s ease-in-out -2s infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

/* ================================================
   SECTION BASE
   ================================================ */
section.sect {
  padding: 120px var(--gutter);
  position: relative;
}
.sect-inner { max-width: var(--max-w); margin: 0 auto; }
.sect-head { max-width: 780px; margin-bottom: 64px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--dt-teal);
  margin-bottom: 20px;
}
.eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--dt-lime-dark); }
.eyebrow.on-dark { color: var(--dt-lime); }
.eyebrow.on-dark::before { background: var(--dt-lime); }
.sect h2 {
  font-family: var(--dt-font-display);
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--dt-teal);
  margin-bottom: 24px;
}
.sect.on-dark h2 { color: #fff; }
.sect h2 .hl { color: var(--dt-lime-dark); }
.sect.on-dark h2 .hl { color: var(--dt-lime); }
.sect-sub {
  font-size: 19px; line-height: 1.55;
  color: var(--dt-fg-muted);
  text-wrap: pretty;
}
.sect.on-dark .sect-sub { color: rgba(255,255,255,.65); }

.sect.on-dark {
  background: linear-gradient(180deg, #012830 0%, #01373d 100%);
  color: #fff;
}
.sect.on-sand { background: var(--dt-sand); }

/* ================================================
   LOGO BAR
   ================================================ */
.logobar {
  padding: 56px var(--gutter) 60px;
  background: var(--dt-tone-cream);
  border-top: 1px solid rgba(1,55,61,.06);
}
.logobar-head {
  max-width: var(--max-w);
  margin: 0 auto 32px;
}
.logobar-marquee {
  position: relative;
  /* Escape the section's horizontal gutter so the marquee spans
     full viewport while the eyebrow stays aligned with other
     sections' headlines.                                          */
  margin: 0 calc(var(--gutter) * -1);
  width: auto;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.logobar-track {
  display: inline-flex; align-items: center; gap: 72px;
  width: max-content;
  animation: dt-marquee 36s linear infinite;
}
.logobar-logo {
  font-family: var(--dt-font-display);
  font-size: 26px; font-weight: 600;
  color: rgba(1,55,61,.55);
  letter-spacing: -.4px;
  white-space: nowrap;
  transition: color .25s var(--dt-ease-out);
}
.logobar-logo:hover { color: var(--dt-teal); }

/* ================================================
   SUITE — product tabs
   ================================================ */
.suite-grid { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .suite-grid { grid-template-columns: 1fr; } }
.suite-tabs { display: flex; flex-direction: column; gap: 6px; position: sticky; top: calc(var(--nav-h) + 24px); }
.suite-tab {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 16px; align-items: center;
  padding: 16px 18px; border-radius: 14px;
  border: 1px solid transparent;
  text-align: left;
  color: rgba(255,255,255,.7);
  transition: all .25s var(--dt-ease-out);
}
.suite-tab:hover { background: rgba(255,255,255,.04); }
.suite-tab.active {
  background: linear-gradient(180deg, rgba(192,244,61,.1), rgba(192,244,61,.02));
  border-color: rgba(192,244,61,.3);
  color: #fff;
}
.suite-tab-ico { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); }
.suite-tab.active .suite-tab-ico { background: var(--dt-lime); color: var(--dt-teal); }
.suite-tab-n { font-size: 16px; font-weight: 700; }
.suite-tab-d { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 2px; font-weight: 400; }
.suite-tab.active .suite-tab-d { color: rgba(255,255,255,.7); }
.suite-tab-badge { font-size: 9px; color: var(--dt-lilac); font-weight: 700; letter-spacing: .3px; text-transform: uppercase; background: rgba(206,199,255,.12); padding: 3px 7px; border-radius: 4px; }

.suite-stage {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  min-height: 540px;
  padding: 0;
  position: relative; overflow: hidden;
}
.suite-panel { position: absolute; inset: 0; padding: 40px; opacity: 0; pointer-events: none; transition: opacity .4s var(--dt-ease-out); display: flex; flex-direction: column; gap: 24px; }
.suite-panel.active { opacity: 1; pointer-events: auto; }
.suite-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.suite-panel-title { font-family: var(--dt-font-display); font-size: 36px; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1; }
.suite-panel-desc { font-size: 15px; color: rgba(255,255,255,.65); margin-top: 10px; line-height: 1.5; max-width: 480px; }
.suite-panel-link { color: var(--dt-lime); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }

.suite-feat-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8px; }
.suite-feat {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: flex-start;
  padding: 14px; border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.suite-feat-ic { width: 28px; height: 28px; border-radius: 8px; background: rgba(192,244,61,.12); color: var(--dt-lime); display: flex; align-items: center; justify-content: center; }
.suite-feat-t { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.2; }
.suite-feat-d { font-size: 11.5px; color: rgba(255,255,255,.55); margin-top: 3px; line-height: 1.4; }

/* ================================================
   METRICS
   ================================================ */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; overflow: hidden; }
@media (max-width: 900px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
.metric { background: #012830; padding: 32px 28px; display: flex; flex-direction: column; gap: 8px; }
.metric-num { font-family: var(--dt-font-display); font-size: 54px; font-weight: 700; color: var(--dt-lime); letter-spacing: -2px; line-height: 1; }
.metric-num sup { font-size: 24px; color: var(--dt-lime); vertical-align: super; margin-left: 2px; }
.metric-lbl { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3; }
.metric-sub { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 4px; }

/* ================================================
   TIME TO VALUE
   ================================================ */
.ttv-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .ttv-compare { grid-template-columns: 1fr; } }
.ttv-card { background: #fff; border: 1px solid var(--dt-border); border-radius: 20px; padding: 32px; position: relative; }
.ttv-card.bad { opacity: .72; }
.ttv-card.good { border-color: var(--dt-lime-dark); background: linear-gradient(180deg, #fff 0%, #fcffe7 100%); box-shadow: 0 24px 48px rgba(192,244,61,.15); }
.ttv-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 12px; border-radius: 6px; margin-bottom: 16px; }
.ttv-card.bad .ttv-tag { background: rgba(0,0,0,.05); color: var(--dt-fg-dim); }
.ttv-card.good .ttv-tag { background: var(--dt-lime); color: var(--dt-teal); }
.ttv-big {
  font-family: var(--dt-font-display);
  font-size: 64px; font-weight: 700;
  letter-spacing: -2px; line-height: 1;
  color: var(--dt-teal);
  margin-bottom: 24px;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px;
}
.ttv-card.bad .ttv-big { color: var(--dt-fg-dim); }
.ttv-unit-inline {
  font-family: var(--dt-font-display);
  font-size: 30px; font-weight: 700;
  letter-spacing: -.8px;
  color: var(--dt-fg-dim);
}
.ttv-card.good .ttv-unit-inline { color: var(--dt-lime-dark); }
.ttv-unit { font-size: 14px; font-weight: 600; color: var(--dt-fg-muted); margin-bottom: 24px; }
.ttv-list { display: flex; flex-direction: column; gap: 10px; }
.ttv-li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--dt-fg-muted); }
.ttv-li .dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.ttv-card.bad .dot { background: #f1f5f9; color: #94a3b8; }
.ttv-card.good .dot { background: var(--dt-lime); color: var(--dt-teal); }

/* ================================================
   CASE STUDY
   ================================================ */
.cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 900px) { .cases { grid-template-columns: 1fr; } }
.case {
  background: linear-gradient(160deg, #012830 0%, #013940 55%, #01535b 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 28px;
  padding: 44px 44px 40px;
  color: #fff;
  position: relative; overflow: hidden;
  min-height: 480px;
}
.case-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  height: 100%;
}
/* Orbs container clipped by card overflow */
.case-orbs {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  filter: blur(50px) saturate(1.6);
  opacity: .55;
  mix-blend-mode: screen;
}
/* Soft dark wash where text sits so orbs stay vivid in corners but copy reads */
.case::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(1,40,48,0) 0%, rgba(1,40,48,.35) 45%, rgba(1,40,48,.55) 100%);
}
.case-orb {
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  will-change: transform;
}
.case-orb-lime  { background: #c0f43d; top: -30%; left: -15%;  animation: caseOrbA 14s ease-in-out infinite; }
.case-orb-lilac { background: #cec7ff; top:  30%; left:  50%;  animation: caseOrbB 17s ease-in-out infinite; }
.case-orb-sand  { background: #f2e0c9; top:  55%; left: -25%;  animation: caseOrbC 20s ease-in-out infinite; }
/* Second card: distinct positions + delays so cards don't move in lockstep */
.case:nth-child(2) .case-orb-lime  { animation-delay: -5s;  top: 50%;  left:  55%; }
.case:nth-child(2) .case-orb-lilac { animation-delay: -9s;  top: -30%; left: -20%; }
.case:nth-child(2) .case-orb-sand  { animation-delay: -2s;  top: 55%;  left:   5%; }

@keyframes caseOrbA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  25%      { transform: translate3d(180px, 90px, 0) scale(1.15); }
  50%      { transform: translate3d(280px, -80px, 0) scale(.9); }
  75%      { transform: translate3d(60px, 200px, 0) scale(1.1); }
}
@keyframes caseOrbB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(-220px, 130px, 0) scale(1.12); }
  66%      { transform: translate3d(120px, -160px, 0) scale(.85); }
}
@keyframes caseOrbC {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.95); }
  20%      { transform: translate3d(160px, -110px, 0) scale(1.15); }
  60%      { transform: translate3d(-80px, 170px, 0) scale(1); }
  80%      { transform: translate3d(220px, 60px, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .case-orb { animation: none !important; }
}

.case-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--dt-lime);
  margin-bottom: 18px;
}
.case-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dt-lime);
  box-shadow: 0 0 0 4px rgba(192,244,61,.18);
}
.case-bank {
  font-family: var(--dt-font-display);
  font-size: 56px; font-weight: 700;
  letter-spacing: -2px; line-height: 1;
  color: #fff;
  margin-bottom: 20px;
}
.case-tagline {
  font-size: 16px; line-height: 1.5;
  color: rgba(255,255,255,.55);
  margin-bottom: 20px;
  max-width: 92%;
}
.case-body {
  font-size: 16px; line-height: 1.6;
  color: rgba(255,255,255,.82);
  margin: 0;
  max-width: 96%;
}
.case-foot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: auto; padding-top: 28px;
  border-top: 1px dashed rgba(255,255,255,.18);
}
.case-metric { display: flex; flex-direction: column; gap: 6px; }
.case-n {
  font-family: var(--dt-font-display);
  font-size: 36px; font-weight: 700;
  letter-spacing: -1.5px; line-height: 1;
  color: var(--dt-lime);
}
.case-l {
  font-size: 13px; line-height: 1.3;
  color: rgba(255,255,255,.55);
  letter-spacing: .2px;
}
@media (max-width: 600px) {
  .case { padding: 32px 28px; min-height: 0; }
  .case-bank { font-size: 44px; }
}

/* ================================================
   PARTNERS / TECH STACK — 2-block grid (integrations + human)
   ================================================ */
.tstack-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 40px;
}
@media (max-width: 900px) { .tstack-grid { grid-template-columns: 1fr; } }

.tstack-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(1,55,61,.08);
  border-radius: 24px;
  overflow: hidden;
}
.tstack-card-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--dt-lime-dark);
  margin-bottom: 8px;
}
.tstack-card-t {
  font-family: var(--dt-font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--dt-teal);
  letter-spacing: -.3px;
  line-height: 1.2;
  margin-bottom: 10px;
}
.tstack-card-d { font-size: 14px; line-height: 1.55; color: var(--dt-fg-muted); }

/* Integrations card content */
.tstack-integ { padding: 32px 32px 28px; }
.tstack-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(1,55,61,.06);
}
.tstack-logo {
  display: inline-flex; align-items: center; justify-content: center;
  height: 54px;
  background: #faf6ee;
  border: 1px solid rgba(1,55,61,.06);
  border-radius: 12px;
  transition: all .2s;
}
.tstack-logo:hover {
  background: #fff;
  border-color: rgba(155,200,50,.30);
}
.tstack-logo-img {
  display: inline-block;
  width: 28px; height: 28px;
  background-color: var(--dt-teal);
  -webkit-mask: var(--logo) center / contain no-repeat;
          mask: var(--logo) center / contain no-repeat;
  -webkit-mask-mode: alpha; mask-mode: alpha;
}
/* Wordmark logos that need wider boxes */
.tstack-logo[title="AWS"] .tstack-logo-img,
.tstack-logo[title="OpenAI"] .tstack-logo-img,
.tstack-logo[title="Genesys"] .tstack-logo-img {
  width: 64px; height: 22px;
}

/* Human card — photo on top, copy on bottom, with diagonal cut */
.tstack-human {
  display: flex; flex-direction: column;
  padding: 0;
}
.tstack-photo {
  position: relative;
  height: 280px;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}
.tstack-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 50%;
  display: block;
}
.tstack-human-copy {
  padding: 24px 32px 32px;
}
@media (max-width: 600px) {
  .tstack-photo { height: 220px; }
  .tstack-integ { padding: 24px 22px 22px; }
  .tstack-human-copy { padding: 22px 22px 24px; }
  .tstack-logos { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

/* ================================================
   CTA FINAL
   ================================================ */
.cta-final {
  padding: 120px var(--gutter);
  background: var(--dt-tone-cream);
  color: var(--dt-teal); position: relative; overflow: hidden;
}
.cta-final::before { content: ''; position: absolute; top: -180px; right: -160px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(192,244,61,.18), transparent 70%); pointer-events: none; }
.cta-final::after { content: ''; position: absolute; bottom: -240px; left: -180px; width: 660px; height: 660px; border-radius: 50%; background: radial-gradient(circle, rgba(206,199,255,.22), transparent 70%); pointer-events: none; }
.cta-final-inner { position: relative; max-width: var(--max-w); margin: 0 auto; }

/* 2-col grid: copy + form */
.cta-final-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 1000px) {
  .cta-final-grid { grid-template-columns: 1fr; gap: 56px; }
}

/* Left: title + sub + differentiators */
.cta-final-content .eyebrow { color: var(--dt-lime-dark); margin-bottom: 18px; }
.cta-final-content .eyebrow::before { background: var(--dt-lime-dark); }
.cta-final h2 {
  font-family: var(--dt-font-display);
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 700; line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 20px; color: var(--dt-teal);
}
.cta-final h2 .hl { color: var(--dt-lime-dark); }
.cta-final-sub {
  font-size: 18px; line-height: 1.55;
  color: rgba(1,55,61,.7);
  max-width: 520px;
  margin: 0 0 44px;
}
.cta-diffs { display: flex; flex-direction: column; gap: 24px; }
.cta-diff {
  display: flex; gap: 18px;
  align-items: flex-start;
}
.cta-diff-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(192,244,61,.28);
  border: 1px solid rgba(155,200,50,.45);
  color: var(--dt-teal);
  display: flex; align-items: center; justify-content: center;
}
.cta-diff-text { flex: 1; }
.cta-diff-title {
  font-family: var(--dt-font-display);
  font-size: 18px; font-weight: 700;
  color: var(--dt-teal); margin-bottom: 6px;
  letter-spacing: -0.3px;
}
.cta-diff-body {
  font-size: 14px; line-height: 1.55;
  color: rgba(1,55,61,.65);
}

/* Right: contact form */
.cta-form {
  background: #fff;
  border: 1px solid rgba(1,55,61,.10);
  border-radius: 24px;
  padding: 36px 32px;
  box-shadow: 0 24px 60px rgba(1,55,61,.10), 0 4px 16px rgba(1,55,61,.04);
  display: flex; flex-direction: column; gap: 16px;
}
.cta-form-eyebrow {
  font-family: var(--dt-font-display);
  font-size: 13px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--dt-lime-dark);
  margin-bottom: 4px;
}
.cta-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 520px) { .cta-form-row { grid-template-columns: 1fr; } }
.cta-field { display: flex; flex-direction: column; gap: 6px; }
.cta-field > span {
  font-size: 12px; font-weight: 600;
  color: rgba(1,55,61,.75);
  letter-spacing: .2px;
}
.cta-field > span em {
  color: var(--dt-lime-dark); font-style: normal; margin-left: 2px;
}
.cta-field input,
.cta-field textarea {
  background: #faf6ee;
  border: 1px solid rgba(1,55,61,.12);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit; font-size: 14px;
  color: var(--dt-teal);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  resize: vertical;
}
.cta-field input::placeholder,
.cta-field textarea::placeholder { color: rgba(1,55,61,.4); }
.cta-field input:focus,
.cta-field textarea:focus {
  outline: none;
  border-color: var(--dt-lime-dark);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(192,244,61,.22);
}
.cta-form-submit {
  width: 100%; justify-content: center;
  margin-top: 4px;
}
.cta-form-disclaimer {
  font-size: 12px; line-height: 1.5;
  color: rgba(1,55,61,.55);
  text-align: center;
}
.cta-form-disclaimer a { color: var(--dt-teal); text-decoration: underline; }

/* ================================================
   FOOTER
   ================================================ */
/* ── FOOTER — modern oversized layout ─────────────────────
   Sections (top → bottom):
     1) Newsletter strip (eyebrow + headline + email form)
     2) Main grid (brand + 4 nav cols)
     3) Partners / awards row (Microsoft · Meta · Cubo · GPTW)
     4) Bottom bar (copyright + tagline)
     5) Huge "delto" wordmark watermark
   --------------------------------------------------------- */
footer {
  background: var(--dt-teal);
  color: rgba(255,255,255,.6);
  padding: 120px var(--gutter) 0;
  position: relative;
  overflow: hidden;
}
.foot-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ── 1) NEWSLETTER ──────────────────────────────────────── */
.foot-news {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding-bottom: 80px;
  margin-bottom: 80px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  align-items: center;
}
@media (max-width: 880px) {
  .foot-news { grid-template-columns: 1fr; gap: 32px; padding-bottom: 64px; margin-bottom: 64px; }
}
.foot-news-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dt-lime);
  margin-bottom: 18px;
}
.foot-news-eyebrow::before {
  content: ''; width: 22px; height: 2px; background: var(--dt-lime);
}
.foot-news-title {
  font-family: var(--dt-font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 12px;
}
.foot-news-sub {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,.65);
  max-width: 460px;
  margin: 0;
}
.foot-news-form {
  width: 100%;
}
.foot-news-row {
  display: flex; gap: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px;
  padding: 6px;
  transition: border-color .25s var(--dt-ease-out), background .25s var(--dt-ease-out);
}
.foot-news-row:focus-within {
  border-color: rgba(192,244,61,.5);
  background: rgba(255,255,255,.09);
}
.foot-news-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 12px 20px;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
}
.foot-news-input::placeholder { color: rgba(255,255,255,.4); }
.foot-news-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  background: var(--dt-lime);
  color: var(--dt-teal);
  font-family: inherit;
  font-weight: 700; font-size: 14px;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s var(--dt-ease-out), box-shadow .25s var(--dt-ease-out);
}
.foot-news-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -10px rgba(192,244,61,.55);
}
.foot-news-disclaimer {
  font-size: 12px;
  color: rgba(255,255,255,.4);
  margin: 14px 0 0 6px;
}

/* ── 2) MAIN GRID ───────────────────────────────────────── */
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 48px;
  padding-bottom: 72px;
}
@media (max-width: 1000px) {
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; gap: 40px 32px; }
  .foot-brand { grid-column: 1 / -1; margin-bottom: 8px; max-width: 460px; }
}
@media (max-width: 600px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}
.foot-brand img { height: 32px; margin-bottom: 22px; }
.foot-brand p {
  font-size: 14px;
  line-height: 1.55;
  max-width: 320px;
  color: rgba(255,255,255,.6);
  margin: 0 0 28px;
}
.foot-col-t {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 20px;
}
.foot-links { display: flex; flex-direction: column; gap: 12px; }
.foot-links a {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  transition: color .2s, transform .2s;
}
.foot-links a:hover { color: var(--dt-lime); transform: translateX(2px); }
.foot-socials {
  display: flex; gap: 10px;
}
.foot-social {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7);
  transition: all .25s var(--dt-ease-out);
}
.foot-social:hover {
  background: var(--dt-lime);
  border-color: var(--dt-lime);
  color: var(--dt-teal);
  transform: translateY(-2px);
}

/* ── 3) BAND — badges (left) · socials + address (right) ─ */
.foot-band {
  padding: 40px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
@media (max-width: 880px) {
  .foot-band {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 36px 0;
  }
}

/* Loose badges — no cards, no labels, just the marks */
.foot-badges {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.foot-badges img {
  height: 26px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .85;
}
.foot-badges img.foot-badge-gptw {
  filter: none;
  opacity: 1;
  height: 44px;
}

/* Cubo Itaú — PNG is already white on transparent (Selo branco),
   skip the filter invert and bump the height since the seal is
   visually denser than the wordmark logos beside it. */
.foot-badges img.foot-badge-cubo {
  filter: none;
  opacity: 1;
  height: 48px;
}

/* Right side — socials + address */
.foot-right {
  display: flex;
  align-items: center;
  gap: 32px;
}
@media (max-width: 880px) {
  .foot-right { flex-direction: column-reverse; align-items: flex-start; gap: 20px; }
}
.foot-address {
  font-style: normal;
  display: flex; flex-direction: column;
  gap: 2px;
  text-align: right;
}
@media (max-width: 880px) {
  .foot-address { text-align: left; }
}
.foot-address-l {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.foot-address-v {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  letter-spacing: .2px;
}

/* ── 4) BOTTOM BAR ──────────────────────────────────────── */
.foot-bottom {
  padding: 32px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: rgba(255,255,255,.4);
}
.foot-bottom-meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  color: rgba(255,255,255,.35);
}

/* reveal animation — moved to assets/motion.css (variants, stagger, reduced-motion) */

/* Common utilities */
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ============================================================
   DELTO ORB CHAT — sticky glass orb (bottom-left)
   ============================================================ */

/* The orb itself — frosted/matte glass with vibrant interior +
   strong multi-color halo so it pops over any background.        */
.delto-orb {
  position: fixed;
  bottom: 26px; right: 26px;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 200;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 0 28px rgba(192,244,61,.45),
    0 0 56px rgba(206,199,255,.30),
    0 0 80px rgba(79,227,227,.20),
    0 18px 40px rgba(0,0,0,.45),
    0 6px 14px rgba(0,0,0,.32);
  transition:
    transform .45s var(--dt-ease-spring),
    box-shadow .35s var(--dt-ease-out);
  animation: delto-orb-bob 5s var(--dt-ease-in-out) infinite;
}
.delto-orb:hover {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16),
    0 0 36px rgba(192,244,61,.60),
    0 0 70px rgba(206,199,255,.40),
    0 0 100px rgba(79,227,227,.28),
    0 22px 48px rgba(0,0,0,.50);
}
@keyframes delto-orb-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.delto-orb:hover {
  animation: none;
  transform: scale(1.08) translateY(-4px);
  box-shadow:
    0 20px 56px rgba(192,244,61,.34),
    0 10px 28px rgba(206,199,255,.28),
    0 4px 12px rgba(0,0,0,.26);
}
.delto-orb.is-open {
  animation: none;
  transform: scale(.94);
}

/* Matte/frosted glass border + soft highlight (no harsh specular) */
.delto-orb::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(160deg, rgba(255,255,255,.10) 0%, transparent 55%);
  pointer-events: none;
  z-index: 3;
}
.delto-orb::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  /* Frosted overlay — diffuse light + gentle bottom shadow */
  backdrop-filter: blur(2px);
  background:
    radial-gradient(ellipse at 50% 110%, rgba(0,0,0,.18), transparent 55%),
    radial-gradient(ellipse at 50% -20%, rgba(255,255,255,.08), transparent 55%);
  pointer-events: none;
  z-index: 4;
}

/* Soft top diffuse highlight (replaces the polished specular) */
.delto-orb-shine {
  position: absolute;
  top: 8%; left: 20%; right: 20%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.18), transparent 65%);
  pointer-events: none;
  z-index: 5;
  filter: blur(2px);
}

/* Interior — very dark base so vivid blobs (in screen mode) pop */
.delto-orb-inner {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #001a20 0%, #000a0e 95%);
  overflow: hidden;
  z-index: 1;
}
.delto-orb-blob {
  position: absolute;
  border-radius: 50%;
  /* Less blur than before so colors stay defined and vivid */
  filter: blur(11px) saturate(1.3);
  mix-blend-mode: screen;
  will-change: transform;
  opacity: 1;
}
.delto-orb-blob-1 {
  /* Pure lime — vivid */
  width: 70%; height: 70%; top: 15%; left: 15%;
  background: #c0f43d;
  animation: orb-drift-1 5.5s ease-in-out infinite alternate;
}
.delto-orb-blob-2 {
  /* Vivid lilac */
  width: 65%; height: 65%; top: 17%; left: 17%;
  background: #a89ef5;
  animation: orb-drift-2 6.3s ease-in-out infinite alternate;
}
.delto-orb-blob-3 {
  /* Electric cyan / aqua */
  width: 60%; height: 60%; top: 20%; left: 20%;
  background: #00e5e5;
  animation: orb-drift-3 4.8s ease-in-out infinite alternate;
}
.delto-orb-blob-4 {
  /* Bright teal — rounds out the palette */
  width: 55%; height: 55%; top: 22%; left: 22%;
  background: #2bd9d9;
  animation: orb-drift-4 5.9s ease-in-out infinite alternate;
}
@keyframes orb-drift-1 {
  0%   { transform: translate(-60%, -55%) scale(.85); }
  50%  { transform: translate(45%,  35%) scale(1.15); }
  100% { transform: translate(20%,  60%) scale(.95); }
}
@keyframes orb-drift-2 {
  0%   { transform: translate(55%, -45%) scale(1.05); }
  50%  { transform: translate(-45%, 35%) scale(1.20); }
  100% { transform: translate(45%,  55%) scale(.90); }
}
@keyframes orb-drift-3 {
  0%   { transform: translate(25%, 55%)  scale(1.00); }
  50%  { transform: translate(-55%, -25%) scale(1.10); }
  100% { transform: translate(45%, -45%) scale(.85); }
}
@keyframes orb-drift-4 {
  0%   { transform: translate(-35%, 45%) scale(.95); }
  50%  { transform: translate(45%, -35%) scale(1.20); }
  100% { transform: translate(-25%, -45%) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .delto-orb { animation: none; }
  .delto-orb-blob { animation: none; }
}

/* ── Chat panel ───────────────────────────────────────── */
.delto-chat {
  position: fixed;
  bottom: 110px; right: 26px;
  width: 360px;
  max-height: calc(100vh - 140px);
  background: rgba(2, 30, 35, .92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  z-index: 199;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    0 32px 80px rgba(0,0,0,.42),
    0 16px 36px rgba(192,244,61,.10);
  overflow: hidden;
  display: flex; flex-direction: column;
  transform-origin: bottom right;
  animation: delto-chat-in .35s var(--dt-ease-spring) both;
}
@keyframes delto-chat-in {
  from { opacity: 0; transform: translateY(14px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.delto-chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(192,244,61,.05), transparent);
}
.delto-chat-ava {
  width: 38px; height: 38px;
  border-radius: 50%;
  position: relative; overflow: hidden;
  background: radial-gradient(circle at 30% 25%, #04535b, #01262c 80%);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 4px 12px rgba(192,244,61,.20);
  flex-shrink: 0;
}
.delto-chat-ava-orb {
  position: absolute; inset: 4px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, var(--dt-lime), transparent 50%),
    radial-gradient(circle at 70% 60%, var(--dt-lilac), transparent 50%),
    radial-gradient(circle at 50% 80%, #5bd5d5, transparent 50%);
  filter: blur(2px);
  animation: dt-pulse-soft 3s ease-in-out infinite;
}
.delto-chat-meta { flex: 1; min-width: 0; }
.delto-chat-t {
  font-family: var(--dt-font-display);
  font-size: 15px; font-weight: 700;
  color: #fff;
}
.delto-chat-s {
  font-size: 11px;
  color: rgba(255,255,255,.55);
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
  letter-spacing: .2px;
}
.delto-chat-s .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dt-lime);
  box-shadow: 0 0 8px var(--dt-lime);
  animation: dt-pulse 1.5s ease-in-out infinite;
}
.delto-chat-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.65);
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  flex-shrink: 0;
}
.delto-chat-close:hover {
  background: rgba(255,255,255,.10);
  color: #fff;
}

.delto-chat-body {
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto;
}
.delto-chat-bot {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 12px 14px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  font-size: 13.5px;
  color: rgba(255,255,255,.92);
  line-height: 1.5;
}
.delto-chat-suggests {
  display: flex; flex-direction: column; gap: 6px;
}
.delto-chat-suggests button {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: rgba(192,244,61,.06);
  border: 1px solid rgba(192,244,61,.20);
  border-radius: 100px;
  color: var(--dt-lime);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all .25s var(--dt-ease-out);
  font-family: inherit;
}
.delto-chat-suggests button:hover {
  background: rgba(192,244,61,.12);
  border-color: rgba(192,244,61,.40);
  transform: translateX(3px);
}
.delto-chat-suggest-arr {
  font-size: 14px;
  opacity: .55;
  transition: transform .25s var(--dt-ease-out), opacity .25s;
}
.delto-chat-suggests button:hover .delto-chat-suggest-arr {
  opacity: 1;
  transform: translateX(2px);
}

.delto-chat-input {
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; gap: 8px; align-items: center;
  background: rgba(0,0,0,.20);
}
.delto-chat-input input {
  flex: 1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  padding: 9px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  min-width: 0;
  transition: border-color .2s;
}
.delto-chat-input input::placeholder {
  color: rgba(255,255,255,.38);
}
.delto-chat-input input:focus {
  border-color: rgba(192,244,61,.45);
}
.delto-chat-input button {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--dt-lime);
  color: var(--dt-teal);
  border: 0;
  cursor: pointer;
  font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .2s;
}
.delto-chat-input button:hover {
  background: var(--dt-lime-light);
  transform: translateY(-1px);
}

/* Mobile */
@media (max-width: 480px) {
  .delto-orb {
    bottom: 18px; right: 18px;
    width: 56px; height: 56px;
  }
  .delto-chat {
    left: 14px; right: 14px;
    width: auto;
    bottom: 88px;
  }
}

/* ================================================
   HERO v2 — ticker, floating skills, parallax
   ================================================ */
.hero-ticker {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 28px; margin-bottom: 4px;
}
.hero-ticker-chip {
  padding: 10px 14px; min-width: 120px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: 3px;
}
.hero-ticker-v {
  font-family: var(--dt-font-display);
  font-size: 22px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.5px;
}
.hero-ticker-v span {
  font-size: 13px; color: var(--dt-lime); margin-left: 2px; font-weight: 600;
}
.hero-ticker-l {
  font-size: 11px; color: rgba(255,255,255,.5); letter-spacing: .5px;
  font-weight: 500; text-transform: lowercase;
}

/* Mouse parallax on the device cluster */
.hero-device {
  --mx: 0; --my: 0;
  perspective: 1200px;
}
.hero-device > .hero-split,
.hero-device > .wa-phone,
.hero-device > .wc-widget {
  transition: transform .35s var(--dt-ease-out);
  transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -10px), 0)
             rotateY(calc(var(--mx) * -3deg)) rotateX(calc(var(--my) * 3deg));
  transform-style: preserve-3d;
}

/* Floating skill chips around the device */
.hero-skills {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.hero-skill {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: rgba(2,30,36,.72);
  border: 1px solid rgba(192,244,61,.22);
  border-radius: 100px;
  color: rgba(255,255,255,.92);
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  animation: hero-skill-bob 6s var(--dt-ease-in-out) infinite;
  transform: translate3d(calc(var(--mx) * -8px), calc(var(--my) * -6px), 0);
  transition: transform .4s var(--dt-ease-out);
}
.hero-skill-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--dt-lime);
  box-shadow: 0 0 8px var(--dt-lime);
  animation: dt-pulse 2s var(--dt-ease-in-out) infinite;
}
@keyframes hero-skill-bob {
  0%, 100% { transform: translateY(0) translate3d(calc(var(--mx) * -8px), calc(var(--my) * -6px), 0); }
  50%      { transform: translateY(-8px) translate3d(calc(var(--mx) * -8px), calc(var(--my) * -6px), 0); }
}
@media (max-width: 1024px) { .hero-skills { display: none; } }

/* (logobar marquee styles consolidated above) */

/* ================================================
   CONVOS SHOWCASE — three phones in parallel
   ================================================ */
.sect.on-cream { background: #fbfaf6; color: var(--dt-teal); }

.convos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}
@media (max-width: 1000px) { .convos-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; } }

.convo-phone { position: relative; }
.convo-phone-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  margin-bottom: 18px;
}
.convo-phone-dot {
  width: 7px; height: 7px; border-radius: 50%;
  animation: dt-pulse 1.8s var(--dt-ease-in-out) infinite;
}
.convo-phone.tone-teal .convo-phone-tag { background: rgba(1,55,61,.08); color: var(--dt-teal); }
.convo-phone.tone-teal .convo-phone-dot { background: var(--dt-teal); box-shadow: 0 0 8px rgba(1,55,61,.5); }
.convo-phone.tone-lilac .convo-phone-tag { background: rgba(168,158,245,.18); color: #5b4fc4; }
.convo-phone.tone-lilac .convo-phone-dot { background: #5b4fc4; box-shadow: 0 0 8px rgba(91,79,196,.5); }
.convo-phone.tone-sand .convo-phone-tag { background: rgba(155,200,50,.18); color: #5a7813; }
.convo-phone.tone-sand .convo-phone-dot { background: #9bc832; box-shadow: 0 0 8px rgba(155,200,50,.7); }

.convo-phone-frame {
  position: relative;
  background: #0c1518;
  border-radius: 38px;
  padding: 14px 10px 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 24px 60px rgba(1,55,61,.18),
    0 8px 24px rgba(1,55,61,.10);
  transition: transform .4s var(--dt-ease-out);
}
.convo-phone-frame:hover { transform: translateY(-6px); }
.convo-phone-notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 22px; background: #000; border-radius: 14px;
  z-index: 2;
}

.convo-phone-screen {
  background: linear-gradient(180deg, #efe9d9 0%, #ece5d3 100%);
  border-radius: 28px;
  height: 480px;
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
}
.convo-phone.tone-lilac .convo-phone-screen { background: linear-gradient(180deg, #ebe6ff 0%, #ddd4ff 100%); }
.convo-phone.tone-sand  .convo-phone-screen { background: linear-gradient(180deg, #e8eed8 0%, #dde7c5 100%); }

.convo-phone-head {
  display: flex; align-items: center; gap: 12px;
  padding: 28px 18px 14px;
  background: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(0,0,0,.04);
  backdrop-filter: blur(6px);
}
.convo-phone-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--dt-teal), var(--dt-teal-lighter));
  color: var(--dt-lime);
  font-family: var(--dt-font-display); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: .5px;
  box-shadow: 0 4px 12px rgba(1,55,61,.25);
}
.convo-phone.tone-lilac .convo-phone-avatar { background: linear-gradient(135deg, #6b5ec9, #8775db); color: #fff; }
.convo-phone.tone-sand  .convo-phone-avatar { background: linear-gradient(135deg, #d4a020, #e8b540); color: #fff; }
.convo-phone-brand {
  font-family: var(--dt-font-display);
  font-size: 14px; font-weight: 700; color: var(--dt-teal); line-height: 1.1;
}
.convo-phone-status {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: rgba(1,55,61,.55); margin-top: 2px;
}
.convo-phone-status span {
  width: 6px; height: 6px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 4px #22c55e;
}

.convo-phone-body {
  flex: 1;
  padding: 14px 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
  overflow: hidden;
  justify-content: flex-end;
}

.convo-bubble {
  max-width: 85%;
  padding: 9px 13px;
  font-size: 13px; line-height: 1.4;
  border-radius: 16px;
  animation: convo-bubble-in .35s var(--dt-ease-out) both;
}
@keyframes convo-bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.convo-bot {
  align-self: flex-start;
  background: #fff;
  color: var(--dt-teal);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.convo-user {
  align-self: flex-end;
  background: linear-gradient(135deg, #d9fdd3, #c2f0b9);
  color: #0d3210;
  border-bottom-right-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.convo-phone.tone-lilac .convo-user { background: linear-gradient(135deg, #b3a4f0, #9682e6); color: #fff; }
.convo-phone.tone-sand  .convo-user { background: linear-gradient(135deg, #c0f43d, #9bc832); color: #1f2a06; }

.convo-typing {
  padding: 10px 14px; display: inline-flex; gap: 4px; align-items: center;
}
.convo-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(1,55,61,.4);
  animation: convo-typing-dot 1.2s var(--dt-ease-in-out) infinite;
}
.convo-typing span:nth-child(2) { animation-delay: .15s; }
.convo-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes convo-typing-dot {
  0%, 80%, 100% { opacity: .3; transform: translateY(0); }
  40%           { opacity: 1;  transform: translateY(-3px); }
}

/* In-bubble cards */
.convo-card { padding: 12px; max-width: 90%; }
.cc-pay-head { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; color: rgba(1,55,61,.5); letter-spacing: 1px; }
.cc-pay-amt { font-family: var(--dt-font-display); font-size: 22px; font-weight: 700; color: var(--dt-teal); margin: 6px 0 2px; letter-spacing: -.5px; }
.cc-pay-src { font-size: 11px; color: rgba(1,55,61,.55); margin-bottom: 8px; }
.cc-pay-cta {
  text-align: center; padding: 8px; border-radius: 10px;
  background: var(--dt-lime); color: var(--dt-teal);
  font-size: 12px; font-weight: 700;
}
.cc-d-row, .cc-loan-row {
  display: flex; justify-content: space-between; padding: 6px 0;
  border-bottom: 1px solid rgba(1,55,61,.06); font-size: 12px;
}
.cc-d-row:last-child, .cc-loan-row:last-child { border-bottom: 0; }
.cc-d-row span, .cc-loan-row span { color: rgba(1,55,61,.6); }
.cc-d-row b, .cc-loan-row b { color: var(--dt-teal); font-weight: 700; }
.cc-d-pending { color: #d97706 !important; }
.cc-loan-amt {
  font-family: var(--dt-font-display);
  font-size: 26px; font-weight: 700; color: var(--dt-teal);
  letter-spacing: -1px; margin-bottom: 6px;
}
.cc-loan-cta {
  margin-top: 10px; text-align: center;
  padding: 8px; border-radius: 10px;
  background: var(--dt-teal); color: var(--dt-lime);
  font-size: 12px; font-weight: 700;
}

/* ================================================
   ARCHITECTURE
   ================================================ */
.arch-sect { padding-top: 100px; padding-bottom: 100px; }
.arch-diagram {
  display: flex; flex-direction: column; gap: 0;
  max-width: 980px; margin: 0 auto;
}

.arch-layer {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  padding: 26px 28px;
  transition: all .4s var(--dt-ease-out);
}
.arch-layer.is-pulse {
  border-color: rgba(192,244,61,.45);
  box-shadow: 0 0 0 1px rgba(192,244,61,.2), 0 0 60px rgba(192,244,61,.18);
}
.arch-layer-head { margin-bottom: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.arch-layer-t { font-family: var(--dt-font-display); font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -.3px; }
.arch-layer-d { font-size: 13px; color: rgba(255,255,255,.55); }

/* L1 channels */
.arch-channels {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
@media (max-width: 720px) { .arch-channels { grid-template-columns: repeat(3, 1fr); } }
.arch-channel {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 16px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: all .3s var(--dt-ease-out);
  animation: arch-bob 4s var(--dt-ease-in-out) infinite;
}
.arch-channel:hover {
  transform: translateY(-2px);
  background: rgba(192,244,61,.06);
  border-color: rgba(192,244,61,.25);
}
.arch-channel-i {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(192,244,61,.10); color: var(--dt-lime);
  display: flex; align-items: center; justify-content: center;
}
.arch-channel-n { font-size: 12px; color: rgba(255,255,255,.85); font-weight: 600; }
@keyframes arch-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Wires between layers */
.arch-wire {
  height: 60px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.arch-wire svg { width: 100%; height: 100%; display: block; }
.arch-wire-line {
  stroke: rgba(255,255,255,.12);
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
}
.arch-wire-pulse {
  stroke-width: 2.4;
  fill: none;
  opacity: 0;
}
.arch-wire.is-on .arch-wire-pulse {
  opacity: 1;
  animation: arch-pulse-x 1.6s linear infinite;
}
@keyframes arch-pulse-x {
  0%   { transform: translateX(-200px); }
  100% { transform: translateX(620px); }
}

/* L2 studio */
.arch-layer-studio {
  background: linear-gradient(180deg, rgba(192,244,61,.10), rgba(192,244,61,.02));
  border-color: rgba(192,244,61,.22);
}
.arch-studio-card {
  position: relative;
  padding: 6px 0 4px;
}
.arch-studio-badge {
  display: inline-block;
  font-size: 10px; font-weight: 800; letter-spacing: 2px;
  padding: 5px 10px;
  background: var(--dt-lime); color: var(--dt-teal);
  border-radius: 6px;
  margin-bottom: 14px;
}
.arch-studio-t {
  font-family: var(--dt-font-display);
  font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -.5px;
  margin-bottom: 14px;
}
.arch-studio-pillars { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.arch-pillar {
  padding: 6px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.9);
}
.arch-studio-llms {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 11px; color: rgba(255,255,255,.55);
  font-family: var(--dt-font-mono);
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.arch-studio-llms span { display: inline-flex; align-items: center; gap: 6px; }
.arch-studio-llms span::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--dt-lime);
}
.arch-anns {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 14px;
}
.arch-ann {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: rgba(255,255,255,.7);
  padding: 5px 10px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 100px;
}
.arch-ann .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--dt-lilac); }

/* L3 skills */
.arch-skills { display: flex; flex-wrap: wrap; gap: 8px; }
.arch-skill {
  padding: 8px 14px;
  background: rgba(206,199,255,.10);
  border: 1px solid rgba(206,199,255,.25);
  border-radius: 100px;
  font-size: 12.5px; font-weight: 600; color: var(--dt-lilac);
  animation: arch-skill-in .5s var(--dt-ease-out) both;
  transition: all .25s var(--dt-ease-out);
}
.arch-skill:hover {
  background: rgba(206,199,255,.2);
  transform: translateY(-2px);
}
@keyframes arch-skill-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* L4 APIs */
.arch-apis {
  display: grid; grid-template-columns: repeat(5, 1fr) auto;
  gap: 10px; align-items: center;
}
@media (max-width: 800px) { .arch-apis { grid-template-columns: repeat(2, 1fr); } }
.arch-api {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 13px; font-weight: 600;
  color: #fff;
  transition: all .25s var(--dt-ease-out);
}
.arch-api:hover { transform: translateY(-2px); }
.arch-api-status {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  animation: dt-pulse 2s var(--dt-ease-in-out) infinite;
}
.arch-api-lime  { border-color: rgba(192,244,61,.30); }
.arch-api-lime  .arch-api-status  { background: var(--dt-lime); box-shadow: 0 0 8px rgba(192,244,61,.7); }
.arch-api-lilac { border-color: rgba(206,199,255,.30); color: #fff; }
.arch-api-lilac .arch-api-status  { background: var(--dt-lilac); box-shadow: 0 0 8px rgba(206,199,255,.7); }
.arch-api-sand  { border-color: rgba(242,224,201,.30); }
.arch-api-sand  .arch-api-status  { background: var(--dt-sand); box-shadow: 0 0 8px rgba(242,224,201,.7); }
.arch-api-cyan  { border-color: rgba(91,213,213,.30); }
.arch-api-cyan  .arch-api-status  { background: var(--dt-chart-cyan); box-shadow: 0 0 8px rgba(91,213,213,.7); }

.arch-api-meta {
  font-size: 11px; color: rgba(255,255,255,.5);
  font-family: var(--dt-font-mono);
  padding: 10px 12px;
  white-space: nowrap;
}

/* ================================================
   SUITE — real screenshot frame
   ================================================ */
.suite-shot {
  position: relative;
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 720px) { .suite-shot { grid-template-columns: 1fr; } }
.suite-shot-frame {
  position: relative;
  background: #0e1517;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0,0,0,.4);
}
.suite-shot-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.suite-shot-bar > span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.18);
}
.suite-shot-bar > span:nth-child(1) { background: #ff5f57; }
.suite-shot-bar > span:nth-child(2) { background: #ffbd2e; }
.suite-shot-bar > span:nth-child(3) { background: #28c840; }
.suite-shot-bar em {
  font-style: normal; font-size: 11px;
  color: rgba(255,255,255,.45);
  font-family: var(--dt-font-mono);
  margin-left: 12px;
}
.suite-shot-frame img {
  display: block; width: 100%; height: auto;
  background: #fff;
}

.suite-shot-side {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  align-self: stretch;
  display: flex;
}
.suite-shot-side img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  background: #fff;
}

.suite-shot-glow {
  position: absolute; inset: -40px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(192,244,61,.18), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(206,199,255,.16), transparent 60%);
  pointer-events: none;
  z-index: -1;
  filter: blur(40px);
}

/* ================================================
   SKILLS LIBRARY
   ================================================ */
.sect.on-lilac { background: var(--dt-lilac-light); color: var(--dt-teal); }
.skills-sect { position: relative; overflow: hidden; }
.skills-sect::before {
  content: ''; position: absolute;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(206,199,255,.7), transparent 70%);
  top: -200px; right: -200px;
  pointer-events: none;
  filter: blur(40px);
}

.skills-controls {
  display: flex; align-items: center; gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.skills-counter {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 14px 22px;
  background: var(--dt-teal);
  border-radius: 16px;
  color: var(--dt-lime);
  flex-shrink: 0;
}
.skills-counter-n {
  font-family: var(--dt-font-display);
  font-size: 36px; font-weight: 700;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.skills-counter-l {
  font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

.skills-cats {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.skills-cat {
  padding: 8px 14px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(1,55,61,.08);
  border-radius: 100px;
  color: var(--dt-teal);
  font-size: 12.5px; font-weight: 600;
  transition: all .2s var(--dt-ease-out);
}
.skills-cat:hover { background: #fff; border-color: rgba(1,55,61,.15); }
.skills-cat.active {
  background: var(--dt-teal);
  color: #fff;
  border-color: var(--dt-teal);
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.skill-card {
  position: relative;
  padding: 18px 18px 16px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(1,55,61,.08);
  border-radius: 14px;
  transition: all .25s var(--dt-ease-out);
  cursor: pointer;
  animation: skill-card-in .4s var(--dt-ease-out) both;
}
@keyframes skill-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.skill-card:hover {
  background: #fff;
  border-color: var(--dt-teal);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(1,55,61,.10);
}
.skill-card-tag {
  display: inline-block;
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.skill-card.sk-cat-acc   .skill-card-tag { background: rgba(192,244,61,.25); color: #5a7813; }
.skill-card.sk-cat-card  .skill-card-tag { background: rgba(206,199,255,.40); color: #4a3fb0; }
.skill-card.sk-cat-pay   .skill-card-tag { background: rgba(242,224,201,.55); color: #8a6020; }
.skill-card.sk-cat-loan  .skill-card-tag { background: rgba(91,213,213,.25); color: #2a7575; }
.skill-card.sk-cat-coll  .skill-card-tag { background: rgba(192,244,61,.25); color: #5a7813; }
.skill-card.sk-cat-fraud .skill-card-tag { background: rgba(239,68,68,.15); color: #b3201a; }
.skill-card.sk-cat-onb   .skill-card-tag { background: rgba(206,199,255,.40); color: #4a3fb0; }
.skill-card.sk-cat-supp  .skill-card-tag { background: rgba(91,213,213,.25); color: #2a7575; }

.skill-card-n {
  font-family: var(--dt-font-display);
  font-size: 16px; font-weight: 700; color: var(--dt-teal);
  letter-spacing: -.2px; line-height: 1.25;
  margin-bottom: 4px;
}
.skill-card-d {
  font-size: 13px; color: rgba(1,55,61,.65);
  line-height: 1.4;
}
.skill-card-arrow {
  position: absolute; top: 16px; right: 14px;
  color: rgba(1,55,61,.25);
  transition: all .25s var(--dt-ease-out);
}
.skill-card:hover .skill-card-arrow {
  color: var(--dt-teal);
  transform: translate(2px, -2px);
}

/* ================================================
   COMPLIANCE GRID
   ================================================ */
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
@media (max-width: 900px) { .compliance-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .compliance-grid { grid-template-columns: 1fr; } }
.compliance-card {
  position: relative;
  padding: 28px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  transition: all .3s var(--dt-ease-out);
  overflow: hidden;
}
.compliance-card::before {
  content: ''; position: absolute;
  top: -40%; right: -40%;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(192,244,61,.15), transparent 70%);
  opacity: 0;
  transition: opacity .3s;
}
.compliance-card:hover {
  border-color: rgba(192,244,61,.28);
  transform: translateY(-4px);
}
.compliance-card:hover::before { opacity: 1; }
.compliance-ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(192,244,61,.10); color: var(--dt-lime);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.compliance-t { font-family: var(--dt-font-display); font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.compliance-d { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.65); }

.compliance-badges {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 24px 28px;
  background: rgba(192,244,61,.08);
  border: 1px solid rgba(192,244,61,.18);
  border-radius: 18px;
}
.compliance-badges span {
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  padding: 6px 12px;
  background: rgba(192,244,61,.12);
  border: 1px solid rgba(192,244,61,.25);
  border-radius: 100px;
  color: var(--dt-lime);
}

/* ================================================
   TTV TIMELINE
   ================================================ */
.ttv-guarantee {
  margin-top: 24px; padding: 16px;
  background: rgba(192,244,61,.25); border-radius: 12px;
  font-size: 13px; font-weight: 600; color: var(--dt-teal);
}

.ttv-timeline {
  margin-top: 56px;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--dt-border);
  border-radius: 20px;
}
.ttv-timeline-h {
  font-family: var(--dt-font-display);
  font-size: 18px; font-weight: 700; color: var(--dt-teal);
  margin-bottom: 28px;
}
.ttv-timeline-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
}
@media (max-width: 700px) { .ttv-timeline-track { grid-template-columns: 1fr 1fr; } }
.ttv-timeline-bar {
  position: absolute; top: 18px; left: 18px; right: 18px;
  height: 2px;
  background: linear-gradient(90deg, var(--dt-lime-dark), var(--dt-lime));
  border-radius: 2px;
  z-index: 0;
}
.ttv-tl-step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 12px;
  animation: ttv-tl-in .6s var(--dt-ease-out) both;
}
@keyframes ttv-tl-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ttv-tl-dot {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--dt-lime); color: var(--dt-teal);
  font-family: var(--dt-font-display);
  font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px var(--dt-sand), 0 6px 16px rgba(192,244,61,.4);
}
.ttv-tl-wk { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dt-fg-dim); margin-bottom: 4px; }
.ttv-tl-t { font-size: 14px; font-weight: 600; color: var(--dt-teal); line-height: 1.3; }

/* Metric counter sup styling — shared */
.metric-num sup {
  font-size: 26px;
  vertical-align: super;
  margin-left: 2px;
  opacity: .9;
}

/* ============================================================
   HERO + AGENTS COMBINED (Hero v3)
   The hero section now contains both the hero pitch and the
   agents-by-use-case showcase. The WhatsApp phone is rendered
   once and stays sticky on the right column as the user scrolls
   from the hero copy into the agents navigator.
   ============================================================ */

.ha-section {
  /* override base hero padding because content is taller now */
  padding-top: var(--nav-h);
  padding-bottom: 0;
  min-height: auto;
  /* `overflow: hidden` on the hero would trap our sticky phone.
     We move the clipping responsibility to .hero-bg below.       */
  overflow: visible;
}
.ha-section .hero-bg { overflow: hidden; }

.ha-wrap {
  position: relative; z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-areas:
    "hero   phone"
    "agents phone";
  column-gap: 80px;
  align-items: stretch;
}
.ha-wrap > .ha-hero      { grid-area: hero; position: relative; z-index: 1; }
.ha-wrap > .ha-agents    { grid-area: agents; position: relative; z-index: 1; }
.ha-wrap > .ha-phone-col { grid-area: phone; position: relative; z-index: 1; }

/* Cream band — sits behind the agents row and the lower portion of the
   phone column. Breaks out of .ha-wrap's max-width to fill the viewport
   horizontally. Painted first in DOM so subsequent siblings layer over. */
.ha-cream-bg {
  grid-row: 2;
  grid-column: 1 / -1;
  background: #fbfaf6;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .ha-wrap {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "phone"
      "agents";
    column-gap: 0;
  }
  /* Cream band follows the agents row, which is now row 3 on mobile. */
  .ha-cream-bg {
    grid-row: 3;
    grid-column: 1 / -1;
  }
}

/* ── Hero copy block ──────────────────────────────────── */
.ha-hero {
  min-height: calc(100vh - var(--nav-h));
  display: flex; flex-direction: column; justify-content: center;
  padding: 80px 0 100px;
  position: relative;
}
@media (max-width: 1100px) {
  .ha-hero {
    min-height: 0;
    padding: 60px 0 40px;
  }
  .ha-scrollhint { display: none; }
}
.ha-hero h1 {
  font-family: var(--dt-font-display);
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: 28px;
}
.ha-hero h1 .hl { color: var(--dt-lime); position: relative; display: inline-block; }
.ha-hero h1 .hl::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 14px;
  background: var(--dt-lime); opacity: .18; border-radius: 4px; z-index: -1;
}
.ha-hero h1 em { font-style: normal; color: var(--dt-lilac); }

/* "scroll" hint at the bottom of the hero copy */
.ha-scrollhint {
  position: absolute; bottom: 32px; left: 0;
  display: flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,.45);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 600;
}
.ha-scrollhint-line {
  position: relative; width: 80px; height: 1px;
  background: rgba(255,255,255,.18);
  overflow: hidden;
}
.ha-scrollhint-line::after {
  content: ''; position: absolute; inset: 0;
  width: 30px; background: var(--dt-lime);
  animation: ha-scrollhint 2.6s var(--dt-ease-in-out) infinite;
}
@keyframes ha-scrollhint {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(280%); }
  100% { transform: translateX(280%); }
}
@media (max-width: 1100px) {
  .ha-scrollhint { display: none; }
}

/* ── Agents navigator block (cream background) ────────── */
.ha-agents {
  padding: 80px 0 140px;
  scroll-margin-top: var(--nav-h);
}
.ha-agents-head { max-width: 540px; margin-bottom: 36px; }
.ha-agents-head h2 {
  font-family: var(--dt-font-display);
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--dt-teal);
  margin-bottom: 18px;
}
.ha-agents-head h2 .hl { color: var(--dt-lime-dark); }
.ha-agents-head h2 em { font-style: normal; color: var(--dt-teal); }
.ha-agents-sub {
  font-size: 17px; line-height: 1.55;
  color: rgba(1,55,61,.72);
  text-wrap: pretty;
}

.ha-agents-list {
  display: flex; flex-direction: column;
  gap: 6px;
}
.ha-agent-row {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(1,55,61,.08);
  background: rgba(255,255,255,.55);
  transition: all .3s var(--dt-ease-out);
  overflow: hidden;
}
.ha-agent-row.active {
  background: #ffffff;
  border-color: rgba(155,200,50,.55);
  box-shadow:
    0 18px 40px rgba(1,55,61,.10),
    0 2px 6px rgba(1,55,61,.04);
}
.ha-agent-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--dt-lime-dark);
  opacity: 0;
  transform: translateX(-3px);
  transition: all .3s var(--dt-ease-out);
}
.ha-agent-row.active::before { opacity: 1; transform: translateX(0); }

.ha-agent {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr 18px;
  gap: 16px; align-items: center;
  padding: 16px 18px 16px 18px;
  border-radius: 14px;
  background: transparent;
  border: 0;
  text-align: left;
  color: var(--dt-teal);
  font-family: inherit;
  cursor: pointer;
  transition: all .25s var(--dt-ease-out);
}
.ha-agent-row:not(.active) .ha-agent:hover {
  background: rgba(1,55,61,.03);
}
.ha-agent-num {
  font-family: var(--dt-font-mono);
  font-size: 12px; font-weight: 600;
  color: rgba(1,55,61,.40);
  letter-spacing: .5px;
  align-self: flex-start;
  padding-top: 4px;
}
.ha-agent-row.active .ha-agent-num { color: var(--dt-lime-dark); }
.ha-agent-n {
  font-family: var(--dt-font-display);
  font-size: 20px; font-weight: 700;
  color: var(--dt-teal);
  letter-spacing: -.3px;
  line-height: 1.15;
}
.ha-agent-d {
  font-size: 14px; color: rgba(1,55,61,.62);
  margin-top: 5px;
  line-height: 1.4;
}
.ha-agent-row.active .ha-agent-d { color: rgba(1,55,61,.78); }
.ha-agent-arrow {
  color: rgba(1,55,61,.32);
  transition: transform .25s var(--dt-ease-out), color .25s var(--dt-ease-out);
}
.ha-agent-row.active .ha-agent-arrow,
.ha-agent-row:hover .ha-agent-arrow {
  color: var(--dt-lime-dark);
  transform: translateX(4px) rotate(45deg);
}

/* Inline expansion — only renders for the active row */
.ha-agent-expand {
  padding: 8px 24px 24px 78px;
  animation: ha-expand-in .35s var(--dt-ease-out) both;
}
@keyframes ha-expand-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ha-agent-expand-p {
  font-size: 15px; line-height: 1.55;
  color: rgba(1,55,61,.82);
  margin-bottom: 16px;
}
.ha-agent-expand-bullets {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px;
}
@media (max-width: 700px) { .ha-agent-expand-bullets { grid-template-columns: 1fr; } }
.ha-agent-expand-bullets li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.4;
  color: rgba(1,55,61,.88);
}
.ha-bullet-ic {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(155,200,50,.22);
  color: var(--dt-lime-dark);
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}

/* ── Phone column (sticky, spans hero + agents) ───────── */
.ha-phone-col {
  position: relative;
}
.ha-phone-sticky {
  position: sticky;
  top: calc(var(--nav-h) + 28px);
  height: calc(100vh - var(--nav-h) - 56px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  /* phone-p is a 0..1 progress driven by JS; we use it to gently
     scale and shift the phone as the user scrolls into the agents
     section, so it visibly "settles" rather than freeze in place. */
  --phone-p: 0;
  transform:
    translate3d(calc(var(--phone-p) * -28px), 0, 0)
    scale(calc(1 - var(--phone-p) * 0.05));
  transform-origin: center center;
  transition: transform .25s var(--dt-ease-out);
}
@media (max-width: 1100px) {
  .ha-phone-col {
    /* Phone now sits between hero and agents in the grid flow */
    margin: 0 0 60px;
  }
  .ha-phone-sticky {
    position: static;
    height: auto;
    transform: none;
    padding: 0 0 8px;
  }
}

.ha-phone-stage {
  position: relative; z-index: 2;
}

/* Channel toggle (above the phone — sticky over both teal hero and
   cream agents area, so use a neutral light pill that works on both). */
.ha-channel-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(1,55,61,.08);
  border-radius: 100px;
  margin-bottom: 14px;
  align-self: center;
  box-shadow: 0 6px 18px rgba(1,55,61,.12);
  backdrop-filter: blur(8px);
}
.ha-channel-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 100px;
  background: transparent;
  border: 0;
  color: var(--dt-teal-mid);
  font-size: 12px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .25s var(--dt-ease-out);
  white-space: nowrap;
}
.ha-channel-btn:hover { color: var(--dt-teal); background: rgba(1,55,61,.05); }
.ha-channel-btn.active {
  background: var(--dt-lime);
  color: var(--dt-teal);
  box-shadow: 0 4px 14px rgba(192,244,61,.30);
}
.ha-channel-ic { font-size: 13px; line-height: 1; }

.ha-phone-pill {
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  align-self: center;
  padding: 7px 14px;
  background: rgba(2,30,36,.72);
  border: 1px solid rgba(192,244,61,.30);
  border-radius: 100px;
  color: rgba(255,255,255,.85);
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
}
.ha-phone-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dt-lime);
  box-shadow: 0 0 8px var(--dt-lime);
  animation: dt-pulse 1.8s var(--dt-ease-in-out) infinite;
}

/* ── Dot pattern background + cursor glow ────────────
   Two stacked layers of the same radial-gradient dot grid.
   The base layer sits at low opacity. The glow layer uses
   a brighter color and is masked by a circular gradient
   centered on the cursor (the JS updates --mx / --my via
   lerp) so only nearby dots brighten. Subtle by design.    */
.hero-dots {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.55) 1.3px, transparent 1.3px);
  background-size: 28px 28px;
  background-position: 0 0;
  opacity: .18;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%,
              #000 0%, rgba(0,0,0,.85) 60%, rgba(0,0,0,.45) 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%,
              #000 0%, rgba(0,0,0,.85) 60%, rgba(0,0,0,.45) 100%);
}
.hero-dots-glow {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  --mx: 50%; --my: 30%;
  background-image: radial-gradient(rgba(192,244,61,.95) 1.6px, transparent 1.6px);
  background-size: 28px 28px;
  background-position: 0 0;
  mask-image: radial-gradient(260px circle at var(--mx) var(--my),
              rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 45%, transparent 100%);
  -webkit-mask-image: radial-gradient(260px circle at var(--mx) var(--my),
              rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 45%, transparent 100%);
  opacity: 0;
  transition: opacity .35s var(--dt-ease-out);
}
.hero-dots-glow.is-on { opacity: .65; }

/* ============================================================
   AGENT-SPECIFIC WhatsApp CARDS
   ============================================================ */

.wa-mini-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 14px;
  width: 280px;
  max-width: 100%;
  font-family: var(--dt-font-body);
  color: #0c1a1d;
}
.wa-mc-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(1,55,61,.55);
  margin-bottom: 10px;
}
.wa-mc-amount {
  font-family: var(--dt-font-display);
  font-size: 26px; font-weight: 700; letter-spacing: -.5px;
  color: var(--dt-teal);
  margin-bottom: 10px;
  line-height: 1;
}
.wa-mc-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0;
  border-top: 1px solid rgba(1,55,61,.06);
  font-size: 12.5px;
}
.wa-mc-row:first-of-type { border-top: 0; }
.wa-mc-row span { color: rgba(1,55,61,.55); }
.wa-mc-row b { color: var(--dt-teal); font-weight: 700; }
.wa-mc-rows { display: flex; flex-direction: column; gap: 6px; }
.wa-mc-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: rgba(1,55,61,.78);
  padding: 4px 0;
}
.wa-mc-step .ic {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--dt-lime); color: var(--dt-teal);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
}
.wa-mc-cta {
  display: flex; gap: 6px; margin-top: 12px;
}
.wa-mc-btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px; font-weight: 700;
  cursor: pointer; border: 0;
  font-family: inherit;
  transition: all .2s var(--dt-ease-out);
}
.wa-mc-btn-ghost {
  background: rgba(1,55,61,.05);
  color: var(--dt-teal);
}
.wa-mc-btn-ghost:hover { background: rgba(1,55,61,.08); }
.wa-mc-btn-solid {
  background: var(--dt-teal);
  color: var(--dt-lime);
}
.wa-mc-btn-solid:hover { background: var(--dt-teal-deep); }
.wa-mc-btn-danger {
  background: #fee2e2;
  color: #b91c1c;
}
.wa-mc-btn-full { flex: 1 100%; }
.wa-mc-source {
  margin-top: 10px;
  font-size: 10px; color: rgba(1,55,61,.45);
  font-family: var(--dt-font-mono);
  font-style: italic;
}

/* Card variants — accent strip on top */
.wa-card-collections    { border-top: 3px solid var(--dt-lime-dark); }
.wa-card-kyc            { border-top: 3px solid var(--dt-lilac-dark); }
.wa-card-fraud          { border-top: 3px solid #f59e0b; }
.wa-card-fraud-block    { border-top: 3px solid #22c55e; }
.wa-card-support        { border-top: 3px solid var(--dt-chart-cyan); }
.wa-card-upsell         { border-top: 3px solid var(--dt-lime-dark); }
.wa-card-transfer       { border-top: 3px solid var(--dt-lilac-dark); }

/* ============================================================
   BANK ARCHITECTURE V2 — dark teal showcase, mini-vizs per
   layer, continuous flowing connectors.
   ============================================================ */
.sect.ba-v2 {
  padding-top: 110px;
  padding-bottom: 130px;
  background:
    radial-gradient(ellipse at 25% 0%, #024950 0%, #01373d 35%, #002024 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.sect.ba-v2::before {
  content: ''; position: absolute;
  width: 600px; height: 600px;
  top: -150px; right: -150px;
  background: radial-gradient(circle, rgba(192,244,61,.10), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}
.sect.ba-v2 .sect-head h2 { color: #fff; }
.sect.ba-v2 .sect-head h2 .hl { color: var(--dt-lime); }
.sect.ba-v2 .sect-sub { color: rgba(255,255,255,.65); }

.ba-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 720px;
  margin: 0 auto 64px;
}
@media (max-width: 700px) { .ba-kpis { grid-template-columns: 1fr; } }
.ba-kpi {
  text-align: center;
  padding: 18px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  backdrop-filter: blur(8px);
}
.ba-kpi-v {
  font-family: var(--dt-font-display);
  font-size: 30px; font-weight: 800;
  color: var(--dt-lime);
  letter-spacing: -.5px;
  line-height: 1;
}
.ba-kpi-l {
  font-size: 11px; color: rgba(255,255,255,.55);
  letter-spacing: 1.6px; text-transform: uppercase;
  font-weight: 600;
  margin-top: 8px;
}

/* Sovereignty perimeter */
.ba-perim {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 60px 36px 72px;
  border: 1.5px dashed rgba(192,244,61,.30);
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(192,244,61,.04), transparent 50%),
    rgba(255,255,255,.015);
}
.ba-perim-tag {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  background: linear-gradient(180deg, #03252b, #021c20);
  border: 1px solid rgba(192,244,61,.32);
  border-radius: 100px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--dt-lime);
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden; text-overflow: ellipsis;
}
.ba-perim-top    { top: -16px; }
.ba-perim-bottom { bottom: -16px; }

/* Card primitive */
.ba-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 22px 24px;
  backdrop-filter: blur(10px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 12px 32px rgba(0,0,0,.18);
}
.ba-card-head {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 14px;
}
.ba-card-num {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(192,244,61,.14);
  color: var(--dt-lime);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--dt-font-display);
  font-weight: 800; font-size: 15px;
}
.ba-card-num.blam { background: rgba(192,244,61,.22); color: var(--dt-lime); width: 44px; height: 44px; font-size: 22px; box-shadow: 0 0 24px rgba(192,244,61,.35); }
.ba-card-num.g    { background: rgba(34,197,94,.22); color: #4ade80; }
.ba-card-num.gate { background: rgba(245,158,11,.20); color: #fbbf24; }
.ba-card-num.vault { background: rgba(91,213,213,.20); color: #5bd5d5; }
.ba-eye {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255,255,255,.50);
  margin-bottom: 4px;
}
.ba-eye.blam { color: var(--dt-lime); }
.ba-card-t {
  font-family: var(--dt-font-display);
  font-size: 17px; font-weight: 700;
  color: #fff;
  letter-spacing: -.3px;
  line-height: 1.2;
}
.ba-card-meta {
  margin-left: auto;
  font-size: 11px; color: rgba(255,255,255,.45);
  font-family: var(--dt-font-mono);
}

/* Variant accents */
.ba-card.k-shield { border-color: rgba(206,199,255,.22); }
.ba-card.k-shield .ba-card-num { background: rgba(206,199,255,.18); color: var(--dt-lilac); }
.ba-card.k-guard  { border-color: rgba(34,197,94,.22); }
.ba-card.k-vault  { border-color: rgba(91,213,213,.22); }
.ba-card.k-gate   { border-style: dashed; border-color: rgba(245,158,11,.32); background: rgba(255,255,255,.02); }
.ba-card.ba-skipped { opacity: .82; }

/* Two-column split rows */
.ba-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 800px) { .ba-split { grid-template-columns: 1fr; } }

/* ── Connector — continuously flowing dot ───────────── */
.ba-conn {
  position: relative;
  height: 50px; width: 2px;
  margin: 14px auto;
}
.ba-conn-line {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(192,244,61,.18), rgba(255,255,255,.04));
  border-radius: 2px;
}
.ba-conn-dot {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: -8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dt-lime);
  box-shadow:
    0 0 12px rgba(192,244,61,.9),
    0 0 24px rgba(192,244,61,.5);
  animation: ba-flow 1.6s linear infinite;
}
@keyframes ba-flow {
  0%   { top: -8px;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%;   opacity: 0; }
}
.ba-conn.f-lilac .ba-conn-dot { background: var(--dt-lilac); box-shadow: 0 0 12px rgba(206,199,255,.9), 0 0 24px rgba(206,199,255,.5); }
@media (prefers-reduced-motion: reduce) { .ba-conn-dot { animation: none; opacity: 1; top: 50%; } }

/* ── Channels card ───────────────────────────────────── */
.ba-channels-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 800px) { .ba-channels-grid { grid-template-columns: repeat(3, 1fr); } }
.ba-ch {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  transition: all .25s var(--dt-ease-out);
}
.ba-ch:hover { background: rgba(255,255,255,.06); border-color: rgba(192,244,61,.22); transform: translateY(-2px); }
.ba-ch.is-live {
  background: linear-gradient(180deg, rgba(192,244,61,.12), rgba(192,244,61,.02));
  border-color: rgba(192,244,61,.35);
  box-shadow: 0 0 0 1px rgba(192,244,61,.15), 0 8px 24px rgba(192,244,61,.10);
}
.ba-ch-ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(192,244,61,.10);
  color: var(--dt-lime);
  display: flex; align-items: center; justify-content: center;
}
.ba-ch.is-live .ba-ch-ico { background: var(--dt-lime); color: var(--dt-teal); }
.ba-ch-n { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85); }
.ba-ch-dot {
  position: absolute; top: 8px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dt-lime);
  box-shadow: 0 0 8px var(--dt-lime);
  animation: dt-pulse 1.5s var(--dt-ease-in-out) infinite;
}

.ba-user-msg {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 16px;
  background: rgba(255,255,255,.03);
  border-left: 3px solid var(--dt-lime);
  border-radius: 0 12px 12px 0;
}
.ba-user-meta {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.ba-user-bubble {
  font-size: 16px; font-weight: 500; color: #fff;
  font-style: italic;
}

/* ── PII / Shield viz ──────────────────────────────── */
.ba-pii {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 12px;
}
.ba-pii-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 10px; align-items: center;
  padding: 8px 10px;
  background: rgba(206,199,255,.06);
  border: 1px solid rgba(206,199,255,.18);
  border-radius: 8px;
  font-size: 12px; font-family: var(--dt-font-mono);
}
.ba-pii-k    { color: rgba(255,255,255,.65); }
.ba-pii-arrow{ color: var(--dt-lilac); font-weight: 700; text-align: center; }
.ba-pii-tok  { color: var(--dt-lilac); }
.ba-checks {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.ba-check {
  display: inline-flex; justify-content: space-between; align-items: center;
  padding: 7px 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  font-size: 11.5px; color: rgba(255,255,255,.65);
  font-family: var(--dt-font-mono);
}
.ba-check.ok { border-color: rgba(34,197,94,.30); background: rgba(34,197,94,.06); }
.ba-check.ok b { color: #4ade80; font-weight: 700; }

/* ── Intent router viz ─────────────────────────────── */
.ba-intents { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ba-intent-row {
  display: grid; grid-template-columns: 140px 1fr 44px;
  gap: 10px; align-items: center;
  font-size: 12px; font-family: var(--dt-font-mono);
}
.ba-intent-n { color: rgba(255,255,255,.55); }
.ba-intent-row.win .ba-intent-n { color: var(--dt-lime); font-weight: 700; }
.ba-intent-bar {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,.06);
  border-radius: 3px; overflow: hidden;
}
.ba-intent-bar > span {
  position: absolute; inset: 0;
  background: rgba(255,255,255,.20);
  border-radius: 3px;
  transition: width .6s var(--dt-ease-out);
}
.ba-intent-row.win .ba-intent-bar > span { background: var(--dt-lime); box-shadow: 0 0 12px rgba(192,244,61,.4); }
.ba-intent-v { color: rgba(255,255,255,.65); text-align: right; font-variant-numeric: tabular-nums; }
.ba-intent-row.win .ba-intent-v { color: var(--dt-lime); font-weight: 700; }
.ba-intent-out {
  padding: 10px 12px;
  background: rgba(192,244,61,.06);
  border: 1px solid rgba(192,244,61,.20);
  border-radius: 8px;
  font-size: 12px; font-family: var(--dt-font-mono);
  color: rgba(255,255,255,.85);
}
.ba-intent-out b { color: var(--dt-lime); }

/* ── BLAM hero card ────────────────────────────────── */
.ba-card.ba-blam {
  background:
    radial-gradient(ellipse at top right, rgba(192,244,61,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-color: rgba(192,244,61,.32);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 0 0 1px rgba(192,244,61,.10),
    0 24px 48px rgba(0,0,0,.25);
}
.ba-blam-orb {
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192,244,61,.18), transparent 65%);
  filter: blur(20px);
  pointer-events: none;
  animation: dt-pulse-soft 4s var(--dt-ease-in-out) infinite;
}
.ba-blam-model {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px;
  background: rgba(192,244,61,.10);
  border: 1px solid rgba(192,244,61,.28);
  border-radius: 100px;
  font-size: 11px; font-family: var(--dt-font-mono);
  color: var(--dt-lime);
}
.ba-blam-model-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dt-lime); box-shadow: 0 0 8px var(--dt-lime);
  animation: dt-pulse 1.6s var(--dt-ease-in-out) infinite;
}
.ba-blam-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 800px) { .ba-blam-grid { grid-template-columns: repeat(2, 1fr); } }
.ba-blam-cell {
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
}
.ba-blam-k {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 6px;
}
.ba-blam-v {
  font-family: var(--dt-font-display);
  font-size: 24px; font-weight: 800; color: #fff;
  letter-spacing: -.5px;
  line-height: 1;
}
.ba-blam-v span { font-size: 14px; color: rgba(255,255,255,.45); margin-left: 2px; }
.ba-blam-list { display: flex; flex-direction: column; gap: 3px; }
.ba-blam-list span {
  font-size: 12px; font-family: var(--dt-font-mono);
  color: rgba(255,255,255,.85);
}
.ba-blam-list span.muted { color: rgba(255,255,255,.45); }
.ba-blam-deci {
  display: flex; flex-direction: column;
  font-family: var(--dt-font-mono);
}
.ba-blam-deci-fn  { font-size: 14px; font-weight: 700; color: var(--dt-lime); }
.ba-blam-deci-arg { font-size: 12px; color: rgba(255,255,255,.65); }

/* ── Guardrails list ───────────────────────────────── */
.ba-guard-list { display: flex; flex-direction: column; gap: 6px; }
.ba-guard-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  background: rgba(34,197,94,.04);
  border: 1px solid rgba(34,197,94,.20);
  border-radius: 8px;
  font-size: 12.5px; font-family: var(--dt-font-mono);
}
.ba-guard-row > span { color: rgba(255,255,255,.65); }
.ba-guard-row > b { color: #4ade80; font-weight: 700; }

/* ── MFA Gate (active SMS OTP example) ─────────────── */
/* When active, switch from dashed/amber to solid/lime so it
   reads as a positive ceremony, not a skipped step.            */
.ba-card.k-gate.is-active {
  border-style: solid;
  border-color: rgba(192,244,61,.35);
  background: linear-gradient(180deg, rgba(192,244,61,.05), rgba(255,255,255,.02));
}
.ba-card.k-gate.is-active .ba-card-num.gate {
  background: rgba(192,244,61,.20);
  color: var(--dt-lime);
}

.ba-gate-body { display: flex; flex-direction: column; gap: 12px; }

.ba-gate-mode {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  font-family: var(--dt-font-mono);
}
.ba-gate-mode-l {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.ba-gate-mode-v {
  font-size: 12.5px; color: var(--dt-lime); font-weight: 700;
}

.ba-otp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
}
.ba-otp-info { flex: 1; min-width: 0; }
.ba-otp-meta {
  font-size: 11px; font-family: var(--dt-font-mono);
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
}
.ba-otp-boxes {
  display: flex; gap: 6px;
}
.ba-otp-boxes span {
  width: 28px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(192,244,61,.30);
  border-radius: 6px;
  font-family: var(--dt-font-mono);
  font-size: 14px; font-weight: 700;
  color: var(--dt-lime);
  box-shadow: 0 0 0 1px rgba(192,244,61,.10);
}

.ba-gate-status { display: flex; }
.ok-pill {
  padding: 6px 12px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.32);
  border-radius: 100px;
  font-size: 11.5px; font-weight: 700;
  color: #4ade80;
  letter-spacing: .2px;
}

/* ── Execution / terminal ──────────────────────────── */
.ba-exec-tabs {
  margin-left: auto;
  display: flex; gap: 4px;
  padding: 4px;
  background: rgba(0,0,0,.30);
  border-radius: 100px;
}
.ba-exec-tabs span {
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 11px; font-family: var(--dt-font-mono);
  color: rgba(255,255,255,.45);
}
.ba-exec-tabs span.active {
  background: var(--dt-lime); color: var(--dt-teal); font-weight: 700;
}
.ba-term {
  background: #0a1316;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
}
.ba-term-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ba-term-bar > span {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.18);
}
.ba-term-bar > span:nth-child(1) { background: #ff5f57; }
.ba-term-bar > span:nth-child(2) { background: #febc2e; }
.ba-term-bar > span:nth-child(3) { background: #28c840; }
.ba-term-bar em {
  font-style: normal; margin-left: 10px;
  font-size: 11px; font-family: var(--dt-font-mono);
  color: rgba(255,255,255,.55);
}
.ba-term-body {
  padding: 16px 18px;
  font-family: var(--dt-font-mono);
  font-size: 12.5px; line-height: 1.7;
  color: rgba(255,255,255,.85);
}
.ba-term-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-term-line .t-mt    { color: var(--dt-lime); font-weight: 700; }
.ba-term-line .t-acc   { color: var(--dt-lilac); }
.ba-term-line .t-mask  { color: rgba(255,255,255,.35); letter-spacing: 1px; }
.ba-term-line .t-status{ color: #4ade80; font-weight: 700; }
.ba-term-line.t-payload{ color: #5bd5d5; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,.08); margin-top: 6px; }

/* ── Rehydration steps ─────────────────────────────── */
.ba-rehyd { display: flex; flex-direction: column; gap: 4px; }
.ba-rehyd-step {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
}
.ba-rehyd-k {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.ba-rehyd-v {
  font-size: 12.5px; font-family: var(--dt-font-mono);
  color: rgba(255,255,255,.85);
  background: transparent; padding: 0;
}
.ba-rehyd-v.lime {
  color: var(--dt-lime);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.2px;
}
.ba-rehyd-arrow {
  text-align: center;
  font-size: 11px;
  color: rgba(192,244,61,.55);
  line-height: 1;
}

/* ── Audit log ─────────────────────────────────────── */
.ba-audit { display: flex; flex-direction: column; gap: 4px; }
.ba-audit-line {
  display: grid; grid-template-columns: 96px 60px 1fr;
  gap: 8px; align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 11.5px; font-family: var(--dt-font-mono);
  color: rgba(255,255,255,.75);
}
.ba-audit-line:last-child { border-bottom: 0; }
.ba-audit-line .t { color: rgba(255,255,255,.40); font-size: 10.5px; }
.ba-audit-line .tag {
  display: inline-block; text-align: center;
  padding: 2px 5px; border-radius: 4px;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .5px;
}
.ba-audit-line .tag.pii  { background: rgba(206,199,255,.18); color: var(--dt-lilac); }
.ba-audit-line .tag.ct   { background: rgba(34,197,94,.18);   color: #4ade80; }
.ba-audit-line .tag.llm  { background: rgba(192,244,61,.18);  color: var(--dt-lime); }
.ba-audit-line .tag.api  { background: rgba(91,213,213,.18);  color: #5bd5d5; }
.ba-audit-line .tag.worm { background: rgba(245,158,11,.18);  color: #fbbf24; }

/* ── Bot reply (centered for the web chat example) ─── */
.ba-bot-reply {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 14px;
  margin-top: 6px;
  max-width: 640px;
  margin-left: auto; margin-right: auto;
}
.ba-bot-bubble {
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--dt-teal-mid), var(--dt-teal-light));
  border: 1px solid rgba(192,244,61,.32);
  border-radius: 4px 18px 18px 18px;
  max-width: 70%;
  box-shadow: 0 12px 32px rgba(192,244,61,.10);
}
.ba-bot-text {
  font-size: 16px; font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}
.ba-bot-stamps {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 11px; font-family: var(--dt-font-mono);
  color: var(--dt-lime);
}
.ba-bot-stamps .t { color: rgba(255,255,255,.55); margin-left: auto; }
.ba-bot-ava {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dt-lime), var(--dt-lime-dark));
  color: var(--dt-teal);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--dt-font-display);
  font-weight: 800; font-size: 16px;
  box-shadow: 0 8px 20px rgba(192,244,61,.30);
}

/* ============================================================
   SUITE V2 — light theme, slide-5 inspired
   ============================================================ */
.sect.suite-v2 { padding-bottom: 100px; }

.suite-v2-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 60px; margin-bottom: 40px;
  flex-wrap: wrap;
}
.suite-v2-head-l { flex: 1; min-width: 280px; }
.suite-v2-head-l h2 { margin-bottom: 0; }
.suite-v2-head-r {
  max-width: 360px;
  font-size: 15px; line-height: 1.55;
  color: var(--dt-fg-muted);
  text-wrap: pretty;
}

/* Module tabs */
.suite-v2-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
@media (max-width: 800px) { .suite-v2-tabs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .suite-v2-tabs { grid-template-columns: 1fr; } }

.suite-v2-tab {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: rgba(1,55,61,.03);
  border: 1px solid rgba(1,55,61,.08);
  border-radius: 16px;
  text-align: left; cursor: pointer;
  transition: all .25s var(--dt-ease-out);
  min-width: 0;
  font-family: inherit;
}
.suite-v2-tab:hover {
  background: rgba(1,55,61,.05);
  border-color: rgba(1,55,61,.14);
}
.suite-v2-tab.active {
  background: linear-gradient(180deg, rgba(192,244,61,.18) 0%, rgba(192,244,61,.04) 100%);
  border-color: rgba(155,200,50,.5);
  box-shadow: 0 0 0 1px rgba(192,244,61,.18), 0 8px 24px rgba(192,244,61,.10);
}
.suite-v2-tab-ico {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(192,244,61,.18);
  color: var(--dt-teal);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--dt-font-display);
  font-size: 18px; font-weight: 800;
  transition: all .25s var(--dt-ease-out);
}
.suite-v2-tab.active .suite-v2-tab-ico {
  background: var(--dt-lime);
  color: var(--dt-teal);
  box-shadow: 0 4px 12px rgba(192,244,61,.4);
}
.suite-v2-tab-txt { display: flex; flex-direction: column; min-width: 0; }
.suite-v2-tab-n {
  font-family: var(--dt-font-display);
  font-size: 16px; font-weight: 700;
  color: var(--dt-teal);
  line-height: 1;
}
.suite-v2-tab-d {
  font-size: 12px; color: var(--dt-fg-dim);
  margin-top: 4px;
  line-height: 1.35;
}
@media (min-width: 521px) {
  .suite-v2-tab-d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Stage: browser (left) + detail (right) */
.suite-v2-stage {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 28px;
  align-items: stretch;
  margin-bottom: 56px;
}
@media (max-width: 980px) { .suite-v2-stage { grid-template-columns: 1fr; } }

/* Tablet frame — horizontal iPad-style mockup with a stronger
   3D tilt that lets the right-side bezel breathe. The screen
   matches the deck capture aspect (16:10).                      */
.suite-v2-tablet-wrap {
  position: relative;
  perspective: 2200px;
  perspective-origin: 40% 50%;
  align-self: center;
  width: 100%;
  min-width: 0;
  padding: 8px 0 32px;
}
.suite-v2-tablet {
  position: relative;
  background: linear-gradient(190deg, #2a2e33 0%, #1a1d20 45%, #0d0f12 100%);
  border-radius: 32px;
  padding: 18px 20px;
  max-width: 100%;
  transform: rotateY(15deg) rotateX(4deg);
  transform-style: preserve-3d;
  transition: transform .55s var(--dt-ease-out);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 0 0 1px rgba(0,0,0,.5) inset,
    14px 0 24px rgba(0,0,0,.08),
    -30px 70px 100px rgba(1,55,61,.22),
    -12px 30px 50px rgba(1,55,61,.14);
  z-index: 2;
}
@media (max-width: 600px) {
  .suite-v2-tablet { padding: 12px 12px; transform: none; }
  .suite-v2-tablet:hover { transform: none; }
}
.suite-v2-tablet:hover {
  transform: rotateY(9deg) rotateX(2deg);
}
/* Front camera on the top long bezel (landscape iPad) */
.suite-v2-tablet-cam {
  position: absolute;
  top: 7px; left: 50%;
  transform: translateX(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #1a1d20;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 0 3px rgba(0,0,0,.5) inset;
}
/* Left-side bezel highlight — the visible bezel edge when the
   device leans toward the right panel.                          */
.suite-v2-tablet::after {
  content: '';
  position: absolute;
  top: 12%; bottom: 12%; left: 0;
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,.16) 30%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.16) 70%,
    transparent 100%);
  border-radius: 2px;
  filter: blur(.4px);
}
/* Top inner highlight for the bezel */
.suite-v2-tablet::before {
  content: '';
  position: absolute;
  top: 2px; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}

.suite-v2-tablet-screen {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-width: 0;
  background: #f5f5f5;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.4),
    0 1px 0 rgba(255,255,255,.04) inset;
}

/* Floor shadow — wide, soft ellipse offset to match the tilt */
.suite-v2-tablet-shadow {
  position: absolute;
  left: 4%; right: 4%;
  bottom: -2px;
  height: 50px;
  background: radial-gradient(ellipse at 40% 50%, rgba(1,55,61,.30), transparent 70%);
  filter: blur(20px);
  z-index: 1;
  pointer-events: none;
  transform: scaleX(.92) translateX(-8%);
}

/* Browser-style address bar (Safari on iPad) */
.suite-v2-browser-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  background: #1a1d20;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.suite-v2-browser-dots { display: flex; gap: 5px; }
.suite-v2-browser-dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.18);
}
.suite-v2-browser-dots span:nth-child(1) { background: #ff5f57; }
.suite-v2-browser-dots span:nth-child(2) { background: #febc2e; }
.suite-v2-browser-dots span:nth-child(3) { background: #28c840; }
.suite-v2-browser-url {
  flex: 1;
  background: rgba(0,0,0,.30);
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 11.5px;
  color: rgba(255,255,255,.55);
  font-family: var(--dt-font-mono);
  max-width: 440px;
  text-align: center;
}
.suite-v2-browser-url .lock {
  color: var(--dt-lime);
  margin-right: 6px;
}
.suite-v2-browser-zoom {
  font-size: 10.5px;
  color: rgba(255,255,255,.4);
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}

/* Body — aspect matches the deck PNG natural size (2102x1294)
   exactly so the screenshot fills the tablet screen without
   any letterbox gap.                                            */
.suite-v2-browser-body {
  position: relative;
  width: 100%;
  aspect-ratio: 2102 / 1294;
  overflow: hidden;
  background: #f5f5f5;
}
.suite-v2-shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transition: opacity .35s var(--dt-ease-out);
}
.suite-v2-shot.active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .suite-v2-tablet { transform: none !important; }
}
@media (max-width: 980px) {
  .suite-v2-tablet { transform: rotateY(-3deg); }
}

/* Right detail panel */
.suite-v2-detail {
  background: #fff;
  border: 1px solid rgba(1,55,61,.08);
  border-radius: 18px;
  padding: 26px 24px;
  display: flex; flex-direction: column;
  min-height: 480px;
}
.suite-v2-detail-eye {
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dt-lime-dark);
  margin-bottom: 8px;
}
.suite-v2-detail-name {
  font-family: var(--dt-font-display);
  font-size: 36px; font-weight: 700; letter-spacing: -1px;
  color: var(--dt-teal); line-height: 1;
  margin-bottom: 12px;
}
.suite-v2-detail-desc {
  font-size: 14px; line-height: 1.55;
  color: var(--dt-fg-muted);
  margin-bottom: 24px;
}
.suite-v2-funcs-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dt-fg-dim);
  margin-bottom: 10px;
}
.suite-v2-funcs {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
}
.suite-v2-func {
  display: grid; grid-template-columns: 32px 1fr;
  gap: 12px; align-items: center;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  text-align: left; cursor: pointer;
  transition: all .25s var(--dt-ease-out);
  font-family: inherit;
  color: var(--dt-teal);
}
.suite-v2-func:hover {
  background: rgba(1,55,61,.04);
  border-color: rgba(1,55,61,.06);
}
.suite-v2-func.active {
  background: linear-gradient(180deg, rgba(1,55,61,.06) 0%, rgba(1,55,61,.02) 100%);
  border-color: rgba(1,55,61,.14);
}
.suite-v2-func-ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(192,244,61,.20);
  color: var(--dt-teal);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  transition: all .25s var(--dt-ease-out);
}
.suite-v2-func.active .suite-v2-func-ico {
  background: var(--dt-lime);
  color: var(--dt-teal);
  box-shadow: 0 4px 10px rgba(192,244,61,.3);
}
.suite-v2-func-txt { display: flex; flex-direction: column; min-width: 0; }
.suite-v2-func-n {
  font-family: var(--dt-font-display);
  font-size: 14px; font-weight: 700;
  color: var(--dt-teal);
  line-height: 1.1;
}
.suite-v2-func-d {
  font-size: 12px;
  color: var(--dt-fg-dim);
  margin-top: 3px;
  line-height: 1.3;
}

/* Bottom KPI bar */
.suite-v2-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 32px 28px;
  background: #fff;
  border: 1px solid rgba(1,55,61,.08);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(1,55,61,.06);
}
@media (max-width: 800px) { .suite-v2-kpis { grid-template-columns: repeat(2, 1fr); } }
.suite-v2-kpi {
  border-left: 1px solid rgba(1,55,61,.08);
  padding-left: 18px;
  display: flex; flex-direction: column;
}
.suite-v2-kpi:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 800px) {
  .suite-v2-kpi { border-left: 0; padding-left: 0; }
}
.suite-v2-kpi-k {
  font-family: var(--dt-font-display);
  font-size: 32px; font-weight: 700;
  letter-spacing: -1px;
  color: var(--dt-lime-dark);
  line-height: 1;
}
.suite-v2-kpi-k span {
  font-size: 18px;
  color: var(--dt-lime-dark);
  margin-left: 1px;
}
.suite-v2-kpi-l {
  font-size: 12px;
  color: var(--dt-fg-muted);
  margin-top: 8px;
  line-height: 1.35;
}

/* TTV CTA — replaces the per-week timeline */
.ttv-cta {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

/* ============================================================
   LIGHT VARIANTS — Metrics · Compliance · CTAFinal
   ============================================================ */

/* Metrics on cream */
.metrics-light .metrics {
  background: rgba(1,55,61,.06);
  border-color: rgba(1,55,61,.06);
}
.metrics-light .metric {
  background: #fff;
  color: var(--dt-teal);
}
.metrics-light .metric-num,
.metrics-light .metric-num sup {
  color: var(--dt-lime-dark);
}
.metrics-light .metric-lbl { color: var(--dt-teal); }
.metrics-light .metric-sub { color: var(--dt-fg-dim); }

/* Compliance on lilac-light */
.sect.on-lilac.compliance-light h2 { color: var(--dt-teal); }
.sect.on-lilac.compliance-light .sect-sub { color: var(--dt-fg-muted); }
.compliance-light .compliance-card {
  background: rgba(255,255,255,.65);
  border-color: rgba(1,55,61,.08);
}
.compliance-light .compliance-card:hover {
  background: #fff;
  border-color: rgba(155,200,50,.6);
  box-shadow: 0 8px 28px rgba(1,55,61,.08);
}
.compliance-light .compliance-ic {
  background: rgba(192,244,61,.25);
  color: var(--dt-lime-dark);
}
.compliance-light .compliance-t { color: var(--dt-teal); }
.compliance-light .compliance-d { color: var(--dt-fg-muted); }
.compliance-light .compliance-badges {
  background: rgba(255,255,255,.6);
  border-color: rgba(1,55,61,.10);
}
.compliance-light .compliance-badges span {
  background: rgba(192,244,61,.20);
  border-color: rgba(155,200,50,.5);
  color: var(--dt-lime-dark);
}

.btn-ghost-light {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600;
  padding: 14px 24px; border-radius: 100px;
  background: rgba(1,55,61,.06);
  color: var(--dt-teal);
  border: 1px solid rgba(1,55,61,.10);
  transition: all .25s var(--dt-ease-out);
  white-space: nowrap;
}
.btn-ghost-light:hover {
  background: rgba(1,55,61,.10);
  border-color: rgba(1,55,61,.18);
}

/* ============================================================
   WhatsApp avatar: when an initial is provided, hide the
   default ::before "BA" and show the dynamic overlay.
   ============================================================ */
.wa-avatar:has(.wa-avatar-i)::before { content: ''; }
.wa-avatar-i {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  color: var(--dt-lime);
  letter-spacing: .5px;
  font-family: var(--dt-font-display);
  z-index: 1;
}

/* ============================================================
   HERO V3 — small fixes + new pieces
   ============================================================ */

/* Eyebrow chip — must hug the phrase, not the column */
.ha-hero .hero-eyebrow {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
}

/* Partner / award badges — logo-only row, sized for impact */
.hero-badges { margin-top: 44px; }
.hero-badges-row {
  display: flex; align-items: center; gap: 36px;
  flex-wrap: nowrap;
}
.hero-badge-logo {
  height: 46px; width: auto;
  display: block;
  filter: brightness(0) invert(1);   /* logos to white */
  opacity: .85;
  transition: opacity .25s var(--dt-ease-out);
}
.hero-badge-logo:hover { opacity: 1; }
/* Fintech Americas medal — keep colors, slightly larger */
.hero-badge-logo.hero-badge-medal {
  filter: none;
  opacity: 1;
  height: 60px;
}
@media (max-width: 600px) {
  .hero-badges-row { gap: 24px; flex-wrap: wrap; }
  .hero-badge-logo { height: 36px; }
  .hero-badge-logo.hero-badge-medal { height: 48px; }
}

/* Agent expand — headline + metrics (cream surface) */
.ha-agent-expand-h {
  font-family: var(--dt-font-display);
  font-size: 26px; font-weight: 700;
  color: var(--dt-teal);
  letter-spacing: -.4px;
  line-height: 1.15;
  margin-bottom: 10px;
}
.ha-agent-expand-h em {
  font-style: normal;
  color: var(--dt-lime-dark);
  position: relative;
}
.ha-agent-expand-h .hl { color: var(--dt-lime-dark); }
.ha-agent-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0 20px;
}
@media (max-width: 700px) { .ha-agent-metrics { grid-template-columns: 1fr; } }
.ha-metric {
  padding: 16px 18px;
  background: rgba(1,55,61,.04);
  border: 1px solid rgba(1,55,61,.08);
  border-radius: 12px;
}
.ha-metric.pos { border-color: rgba(155,200,50,.40); background: rgba(192,244,61,.14); }
.ha-metric.neg { border-color: rgba(168,158,245,.40); background: rgba(206,199,255,.18); }
.ha-metric-v {
  font-family: var(--dt-font-display);
  font-size: 32px; font-weight: 700; line-height: 1;
  letter-spacing: -1px;
  color: var(--dt-teal);
}
.ha-metric.pos .ha-metric-v { color: #5a7813; }
.ha-metric.neg .ha-metric-v { color: #5b4fc4; }
.ha-metric-u {
  font-size: 16px; font-weight: 600;
  margin-left: 2px;
  opacity: .85;
}
.ha-metric-l {
  font-size: 13px; color: rgba(1,55,61,.70);
  margin-top: 8px;
  line-height: 1.35;
}

/* WhatsApp voice note bubble — play + waveform + duration */
.wa-bubble.wa-voice {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 9px 8px !important;
  min-width: 200px;
  max-width: 230px;
}
.wa-voice-play {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,.10);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
  color: rgba(0,0,0,.55);
  padding-left: 2px;
}
.wa-bubble.wa-user.wa-voice .wa-voice-play {
  background: rgba(13,50,16,.16);
  color: rgba(13,50,16,.7);
}
.wa-voice-wave {
  flex: 1;
  display: flex; align-items: center; gap: 2px;
  height: 22px;
  overflow: hidden;
}
.wa-voice-wave span {
  flex: 1;
  background: rgba(0,0,0,.32);
  border-radius: 1.5px;
  min-width: 2px;
}
.wa-bubble.wa-user.wa-voice .wa-voice-wave span {
  background: rgba(13,50,16,.4);
}
.wa-voice-dur {
  flex-shrink: 0;
  font-size: 10.5px;
  color: rgba(0,0,0,.5);
  font-variant-numeric: tabular-nums;
}
.wa-bubble.wa-user.wa-voice .wa-voice-dur {
  color: rgba(13,50,16,.7);
}
.wa-bubble.wa-voice .wa-ticks {
  margin-left: 4px;
  font-size: 10px;
}

/* New card types — Collections progress */
.wa-card-progress { border-top: 3px solid var(--dt-teal-lighter); }
.wa-mc-row b.ok  { color: #00a86b; }
.wa-mc-row b.bad { color: #e63946; }
.wa-mc-row b.hi  { color: #004edd; }

/* Advisor — pre-approved badge style */
.wa-card-preapproved { border-top: 3px solid var(--dt-lime-dark); }
.wa-mc-tag {
  display: inline-block;
  font-size: 10px; font-weight: 800; letter-spacing: 2px;
  background: var(--dt-teal); color: var(--dt-lime);
  padding: 4px 8px; border-radius: 6px;
  margin-bottom: 8px;
}
.wa-card-preapproved .wa-mc-amount {
  font-size: 18px;
  margin-bottom: 6px;
}

/* Customer Support — actions card */
.wa-card-actions { border-top: 3px solid #5bd5d5; }

/* Retail Banking — bill (UTE) */
.wa-card-bill { border-top: 3px solid var(--dt-lilac-dark); }

/* Corporate — dark card with disponible */
.wa-card-corp {
  background: linear-gradient(140deg, #022b30 0%, #01373d 100%);
  color: #fff;
  border: 0;
  padding: 18px;
}
.wa-mc-corp-t {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85);
  margin-bottom: 6px;
}
.wa-mc-corp-num {
  font-family: var(--dt-font-mono);
  font-size: 13px; letter-spacing: 1.5px;
  color: rgba(255,255,255,.55);
  margin-bottom: 12px;
}
.wa-mc-corp-lbl {
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  font-weight: 600;
  margin-bottom: 2px;
}
.wa-mc-corp-amt {
  font-family: var(--dt-font-display);
  font-size: 26px; font-weight: 700; letter-spacing: -.5px;
  color: var(--dt-lime);
  line-height: 1;
}
.wa-mc-corp-of {
  font-size: 11px; color: rgba(255,255,255,.45);
  margin-top: 4px;
}