/* ============================================================
   AI TV WEBSITES — Responsive Stylesheet (responsive.css)
   Mobile:     max 767px
   Tablet:     768px – 991px
   Above Tab:  992px – 1024px
   Laptop:     1025px – 1200px
   1920px:     1921px+
   2400px:     2401px+

   NOTE: Global background is #ffffff (white).
   Black sections (header/hero/stats/HIW-steps/FAQ/footer)
   stay black via their own classes — no responsive override needed.
   ============================================================ */

/* ============================================================
   MOBILE: max-width 767px
   ============================================================ */
@media (max-width: 767px) {
    #c2cpage-hero .c2cpage-container {
    grid-template-columns: 1fr;
}
.b-cards {
    grid-template-columns: 1fr;
}
#c2cpage-ai-section .c2cpage-ai-grid {
   grid-template-columns: 1fr;
}
#c2cpage-how-it-works .c2cpage-steps-wrap {
    grid-template-columns: repeat(1, 1fr);
        gap: 20px;
}
ul#how-to-work-messagess {
    gap: 5px;
   flex-direction: column;
}
#c2cpage-app-experience .c2cpage-app-features {
   grid-template-columns: 1fr;
}
#c2cpage-app-experience .c2cpage-app-layout {
   grid-template-columns: 1fr;
}
div#b2b-footer-gridss {
        grid-template-columns: 1fr;
        padding-left: 15px;
    }
.c2cpage-ai-card-innerss {
    flex-direction: column;
}
  .container { padding: 0 16px; }
  .section   { padding: 56px 0; }

  /* Topbar */
  .topbar { display: none; }

  /* Header */
  ul#main-nav-desktopss { display: none; }
