*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
::selection { background: #22197f !important; color: #ffffff !important; }
  ::-moz-selection { background: #22197f !important; color: #ffffff !important; }
html { scroll-behavior: auto; background: #0a0f1e; overscroll-behavior-y: none; }
body { font-family: 'Inter', sans-serif; background: #0a0f1e; color: #0E0048; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }

/* Custom cursor disabled — use OS default cursor everywhere */

#telfo-cursor-dot,
#telfo-cursor-ring {
  display: none !important;
}

/* Motion system (non-visual defaults) */
[data-parallax] { will-change: transform; transform: translate3d(0,0,0); }
.fx-reveal {
  --fx-y: 34px;
  --fx-blur: 12px;
  --fx-duration: 1.12s;
  --fx-delay: 0ms;
  opacity: 0;
  transform: translate3d(0, var(--fx-y), 0);
  filter: blur(var(--fx-blur));
  transition:
    opacity var(--fx-duration) cubic-bezier(0.16, 1, 0.3, 1),
    transform var(--fx-duration) cubic-bezier(0.16, 1, 0.3, 1),
    filter var(--fx-duration) cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--fx-delay);
}
.fx-reveal.fx-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .fx-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}
/* Lenis integration helpers */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
#lenis-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  background: #0a0f1e;
  overflow: visible;
}
#lenis-content {
  min-height: 100%;
  background: #ffffff;
}

/* ── VIRTUAL INERTIA SCROLL ── */
html { scroll-behavior: smooth; }
body { overflow: auto; }

