/* =========================================================

   EXACTSUB

   GLOBAL STYLESHEET

\========================================================= */



/* =========================================================

   DESIGN TOKENS

\========================================================= */



:root {

    --white: #ffffff;

    --black: #000000;

    --brand-primary: #022a7b;

    --brand-primary-light: #e6eeff;

    --brand-primary-dark: #011b52;

    --brand-accent: #29ba22;

    --brand-accent-light: #e8f8e7;

    --brand-accent-dark: #1d8418;

    --gray-50: #f8f9fa;

    --gray-100: #f1f3f5;

    --gray-200: #dee2e6;

    --gray-300: #ced4da;

    --gray-400: #adb5bd;

    --gray-500: #868e96;

    --gray-600: #495057;

    --gray-700: #343a40;

    --gray-800: #212529;

    --success: #29ba22;

    --warning: #f59f00;

    --error: #e03131;

    --info: #228be6;

    --font-family:

        "Inter",

        -apple-system,

        BlinkMacSystemFont,

        "Segoe UI",

        sans-serif;

    --font-weight-regular: 400;

    --font-weight-medium: 500;

    --font-weight-semibold: 600;

    --font-weight-bold: 700;

    --text-xs: 1.2rem;

    --text-sm: 1.4rem;

    --text-base: 1.5rem;

    --text-lg: 1.7rem;

    --text-h5: 1.7rem;

    --text-h4: 2rem;

    --text-h3: 2.4rem;

    --text-h2: clamp(3rem, 4vw, 4.4rem);

    --text-h1: clamp(4rem, 6vw, 6.4rem);

    --line-height-tight: 1.15;

    --line-height-heading: 1.25;

    --line-height-body: 1.6;

    --space-1: 0.4rem;

    --space-2: 0.8rem;

    --space-3: 1.2rem;

    --space-4: 1.6rem;

    --space-5: 2rem;

    --space-6: 2.4rem;

    --space-8: 3.2rem;

    --space-10: 4rem;

    --space-12: 4.8rem;

    --space-16: 6.4rem;

    --space-20: 8rem;

    --space-24: 9.6rem;

    --container-width: 1200px;

    --container-padding: 2.4rem;

    --nav-height: 7.2rem;

    --radius-sm: 0.6rem;

    --radius-md: 1rem;

    --radius-lg: 1.6rem;

    --radius-xl: 2.4rem;

    --radius-full: 999px;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);

    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);

    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.1);

    --transition: 0.25s ease;

}



/* =========================================================

   DARK THEME

\========================================================= */



[data-theme="dark"] {

    --white: #111827;

    --black: #ffffff;

    --gray-50: #111827;

    --gray-100: #172033;

    --gray-200: #263247;

    --gray-300: #374151;

    --gray-400: #6b7280;

    --gray-500: #9ca3af;

    --gray-600: #cbd5e1;

    --gray-700: #e5e7eb;

    --gray-800: #f8fafc;

    --brand-primary-light: #102b63;

    --brand-accent-light: #123317;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);

    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);

    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4);

}



/* =========================================================

   RESET

\========================================================= */



*,

*::before,

*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    font-size: 62.5%;

    scroll-behavior: smooth;

    scroll-padding-top: var(--nav-height);

}



body {

    min-height: 100vh;

    font-family: var(--font-family);

    font-size: var(--text-base);

    font-weight: var(--font-weight-regular);

    line-height: var(--line-height-body);

    color: var(--gray-800);

    background-color: var(--white);

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    transition:

        background-color 0.25s ease,

        color 0.25s ease;

}



img {

    display: block;

    max-width: 100%;

}



button,

input,

textarea,

select {

    font: inherit;

}



button {

    cursor: pointer;

}



a {

    color: inherit;

    text-decoration: none;

}



ul,

ol {

    list-style: none;

}



h1,

h2,

h3,

h4,

h5 {

    color: var(--gray-800);

    font-weight: var(--font-weight-bold);

    line-height: var(--line-height-heading);

}



p {

    color: var(--gray-600);

}



*::selection {

    color: var(--white);

    background-color: var(--brand-primary);

}



/* =========================================================

   GLOBAL LAYOUT

\========================================================= */



.container {

    width: min(

        calc(100% - (var(--container-padding) * 2)),

        var(--container-width)

    );

    margin-inline: auto;

}



.section {

    padding-block: var(--space-24);

}



.center-action {

    display: flex;

    justify-content: center;

    margin-top: var(--space-10);

}



/* =========================================================

   GLOBAL SECTION HEADING

\========================================================= */



.section-heading {

    max-width: 720px;

    margin-inline: auto;

    margin-bottom: var(--space-12);

    text-align: center;

}



.section-label {

    display: inline-flex;

    align-items: center;

    margin-bottom: var(--space-4);

    padding: 0.6rem 1.2rem;

    border-radius: var(--radius-full);

    background-color: var(--brand-accent-light);

    color: var(--brand-accent-dark);

    font-size: var(--text-sm);

    font-weight: var(--font-weight-semibold);

}



.section-heading h2 {

    margin-bottom: var(--space-4);

    font-size: var(--text-h2);

    line-height: var(--line-height-tight);

}



.section-heading h2 span {

    color: var(--brand-accent);

}



.section-heading p {

    max-width: 620px;

    margin-inline: auto;

    font-size: var(--text-lg);

    line-height: 1.65;

}



/* =========================================================

   GLOBAL BUTTONS

\========================================================= */



