/* ── VIRTUAL INERTIA SCROLL ── */
html { scroll-behavior: smooth; }
body { overflow: auto; }
#lenis-wrapper {
  position: relative;
  width: 100%; height: auto;
  overflow: visible;
}
#lenis-content { min-height: 100%; }
.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); }




  :root {
    --navy: #0a1628;
    --navy-mid: #0f2040;
    --blue: #1a5fd4;
    --blue-bright: #2563eb;
    --selection-bg: #3f3d99;
    --selection-fg: #ffffff;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --border: #e5e7eb;
    --border-light: #f3f4f6;
    --bg: #ffffff;
    --bg-subtle: #fafafa;
    --transition: cubic-bezier(0.4, 0, 0.2, 1);
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: var(--text-primary);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

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

  /* ── BREADCRUMB ── */
  .breadcrumb {
    max-width: 1280px; margin: 0 auto; padding: 24px 48px 0;
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-muted);
  }
  .breadcrumb a { text-decoration: none; color: var(--text-muted); transition: color 0.2s; }
  .breadcrumb a:hover { color: var(--blue); }
  .breadcrumb svg { width: 12px; height: 12px; flex-shrink: 0; }

  /* ── ARTICLE HEADER ── */
  .article-header {
    max-width: 1280px; margin: 0 auto; padding: 40px 48px 48px;
    text-align: left;
  }
  .article-header h1 { max-width: 720px; }
  .article-category {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--blue); margin-bottom: 20px;
  }
  .article-category::before {
    content: ''; display: block; width: 20px; height: 1px; background: var(--blue);
  }
  .article-header h1 {
    font-size: clamp(26px, 3.5vw, 42px); font-weight: 600;
    letter-spacing: -0.03em; line-height: 1.15; color: var(--text-primary);
    margin-bottom: 20px;
  }
  .article-lead {
    font-size: 17px; line-height: 1.7; color: var(--text-secondary);
    margin-bottom: 32px;
  }
  .article-meta {
    display: flex; align-items: center; gap: 16px;
    font-size: 13px; color: var(--text-muted);
    padding-bottom: 32px; border-bottom: 1px solid var(--border);
  }
  .author { display: flex; align-items: center; gap: 8px; }
  .author-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--navy), var(--blue));
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; color: white; flex-shrink: 0;
  }
  .author-name { font-weight: 500; color: var(--text-primary); }
  .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); }

  /* ── HERO IMAGE ── */
  .article-hero-image {
    max-width: 1280px; margin: 0 auto; padding: 0 48px 48px;
  }
  .hero-image-inner {
    border-radius: 16px; overflow: hidden;
    border: 1px solid var(--border);
    aspect-ratio: 16 / 6;
    position: relative;
  }
  .hero-image-inner img {
    width: 100%; height: auto; object-fit: cover; object-position: center 15%; display: block;
  }
  .hero-image-placeholder {
    width: 100%; height: auto;
    background: var(--bg-subtle);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; color: var(--text-muted);
    border: 2px dashed var(--border);
    border-radius: 15px;
    transition: background 0.2s, border-color 0.2s;
    cursor: pointer;
  }
  .hero-image-placeholder:hover {
    background: #f0f6ff;
    border-color: var(--blue);
    color: var(--blue);
  }
  .hero-image-placeholder svg { width: 36px; height: 36px; opacity: 0.5; }
  .hero-image-placeholder span { font-size: 13px; font-weight: 500; opacity: 0.6; }

  .hero-panel {
    width: 100%;
    height: 100%;
    padding: clamp(28px, 4vw, 48px);
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
    gap: clamp(20px, 3vw, 36px);
    align-items: end;
    color: #fff;
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at 18% 18%, rgba(255,255,255,0.22), transparent 34%),
      radial-gradient(circle at 82% 22%, rgba(255,255,255,0.12), transparent 30%),
      linear-gradient(135deg, #eaf2ff 0%, #b7cdfd 44%, #2758d6 100%);
  }
  .hero-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(130deg, rgba(255,255,255,0.14), transparent 42%),
      linear-gradient(0deg, rgba(8,20,48,0.12), rgba(8,20,48,0.12));
    pointer-events: none;
  }
  .hero-panel--image::before {
    background:
      linear-gradient(90deg, rgba(8,20,48,0.62) 0%, rgba(8,20,48,0.34) 48%, rgba(8,20,48,0.54) 100%),
      linear-gradient(180deg, rgba(8,20,48,0.12), rgba(8,20,48,0.18));
  }
  .hero-panel--fonio.hero-panel--image::before,
  .hero-panel--vitas.hero-panel--image::before,
  .hero-panel--hallopetra.hero-panel--image::before {
    background:
      linear-gradient(90deg, rgba(8,20,48,0.72) 0%, rgba(8,20,48,0.28) 42%, rgba(8,20,48,0.12) 100%),
      linear-gradient(180deg, rgba(8,20,48,0.06), rgba(8,20,48,0.12));
  }
  .hero-panel > * {
    position: relative;
    z-index: 1;
  }
  .hero-panel--rechtsanwalt {
    background:
      radial-gradient(circle at 20% 18%, rgba(255,255,255,0.2), transparent 34%),
      radial-gradient(circle at 82% 24%, rgba(188,208,255,0.4), transparent 32%),
      linear-gradient(135deg, #edf4ff 0%, #b8cdff 45%, #2b5fe1 100%);
  }
  .hero-panel--datenschutz {
    background:
      radial-gradient(circle at 14% 22%, rgba(255,255,255,0.24), transparent 32%),
      radial-gradient(circle at 86% 20%, rgba(150,190,255,0.32), transparent 30%),
      linear-gradient(135deg, #edf5ff 0%, #bfd5ff 40%, #2050cb 100%);
  }
  .hero-panel--integrationen {
    background:
      radial-gradient(circle at 16% 24%, rgba(255,255,255,0.2), transparent 32%),
      radial-gradient(circle at 84% 18%, rgba(176,205,255,0.32), transparent 32%),
      linear-gradient(135deg, #f2f7ff 0%, #c7d9ff 46%, #2e65df 100%);
  }
  .hero-panel--fonio {
    background:
      radial-gradient(circle at 18% 20%, rgba(255,255,255,0.2), transparent 34%),
      radial-gradient(circle at 82% 18%, rgba(189,215,255,0.34), transparent 30%),
      linear-gradient(135deg, #eef4ff 0%, #c2d6ff 43%, #224ecb 100%);
  }
  .hero-panel--handwerk {
    background:
      radial-gradient(circle at 18% 18%, rgba(255,255,255,0.22), transparent 32%),
      radial-gradient(circle at 82% 18%, rgba(191,214,255,0.36), transparent 30%),
      linear-gradient(135deg, #edf4ff 0%, #c6d8ff 40%, #2557d1 100%);
  }
  .hero-panel--stimmengeneratoren {
    background:
      radial-gradient(circle at 18% 18%, rgba(255,255,255,0.22), transparent 32%),
      radial-gradient(circle at 80% 24%, rgba(186,210,255,0.34), transparent 30%),
      linear-gradient(135deg, #f3f7ff 0%, #c5d7ff 45%, #2a60de 100%);
  }
  .hero-panel-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 14px;
    min-width: 0;
  }

:root {
  --telfo-blog-content-max: 1280px;
  --telfo-blog-gutter: clamp(20px, 3vw, 36px);
}

.tf-footer-inner {
  width: min(var(--telfo-blog-content-max), calc(100% - (var(--telfo-blog-gutter) * 2)));
  margin-left: auto;
  margin-right: auto;
}
  .hero-panel-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.22);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
  }
  .hero-panel-title {
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.04em;
    max-width: 12ch;
  }
  .hero-panel-text {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,0.82);
    max-width: 42ch;
  }
  .hero-panel-points {
    list-style: none;
    display: grid;
    gap: 12px;
    align-self: stretch;
  }
  .hero-panel-points--copy {
    margin-top: 10px;
    max-width: 42ch;
    align-self: auto;
  }
  .hero-panel-points li {
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.18);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
  }
  .hero-panel--with-visual {
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
    align-items: stretch;
  }
  .hero-panel-visual {
    min-width: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
  }
  .hero-panel-visual-card {
    width: 100%;
    min-height: 100%;
    padding: 14px;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 26px 54px rgba(10, 22, 49, 0.16);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-panel-visual-card--cover {
    padding: 0;
  }
  .hero-panel-visual-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }

  /* ── ARTICLE LAYOUT ── */
  .article-layout {
    max-width: 1280px; margin: 0 auto; padding: 0 48px 80px;
    display: grid; grid-template-columns: 1fr 280px; gap: 80px; align-items: start;
  }

  /* ── ARTICLE BODY ── */
  .article-body { min-width: 0; }

  .article-body h2 {
    font-size: 22px; font-weight: 600; letter-spacing: -0.025em;
    color: var(--text-primary); margin: 48px 0 16px; line-height: 1.3;
  }
  .article-body h2:first-child { margin-top: 40px; }

  .article-body h3 {
    font-size: 17px; font-weight: 600; letter-spacing: -0.015em;
    color: var(--text-primary); margin: 32px 0 12px;
  }

  .article-body p {
    font-size: 16px; line-height: 1.75; color: var(--text-secondary);
    margin-bottom: 20px;
  }

  .article-body ul, .article-body ol {
    margin: 0 0 20px 0; padding-left: 0; list-style: none;
  }

  .article-body ul li, .article-body ol li {
    font-size: 15px; line-height: 1.65; color: var(--text-secondary);
    padding: 6px 0 6px 22px; position: relative;
  }

  .article-body ul li::before {
    content: ''; position: absolute; left: 0; top: 14px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--blue); opacity: 0.6;
  }

  .article-body ol { counter-reset: list; }
  .article-body ol li { counter-increment: list; }
  .article-body ol li::before {
    content: counter(list) '.';
    position: absolute; left: 0; top: 6px;
    font-size: 13px; font-weight: 600; color: var(--blue);
  }
  .article-body strong { color: var(--text-primary); }
  .article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: block;
    overflow-x: auto;
  }
  .article-body thead,
  .article-body tbody {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .article-body th,
  .article-body td {
    padding: 14px 16px;
    text-align: left;
    font-size: 14px;
    line-height: 1.55;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    vertical-align: top;
  }
  .article-body th {
    font-weight: 600;
    color: var(--text-primary);
    background: #f8fbff;
  }
  .article-body tr:last-child td { border-bottom: none; }

  /* tip box */
  .tip-box {
    border-left: 3px solid var(--blue);
    background: #f0f6ff;
    border-radius: 0 10px 10px 0;
    padding: 18px 22px; margin: 28px 0;
  }
  .tip-box p { margin: 0; font-size: 15px; color: var(--navy-mid); }

  /* numbered section header */
  .section-num {
    display: flex; align-items: center; gap: 14px; margin: 48px 0 16px;
  }
  .section-num-badge {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--navy); color: white;
    font-size: 13px; font-weight: 600; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .section-num h3 {
    font-size: 18px; font-weight: 600; letter-spacing: -0.02em;
    color: var(--text-primary); margin: 0;
  }

  /* CTA block */
  .article-cta {
    background: var(--navy); border-radius: 16px;
    padding: 40px; margin: 56px 0 0; position: relative; overflow: hidden;
  }
  .article-cta::before {
    content: ''; position: absolute; top: -60px; right: -60px;
    width: 240px; height: 240px; border-radius: 50%;
    background: radial-gradient(circle, rgba(37,99,235,0.3) 0%, transparent 70%);
    pointer-events: none;
  }
  .article-cta h3 {
    font-size: 20px; font-weight: 600; color: white;
    letter-spacing: -0.02em; margin-bottom: 10px;
  }
  .article-cta p {
    font-size: 14px; color: rgba(255,255,255,0.55); margin-bottom: 24px; line-height: 1.6;
  }
  .cta-btn {
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
    color: var(--navy); background: white; border: none;
    border-radius: 10px; padding: 12px 24px; cursor: pointer;
    transition: opacity 0.2s, transform 0.2s; display: inline-flex; align-items: center; gap: 8px;
  }
  .cta-btn:hover { opacity: 0.9; transform: translateY(-1px); }
  .cta-btn svg { width: 14px; height: 14px; }

  /* ── SIDEBAR ── */
  .article-sidebar { position: sticky; top: 88px; }

  .toc-card {
    border: 1px solid var(--border); border-radius: 14px; padding: 24px; margin-bottom: 24px;
  }
  .toc-title {
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px;
  }
  .toc-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
  .toc-list a {
    text-decoration: none; font-size: 13px; color: var(--text-secondary);
    padding: 6px 10px; border-radius: 6px; display: block;
    transition: background 0.15s, color 0.15s; line-height: 1.4;
  }
  .toc-list a:hover { background: var(--border-light); color: var(--text-primary); }
  .toc-list a.active { color: var(--blue); background: #eff6ff; font-weight: 500; }

  .author-card {
    border: 1px solid var(--border); border-radius: 14px; padding: 24px;
  }
  .author-card-title {
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px;
  }
  .author-card-inner { display: flex; align-items: flex-start; gap: 14px; }
  .author-card-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--navy), var(--blue));
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 600; color: white;
  }
  .author-card-name { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
  .author-card-role { font-size: 12px; color: var(--text-muted); }

  /* ── BACK TO BLOG ── */
  .back-section {
    max-width: 1280px; margin: 0 auto; padding: 0 48px 40px;
  }
  .back-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 500; color: var(--text-secondary);
    text-decoration: none; transition: color 0.2s, gap 0.2s;
  }
  .back-link:hover { color: var(--blue); gap: 12px; }
  .back-link svg { width: 14px; height: 14px; transition: transform 0.2s; }
  .back-link:hover svg { transform: translateX(-2px); }

  /* ── RELATED POSTS ── */
  .related-section {
    border-top: 1px solid var(--border); padding: 56px 48px 80px;
    max-width: 1280px; margin: 0 auto;
  }
  .related-title {
    font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 28px;
  }
  .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
  .related-card {
    background: var(--bg); padding: 28px; cursor: pointer;
    color: inherit; text-decoration: none;
    transition: background 0.2s; display: flex; flex-direction: column; gap: 10px;
  }
  .related-card:hover { background: var(--bg-subtle); }
  .related-cat { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
  .related-card h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); line-height: 1.35; }
  .related-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.55; flex: 1; }
  .related-date { font-size: 12px; color: var(--text-muted); }
  .reveal-block {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s var(--transition), transform 0.55s var(--transition);
    will-change: opacity, transform;
  }
  .reveal-block.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── FOOTER ── */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: transparent;
      min-height: auto;
      display: block;
    }
  
    footer {
      background: #0a0f1e;
      width: 100%;
      padding: clamp(56px, 7vw, 72px) clamp(24px, 6vw, 80px) 32px;
      position: relative;
      overflow: hidden;
    }
  
    footer::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(59,130,246,0.5) 30%, rgba(99,179,255,0.7) 50%, rgba(59,130,246,0.5) 70%, transparent);
    }
  
    .footer-inner {
      max-width: 1400px;
      margin: 0 auto;
    }
  
    .footer-top {
      display: grid;
      grid-template-columns: minmax(280px, 1.2fr) repeat(3, minmax(140px, 1fr));
      gap: clamp(32px, 4vw, 64px);
      padding-bottom: 56px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
  
    /* Logo: white text on same dark bg */
    .logo-wrap {
      margin-bottom: 16px;
    }
  
    .logo-img {
      height: 36px;
      width: auto;
      display: block;
      /* mix-blend-mode: screen makes black bg disappear, white text stays white */
      mix-blend-mode: screen;
    }
  
    .brand-desc {
      font-size: 14px;
      line-height: 1.7;
      color: rgba(255,255,255,0.45);
      margin-bottom: 28px;
      font-weight: 300;
      letter-spacing: 0.01em;
    }
  
    .contact-info {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 28px;
    }
  
    .contact-info a {
      font-size: 13.5px;
      color: rgba(255,255,255,0.5);
      text-decoration: none;
      transition: color 0.2s;
    }
  
    .contact-info a:hover { color: rgba(255,255,255,0.85); }
  
    .social-row {
      display: flex;
      gap: 8px;
    }
  
    .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;
      transition: all 0.2s;
    }
  
    .social-btn:hover {
      background: rgba(59,130,246,0.2);
      border-color: rgba(59,130,246,0.4);
      transform: translateY(-1px);
    }
  
    .social-btn svg {
      width: 15px; height: 15px;
      fill: rgba(255,255,255,0.6);
    }
  
    .social-btn:hover svg { fill: rgba(255,255,255,0.9); }
  
    .nav-col h5 {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
      margin-bottom: 20px;
    }
  
    .nav-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 11px;
    }
  
    .nav-col ul li {
      display: flex;
      align-items: center;
      gap: 8px;
    }
  
    .nav-col ul li a {
      font-size: 14px;
      font-weight: 400;
      color: rgba(255,255,255,0.55);
      text-decoration: none;
      transition: color 0.18s;
    }
  
    .nav-col ul li a:hover { color: rgba(255,255,255,0.9); }
  
    .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 */
    .trust-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 14px;
      padding: 24px 0;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
  
    .avatar-stack {
      display: flex;
      align-items: center;
    }
  
    .avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 2.5px solid #0a0f1e;
      margin-left: -10px;
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
    }
  
    .avatar:first-child { margin-left: 0; }
  
    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* zoom in to show face: shift upward slightly */
      object-position: center 15%;
      transform: scale(1.4);
      transform-origin: center 25%;
    }
  
    .trust-text {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
  
    .trust-count {
      font-size: 14px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
      letter-spacing: -0.02em;
    }
  
    .trust-stars {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12.5px;
      color: rgba(255,255,255,0.4);
    }
  
    .stars { color: #fbbf24; letter-spacing: 1px; }
  
    .trust-links a {
      color: #60a5fa;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s;
    }
  
    .trust-links a:hover { color: #93c5fd; text-decoration: underline; }
  
    /* Bottom */
    .footer-bottom {
      padding-top: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
    }
  
    .copyright {
      font-size: 12.5px;
      color: rgba(255,255,255,0.28);
    }
  
    .bottom-links {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }
  
    .bottom-links a {
      font-size: 12.5px;
      color: rgba(255,255,255,0.28);
      text-decoration: none;
      transition: color 0.18s;
    }
  
    .bottom-links a:hover { color: rgba(255,255,255,0.6); }
  
    .compliance-badges {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
  
    .compliance-badge {
      font-size: 11px;
      color: rgba(255,255,255,0.3);
      border: 1px solid rgba(255,255,255,0.1);
      padding: 4px 10px;
      border-radius: 100px;
    }
  /* ── ANIMATIONS ── */
  @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
  .fade-up { opacity: 0; animation: fadeUp 0.5s cubic-bezier(0.4,0,0.2,1) forwards; }
  .fade-up-1 { animation-delay: 0.05s; } .fade-up-2 { animation-delay: 0.12s; }
  .fade-up-3 { animation-delay: 0.18s; } .fade-up-4 { animation-delay: 0.24s; }

  @media (max-width: 1180px) {
    nav {
      padding-top: 12px;
      padding-bottom: 12px;
    }
    .nav-inner {
      flex-wrap: wrap;
      align-items: center;
    }
    .nav-links {
      position: static;
      left: auto;
      transform: none;
      order: 3;
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px 22px;
      padding-top: 2px;
    }
    .nav-actions { margin-left: auto; }
    .footer-top {
      grid-template-columns: minmax(280px, 1.2fr) repeat(2, minmax(150px, 1fr));
      gap: 32px 28px;
    }
    .brand-col {
      grid-column: 1 / -1;
      max-width: 560px;
    }
  }

  @media (max-width: 1024px) {
    .article-layout { grid-template-columns: 1fr; gap: 40px; }
    .article-sidebar { position: static; }
    .related-grid { grid-template-columns: 1fr; }
    .hero-panel { grid-template-columns: 1fr; align-items: start; }
    .hero-panel-visual { min-height: 260px; }
    footer { padding-left: 24px; padding-right: 24px; }
  }

  @media (max-width: 760px) {
    nav {
      padding-top: 12px;
      padding-bottom: 12px;
    }
    .nav-inner {
      align-items: flex-start;
      gap: 12px 16px;
    }
    .nav-logo img { height: 20px; }
    .nav-actions {
      order: 2;
      width: 100%;
      justify-content: flex-start;
      margin-left: 0;
      gap: 10px;
    }
    .nav-links {
      justify-content: flex-start;
      gap: 8px 16px;
      padding-top: 0;
    }
    .nav-links a { font-size: 13px; }
    .nav-divider { display: none; }
    .btn-ghost,
    .btn-primary {
      font-size: 13px;
      padding: 8px 10px;
    }
    .footer-top {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 28px 20px;
      padding-bottom: 40px;
    }
    .trust-bar {
      padding: 20px 0;
      align-items: flex-start;
      gap: 12px 20px;
    }
    .trust-stars {
      flex-wrap: wrap;
      gap: 8px;
    }
    .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }
  }

  @media (max-width: 640px) {
    .article-hero-image { padding: 0 14px 32px !important; }
    .hero-image-inner { aspect-ratio: unset !important; min-height: unset !important; height: auto !important; border-radius: 12px !important; }
    .hero-panel { grid-template-columns: 1fr !important; padding: 28px 20px 24px !important; }
    .hero-panel-visual { display: none !important; }
    .hero-panel-title { font-size: 26px !important; }
    .hero-panel-text { font-size: 14px !important; }
    .hero-panel-points li { padding: 12px 14px !important; font-size: 13px !important; }
    nav, .breadcrumb, .article-header, .article-layout, .back-section, .related-section, footer { padding-left: 20px; padding-right: 20px; }
    .article-meta { flex-wrap: wrap; }
    .footer-top { grid-template-columns: 1fr; }
    .brand-col { max-width: none; }
    .logo-img { height: 32px; }
    .brand-desc { margin-bottom: 20px; }
    .contact-info { margin-bottom: 20px; }
    .nav-col ul { gap: 10px; }
    .nav-col ul li a,
    .contact-info a { font-size: 13px; }
    .avatar {
      width: 36px;
      height: 36px;
      margin-left: -8px;
    }
    .trust-count { font-size: 13.5px; }
    .trust-stars,
    .copyright,
    .bottom-links a { font-size: 12px; }
    .bottom-links { gap: 10px 16px; }
    .compliance-badges { gap: 8px; }
    .compliance-badge { font-size: 10.5px; }
  }

  @media (max-width: 460px) {
    nav, .breadcrumb, .article-header, .article-layout, .back-section, .related-section, footer { padding-left: 16px; padding-right: 16px; }
    .nav-links { gap: 8px 14px; }
    .nav-links a,
    .btn-ghost,
    .btn-primary { font-size: 12.5px; }
    .btn-ghost,
    .btn-primary { padding: 7px 9px; }
  }



/* ══ TELFO NAV + FOOTER (from telfo-hero__.html) ══ */
/* ═══ 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 { display:flex !important; 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%; }

}
.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: 28px; }
  .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;
  }
}



.tf-site-footer {
    background: #0a0f1e;
    width: 100%;
    padding: 64px 80px calc(24px + env(safe-area-inset-bottom, 0px));
    position: relative;
    overflow: hidden;
    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;
    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: rgba(255,255,255,0.72); letter-spacing: 0.02em; font-size: 12px; font-weight: 500; }

  .tf-footer-trust-links a {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 500;
    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) ══ */
/* ═══ 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 { display:flex !important; 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%; }


  @media (max-width: 1024px) {
    nav { padding: 0 24px; }
  }
  @media (max-width: 768px) {
    nav { padding: 0 20px; height: 56px; }
    .nav-logo img { height: 20px; }
    .nav-links, .nav-right { display: none; }
    .nav-hamburger { display: flex; }
    .mobile-menu { top: 56px; }
  }



/* ══ FOOTER CSS (telfo-hero__.html) ══ */
.tf-site-footer {
    background: #0a0f1e;
    width: 100%;
    padding: 64px 80px calc(24px + env(safe-area-inset-bottom, 0px));
    position: relative;
    overflow: hidden;
    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;
    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: rgba(255,255,255,0.72); letter-spacing: 0.02em; font-size: 12px; font-weight: 500; }

  .tf-footer-trust-links a {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 500;
    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; }
  }