/* ── FADE-IN ELEMENTS ── */
.fade-in-element {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(.22,1,.36,1), transform 0.75s cubic-bezier(.22,1,.36,1);
}
.fade-in-element.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══ NAV ═══ */
nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:0 48px; height:62px; background:rgba(255,255,255,0.96); backdrop-filter:blur(10px); border-bottom:1px solid rgba(14,0,72,0.06); }
.nav-logo img { height:24px; width:auto; object-fit:contain; display:block; }
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a { font-size:13px; font-weight:300; color:rgba(14,0,72,0.5); text-decoration:none; letter-spacing:-0.01em; transition:color .18s; }
.nav-links a:hover { color:#0E0048; }
.nav-right { display:flex; align-items:center; gap:2px; }
.nav-sep { color:#ddd; margin:0 8px; }
.nav-link-btn { background:none; border:none; font-family:'Inter',sans-serif; font-size:13px; font-weight:300; color:rgba(14,0,72,0.5); cursor:pointer; padding:7px 10px; border-radius:7px; transition:background .15s,color .15s; white-space:nowrap; }
.nav-link-btn:hover { background:rgba(14,0,72,0.04); color:#0E0048; }
.nav-cta { background:none; border:none; font-family:'Inter',sans-serif; font-size:13px; font-weight:500; color:#0D2FAA; cursor:pointer; padding:7px 10px; border-radius:7px; transition:background .15s; white-space:nowrap; }
.nav-cta:hover { background:rgba(13,47,170,0.06); }
.nav-hamburger { display:none; background:none; border:none; cursor:pointer; padding:8px; flex-direction:column; gap:5px; z-index:101; }
.nav-hamburger span { display:block; width:24px; height:1.5px; background:#0E0048; border-radius:2px; transition:transform .3s,opacity .3s; transform-origin:center; }
.nav-hamburger.is-open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity:0; }
.nav-hamburger.is-open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
.mobile-menu { display:none; position:fixed; top:64px; left:0; right:0; background:#fff; border-bottom:1px solid rgba(14,0,72,0.08); z-index:99; flex-direction:column; padding:8px 24px 20px; box-shadow:0 8px 28px rgba(14,0,72,0.10); transform:translateY(-12px); opacity:0; transition:transform .3s cubic-bezier(0.4,0,0.2,1),opacity .25s ease; pointer-events:none; }
.mobile-menu.is-open { transform:translateY(0); opacity:1; pointer-events:all; }
.mobile-menu a { font-size:15px; font-weight:300; color:#0E0048; text-decoration:none; padding:13px 4px; border-bottom:1px solid rgba(14,0,72,0.05); display:block; }
.mobile-menu .m-cta { margin-top:12px; background:linear-gradient(135deg,#0E0048,#09227C); color:#fff; border:none; border-radius:10px; padding:14px 20px; font-family:'Inter',sans-serif; font-size:14px; font-weight:500; cursor:pointer; width:100%; }

@supports (content-visibility: auto) {
  .tm2-testimonials-section,
  .telfo-dash-embed,
  .tv-voices-section,
  .ti-integration-section,
  .tf-faq-section,
  .photo-footer,
  .tf-site-footer {
    content-visibility: auto;
    contain-intrinsic-size: 1px 960px;
  }
}

/* ═══ HERO ═══ */
.hero { position:relative; display:flex; flex-direction:column; align-items:center; height:100vh; min-height:600px; overflow:hidden; padding-top:62px; background:#fff; }
.hero-content { display:flex; flex-direction:column; align-items:center; position:relative; z-index:3; padding:72px 24px 0; flex:0 0 auto; }
.badge { display:inline-flex; align-items:center; gap:8px; background:#081970; color:#fff; border-radius:100px; padding:6px 18px 6px 8px; font-size:11.5px; font-weight:400; letter-spacing:.01em; margin-bottom:28px; }
.badge-icon { width:20px; height:20px; background:#1a4fd6; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.badge-icon svg { width:11px; height:11px; }
.hero h1 { font-family:'Inter',sans-serif; font-size:clamp(40px,5vw,72px); font-weight:400; line-height:1.08; text-align:center; letter-spacing:-0.04em; color:#0E0048; }
.hero h1 .blue { color:#1e3ecd; font-weight:600; }
.trust-bar { display:flex; align-items:center; gap:22px; margin-top:28px; flex-wrap:wrap; justify-content:center; }
.trust-item { display:flex; align-items:center; gap:5px; }
.stars { color:#f59e0b; font-size:13px; letter-spacing:2px; }
.trust-score { font-size:12.5px; font-weight:500; color:#0E0048; }
.trust-divider { width:1px; height:22px; background:rgba(14,0,72,0.1); }
.trust-item .uni-img { height:26px; width:auto; object-fit:contain; opacity:.65; }
.trust-item .dsgvo-img { height:30px; width:auto; object-fit:contain; opacity:.85; }
.trust-label { font-size:12.5px; color:rgba(14,0,72,0.55); font-weight:300; margin-left:2px; }
.trust-label strong { color:rgba(14,0,72,0.75); font-weight:500; }
.hero-sub { font-size:13.5px; color:rgba(14,0,72,0.38); margin-top:14px; text-align:center; font-weight:300; line-height:1.7; }
.hero-expand-cb { display:none; }
.hero-sub-wrap {
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:margin-top 0.45s ease;
}
.hero-expand-cb:checked ~ .hero {
  height:auto;
  min-height:100vh;
  overflow:visible;
}
.hero-expand-cb:checked ~ .hero .cta-area {
  position:relative;
  z-index:10;
}
.hero-expand-cb:checked ~ .hero .hero-sub-wrap {
  margin-top:28px;
}
.hero-dots { color:#999; cursor:pointer; font-family:'Inter',sans-serif; font-weight:300; user-select:none; }
.hero-expand-text {
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height 0.65s ease, opacity 0.5s ease;
  font-family:'Inter',sans-serif;
  font-weight:300;
  color:#555;
  font-size:12px;
  line-height:1.85;
  text-align:left;
  width:min(1100px,94vw);
  margin-top:0;
  box-sizing:border-box;
  border:1px solid rgba(14,0,72,0.14);
  border-radius:12px;
  padding:0 28px;
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(6px);
  position:relative;
  z-index:10;
}
.hero-expand-cb:checked ~ .hero .hero-expand-text {
  max-height:700px;
  opacity:1;
  margin-top:20px;
  padding:22px 28px;
}
.hero-expand-text p { margin:0 0 12px 0; }
.hero-expand-text p:last-child { margin-bottom:0; }
.cta-area { margin-top:36px; display:flex; flex-direction:column; align-items:center; }
.call-btn { background:linear-gradient(135deg,#0E0048 0%,#09227C 100%); color:#fff; border:none; border-radius:100px; padding:17px 52px; font-family:'Inter',sans-serif; font-size:12.5px; font-weight:500; letter-spacing:.10em; text-transform:uppercase; cursor:pointer; display:flex; align-items:center; gap:14px; transition:transform .22s,box-shadow .22s; box-shadow:0 0 0 9px rgba(14,0,72,.04),0 4px 20px rgba(14,0,72,.2); position:relative; overflow:hidden; }
.call-btn::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,transparent 55%); pointer-events:none; }
.call-btn:hover { transform:scale(1.025); box-shadow:0 0 0 11px rgba(14,0,72,.05),0 8px 28px rgba(14,0,72,.28); }
.call-icon { display:flex; flex-direction:column; gap:3px; align-items:flex-start; opacity:.45; }
.call-icon span { display:block; height:2px; border-radius:2px; background:#fff; transition:width .15s ease; }
.phone-wrap { overflow:hidden; max-height:0; opacity:0; pointer-events:none; transition:max-height .44s cubic-bezier(0.4,0,0.2,1),opacity .34s ease,margin-top .44s ease; margin-top:0; display:flex; flex-direction:column; align-items:center; gap:7px; }
.phone-wrap.is-open { max-height:165px; opacity:1; pointer-events:all; margin-top:18px; }
.phone-subtext { font-size:11.5px; color:rgba(14,0,72,.32); font-weight:300; text-align:center; }
.phone-input-row { display:flex; gap:7px; width:100%; max-width:340px; }
.phone-input { flex:1; border:1px solid rgba(14,0,72,.13); border-radius:9px; padding:11px 15px; font-family:'Inter',sans-serif; font-size:13px; font-weight:300; color:#0E0048; outline:none; background:#fafafa; transition:border-color .2s,background .2s; }
.phone-input::placeholder { color:rgba(14,0,72,.25); }
.phone-input:focus { border-color:#0D2FAA; background:#fff; }
.phone-submit { background:linear-gradient(135deg,#0E0048,#09227C); color:#fff; border:none; border-radius:9px; padding:11px 20px; font-family:'Inter',sans-serif; font-size:12.5px; font-weight:500; cursor:pointer; white-space:nowrap; transition:opacity .2s; }
.phone-submit:hover { opacity:.85; }
.phone-submit:disabled { opacity:.7; cursor:not-allowed; }
.phone-hint { font-size:10.5px; color:rgba(14,0,72,.28); font-weight:300; }
.phone-hint.is-error { color:#b42318; }
.phone-hint.is-success { color:#067647; }

/* Visualizer */
.visualizer-wrap { position:absolute; bottom:0; left:0; right:0; width:100%; height:46%; z-index:1; pointer-events:none; overflow:hidden; }
.visualizer { position:absolute; inset:0; display:flex; align-items:flex-end; gap:9px; padding:0 6px; pointer-events:all; }
.bar-col { display:flex; flex-direction:column; align-items:stretch; gap:9px; justify-content:flex-end; height:100%; flex:1; min-width:0; }
.bar-seg { width:100%; height:11px; border-radius:5px; flex-shrink:0; }
.vis-top-fade { position:absolute; top:0; left:0; right:0; height:28%; background:linear-gradient(to bottom,#fff 0%,transparent 100%); z-index:2; pointer-events:none; }

/* ═══════════════════════════════════════════
   LOGOS + KEYWORDS (Screenshot 1 look)
═══════════════════════════════════════════ */
.logos-section {
  background: #ffffff;
  border-top: 1px solid rgba(14,0,72,0.08);
  border-bottom: 0;
  padding: 14px 0 18px;
  margin-bottom: 0;
  overflow: hidden;
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}

/* Surface consistency fix: keep white sections white while scrolling. */
html,
body,
#lenis-wrapper,
#lenis-content {
  background: #ffffff !important;
}

body {
  display: block !important;
  min-height: auto !important;
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

.section-wrapper {
  background: #ffffff !important;
}

@media (min-width: 1400px) {
  .hero {
    height: min(100vh, 820px);
    min-height: 680px;
  }
}

@media (min-width: 1100px) {
  .telfo-dash-embed .page {
    height: auto;
    min-height: 0;
  }

  .telfo-dash-embed .cards-row {
    flex: 0 0 auto;
    align-items: start;
  }
}

/* Large-screen width harmonization: keep the main content areas aligned so
   ultra-wide screens do not stretch some sections much wider than others. */
:root {
  --telfo-content-max: 1320px;
  --telfo-content-gutter: clamp(20px, 3vw, 36px);
}

.hero-content,
.logos-label,
.logos-track-wrap,
.keywords-track-wrap,
.vg-header,
.vg-track-outer,
.tf-workflow-shell,
.tv-voices-page,
.ti-integration-inner,
.tf-footer-inner {
  width: min(var(--telfo-content-max), calc(100% - (var(--telfo-content-gutter) * 2)));
  margin-left: auto;
  margin-right: auto;
}

.logos-label {
  margin: 0 auto 6px;
}
.logos-section.visible { opacity:1; transform:translateY(0); }
.logos-label {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(14,0,72,0.6);
  letter-spacing: .28em;
  text-transform: uppercase;
  margin: 0 64px 6px;
}
.logos-track-wrap {
  overflow: hidden;
  width: 100%;
  position: relative;
  padding-bottom: 4px;
}
.logos-track-wrap::before,
.logos-track-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.logos-track-wrap::before { left: 0; background: linear-gradient(to right, #ffffff, transparent); }
.logos-track-wrap::after  { right: 0; background: linear-gradient(to left, #ffffff, transparent); }

.logos-track {
  display: flex;
  align-items: center;
  gap: clamp(22px, 1.8vw, 34px);
  width: max-content;
  animation: logos-scroll 56s linear infinite;
  padding: 0 clamp(24px, 3vw, 56px);
}
@keyframes logos-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.logo-item {
  flex-shrink: 0;
  width: clamp(232px, 15.6vw, 308px);
  height: clamp(160px, 10.3vw, 208px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 0;
}
.logo-item img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  opacity: 1;
  mix-blend-mode: normal;
  transition: opacity .3s;
}
.logo-item img:hover { opacity: 1; }

.keywords-strip {
  border-top: 1px solid rgba(14,0,72,0.12);
  border-bottom: 1px solid rgba(14,0,72,0.12);
  margin-top: 0;
  padding: 5px 0;
  overflow: hidden;
  background: #ffffff;
}
.keywords-track-wrap {
  overflow: hidden;
  width: 100%;
}
.keywords-track {
  display: flex;
  align-items: center;
  gap: clamp(30px, 2.6vw, 46px);
  width: max-content;
  animation: keywords-scroll 100s linear infinite;
  padding: 0 clamp(24px, 3vw, 56px);
  min-height: 28px;
}
.keyword-item {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-left: 18px;
}
.keyword-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(14,0,72,0.35);
  transform: translateY(-50%);
}
.keyword-item h3 a {
  color: inherit;
  text-decoration: none;
}
.keyword-item h3 {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(11px, .78vw, 14px);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(14,0,72,0.62);
  white-space: nowrap;
  line-height: 1;
}

@keyframes keywords-scroll {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ═══════════════════════════════════════════
   TESTIMONIAL (Screenshot 1:1)
═══════════════════════════════════════════ */
.testimonial-section {
  background: #fff;
  padding: 18px 64px 26px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.testimonial-section.visible { opacity: 1; transform: translateY(0); }
.testimonial-card {
  position: relative;
  min-height: 338px;
  border: 1px solid #dce3ef;
  background:
    radial-gradient(90% 120% at 94% 50%, rgba(122,188,241,0.14) 0%, transparent 70%),
    linear-gradient(180deg, #f4f7fc 0%, #eef3f9 100%);
  box-shadow: 0 12px 28px rgba(18,34,72,0.14);
  overflow: hidden;
}
.testimonial-card::after {
  content: '';
  position: absolute;
  left: 42px;
  right: 42px;
  bottom: 9px;
  height: 16px;
  background: linear-gradient(180deg, rgba(190,204,226,0.5), rgba(168,185,212,0.18));
  border-radius: 20px;
  filter: blur(.3px);
}
.testimonial-image-wrap {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: clamp(188px, 23vw, 230px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background:
    linear-gradient(90deg, rgba(165,181,205,0.24) 0%, rgba(213,223,238,0.12) 40%, transparent 100%),
    linear-gradient(180deg, rgba(228,236,248,0.7) 0%, rgba(209,223,243,0.55) 100%);
}
.testimonial-image {
  width: clamp(160px, 19vw, 204px);
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}
.testimonial-content {
  position: relative;
  margin: 28px 28px 40px 228px;
  padding: 24px 28px 18px;
  border-radius: 12px;
  border: 1px solid #d5dcea;
  background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(247,250,255,0.96) 100%);
  box-shadow: 0 14px 30px rgba(29,47,86,0.16);
}
.testimonial-content::after {
  content: '';
  position: absolute;
  right: 12px;
  bottom: 2px;
  width: 285px;
  height: 88px;
  background:
    radial-gradient(circle at 80% 65%, rgba(61,154,230,0.26) 0%, rgba(61,154,230,0.07) 40%, transparent 70%),
    repeating-linear-gradient(to right, rgba(60,153,229,0.22) 0 5px, transparent 5px 10px);
  opacity: .45;
  pointer-events: none;
}
.testimonial-quote-mark {
  color: #2f85db;
  font-size: 62px;
  line-height: .66;
  font-weight: 700;
  margin-bottom: 8px;
}
.testimonial-quote {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(26px, 1.95vw, 40px);
  line-height: 1.24;
  color: #202f49;
  max-width: 980px;
}
.testimonial-quote strong { font-weight: 700; }
.testimonial-meta {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #d6ddeb;
  font-family: 'Inter', sans-serif;
}
.testimonial-name {
  font-size: clamp(21px, 1.6vw, 33px);
  line-height: 1.08;
  color: #202f49;
  font-weight: 700;
}
.testimonial-role {
  margin-top: 4px;
  font-size: clamp(14px, 1.1vw, 22px);
  color: #5a6d8d;
  font-weight: 500;
}

/* ═══════════════════════════════════════════
   VIDEO GALLERY — white, Inter font, larger cards
═══════════════════════════════════════════ */
.vg-section {
  background: #ffffff;
  padding: 12px 0 0;
  overflow: hidden;
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.vg-section.visible { opacity:1; transform:translateY(0); }

.vg-header {
  padding: 0 64px 48px;
  display: flex;
  gap: 64px;
  align-items: flex-start;
  max-width: 100%;
}
.vg-header-left {
  flex: 0 0 auto;
  width: 42%;
  max-width: 520px;
}
.vg-header-right {
  flex: 1;
  padding-top: 8px;
}
.vg-header h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.04em;
  color: #060830;
  margin: 0;
}
.vg-header h2 { white-space: pre-line; }
@media (min-width: 961px) {
  .vg-header-left--tight {
    width: 44%;
    max-width: 560px;
  }
  .vg-header h2.vg-title-tight {
    font-size: clamp(26px, 2.78vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.045em;
  }
}
.vg-header p {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: rgba(6,8,48,0.52);
  line-height: 1.72;
  letter-spacing: -0.01em;
}
/* VG-section expand */
.vg-expand-cb { display: none; }
.vg-dots { color: #999; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 300; user-select: none; }
.vg-expand-text {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.65s ease, opacity 0.5s ease;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  color: #444;
  font-size: 16px;
  line-height: 1.72;
  letter-spacing: -0.01em;
  padding-top: 0;
}
.vg-expand-text p { margin: 0 0 14px 0; }
.vg-expand-text p:last-child { margin-bottom: 0; }
.vg-expand-cb:checked ~ .vg-section .vg-expand-text {
  max-height: 1200px;
  opacity: 1;
  padding-top: 16px;
}

/* Track */
.vg-track-outer { overflow:hidden; position:relative; cursor:grab; user-select:none; padding-bottom:32px; }
.vg-track-outer:active { cursor:grabbing; }
.vg-track { display:flex; gap:22px; padding:0 0 0 64px; transition:transform .5s cubic-bezier(0.25,0.46,0.45,0.94); will-change:transform; }

/* Cards — bigger */
.vc-card {
  flex-shrink: 0;
  width: 520px;
  height: 640px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: box-shadow .5s ease, opacity .5s ease;
  opacity: 0.55;
}
.vc-card.active {
  box-shadow: none;
  opacity: 1;
}
.vc-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vc-overlay {
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.06) 55%, transparent 100%);
  transition: opacity .4s;
}
.vc-card:not(.active) .vc-overlay { background: rgba(255,255,255,0.44); }
.vc-content { position:absolute; bottom:0; left:0; right:0; padding:28px 32px 26px; color:#fff; }
.vc-card:not(.active) .vc-content { opacity:0.25; }
.vc-tag {
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  opacity: .55; margin-bottom: 9px;
}
.vc-title {
  font-family: 'Inter', sans-serif;
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 8px; line-height: 1.2;
}
.vc-desc {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; font-weight: 300;
  line-height: 1.58; opacity: .82;
  margin-bottom: 14px; max-width: 380px;
}
.vc-stat {
  display: inline-block;
  background: rgba(255,255,255,0.17);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 100px;
  padding: 6px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px; font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.vc-progress-wrap { display:flex; align-items:center; gap:13px; }
.vc-play-icon {
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.22);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vc-play-icon svg { width:11px; height:12px; margin-left:1px; }
.vc-dots { display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.vc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transition: background .3s, transform .3s;
  flex-shrink: 0;
}
.vc-dot.active { background: #fff; transform: scale(1.4); }

/* ═══ TABLET ═══ */
@media (min-width: 769px) and (max-width: 1024px) {
  nav { padding:0 24px; height:44px; }
  .nav-logo img { height:19px; }
  .nav-links { gap:16px; }
  .hero { padding-top:44px; }
}

/* ═══ MOBILE ═══ */
@media (max-width: 768px) {
  nav { padding:0 20px; height:40px; }
  .nav-logo img { height:18px; }
  .nav-links, .nav-right { display:none; }
  .nav-hamburger { display:flex; }
  .mobile-menu { display:flex; top:40px; }
  .hero { padding-top:40px; }
  .hero-content { padding:52px 20px 0; }
  .hero h1 { font-size:clamp(34px,10vw,50px); }
  .trust-bar { gap:12px; }
  .trust-divider { display:none; }
  .call-btn { padding:15px 36px; font-size:12px; }
  .phone-input-row { flex-direction:column; }
  .phone-submit { width:100%; text-align:center; }
  .visualizer-wrap { height:50%; }
  .bar-seg { height:10px; }
  .bar-col { gap:10px; }
  .visualizer { gap:7px; padding:0 3px; }
  .logos-label { margin: 0 20px 10px; font-size: 10px; letter-spacing: .16em; }
  .logo-item { width:clamp(176px, 48vw, 224px); height:126px; padding:0; }
  .logo-item img { width:100%; max-width:none; max-height:none; height:100%; object-fit:cover; }
  .vg-header { padding:0 24px 36px; flex-direction:column; gap:14px; }
  .vg-header-left, .vg-header-right { width:100%; max-width:100%; }
  .vg-header h2 { font-size:clamp(28px,8vw,40px); }
  .vg-track { padding:0 0 0 24px; gap:14px; }
  .vc-card { width:320px; height:460px; }
  .logos-section { padding: 14px 0 22px; margin-bottom: 0; }
  .keywords-strip { margin-top: 0; padding: 4px 0; }
  .keywords-track { gap: 20px; padding: 0 18px; }
  .keyword-item { padding-left: 10px; }
  .keyword-item::before { width: 4px; height: 4px; }
  .keyword-item h3 { font-size: 9px; letter-spacing: .12em; }
  .testimonial-section { padding: 20px 20px 10px; }
  .testimonial-card { min-height: 0; }
  .testimonial-card::after { left: 16px; right: 16px; bottom: 6px; height: 10px; }
  .testimonial-content {
    margin: 14px 12px 16px 12px;
    padding: 16px 14px 14px;
    border-radius: 10px;
  }
  .testimonial-content::after { width: 140px; height: 62px; right: 4px; }
  .testimonial-quote-mark { font-size: 40px; margin-bottom: 8px; }
  .testimonial-quote { font-size: 21px; line-height: 1.25; }
  .testimonial-meta { margin-top: 16px; padding-top: 12px; }
  .testimonial-name { font-size: 27px; }
  .testimonial-role { font-size: 17px; }
  .testimonial-image-wrap {
    position: relative;
    width: 100%;
    height: 182px;
    justify-content: center;
  }
  .testimonial-image { width: 168px; height: auto; object-fit: contain; object-position: center bottom; }
  .vg-section { padding: 6px 0 0; }
  .vg-track-outer { padding-bottom: 12px; }
}


/* ================================
   Telfo Testimonial (Jablonski)
   Strong scoped isolation
   Prefix: telfoTesti_
   ================================ */

.telfoTesti_wrap{
  /* Section positioning */
  width: min(1160px, calc(100% - 64px));
  margin: 70px auto 90px auto;
  padding: 0;
  position: relative;
}

/* Strong scoped reset inside section */
.telfoTesti_wrap, .telfoTesti_wrap *{
  box-sizing: border-box;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}
.telfoTesti_wrap p{ margin: 0 !important; }
.telfoTesti_wrap img{ max-width: none !important; }

.telfoTesti_inner{
  border-radius: 18px;
  padding: 26px;
  background:
    radial-gradient(1200px 380px at 35% 55%, rgba(47,107,255,.08), transparent 55%),
    radial-gradient(900px 420px at 85% 70%, rgba(47,107,255,.10), transparent 60%),
    linear-gradient(180deg, #fbfcff 0%, #f2f5ff 100%);
  box-shadow: 0 18px 55px rgba(17,26,58,.12);
  border: 1px solid rgba(17,26,58,.06);
  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 22px;
  align-items: center;
  min-height: 280px;
}

.telfoTesti_inner::after{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(900px 320px at 50% 50%, transparent 55%, rgba(17,26,58,.04) 100%);
  pointer-events:none;
  opacity:.35;
}

/* LEFT portrait pane: should not become a huge square */
.telfoTesti_photoPane{
  height: 240px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(17,26,58,.06);
  box-shadow: 0 10px 26px rgba(17,26,58,.10);
}

.telfoTesti_photoPane::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(280px 220px at 30% 20%, rgba(255,255,255,.65), transparent 55%),
    linear-gradient(90deg, rgba(47,107,255,.10), transparent 55%);
  pointer-events:none;
  opacity:.55;
}

.telfoTesti_photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display:block;
  transform: translateY(6px);
  filter: saturate(1.02) contrast(1.02);
}

/* RIGHT side */
.telfoTesti_right{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

/* background accents */
.telfoTesti_accent{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.8;
  z-index: 1;
}

.telfoTesti_wave{
  position:absolute;
  right:-140px;
  bottom:-70px;
  width:560px;
  height:290px;
  background:
    radial-gradient(closest-side at 20% 50%, rgba(47,107,255,.18), transparent 70%),
    radial-gradient(closest-side at 55% 70%, rgba(47,107,255,.12), transparent 72%),
    radial-gradient(closest-side at 85% 45%, rgba(47,107,255,.10), transparent 75%);
  filter: blur(2px);
  transform: rotate(-6deg);
}

.telfoTesti_dots{
  position:absolute;
  right:48px;
  bottom:34px;
  width:240px;
  height:120px;
  background:
    radial-gradient(circle at 10px 110px, rgba(47,107,255,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 26px 100px, rgba(47,107,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 42px 92px, rgba(47,107,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 58px 84px, rgba(47,107,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 74px 76px, rgba(47,107,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 90px 68px, rgba(47,107,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 106px 60px, rgba(47,107,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 122px 52px, rgba(47,107,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 138px 44px, rgba(47,107,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 154px 38px, rgba(47,107,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 170px 32px, rgba(47,107,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 186px 28px, rgba(47,107,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 202px 24px, rgba(47,107,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 218px 22px, rgba(47,107,255,.18) 0 2px, transparent 3px);
  opacity:.85;
  filter: blur(.15px);
}

/* GLASS card */
.telfoTesti_card{
  position:relative;
  z-index: 2;
  width: min(760px, 100%);
  margin-left: -52px;   /* key: overlap like the reference */
  padding: 26px 28px 22px 28px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
  border: 1px solid rgba(17,26,58,.10);
  box-shadow: 0 18px 45px rgba(17,26,58,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:hidden;
}

.telfoTesti_card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(520px 200px at 30% 10%, rgba(47,107,255,.12), transparent 60%),
    radial-gradient(380px 180px at 85% 35%, rgba(47,107,255,.08), transparent 65%);
  opacity:.65;
  pointer-events:none;
}

.telfoTesti_quoteIcon{
  position:absolute;
  top:20px;
  left:22px;
  width:34px;
  height:34px;
  opacity:.95;
  z-index:2;
}

.telfoTesti_content{
  position:relative;
  z-index:2;
  padding-left:46px;
}

.telfoTesti_text{
  font-size: 20px;
  line-height: 1.45;
  color: rgba(17,26,58,.92);
  margin: 0 0 16px 0 !important;
  letter-spacing: -0.12px;
}

.telfoTesti_text strong{
  font-weight: 700;
  color: rgba(17,26,58,.98);
}

.telfoTesti_divider{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(17,26,58,.12), transparent);
  margin: 16px 0 14px;
}

.telfoTesti_name{
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.1px;
  color: rgba(17,26,58,.96);
}

.telfoTesti_role{
  margin-top: 3px !important;
  font-size: 13px;
  color: rgba(107,114,128,.95);
  font-weight: 500;
}

/* Responsive */
@media (max-width: 900px){
  .telfoTesti_wrap{
    width: calc(100% - 32px);
    margin: 54px auto 80px auto;
  }
  .telfoTesti_inner{
    grid-template-columns: 1fr;
    min-height: unset;
    gap: 14px;
    padding: 18px;
  }
  .telfoTesti_photoPane{
    height: 260px;
  }
  .telfoTesti_card{
    margin-left: 0;
    width: 100%;
  }
  .telfoTesti_dots{
    right: 16px;
    bottom: 18px;
    transform: scale(.9);
  }
  .telfoTesti_wave{
    right: -180px;
  }
}



  .tm2-testimonials-section {
    padding: 100px 24px 60px;
    background: #ffffff;
    position: relative;
    overflow: visible;
  }
  .tm2-reveal {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(10px);
    transition:
      opacity 0.95s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 1.05s cubic-bezier(0.22, 0.61, 0.36, 1),
      filter 1.05s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--tm2-delay, 0ms);
    will-change: opacity, transform, filter;
  }
  .tm2-testimonials-section.tm2-inview .tm2-reveal {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

  .tm2-testimonials-section::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -180px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26,82,212,0.07) 0%, transparent 70%);
    pointer-events: none;
  }

  .tm2-section-header {
    text-align: center;
    margin-bottom: 64px;
  }

  .tm2-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #1a52d4;
    margin-bottom: 16px;
  }

  .tm2-section-eyebrow::before,
  .tm2-section-eyebrow::after {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    background: #1a52d4;
    border-radius: 2px;
  }

  .tm2-section-title {
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 600;
    color: #0d1b3e;
    line-height: 1.12;
    letter-spacing: -0.02em;
  }

  .tm2-section-subtitle {
    margin-top: 12px;
    font-size: 17px;
    font-weight: 400;
    color: #6b7a99;
  }

  .tm2-all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: #1a52d4;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
  }

  .tm2-all-link:hover {
    color: #0d1b3e;
    transform: translateX(2px);
  }

  .tm2-all-link svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .tm2-carousel-wrapper {
    max-width: 900px;
    margin: 0 auto;
  }

  .tm2-carousel-track {
    min-height: 300px;
  }

  .tm2-testimonial-card {
    display: none;
    align-items: center;
    gap: 64px;
    animation: fadeSlide 0.5s ease both;
  }

  .tm2-testimonial-card.active { display: flex; }

  .tm2-testimonial-card:hover .tm2-quote-author-name,
  .tm2-testimonial-card:focus-within .tm2-quote-author-name {
    color: #0d1b3e;
  }

  .tm2-testimonial-card:hover .tm2-quote-divider,
  .tm2-testimonial-card:focus-within .tm2-quote-divider {
    width: 56px;
  }

  @keyframes fadeSlide {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .tm2-avatar-stack {
    flex-shrink: 0;
    position: relative;
    width: 180px;
    height: 220px;
  }

  .tm2-avatar-blob {
    position: absolute;
    top: 0; left: 0;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: #1a52d4;
    opacity: 0.10;
  }

  .tm2-avatar-ring {
    position: absolute;
    top: 18px; left: 18px;
    width: 148px; height: 148px;
    border-radius: 50%;
    border: 2px solid rgba(26,82,212,0.22);
  }

  .tm2-avatar-crop {
    position: absolute;
    top: 30px; left: 30px;
    width: 148px; height: 148px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #ffffff;
    box-shadow: 0 8px 32px rgba(13,27,62,0.18);
  }
  .tm2-avatar-crop--initials {
    background: linear-gradient(135deg, #1a52d4 0%, #4f7df0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tm2-avatar-initials {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffffff;
  }
  .tm2-avatar-img {
    position: absolute;
    width: 132%;
    height: 132%;
    top: -8%;
    left: -16%;
    object-fit: cover;
    object-position: center 18%;
  }
  .tm2-avatar-img--klein {
    width: 144%;
    height: 144%;
    top: -1%;
    left: -22%;
    object-position: center 16%;
  }
  .tm2-avatar-img--jablonski {
    width: 146%;
    height: 146%;
    top: -2%;
    left: -23%;
    object-position: center 15%;
  }
  .tm2-avatar-img--woerner {
    inset: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center center;
  }

  .tm2-avatar-img--haasis {
    inset: 0;
    width: 118%;
    height: 118%;
    top: -9%;
    left: -9%;
    object-fit: contain;
    object-position: center center;
  }

  .tm2-avatar-img--aras {
    inset: 0;
    width: 112%;
    height: 112%;
    top: -4%;
    left: -6%;
    object-fit: cover;
    object-position: center 18%;
  }

  .tm2-avatar-img--hermanns {
    width: 136%;
    height: 136%;
    top: -2%;
    left: -18%;
    object-position: center 15%;
  }

  .tm2-quote-side {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .tm2-quote-mark {
    font-size: 80px;
    line-height: 0.6;
    color: #1a52d4;
    opacity: 0.12;
    font-family: Georgia, serif;
    margin-bottom: 18px;
    display: block;
    user-select: none;
  }

  .tm2-stars { display: flex; gap: 3px; margin-bottom: 20px; }
  .tm2-star  { color: #f5a623; font-size: 16px; }

  .tm2-quote-text {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.65;
    color: #1a2a50;
    letter-spacing: -0.01em;
    font-style: italic;
    margin-bottom: 28px;
  }

  .tm2-quote-divider {
    width: 40px; height: 3px;
    background: #1a52d4;
    border-radius: 2px;
    margin-bottom: 20px;
  }

  .tm2-quote-author-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a52d4;
    letter-spacing: -0.01em;
  }

  .tm2-quote-author-role {
    font-size: 14px;
    font-weight: 400;
    color: #6b7a99;
    margin-top: 3px;
  }

  .tm2-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-end;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
    color: #1a52d4;
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: gap 0.2s ease, color 0.2s ease;
  }

  .tm2-card-link:hover {
    gap: 11px;
    color: #0d1b3e;
  }

  .tm2-card-link:focus-visible {
    outline: 2px solid rgba(26,82,212,0.28);
    outline-offset: 4px;
    border-radius: 10px;
  }

  .tm2-card-link svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .tm2-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 52px;
  }

  .tm2-nav-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1.5px solid #d0d9ef;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a52d4;
    transition: all 0.2s ease;
  }

  .tm2-nav-btn:hover {
    background: #1a52d4;
    border-color: #1a52d4;
    color: #fff;
    box-shadow: 0 4px 14px rgba(26,82,212,0.3);
  }

  .tm2-nav-btn svg {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }

  .tm2-dots { display: none; }

  .tm2-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #d0d9ef;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .tm2-dot.active {
    background: #1a52d4;
    width: 24px;
    border-radius: 4px;
  }

  @media (max-width: 680px) {
    .tm2-testimonials-section { padding: 56px 20px 28px; }
    .tm2-section-header { margin-bottom: 28px; }
    .tm2-section-subtitle { margin-top: 8px; font-size: 16px; }
    .tm2-all-link { margin-top: 14px; font-size: 13px; }
    .tm2-carousel-track { min-height: 0; }
    .tm2-testimonial-card { flex-direction: column; gap: 18px; }
    .tm2-avatar-stack { width: 126px; height: 126px; margin: 0 auto; }
    .tm2-avatar-blob  { width: 116px; height: 116px; }
    .tm2-avatar-ring  { top: 8px; left: 8px; width: 106px; height: 106px; }
    .tm2-avatar-crop  { top: 14px; left: 14px; width: 106px; height: 106px; }
    .tm2-avatar-initials { font-size: 34px; }
    .tm2-avatar-img   { width: 132%; height: 132%; top: -8%; left: -16%; }
    .tm2-avatar-img--klein { width: 142%; height: 142%; top: -3%; left: -22%; object-position: center 10%; }
    .tm2-avatar-img--jablonski { width: 146%; height: 146%; top: -4%; left: -24%; object-position: center 10%; }
    .tm2-avatar-img--goethlich { width: 152%; height: 152%; top: -14%; left: -26%; object-position: center 12%; }
    .tm2-quote-side { width: 100%; }
    .tm2-quote-mark { font-size: 52px; margin-bottom: 2px; line-height: 0.5; }
    .tm2-stars { margin-bottom: 14px; }
    .tm2-quote-text { font-size: 17px; line-height: 1.48; margin-bottom: 16px; }
    .tm2-quote-divider { margin-bottom: 14px; }
    .tm2-card-link { align-self: flex-start; margin-top: 14px; }
    .tm2-carousel-nav { margin-top: 26px; }
  }



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

  :root {
    --bg: #ffffff;
    --card-bg: #eef1f8;
    --inner-bg: #f7f8fc;
    --border: #d0d7ea;
    --ink: #1a1a1a;
    --muted: #888;
    --accent: #1e3ecd;
    --num-active: #1e3ecd;
    --num-inactive: #ccc;
  }

  html { scroll-behavior: smooth; background: #0a0f1e; }

  body {
    background: #0a0f1e;
    font-family: 'Inter', sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
  }

  /* ── OUTER WRAPPER ── */
  .section-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 48px 120px;
  }

  /* ── TWO-COL LAYOUT ── */
  .scroll-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    position: relative;
  }

  /* LEFT: sticky */
  .left-sticky {
    position: sticky;
    top: 100px;
  }

  .section-eyebrow {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 20px;
  }

  .left-sticky h2 {
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--ink);
  }

  .left-sticky h2 em {
    font-style: normal;
    color: var(--num-active);
  }

  .left-desc {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.75;
    color: #666;
    font-weight: 300;
    max-width: 360px;
  }

  /* Step dots */
  .step-nav {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .step-dot {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: opacity 0.2s;
  }

  .step-dot-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--num-inactive);
    color: white;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
  }

  .step-dot.active .step-dot-num {
    background: var(--num-active);
    transform: scale(1.1);
  }

  .step-dot-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    transition: color 0.3s;
  }

  .step-dot.active .step-dot-label {
    color: var(--ink);
  }

  /* Industry links */
  .industry-links {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-top: 20px;
    border-top: 1px solid rgba(14, 0, 72, 0.07);
  }

  .industry-links > span {
    flex-basis: 100% !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: rgba(14, 0, 72, 0.35) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin: 0 0 3px !important;
    display: block;
  }

  .industry-links > a ~ span {
    margin-top: 10px !important;
  }
  .industry-links > span.industry-break {
    height: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
  }

  .industry-link {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 400;
    color: rgba(14, 0, 72, 0.58);
    text-decoration: none;
    background: rgba(14, 0, 72, 0.04);
    border: 1px solid rgba(14, 0, 72, 0.09);
    border-radius: 6px;
    padding: 4px 10px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }

  .industry-link:hover {
    background: rgba(30, 62, 205, 0.06);
    color: #1e3ecd;
    border-color: rgba(30, 62, 205, 0.22);
  }

  /* ── RIGHT: scrolling cards ── */
  .right-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* The outer rounded beige card */
  .feature-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 28px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .feature-card.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Inner white card */
  .card-inner {
    background: var(--inner-bg);
    border-radius: 14px;
    border: 1px solid var(--border);
    padding: 32px;
    margin-bottom: 24px;
    min-height: 200px;
    position: relative;
    overflow: hidden;
  }

  /* Visual illustration area per card */
  .card-illustration {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Card 1 – text lines illustration */
  .illus-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 8px 0;
  }

  .illus-line {
    height: 10px;
    border-radius: 6px;
    background: var(--border);
  }

  .illus-line.highlight {
    background: linear-gradient(90deg, #1a3ccc, #3a5cdd);
  }

  .illus-line.w-full  { width: 100%; }
  .illus-line.w-80    { width: 80%; }
  .illus-line.w-90    { width: 90%; }
  .illus-line.w-60    { width: 60%; }
  .illus-line.w-70    { width: 70%; }

  /* Card 2 – voice bubbles */
  .illus-bubbles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }

  .illus-bubble {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .bubble-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }

  .bubble-info { flex: 1; overflow: hidden; }

  .bubble-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bubble-sub {
    font-size: 10px;
    color: var(--muted);
    font-weight: 400;
  }

  /* Card 3 – settings rows */
  .illus-settings {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .settings-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 4px;
    letter-spacing: 0.05em;
  }

  .settings-row {
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
  }

  .settings-row-left {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-weight: 400;
  }

  .settings-row-right {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
  }

  .settings-icon { font-size: 14px; }

  /* Card 4 – waveform */
  .illus-waveform {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
    padding: 16px 0;
  }

  .wave-bar {
    width: 3px;
    border-radius: 2px;
    background: var(--border);
    animation: wave 1.4s ease-in-out infinite;
  }

  .wave-bar.mid { background: #1a3ccc; }

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

  /* Card text area */
  .card-text-area { padding: 0 4px; }

  .card-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 10px;
  }

  .card-body {
    font-size: 14px;
    line-height: 1.8;
    color: #5a5a5a;
    font-weight: 300;
  }
  /* Feature card expand */
  .tf-box-cb { display: none; }
  .tf-dots { color: #999; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 300; user-select: none; }
  .tf-expand-text {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    color: #555;
    font-size: 14px;
    line-height: 1.8;
    padding-top: 0;
  }
  .tf-expand-text p { margin: 0 0 10px 0; }
  .tf-expand-text p:last-child { margin-bottom: 0; }
  .tf-box-cb:checked ~ .tf-expand-text {
    max-height: 600px;
    opacity: 1;
    padding-top: 12px;
  }

  @media (max-width: 800px) {
    .scroll-layout { grid-template-columns: 1fr; }
    .left-sticky { position: static; }
    .section-wrapper { padding: 64px 24px 80px; }
  }



  .tf-workflow-section {
    background: #fff;
    padding: 28px 0 110px;
  }

  .tf-workflow-shell {
    padding: 48px 60px;
    max-width: 1400px;
    margin: 0 auto;
  }

  .tf-workflow-top {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    margin-bottom: 48px;
  }

  .tf-workflow-headline {
    flex: 0 0 auto;
    max-width: 440px;
  }

  .tf-workflow-headline h2 {
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 600;
    line-height: 1.12;
    color: #111;
    letter-spacing: -0.5px;
  }

  .tf-workflow-headline h2 span {
    color: #1e3ecd;
  }

  .tf-workflow-headline p {
    font-size: 16px;
    color: #555;
    margin-top: 18px;
    line-height: 1.55;
    max-width: 340px;
  }

  .tf-workflow-avatars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    min-width: 0;
  }

  .tf-workflow-avatar-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
  }

  .tf-workflow-avatar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8f9fb;
    border: 1px solid #e4e8ed;
    border-radius: 50px;
    padding: 8px 16px 8px 8px;
    position: relative;
    overflow: hidden;
    width: 188px;
    height: 66px;
    flex-shrink: 1;
    flex-grow: 0;
    min-width: 120px;
    transition: background 0.2s, border-color 0.2s;
  }

  .tf-workflow-avatar:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
  }

  .tf-workflow-avatar:hover .tf-workflow-avatar-name {
    color: #fff;
  }

  .tf-workflow-avatar:hover .tf-workflow-avatar-trait {
    color: rgba(255, 255, 255, 0.75);
  }

  .tf-workflow-avatar:hover .tf-workflow-avatar-image {
    opacity: 0;
  }

  .tf-workflow-avatar:hover .tf-workflow-play {
    opacity: 1;
  }

  .tf-workflow-play {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
  }

  .tf-workflow-avatar-image {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    transition: opacity 0.2s;
  }

  .tf-workflow-avatar-meta {
    min-width: 0;
  }

  .tf-workflow-avatar-name {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
    transition: color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tf-workflow-avatar-trait {
    font-size: 11px;
    color: #888;
    line-height: 1.3;
    transition: color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tf-workflow-bottom {
    display: grid;
    grid-template-columns: 1.65fr 1fr 1fr;
    gap: 20px;
  }

  .tf-workflow-card {
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 16px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    height: 480px;
    display: flex;
    flex-direction: column;
  }

  .tf-workflow-dash {
    flex-direction: row;
    height: 100%;
  }

  .tf-workflow-sidebar {
    width: 110px;
    flex-shrink: 0;
    background: #f9fafb;
    border-right: 1px solid #eeeff1;
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
  }

  .tf-workflow-logo {
    height: auto;
    width: 58px;
    max-width: 58px;
    object-fit: contain;
    margin-bottom: 18px;
    display: block;
  }

  .tf-workflow-menu-label {
    font-size: 7.5px;
    color: #c5c7cc;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }

  .tf-workflow-nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #6b7280;
    padding: 5px 7px;
    border-radius: 7px;
    margin-bottom: 1px;
    white-space: nowrap;
    font-weight: 500;
  }

  .tf-workflow-nav-item svg {
    flex-shrink: 0;
    opacity: 0.7;
  }

  .tf-workflow-nav-item.is-active {
    background: #eff4ff;
    color: #1d4ed8;
    font-weight: 600;
  }

  .tf-workflow-nav-item.is-active svg {
    opacity: 1;
  }

  .tf-workflow-sidebar-bottom {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #eeeff1;
  }

  .tf-workflow-profile {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border-radius: 7px;
  }

  .tf-workflow-profile-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e0e7ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .tf-workflow-profile-name {
    font-size: 9.5px;
    font-weight: 600;
    color: #374151;
  }

  .tf-workflow-profile-role {
    font-size: 8px;
    color: #b0b7c3;
  }

  .tf-workflow-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    margin-left: auto;
    flex-shrink: 0;
  }

  .tf-workflow-main {
    flex: 1;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
  }

  .tf-workflow-main-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2px;
  }

  .tf-workflow-main-title {
    font-size: 16px;
    font-weight: 700;
    color: #111;
  }

  .tf-workflow-main-subtitle {
    font-size: 10.5px;
    color: #9ca3af;
    margin-bottom: 12px;
  }

  .tf-workflow-main-user {
    width: 30px;
    height: 30px;
    background: #f0f2f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .tf-workflow-tabs {
    display: flex;
    gap: 14px;
    border-bottom: 1.5px solid #f0f0f0;
    margin-bottom: 10px;
  }

  .tf-workflow-tab {
    font-size: 10.5px;
    color: #9ca3af;
    padding-bottom: 7px;
    font-weight: 500;
    white-space: nowrap;
  }

  .tf-workflow-tab.is-active {
    color: #1d4ed8;
    font-weight: 600;
    border-bottom: 2px solid #1d4ed8;
    margin-bottom: -1.5px;
  }

  .tf-workflow-filters {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .tf-workflow-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f8f9fb;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 9.5px;
    color: #555;
    white-space: nowrap;
    font-weight: 500;
    flex-shrink: 0;
  }

  .tf-workflow-call-header {
    display: flex;
    align-items: center;
    padding: 0 0 7px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 9px;
    font-weight: 600;
    color: #c0c4cc;
  }

  .tf-workflow-call-header .tf-contact {
    width: 32%;
    flex-shrink: 0;
  }

  .tf-workflow-call-header .tf-task {
    width: 30%;
    flex-shrink: 0;
  }

  .tf-workflow-call-header .tf-date {
    flex: 1;
  }

  .tf-workflow-call-header .tf-status {
    width: 48px;
    flex-shrink: 0;
    text-align: right;
  }

  .tf-workflow-call-row {
    display: flex;
    align-items: center;
    height: 52px;
    border-bottom: 1px solid #f5f6f8;
  }

  .tf-workflow-call-row:last-child {
    border-bottom: none;
  }

  .tf-workflow-contact {
    width: 32%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
  }

  .tf-workflow-contact-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .tf-workflow-contact-name {
    font-size: 10px;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tf-workflow-contact-phone {
    font-size: 8px;
    color: #b0b7c3;
    white-space: nowrap;
  }

  .tf-workflow-task {
    width: 30%;
    flex-shrink: 0;
    overflow: hidden;
    padding-right: 6px;
  }

  .tf-workflow-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 8.5px;
    font-weight: 500;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
  }

  .tf-workflow-pill span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .tf-workflow-pill-icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .tf-workflow-pill.is-blue {
    background: #1d4ed8;
    color: #fff;
  }

  .tf-workflow-pill.is-blue .tf-workflow-pill-icon {
    background: rgba(255, 255, 255, 0.2);
  }

  .tf-workflow-pill.is-gray {
    background: #f0f2f6;
    border: 1px solid #e5e7eb;
    color: #374151;
  }

  .tf-workflow-pill.is-gray .tf-workflow-pill-icon {
    background: #e5e9f2;
  }

  .tf-workflow-date {
    flex: 1;
    font-size: 8.5px;
    color: #9ca3af;
    white-space: nowrap;
  }

  .tf-workflow-status {
    width: 48px;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
  }

  .tf-workflow-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 3px 8px;
    font-size: 8.5px;
    color: #9ca3af;
    font-weight: 500;
    white-space: nowrap;
    background: #fff;
    line-height: 1;
  }

  .tf-workflow-status-badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #9ca3af;
    flex-shrink: 0;
  }

  .tf-workflow-summary {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 0;
  }

  .tf-workflow-summary-item {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    border-right: 1px solid #f0f0f0;
  }

  .tf-workflow-summary-item:last-child {
    border-right: none;
  }

  .tf-workflow-summary-value {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    line-height: 1;
  }

  .tf-workflow-summary-value.is-blue {
    color: #1d4ed8;
  }

  .tf-workflow-summary-label {
    font-size: 9px;
    color: #b0b7c3;
    margin-top: 3px;
  }

  .tf-workflow-lang-card {
    padding: 22px 20px;
  }

  .tf-workflow-lang-pre {
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 5px;
  }

  .tf-workflow-lang-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
    margin-bottom: 10px;
  }

  .tf-workflow-lang-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eff4ff;
    border: 1px solid #c7d9ff;
    border-radius: 20px;
    padding: 5px 13px;
    font-size: 11px;
    font-weight: 600;
    color: #1d4ed8;
    margin-bottom: 10px;
    align-self: flex-start;
  }

  .tf-workflow-lang-label {
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 12px;
  }

  .tf-workflow-flag-columns {
    display: flex;
    gap: 10px;
    flex: 1;
    min-height: 0;
  }

  .tf-workflow-flag-column {
    flex: 1;
    overflow: hidden;
    position: relative;
  }

  .tf-workflow-flag-column::before,
  .tf-workflow-flag-column::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
    height: 44px;
  }

  .tf-workflow-flag-column::before {
    top: 0;
    background: linear-gradient(to bottom, #fff 30%, transparent);
  }

  .tf-workflow-flag-column::after {
    bottom: 0;
    background: linear-gradient(to top, #fff 30%, transparent);
  }

  .tf-workflow-flag-track {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .tf-workflow-flag-track.is-up {
    animation: tf-workflow-scroll-up 11s linear infinite;
  }

  .tf-workflow-flag-track.is-down {
    animation: tf-workflow-scroll-down 13s linear infinite;
  }

  @keyframes tf-workflow-scroll-up {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
  }

  @keyframes tf-workflow-scroll-down {
    from { transform: translateY(-50%); }
    to { transform: translateY(0); }
  }

  .tf-workflow-flag-item {
    display: flex;
    align-items: center;
    gap: 11px;
    background: #f8f9fb;
    border: 1px solid #e8ebef;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
  }

  .tf-workflow-flag-item:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
  }

  .tf-workflow-flag-item:hover .tf-workflow-flag-img {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  }

  .tf-workflow-flag-img {
    width: 32px;
    height: 22px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }

  .tf-workflow-trends {
    padding: 20px 18px;
  }

  .tf-workflow-trends-label {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 10px;
    font-weight: 500;
  }

  .tf-workflow-trends-numbers {
    display: flex;
    gap: 28px;
    margin-bottom: 4px;
  }

  .tf-workflow-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #111;
    line-height: 1;
  }

  .tf-workflow-stat-label {
    font-size: 10px;
    color: #c0c4cc;
    margin-top: 3px;
  }

  .tf-workflow-chart {
    margin: 8px 0 4px;
  }

  .tf-workflow-chart svg {
    width: 100%;
    height: 60px;
    overflow: visible;
    display: block;
  }

  .tf-workflow-mini-row {
    display: flex;
    gap: 28px;
    margin-bottom: 14px;
  }

  .tf-workflow-mini-row strong {
    font-size: 13px;
    font-weight: 700;
    color: #1d4ed8;
  }

  .tf-workflow-heatmap {
    margin-bottom: 14px;
  }

  .tf-workflow-hm-label {
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 7px;
    font-weight: 500;
  }

  .tf-workflow-time-row {
    display: flex;
    padding-left: 16px;
    margin-bottom: 3px;
  }

  .tf-workflow-time-row span {
    flex: 1;
    font-size: 8px;
    color: #d1d5db;
  }

  .tf-workflow-grid {
    display: grid;
    grid-template-columns: 14px 1fr;
    row-gap: 3px;
  }

  .tf-workflow-day {
    font-size: 8px;
    color: #d1d5db;
    display: flex;
    align-items: center;
    font-weight: 500;
  }

  .tf-workflow-cells {
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    gap: 2px;
  }

  .tf-workflow-cell {
    aspect-ratio: 1;
    border-radius: 2px;
    background: #eef2ff;
  }

  .tf-workflow-cell.is-mid {
    background: #93b4f7;
  }

  .tf-workflow-cell.is-high {
    background: #1d4ed8;
  }

  .tf-workflow-donut-row {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .tf-workflow-donut {
    position: relative;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
  }

  .tf-workflow-donut svg {
    width: 54px;
    height: 54px;
  }

  .tf-workflow-donut-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .tf-workflow-donut-inner strong {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #111;
  }

  .tf-workflow-donut-inner span {
    font-size: 7.5px;
    color: #c0c4cc;
  }

  .tf-workflow-legend {
    flex: 1;
  }

  .tf-workflow-legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: #555;
    margin-bottom: 5px;
    font-weight: 500;
  }

  .tf-workflow-legend-row strong {
    margin-left: auto;
    font-weight: 700;
    color: #111;
  }

  .tf-workflow-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #1d4ed8;
  }

  .tf-workflow-legend-dot.is-light {
    background: #93c5fd;
  }

  @media (max-width: 768px) {
    .tf-workflow-section {
      padding: 14px 0 80px;
    }

    .tf-workflow-shell {
      padding: 32px 16px;
    }

    .tf-workflow-top {
      flex-direction: column;
      gap: 32px;
    }

    .tf-workflow-headline {
      max-width: 100%;
    }

    .tf-workflow-avatars {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
    }

    .tf-workflow-avatar-row {
      display: contents;
    }

    .tf-workflow-avatar {
      width: 100%;
      flex-shrink: 0;
    }

    .tf-workflow-play {
      left: 0;
      top: 0;
      transform: none;
      width: 100%;
      height: 100%;
      border-radius: 50px;
      background: rgba(29, 78, 216, 0.9);
    }

    .tf-workflow-bottom {
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .tf-workflow-card {
      height: auto;
    }

    .tf-workflow-flag-columns {
      height: 180px;
      flex: none;
    }
  }

  @media (min-width: 1001px) and (max-width: 1200px) {
    .tf-workflow-shell {
      padding: 48px 40px;
    }

    .tf-workflow-avatar {
      width: 168px;
      gap: 8px;
    }

    .tf-workflow-avatar-row {
      gap: 10px;
    }

    .tf-workflow-bottom {
      gap: 16px;
    }
  }

  @media (min-width: 850px) and (max-width: 1000px) {
    .tf-workflow-shell {
      padding: 40px 28px;
    }

    .tf-workflow-top {
      gap: 24px;
    }

    .tf-workflow-headline {
      max-width: 260px;
      flex-shrink: 0;
    }

    .tf-workflow-headline h2 {
      font-size: 34px;
    }

    .tf-workflow-avatar {
      width: 150px;
      height: 60px;
      padding: 7px 10px 7px 7px;
      gap: 8px;
    }

    .tf-workflow-avatar-image {
      width: 42px;
      height: 42px;
    }

    .tf-workflow-avatar-name {
      font-size: 12px;
    }

    .tf-workflow-avatar-trait {
      font-size: 10px;
    }

    .tf-workflow-avatar-row {
      gap: 8px;
    }

    .tf-workflow-avatars {
      gap: 8px;
    }

    .tf-workflow-bottom {
      grid-template-columns: 1.5fr 1fr 1fr;
      gap: 12px;
    }

    .tf-workflow-card {
      height: auto;
      min-height: 420px;
    }

    .tf-workflow-sidebar {
      width: 95px;
      padding: 14px 9px;
    }

    .tf-workflow-logo {
      width: 52px;
    }

    .tf-workflow-nav-item {
      font-size: 9px;
      padding: 4px 6px;
    }

    .tf-workflow-main {
      padding: 14px 11px;
    }

    .tf-workflow-flag-columns {
      height: 220px;
      flex: none;
    }
  }

  @media (min-width: 769px) and (max-width: 849px) {
    .tf-workflow-shell {
      padding: 36px 22px;
    }

    .tf-workflow-top {
      gap: 18px;
    }

    .tf-workflow-headline {
      max-width: 210px;
      flex-shrink: 0;
    }

    .tf-workflow-headline h2 {
      font-size: 26px;
    }

    .tf-workflow-headline p {
      font-size: 13px;
    }

    .tf-workflow-avatar {
      width: 130px;
      height: 56px;
      padding: 6px 8px 6px 6px;
      gap: 7px;
    }

    .tf-workflow-avatar-image {
      width: 38px;
      height: 38px;
    }

    .tf-workflow-avatar-name {
      font-size: 11px;
    }

    .tf-workflow-avatar-trait {
      font-size: 9.5px;
    }

    .tf-workflow-avatar-row {
      gap: 7px;
    }

    .tf-workflow-avatars {
      gap: 7px;
    }

    .tf-workflow-bottom {
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
    }

    .tf-workflow-card {
      height: auto;
      min-height: 380px;
    }

    .tf-workflow-sidebar {
      width: 80px;
      padding: 12px 7px;
    }

    .tf-workflow-logo {
      width: 46px;
    }

    .tf-workflow-nav-item {
      font-size: 8px;
      padding: 4px 5px;
      gap: 4px;
    }

    .tf-workflow-menu-label {
      display: none;
    }

    .tf-workflow-main {
      padding: 12px 9px;
    }

    .tf-workflow-main-title {
      font-size: 12px;
    }

    .tf-workflow-main-subtitle {
      font-size: 8.5px;
    }

    .tf-workflow-tab {
      font-size: 8.5px;
    }

    .tf-workflow-filters {
      display: none;
    }

    .tf-workflow-lang-card h3 {
      font-size: 13px;
    }

    .tf-workflow-flag-item {
      padding: 8px 9px;
      font-size: 10.5px;
    }

    .tf-workflow-flag-img {
      width: 24px;
      height: 16px;
    }

    .tf-workflow-flag-columns {
      height: 200px;
      flex: none;
    }

    .tf-workflow-trends {
      padding: 14px 11px;
    }

    .tf-workflow-stat-value {
      font-size: 22px;
    }
  }




  .telfo-dash-embed *, .telfo-dash-embed *::before, .telfo-dash-embed *::after{ box-sizing: border-box; margin: 0; padding: 0; }
  .telfo-dash-embed{
    --blue:       #1d4ed8;
    --blue-dark:  #1e3a8a;
    --blue-mid:   #bfdbfe;
    --blue-light: #eff6ff;
    --text:       #0f172a;
    --sub:        #374151;
    --muted:      #6b7280;
    --faint:      #9ca3af;
    --border:     #e8ecf2;
    --border-mid: #d1d9e6;
    --bg-card:    #ffffff;
    --green:      #16a34a;
    --green-bg:   #dcfce7;
  }

  .telfo-dash-embed{
    font-family: 'Inter', sans-serif;
    background: #ffffff;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
  }

  /* ══════════════════════════════
     PAGE SHELL
  ══════════════════════════════ */
  .telfo-dash-embed .page{
    width: min(100%, var(--telfo-content-max));
    margin: 0 auto;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 36px 80px 32px;
    background: #ffffff;
    overflow: hidden;
  }

  /* ══════════════════════════════
     SHARED CARD
  ══════════════════════════════ */
  .telfo-dash-embed .card{
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
  }

  /* ══════════════════════════════
     HEADER CARD
  ══════════════════════════════ */
  .telfo-dash-embed .header-card{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 28px;
    flex-shrink: 0;
    gap: 32px;
  }

  .telfo-dash-embed .header-left{
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
  }

  .telfo-dash-embed .header-divider{
    width: 1px;
    height: 32px;
    background: var(--border-mid);
    flex-shrink: 0;
  }

  /* telfo.ai logo (used inside Neue Anrufe card) */
  .telfo-dash-embed .brand-logo{
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1;
    user-select: none;
    opacity: 0.55;
  }
  .telfo-dash-embed .logo-tel{ color: #000000; }
  .telfo-dash-embed .logo-fo{ color: var(--blue-dark); }
  .telfo-dash-embed .logo-dot{ color: var(--blue); }
  .telfo-dash-embed .logo-ai{ color: var(--blue); }

  .telfo-dash-embed .header-text{ min-width: 0; }

  .telfo-dash-embed .dash-title{
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 600;
    letter-spacing: -0.6px;
    line-height: 1.12;
    color: var(--text);
  }
  .telfo-dash-embed .dash-title .accent{ color: #1e3ecd; white-space: nowrap; }

  .telfo-dash-embed .dash-sub{
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    margin-top: 18px;
  }
  .dash-expand-cb { display: none; }
  .dash-expand-text {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    color: #555;
    font-size: 12px;
    line-height: 1.7;
    padding-top: 0;
  }
  .dash-expand-text p { margin: 0 0 10px 0; }
  .dash-expand-text p:last-child { margin-bottom: 0; }
  .dash-expand-cb:checked ~ .dash-expand-text {
    max-height: 600px;
    opacity: 1;
    padding-top: 14px;
  }

  .telfo-dash-embed .header-right{
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
  }

  .telfo-dash-embed .live-row{
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--muted);
  }
  .telfo-dash-embed .live-dot{
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 2px var(--green-bg);
    animation: pulseDot 2s ease-in-out infinite;
  }
  @keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:.4} }

  .telfo-dash-embed .tabs{
    display: flex;
    gap: 2px;
    background: #f5f7fa;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
  }
  .telfo-dash-embed .tab-btn{
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    background: none;
    border: none;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
  }
  .telfo-dash-embed .tab-btn.active{
    background: #ffffff;
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }

  /* ══════════════════════════════
     METRIC STRIP
  ══════════════════════════════ */
  .telfo-dash-embed .metrics-card{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    flex-shrink: 0;
    padding: 0;
    overflow: hidden;
  }

  .telfo-dash-embed .metric-item{
    padding: 18px 28px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-right: 1px solid var(--border);
    transition: background 0.15s;
  }
  .telfo-dash-embed .metric-item:last-child{ border-right: none; }
  .telfo-dash-embed .metric-item:hover{ background: #fafbfd; }

  .telfo-dash-embed .metric-top{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }

  .telfo-dash-embed .metric-val{
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.5px;
    line-height: 1;
  }
  .telfo-dash-embed .metric-unit{
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
  }
  .telfo-dash-embed .metric-label{
    font-size: 11px;
    font-weight: 400;
    color: var(--muted);
  }
  .telfo-dash-embed .metric-trend{
    font-size: 10.5px;
    font-weight: 500;
    color: var(--green);
    align-self: flex-start;
  }
  .telfo-dash-embed .metric-trend.down{ color: var(--blue); }
  .telfo-dash-embed .metric-trend.soft{ color: #6d28d9; }

  /* ══════════════════════════════
     THREE-COLUMN CARD ROW
  ══════════════════════════════ */
  .telfo-dash-embed .cards-row{
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 12px;
    flex: 1;
    min-height: 0;
  }

  .telfo-dash-embed .main-card{
    display: flex;
    flex-direction: column;
    padding: 22px 26px;
    overflow: hidden;
    position: relative;
  }
  .telfo-dash-embed .combined-hdr{
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 16px; flex-shrink: 0;
  }
  .telfo-dash-embed .combined-hdr .card-title{ flex: 1; margin-bottom: 0; }

  .telfo-dash-embed .card-title{
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
    flex-shrink: 0;
    margin-bottom: 16px;
  }

  /* ── Call list ── */
  .telfo-dash-embed .call-list{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .telfo-dash-embed .call-row{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .telfo-dash-embed .call-row:first-child{ padding-top: 0; }
  .telfo-dash-embed .call-row:last-child{ border-bottom: none; padding-bottom: 0; }

  .telfo-dash-embed .call-avatar{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--blue-dark);
    flex-shrink: 0;
    margin-top: 1px;
  }

  .telfo-dash-embed .call-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .telfo-dash-embed .call-name{ font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .telfo-dash-embed .call-task{ font-size: 11px; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .telfo-dash-embed .call-number{ font-size: 10.5px; font-weight: 400; color: var(--blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .telfo-dash-embed .call-meta{ display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
  .telfo-dash-embed .call-badge{ font-size: 9.5px; font-weight: 600; color: var(--blue); background: var(--blue-light); padding: 2px 7px; border-radius: 4px; }
  .telfo-dash-embed .call-time{ font-size: 10px; font-weight: 400; color: var(--faint); }

  /* ── Analytics ── */
  .telfo-dash-embed .analytics-body{
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 18px;
    min-height: 0;
    overflow: hidden;
  }

  .telfo-dash-embed .donut-row{ display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
  .telfo-dash-embed .legend{ display: flex; flex-direction: column; gap: 8px; flex: 1; }
  .telfo-dash-embed .legend-item{ display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 400; color: var(--sub); }
  .telfo-dash-embed .legend-dot{ width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .telfo-dash-embed .legend-val{ margin-left: auto; font-weight: 600; font-size: 12px; color: var(--text); }

  .telfo-dash-embed .section-divider{ height: 1px; background: var(--border); flex-shrink: 0; }

  .telfo-dash-embed .spark-block{ flex-shrink: 0; }
  .telfo-dash-embed .block-label{ font-size: 9px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }

  .telfo-dash-embed .spark-row{ display: flex; align-items: flex-end; gap: 8px; }
  .telfo-dash-embed .spark-svg{ flex: 1; display: block; }
  .telfo-dash-embed .spark-stat{ display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; padding-bottom: 10px; }
  .telfo-dash-embed .spark-num{ font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -0.4px; line-height: 1; }
  .telfo-dash-embed .spark-desc{ font-size: 9.5px; font-weight: 400; color: var(--muted); }

  .telfo-dash-embed .heatmap-block{ flex: 1; min-height: 0; overflow: hidden; }

  /* ── Live card ── */
  .telfo-dash-embed .live-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-shrink: 0; }
  .telfo-dash-embed .live-tag{
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: #dc2626; background: #fef2f2;
    padding: 3px 9px; border-radius: 4px;
  }
  .telfo-dash-embed .live-blink{ width: 5px; height: 5px; border-radius: 50%; background: #dc2626; animation: pulseDot 1.1s ease-in-out infinite; }
  .telfo-dash-embed .live-timer{ font-size: 12px; font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; }

  .telfo-dash-embed .caller-row{
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 9px;
    margin-bottom: 16px;
    flex-shrink: 0;
  }
  .telfo-dash-embed .caller-avatar{
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--blue-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; color: #ffffff; flex-shrink: 0;
  }
  .telfo-dash-embed .caller-name{ font-size: 12.5px; font-weight: 600; color: var(--text); }
  .telfo-dash-embed .caller-num{ font-size: 10.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }

  .telfo-dash-embed .transcript{
    display: flex; flex-direction: column; gap: 8px;
    flex: 1; min-height: 0; overflow-y: auto;
    scroll-behavior: smooth;
  }
  .telfo-dash-embed .transcript::-webkit-scrollbar{ width: 3px; }
  .telfo-dash-embed .transcript::-webkit-scrollbar-track{ background: transparent; }
  .telfo-dash-embed .transcript::-webkit-scrollbar-thumb{ background: var(--border-mid); border-radius: 3px; }
  .telfo-dash-embed .transcript:hover::-webkit-scrollbar-thumb{ background: var(--blue-mid); }
  .telfo-dash-embed .ts-status{
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; color: var(--muted);
    padding: 3px 0; flex-shrink: 0;
  }
  .telfo-dash-embed .ts-status.caller{ flex-direction: row-reverse; }
  .telfo-dash-embed .ts-dot{ width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; animation: pulseDot 1.1s ease-in-out infinite; }
  .telfo-dash-embed .ts-dot.ai{ background: var(--blue); }
  .telfo-dash-embed .ts-dot.caller{ background: var(--green); }
  .telfo-dash-embed .msg{ display: flex; gap: 8px; align-items: flex-start; flex-shrink: 0; }
  .telfo-dash-embed .msg.caller{ flex-direction: row-reverse; }
  .telfo-dash-embed .msg-who{
    font-size: 8.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
    padding-top: 4px; flex-shrink: 0; width: 22px;
    color: var(--faint); text-align: right;
  }
  .telfo-dash-embed .msg.ai .msg-who{ color: var(--blue); text-align: left; }
  .telfo-dash-embed .msg-text{
    font-size: 11.5px; font-weight: 400; line-height: 1.5; color: var(--sub);
    background: #f0fdf4; border: 1px solid #bbf7d0;
    border-radius: 8px 2px 8px 8px; padding: 6px 10px;
  }
  .telfo-dash-embed .msg.ai .msg-text{
    background: var(--blue-light); border-color: var(--blue-mid);
    border-radius: 2px 8px 8px 8px;
  }
  .telfo-dash-embed .typing-wrap{ display: inline-flex; align-items: center; gap: 3px; background: var(--blue-light); border: 1px solid var(--blue-mid); border-radius: 8px 8px 8px 2px; padding: 8px 10px; }
  .telfo-dash-embed .t-dot{ width: 4px; height: 4px; border-radius: 50%; background: var(--blue); opacity: .4; animation: tdot 1.3s ease-in-out infinite; }
  .telfo-dash-embed .t-dot:nth-child(2){ animation-delay: .2s; }
  .telfo-dash-embed .t-dot:nth-child(3){ animation-delay: .4s; }
  @keyframes tdot { 0%,100%{opacity:.3;transform:translateY(0)} 50%{opacity:1;transform:translateY(-2px)} }

  .telfo-dash-embed .live-footer{
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 12px; border-top: 1px solid var(--border);
    flex-shrink: 0; margin-top: auto;
  }
  .telfo-dash-embed .voice-label{ display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 400; color: var(--muted); }
  .telfo-dash-embed .voice-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
  .telfo-dash-embed .sentiment{ font-size: 11px; font-weight: 500; color: var(--green); }

  /* ══════════════════════════════
     LANGUAGE STRIP
  ══════════════════════════════ */
  .telfo-dash-embed .lang-card{
    flex-shrink: 0;
    padding: 16px 24px 18px;
    overflow: hidden;
  }

  .telfo-dash-embed .lang-header{
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
  }
  .telfo-dash-embed .lang-title{ font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
  .telfo-dash-embed .lang-pill{ font-size: 10px; font-weight: 500; color: var(--blue); background: var(--blue-light); padding: 2px 9px; border-radius: 20px; }

  .telfo-dash-embed .ticker-outer{
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
    mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  }
  .telfo-dash-embed .ticker{
    display: flex; gap: 10px; width: max-content;
    animation: slide 42s linear infinite;
  }
  .telfo-dash-embed .ticker:hover{ animation-play-state: paused; }
  @keyframes slide { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

  .telfo-dash-embed .lang-item{
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    flex-shrink: 0; padding: 0 4px;
    transition: transform 0.2s;
    cursor: default;
  }
  .telfo-dash-embed .lang-item:hover{ transform: translateY(-2px); }

  .telfo-dash-embed .flag-circle{
    width: 38px; height: 38px; border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--border);
    flex-shrink: 0;
    transition: border-color 0.2s;
  }
  .telfo-dash-embed .lang-item:hover .flag-circle{ border-color: var(--blue-mid); }
  .telfo-dash-embed .flag-circle img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); display: block; }
  .telfo-dash-embed .lang-name{ font-size: 9px; font-weight: 400; color: var(--faint); white-space: nowrap; transition: color 0.2s; }
  .telfo-dash-embed .lang-item:hover .lang-name{ color: var(--blue); }

  /* ══════════════════════════════
     FAKE CURSOR
  ══════════════════════════════ */
  .telfo-dash-embed #fakeCursor{
    position: absolute;
    pointer-events: none;
    z-index: 200;
    opacity: 0;
    will-change: left, top, opacity, transform;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
  }
  .telfo-dash-embed #fakeCursor.cursor-move{
    transition: left 0.8s cubic-bezier(0.33,0,0.2,1),
                top  0.8s cubic-bezier(0.33,0,0.2,1),
                opacity 0.35s ease;
  }
  .telfo-dash-embed #fakeCursor.cursor-click{
    transition: transform 0.1s ease,
                left 0.8s cubic-bezier(0.33,0,0.2,1),
                top  0.8s cubic-bezier(0.33,0,0.2,1),
                opacity 0.4s ease;
  }
  @keyframes cursorClick {
    0%   { transform: scale(1); }
    40%  { transform: scale(0.78); }
    100% { transform: scale(1); }
  }
  .telfo-dash-embed .cursor-clicking{ animation: cursorClick 0.22s ease forwards; }

  /* row click ripple */
  @keyframes rowRipple {
    0%   { box-shadow: 0 0 0 0 rgba(29,78,216,0.18); }
    60%  { box-shadow: 0 0 0 6px rgba(29,78,216,0); }
    100% { box-shadow: 0 0 0 0 rgba(29,78,216,0); }
  }

  /* ══════════════════════════════
     MOBILE  (≤ 767px)
  ══════════════════════════════ */
  @media (max-width: 767px) {
    .telfo-dash-embed{ overflow: auto; }

    .telfo-dash-embed .page{
      height: auto;
      overflow: visible;
      padding: 16px 16px 24px;
      gap: 10px;
    }

    /* Header */
    .telfo-dash-embed .header-card{
      flex-wrap: wrap;
      padding: 14px 16px;
      gap: 10px;
    }
    .telfo-dash-embed .header-right{
      width: 100%;
      justify-content: space-between;
      gap: 8px;
    }
    .telfo-dash-embed .tabs{ order: 2; }
    .telfo-dash-embed .live-row{ order: 1; }

    /* Metrics: 2×2 grid */
    .telfo-dash-embed .metrics-card{
      grid-template-columns: repeat(2, 1fr);
    }
    .telfo-dash-embed .metric-item{
      border-right: none;
      border-bottom: 1px solid var(--border);
      padding: 14px 18px;
    }
    .telfo-dash-embed .metric-item:nth-child(1), .telfo-dash-embed .metric-item:nth-child(2){ border-bottom: 1px solid var(--border); }
    .telfo-dash-embed .metric-item:nth-child(3), .telfo-dash-embed .metric-item:nth-child(4){ border-bottom: none; }
    .telfo-dash-embed .metric-item:nth-child(odd){ border-right: 1px solid var(--border); }

    /* Cards stack vertically */
    .telfo-dash-embed .cards-row{
      grid-template-columns: 1fr;
    }
    .telfo-dash-embed .main-card{
      height: auto;
      overflow: visible;
    }
    .telfo-dash-embed .call-list{ overflow: visible; height: auto; }
    .telfo-dash-embed .analytics-body{ overflow: visible; height: auto; min-height: unset; }
    .telfo-dash-embed .heatmap-block{ overflow: visible; min-height: unset; height: auto; }
    .telfo-dash-embed .transcript{ overflow: visible; min-height: unset; height: auto; }

    /* Lang strip */
    .telfo-dash-embed .lang-card{ padding: 12px 16px 14px; }
  }




  .tv-voices-section {
    --tv-blue: #1d4ed8;
    --tv-blue-dark: #1e3a8a;
    --tv-blue-mid: #bfdbfe;
    --tv-blue-light: #eff6ff;
    --tv-text: #0f172a;
    --tv-muted: #6b7280;
    --tv-border: #e8ecf2;
    --tv-green: #16a34a;
    position: relative;
    background: #ffffff;
    padding: 16px 0 80px;
    overflow: hidden;
  }

  .tv-voices-section *,
  .tv-voices-section *::before,
  .tv-voices-section *::after {
    box-sizing: border-box;
  }

  .tv-voices-page {
    padding: 0 80px;
    background: #ffffff;
    max-width: 1320px;
    margin: 0 auto;
  }

  .tv-voices-main-content {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 72px;
    align-items: center;
  }

  .tv-voices-left-panel {
    display: flex;
    flex-direction: column;
    padding: 40px 0;
  }

  .tv-voices-panel-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--tv-blue-light);
    color: var(--tv-blue);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 100px;
    width: fit-content;
    margin-bottom: 28px;
    flex-shrink: 0;
    animation: tv-voices-fade-up 0.5s ease both;
  }

  .tv-voices-badge-dot {
    width: 6px;
    height: 6px;
    background: var(--tv-blue);
    border-radius: 50%;
    animation: tv-voices-blink 2s ease-in-out infinite;
  }

  .tv-voices-panel-title {
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1.12;
    color: var(--tv-text);
    margin-bottom: 20px;
    flex-shrink: 0;
    animation: tv-voices-fade-up 0.5s 0.1s ease both;
  }

  .tv-voices-panel-title .accent {
    color: #1e3ecd;
  }

  .tv-voices-panel-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--tv-muted);
    margin-bottom: 36px;
    max-width: 430px;
    flex-shrink: 0;
    animation: tv-voices-fade-up 0.5s 0.2s ease both;
  }
  .stimmen-expand-cb { display: none; }
  .stimmen-expand-text {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    color: #555;
    font-size: 16px;
    line-height: 1.7;
    max-width: 430px;
    padding-top: 0;
    margin-bottom: 0;
  }
  .stimmen-expand-text p { margin: 0 0 12px 0; }
  .stimmen-expand-text p:last-child { margin-bottom: 0; }
  .stimmen-expand-cb:checked ~ .stimmen-expand-text {
    max-height: 600px;
    opacity: 1;
    padding-top: 14px;
    margin-bottom: 36px;
  }
  @media (max-width: 473px) {
    .stimmen-expand-text {
      font-size: 14px !important;
      max-width: 100% !important;
    }
    .stimmen-expand-cb:checked ~ .stimmen-expand-text {
      max-height: 1400px !important;
    }
  }
  @media (min-width: 474px) and (max-width: 1147px) {
    .stimmen-expand-cb:checked ~ .stimmen-expand-text {
      max-height: 1600px !important;
    }
  }

  .tv-voices-cta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-bottom: 52px;
    animation: tv-voices-fade-up 0.5s 0.3s ease both;
  }

  .tv-voices-btn-primary {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: var(--tv-blue);
    border: none;
    padding: 11px 24px;
    border-radius: 7px;
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: background 0.2s;
  }

  .tv-voices-btn-primary:hover {
    background: var(--tv-blue-dark);
  }

  .tv-voices-btn-ghost {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--tv-muted);
    background: none;
    border: none;
    padding: 11px 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s, gap 0.2s;
  }

  .tv-voices-btn-ghost::after {
    content: '→';
    font-size: 14px;
    transition: transform 0.2s;
  }

  .tv-voices-btn-ghost:hover {
    color: var(--tv-text);
  }

  .tv-voices-btn-ghost:hover::after {
    transform: translateX(3px);
  }

  .tv-voices-spacer {
    height: 0;
  }

  .tv-voices-stats-row {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    animation: tv-voices-fade-up 0.5s 0.4s ease both;
  }

  .tv-voices-stat-item {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 5px;
    padding: 0 22px;
  }

  .tv-voices-stat-item:first-child {
    padding-left: 0;
  }

  .tv-voices-stat-item + .tv-voices-stat-item {
    border-left: 1px solid var(--tv-border);
  }

  .tv-voices-stat-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--tv-text);
    letter-spacing: -0.1px;
    display: flex;
    align-items: baseline;
    gap: 1px;
  }

  .tv-voices-stat-unit {
    font-size: 13px;
    color: var(--tv-text);
    font-weight: 600;
  }

  .tv-voices-stat-lbl {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--tv-muted);
  }

  .tv-voices-right-panel {
    position: relative;
    height: 520px;
    overflow: hidden;
    border-radius: 12px;
    animation: tv-voices-fade-up 0.6s 0.15s ease both;
  }

  .tv-voices-right-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(29, 78, 216, 0.07) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }

  .tv-voices-featured-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 190px;
    background: #fff;
    border: 1.5px solid var(--tv-border);
    border-radius: 20px;
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(29, 78, 216, 0.05);
    z-index: 5;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .tv-voices-featured-center:hover {
    transform: translate(-50%, -53%);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.13);
  }

  .tv-voices-feat-img-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 12px;
  }

  .tv-voices-feat-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--tv-blue-mid);
    display: block;
  }

  .tv-voices-feat-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--tv-green);
    border: 2px solid #fff;
  }

  .tv-voices-feat-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--tv-text);
    margin-bottom: 5px;
    line-height: 1;
  }

  .tv-voices-feat-tag {
    font-size: 10px;
    font-weight: 600;
    color: var(--tv-blue);
    background: var(--tv-blue-light);
    padding: 3px 10px;
    border-radius: 100px;
    display: inline-block;
    margin-bottom: 14px;
  }

  .tv-voices-waveform-row {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
  }

  .tv-voices-play-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tv-blue);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
    transition: opacity 0.15s, transform 0.15s;
  }

  .tv-voices-play-btn:hover {
    opacity: 0.85;
    transform: scale(1.08);
  }

  .tv-voices-play-btn svg {
    width: 11px;
    height: 11px;
    fill: white;
    margin-left: 1px;
  }

  .tv-voices-waveform {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 22px;
  }

  .tv-voices-w-bar {
    width: 2.5px;
    border-radius: 2px;
    background: var(--tv-blue-mid);
    transition: background 0.3s;
  }

  .tv-voices-waveform.active .tv-voices-w-bar {
    background: var(--tv-blue);
    animation: tv-voices-wave 1s ease-in-out infinite;
  }

  .tv-voices-w-bar:nth-child(1) { height: 5px; animation-delay: 0s; }
  .tv-voices-w-bar:nth-child(2) { height: 12px; animation-delay: 0.08s; }
  .tv-voices-w-bar:nth-child(3) { height: 17px; animation-delay: 0.16s; }
  .tv-voices-w-bar:nth-child(4) { height: 9px; animation-delay: 0.24s; }
  .tv-voices-w-bar:nth-child(5) { height: 19px; animation-delay: 0.12s; }
  .tv-voices-w-bar:nth-child(6) { height: 13px; animation-delay: 0.20s; }
  .tv-voices-w-bar:nth-child(7) { height: 7px; animation-delay: 0.04s; }
  .tv-voices-w-bar:nth-child(8) { height: 15px; animation-delay: 0.28s; }
  .tv-voices-w-bar:nth-child(9) { height: 10px; animation-delay: 0.18s; }
  .tv-voices-w-bar:nth-child(10) { height: 5px; animation-delay: 0.36s; }
  .tv-voices-w-bar:nth-child(11) { height: 17px; animation-delay: 0.10s; }
  .tv-voices-w-bar:nth-child(12) { height: 11px; animation-delay: 0.22s; }

  .tv-voices-grid {
    position: absolute;
    inset: 0;
    z-index: 2;
  }

  .tv-voices-card {
    position: absolute;
    background: #fff;
    border: 1px solid var(--tv-border);
    border-radius: 14px;
    padding: 11px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    min-width: 148px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.25s;
  }

  .tv-voices-card:hover {
    border-color: var(--tv-blue-mid);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    transform: scale(1.04) translateY(-3px) !important;
    z-index: 5;
  }

  .tv-voices-card.active {
    border-color: var(--tv-blue);
    background: var(--tv-blue-light);
    box-shadow: 0 6px 20px rgba(29, 78, 216, 0.12);
  }

  .tv-voices-card:nth-child(1) { top: 8%; left: 4%; animation: tv-voices-float-a 5s ease-in-out infinite; }
  .tv-voices-card:nth-child(2) { top: 8%; right: 4%; animation: tv-voices-float-b 5.5s ease-in-out infinite; }
  .tv-voices-card:nth-child(3) { top: 44%; left: -4px; animation: tv-voices-float-mid-a 6s ease-in-out infinite 0.5s; }
  .tv-voices-card:nth-child(4) { top: 44%; right: -4px; animation: tv-voices-float-mid-b 4.8s ease-in-out infinite 0.3s; }
  .tv-voices-card:nth-child(5) { bottom: 8%; left: 4%; animation: tv-voices-float-a 5.2s ease-in-out infinite 1s; }
  .tv-voices-card:nth-child(6) { bottom: 8%; right: 4%; animation: tv-voices-float-b 5.8s ease-in-out infinite 0.7s; }
  .tv-voices-card:nth-child(n+7) { display: none; }

  .tv-voices-card-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    flex-shrink: 0;
    border: 1.5px solid var(--tv-border);
  }

  .tv-voices-card.active .tv-voices-card-img {
    border-color: var(--tv-blue-mid);
  }

  .tv-voices-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
  }

  .tv-voices-card-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tv-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tv-voices-card-desc {
    font-size: 11px;
    font-weight: 400;
    color: var(--tv-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tv-voices-card-play {
    display: none;
  }

  @keyframes tv-voices-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes tv-voices-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

  @keyframes tv-voices-wave {
    0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
    50% { transform: scaleY(1); opacity: 1; }
  }

  @keyframes tv-voices-float-a {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  @keyframes tv-voices-float-b {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
  }

  @keyframes tv-voices-float-mid-a {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
  }

  @keyframes tv-voices-float-mid-b {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(7px); }
  }

  @media (max-width: 767px) {
    .tv-voices-section {
      padding: 12px 0 40px;
    }

    .tv-voices-page {
      padding: 0 20px;
    }

    .tv-voices-main-content {
      grid-template-columns: 1fr;
      gap: 36px;
    }

    .tv-voices-left-panel {
      padding: 0;
    }

    .tv-voices-panel-title {
      font-size: clamp(30px, 8vw, 40px);
    }

    .tv-voices-panel-desc {
      font-size: 14px;
    }

    .tv-voices-cta-row {
      margin-bottom: 36px;
    }

    .tv-voices-right-panel {
      height: auto;
      overflow: visible;
      border-radius: 0;
    }

    .tv-voices-right-panel::before {
      display: none;
    }

    .tv-voices-featured-center {
      position: static;
      transform: none;
      width: 100%;
      border-radius: 16px;
      margin-bottom: 16px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    }

    .tv-voices-grid {
      position: static;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .tv-voices-card {
      position: static;
      animation: none;
      min-width: unset;
      width: 100%;
      box-shadow: none;
      transform: none !important;
    }

    .tv-voices-card:nth-child(n+7) {
      display: flex;
    }
  }



  .ti-integration-section {
    position: relative;
    background: #ffffff;
    padding: 40px 0 26px;
    overflow: visible;
    z-index: 4;
  }

  .ti-integration-inner {
    position: relative;
    max-width: 1520px;
    min-height: 650px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 24px 40px;
  }

  .ti-integration-orbit-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 650px;
    pointer-events: none;
    overflow: hidden;
  }

  .ti-integration-track {
    position: absolute;
    inset: 0;
  }

  .ti-integration-track svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .ti-integration-track path {
    fill: none;
    stroke: rgba(226, 221, 214, 0.92);
    stroke-width: 1.5;
  }

  .ti-integration-logo-stream {
    position: absolute;
    inset: 0;
  }

  .ti-integration-node {
    --size: 64px;
    --travel: 48s;
    --delay: 0s;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(223, 218, 210, 0.95);
    box-shadow: 0 18px 34px rgba(27, 24, 19, 0.08);
    overflow: hidden;
    will-change: transform, opacity;
    offset-path: url(#ti-arc);
    offset-rotate: 0deg;
    animation: ti-integration-arc-travel var(--travel) linear infinite;
    animation-delay: var(--delay);
    transform: translate3d(-50%, -50%, 0);
    transform-origin: center center;
    backface-visibility: hidden;
  }

  .ti-integration-node img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    object-position: center;
    display: block;
    background: transparent;
    filter: none;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  .ti-integration-node[data-fit="wide"] img {
    width: 44px;
    height: 26px;
  }

  .ti-integration-node[data-fit="tall"] img {
    width: 30px;
    height: 42px;
  }

  .ti-integration-node-fallback {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #1a1a1f;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.03em;
    text-transform: uppercase;
  }

  .ti-integration-node.is-fallback img {
    display: none;
  }

  .ti-integration-node.is-fallback .ti-integration-node-fallback {
    display: flex;
  }

  .ti-integration-node.is-missing {
    display: none;
  }

  @keyframes ti-integration-arc-travel {
    0% {
      opacity: 0;
      offset-distance: -4%;
      transform: translate(-50%, -50%) scale(0.9);
    }
    8% {
      opacity: 1;
      offset-distance: 4%;
      transform: translate(-50%, -50%) scale(0.94);
    }
    50% {
      opacity: 1;
      offset-distance: 50%;
      transform: translate(-50%, -50%) scale(1.04);
    }
    92% {
      opacity: 1;
      offset-distance: 96%;
      transform: translate(-50%, -50%) scale(0.94);
    }
    100% {
      opacity: 0;
      offset-distance: 104%;
      transform: translate(-50%, -50%) scale(0.9);
    }
  }

  .ti-integration-content {
    position: relative;
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 760px;
    padding: 162px 20px 0;
  }

  .ti-integration-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid rgba(30,62,205,0.35);
    border-radius: 999px;
    padding: 10px 26px;
    font-size: 14px;
    color: #0f2a5e;
    letter-spacing: 0.02em;
    font-weight: 400;
    white-space: nowrap;
  }

  .ti-integration-pill img {
    height: 16px;
    width: auto;
    display: block;
    mix-blend-mode: multiply;
  }

  .ti-integration-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 600;
    color: #17171b;
    line-height: 1.12;
    letter-spacing: -0.05em;
    max-width: 940px;
  }

  .ti-integration-title span {
    color: #1e3ecd;
    font-weight: 600;
  }

  .ti-integration-text {
    font-size: 16px;
    color: #787673;
    line-height: 1.48;
    max-width: 680px;
  }
  .integration-expand-cb { display: none; }
  .integration-expand-text {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    color: #555;
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding-top: 0;
  }
  .integration-expand-text p { margin: 0 0 12px 0; }
  .integration-expand-text p:last-child { margin-bottom: 0; }
  .integration-expand-cb:checked ~ .integration-expand-text {
    max-height: 600px;
    opacity: 1;
    padding-top: 14px;
  }

  .ti-integration-btn {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: #0D2FAA;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 18px 34px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: background 0.2s, transform 0.15s;
  }

  .ti-integration-btn:hover {
    background: #1239c9;
    transform: scale(1.02);
  }

  .ti-integration-dots {
    display: grid;
    grid-template-columns: repeat(3, 4px);
    gap: 2.5px;
  }

  .ti-integration-dots span {
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.78);
    border-radius: 50%;
    display: block;
  }

  @media (min-width: 701px) and (max-width: 811px) {
    .ti-integration-inner {
      flex-direction: column;
      min-height: auto;
      align-items: center;
      justify-content: flex-start;
      padding: 0 0 48px;
      overflow: visible;
    }

    .ti-integration-orbit-wrap {
      position: relative;
      width: 100%;
      height: auto;
      aspect-ratio: 1520 / 720;
      overflow: visible;
      flex-shrink: 0;
      margin-bottom: -150px;
    }

    .ti-integration-node {
      --size: 60px;
    }

    .ti-integration-content {
      padding: 16px 48px 0;
      max-width: 760px;
      width: 100%;
    }
  }

  @media (max-width: 700px) {
    .ti-integration-section {
      padding: 6px 0 16px;
    }

    .ti-integration-inner {
      flex-direction: column;
      min-height: 510px;
      align-items: center;
      justify-content: flex-start;
      padding: 0 0 18px;
      overflow: visible;
    }

    .ti-integration-orbit-wrap {
      position: relative;
      width: 100vw;
      height: 190px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .ti-integration-track path {
      stroke-width: 1.25;
    }

    .ti-integration-node {
      --size: 50px;
      --travel: 48s;
      offset-path: path('M 62 178 A 128 128 0 0 1 318 178');
    }

    .ti-integration-node img { width: 30px; height: 30px; }
    .ti-integration-node[data-fit="wide"] img { width: 34px; height: 20px; }
    .ti-integration-node[data-fit="tall"] img { width: 24px; height: 34px; }

    .ti-integration-content {
      width: 100%;
      max-width: 100%;
      padding: 18px 24px 0;
      gap: 16px;
    }

    .ti-integration-title {
      font-size: clamp(28px, 7.6vw, 36px);
    }

    .ti-integration-text {
      font-size: 14px;
      max-width: 100%;
      line-height: 1.6;
    }

    .ti-integration-btn {
      padding: 16px 24px;
    }
  }



  .tf-faq-section {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    padding: 0 0 20px;
  }

  .tf-faq-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 220px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.96) 28%,
      rgba(255, 255, 255, 0.82) 58%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .tf-faq-grid {
    display: none;
  }

  .tf-faq-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
  }

  .tf-faq-orb-1 {
    width: 600px;
    height: 500px;
    background: radial-gradient(circle, rgba(26,58,255,0.06) 0%, transparent 70%);
    top: -120px;
    left: -120px;
    animation: tf-faq-drift 22s ease-in-out infinite alternate;
  }

  .tf-faq-orb-2 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(10,31,143,0.05) 0%, transparent 70%);
    bottom: -100px;
    right: -80px;
    animation: tf-faq-drift 28s ease-in-out infinite alternate-reverse;
  }

  .tf-faq-orb-3 {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(26,58,255,0.04) 0%, transparent 70%);
    top: 45%;
    left: 55%;
    animation: tf-faq-drift 18s ease-in-out infinite alternate;
    animation-delay: -6s;
  }

  @keyframes tf-faq-drift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(50px, 35px) scale(1.08); }
  }

  .tf-faq-shell {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    padding: 72px 44px 0;
  }

  .tf-faq-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 80px;
    align-items: end;
    margin-bottom: 80px;
    opacity: 0;
    transform: translateY(28px);
    animation: tf-faq-up .95s cubic-bezier(.22,1,.36,1) .1s forwards;
  }

  .tf-faq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(26,58,255,0.06);
    border: 1px solid rgba(26,58,255,0.15);
    border-radius: 100px;
    padding: 6px 16px 6px 10px;
    margin-bottom: 28px;
  }

  .tf-faq-eyebrow-dot {
    width: 7px;
    height: 7px;
    background: #1a3aff;
    border-radius: 50%;
    animation: tf-faq-pulse 2.2s ease-in-out infinite;
  }

  @keyframes tf-faq-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(26,58,255,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(26,58,255,0); }
  }

  .tf-faq-eyebrow-text {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #1a3aff;
  }

  .tf-faq-title {
    font-size: clamp(28px, 3vw, 44px);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.03em;
    color: #0d0f1a;
    white-space: nowrap;
  }

  .tf-faq-title strong {
    font-weight: 600;
    color: #1e3ecd;
  }

  .tf-faq-title .tf-faq-title-plain {
    font-weight: 400;
    color: #0d0f1a;
  }

  .tf-faq-subtitle {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.72;
    color: #3a4060;
    max-width: 420px;
    margin-bottom: 32px;
  }

  .tf-faq-stats {
    display: flex;
    gap: 36px;
  }

  .tf-faq-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .tf-faq-stat-num {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: #1a3aff;
    line-height: 1;
  }

  .tf-faq-stat-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #a0a8c8;
  }

  .tf-faq-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
  }

  .tf-faq-card.bc-1 { grid-column: 1 / 5; }
  .tf-faq-card.bc-2 { grid-column: 5 / 9; }
  .tf-faq-card.bc-3 { grid-column: 9 / 13; }
  .tf-faq-card.bc-4 { grid-column: 1 / 5; }
  .tf-faq-card.bc-5 { grid-column: 5 / 9; }
  .tf-faq-card.bc-6 { grid-column: 9 / 13; }

  .tf-faq-card {
    background: #fff;
    border: 1px solid rgba(14,0,72,0.08);
    border-radius: 12px;
    padding: 32px 30px 30px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(32px);
    transition: border-color .3s ease, box-shadow .3s ease;
    will-change: transform;
  }

  .tf-faq-card::before { display: none; }
  .tf-faq-card::after { display: none; }

  .tf-faq-card:hover {
    border-color: rgba(30,62,205,0.18);
    box-shadow: 0 4px 20px rgba(14,0,72,0.07);
  }

  .tf-faq-card.is-visible {
    animation: tf-faq-up .72s cubic-bezier(.22,1,.36,1) forwards;
  }

  .tf-faq-bar {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(90deg, #1a3aff, #6e8fff);
    transition: width .55s cubic-bezier(.22,1,.36,1);
  }

  .tf-faq-card:hover .tf-faq-bar {
    width: 100%;
  }

  .tf-faq-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 22px;
  }

  .tf-faq-card-num {
    display: none;
  }

  .tf-faq-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: rgba(26,58,255,0.07);
    border: 1px solid rgba(26,58,255,0.13);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .4s, border-color .4s, transform .4s cubic-bezier(.22,1,.36,1);
  }

  .tf-faq-card:hover .tf-faq-card-icon {
    background: rgba(30,62,205,0.10);
    border-color: rgba(30,62,205,0.22);
  }

  .tf-faq-card-icon svg {
    width: 16px;
    height: 16px;
    stroke: #1a3aff;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .4s;
  }

  .tf-faq-card:hover .tf-faq-card-icon svg {
    stroke: #1e3ecd;
  }

  .tf-faq-card-q {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.42;
    letter-spacing: -.012em;
    color: #0d0f1a;
    margin-bottom: 10px;
  }

  .tf-faq-card-q .hl {
    color: #1a3aff;
  }

  .tf-faq-sep {
    height: 1px;
    background: linear-gradient(90deg, rgba(26,58,255,0.18), transparent);
    margin-bottom: 14px;
    transition: background .4s;
  }

  .tf-faq-card:hover .tf-faq-sep {
    background: linear-gradient(90deg, rgba(26,58,255,0.3), transparent);
  }

  .tf-faq-answer {
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.78;
    color: #3a4060;
  }

  .tf-faq-notch {
    display: none;
  }

  .faq-expand-cb { display: none; }
  .faq-dots {
    color: #999;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    cursor: pointer;
  }
  .faq-expand-text {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    color: #555;
    font-size: 14px;
    line-height: 1.7;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease, padding-top 0.4s ease;
    padding-top: 0;
  }
  .faq-expand-text p { margin: 0 0 10px 0; }
  .faq-expand-text p:last-child { margin-bottom: 0; }
  .faq-expand-cb:checked ~ .faq-expand-text {
    max-height: 500px;
    opacity: 1;
    padding-top: 12px;
  }

  .tf-faq-foot {
    margin-top: 60px;
    display: flex;
    align-items: center;
    gap: 0;
    opacity: 0;
    transform: translateY(14px);
    animation: tf-faq-up .8s cubic-bezier(.22,1,.36,1) 1.3s forwards;
  }

  .tf-faq-foot-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(26,58,255,0.18), transparent);
  }

  .tf-faq-foot-badge {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 28px;
  }

  .tf-faq-foot-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #a0a8c8;
  }

  .tf-faq-foot-item svg {
    width: 13px;
    height: 13px;
    stroke: #1a3aff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .65;
  }

  .tf-faq-foot-sep {
    width: 3px;
    height: 3px;
    background: rgba(26,58,255,0.18);
    border-radius: 50%;
  }

  @keyframes tf-faq-up {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (max-width: 960px) {
    .tf-faq-head {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .tf-faq-bento {
      grid-template-columns: repeat(6, 1fr);
    }

    .tf-faq-card.bc-1,
    .tf-faq-card.bc-3,
    .tf-faq-card.bc-5 {
      grid-column: 1 / 4;
    }

    .tf-faq-card.bc-2,
    .tf-faq-card.bc-4,
    .tf-faq-card.bc-6 {
      grid-column: 4 / 7;
    }
  }

  @media (max-width: 600px) {
    .tf-faq-shell {
      padding: 38px 24px 0;
    }

    .tf-faq-bento {
      grid-template-columns: 1fr;
    }

    .tf-faq-card.bc-1,
    .tf-faq-card.bc-2,
    .tf-faq-card.bc-3,
    .tf-faq-card.bc-4,
    .tf-faq-card.bc-5,
    .tf-faq-card.bc-6 {
      grid-column: 1 / -1;
    }

    .tf-faq-card {
      padding: 28px 22px;
    }

    .tf-faq-title {
      font-size: 32px;
      white-space: normal;
    }

    .tf-faq-foot {
      flex-direction: column;
      gap: 18px;
    }

    .tf-faq-foot-line {
      width: 100%;
    }

    .tf-faq-foot-badge {
      flex-wrap: wrap;
      justify-content: center;
      row-gap: 10px;
    }
  }


.tf-embed-frame {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    position: relative;
    z-index: 1;
  }



<style>
html,
body {
    background: #ffffff;
  }

.tf-site-footer {
    background: #0a0f1e;
    width: 100%;
    padding: 64px 80px calc(24px + env(safe-area-inset-bottom, 0px));
    position: relative;
    overflow: visible;
    margin-top: -3px;
    margin-bottom: 0;
  }
.tf-site-footer::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -14px;
    height: 24px;
    background: #0a0f1e;
    pointer-events: none;
    z-index: 2;
  }
.tf-site-footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 6px;
    background: #0a0f1e;
    pointer-events: none;
    z-index: 2;
  }

  .tf-footer-inner {
    max-width: 1400px;
    margin: 0 auto;
  }

  .tf-footer-top {
    display: grid;
    grid-template-columns: 320px 1fr 1fr 1fr;
    gap: 64px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  /* Logo: white text on same dark bg */
  .tf-footer-logo-wrap {
    margin-bottom: 16px;
  }

  .tf-footer-logo-img {
    height: 38px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.9;
  }

  .tf-footer-brand-desc {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255,255,255,0.75);
    margin-bottom: 28px;
    font-weight: 300;
    letter-spacing: 0.01em;
  }

  .tf-footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 28px;
  }

  .tf-footer-contact-info a {
    font-size: 13.5px;
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    transition: color 0.2s;
  }

  .tf-footer-contact-info a:hover { color: rgba(255,255,255,0.85); }

  .tf-footer-social-row {
    display: flex;
    gap: 8px;
  }

  .tf-footer-social-btn {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
  }

  .tf-footer-social-btn:hover {
    background: rgba(59,130,246,0.2);
    border-color: rgba(59,130,246,0.4);
    transform: translateY(-1px);
  }

  .tf-footer-social-btn svg {
    width: 15px; height: 15px;
    fill: rgba(255,255,255,0.6);
  }

  .tf-footer-social-btn:hover svg { fill: rgba(255,255,255,0.9); }

  .tf-footer-nav-col h5 {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin-bottom: 20px;
  }

  .tf-footer-nav-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
  }

  .tf-footer-nav-col ul li {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .tf-footer-nav-col ul li a {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255,255,255,0.82);
    text-decoration: none;
    transition: color 0.18s;
  }

  .tf-footer-nav-col ul li a:hover { color: rgba(255,255,255,0.9); }

  .tf-footer-badge-hiring {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: #1d4ed8;
    color: #fff;
    padding: 2px 7px;
    border-radius: 4px;
  }

  /* Trust bar */
  .tf-footer-trust-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  .tf-footer-avatar-stack {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  .tf-footer-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2.5px solid #0a0f1e;
    margin-left: -10px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
  }

  .tf-footer-avatar:first-child { margin-left: 0; }

  .tf-footer-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* zoom in to show face: shift upward slightly */
    object-position: center 15%;
    transform: scale(1.4);
    transform-origin: center 25%;
  }

  .tf-footer-trust-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .tf-footer-trust-count {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    letter-spacing: -0.02em;
  }

  .tf-footer-trust-stars {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: rgba(255,255,255,0.7);
  }

  .tf-footer-stars { color: #fbbf24; letter-spacing: 1px; }

  .tf-footer-trust-links a {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
  }

  .tf-footer-trust-links a:hover { color: #93c5fd; text-decoration: underline; }

  /* Bottom */
  .tf-footer-bottom {
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
  }

  .tf-footer-copyright {
    font-size: 12.5px;
    color: rgba(255,255,255,0.55);
  }

  .tf-footer-bottom-links {
    display: flex;
    gap: 20px;
  }

  .tf-footer-bottom-links a {
    font-size: 12.5px;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: color 0.18s;
  }

  .tf-footer-bottom-links a:hover { color: rgba(255,255,255,0.6); }

  .tf-footer-compliance-badges {
    display: flex;
    gap: 10px;
  }

  .tf-footer-compliance-badge {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 4px 10px;
    border-radius: 100px;
  }

  /* ═══ FOOTER TABLET ═══ */
  @media (min-width: 769px) and (max-width: 1024px) {
    .tf-site-footer { padding: 48px 40px calc(24px + env(safe-area-inset-bottom, 0px)); }
    .tf-footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  }

  /* ═══ FOOTER MOBILE ═══ */
  @media (max-width: 768px) {
    .tf-site-footer { padding: 40px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
    .tf-footer-top { grid-template-columns: 1fr; gap: 32px; }
    .tf-footer-trust-bar { flex-wrap: wrap; }
    .tf-footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
    .tf-footer-bottom-links { flex-wrap: wrap; gap: 12px; }
    .tf-footer-compliance-badges { flex-wrap: wrap; }
  }



/* ══ NAV CSS (telfo-hero__.html) ══ */



<style>
/* Lenis integration helpers */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
#lenis-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
}
#lenis-content {
  min-height: 100%;
}
.fx-reveal {
  --fx-y: 34px;
  --fx-blur: 12px;
  --fx-duration: 1.12s;
  --fx-delay: 0ms;
  opacity: 0;
  transform: translate3d(0, var(--fx-y), 0);
  filter: blur(var(--fx-blur));
  transition:
    opacity var(--fx-duration) cubic-bezier(0.16, 1, 0.3, 1),
    transform var(--fx-duration) cubic-bezier(0.16, 1, 0.3, 1),
    filter var(--fx-duration) cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--fx-delay);
}
.fx-reveal.fx-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .fx-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

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

  ::selection { background: #22197f !important; color: #ffffff !important; }
  ::-moz-selection { background: #22197f !important; color: #ffffff !important; }

  :root {
    --navy: #0f1340;
    --navy-mid: #1a2070;
    --accent: #3d4fd6;
    --accent-light: #6b7ff0;
    --gold: #c9a96e;
    --text: #1a1a2e;
    --muted: #6b7280;
    --bg: #f8f9fc;
    --white: #ffffff;
  }

  body {
    font-family: 'Inter', sans-serif;
    background: #ffffff;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 24px 32px;
    overflow-x: hidden;
  }

  body::before {
    display: none;
  }

  /* Ambient glow blobs */
  body::after {
    display: none;
  }

  /* Custom cursor disabled — use OS default */
  #telfo-cursor-dot,
  #telfo-cursor-ring {
    display: none !important;
  }

  .section {
    position: relative;
    max-width: 1160px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: flex-start;
    z-index: 1;
  }

  /* ── LEFT COLUMN ── */
  .left {
    position: relative;
    padding-left: 32px;
  }

  .left::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--accent) 25%, var(--accent-light) 75%, transparent);
    opacity: 0.35;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 26px;
    opacity: 0;
    transform: translateY(14px);
    animation: fadeUp 0.7s ease forwards 0.15s;
  }

  .eyebrow-line {
    width: 24px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    display: block;
  }

  h1 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 600;
    line-height: 1.12;
    color: var(--navy);
    letter-spacing: -0.035em;
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.85s ease forwards 0.3s;
  }

  h1 .highlight {
    color: #1e3ecd;
    display: inline-block;
    font-weight: 600;
    font-style: normal;
    text-decoration: none;
  }

  .team-heading {
    font-family: 'Inter', sans-serif;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 600;
    line-height: 1.12;
    color: var(--navy);
    letter-spacing: -0.035em;
    margin: 0 0 30px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.85s ease forwards 0.3s;
  }

  .team-heading .highlight {
    color: #1e3ecd;
    display: inline-block;
    font-weight: 600;
    font-style: normal;
    text-decoration: none;
  }

  .body-text {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.78;
    color: #677089;
    max-width: 460px;
    margin-bottom: 44px;
    opacity: 0;
    transform: translateY(14px);
    animation: fadeUp 0.85s ease forwards 0.45s;
  }

  .body-text strong {
    font-weight: inherit;
    color: inherit;
  }

  /* Stats */
  .stats {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 42px;
    opacity: 0;
    transform: translateY(14px);
    animation: fadeUp 0.85s ease forwards 0.6s;
  }

  .stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .stat + .stat {
    padding-left: 24px;
    border-left: 1px solid rgba(15,19,64,0.1);
  }

  .stat-num {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -0.03em;
    line-height: 1;
  }

  .stat-label {
    font-size: 0.58rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9ca3af;
  }

  /* CTA */
  .cta-group {
    display: flex;
    align-items: center;
    gap: 20px;
    opacity: 0;
    transform: translateY(14px);
    animation: fadeUp 0.85s ease forwards 0.75s;
  }

  .btn-primary {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
    background: #1e3ecd;
    border: 1px solid #1e3ecd;
    border-radius: 7px;
    padding: 9px 20px;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: background 0.18s ease, border-color 0.18s ease;
  }

  .btn-primary:hover {
    background: #1633b8;
    border-color: #1633b8;
  }

  .btn-link {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: rgba(15,19,64,0.5);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    border-bottom: 1px solid rgba(15,19,64,0.18);
    padding-bottom: 1px;
    transition: color 0.18s, border-color 0.18s;
  }

  .btn-link:hover { color: #0f1340; border-color: rgba(15,19,64,0.4); }

  /* ── RIGHT COLUMN ── */
  .right {
    position: relative;
    width: 100%;
    max-width: 420px;
    justify-self: end;
    opacity: 0;
    transform: translateX(28px) scale(0.98);
    animation: slideInRight 1s cubic-bezier(0.25,0.46,0.45,0.94) forwards 0.5s;
  }

  /* Decorative frames */
  .frame-outer {
    position: absolute;
    top: -18px;
    right: -18px;
    bottom: 18px;
    left: 18px;
    border: 1px solid rgba(61,79,214,0.1);
    border-radius: 22px;
    z-index: 0;
  }

  .frame-shadow {
    position: absolute;
    top: 18px;
    right: 18px;
    bottom: -18px;
    left: -18px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(61,79,214,0.05), rgba(15,19,64,0.04));
    z-index: 0;
  }

  .photo-wrapper {
    position: relative;
    z-index: 1;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
      0 2px 8px rgba(15,19,64,0.06),
      0 8px 32px rgba(15,19,64,0.12),
      0 32px 72px rgba(15,19,64,0.14);
  }

  .photo-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 5/3.45;
    object-fit: cover;
    object-position: center 44%;
    transition: transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94);
  }

  .photo-wrapper:hover img { transform: scale(1.04); }

  .photo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(to top, rgba(10,14,52,0.7) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }

  .photo-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 20px 22px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

  .photo-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .photo-label-city {
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
  }

  .photo-label-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255,255,255,0.92);
    letter-spacing: -0.01em;
  }

  .member-count {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 100px;
    padding: 6px 12px;
  }

  .member-count-dot {
    width: 6px;
    height: 6px;
    background: #6bffa0;
    border-radius: 50%;
    box-shadow: 0 0 6px #6bffa0;
    animation: pulse 2s ease-in-out infinite;
  }

  .member-count-text {
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.04em;
  }

  /* Gold corner ornament */
  .ornament {
    position: absolute;
    top: -22px;
    left: 4px;
    z-index: 3;
    width: 44px;
    height: 44px;
  }

  .ornament::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 1.5px;
    height: 26px;
    background: linear-gradient(to bottom, var(--gold), transparent);
    border-radius: 2px;
  }

  .ornament::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 26px;
    height: 1.5px;
    background: linear-gradient(to right, var(--gold), transparent);
    border-radius: 2px;
  }

  /* Bottom-right ornament */
  .ornament-br {
    position: absolute;
    bottom: 4px;
    right: -22px;
    z-index: 3;
    width: 44px;
    height: 44px;
  }

  .ornament-br::before {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 1.5px;
    height: 26px;
    background: linear-gradient(to top, var(--gold), transparent);
    border-radius: 2px;
  }

  .ornament-br::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 26px;
    height: 1.5px;
    background: linear-gradient(to left, var(--gold), transparent);
    border-radius: 2px;
  }

  /* ── ANIMATIONS ── */
  @keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes slideInRight {
    to { opacity: 1; transform: translateX(0) scale(1); }
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.3); }
  }

  @media (max-width: 900px) {
    .section { grid-template-columns: 1fr; gap: 60px; }
    .left { order: 2; padding-left: 0; }
    .left::before { display: none; }
    .right { order: 1; }
    .frame-outer, .frame-shadow { display: none; }
  }