.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 4.4rem;

    padding: 1.1rem 2rem;

    border: 1px solid transparent;

    border-radius: var(--radius-md);

    font-size: var(--text-base);

    font-weight: var(--font-weight-semibold);

    transition:

        transform var(--transition),

        background-color var(--transition),

        border-color var(--transition),

        color var(--transition),

        box-shadow var(--transition);

}



.btn:hover {

    transform: translateY(-2px);

}



.btn:focus-visible,

.theme-toggle:focus-visible,

.menu-toggle:focus-visible,

.faq-question:focus-visible,

.nav-dropdown-toggle:focus-visible {

    outline: 3px solid rgba(41, 186, 34, 0.35);

    outline-offset: 3px;

}



.btn-primary {

    color: var(--white);

    background-color: var(--brand-primary);

    border-color: var(--brand-primary);

    box-shadow:

        0 5px 14px rgba(2, 42, 123, 0.18);

}



.btn-primary:hover {

    background-color: var(--brand-primary-dark);

    border-color: var(--brand-primary-dark);

}



.btn-outline {

    color: var(--brand-primary);

    background-color: transparent;

    border-color: var(--brand-primary);

}



.btn-outline:hover {

    color: var(--white);

    background-color: var(--brand-primary);

}



.btn-large {

    min-height: 5rem;

    padding-inline: 2.6rem;

}





/* =========================================================



   EXACTSUB CABLE TV PAGE



\\========================================================= */







/* =========================



   PAGE



\\========================= */







.cable-page {



    overflow: hidden;



}











/* =========================



   NAVIGATION



\\========================= */







.site-header {



    position: relative;



    z-index: 1000;



    background: var(--white);



    border-bottom: 1px solid var(--gray-200);



}







.navbar {



    min-height: var(--nav-height);



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: var(--space-6);



}







.brand {



    display: inline-flex;



    align-items: center;



    gap: 0.9rem;



    flex-shrink: 0;



}







.brand-logo {



    width: 3.8rem;



    height: 3.8rem;



    object-fit: contain;



}







#img-nav, #img-footer{



    width: 150px;



}







.brand-name {



    font-size: 2rem;



    font-weight: var(--font-weight-bold);



    color: var(--brand-primary);



}







.nav-menu {



    display: flex;



    align-items: center;



    gap: 3rem;



}







.nav-links {



    display: flex;



    align-items: center;



    gap: 2.4rem;



}







.nav-links > li {



    position: relative;



}







.nav-links a,



.nav-dropdown-toggle {



    border: 0;



    background: none;



    color: var(--gray-700);



    font-size: var(--text-sm);



    font-weight: var(--font-weight-medium);



    cursor: pointer;



    transition: color var(--transition);



}







.nav-links a:hover,



.nav-dropdown-toggle:hover,



.nav-links a.active {



    color: var(--brand-primary);



}







.nav-dropdown-toggle {



    display: flex;



    align-items: center;



    gap: 0.5rem;



}







.nav-dropdown-menu {



    position: absolute;



    top: calc(100% + 1.5rem);



    left: -1.5rem;



    width: 21rem;



    padding: 1rem;



    background: var(--white);



    border: 1px solid var(--gray-200);



    border-radius: var(--radius-md);



    box-shadow: var(--shadow-lg);



    opacity: 0;



    visibility: hidden;



    transform: translateY(8px);



    transition: var(--transition);



}







.nav-dropdown:hover .nav-dropdown-menu,



.nav-dropdown.open .nav-dropdown-menu {



    opacity: 1;



    visibility: visible;



    transform: translateY(0);



}







.nav-dropdown-menu li a {



    display: block;



    padding: 1rem 1.2rem;



    border-radius: var(--radius-sm);



}







.nav-dropdown-menu li a:hover {



    background: var(--gray-100);



}







.nav-actions {



    display: flex;



    align-items: center;



    gap: 1rem;



}







.theme-toggle {



    width: 4.2rem;



    height: 4.2rem;



    display: grid;



    place-items: center;



    border: 1px solid var(--gray-300);



    border-radius: var(--radius-full);



    background: transparent;



    color: var(--gray-700);



    transition: var(--transition);



}







.theme-toggle:hover {



    border-color: var(--brand-primary);



    color: var(--brand-primary);



}







.theme-icon {



    font-size: 1.9rem;



}







.menu-toggle {



    display: none;



    width: 4.4rem;



    height: 4.4rem;



    padding: 0.8rem;



    border: 1px solid var(--gray-300);



    border-radius: var(--radius-md);



    background: transparent;



}







.menu-toggle span {



    display: block;



    width: 100%;



    height: 2px;



    margin: 0.5rem 0;



    background: var(--gray-700);



    transition: var(--transition);



}











/* =========================



   HERO



\\========================= */







.cable-hero {



    position: relative;



    min-height: calc(100vh - var(--nav-height));



    display: flex;



    align-items: center;



    padding-block: 7rem;



    background:



        radial-gradient(



            circle at 80% 40%,



            var(--brand-primary-light),



            transparent 35%



        ),



        var(--white);



}







.cable-hero-grid {



    display: grid;



    grid-template-columns: 1.05fr 0.95fr;



    align-items: center;



    gap: 6rem;



}







.cable-hero-content {



    max-width: 65rem;



}







.cable-hero-content h1 {



    margin-bottom: 2rem;



    font-size: clamp(4rem, 5vw, 6.5rem);



    line-height: 1.06;



    letter-spacing: -0.04em;



}







.cable-hero-content h1 span {



    color: var(--brand-accent);



}







