:root{
    --tdc-green: #2D5547;
    --tdc-green-2: #426d61;
    --tdc-ink: #0f172a;
    --tdc-text: #1f2937;
    --tdc-muted: #6b7280;

    /* NEW: orange accent (CTA color) */
    --tdc-orange: #f5be4a;
    --tdc-orange-dark: #f5be4a;
    --tdc-orange-soft: rgba(249,115,22,0.14);

    /* Footer surface */
    --tdc-footer-bg: #0b1220;
    --tdc-footer-border: rgba(255,255,255,0.10);
    --tdc-footer-text: rgba(255,255,255,0.88);
    --tdc-footer-muted: rgba(255,255,255,0.68);
  
    --tdc-bg: #ffffff;
    --tdc-soft: #f6f7fb;
  
    --tdc-radius: 16px;
    --tdc-radius-lg: 22px;
  
    --tdc-shadow: 0 18px 55px rgba(15, 23, 42, 0.12);
    --tdc-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.10);
  
    --tdc-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --tdc-serif: "DM Serif Display", Georgia, serif;
  
    --tdc-max: 1140px;
  }
  
  .tdc-body{
    font-family: var(--tdc-font);
    color: var(--tdc-text);
    background: var(--tdc-bg);
    overflow-x: hidden;
  }
  
  .container{
    max-width: var(--tdc-max);
  }

  .tdc-btn-orange{
    background: var(--tdc-orange);
    color: #0b1220;
    box-shadow: 0 14px 34px rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(255,255,255,0.12);
  }
  
  .tdc-btn-orange:hover{
    background: var(--tdc-orange-dark);
    color: #0b1220;
    transform: translateY(-1px);
    box-shadow: 0 18px 44px rgba(249,115,22,0.34);
  }
  
  a{
    color: inherit;
    text-decoration: none;
  }
  
  /* NAV */
  .tdc-nav{
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  }
  
  .tdc-logo{
    height: 40px;
    width: auto;
  }
  
  .navbar .nav-link{
    color: rgba(15, 23, 42, 0.75);
    font-weight: 500;
    padding: 10px 10px;
  }
  
  .navbar .nav-link:hover{
    color: rgba(15, 23, 42, 0.95);
  }
  
  .navbar .nav-link.active{
    color: var(--tdc-green);
    font-weight: 700;
    border-bottom: 3px solid var(--tdc-green);
  }
  
  /* BUTTONS */
  .tdc-btn{
    border-radius: 12px;
    font-weight: 700;
    border: 1px solid transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
  }
  
  .tdc-btn-lg{
    padding: 12px 18px;
    font-size: 1.02rem;
  }
  
  .tdc-btn-primary{
    background: var(--tdc-green);
    color: #fff;
    box-shadow: 0 12px 30px rgba(45, 85, 71, 0.20);
  }
  
  .tdc-btn-primary:hover{
    background: #23463a;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(45, 85, 71, 0.24);
  }
  
  .tdc-btn-ghost{
    background: rgba(255,255,255,0.10);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
  }
  
  .tdc-btn-ghost:hover{
    background: rgba(255,255,255,0.16);
    color: #fff;
    transform: translateY(-1px);
  }
  
  /* HERO */
  /* HERO – WHITE BACKGROUND */
  .tdc-hero{
    position: relative;
    padding: 70px 0 40px;
    background: #ffffff;
    color: var(--tdc-ink);
  }
  
  /* HERO TITLE - bigger + intentional line break */
  .tdc-hero-title{
    font-family: var(--tdc-serif);
    font-size: clamp(3.0rem, 4.4vw, 4.4rem);  /* bigger */
    line-height: 1.03;
    letter-spacing: 0.2px;
    margin: 0 0 14px;
  }

  .tdc-hero-title-line2{
    display: inline-block;
  }
  
  /* HERO SUBTITLE - larger + higher contrast */

  /* Mobile tuning so it doesn't overwhelm */
  @media (max-width: 575px){
    .tdc-hero-title{
      font-size: 2.65rem;
      line-height: 1.05;
    }
    .tdc-hero-subtitle{
      font-size: 1.15rem;
    }
  }
    
  .tdc-hero-actions{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
  }
  
  .tdc-hero-trust{
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }
  
  .tdc-trust-item{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.90);
    font-weight: 600;
  }
  
  .tdc-hero-mock{
    border-radius: var(--tdc-radius-lg);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 30px 90px rgba(0,0,0,0.35);
  
    padding: 12px;              /* ⬅️ thinner glass border */
    max-width: 340px;           /* ⬅️ BIGGER glass frame */
    margin-left: auto;
    margin-right: auto;
  
    position: relative;
    overflow: hidden;
  }
  
  .tdc-hero-mock-img{
    width: 100%;
    max-width: 360px;           /* ⬅️ image grows with glass */
    height: auto;
  
    display: block;
    margin: 0 auto;
  
    object-fit: contain;
    border-radius: calc(var(--tdc-radius-lg) - 6px);
  }
  
  .tdc-hero-mock-fallback-inner{
    border-radius: calc(var(--tdc-radius-lg) - 8px);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    padding: 14px;
  }
  
  .tdc-fake-ui-top{
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
  }
  
  .tdc-dot{
    width: 10px; height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.25);
  }
  
  .tdc-fake-ui-body{
    padding: 8px 2px 6px;
  }
  
  .tdc-fake-line{
    height: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    margin-bottom: 10px;
  }
  
  .tdc-fake-cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px;
  }
  
  .tdc-fake-card{
    height: 110px;
    border-radius: 16px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.12);
  }
  
  .tdc-fallback-note{
    margin-top: 12px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.70);
  }
  
  .tdc-hero-divider{
    height: 28px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(255,255,255,0));
    margin-top: 40px;
  }
  
  /* SECTIONS */
  .tdc-section{
    padding: 74px 0;
  }
  
  .tdc-section-soft{
    background: var(--tdc-soft);
  }
  
  .tdc-section-head{
    margin-bottom: 28px;
  }
  
  .tdc-h2{
    font-family: var(--tdc-serif);
    font-size: 2.15rem;
    margin: 0 0 8px;
    color: var(--tdc-ink);
  }
  
  .tdc-lead{
    color: var(--tdc-muted);
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.6;
  }
  
  .tdc-h2-sm{
    font-family: var(--tdc-serif);
    font-size: 1.7rem;
    color: var(--tdc-ink);
  }
  
  .tdc-p, .tdc-p-sm{
    color: var(--tdc-muted);
    line-height: 1.7;
  }
  
  .tdc-p-sm{
    font-size: 0.98rem;
  }
  
  /* CARDS */
  .tdc-card{
    background: #fff;
    border-radius: var(--tdc-radius);
    padding: 22px;
    box-shadow: var(--tdc-shadow-soft);
    border: 1px solid rgba(15, 23, 42, 0.06);
    height: 100%;
  }
  
  .tdc-card-icon{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(45, 85, 71, 0.10);
    color: var(--tdc-green);
    margin-bottom: 12px;
    font-size: 1.05rem;
  }
  
  .tdc-h3{
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--tdc-ink);
  }
  
  /* PANELS */
  .tdc-panel{
    background: #fff;
    border-radius: var(--tdc-radius-lg);
    box-shadow: var(--tdc-shadow-soft);
    border: 1px solid rgba(15, 23, 42, 0.06);
    padding: 18px;
    height: 100%;
  }
  
  .tdc-panel-head{
    margin-bottom: 12px;
  }
  
  /* MINI GRID */
  .tdc-mini-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 12px;
  }
  
  .tdc-mini{
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(15, 23, 42, 0.02);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  }
  
  .tdc-mini:hover{
    transform: translateY(-1px);
    box-shadow: var(--tdc-shadow-soft);
    background: rgba(15, 23, 42, 0.03);
  }
  
  .tdc-mini-thumb{
    width: 92px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
  }
  
  .tdc-mini-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .tdc-mini-text{
    color: var(--tdc-text);
    font-weight: 700;
    line-height: 1.35;
    font-size: 0.98rem;
  }
  
  .tdc-mini-cta{
    margin-top: 14px;
  }
  
  .tdc-link{
    color: var(--tdc-green);
    font-weight: 800;
  }
  
  .tdc-proof{
    margin-top: 18px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(45, 85, 71, 0.06);
  }
  
  .tdc-proof-badge{
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-weight: 800;
    color: var(--tdc-green);
    margin-bottom: 8px;
  }
  
  /* STEPS */
  .tdc-step{
    background: #fff;
    border-radius: var(--tdc-radius);
    padding: 22px;
    box-shadow: var(--tdc-shadow-soft);
    border: 1px solid rgba(15, 23, 42, 0.06);
    height: 100%;
  }
  
  .tdc-step-num{
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(45, 85, 71, 0.12);
    color: var(--tdc-green);
    font-weight: 900;
    margin-bottom: 12px;
  }
  
  /* QUOTE */
  .tdc-quote{
    background: #fff;
    border-radius: var(--tdc-radius-lg);
    box-shadow: var(--tdc-shadow-soft);
    border: 1px solid rgba(15, 23, 42, 0.06);
    padding: 26px;
  }
  
  .tdc-quote-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
  }
  
  .tdc-quote-stars{
    color: #e5ac00;
    font-weight: 900;
    letter-spacing: 1px;
    white-space: nowrap;
  }
  
  .tdc-quote-lead{
    color: var(--tdc-muted);
    margin: 0 0 12px;
    font-weight: 600;
  }
  
  .tdc-quote-text{
    margin: 0 0 16px;
    color: var(--tdc-text);
    line-height: 1.75;
    font-style: italic;
  }
  
  .tdc-quote-foot{
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
  }
  
  .tdc-quote-name{
    font-weight: 900;
    color: var(--tdc-ink);
  }
  
  .tdc-quote-tag{
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.06);
    color: var(--tdc-muted);
    font-weight: 700;
    font-size: 0.92rem;
  }
  
  /* LOGOS */
  .tdc-logos{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }
  
  .tdc-logo-pill{
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: var(--tdc-shadow-soft);
    padding: 12px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    min-height: 70px;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }
  
  .tdc-logo-pill:hover{
    transform: translateY(-1px);
    box-shadow: var(--tdc-shadow);
  }
  
  .tdc-logo-pill img{
    max-height: 46px;
    max-width: 120px;
    width: auto;
    height: auto;
    display: block;
  }
  
  /* FINAL CTA */
  .tdc-final{
    padding: 74px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  }
  
  .tdc-final-inner{
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    padding: 26px;
    border-radius: var(--tdc-radius-lg);
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: var(--tdc-shadow-soft);
  }
  
  .tdc-final-actions{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  
  /* FOOTER (match hero deep-blue gradient) */
  .tdc-footer{
    background:
      radial-gradient(700px 260px at 85% 30%, rgba(99,102,241,0.22), rgba(99,102,241,0) 60%),
      radial-gradient(680px 260px at 55% 15%, rgba(56,189,248,0.14), rgba(56,189,248,0) 55%),
      linear-gradient(180deg, #0e1930 0%, #102648 55%, #0e1930 100%);
    color: rgba(255,255,255,0.88);
    padding: 26px 0;
    border-top: 1px solid rgba(255,255,255,0.10);
  }

  .tdc-footer a{
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.35);
    padding-bottom: 2px;
  }

  .tdc-footer a:hover{
    border-bottom-color: var(--tdc-orange);
  }

  .tdc-sep{
    color: rgba(255,255,255,0.68);
    padding: 0 10px;
  }
  
  /* RESPONSIVE */
  @media (max-width: 991px){
    .tdc-final-inner{
      flex-direction: column;
      align-items: flex-start;
    }
  }
  
  @media (max-width: 575px){
    .tdc-hero{
      padding: 54px 0 32px;
    }
    .tdc-hero-actions{
      width: 100%;
    }
    .tdc-btn-lg{
      width: 100%;
      justify-content: center;
    }
    .tdc-fake-cards{
      grid-template-columns: 1fr;
    }
  }

/* Homepage sections should feel like the hero system */
.tdc-section{
    padding: 84px 0;
  }
  
  .tdc-section-soft{
    background: var(--tdc-soft);
  }
  
  .tdc-section-head{
    text-align: center;
    max-width: 760px;
    margin: 0 auto 26px;
  }
  
  .tdc-h2{
    font-family: var(--tdc-serif);
    color: var(--tdc-ink);
    font-size: clamp(1.9rem, 2.2vw, 2.3rem);
    margin: 0 0 10px;
  }
  
  .tdc-lead{
    color: var(--tdc-muted);
    margin: 0;
    line-height: 1.7;
    font-size: 1.04rem;
  }
  
  /* Make all cards match the premium look */
  .tdc-card,
  .tdc-panel{
    border-radius: var(--tdc-radius-lg);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: var(--tdc-shadow-soft);
  }

  /* Feedback list (replaces the "yellow block" look) */
.tdc-feedback .tdc-panel-head{
    margin-bottom: 14px;
  }
  
  .tdc-feedback-list{
    display: grid;
    gap: 12px;
    margin-top: 12px;
  }
  
  .tdc-feedback-item{
    display: grid;
    grid-template-columns: 96px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  }
  
  .tdc-feedback-item:hover{
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10);
    border-color: rgba(45, 85, 71, 0.22);
  }
  
  .tdc-feedback-thumb{
    position: relative;
    width: 96px;
    height: 60px;
    border-radius: 14px;
    overflow: hidden;
    background: #0b1220;
    border: 1px solid rgba(255,255,255,0.08);
  }
  
  .tdc-feedback-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.95) contrast(1.05);
  }
  
  .tdc-play{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.35), rgba(0,0,0,0));
    color: #fff;
    font-size: 0.95rem;
  }
  
  .tdc-feedback-meta{
    min-width: 0;
  }
  
  .tdc-feedback-title{
    font-weight: 900;
    color: var(--tdc-ink);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .tdc-feedback-sub{
    margin-top: 4px;
    font-size: 0.92rem;
    color: var(--tdc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .tdc-feedback-arrow{
    color: rgba(15, 23, 42, 0.45);
  }
  
  .tdc-feedback-item:hover .tdc-feedback-arrow{
    color: var(--tdc-green);
  }
  .tdc-hero-gradient-box {
    width: 100%;
    height: 700px; /* adjust as needed */
    position: relative;
    overflow: hidden;
  
    background:
      /* soft blue glow on right */
      radial-gradient(
        900px 600px at 78% 50%,
        rgba(59, 130, 246, 0.35),
        rgba(59, 130, 246, 0.12) 40%,
        rgba(15, 23, 42, 0.95) 70%
      ),
  
      /* subtle navy glow on left */
      radial-gradient(
        700px 500px at 20% 40%,
        rgba(30, 64, 175, 0.18),
        rgba(15, 23, 42, 0.95) 65%
      ),
  
      /* base color */
      linear-gradient(
        180deg,
        #0b1220 0%,
        #0f172a 50%,
        #0b1220 100%
      );
  }
  
  /* optional soft fade at bottom so it blends into white */
  .tdc-hero-gradient-box::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0),
      rgba(255,255,255,1)
    );
  }
  
  /* Mobile tightening */
  @media (max-width: 575px){
    .tdc-feedback-item{
      grid-template-columns: 84px 1fr;
      grid-template-rows: auto auto;
    }
    .tdc-feedback-arrow{
      grid-column: 2;
      justify-self: end;
      margin-top: -6px;
    }
  }

  /* ===== Reactions slider ===== */