/* ── Global: Hero content always visible from start ── */
.hero h1,
.hero .badge,
.hero .trust-bar,
.hero .hero-sub,
.hero .cta-area {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ── Global: Active voice card – no shadow on hover ── */
.tv-voices-card.active:hover,
.tv-voices-card.active:focus,
.tv-voices-card.active:active {
  box-shadow: none !important;
}

/* ── Fix 1: KI Telefonservice – no overlap, override JS sticky transform ── */
@media (max-width: 800px) {
  .left-sticky {
    transform: none !important;
    position: static !important;
    top: auto !important;
  }
  .scroll-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
  }
  .section-wrapper {
    padding: 56px 20px 72px !important;
  }
}

/* ── Fix 2: Transkription – scrollable, fixed height on mobile ── */
@media (max-width: 767px) {
  .telfo-dash-embed .main-card:has(.transcript) {
    overflow: hidden !important;
    height: 340px !important;
  }
  .telfo-dash-embed .transcript {
    overflow-y: auto !important;
    height: 200px !important;
    min-height: unset !important;
    max-height: none !important;
  }
  .telfo-dash-embed .transcript::-webkit-scrollbar { width: 4px; }
  .telfo-dash-embed .transcript::-webkit-scrollbar-track { background: transparent; }
  .telfo-dash-embed .transcript::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; }
}