.cable-hero-content > p {



    max-width: 62rem;



    margin-bottom: 3rem;



    font-size: 1.8rem;



    line-height: 1.75;



}







.hero-actions {



    display: flex;



    flex-wrap: wrap;



    gap: 1.2rem;



}







.hero-trust {



    display: flex;



    flex-wrap: wrap;



    gap: 2rem;



    margin-top: 3rem;



}







.trust-item {



    display: flex;



    align-items: center;



    gap: 0.7rem;



    color: var(--gray-600);



    font-size: var(--text-sm);



}







.trust-icon {



    width: 2.2rem;



    height: 2.2rem;



    display: grid;



    place-items: center;



    border-radius: 50%;



    color: var(--white);



    background: var(--brand-accent);



    font-size: 1.2rem;



    font-weight: var(--font-weight-bold);



}











/* =========================



   HERO VISUAL



\\========================= */







.cable-hero-visual {



    position: relative;



    min-height: 47rem;



    display: flex;



    align-items: center;



    justify-content: center;



}







.hero-glow {



    position: absolute;



    width: 38rem;



    height: 38rem;



    border-radius: 50%;



    background: var(--brand-primary-light);



    filter: blur(10px);



}







.tv-card {



    position: relative;



    z-index: 2;



    width: min(100%, 45rem);



}







.tv-screen {



    position: relative;



    aspect-ratio: 16 / 10;



    overflow: hidden;



    padding: 2rem;



    border: 0.9rem solid var(--gray-800);



    border-radius: 2rem;



    background:



        linear-gradient(



            135deg,



            var(--brand-primary),



            var(--brand-primary-dark)



        );



    box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.2);



}







.screen-top {



    display: flex;



    align-items: center;



    gap: 0.7rem;



    color: rgba(255,255,255,0.75);



    font-size: 1.1rem;



    letter-spacing: 0.1em;



    font-weight: var(--font-weight-semibold);



}







.live-dot {



    width: 0.8rem;



    height: 0.8rem;



    border-radius: 50%;



    background: var(--brand-accent);



    box-shadow: 0 0 1.2rem var(--brand-accent);



}







.screen-content {



    height: 85%;



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    gap: 1.5rem;



    text-align: center;



    color: white;



}







.screen-content strong {



    font-size: clamp(2rem, 4vw, 3.2rem);



    line-height: 1.15;



}







.play-circle {



    width: 6rem;



    height: 6rem;



    display: grid;



    place-items: center;



    border-radius: 50%;



    background: var(--brand-accent);



    color: white;



    box-shadow: 0 1rem 3rem rgba(41, 186, 34, 0.35);



}







.tv-stand {



    width: 11rem;



    height: 1.8rem;



    margin: 1.5rem auto 0;



    border-radius: 0 0 1rem 1rem;



    background: var(--gray-800);



}







.floating-card {



    position: absolute;



    z-index: 4;



    display: flex;



    align-items: center;



    gap: 1rem;



    padding: 1.3rem 1.5rem;



    border: 1px solid var(--gray-200);



    border-radius: var(--radius-md);



    background: var(--white);



    box-shadow: var(--shadow-lg);



}







.floating-card strong {



    display: block;



    color: var(--gray-800);



    font-size: 1.2rem;



}







.floating-card span {



    color: var(--gray-500);



    font-size: 1.1rem;



}







.floating-card-one {



    top: 6%;



    left: 0;



}







.floating-card-two {



    right: 0;



    bottom: 9%;



    flex-direction: column;



    align-items: flex-start;



}







.floating-icon {



    width: 3.2rem;



    height: 3.2rem;



    display: grid;



    place-items: center;



    border-radius: 50%;



    color: white;



    background: var(--brand-accent);



}







.mini-label {



    color: var(--brand-accent) !important;



    font-size: 0.9rem !important;



    font-weight: var(--font-weight-bold);



}











/* =========================



   PROVIDERS



\\========================= */







.providers-section {



    background: var(--gray-50);



}







.provider-tabs {



    max-width: 80rem;



    margin: auto;



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    gap: 1.5rem;



}







.provider-tab {



    min-height: 12rem;



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    gap: 1.2rem;



    border: 2px solid var(--gray-200);



    border-radius: var(--radius-lg);



    background: var(--white);



    color: var(--gray-700);



    font-size: 1.6rem;



    font-weight: var(--font-weight-semibold);



    transition: var(--transition);



}







.provider-tab:hover {



    transform: translateY(-4px);



    border-color: var(--brand-primary);



    box-shadow: var(--shadow-md);



}







.provider-tab.active {



    border-color: var(--brand-primary);



    background: var(--brand-primary-light);



    color: var(--brand-primary);



    box-shadow: 0 1rem 2.5rem rgba(2, 42, 123, 0.1);



}







.provider-logo {



    width: 6.2rem;



    height: 4.2rem;



    display: grid;



    place-items: center;



    border-radius: var(--radius-md);



    color: white;



    font-size: 1.4rem;



    font-weight: var(--font-weight-bold);



}







.provider-dstv {



    background: #0067b1;



}







.provider-gotv {



    background: #0b7c36;



}







.provider-startimes {



    background: #e8a500;



}











/* =========================



   SUBSCRIPTION



\\========================= */







.subscription-section {



    background: var(--white);



}







.subscription-layout {



    display: grid;



    grid-template-columns: 0.8fr 1.2fr;



    gap: 4rem;



    align-items: start;



}