.tdc-reactions-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
  }
  
  .tdc-slider-controls{
    display:flex;
    gap:10px;
  }
  
  .tdc-slider-btn{
    width:40px;
    height:40px;
    border-radius:12px;
    border:1px solid rgba(15,23,42,0.08);
    background:#fff;
    box-shadow: var(--tdc-shadow-soft);
    display:grid;
    place-items:center;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .tdc-slider-btn:hover{
    transform: translateY(-1px);
    box-shadow: var(--tdc-shadow);
  }
  
  .tdc-slider-wrap{
    margin-top: 14px;
  }
  
  .tdc-slider{
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding: 6px 2px 10px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .tdc-slider::-webkit-scrollbar{ height:10px; }
  .tdc-slider::-webkit-scrollbar-thumb{
    background: rgba(15,23,42,0.10);
    border-radius:999px;
  }
  
  .tdc-slide{
    flex: 0 0 82%;
    max-width: 82%;
    scroll-snap-align: start;
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,0.06);
    background: rgba(15,23,42,0.02);
    overflow: hidden;
    box-shadow: var(--tdc-shadow-soft);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  }
  .tdc-slide:hover{
    transform: translateY(-1px);
    box-shadow: var(--tdc-shadow);
    background: rgba(15,23,42,0.03);
  }
  
  .tdc-slide-thumb{
    position:relative;
    aspect-ratio: 16 / 9;
    background:#0b1220;
  }
  .tdc-slide-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  
  .tdc-slide-meta{
    padding: 14px 14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .tdc-slide-title{
    font-weight: 900;
    color: var(--tdc-ink);
    line-height: 1.2;
  }
  .tdc-slide-sub{
    font-size: .92rem;
    color: var(--tdc-muted);
    margin-top: 2px;
  }
  .tdc-slide-cta{
    margin-left:auto;
    white-space:nowrap;
    font-weight: 900;
    color: var(--tdc-green);
    display:inline-flex;
    gap:8px;
    align-items:center;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(45,85,71,0.10);
    border: 1px solid rgba(45,85,71,0.18);
  }
  
  /* Wider cards on desktop so it feels premium */
  @media (min-width: 992px){
    .tdc-slide{
      flex-basis: 72%;
      max-width: 72%;
    }
  }

  /* ===== FORCE the reactions list to become a horizontal slider ===== */

/* the list becomes a horizontal row that scrolls */
.tdc-reaction-list{
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto !important;
    padding: 6px 2px 12px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  
  /* each reaction becomes a wide card (not stacked) */
  .tdc-reaction{
    flex: 0 0 82% !important;        /* 1 card mostly visible */
    max-width: 82% !important;
    scroll-snap-align: start;
    display: block !important;        /* override grid layout */
    padding: 12px !important;
  }
  
  /* make the thumbnail FULL WIDTH (this is your current layout issue) */
  .tdc-reaction-thumb{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
  }
  
  .tdc-reaction-thumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
  }
  
  /* text + arrow become a clean footer row */
  .tdc-reaction-text{
    display: inline-block;
    font-weight: 800;
    color: var(--tdc-ink);
    margin-right: 10px;
  }
  
  .tdc-reaction-arrow{
    float: right;
    color: var(--tdc-green);
  }
  
  /* optional nicer scrollbar */
  .tdc-reaction-list::-webkit-scrollbar{ height: 10px; }
  .tdc-reaction-list::-webkit-scrollbar-thumb{
    background: rgba(15,23,42,0.10);
    border-radius: 999px;
  }
  
  /* desktop: show more of the next card */
  @media (min-width: 992px){
    .tdc-reaction{
      flex-basis: 70% !important;
      max-width: 70% !important;
    }
  }

  /* ===== Reactions Slider ===== */
.tdc-reactions-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
  }
  
  .tdc-slider-controls{
    display:flex;
    gap:10px;
  }
  
  .tdc-slider-btn{
    width:42px;
    height:42px;
    border-radius:14px;
    border:1px solid rgba(15,23,42,0.10);
    background:#fff;
    box-shadow: var(--tdc-shadow-soft);
    display:grid;
    place-items:center;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .tdc-slider-btn:hover{
    transform: translateY(-1px);
    box-shadow: var(--tdc-shadow);
  }
  
  .tdc-slider-wrap{
    margin-top: 14px;
  }
  
  .tdc-slider{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  
  .tdc-slide{
    flex: 0 0 86%;
    max-width: 86%;
    scroll-snap-align:start;
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,0.08);
    background: rgba(15,23,42,0.02);
    overflow:hidden;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  }
  .tdc-slide:hover{
    transform: translateY(-2px);
    box-shadow: var(--tdc-shadow-soft);
    background: rgba(15,23,42,0.03);
  }
  
  .tdc-slide-thumb{
    aspect-ratio: 16/9;
    background:#0b1220;
  }
  .tdc-slide-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  
  .tdc-slide-meta{
    padding: 14px 14px 16px;
  }
  
  .tdc-slide-title{
    font-weight: 900;
    color: var(--tdc-ink);
    margin-bottom: 2px;
  }
  
  .tdc-slide-sub{
    color: var(--tdc-muted);
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: 10px;
  }
  
  .tdc-slide-cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(45,85,71,0.10);
    color: var(--tdc-green);
    font-weight: 900;
  }
  
  /* nicer scrollbar */
  .tdc-slider::-webkit-scrollbar{ height: 10px; }
  .tdc-slider::-webkit-scrollbar-thumb{
    background: rgba(15,23,42,0.10);
    border-radius: 999px;
  }
  
  /* Desktop shows more at once */
  @media (min-width: 992px){
    .tdc-slide{ flex-basis: 72%; max-width: 72%; }
  }
  }


  /* Make the demo+reactions card not go mega-wide */
