/* ─────────────────────────────────────────────────────────────
   Tavvlo Intelligence Chat — orbit hero + section system.
   UI ported from the Cyrclo full-page source (sticky orbit hero,
   marquee band, expanding-circle transition, bento grid, big type),
   re-skinned onto the existing Tavvlo dark background + green accent.
   The orbits carry QUESTION PILLS instead of the Cyrclo photos, so each
   pill counter-rotates against its ring to keep the text upright.
   ───────────────────────────────────────────────────────────── */

.tvc {
  --ink: #fff;
  --muted: #a7a7a7;
  --dim: #777;
  --accent: var(--color-palette--primary, #88ef56);
  --card: #131313;
  --stroke: #ffffff14;
  --mono: "Roboto Mono", ui-monospace, monospace;
  --display: Geist, Inter, sans-serif;
}

.tvc-width { width: min(calc(100% - 5rem), 78rem); margin-inline: auto; }

/* ── Scroll reveal ── */
.tvc-reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .9s ease var(--reveal-delay, 0ms),
              transform 1s cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms);
}
.tvc-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ── Eyebrow / section heading ── */
.tvc-eyebrow {
  margin: 0;
  color: var(--accent);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tvc-heading { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tvc-heading h2 {
  margin: 1rem 0 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(2.9rem, 6.4vw, 5.2rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.055em;
}
.tvc-heading h2 span { color: #6f6f6f; }
.tvc-heading .tvc-sub {
  max-width: 38rem;
  margin: 1.35rem 0 0;
  color: var(--muted);
  font-family: Inter, sans-serif;
  font-size: .95rem;
  line-height: 1.65;
}

/* ═══ HERO ═══════════════════════════════════════════════════ */
.tvc-hero {
  --outer-rotation: 0deg;
  --inner-rotation: 0deg;
  --scroll-scale: 1;
  --scroll-opacity: 1;
  position: relative;
  height: 200vh;
}
.tvc-hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 40rem;
  overflow: hidden;
}
/* The existing Webflow background video is kept exactly as it was —
   it is the page background, only relocated behind the orbits. */
.tvc-hero-sticky .banner-video-bg { position: absolute; inset: 0; z-index: 0; }
.tvc-hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 90% at 50% 45%, rgba(10,10,10,.35) 0%, rgba(10,10,10,.82) 55%, #0a0a0a 100%);
  pointer-events: none;
}
.tvc-hero-grid { position: relative; z-index: 2; display: grid; width: 100%; height: 100%; place-items: center; isolation: isolate; }

/* ── Orbits ── */
.tvc-orbit-center { position: absolute; top: 50%; left: 50%; width: 0; height: 0; pointer-events: none; }
.tvc-orbit-wrapper { position: relative; transform: scale(var(--orbit-scale, .8)); transform-origin: center; }
.tvc-orbit { position: relative; transform-origin: center; will-change: transform; }
.tvc-orbit.is-outer {
  --ring-rot: var(--outer-rotation);
  opacity: var(--scroll-opacity);
  transform: rotate(var(--outer-rotation)) scale(var(--scroll-scale));
}
.tvc-orbit.is-inner {
  --ring-rot: var(--inner-rotation);
  /* Inner ring rides the same scroll throw, so the whole constellation
     leaves together rather than the outer ring departing on its own. */
  opacity: var(--scroll-opacity);
  transform: rotate(var(--inner-rotation)) scale(var(--scroll-scale));
}
/* Each item is a zero-size point pinned at the orbit centre, spun to its
   own angle; the pill is pushed out along -Y by the ring radius. */
.tvc-orbit-item {
  position: absolute; top: 0; left: 0; width: 0; height: 0;
  transform: rotate(var(--item-angle));
  transform-origin: 0 0;
}
.tvc-pill {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--radius));
  display: flex;
  align-items: center;
  gap: .55rem;
  box-sizing: border-box;
  padding: .62rem .8rem;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: rgba(19,19,19,.82);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 8px 26px rgba(0,0,0,.4);
  /* rotate() undoes BOTH this item angle and the live ring rotation,
     so the text stays upright while the ring keeps spinning. */
  transform: translate(-50%, -50%) rotate(calc(-1 * (var(--item-angle) + var(--ring-rot))));
  opacity: 0;
  animation: tvc-pill-in .9s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(.15s + var(--stagger, 0ms));
}
.tvc-orbit.is-outer .tvc-pill { width: 13rem; --radius: 25rem; }
.tvc-orbit.is-inner .tvc-pill { width: 10.5rem; --radius: 14rem; }
.tvc-pill-ico {
  flex: none; display: grid; place-items: center;
  width: 1.55rem; height: 1.55rem;
  border-radius: 7px;
  background: rgba(136,239,86,.13);
  color: var(--accent);
}
.tvc-pill-ico svg { width: .85rem; height: .85rem; display: block; }
.tvc-pill-q {
  min-width: 0;
  color: #efefef;
  font-family: Inter, sans-serif;
  font-size: .705rem;
  line-height: 1.32;
  letter-spacing: -.005em;
}
.tvc-orbit.is-inner .tvc-pill-q { font-size: .665rem; }