.subscription-form-card {



    position: sticky;



    top: 2rem;



    padding: 2.5rem;



    border: 1px solid var(--gray-200);



    border-radius: var(--radius-xl);



    background: var(--white);



    box-shadow: var(--shadow-md);



}







.form-card-header {



    display: flex;



    align-items: flex-start;



    justify-content: space-between;



    gap: 1rem;



    margin-bottom: 2.5rem;



}







.form-step,



.packages-label {



    display: block;



    margin-bottom: 0.5rem;



    color: var(--brand-accent);



    font-size: 1rem;



    font-weight: var(--font-weight-bold);



    letter-spacing: 0.1em;



}







.form-card-header h3 {



    font-size: 2.1rem;



}







.selected-provider {



    padding: 0.7rem 1rem;



    border-radius: var(--radius-full);



    color: var(--brand-primary);



    background: var(--brand-primary-light);



    font-size: 1.2rem;



    font-weight: var(--font-weight-bold);



}







.form-group {



    margin-bottom: 2rem;



}







.form-group label {



    display: block;



    margin-bottom: 0.8rem;



    color: var(--gray-700);



    font-size: var(--text-sm);



    font-weight: var(--font-weight-semibold);



}







.input-wrapper {



    position: relative;



}







.input-icon {



    position: absolute;



    top: 50%;



    left: 1.4rem;



    transform: translateY(-50%);



    color: var(--gray-500);



    font-weight: bold;



}







.input-wrapper input,



.form-group select {



    width: 100%;



    min-height: 5rem;



    padding: 1.2rem 1.4rem 1.2rem 4rem;



    border: 1px solid var(--gray-300);



    border-radius: var(--radius-md);



    outline: none;



    background: var(--white);



    color: var(--gray-800);



    transition: var(--transition);



}







.form-group select {



    padding-left: 1.4rem;



}







.input-wrapper input:focus,



.form-group select:focus {



    border-color: var(--brand-primary);



    box-shadow: 0 0 0 3px rgba(2, 42, 123, 0.1);



}







.input-hint {



    display: block;



    margin-top: 0.7rem;



    color: var(--gray-500);



    font-size: 1.2rem;



}







.form-error {



    display: block;



    min-height: 1.8rem;



    margin-top: 0.4rem;



    color: var(--error);



    font-size: 1.2rem;



}







.selected-package {



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 1rem;



    margin: 2rem 0;



    padding: 1.5rem;



    border-radius: var(--radius-md);



    background: var(--gray-50);



}







.selected-package span {



    display: block;



    margin-bottom: 0.3rem;



    color: var(--gray-500);



    font-size: 1.1rem;



}







.selected-package strong {



    color: var(--gray-800);



    font-size: 1.5rem;



}







.selected-package > strong {



    color: var(--brand-primary);



    font-size: 1.8rem;



}







.submit-btn {



    width: 100%;



}







.secure-note {



    margin-top: 1.2rem;



    text-align: center;



    font-size: 1.2rem;



    color: var(--gray-500);



}











/* =========================



   PACKAGES



\\========================= */







.packages-header {



    display: flex;



    align-items: flex-end;



    justify-content: space-between;



    gap: 1rem;



    margin-bottom: 2rem;



}







.packages-header h3 {



    font-size: 2.4rem;



}







.package-count {



    color: var(--gray-500);



    font-size: 1.2rem;



}







.package-grid {



    display: grid;



    grid-template-columns: repeat(2, 1fr);



    gap: 1.5rem;



}







.package-card {



    position: relative;



    padding: 2rem;



    border: 1px solid var(--gray-200);



    border-radius: var(--radius-lg);



    background: var(--white);



    cursor: pointer;



    transition:



        transform var(--transition),



        border-color var(--transition),



        box-shadow var(--transition);



}







.package-card:hover {



    transform: translateY(-4px);



    border-color: var(--brand-primary);



    box-shadow: var(--shadow-md);



}







.package-card.selected {



    border-color: var(--brand-accent);



    box-shadow: 0 0 0 2px rgba(41, 186, 34, 0.15);



}







.package-card.popular::before {



    content: "POPULAR";



    position: absolute;



    top: 1.2rem;



    right: 1.2rem;



    padding: 0.4rem 0.7rem;



    border-radius: var(--radius-full);



    color: white;



    background: var(--brand-accent);



    font-size: 0.85rem;



    font-weight: var(--font-weight-bold);



}







.package-card h4 {



    margin-bottom: 0.5rem;



    padding-right: 6rem;



    font-size: 1.7rem;



}







.package-duration {



    display: block;



    margin-bottom: 1.5rem;



    color: var(--gray-500);



    font-size: 1.2rem;



}







.package-price {



    color: var(--brand-primary);



    font-size: 2.2rem;



    font-weight: var(--font-weight-bold);



}







.package-select {



    margin-top: 1.5rem;



    color: var(--brand-primary);



    font-size: 1.2rem;



    font-weight: var(--font-weight-semibold);



}











/* =========================



   BENEFITS



\\========================= */







.benefits-section {



    background: var(--gray-50);



}







.benefits-grid {



    display: grid;



    grid-template-columns: repeat(4, 1fr);



    gap: 1.5rem;



}







.benefit-card {



    padding: 2.5rem 2rem;



    border: 1px solid var(--gray-200);



    border-radius: var(--radius-lg);



    background: var(--white);



    transition: var(--transition);



}







.benefit-card:hover {



    transform: translateY(-6px);



    box-shadow: var(--shadow-md);



}