/* ── Fix 3: Videos – wider + taller on mobile ── */
@media (max-width: 768px) {
  .vc-card {
    width: 85vw !important;
    height: 580px !important;
  }
}

/* ── Fix 4: Stimmen – prevent hover transforms, no card overflow ── */
@media (max-width: 767px) {
  .tv-voices-right-panel {
    overflow: hidden !important;
    border-radius: 16px !important;
    height: auto !important;
  }
  .tv-voices-featured-center,
  .tv-voices-featured-center:hover {
    transform: none !important;
    transition: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07) !important;
  }
  .tv-voices-card {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .tv-voices-card:hover,
  .tv-voices-card:focus,
  .tv-voices-card:active {
    transform: none !important;
    box-shadow: none !important;
  }
  .tv-voices-grid {
    overflow: hidden !important;
  }
}

/* ── Fix 5: Integrationen – auto-scroll marquee, white background ── */
@keyframes telfo-marquee-logos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 700px) {
  .ti-integration-section {
    background: #ffffff !important;
  }
  .ti-integration-orbit-wrap {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    background: #ffffff !important;
    padding: 16px 0 !important;
  }
  .ti-integration-track,
  .ti-integration-track svg {
    display: none !important;
  }
  .ti-integration-logo-stream {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: visible !important;
    width: max-content !important;
    offset-path: none !important;
    animation: telfo-marquee-logos 16s linear infinite !important;
    will-change: transform !important;
  }
  .ti-integration-node {
    position: static !important;
    offset-path: none !important;
    animation: none !important;
    transform: none !important;
    flex-shrink: 0 !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 16px !important;
    margin: 0 10px !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .ti-integration-node img { width: 36px !important; height: 36px !important; object-fit: contain !important; }
  .ti-integration-node[data-fit="wide"] img { width: 42px !important; height: 26px !important; }
  .ti-integration-node[data-fit="tall"] img { width: 26px !important; height: 38px !important; }
  .ti-integration-inner {
    flex-direction: column !important;
    min-height: unset !important;
    padding: 0 0 24px !important;
    gap: 20px !important;
    align-items: flex-start !important;
    overflow: visible !important;
  }
  .integration-expand-text {
    font-size: 14px !important;
    text-align: left !important;
    max-width: 100% !important;
  }
  .integration-expand-cb:checked ~ .integration-expand-text {
    max-height: 900px !important;
  }
}

@media (min-width: 812px) and (max-width: 1178px) {
  .ti-integration-section {
    padding: 32px 0 24px;
  }
  .ti-integration-inner {
    flex-direction: column;
    min-height: auto;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px 40px;
    overflow: visible;
  }
  .ti-integration-orbit-wrap {
    position: relative;
    width: min(100%, 1120px);
    height: auto;
    aspect-ratio: 1520 / 720;
    overflow: visible;
    flex-shrink: 0;
    margin-bottom: clamp(-220px, -18vw, -160px);
    transform: scale(0.92);
    transform-origin: top center;
  }
  .ti-integration-node {
    --size: 58px;
  }
  .ti-integration-node img {
    width: 36px;
    height: 36px;
  }
  .ti-integration-node[data-fit="wide"] img {
    width: 40px;
    height: 24px;
  }
  .ti-integration-node[data-fit="tall"] img {
    width: 28px;
    height: 38px;
  }
  .ti-integration-content {
    width: 100%;
    max-width: 760px;
    padding: 0 32px 0;
    gap: 14px;
  }
  .ti-integration-title {
    font-size: clamp(34px, 4vw, 44px);
  }
  .ti-integration-text {
    max-width: 720px;
  }
}

/* Final surface override: keep the page canvas white between sections while
 virtual scrolling. */
html,
body,
#lenis-wrapper,
#lenis-content {
  background: #ffffff !important;
}

