/* =========================================================
       0. BASE RESETS & OVERFLOW PREVENTION
    ========================================================= */
    html { overflow-x: hidden; }
    body { overflow-x: hidden; width: 100%; }
    img { max-width: 100% !important; height: auto !important; }

    /* =========================================================
       1. SECTION PADDING SYSTEM
       Desktop: 96-110px | Tablet: 64-80px | Mobile: 48-56px
    ========================================================= */
    main > section {
      padding-top: clamp(3rem, 8vw, 7rem);
      padding-bottom: clamp(3rem, 8vw, 7rem);
      padding-left: clamp(1.125rem, 4vw, 4rem);
      padding-right: clamp(1.125rem, 4vw, 4rem);
    }

    /* =========================================================
       2. TYPOGRAPHY – CLAMP SCALING
    ========================================================= */
    /* H1 Hero headline */
    main section h1 {
      font-size: clamp(2.1rem, 5vw, 3.4rem) !important;
      line-height: 1.14 !important;
    }
    /* H2 Section headings */
    main section h2 {
      font-size: clamp(1.7rem, 4vw, 2.65rem) !important;
      line-height: 1.22 !important;
    }
    /* H3 sub-headings */
    main section h3 {
      font-size: clamp(1.25rem, 2.5vw, 1.65rem) !important;
      line-height: 1.3 !important;
    }
    /* Body copy */
    main section p {
      font-size: clamp(0.9rem, 1.8vw, 1.0625rem) !important;
      line-height: 1.7 !important;
    }
    /* Badge / label text — don't override */
    main section span { line-height: inherit; }

    /* =========================================================
       3. CONTAINER MAX-WIDTH & CENTERING
    ========================================================= */
    /* All inner wrapper divs with max-w classes inside sections */
    main section .max-w-screen-2xl,
    main section .max-w-7xl,
    main section .max-w-6xl,
    main section .max-w-5xl {
      max-width: 1200px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      width: 100% !important;
    }

    /* =========================================================
       4. HERO SECTION – TWO-COLUMN → STACK ON MOBILE
    ========================================================= */
    /* The hero uses flex-col lg:flex-row — good, but we add gap and ensure stack */
    main > section:first-child {
      display: flex !important;
      flex-direction: column !important;
      gap: 2.5rem !important;
    }
    @media (min-width: 1024px) {
      main > section:first-child {
        flex-direction: row !important;
        align-items: center !important;
        gap: 4rem !important;
      }
      main > section:first-child > .flex-1:last-child {
        flex: 0 0 48% !important;
        max-width: 48% !important;
      }
    }
    /* Hero text col */
    main > section:first-child > .flex-1:first-child {
      width: 100% !important;
      text-align: center;
    }
    @media (min-width: 1024px) {
      main > section:first-child > .flex-1:first-child {
        text-align: left;
        flex: 0 0 52% !important;
        max-width: 52% !important;
      }
    }

    /* Hero mini feature cards grid — 2 col mobile, 3 col ≥640px */
    .grid.grid-cols-2.sm\:grid-cols-3 {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 0.75rem !important;
    }
    @media (min-width: 640px) {
      .grid.grid-cols-2.sm\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
      }
    }

    /* Hero CTA buttons — full width on mobile, auto on sm+ */
    main > section:first-child .flex-col.sm\:flex-row {
      flex-direction: column !important;
      gap: 0.875rem !important;
      align-items: stretch !important;
    }
    @media (min-width: 640px) {
      main > section:first-child .flex-col.sm\:flex-row {
        flex-direction: row !important;
        align-items: center !important;
      }
    }
    main > section:first-child a[class*="btn-shine"],
    main > section:first-child a[href="live-demo.html"],
    main > section:first-child a[href="resources.html"] {
      text-align: center !important;
      justify-content: center !important;
    }

    /* Hero floating badges — only visible ≥1280px (xl) */
    @media (max-width: 1279px) {
      .absolute.top-\[8\%\].-left-8,
      .absolute.-top-3.right-0,
      .absolute.top-\[40\%\].-left-12,
      .absolute.bottom-\[24\%\].-right-10 {
        display: none !important;
      }
    }

    /* Hero right col — constrain height on mobile */
    main > section:first-child > .flex-1:last-child {
      width: 100% !important;
      min-height: auto !important;
      margin-top: 0 !important;
    }
    @media (max-width: 1023px) {
      main > section:first-child > .flex-1:last-child {
        min-height: 280px !important;
      }
      /* Android TV sync card on left — hide on mobile */
      .absolute.-left-6.-bottom-5 { display: none !important; }
      /* Smartphone mockup — hide on mobile */
      .absolute.-right-2.-bottom-2 { display: none !important; }
    }

    /* =========================================================
       5. TWO-COLUMN FEATURE SECTIONS (Text + Image/Mockup)
       These alternate left-right throughout the page.
       They use flex-col md:flex-row or lg:flex-row.
    ========================================================= */
    /* Any section with a two-col flex layout */
    main section > .flex.flex-col.lg\:flex-row,
    main section > .flex.flex-col.md\:flex-row,
    main section > div.flex.flex-col.lg\:flex-row,
    main section > div.flex.flex-col.md\:flex-row {
      flex-direction: column !important;
      gap: 2.5rem !important;
    }
    @media (min-width: 1024px) {
      main section > .flex.flex-col.lg\:flex-row,
      main section > div.flex.flex-col.lg\:flex-row {
        flex-direction: row !important;
        align-items: center !important;
        gap: 4rem !important;
      }
    }
    @media (min-width: 768px) {
      main section > .flex.flex-col.md\:flex-row,
      main section > div.flex.flex-col.md\:flex-row {
        flex-direction: row !important;
        align-items: center !important;
        gap: 3rem !important;
      }
    }

    /* Reversed columns (image first on desktop, text first on mobile) */
    main section > .flex.flex-col-reverse.lg\:flex-row {
      flex-direction: column !important;
      gap: 2.5rem !important;
    }
    @media (min-width: 1024px) {
      main section > .flex.flex-col-reverse.lg\:flex-row {
        flex-direction: row !important;
        align-items: center !important;
        gap: 4rem !important;
      }
    }

    /* Column halves: equal on desktop */
    main section .flex-1,
    main section .lg\:flex-1,
    main section .md\:flex-1 {
      min-width: 0;
    }

    /* Images inside feature sections */
    main section img {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      object-fit: contain !important;
    }

    /* Floating absolute badges/cards in image sections */
    @media (max-width: 1023px) {
      /* Only hide the ones that go way outside bounds */
      main section .absolute.-left-8,
      main section .absolute.-left-10,
      main section .absolute.-left-12,
      main section .absolute.-right-8,
      main section .absolute.-right-10,
      main section .absolute.-right-12 {
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
        margin: 0.5rem auto !important;
        max-width: 220px !important;
      }
    }
    @media (max-width: 767px) {
      /* On mobile hide complex floating badges to prevent clutter */
      main section .absolute[class*="animate-float"] {
        display: none !important;
      }
      main section .animate-float-slow,
      main section .animate-float-medium,
      main section .animate-float-fast {
        display: none !important;
      }
      /* Disable all heavy float animations */
      .animate-float-slow,
      .animate-float-medium,
      .animate-float-fast,
      .animate-float-1,
      .animate-float-2,
      .animate-float-3,
      .animate-float-4 {
        animation: none !important;
      }
    }

    /* =========================================================
       6. CARD GRIDS
       3-4 columns desktop → 2 tablet → 1 mobile
    ========================================================= */
    /* 3-column grids */
    main section .grid.lg\:grid-cols-3,
    main section .grid.md\:grid-cols-3 {
      grid-template-columns: 1fr !important;
      gap: 1.25rem !important;
    }
    @media (min-width: 640px) {
      main section .grid.lg\:grid-cols-3,
      main section .grid.md\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
      }
    }
    @media (min-width: 1024px) {
      main section .grid.lg\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
      }
    }
    @media (min-width: 768px) {
      main section .grid.md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
      }
    }

    /* 4-column grids */
    main section .grid.lg\:grid-cols-4,
    main section .grid.md\:grid-cols-4 {
      grid-template-columns: 1fr !important;
      gap: 1.25rem !important;
    }
    @media (min-width: 640px) {
      main section .grid.lg\:grid-cols-4,
      main section .grid.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
      }
    }
    @media (min-width: 1024px) {
      main section .grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr) !important;
      }
    }
    @media (min-width: 768px) {
      main section .grid.md\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr) !important;
      }
    }

    /* 2-column grids */
    main section .grid.lg\:grid-cols-2,
    main section .grid.md\:grid-cols-2 {
      grid-template-columns: 1fr !important;
      gap: 1.25rem !important;
    }
    @media (min-width: 768px) {
      main section .grid.md\:grid-cols-2,
      main section .grid.lg\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
      }
    }

    /* Inline grid.grid-cols-2 (hero chips) — keep as 2 col */
    main section .grid.grid-cols-2:not(.sm\:grid-cols-3) {
      grid-template-columns: repeat(2, 1fr) !important;
    }

    /* =========================================================
       7. CARD INTERNALS
    ========================================================= */
    main section .rounded-2xl,
    main section .rounded-3xl,
    main section .rounded-xl {
      overflow: hidden;
    }
    /* Card min height for consistency — only on ≥768px */
    @media (min-width: 768px) {
      main section .glass-card { min-height: 80px; }
    }

    /* =========================================================
       8. DARK SECTION FIXES
    ========================================================= */
    /* Dark navy background text contrast */
    [class*="bg-\[\#102A43\]"] p,
    [class*="bg-slate-900"] p,
    .bg-\[\#102A43\] p {
      color: rgba(255,255,255,0.85) !important;
    }
    /* Dark section inner padding fix on mobile */
    @media (max-width: 767px) {
      [class*="bg-\[\#102A43\]"],
      [class*="bg-slate-900"] {
        padding-left: 1.125rem !important;
        padding-right: 1.125rem !important;
      }
    }

    /* =========================================================
       9. BADGE & PILL LABELS
    ========================================================= */
    /* Normalize pill badge padding */
    .inline-flex.items-center.gap-2.rounded-\[14px\],
    .inline-flex.items-center.rounded-full[class*="px-"] {
      padding: 0.375rem 0.875rem !important;
      font-size: 0.6875rem !important;
      white-space: nowrap;
    }
    @media (max-width: 640px) {
      /* Pills wrap on mobile */
      .flex.flex-wrap { gap: 0.625rem !important; }
    }

    /* =========================================================
       10. FAQ SECTION
    ========================================================= */
    /* FAQ container max-width */
    main section .faq-container,
    main section [class*="max-w-3xl"]:has(.faq),
    main section [class*="max-w-4xl"]:has([role="button"]) {
      max-width: 950px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      width: 100% !important;
    }
    /* FAQ buttons accessible tap target */
    main section button[class*="flex"][class*="justify-between"],
    main section .faq-button {
      min-height: 56px !important;
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
      padding-left: 1.25rem !important;
      padding-right: 1.25rem !important;
      font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
    }
    @media (max-width: 767px) {
      main section button[class*="flex"][class*="justify-between"],
      main section .faq-button {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
      }
    }

    /* =========================================================
       11. FINAL CTA SECTION
    ========================================================= */
    main section:last-of-type .flex.flex-col,
    main section:last-of-type .flex.items-center,
    main > *:last-child .flex.flex-col {
      align-items: center;
      text-align: center;
    }
    /* CTA button group wrapping */
    @media (max-width: 640px) {
      main section .flex.flex-col.sm\:flex-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.875rem !important;
      }
      main section .flex.flex-col.sm\:flex-row a,
      main section .flex.flex-col.sm\:flex-row button {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
      }
    }

    /* =========================================================
       12. HOVER EFFECTS — DISABLE ON TOUCH DEVICES
    ========================================================= */
    @media (hover: none) {
      main section *:hover {
        transform: none !important;
        box-shadow: inherit !important;
      }
      .glass-card:hover {
        transform: none !important;
        background: rgba(255,255,255,0.7) !important;
      }
    }

    /* =========================================================
       13. MISCELLANEOUS SAFE FIXES
    ========================================================= */
    /* Prevent any element from breaking out of the viewport */
    main section * { max-width: 100%; box-sizing: border-box; }
    /* Remove any fixed widths that could overflow on small screens */
    @media (max-width: 640px) {
      main section [class*="w-\["] { width: 100% !important; max-width: 100% !important; }
      /* Exception: small icon boxes */
      main section .w-7, main section .w-8, main section .w-9,
      main section .w-10, main section .h-7, main section .h-8,
      main section .h-9, main section .h-10 {
        width: auto !important;
        max-width: none !important;
        height: auto !important;
      }
    }

    /* Image mockups (laptop/phone/TV) — safe scaling */
    @media (max-width: 767px) {
      main section .aspect-\[16\/10\],
      main section .aspect-\[9\/18\.5\] {
        aspect-ratio: auto !important;
        height: auto !important;
      }
    }

    /* Min-height fixes for device mockup on mobile */
    @media (max-width: 1023px) {
      main > section:first-child > .flex-1:last-child {
        min-height: 260px !important;
      }
    }

    /* =========================================================
       14. LAZY LOADING PERFORMANCE
    ========================================================= */
    main section img:not([loading]) { loading: lazy; }
  

        @keyframes fadeUp {
          from {
            opacity: 0;
            transform: translateY(24px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes floatSlow {

          0%,
          100% {
            transform: translateY(0) scale(1);
          }

          50% {
            transform: translateY(-12px) scale(1.02);
          }
        }

        @keyframes floatMedium {

          0%,
          100% {
            transform: translateY(0) scale(1) rotate(0deg);
          }

          50% {
            transform: translateY(-8px) scale(1.01) rotate(0.5deg);
          }
        }

        @keyframes floatFast {

          0%,
          100% {
            transform: translateY(0) rotate(0deg);
          }

          50% {
            transform: translateY(-6px) rotate(-0.5deg);
          }
        }

        @keyframes pulseGlow {

          0%,
          100% {
            opacity: 0.15;
            transform: scale(1);
          }

          50% {
            opacity: 0.3;
            transform: scale(1.05);
          }
        }

        @keyframes borderGlow {

          0%,
          100% {
            border-color: rgba(214, 40, 40, 0.15);
            box-shadow: 0 0 10px rgba(214, 40, 40, 0.05);
          }

          50% {
            border-color: rgba(214, 40, 40, 0.4);
            box-shadow: 0 0 20px rgba(214, 40, 40, 0.15);
          }
        }

        .animate-fade-up {
          animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .animate-float-slow {
          animation: floatSlow 6.5s ease-in-out infinite;
        }

        .animate-float-medium {
          animation: floatMedium 5s ease-in-out infinite;
        }

        .animate-float-fast {
          animation: floatFast 4s ease-in-out infinite;
        }

        .animate-pulse-glow {
          animation: pulseGlow 4s ease-in-out infinite;
        }

        .animate-border-glow {
          animation: borderGlow 3s ease-in-out infinite;
        }

        /* Premium button shine */
        .btn-shine {
          position: relative;
          overflow: hidden;
        }

        .btn-shine::after {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 50%;
          height: 100%;
          background: linear-gradient(to right,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, 0.4) 50%,
              rgba(255, 255, 255, 0) 100%);
          transform: skewX(-25deg);
        }

        .btn-shine:hover::after {
          animation: shineSlide 0.85s ease-in-out;
        }

        @keyframes shineSlide {
          0% {
            left: -100%;
          }

          100% {
            left: 200%;
          }
        }

        /* Glassmorphism mini-cards */
        .glass-card {
          background: rgba(255, 255, 255, 0.7);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .glass-card:hover {
          transform: translateY(-5px);
          background: #ffffff;
          box-shadow: 0 15px 30px rgba(16, 42, 67, 0.08);
        }
      

        .bg-grid-pattern-light {
          background-size: 36px 36px;
          background-image:
            linear-gradient(to right, rgba(16, 42, 67, 0.015) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(16, 42, 67, 0.015) 1px, transparent 1px);
        }

        @keyframes floatB1 {

          0%,
          100% {
            transform: translateY(0) scale(1);
          }

          50% {
            transform: translateY(-7px) scale(1.02);
          }
        }

        @keyframes floatB2 {

          0%,
          100% {
            transform: translateY(0) scale(1) rotate(0deg);
          }

          50% {
            transform: translateY(-5px) scale(1.01) rotate(0.5deg);
          }
        }

        @keyframes floatB3 {

          0%,
          100% {
            transform: translateY(0) scale(1) rotate(0deg);
          }

          50% {
            transform: translateY(-9px) scale(1.02) rotate(-0.5deg);
          }
        }

        .animate-float-b1 {
          animation: floatB1 5s ease-in-out infinite;
        }

        .animate-float-b2 {
          animation: floatB2 4.5s ease-in-out infinite;
        }

        .animate-float-b3 {
          animation: floatB3 5.5s ease-in-out infinite;
        }

        .card-premium {
          transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .card-premium:hover {
          transform: translateY(-8px);
        }

        .card-premium:hover .card-icon-container {
          transform: scale(1.08) rotate(3deg);
        }
      

        @keyframes tvGlowPulse {

          0%,
          100% {
            box-shadow: 0 15px 50px rgba(255, 214, 10, 0.12), 0 0 100px rgba(214, 90, 0, 0.08);
          }

          50% {
            box-shadow: 0 15px 70px rgba(255, 214, 10, 0.28), 0 0 140px rgba(214, 90, 0, 0.18);
          }
        }

        .tv-glow {
          animation: tvGlowPulse 5s ease-in-out infinite;
        }

        .bg-grid-pattern-tv {
          background-size: 32px 32px;
          background-image:
            linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
        }

        @keyframes floatTvB1 {

          0%,
          100% {
            transform: translateY(0) scale(1);
          }

          50% {
            transform: translateY(-6px) scale(1.02);
          }
        }

        @keyframes floatTvB2 {

          0%,
          100% {
            transform: translateY(0) scale(1) rotate(0.5deg);
          }

          50% {
            transform: translateY(-8px) scale(1.02) rotate(-0.5deg);
          }
        }

        @keyframes floatTvB3 {

          0%,
          100% {
            transform: translateY(0) scale(1);
          }

          50% {
            transform: translateY(-7px) scale(1.01);
          }
        }

        @keyframes floatTvB4 {

          0%,
          100% {
            transform: translateY(0) scale(1) rotate(-0.5deg);
          }

          50% {
            transform: translateY(-5px) scale(0.99) rotate(0.5deg);
          }
        }

        .animate-float-tvb1 {
          animation: floatTvB1 4.5s ease-in-out infinite;
        }

        .animate-float-tvb2 {
          animation: floatTvB2 5.5s ease-in-out infinite;
        }

        .animate-float-tvb3 {
          animation: floatTvB3 4s ease-in-out infinite;
        }

        .animate-float-tvb4 {
          animation: floatTvB4 5s ease-in-out infinite;
        }
      

        .bg-grid-pattern-builder {
          background-size: 32px 32px;
          background-image:
            linear-gradient(to right, rgba(16, 42, 67, 0.012) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(16, 42, 67, 0.012) 1px, transparent 1px);
        }

        @keyframes pulseDraft {

          0%,
          100% {
            background-color: rgba(214, 90, 0, 0.12);
            border-color: rgba(214, 90, 0, 0.25);
          }

          50% {
            background-color: rgba(214, 90, 0, 0.22);
            border-color: rgba(214, 90, 0, 0.45);
          }
        }

        .animate-pulse-draft {
          animation: pulseDraft 2.5s ease-in-out infinite;
        }

        @keyframes floatBadgeB1 {

          0%,
          100% {
            transform: translateY(0) scale(1) rotate(0deg);
          }

          50% {
            transform: translateY(-5px) scale(1.02) rotate(0.5deg);
          }
        }

        @keyframes floatBadgeB2 {

          0%,
          100% {
            transform: translateY(0) scale(1) rotate(0deg);
          }

          50% {
            transform: translateY(-7px) scale(1.02) rotate(-0.5deg);
          }
        }

        .animate-float-badge-b1 {
          animation: floatBadgeB1 5s ease-in-out infinite;
        }

        .animate-float-badge-b2 {
          animation: floatBadgeB2 4.5s ease-in-out infinite;
        }