.benefit-icon {



    width: 5rem;



    height: 5rem;



    display: grid;



    place-items: center;



    margin-bottom: 2rem;



    border-radius: var(--radius-md);



    background: var(--brand-primary-light);



    font-size: 2.2rem;



}







.benefit-card h3 {



    margin-bottom: 0.8rem;



    font-size: 1.7rem;



}







.benefit-card p {



    font-size: 1.35rem;



    line-height: 1.65;



}











/* =========================



   HOW IT WORKS



\\========================= */







.steps-grid {



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    gap: 2rem;



}







.step-card {



    position: relative;



    padding: 3rem 2.5rem;



    border: 1px solid var(--gray-200);



    border-radius: var(--radius-lg);



    background: var(--white);



    overflow: hidden;



}







.step-number {



    position: absolute;



    top: 1.5rem;



    right: 2rem;



    color: var(--brand-primary-light);



    font-size: 4.5rem;



    line-height: 1;



    font-weight: var(--font-weight-bold);



}







.step-icon {



    width: 5.5rem;



    height: 5.5rem;



    display: grid;



    place-items: center;



    margin-bottom: 2rem;



    border-radius: 50%;



    background: var(--brand-accent-light);



    font-size: 2.3rem;



}







.step-card h3 {



    margin-bottom: 1rem;



    font-size: 1.9rem;



}







.step-card p {



    font-size: 1.4rem;



}











/* =========================



   CTA



\\========================= */







.cable-cta {



    background: var(--gray-50);



}







.cta-card {



    position: relative;



    min-height: 35rem;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 3rem;



    padding: 5rem;



    overflow: hidden;



    border-radius: var(--radius-xl);



    background: var(--brand-primary);



}







.cta-content {



    position: relative;



    z-index: 3;



    max-width: 65rem;



}







.cta-content h2 {



    margin-bottom: 1.5rem;



    color: white;



    font-size: clamp(3rem, 4vw, 4.6rem);



}







.cta-content h2 span {



    color: var(--brand-accent);



}







.cta-content p {



    max-width: 55rem;



    margin-bottom: 2.5rem;



    color: rgba(255,255,255,0.75);



    font-size: 1.6rem;



}







.cta-decoration {



    position: relative;



    width: 30rem;



    height: 25rem;



    flex-shrink: 0;



}







.cta-circle {



    position: absolute;



    border-radius: 50%;



    border: 1px solid rgba(255,255,255,0.15);



}







.circle-one {



    width: 30rem;



    height: 30rem;



    top: -5rem;



    right: -5rem;



}







.circle-two {



    width: 20rem;



    height: 20rem;



    top: 0;



    right: 0;



}







.circle-three {



    width: 12rem;



    height: 12rem;



    top: 4rem;



    right: 4rem;



}







.cta-tv {



    position: absolute;



    top: 8rem;



    right: 8rem;



    font-size: 6rem;



}











/* =========================



   FAQ



\\========================= */







.faq-list {



    max-width: 85rem;



    margin-inline: auto;



}







.faq-item {



    margin-bottom: 1rem;



    overflow: hidden;



    border: 1px solid var(--gray-200);



    border-radius: var(--radius-md);



    background: var(--white);



}







.faq-question {



    width: 100%;



    min-height: 6.5rem;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 2rem;



    padding: 1.5rem 2rem;



    border: 0;



    background: transparent;



    color: var(--gray-800);



    text-align: left;



    font-size: 1.5rem;



    font-weight: var(--font-weight-semibold);



}







.faq-plus {



    font-size: 2.2rem;



    color: var(--brand-primary);



    transition: transform var(--transition);



}







.faq-question[aria-expanded="true"] .faq-plus {



    transform: rotate(45deg);



}







.faq-answer {



    max-height: 0;



    overflow: hidden;



    transition: max-height 0.35s ease;



}







.faq-answer p {



    padding: 0 2rem 2rem;



    font-size: 1.4rem;



}











/* =========================



   FOOTER



\\========================= */







.footer {



    padding-top: 7rem;



    background: var(--gray-50);



    border-top: 1px solid var(--gray-200);



}







.footer-grid {



    display: grid;



    grid-template-columns: 1.7fr repeat(4, 1fr);



    gap: 4rem;



}







.footer-brand p {



    max-width: 32rem;



    margin: 1.5rem 0 2rem;



    font-size: 1.35rem;



}







.footer-download svg {



    width: 1.8rem;



    height: 1.8rem;



    fill: currentColor;



}







.footer-column h4 {



    margin-bottom: 1.5rem;



    font-size: 1.5rem;



}







.footer-column li {



    margin-bottom: 1rem;



}







.footer-column a {



    color: var(--gray-600);



    font-size: 1.3rem;



    transition: color var(--transition);



}







.footer-column a:hover {



    color: var(--brand-primary);



}







.footer-bottom {



    margin-top: 5rem;



}







.footer-line {



    height: 1px;



    background: var(--gray-200);



}







.footer-bottom-content {



    min-height: 9rem;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 2rem;



}







.footer-bottom-content a,



.footer-bottom-content p {



    font-size: 1.2rem;



}







.footer-bottom-content img {



    width: 3.5rem;







}











/* =========================



   TOAST



\\========================= */







.toast {



    position: fixed;



    z-index: 5000;



    right: 2rem;



    bottom: 2rem;



    max-width: 35rem;



    display: flex;



    align-items: center;



    gap: 1rem;



    padding: 1.3rem 1.5rem;



    border-radius: var(--radius-md);



    color: white;



    background: var(--gray-800);



    box-shadow: var(--shadow-lg);



    transform: translateY(150%);



    opacity: 0;



    pointer-events: none;



    transition: var(--transition);



}