body {
  display: block !important;
  min-height: auto !important;
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

.section-wrapper {
  background: #ffffff !important;
}

/* ── Fix 1: KI Telefonservice – no overlap, override JS sticky transform ── */
@media (max-width: 800px) {
  .left-sticky {
    transform: none !important;
    position: static !important;
    top: auto !important;
  }
  .scroll-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
  }
  .section-wrapper {
    padding: 56px 20px 72px !important;
    overflow-x: hidden !important;
  }
  .right-cards,
  .feature-card {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .feature-card { padding: 16px !important; }
  .card-inner { padding: 18px !important; }
  .illus-bubbles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .bubble-info { min-width: 0 !important; }
}

/* ── Fix 2: Transkription – scrollable, fixed height on mobile ── */
@media (max-width: 767px) {
  .telfo-dash-embed .main-card:has(.transcript) {
    overflow: hidden !important;
    height: 340px !important;
  }
  .telfo-dash-embed .transcript {
    overflow-y: auto !important;
    height: 200px !important;
    min-height: unset !important;
    max-height: none !important;
  }
  .telfo-dash-embed .transcript::-webkit-scrollbar { width: 4px; }
  .telfo-dash-embed .transcript::-webkit-scrollbar-track { background: transparent; }
  .telfo-dash-embed .transcript::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; }
}