ul#mobile-nav-navigations li a {
    display: block;
    padding: 10px 24px;
    font-weight: 500;
    font-size: 18px;
    color:#fff;
}
    a#mobile-btnheaderred
 {
        margin-top: 20px;
        justify-content: center;
    }
  .header-cta  { display: none; }
  .hamburger   { display: flex; }
  .header-inner { padding: 14px 0; }
  .logo-text   { font-size: 16px; }

  /* Hero — stays black, just reflows */
  .hero        { padding: 0px 0 50px; min-height: auto; }
  .hero-grid   { grid-template-columns: 1fr; gap: 40px; }
  .hero h1     { font-size: 1.5rem; }
  .hero-sub    { font-size: 15px; }
  .hero-trust  { gap: 12px; }
  .hero-trust-sep   { display: none; }
  .hero-float-badge { bottom: -10px; left: 0; }
  .hero-float-badge2 { display: none; }
  .hero-img-wrap { height: 260px; }

  /* Stats bar — stays black */
  .stats-row { grid-template-columns: 1fr 1fr; }
  .stat-item { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .stat-item:nth-child(2n)            { border-right: none; }
  .stat-item:nth-child(3),
  .stat-item:nth-child(4)             { border-bottom: none; }

  /* Value grid — white bg, 2 col on mobile */
  .value-grid  { grid-template-columns: 1fr; gap: 14px; }
  .value-card  { padding: 22px 16px; }
  .value-icon  { width: 50px; height: 50px; font-size: 22px; }

  /* HIW steps — stays black */
  .hiw-steps-grid { grid-template-columns: 1fr; gap: 24px; }
  .hiw-steps-grid::before { display: none; }
  /* HIW brand — white */
  .hiw-grid   { grid-template-columns: 1fr; gap: 40px; }
  .hiw-visual { height: 280px; }

  /* Pricing — white */
  .pricing-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
  .pricing-roi  { flex-direction: column; gap: 16px; }
  .pricing-roi .btn { width: 100%; justify-content: center; }

  /* FAQ — stays black */
  .faq-layout  { grid-template-columns: 1fr; }
  .faq-sidebar { display: none; }

  /* CTA — stays red */
  div#cta-inner-sections {flex-direction:column;gap:10px;}
  .cta-text h2 { text-align:center;}
  .cta-inner  { flex-direction: column; gap: 28px; }
  .cta-actions { width: 100%; }
  .cta-actions .btn-group { flex-direction: column; }
  .cta-actions .btn { justify-content: center; }

  /* Footer — stays black */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 10px; }
  .footer-bottom-links { flex-direction: row; gap: 16px; }

  /* Page hero — stays black */
  .page-hero   { padding: 48px 0 36px; }
  .page-hero h1 { font-size: 2rem; }

  /* About — white sections */
  .about-intro { grid-template-columns: 1fr; gap: 40px; }
  .about-img   { height: 260px; }
  /* About stats strip — stays black, 2 col */
  .about-stats { grid-template-columns: 1fr 1fr; }
  .about-stat  { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .about-stat:nth-child(2n) { border-right: none; }
  .about-stat:nth-child(3),
  .about-stat:nth-child(4)  { border-bottom: none; }
  /* Mission / team — white */
  .mission-grid { grid-template-columns: 1fr; }
  .team-grid    { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* Demo */
  .demo-video-area { height: 260px; }
  .demo-features   { grid-template-columns: 1fr; }

  /* Blog — white */
  .blog-grid           { grid-template-columns: 1fr; }
  .blog-detail-layout  { grid-template-columns: 1fr; }
  .blog-detail-sidebar { position: static; }
  .blog-search-row     { flex-direction: column; }
  .blog-search-row input { width: 100%; }

  /* Contact — white */
  .contact-grid    { grid-template-columns: 1fr; gap: 40px; }
  .contact-form-wrap { padding: 24px; }
  .form-row        { grid-template-columns: 1fr; }

  /* Legal — stays black */
  .legal-layout  { grid-template-columns: 1fr; }
  .legal-sidebar { display: none; }
}

/* ============================================================
   TABLET: 768px to 991px
   ============================================================ */
@media (min-width: 768px) and (max-width: 991px) {
#c2cpage-ai-section .c2cpage-ai-grid {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
}
    #c2cpage-app-experience .c2cpage-app-layout {
    grid-template-columns: 1fr;
}
  .section { padding: 70px 0; }

  /* Topbar — collapse phone link */
  .topbar-left .topbar-link:first-child { display: none; }

  /* Header */
  .main-nav   { display: none; }
  .header-cta { display: none; }
  .hamburger  { display: flex; }

  /* Hero */
  .hero        { padding: 72px 0; }
  .hero-grid   { grid-template-columns: 1fr; gap: 48px; }
  .hero h1     { font-size: 3rem; }
  .hero-img-wrap { height: 340px; }
  .hero-float-badge2 { display: none; }

  /* Stats */
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3),
  .stat-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.06); }

  /* Value */
  .value-grid { grid-template-columns: 1fr 1fr; }

  /* HIW */
  .hiw-steps-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .hiw-steps-grid::before { display: none; }
  .hiw-grid   { grid-template-columns: 1fr; gap: 48px; }
  .hiw-visual { height: 360px; }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr 1fr; max-width: 100%; }
  .pricing-roi  { flex-wrap: wrap; }

  /* FAQ */
  .faq-layout  { grid-template-columns: 1fr; }
  .faq-sidebar { display: none; }

  /* CTA */
  .cta-inner { flex-direction: column; gap: 28px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* About */
  .about-intro { grid-template-columns: 1fr; gap: 48px; }
  .about-img   { height: 320px; }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .about-stat  { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .about-stat:nth-child(2n) { border-right: none; }
  .about-stat:nth-child(3),
  .about-stat:nth-child(4)  { border-bottom: none; }
  .mission-grid { grid-template-columns: 1fr 1fr; }
  .team-grid    { grid-template-columns: 1fr 1fr; }

  /* Demo */
  .demo-video-area { height: 360px; }
  .demo-features   { grid-template-columns: 1fr 1fr; }

  /* Blog */
  .blog-grid           { grid-template-columns: 1fr 1fr; }
  .blog-detail-layout  { grid-template-columns: 1fr; }
  .blog-detail-sidebar { position: static; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .form-row     { grid-template-columns: 1fr 1fr; }

  /* Legal */
  .legal-layout  { grid-template-columns: 1fr; }
  .legal-sidebar { display: none; }
}

/* ============================================================
   ABOVE TAB: 992px to 1024px
   ============================================================ */
@media (min-width: 992px) and (max-width: 1024px) {

  .container { max-width: 960px; }
  .section   { padding: 80px 0; }

  /* Header */
  .nav-link  { font-size: 13px; padding: 7px 10px; }

  /* Hero */
  .hero h1       { font-size: 3.2rem; }
  .hero-grid     { gap: 48px; }
  .hero-img-wrap { height: 380px; }

  /* Value */
  .value-grid { grid-template-columns: repeat(2, 1fr); }

  /* HIW */
  .hiw-grid   { gap: 48px; }
  .hiw-visual { height: 440px; }
  .hiw-steps-grid::before {
    left:  calc(12.5% + 10px);
    right: calc(12.5% + 10px);
  }

  /* Pricing */
  .pricing-grid { max-width: 100%; }

  /* Footer */
  .footer-grid { gap: 32px; grid-template-columns: 1.5fr 1fr 1fr 1fr; }

  /* Team */
  .team-grid { grid-template-columns: repeat(2, 1fr); }

  /* Blog detail */
  .blog-detail-layout { gap: 32px; grid-template-columns: 1fr 280px; }
}

/* ============================================================
   LAPTOP / 1200px: 1025px to 1200px
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1200px) {

  .container { max-width: 1140px; }
  .hero h1   { font-size: 3.6rem; }
  .nav-link  { font-size: 13.5px; padding: 8px 11px; }
  .value-grid { grid-template-columns: repeat(4, 1fr); }
  .hiw-steps-grid::before {
    left:  calc(12.5% + 18px);
    right: calc(12.5% + 18px);
  }
}

/* ============================================================
   1920px: 1921px and above
   ============================================================ */
@media (min-width: 1921px) {

  .container { max-width: 1400px; }
  .section   { padding: 110px 0; }
  body       { font-size: 17px; }

  /* Hero */
  .hero h1       { font-size: 5.5rem; }
  .hero-sub      { font-size: 19px; }
  .hero-img-wrap { height: 520px; }
  .hero-float-badge .num { font-size: 2.8rem; }

  /* Typography */
  .section-title { font-size: 3.6rem; }
  .stat-num      { font-size: 2.8rem; }

  /* Value */
  .value-card { padding: 40px 32px; }
  .value-icon { width: 76px; height: 76px; font-size: 34px; }

  /* HIW */
  .hiw-visual    { height: 600px; }
  .hiw-step-icon { width: 76px; height: 76px; font-size: 28px; }

  /* Pricing */
  .pricing-grid  { max-width: 900px; }
  .price-amount  { font-size: 5.5rem; }

  /* Team / Blog */
  .team-grid     { gap: 32px; }
  .blog-grid     { gap: 32px; }

  /* Footer */
  .footer-grid   { gap: 64px; }

  /* Nav */
  .nav-link      { font-size: 16px; padding: 9px 16px; }

  /* FAQ */
  .acc-trigger   { font-size: 18px; }

  /* Demo */
  .demo-video-area { height: 600px; }
}

/* ============================================================
   2400px: 2401px and above
   ============================================================ */
@media (min-width: 2401px) {

  .container { max-width: 1800px; }
  .section   { padding: 130px 0; }
  body       { font-size: 18px; }

  /* Hero */
  .hero h1       { font-size: 7rem; }
  .hero-sub      { font-size: 21px; }
  .hero-img-wrap { height: 640px; }
  .hero-float-badge .num { font-size: 3.2rem; }

  /* Typography */
  .section-title { font-size: 4.2rem; }
  .stat-num      { font-size: 3.2rem; }

  /* Value */
  .value-card { padding: 48px 36px; }
  .value-icon { width: 88px; height: 88px; font-size: 40px; }
  .value-grid { gap: 32px; }

  /* HIW */
  .hiw-visual    { height: 700px; }
  .hiw-step-icon { width: 88px; height: 88px; font-size: 34px; }
  .hiw-steps-grid { gap: 32px; }

  /* Pricing */
  .pricing-grid { max-width: 1100px; gap: 40px; }
  .price-amount { font-size: 6.5rem; }

  /* Team / Blog */
  .team-grid  { gap: 40px; }
  .blog-grid  { gap: 40px; }

  /* Footer */
  .footer-grid { gap: 80px; }

  /* Nav */
  .nav-link    { font-size: 17px; }

  /* FAQ */
  .acc-trigger { font-size: 20px; }

  /* Legal */
  .legal-content p { font-size: 16px; }

  /* Demo */
  .demo-video-area { height: 720px; }
}