.tdc-video-stack{
  max-width: 820px;
  margin: 0 auto;
}

/* If your tdc-media-grid is 2 columns, force it to 1 column for this section */
.tdc-media-grid{
  display: grid;
  grid-template-columns: 1fr; /* important */
  gap: 24px;
}

/* Keep iframe a reasonable size */
.tdc-video-frame{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
}

.tdc-video-frame iframe{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Reactions block under demo */
.tdc-reactions-inline{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.tdc-reactions-inline-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.tdc-reactions-inline-title{
  font-weight: 700;
  font-size: 1.05rem;
}

.tdc-reactions-inline-sub{
  font-size: .95rem;
  opacity: .8;
}

/* The 3 thumbnails */
.tdc-reactions-inline-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.tdc-reaction-tile{
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
  transform: translateY(0);
  transition: transform .2s ease, box-shadow .2s ease;
}

.tdc-reaction-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.14);
}

.tdc-reaction-tile img{
  width: 100%;
  height: 140px;          /* controls “smallness” */
  object-fit: cover;
  display: block;
}

/* Mobile: stack thumbnails */
@media (max-width: 768px){
  .tdc-video-stack{ max-width: 100%; }
  .tdc-reactions-inline-grid{ grid-template-columns: 1fr; }
  .tdc-reaction-tile img{ height: 170px; }
}

  /* ================================
   FIX: reactions overlaying iframe
   ================================ */