.toast.show {



    transform: translateY(0);



    opacity: 1;



}







.toast-icon {



    width: 2.5rem;



    height: 2.5rem;



    display: grid;



    place-items: center;



    border-radius: 50%;



    background: var(--brand-accent);



}











/* =========================



   SCROLL REVEAL



\\========================= */







.reveal {



    opacity: 0;



    transform: translateY(35px);



    transition:



        opacity 0.7s ease,



        transform 0.7s ease;



}







.reveal[data-reveal="left"] {



    transform: translateX(-45px);



}







.reveal[data-reveal="right"] {



    transform: translateX(45px);



}







.reveal.revealed {



    opacity: 1;



    transform: translate(0);



}











/* =========================



   DARK MODE



\\========================= */







[data-theme="dark"] .cable-hero {



    background:



        radial-gradient(



            circle at 80% 40%,



            var(--brand-primary-light),



            transparent 35%



        ),



        var(--white);



}







[data-theme="dark"] .tv-screen {



    border-color: #030712;



}







[data-theme="dark"] .provider-tab.active {



    background: var(--brand-primary-light);



}







[data-theme="dark"] .package-card.selected {



    background: var(--gray-100);



}







[data-theme="dark"] .cta-card {



    background: #061d4f;



}











/* =========================



   RESPONSIVE



\\========================= */







@media (max-width: 1050px) {







    .nav-menu {



        gap: 1.5rem;



    }







    .nav-links {



        gap: 1.4rem;



    }







    .cable-hero-grid {



        gap: 3rem;



    }







    .subscription-layout {



        grid-template-columns: 1fr;



    }







    .subscription-form-card {



        position: static;



    }







    .benefits-grid {



        grid-template-columns: repeat(2, 1fr);



    }







    .footer-grid {



        grid-template-columns: 1.5fr repeat(2, 1fr);



    }







}











@media (max-width: 800px) {







    .menu-toggle {



        display: block;



    }







    .nav-menu {



        position: absolute;



        top: var(--nav-height);



        left: 0;



        width: 100%;



        display: none;



        padding: 2rem;



        border-top: 1px solid var(--gray-200);



        background: var(--white);



        box-shadow: var(--shadow-md);



    }







    .nav-menu.open {



        display: block;



    }







    .nav-links {



        flex-direction: column;



        align-items: stretch;



        gap: 0;



    }







    .nav-links > li > a,



    .nav-dropdown-toggle {



        width: 100%;



        display: flex;



        justify-content: space-between;



        padding: 1.4rem 0;



    }







    .nav-dropdown-menu {



        position: static;



        width: 100%;



        display: none;



        opacity: 1;



        visibility: visible;



        transform: none;



        box-shadow: none;



        border: 0;



        padding: 0;



    }







    .nav-dropdown.open .nav-dropdown-menu {



        display: block;



    }







    .nav-actions {



        margin-top: 1.5rem;



        padding-top: 1.5rem;



        border-top: 1px solid var(--gray-200);



        flex-wrap: wrap;



    }







    .cable-hero {



        min-height: auto;



        padding-block: 6rem;



    }







    .cable-hero-grid {



        grid-template-columns: 1fr;



    }







    .cable-hero-content {



        text-align: center;



        margin-inline: auto;



    }







    .cable-hero-content > p {



        margin-inline: auto;



    }







    .hero-actions,



    .hero-trust {



        justify-content: center;



    }







    .cable-hero-visual {



        min-height: 38rem;



    }







    .steps-grid {



        grid-template-columns: 1fr;



    }







    .cta-card {



        padding: 4rem 3rem;



    }







    .cta-decoration {



        display: none;



    }







}











@media (max-width: 600px) {







    .provider-tabs {



        grid-template-columns: 1fr;



    }







    .provider-tab {



        min-height: 8rem;



        flex-direction: row;



        justify-content: flex-start;



        padding-inline: 2rem;



    }







    .package-grid {



        grid-template-columns: 1fr;



    }







    .benefits-grid {



        grid-template-columns: 1fr;



    }







    .floating-card-one {



        left: -1rem;



        top: 2rem;



    }







    .floating-card-two {



        right: -1rem;



        bottom: 2rem;



    }







    .subscription-form-card {



        padding: 2rem;



    }







    .cta-card {



        border-radius: var(--radius-lg);



    }







    .footer-grid {



        grid-template-columns: 1fr 1fr;



    }







    .footer-brand {



        grid-column: 1 / -1;



    }







    .footer-bottom-content {



        align-items: flex-start;



        padding-block: 2rem;



    }







}











@media (max-width: 420px) {







    .hero-actions {



        flex-direction: column;



    }







    .hero-actions .btn {



        width: 100%;



    }







    .hero-trust {



        flex-direction: column;



        align-items: center;



        gap: 1rem;



    }







    .cable-hero-visual {



        min-height: 31rem;



    }







    .tv-screen {



        border-width: 0.6rem;



    }







    .floating-card {



        transform: scale(0.85);



    }







    .footer-grid {



        grid-template-columns: 1fr;



    }







}











/* =========================



   PUBLIC CABLE TV SEO



\\========================= */







.cable-seo {



    background: var(--gray-50);



}