/* ── Fix 3: Videos – narrower to reveal next card, reduced height ── */
@media (max-width: 768px) {
  .vc-card { width: 78vw !important; height: 400px !important; }
}

/* ── Fix 4: Stimmen – prevent hover transforms, no card overflow, responsive stats ── */
@media (max-width: 767px) {
  .tv-voices-right-panel {
    overflow: hidden !important;
    border-radius: 16px !important;
    height: auto !important;
  }
  .tv-voices-featured-center,
  .tv-voices-featured-center:hover {
    transform: none !important;
    transition: none !important;
  }
  .tv-voices-card {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .tv-voices-card:hover,
  .tv-voices-card:focus,
  .tv-voices-card:active {
    transform: none !important;
    box-shadow: none !important;
  }
  .tv-voices-grid { overflow: hidden !important; }
  .tv-voices-section { overflow-x: hidden !important; }
  .tv-voices-stats-row { flex-wrap: wrap !important; gap: 6px 0 !important; }
  .tv-voices-stat-item { padding: 0 12px !important; }
  .tv-voices-stat-item:first-child { padding-left: 0 !important; }
  .tv-voices-stat-item + .tv-voices-stat-item { border-left: none !important; padding-left: 12px !important; }
}

/* ── Fix 6: Hero phone input – white backdrop so bars don't show through ── */
@media (max-width: 768px) {
  .phone-wrap.is-open {
    background: rgba(255, 255, 255, 0.97) !important;
    border-radius: 12px !important;
    padding: 10px 14px 6px !important;
    max-height: 185px !important;
    box-shadow: 0 2px 18px rgba(14, 0, 72, 0.08) !important;
  }
}

/* ── Fix 7: Hero – compact vertical spacing and prevent badge wrap on mobile ── */
@media (max-width: 768px) {
  .badge { white-space: nowrap !important; margin-bottom: 16px !important; }
  .hero-content { padding-top: 32px !important; }
  .trust-bar { margin-top: 16px !important; flex-wrap: nowrap !important; }
  .hero-sub { margin-top: 8px !important; font-size: 12px !important; }
  .cta-area { margin-top: 18px !important; }
}

/* ── Fix 9: Video carousel – allow third card to extend to viewport right edge ── */
.vg-track-outer { overflow: visible !important; }
.vg-section { overflow-x: hidden !important; }

/* ── Fix 10: Footer – no white gap below dark footer section ── */
#lenis-content { background: transparent !important; }

/* ── Fix 11: Hero – 315–414 px ultra-narrow optimization ── */
@media (max-width: 414px) {
  .hero h1 { font-size: clamp(30px, 9vw, 38px) !important; }
  .badge { font-size: 10px !important; padding: 5px 13px 5px 6px !important; }
  .trust-bar { gap: 4px !important; }
  .trust-item { gap: 2px !important; }
  .trust-label { white-space: nowrap !important; font-size: 10px !important; }
  .trust-item .uni-img  { height: 12px !important; }
  .trust-item .dsgvo-img { height: 24px !important; }
  .call-btn { white-space: nowrap !important; padding: 13px 20px !important;
              font-size: 11px !important; gap: 10px !important; }
  .hero { height: calc(100vh - 56px) !important; min-height: 0 !important; }
  .logos-section { opacity: 1 !important; transform: none !important;
                   transition: none !important; }
  .visualizer { justify-content: center !important; }
}

/* ── Fix 11b: Hero – 320–399 px extra-narrow h1 boost ── */
@media (max-width: 399px) {
  .hero h1 { font-size: clamp(32px, 9.5vw, 40px) !important; }
  .badge { font-size: 9px !important; padding: 4px 10px 4px 5px !important; }
  .hero-expand-cb:checked ~ .hero .hero-expand-text {
    font-size: 10.5px !important;
    line-height: 1.65 !important;
    padding: 16px 18px !important;
    margin-top: 14px !important;
  }
  .hero-expand-text p { margin: 0 0 8px 0 !important; }
}

/* ── Fix 11c: Hero – 320–357 px h1 line-break control ── */
/* Keeps "KI Telefonassistent" on exactly one line at all widths in this range */
@media (max-width: 357px) {
  .hero h1 { font-size: clamp(28px, 8.5vw, 32px) !important; }
}

/* ── Fix 12: Hero – 415–439 px narrow optimization ── */
@media (min-width: 415px) and (max-width: 439px) {
  .hero h1 { font-size: clamp(36px, 9vw, 44px) !important; }
  .badge { font-size: 10.5px !important; padding: 5px 14px 5px 7px !important; }
  .trust-bar { gap: 6px !important; }
  .trust-item { gap: 2px !important; }
  .trust-label { white-space: nowrap !important; font-size: 10.5px !important; }
  .trust-item .uni-img  { height: 13px !important; }
  .trust-item .dsgvo-img { height: 26px !important; }
  .call-btn { white-space: nowrap !important; padding: 13px 20px !important;
              font-size: 12px !important; gap: 10px !important; }
  .hero { height: calc(100vh - 56px) !important; min-height: 0 !important; }
  .logos-section { opacity: 1 !important; transform: none !important;
                   transition: none !important; }
  .visualizer { justify-content: center !important; }
}

/* ── Fix 13: Video-gallery H2 – 320–441 px line-break control ── */
@media (max-width: 441px) {
  .vg-header h2 { font-size: clamp(20px, 7vw, 30px) !important; }
}

/* ── Fix 14: Video-carousel – portrait/hochkant cards at 320–590 px ── */
@media (max-width: 590px) {
  .vc-card { width: 78vw !important; height: clamp(460px, 72vh, 600px) !important; }
}


/* ── Fix 15: KI-Stimmen – 330–413 px narrow fixes ── */
@media (max-width: 413px) {
  /* 1. Title: reduce font so "KI-Telefonassistenz" stays on one line */
  .tv-voices-panel-title { font-size: clamp(22px, 7vw, 28px) !important; }

  /* 2. Stats: override Fix-4's flex-wrap:wrap → single row, scaled down */
  .tv-voices-stats-row { flex-wrap: nowrap !important; gap: 0 !important; }
  .tv-voices-stat-item { padding: 0 5px !important; }
  .tv-voices-stat-item:first-child { padding-left: 0 !important; }
  .tv-voices-stat-val,
  .tv-voices-stat-unit { font-size: clamp(10px, 3vw, 13px) !important; }
  .tv-voices-stat-lbl  { font-size: clamp(9px, 2.8vw, 12px) !important; }

  /* 3. Voice-card grid: min-width:148px causes right-column overflow at <384 px;
        remove border-radius+overflow:hidden so Fix-4 clipping does not hide cards */
  .tv-voices-card { min-width: 0 !important; }
  .tv-voices-right-panel { border-radius: 0 !important; overflow: visible !important; }
  .tv-voices-grid { overflow: visible !important; }
}
/* ── Fix 16: KI-Stimmen – 768–1030 px intermediate layout ── */
@media (min-width: 768px) and (max-width: 1030px) {
  .tv-voices-right-panel {
    height: auto !important;
    overflow: visible !important;
    border-radius: 8px !important;
  }
  .tv-voices-right-panel::before { display: none !important; }
  .tv-voices-featured-center {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07) !important;
  }
  .tv-voices-featured-center:hover {
    transform: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07) !important;
  }
  .tv-voices-grid {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  .tv-voices-card {
    position: static !important;
    animation: none !important;
    min-width: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .tv-voices-card:hover,
  .tv-voices-card:focus,
  .tv-voices-card:active {
    transform: none !important;
    box-shadow: none !important;
  }
  .tv-voices-card:nth-child(n+7) { display: flex !important; }
}

/* ── Fix 17 + Fix 19: Transkription – fill column height, scrollable ── */
/* Let the main-card stretch to fill the grid row height (matching the right
   analytics column) so it ends right above VERFÜGBARE SPRACHEN.
   The transcript uses flex:1 to fill remaining card space and scrolls when
   messages accumulate beyond that height. */
@media (min-width: 768px) {
  .telfo-dash-embed .main-card:has(.transcript) {
    overflow: hidden !important;
    height: auto !important;
    align-self: stretch !important;
  }
  .telfo-dash-embed .transcript {
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* ── Fix 18: VG header – flush left, closer to edge at all viewport widths ── */
/* The harmonization group gutter (clamp 20-36px) already provides edge breathing room.
   Remove all additional left padding so H2 starts at the container's left edge. */
.vg-header { padding-left: 0 !important; }

/* ── Fix 20: VG track – first video aligns with H2 text above ── */
/* Also: reduce paragraph font-size at 320–446px so videos appear sooner */
.vg-track { padding-left: 0 !important; }
@media (max-width: 446px) {
  .vg-header p { font-size: clamp(11px, 2.8vw, 13px) !important; line-height: 1.55 !important; }
}


/* ── Fix 21: ÜBER UNS – buttons stay in one line at 320–367px ── */
@media (max-width: 367px) {
  .cta-group {
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }
  .btn-primary {
    font-size: 11px !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
  }
  .btn-link {
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}


/* ── Fix 22: VG header – larger H2 + paragraph at 320–446px ── */
/* H2: clamp(26px,8vw,36px) → at 320px≈26px fills ~88% of the 296px text column;
   at 446px≈36px. Overrides Fix 13 (max-width:441px clamp(20px,7vw,30px)).
   Paragraph: clamp(13px,3.8vw,15px) → more readable. Overrides Fix 20 paragraph. */
@media (max-width: 446px) {
  .vg-header h2 { font-size: clamp(26px, 8vw, 36px) !important; }
  .vg-header p  { font-size: clamp(13px, 3.8vw, 15px) !important; line-height: 1.6 !important; }
}


/* ── Fix 23: FAQ footer badges – left-aligned at ≤600px ── */
@media (max-width: 600px) {
  .tf-faq-foot-badge { justify-content: flex-start !important; }
}

.seo-paths-section {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  padding: 0 0 80px;
}

.seo-paths-shell {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 88px 44px 0;
  display: grid;
  gap: 52px;
}

.seo-paths-intro {
  max-width: 780px;
  display: grid;
  gap: 20px;
}

.seo-paths-kicker {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 10px;
  border-radius: 100px;
  background: rgba(26,58,255,0.06);
  border: 1px solid rgba(26,58,255,0.15);
  color: #1a3aff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.seo-paths-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1a3aff;
  flex: 0 0 7px;
}

.seo-paths-intro h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 44px);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #0d0f1a;
}

.seo-paths-intro p {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.72;
  color: #3a4060;
}

.seo-paths-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.seo-path-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  text-decoration: none;
  color: inherit;
  background: #f7f8fb;
  border: 1px solid rgba(14,0,72,0.06);
  border-top: 2px solid rgba(30,62,205,0.16);
  border-radius: 16px;
  box-shadow: none;
  transition: transform 0.2s ease, border-color 0.2s ease, border-top-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.seo-path-card:hover {
  transform: translateY(-3px);
  background: #ffffff;
  border-color: rgba(30,62,205,0.1);
  border-top-color: #1e3ecd;
  box-shadow: 0 8px 32px rgba(14,0,72,0.09);
}

.seo-path-card-kicker {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: 5px;
  background: rgba(30,62,205,0.08);
  color: #1e3ecd;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.seo-path-card h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: #0d0f1a;
}

.seo-path-card p {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: #3a4060;
  flex: 1;
}

@media (max-width: 860px) {
  .seo-paths-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .seo-paths-section {
    padding: 0 0 40px;
  }

  .seo-paths-shell {
    padding: 56px 20px 0;
  }

  .seo-path-card {
    padding: 24px;
  }

  .seo-path-card h3 {
    font-size: 15px;
  }
}

/* Match the stable footer canvas used on the other site pages. */
html,
body {
  background: #ffffff !important;
}

#lenis-wrapper {
  background: transparent !important;
}

#lenis-content {
  background: #ffffff !important;
}