/* Make sure the video frame is normal flow and not a stacking container for the reactions */
.tdc-video-frame{
  position: static !important;
}

/* Force the reactions block to live UNDER the iframe (not absolute/overlay) */
.tdc-reactions-inline{
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin-top: 16px !important;
  z-index: auto !important;
}

/* If any old styling accidentally targets these tiles as absolute */
.tdc-reaction-tile,
.tdc-reactions-inline-grid{
  position: static !important;
  transform: none !important;
}

/* ==== DEMO SECTION (final override) ==== */

/* the demo card should behave like a normal card */
.tdc-video-stack{
  max-width: 980px;
  margin: 40px auto 0;
  height: auto !important;
  padding-bottom: 22px !important;
  position: relative !important;
  overflow: visible !important;
}

/* make iframe sizing predictable */
.tdc-video-frame{
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 16px;
  overflow: hidden;
  background: #0b1220;
}

/* kill any old absolute iframe rules */
.tdc-video-frame iframe{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* reactions must never overlay */
.tdc-reactions-inline{
  position: relative !important;
  margin-top: 18px !important;
  z-index: 1 !important;
}

/* ===== Demo section spacing + reaction tile sizing tweaks ===== */

/* Space under the main demo video */
.tdc-video-frame{
  margin-bottom: 18px; /* adds space before "Real customer reactions" */
}

/* Give the reactions header a little air too */
.tdc-reactions-inline{
  margin-top: 22px;
  padding-top: 18px;
}

/* Make the 3 thumbnails taller (desktop) */
.tdc-reaction-tile img{
  height: 170px; /* was 140px */
}

/* Optional: slightly more space between the row items */
.tdc-reactions-inline-grid{
  gap: 16px;
}

/* Mobile: a bit taller as well */
@media (max-width: 768px){
  .tdc-reaction-tile img{
    height: 200px; /* was 170px */
  }
}

/* Slightly taller reaction thumbnails so text isn't clipped */
.tdc-reaction-tile img{
  height: 190px;   /* up from 170px */
}

/* Mobile gets a touch more height */
@media (max-width: 768px){
  .tdc-reaction-tile img{
    height: 215px;
  }
}
.tdc-hero-title{
  font-family: var(--tdc-serif);
  line-height: 1.02;
  margin: 0 0 18px;
  letter-spacing: -0.5px;
}

/* BIG headline line */
.tdc-hero-title-main{
  display: block;
  font-size: clamp(3.2rem, 6vw, 5.2rem);
  font-weight: 400;
  white-space: nowrap; /* forces ONE LINE */
}

/* Supporting headline line */
.tdc-hero-title-sub{
  display: block;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  margin-top: -6px;
}
.tdc-hero .container{
  max-width: 1320px; /* wider hero only */
}
/* =========================
   MOBILE HERO RE-LAYOUT
========================= */
@media (max-width: 991px){

  /* Stack + center hero content */
  .tdc-hero .row{
    flex-direction: column;
    text-align: center;
  }

  .tdc-hero-text{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 26px;
  }

  .tdc-hero-badge{
    margin-left: auto;
    margin-right: auto;
  }

  .tdc-hero-title{
    text-align: center;
  }

  .tdc-hero-subtitle{
    text-align: center;
    max-width: 90%;
  }

  .tdc-hero-actions{
    justify-content: center;
    width: 100%;
  }

  /* Make video full-width on mobile */
  .tdc-hero-video{
    max-width: 100%;
    margin-top: 10px;
  }
}
/* NAV CTA should NOT compete with hero CTA */
.tdc-btn-nav-cta{
  background: rgba(45,85,71,0.10) !important;
  color: var(--tdc-green) !important;
  border: 1px solid rgba(45,85,71,0.25) !important;
  box-shadow: none !important;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 700;
}

.tdc-btn-nav-cta:hover{
  background: rgba(45,85,71,0.16) !important;
}
/* Hero text colors on white */
.tdc-hero-title{ color: var(--tdc-ink); }
.tdc-hero-subtitle{
  color: rgba(15,23,42,0.78);
  border-left: 3px solid rgba(59, 160, 13, 0.35);
}

/* GREEN FRAME AROUND VIDEO ONLY */
.tdc-hero-video{
  border-radius: 22px;
  padding: 16px;

  background:
    radial-gradient(900px 420px at 30% 35%, rgba(74,222,128,0.28), rgba(74,222,128,0) 55%),
    radial-gradient(900px 420px at 80% 70%, rgba(36,92,52,0.38), rgba(36,92,52,0) 55%),
    linear-gradient(180deg, #0f2e24 0%, #123b2d 50%, #0f2e24 100%);

  border: 1px solid rgba(45,85,71,0.22);
  box-shadow: 0 28px 80px rgba(0,0,0,0.22);
}

/* =========================
   HERO: FORCE WHITE SECTION + GREEN VIDEO FRAME
   (override older inline styles)
========================= */

/* Whole hero area = white */
.tdc-hero{
  background: #ffffff !important;
  color: var(--tdc-ink) !important;
}

/* Fix text colors (your old CSS sets these to white) */
.tdc-hero-title{ color: var(--tdc-ink) !important; }
.tdc-hero-subtitle{
  color: #225f2b !important;
  font-size: 1.5rem;
  border-left-color: rgb(5, 88, 26) !important;
}

/* HERO BADGE (single source of truth) */
.tdc-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:12px;

  padding: 14px 18px;
  border-radius: 999px;

  font-weight: 950;
  font-size: 0.95rem;

  background: #225f2b;
  color: #ffffff;

  text-transform: uppercase;
  letter-spacing: 0.05em;

  border: 0; /* kills the gray outline */
  box-shadow: 0 12px 22px rgba(0,0,0,0.14);
}

.tdc-hero-badge i{
  font-size: 1.05rem;
  opacity: 0.95;
}
/* =========================
   HERO VIDEO – CLEAN BRIGHT GREEN BORDER
========================= */

.tdc-hero--stack .tdc-hero-video{
  position: relative;
  border-radius: 28px;
  padding: 6px;

  /* THIS is the visible border color */
  background: #2ee889 !important;  /* bright modern green */

  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Kill ALL glow / pseudo effects */
.tdc-hero--stack .tdc-hero-video::before,
.tdc-hero--stack .tdc-hero-video::after{
  display: none !important;
}

/* Inner video frame */
.tdc-hero--stack .tdc-hero-video-frame{
  background: #0b1220 !important;
  border-radius: 22px;
  overflow: hidden;
  border: 0 !important;
}
/* ===== HERO STACK OVERRIDES (wins over old hero rules) ===== */
.tdc-hero--stack .tdc-hero-subtitle{
  color: rgba(41, 44, 50, 0.82) !important;   /* or whatever color you want */
  font-size: clamp(1.95rem, 3.2vw, 2.45rem) !important;
  border-left: 0 !important;
  padding-left: 0 !important;
}