.cable-seo-content {



    max-width: 82rem;



    margin: 0 auto;



    padding: 2.5rem 3rem;



    border: 1px solid var(--gray-200);



    border-radius: var(--radius-lg);



    background: var(--white);



    box-shadow: var(--shadow-sm);



}







.cable-seo-content p + p {



    margin-top: 1.4rem;



}







.package-empty {



    grid-column: 1 / -1;



    padding: 3rem 2rem;



    border: 1px dashed var(--gray-300);



    border-radius: var(--radius-lg);



    color: var(--gray-600);



    background: var(--gray-50);



    text-align: center;



}







@media (max-width: 640px) {



    .cable-seo-content {



        padding: 2rem;



    }



}





/* =========================

   SERVICES MEGA DROPDOWN

\========================= */



.nav-dropdown {

    position: relative;

}



.nav-dropdown-toggle {

    display: inline-flex;

    align-items: center;

    gap: 0.7rem;

    padding: 0;

}



.nav-dropdown-chevron {

    display: inline-block;

    font-size: 1.5rem;

    line-height: 1;

    transform: translateY(-1px);

    transition: transform var(--transition);

}



.nav-dropdown.open .nav-dropdown-chevron {

    transform: rotate(180deg) translateY(1px);

}



.nav-dropdown-menu {

    position: absolute;

    top: calc(100% + 1.8rem);

    left: 50%;

    width: min(82rem, calc(100vw - 4.8rem));

    padding: 2rem;

    border: 1px solid rgba(2, 42, 123, 0.10);

    border-radius: 2rem;

    background: var(--white);

    box-shadow: 0 2rem 5rem rgba(2, 25, 70, 0.16);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translate(-50%, 0.8rem);

    transition:

        opacity var(--transition),

        visibility var(--transition),

        transform var(--transition);

}



.nav-dropdown-menu::before {

    content: "";

    position: absolute;

    top: -0.7rem;

    left: 50%;

    width: 1.3rem;

    height: 1.3rem;

    border-top: 1px solid rgba(2, 42, 123, 0.10);

    border-left: 1px solid rgba(2, 42, 123, 0.10);

    background: var(--white);

    transform: translateX(-50%) rotate(45deg);

}



.nav-dropdown.open .nav-dropdown-menu,

.nav-dropdown:hover .nav-dropdown-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translate(-50%, 0);

}



.services-menu-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

    padding: 0.2rem 0.4rem 1.8rem;

    border-bottom: 1px solid var(--gray-200);

}



.services-menu-eyebrow {

    display: block;

    margin-bottom: 0.4rem;

    color: var(--brand-accent);

    font-size: 0.95rem;

    font-weight: var(--font-weight-bold);

    letter-spacing: 0.12em;

}



.services-menu-head h3 {

    margin: 0;

    font-size: 1.8rem;

    line-height: 1.3;

}



.services-menu-badge {

    flex-shrink: 0;

    padding: 0.7rem 1rem;

    border: 1px solid var(--brand-accent-light);

    border-radius: var(--radius-full);

    background: var(--brand-accent-light);

    color: var(--brand-accent-dark);

    font-size: 1.1rem;

    font-weight: var(--font-weight-semibold);

}



.services-menu-grid {

    display: grid;

    grid-template-columns: 1.15fr 0.85fr 0.9fr;

    gap: 1.4rem;

    padding: 1.8rem 0;

}



.services-menu-group {

    min-width: 0;

    padding: 0 0.6rem;

}



.services-menu-group + .services-menu-group {

    border-left: 1px solid var(--gray-200);

    padding-left: 1.8rem;

}



.services-group-title {

    display: flex;

    align-items: center;

    gap: 0.8rem;

    margin-bottom: 0.8rem;

    color: var(--gray-800);

    font-size: 1.2rem;

    font-weight: var(--font-weight-bold);

}



.services-group-icon {

    width: 3rem;

    height: 3rem;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 0.9rem;

    font-size: 1.4rem;

    font-weight: var(--font-weight-bold);

}



.services-icon-data {

    background: var(--brand-primary-light);

    color: var(--brand-primary);

}



.services-icon-bills {

    background: var(--brand-accent-light);

    color: var(--brand-accent-dark);

}



.services-icon-education {

    background: #fff4df;

    color: #b56a00;

}



.services-menu-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    padding: 1rem;

    border-radius: 1rem;

    color: var(--gray-700);

    transition:

        background-color var(--transition),

        color var(--transition),

        transform var(--transition);

}



.services-menu-item:hover,

.services-menu-item.active {

    background: var(--gray-100);

    color: var(--brand-primary);

    transform: translateX(0.2rem);

}



.services-menu-item strong,

.services-menu-item small {

    display: block;

}



.services-menu-item strong {

    font-size: 1.25rem;

    line-height: 1.35;

}



.services-menu-item small {

    margin-top: 0.15rem;

    color: var(--gray-500);

    font-size: 1.05rem;

    line-height: 1.4;

}



.services-menu-item > span > *:last-child {

    flex-shrink: 0;

    color: var(--brand-primary);

    font-size: 1.4rem;

    opacity: 0;

    transform: translateX(-0.3rem);

    transition: var(--transition);

}



.services-menu-item:hover > span > *:last-child,

.services-menu-item.active > span > *:last-child {

    opacity: 1;

    transform: translateX(0);

}



.services-menu-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1.5rem;

    padding: 1.3rem 0.4rem 0.2rem;

    border-top: 1px solid var(--gray-200);

    color: var(--gray-500);

    font-size: 1.1rem;

}