.tf-site-footer {
  overflow: hidden !important;
}

/* Match the hero sizing and positioning from index.css exactly. */
.hero-content {
  width: min(var(--telfo-content-max), calc(100% - (var(--telfo-content-gutter) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero h1 {
  white-space: nowrap !important;
  line-height: 1.14 !important;
}

.badge {
  margin-bottom: 22px !important;
}

@media (max-width: 768px) {
  .hero-content { padding: 56px 20px 0 !important; }
  .hero h1 { font-size: clamp(38px, 10.8vw, 56px) !important; }
  .trust-bar { gap: 10px !important; flex-wrap: nowrap !important; }
  .trust-divider { display: none !important; }
  .trust-item .uni-img { height: 20px !important; }
  .trust-item .dsgvo-img { height: 24px !important; }
  .call-btn { padding: 15px 36px !important; font-size: 12px !important; }
}

@media (max-width: 768px) {
  .badge { white-space: nowrap !important; font-size: 11px !important; padding: 6px 16px 6px 8px !important; margin-bottom: 22px !important; }
  .hero-content { padding-top: 36px !important; }
  .trust-bar { margin-top: 16px !important; flex-wrap: nowrap !important; }
  .hero-sub { margin-top: 8px !important; font-size: 12px !important; }
  .cta-area { margin-top: 18px !important; }
}

@media (max-width: 414px) {
  .hero h1 { font-size: clamp(34px, 10vw, 43px) !important; line-height: 1.16 !important; }
  .badge { font-size: 10.5px !important; padding: 6px 15px 6px 7px !important; margin-bottom: 24px !important; }
  .trust-bar { gap: 4px !important; }
  .trust-item { gap: 2px !important; }
  .trust-label { white-space: nowrap !important; font-size: 10px !important; }
  .trust-item .uni-img  { height: 12px !important; }
  .trust-item .dsgvo-img { height: 24px !important; }
  .call-btn { white-space: nowrap !important; padding: 13px 20px !important;
              font-size: 11px !important; gap: 10px !important; }
  .hero { height: calc(100vh - 56px) !important; min-height: 0 !important; }
  .logos-section { opacity: 1 !important; transform: none !important;
                   transition: none !important; }
  .visualizer { justify-content: center !important; }
}

@media (max-width: 399px) {
  .hero h1 { font-size: clamp(35px, 10.3vw, 44px) !important; line-height: 1.16 !important; }
  .badge { font-size: 10px !important; padding: 5px 12px 5px 6px !important; margin-bottom: 22px !important; }
  .hero-expand-cb:checked ~ .hero .hero-expand-text {
    font-size: 10.5px !important;
    line-height: 1.65 !important;
    padding: 16px 18px !important;
    margin-top: 14px !important;
  }
  .hero-expand-text p { margin: 0 0 8px 0 !important; }
}

@media (max-width: 357px) {
  .hero h1 { font-size: clamp(31px, 9.4vw, 36px) !important; line-height: 1.15 !important; }
}

@media (min-width: 415px) and (max-width: 439px) {
  .hero h1 { font-size: clamp(39px, 9.6vw, 48px) !important; line-height: 1.15 !important; }
  .badge { font-size: 11px !important; padding: 6px 16px 6px 8px !important; margin-bottom: 24px !important; }
  .trust-bar { gap: 6px !important; }
  .trust-item { gap: 2px !important; }
  .trust-label { white-space: nowrap !important; font-size: 10.5px !important; }
  .trust-item .uni-img  { height: 13px !important; }
  .trust-item .dsgvo-img { height: 26px !important; }
  .call-btn { white-space: nowrap !important; padding: 13px 20px !important;
              font-size: 12px !important; gap: 10px !important; }
  .hero { height: calc(100vh - 56px) !important; min-height: 0 !important; }
  .logos-section { opacity: 1 !important; transform: none !important;
                   transition: none !important; }
  .visualizer { justify-content: center !important; }
}


/* Final hard override: Ueber-uns section must stay compact */
#ueber-uns,
.section-wrapper:has(.team-heading),
.section-wrapper:has(.photo-label-name) {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

#ueber-uns .section,
.section:has(.team-heading) {
  align-items: center !important;
}

#ueber-uns .left,
.section .left:has(.team-heading) {
  padding-top: 18px !important;
}

#ueber-uns .right,
.section .right:has(.photo-wrapper img[alt="Das Team"]) {
  max-width: 500px !important;
}

#ueber-uns .photo-wrapper,
.section .photo-wrapper:has(img[alt="Das Team"]) {
  max-height: 600px !important;
}

#ueber-uns .photo-wrapper img,
.section .photo-wrapper img[alt="Das Team"] {
  width: 100% !important;
  height: 600px !important;
  max-height: 600px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center 36% !important;
}

@media (max-width: 900px) {
  #ueber-uns,
  .section-wrapper:has(.team-heading),
  .section-wrapper:has(.photo-label-name) {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  #ueber-uns .right,
  .section .right:has(.photo-wrapper img[alt="Das Team"]) {
    max-width: 100% !important;
  }

  #ueber-uns .photo-wrapper,
  .section .photo-wrapper:has(img[alt="Das Team"]) {
    max-height: 460px !important;
  }

  #ueber-uns .photo-wrapper img,
  .section .photo-wrapper img[alt="Das Team"] {
    height: 460px !important;
    max-height: 460px !important;
    object-position: center 32% !important;
  }
}