@keyframes tvc-pill-in {
  from { opacity: 0; transform: translate(-50%,-50%) rotate(calc(-1 * (var(--item-angle) + var(--ring-rot)))) scale(.72); }
  to   { opacity: 1; transform: translate(-50%,-50%) rotate(calc(-1 * (var(--item-angle) + var(--ring-rot)))) scale(1); }
}

/* ── Hero copy ── */
.tvc-hero-copy {
  position: relative;
  z-index: 5;
  display: flex;
  width: min(34rem, calc(100vw - 3rem));
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  text-align: center;
  opacity: 0;
  transform: translateY(18px);
  animation: tvc-copy-in 1.15s .45s cubic-bezier(.22,1,.36,1) forwards;
}
.tvc-hero-copy h1,
.tvc-hero-copy h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.05em;
}

@keyframes tvc-copy-in { to { opacity: 1; transform: translateY(0); } }

/* ═══ MARQUEE + INTRO ════════════════════════════════════════ */
.tvc-intro { position: relative; overflow: clip; padding-bottom: 5rem; background: #0a0a0a; }
.tvc-marquee { width: 100%; overflow: hidden; }
.tvc-marquee-track { display: flex; width: max-content; animation: tvc-marquee 26s linear infinite; will-change: transform; }
.tvc-marquee-track span {
  flex: none; margin-right: 4rem;
  color: rgba(255,255,255,.07);
  font-family: var(--display);
  font-size: clamp(4rem, 12vw, 11rem);
  font-weight: 450; line-height: 1.25; letter-spacing: -.055em; white-space: nowrap;
}
@keyframes tvc-marquee { to { transform: translateX(calc(-50% - 2rem)); } }

.tvc-intro-main { display: flex; flex-direction: column; gap: 5rem; padding-top: 3rem; }
.tvc-statement {
  max-width: 62rem; margin: 0 auto;
  color: var(--ink); text-align: center;
  font-family: var(--display);
  font-size: clamp(1.85rem, 3.6vw, 3.1rem);
  font-weight: 450; line-height: 1.28; letter-spacing: -.035em;
}
.tvc-statement em { color: var(--accent); font-style: normal; }
.tvc-intro-details { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 4rem; }
.tvc-intro-side { display: flex; align-items: center; gap: 1.25rem; }
/* Seal: rotating ring of text with a static icon pinned dead centre. Both are
   sized in % of the wrapper, so the icon stays centred at any zoom, font size
   or orientation rather than depending on absolute offsets. */
.tvc-seal-wrap { position: relative; flex: none; width: 7.5rem; height: 7.5rem; }
.tvc-seal { position: absolute; inset: 0; width: 100%; height: 100%; animation: tvc-spin 18s linear infinite; }
.tvc-seal-ico {
  position: absolute;
  top: 50%; left: 50%;
  width: 34%; height: 34%;
  transform: translate(-50%, -50%);
  /* same colour as the ring text it sits inside */
  color: rgba(255,255,255,.5);
  fill: currentColor;
  pointer-events: none;
}
.tvc-seal text { fill: rgba(255,255,255,.5); font-family: var(--mono); font-size: 8.4px; letter-spacing: 2.1px; text-transform: uppercase; }
@keyframes tvc-spin { to { transform: rotate(360deg); } }
.tvc-intro-note { max-width: 31rem; margin: 0 0 0 auto; color: var(--muted); font-family: Inter, sans-serif; font-size: .95rem; line-height: 1.7; }

/* ═══ BENTO GRID ═════════════════════════════════════════════ */
.tvc-section { position: relative; z-index: 10; padding: 4.5rem 0; background: #0a0a0a; }
.tvc-grid { display: grid; margin-top: 2.5rem; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(11rem, auto); gap: 1rem; }
.tvc-card {
  position: relative; min-width: 0; overflow: hidden;
  padding: 2.2rem;
  border: 1px solid var(--stroke); border-radius: 2rem;
  background: var(--card);
  transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease, border-color .55s ease;
}
.tvc-card:hover { transform: translateY(-8px); border-color: #ffffff26; box-shadow: 0 24px 50px rgba(0,0,0,.45); }
.tvc-card h3 {
  position: relative; z-index: 2; margin: .55rem 0 0;
  color: var(--ink); font-family: var(--display);
  font-size: 1.9rem; font-weight: 450; letter-spacing: -.04em;
}
.tvc-card .tvc-card-copy {
  position: relative; z-index: 2; max-width: 17rem; margin: 1rem 0 0;
  color: var(--dim); font-family: Inter, sans-serif; font-size: .84rem; line-height: 1.6;
}
.tvc-card-ico {
  position: absolute; right: -1.2rem; bottom: -1.2rem;
  width: 9rem; height: 9rem;
  color: rgba(136,239,86,.12);
  transition: transform .75s cubic-bezier(.22,1,.36,1), color .55s ease;
}
.tvc-card-ico svg { width: 100%; height: 100%; display: block; }
.tvc-card:hover .tvc-card-ico { transform: rotate(14deg) scale(1.07); color: rgba(136,239,86,.2); }

.tvc-span-2 { grid-column: span 2; }
.tvc-tall { grid-row: span 2; }

/* Accent tiles */
.tvc-tile { display: flex; flex-direction: column; justify-content: space-between; padding: 1.75rem; }
.tvc-tile p { max-width: 14rem; margin: 0; color: var(--dim); font-family: Inter, sans-serif; font-size: .8rem; line-height: 1.55; }
.tvc-tile-big { color: var(--accent); font-family: var(--display); font-size: 3.2rem; font-weight: 450; line-height: 1; letter-spacing: -.05em; }
.tvc-stars { display: flex; gap: .2rem; color: var(--accent); }
.tvc-stars svg { width: 1.05rem; height: 1.05rem; }

/* ═══ CTA ════════════════════════════════════════════════════ */
/* Height must match .tvc-hero: the throw curve is identical, so the travel
   distance is what sets the apparent speed. At 170vh the ring covered the
   same distance in 70vh of scrolling against the hero 100vh, which read as
   noticeably faster. */
.tvc-cta { --cta-rotation: 0deg; --cta-scale: 1; --cta-opacity: 1; position: relative; height: 200vh; min-height: 62rem; overflow: clip; background: #0a0a0a; }
.tvc-cta-sticky { position: sticky; top: 0; display: grid; height: 100vh; min-height: 40rem; place-items: center; overflow: hidden; }
.tvc-cta-orbit {
  --ring-rot: var(--cta-rotation);
  opacity: var(--cta-opacity);
  position: absolute; width: 0; height: 0;
  transform: rotate(var(--cta-rotation)) scale(var(--cta-scale));
  will-change: transform;
}
.tvc-cta-orbit .tvc-pill { width: 11.5rem; --radius: 22rem; animation: none; opacity: 1; }
.tvc-cta-copy {
  position: relative; z-index: 3;
  display: flex; width: min(34rem, calc(100vw - 3rem)); flex-direction: column; align-items: center; text-align: center;
}
.tvc-cta-copy h2 {
  margin: 1rem 0 1.25rem;
  color: var(--ink); font-family: var(--display);
  font-size: clamp(2.6rem, 5.6vw, 4.4rem); font-weight: 450; line-height: .98; letter-spacing: -.055em;
}
.tvc-cta-copy h2 span { color: #6f6f6f; }
.tvc-cta-copy > p { max-width: 29rem; margin: 0; color: var(--muted); font-family: Inter, sans-serif; font-size: .92rem; line-height: 1.65; }
.tvc-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }

/* ═══ RESPONSIVE ═════════════════════════════════════════════ */
@media (min-width: 1440px) { .tvc-orbit-wrapper { --orbit-scale: .92; } }
@media (max-width: 1199px) { .tvc-orbit-wrapper { --orbit-scale: .68; } }
@media (max-width: 991px) {
  .tvc-width { width: calc(100% - 2.5rem); }
  .tvc-orbit-wrapper { --orbit-scale: .55; }
  .tvc-grid { grid-template-columns: repeat(2, 1fr); }
  .tvc-intro-details { grid-template-columns: 1fr; gap: 2.5rem; }
  .tvc-intro-note { margin: 0; }
  .tvc-cta-orbit { transform: rotate(var(--cta-rotation)) scale(calc(var(--cta-scale) * .6)); }
}
@media (max-width: 767px) {
  .tvc-hero { height: 165vh; }
  .tvc-orbit-wrapper { --orbit-scale: .42; }
  /* Thin the outer ring so pills do not collide once scaled down. */
  .tvc-orbit.is-outer .tvc-orbit-item:nth-child(even) { display: none; }
  .tvc-grid { grid-template-columns: 1fr; }
  .tvc-span-2, .tvc-tall { grid-column: auto; grid-row: auto; }
  .tvc-card { padding: 1.75rem; }
  .tvc-section { padding: 3rem 0; }
  .tvc-cta-orbit { transform: rotate(var(--cta-rotation)) scale(calc(var(--cta-scale) * .42)); }
  .tvc-cta { height: 165vh; }   /* matches .tvc-hero on phones */
}
@media (max-width: 479px) {
  .tvc-orbit-wrapper { --orbit-scale: .36; }
  .tvc-seal-wrap { width: 5.5rem; height: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tvc-marquee-track, .tvc-seal { animation: none; }
  .tvc-pill { animation-duration: .01ms; opacity: 1; }
  .tvc-reveal { opacity: 1; transform: none; transition: none; }
}

/* ═══ ORBIT TILES ════════════════════════════════════════════
   Question artwork sized to the Cyrclo template geometry exactly:
     outer  4.5rem x 5rem, radius 29rem, 10px corners
     inner  3.5rem x 4rem, radius 16rem, 8px corners
     cta    4.5rem x 5rem, radius 25.5rem
   Wrapper scale follows the template too (1.4 base, 1.5 wide, 0.8 small),
   so the rings read as a broad arc sweeping past the headline rather than
   a small circle. Art is 900x1000 (0.9), matching the tile ratio, so
   object-fit cover has nothing to crop.
   Tiles tumble WITH the ring exactly as the template photos do -- the tilt
   is what makes the arc read as scattered rather than as a rigid grid.
   ═══════════════════════════════════════════════════════════ */
.tvc-shot {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--radius));
  overflow: hidden;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: tvc-shot-in .9s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(.12s + var(--stagger, 0ms));
}
.tvc-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.tvc-orbit.is-outer .tvc-shot { width: 4.5rem; height: 5rem; --radius: 29rem; border-radius: 10px; }
.tvc-orbit.is-inner .tvc-shot { width: 3.5rem; height: 4rem; --radius: 16rem; border-radius: 8px; }
.tvc-cta-orbit .tvc-shot { width: 4.5rem; height: 5rem; --radius: 25.5rem; border-radius: .6rem; animation: none; opacity: 1; }

@keyframes tvc-shot-in {
  from { opacity: 0; transform: translate(-50%,-50%) scale(.76); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/* Template scale ramp, replacing the wider one the text pills needed. */
.tvc-orbit-wrapper { --orbit-scale: 1.4; }
@media (min-width: 1440px) {
  .tvc-orbit-wrapper { --orbit-scale: 1.5; }
  .tvc-orbit.is-outer .tvc-shot { width: 5rem; height: 5.5rem; }
  .tvc-orbit.is-inner .tvc-shot { width: 4rem; height: 4.5rem; }
}
@media (max-width: 1199px) { .tvc-orbit-wrapper { --orbit-scale: 1.15; } }
@media (max-width: 991px)  { .tvc-orbit-wrapper { --orbit-scale: .8; } }
@media (max-width: 767px) {
  .tvc-orbit-wrapper { --orbit-scale: .8; }
  /* Tiles are small enough now to keep the full ring on phones. */
  .tvc-orbit.is-outer .tvc-orbit-item:nth-child(even) { display: revert; }
}
@media (max-width: 479px) { .tvc-orbit-wrapper { --orbit-scale: .68; } }

@media (prefers-reduced-motion: reduce) {
  .tvc-shot { animation-duration: .01ms; opacity: 1; }
}

/* Reduced motion must not leave content invisible: these elements start at
   opacity 0 and are revealed BY their animation, so cancel rather than skip. */
@media (prefers-reduced-motion: reduce) {
  .tvc-hero-copy { animation: none; opacity: 1; transform: none; }
}

/* ═══ ORBIT CHAT BUBBLES ═════════════════════════════════════
   Replaces the artwork tiles: each orbit slot is a real chat bubble
   carrying its own question, so no per-question PNG is needed and the
   ring stops reading as one repeated image.
   Alternating incoming (dark) / outgoing (green) styling supplies the
   visual variety the template got from 30 different photographs.
   Bubbles carry text, so they counter-rotate to stay upright, but each
   keeps a small fixed tilt so the arc still scatters like the template.
   ═══════════════════════════════════════════════════════════ */
.tvc-bubble {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--radius));
  box-sizing: border-box;
  padding: .58rem .72rem;
  border-radius: 1.05rem;
  background: #101010;
  color: var(--accent);
  font-family: Inter, sans-serif;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.01em;
  text-align: left;
  text-wrap: balance;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  /* tilt is static per slot; the rest cancels the live ring rotation */
  transform: translate(-50%, -50%)
             rotate(calc(var(--tilt, 0deg) - (var(--item-angle) + var(--ring-rot))));
  opacity: 0;
  animation: tvc-bubble-in .9s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(.12s + var(--stagger, 0ms));
}
/* Speech tail, bottom-left, mirroring the artwork */
.tvc-bubble::after {
  content: "";
  position: absolute;
  left: 1.1rem;
  bottom: -.32rem;
  width: .85rem;
  height: .45rem;
  background: inherit;
  clip-path: polygon(100% 0, 0 0, 78% 100%);
}
.tvc-bubble.is-alt {
  background: var(--accent);
  color: #0a0a0a;
}

.tvc-orbit.is-outer .tvc-bubble { width: 9rem;   --radius: 29rem;   font-size: .6rem; }
.tvc-orbit.is-inner .tvc-bubble { width: 7.5rem; --radius: 16rem;   font-size: .55rem; }
.tvc-cta-orbit .tvc-bubble      { width: 9rem;   --radius: 25.5rem; font-size: .6rem; animation: none; opacity: 1; }

@keyframes tvc-bubble-in {
  from { opacity: 0; transform: translate(-50%,-50%) rotate(calc(var(--tilt, 0deg) - (var(--item-angle) + var(--ring-rot)))) scale(.76); }
  to   { opacity: 1; transform: translate(-50%,-50%) rotate(calc(var(--tilt, 0deg) - (var(--item-angle) + var(--ring-rot)))) scale(1); }
}

@media (min-width: 1440px) {
  .tvc-orbit.is-outer .tvc-bubble { width: 9.5rem; }
  .tvc-orbit.is-inner .tvc-bubble { width: 8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tvc-bubble { animation-duration: .01ms; opacity: 1; }
}

/* Incoming bubbles were pure #101010 on a near-black hero, so they read as
   floating text with no bubble. Lift the surface and add a hairline edge. */
.tvc-bubble { background: #191919; border: 1px solid #ffffff1a; }
.tvc-bubble.is-alt { background: var(--accent); border-color: transparent; }
.tvc-bubble::after { border: 0; }

/* Scrim under the navbar: the ring passes behind it, and bubble text
   colliding with the nav links is far worse than a photo doing so. */
.tvc-hero-sticky::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 9rem;
  z-index: 3;
  background: linear-gradient(180deg, #0a0a0af2 0%, #0a0a0ab8 45%, transparent 100%);
  pointer-events: none;
}

/* ═══ MERGED LIGHT BENTO ═════════════════════════════════════
   The channels and capabilities sections merged into one, using the
   Cyrclo services-section treatment: light ground, white cards, an
   asymmetric 4-column bento and a halftone sphere bleeding off the
   bottom-right corner of each card. Template black becomes Tavvlo green
   on the decorative parts; small text keeps a darkened green so it still
   passes contrast on a light ground, since brand green on white does not.
   ═══════════════════════════════════════════════════════════ */
.tvc-light {
  --ink-d: #0a0a0a;
  --body-d: #6f6f6f;
  --green-text: #3c7a1e;
  position: relative;
  z-index: 10;
  overflow: clip;
  padding: 1rem 0 4rem;
  color: var(--ink-d);
  background: #f2f2f2;
}
.tvc-light .tvc-heading h2 { color: var(--ink-d); }
.tvc-light .tvc-heading h2 span { color: var(--accent); }
.tvc-light .tvc-heading .tvc-sub { color: var(--body-d); }
.tvc-light .tvc-eyebrow { color: var(--green-text); }

.tvc-bento {
  display: grid;
  margin-top: 2.5rem;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 9rem 6rem 15rem 7rem 15rem 7rem;
  gap: 1rem;
}
.tvc-bcard {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 2.2rem;
  border-radius: 2rem;
  background: #fff;
  transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease;
}
.tvc-bcard:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(0,0,0,.08); }
.tvc-bcard h3 {
  position: relative; z-index: 2; margin: .55rem 0 0;
  font-family: var(--display); font-size: 2.1rem; font-weight: 430; letter-spacing: -.04em;
}
.tvc-bcard-copy {
  position: relative; z-index: 2; max-width: 15rem; margin: 1rem 0 0;
  color: var(--body-d); font-family: Inter, sans-serif; font-size: .82rem; line-height: 1.55;
}
/* Halftone sphere, bled off the corner exactly as the template icons are */
.tvc-sphere {
  position: absolute; right: -1.5rem; bottom: -1.5rem;
  width: 12rem; height: 12rem;
  color: var(--accent);
  transition: transform .75s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.tvc-sphere svg { width: 100%; height: 100%; display: block; }
.tvc-bcard:hover .tvc-sphere { transform: rotate(16deg) scale(1.06); }

/* Accent tiles: template black tiles, recoloured to brand green */
.tvc-btile {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.75rem;
  border-radius: 2rem;
  background: var(--accent);
  color: var(--ink-d);
}
.tvc-btile-big { font-family: var(--display); font-size: 2.6rem; font-weight: 450; line-height: 1; letter-spacing: -.05em; }
.tvc-btile p { max-width: 13rem; margin: 0; font-family: Inter, sans-serif; font-size: .78rem; line-height: 1.5; opacity: .78; }

/* Grid placement mirrors the template: two full-height columns flanked by
   split columns, so the block reads as a composition not a table. */
.a-trust     { grid-area: 1 / 1 / 3 / 2; }
.a-whatsapp  { grid-area: 1 / 2 / 5 / 3; }
.a-website   { grid-area: 1 / 3 / 5 / 4; }
.a-dashboard { grid-area: 1 / 4 / 4 / 5; }
.a-alerts    { grid-area: 3 / 1 / 5 / 2; }
.a-surfaces  { grid-area: 4 / 4 / 5 / 5; }
.a-reports   { grid-area: 5 / 1 / 7 / 2; }
.a-why       { grid-area: 5 / 2 / 7 / 4; }
.a-next      { grid-area: 5 / 4 / 7 / 5; }

/* Curved dividers, from the template. Base is light-to-dark (light ellipse
   bulging down into the dark page); -top inverts the two colours for the
   dark-to-light entry above the light section. */
.tvc-divider { position: relative; z-index: 30; height: 8rem; overflow: hidden; background: #0a0a0a; }
.tvc-divider::before {
  content: "";
  position: absolute; left: 50%; bottom: 2rem;
  width: 130%; height: 18rem;
  border-radius: 50%;
  background: #f2f2f2;
  transform: translateX(-50%);
}
.tvc-divider-top { background: #f2f2f2; }
.tvc-divider-top::before { background: #0a0a0a; }

@media (max-width: 991px) {
  .tvc-bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: minmax(13rem, auto); }
  .a-trust, .a-whatsapp, .a-website, .a-dashboard, .a-alerts,
  .a-surfaces, .a-reports, .a-why, .a-next { grid-area: auto; }
  .a-whatsapp, .a-why { grid-column: span 2; }
  .tvc-sphere { width: 9rem; height: 9rem; }
}
@media (max-width: 767px) {
  .tvc-bento { grid-template-columns: 1fr; }
  .a-whatsapp, .a-why { grid-column: auto; }
  .tvc-bcard { padding: 1.75rem; }
  .tvc-divider { height: 5rem; }
}

/* Webflow sets a global light colour on p, which beat inheritance from
   .tvc-btile and rendered the tile copy near-white on green. Be explicit.
   Tiles also clip, so a long line can never spill past the rounded corner. */
.tvc-btile { overflow: hidden; }
.tvc-btile p { color: #0a0a0a; opacity: .72; font-size: .76rem; }
.tvc-btile-big { font-size: 2.1rem; }

/* ═══ PHONE ORBIT GEOMETRY ═══════════════════════════════════
   On phones the CTA ring was scaled down as a whole (radius AND bubble
   together), leaving a ~171px radius that dropped bubbles straight onto the
   headline and buttons. The template keeps its ring far wider than the
   viewport and shrinks only the tiles, so the centre stays clear and you
   see just the arcs at the edges. Do the same here: hold the radius large,
   shrink the bubble instead.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .tvc-cta-orbit { transform: rotate(var(--cta-rotation)) scale(var(--cta-scale)); }
  .tvc-cta-orbit .tvc-bubble { width: 8.5rem; --radius: 22rem; font-size: .58rem; }
}
@media (max-width: 767px) {
  .tvc-cta-orbit { transform: rotate(var(--cta-rotation)) scale(var(--cta-scale)); }
  .tvc-cta-orbit .tvc-bubble { width: 7.5rem; --radius: 19rem; font-size: .55rem; padding: .48rem .6rem; }
}
@media (max-width: 479px) {
  .tvc-cta-orbit .tvc-bubble { width: 6.6rem; --radius: 17.5rem; font-size: .5rem; }
}


/* Phone: the clamp floor of 2.4rem was still 38px on a 390px screen, so the
   headline wrapped to three wide lines and ran under the orbiting bubbles. */
@media (max-width: 767px) {
  .tvc-hero-copy h1,
  .tvc-hero-copy h2 { font-size: 2rem; }
}
@media (max-width: 479px) {
  .tvc-hero-copy h1,
  .tvc-hero-copy h2 { font-size: 1.8rem; }
}

/* Very narrow phones: the forced 3-line break needs "Ask your restaurant" to
   fit on one line, which is ~274px at 1.8rem. Step down below 360px so it does. */
@media (max-width: 359px) {
  .tvc-hero-copy h1 { font-size: 1.6rem; }
}

/* ═══ SITE BUTTON HOVER ══════════════════════════════════════
   Webflow drives these with interaction a-17/a-18 ("Primary Button Hover
   IN/OUT"), but IX2 binds them per element per page via data-w-id, and none
   of the 66 registered events target this hand-authored page — so the
   buttons rendered correctly but never animated. Reproduced in CSS from the
   same action list: the icon block widens 48px -> 100%, the label slides out
   right at 150%, and the duplicate label slides in from the left.
   ═══════════════════════════════════════════════════════════ */
.tvc .primary-button-icon-block { transition: width .5s ease; }
.tvc .primary-button:hover .primary-button-icon-block { width: 100%; }

.tvc .primary-button-text { transition: transform .4s ease; }
.tvc .primary-button:hover .primary-button-text { transform: translateX(150%); }

/* Rests off to the LEFT so it wipes in as the label exits right, matching
   a-17 (which moves it to -100% before animating back to 0). */
.tvc .primary-button-text-absolute { transform: translateX(-100%); transition: transform .5s ease; }
.tvc .primary-button:hover .primary-button-text-absolute { transform: translateX(0); }

/* Secondary button: two stacked labels in a 24px clipped wrap, so hovering
   rolls the second one up into place. */
.tvc .secondary-button-text { transition: transform .4s ease; }
.tvc .secondary-button:hover .secondary-button-text { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .tvc .primary-button-icon-block,
  .tvc .primary-button-text,
  .tvc .primary-button-text-absolute,
  .tvc .secondary-button-text { transition: none; }
}

/* The Webflow overlay layers a 353 KB PNG wash under its gradient. This hero
   already has .tvc-hero-veil doing the darkening on top of it, so the PNG is
   invisible work — keep the gradient, drop the image. */
.tvc-hero-sticky .banner-video-bg-overlay {
  background-image: linear-gradient(200deg, var(--color-palette--secondary), #171616eb 30%, var(--color-palette--secondary) 70%);
}