.services-menu-footer a {

    color: var(--brand-primary);

    font-weight: var(--font-weight-semibold);

}



.services-menu-footer a:hover {

    color: var(--brand-accent-dark);

}



/* =========================

   SERVICES DROPDOWN THEME

\========================= */



[data-theme="dark"] .nav-dropdown-menu::before {

    border-color: var(--gray-200);

}



[data-theme="dark"] .services-menu-badge {

    background: var(--brand-accent-light);

    border-color: rgba(41, 186, 34, 0.25);

}



[data-theme="dark"] .services-icon-education {

    background: #332710;

    color: #f3b43f;

}



/* =========================

   RESPONSIVE NAVIGATION

\========================= */



@media (max-width: 980px) {

    .nav-menu {

        gap: 1.5rem;

    }



    .nav-links {

        gap: 1.5rem;

    }



    .services-menu-grid {

        grid-template-columns: 1fr 1fr;

    }



    .services-menu-group:last-child {

        grid-column: 1 / -1;

        border-left: 0;

        border-top: 1px solid var(--gray-200);

        padding-top: 1.4rem;

        padding-left: 0.6rem;

    }

}



@media (max-width: 820px) {

    .menu-toggle {

        display: block;

        position: relative;

        z-index: 1102;

    }



    .nav-menu {

        position: absolute;

        top: calc(100% + 0.1rem);

        left: 0;

        right: 0;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        max-height: calc(100vh - var(--nav-height));

        overflow-y: auto;

        padding: 1.6rem 2.4rem 2.2rem;

        border-bottom: 1px solid var(--gray-200);

        background: var(--white);

        box-shadow: var(--shadow-lg);

    }



    .nav-menu.open {

        display: flex;

    }



    .nav-links {

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0.4rem;

    }



    .nav-links > li {

        width: 100%;

    }



    .nav-links > li > a,

    .nav-dropdown-toggle {

        width: 100%;

        min-height: 4.8rem;

        justify-content: space-between;

        padding: 1.2rem 0;

        border-bottom: 1px solid var(--gray-200);

        font-size: 1.5rem;

        text-align: left;

    }



    .nav-dropdown-menu {

        position: static;

        width: 100%;

        margin: 0.8rem 0;

        padding: 1.2rem;

        border-radius: 1.5rem;

        box-shadow: none;

        transform: none;

    }



    .nav-dropdown-menu::before {

        display: none;

    }



    .nav-dropdown.open .nav-dropdown-menu {

        transform: none;

    }



    .nav-dropdown:hover .nav-dropdown-menu {

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform: none;

    }



    .nav-dropdown.open .nav-dropdown-menu {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

    }



    .services-menu-head {

        align-items: flex-start;

        flex-direction: column;

        gap: 0.8rem;

    }



    .services-menu-grid {

        grid-template-columns: 1fr;

    }



    .services-menu-group,

    .services-menu-group:last-child {

        grid-column: auto;

        padding: 0;

        border: 0;

    }



    .services-menu-group + .services-menu-group {

        padding-top: 1.2rem;

        border-top: 1px solid var(--gray-200);

    }



    .services-menu-footer {

        align-items: flex-start;

        flex-direction: column;

    }



    .nav-actions {

        width: 100%;

        flex-wrap: wrap;

        padding-top: 1.5rem;

    }



    .nav-actions .btn {

        flex: 1 1 15rem;

    }

}



@media (max-width: 560px) {

    .container {

        width: min(

            calc(100% - 3.2rem),

            var(--container-width)

        );

    }



    .nav-menu {

        padding-inline: 1.6rem;

    }



    .services-menu-grid {

        gap: 0.6rem;

    }



    .services-menu-item {

        padding: 0.9rem;

    }

}





/* =========================================================

   BREADCRUMBS

========================================================= */

.breadcrumbs {
    padding: 1.4rem 0 0;
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--gray-600);
    font-size: var(--text-sm);
}

.breadcrumb-list a {
    color: var(--brand-primary);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.breadcrumb-list a:hover { text-decoration: underline; }

.breadcrumb-list li[aria-current="page"] {
    color: var(--gray-700);
    font-weight: var(--font-weight-semibold);
}

[data-theme="dark"] .breadcrumb-list li[aria-current="page"] { color: var(--black); }

@media (max-width: 600px) {
    .breadcrumbs { padding-top: 1rem; }
}


/* =========================================================

   BACK TO TOP

\========================================================= */

.back-to-top {

    position: fixed;

    right: 2.4rem;

    bottom: 2.4rem;

    z-index: 1200;

    width: 4.8rem;

    height: 4.8rem;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--gray-300);

    border-radius: 50%;

    background: var(--brand-primary);

    color: var(--white);

    box-shadow: var(--shadow-lg);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(1.2rem);

    cursor: pointer;

    transition: opacity var(--transition), visibility var(--transition), transform var(--transition), background-color var(--transition);

}

.back-to-top.visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

.back-to-top:hover { background: var(--brand-primary-dark); transform: translateY(-2px); }

.back-to-top:focus-visible { outline: 3px solid rgba(41, 186, 34, 0.35); outline-offset: 3px; }

.back-to-top svg { width: 2rem; height: 2rem; }

[data-theme="dark"] .back-to-top { border-color: rgba(255,255,255,0.16); }

@media (max-width: 640px) { .back-to-top { right: 1.6rem; bottom: 1.6rem; width: 4.4rem; height: 4.4rem; } }

@media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity 0.01ms linear, visibility 0.01ms linear; } }