@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root {
    --primary: #0fafe1;
    --primary-dark: #0fafe1;
    --secondary: #ff751f;
    --ink: #0d1b2a;
    --muted: #657386;
    --bg: #f7fafc;
    --card: #fff;
    --page-bg: #fff;
    --header-bg: rgba(255, 255, 255, .94);
    --line: #e5ebf1;
    --dark: #101b2d;
    --radius: 18px;
    --proof-bg: linear-gradient(115deg, #edfaff, #f3f7ff);
    --proof-ink: #0d1b2a;
    --proof-muted: #657386;
    --proof-line: rgba(13, 27, 42, .1);
    --proof-icon-bg: rgba(8, 169, 223, .12);
    --proof-icon-color: #087fa9;
    --proof-goal-icon-bg: rgba(255, 117, 31, .12);
    --proof-goal-icon-color: #c75b15
}

html[data-theme="dark"] {
    color-scheme: dark;
    --ink: #e8eef5;
    --muted: #aab7c5;
    --bg: #151e29;
    --card: #1c2835;
    --page-bg: #101820;
    --header-bg: rgba(16, 24, 32, .96);
    --line: #34414e;
    --dark: #070d13;
    --proof-bg: linear-gradient(115deg, #101b2d, #172b40);
    --proof-ink: #fff;
    --proof-muted: #b5c4d2;
    --proof-line: rgba(255, 255, 255, .14);
    --proof-icon-bg: rgba(8, 169, 223, .16);
    --proof-icon-color: #54d0f4;
    --proof-goal-icon-bg: rgba(255, 117, 31, .17);
    --proof-goal-icon-color: #ffad79
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: 'Google Sans', sans-serif;
    color: var(--ink);
    background: var(--page-bg);
    line-height: 1.6
}

a {
    text-decoration: none;
    color: inherit
}

.container {
    width: min(1120px, 92%);
    margin: auto
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--header-bg);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line)
}

.nav {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -.7px
}

.brand>span:last-child span {
    color: var(--primary)
}

.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary);
    color: white;
    display: grid;
    place-items: center;
    font-weight: 900
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 25px;
    font-size: 14px;
    font-weight: 650;
    color: var(--muted)
}

.nav-links a:hover {
    color: var(--primary)
}

.nav-links>a[aria-current="page"],
.more-trigger[aria-current="page"],
.more-menu a[aria-current="page"] {
    color: var(--primary)
}

.nav-links>a[aria-current="page"] {
    position: relative
}

.nav-links>a[aria-current="page"]::after {
    position: absolute;
    right: 8px;
    bottom: -12px;
    left: 8px;
    height: 2px;
    background: var(--primary);
    content: ""
}

.login-link {
    padding-left: 8px
}

.nav-cta,
.btn {
    border: 0;
    border-radius: 11px;
    padding: 12px 19px;
    font-weight: 750;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: .2s
}

.nav-more,
.mobile-more {
    position: relative
}

.more-trigger {
    border: 0;
    padding: 8px 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer
}

.more-trigger:hover,
.more-trigger[aria-expanded="true"] {
    color: var(--primary)
}

.more-menu {
    position: absolute;
    z-index: 80;
    right: 0;
    bottom: auto;
    min-width: 170px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    color: var(--ink);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16)
}

.nav-more .more-menu {
    top: calc(100% + 8px)
}

.more-menu[hidden] {
    display: none
}

.more-menu a {
    display: block;
    padding: 9px 11px;
    border-radius: 5px;
    font-size: 14px
}

.more-menu a:hover {
    background: var(--bg);
    color: var(--primary)
}

.more-menu a[aria-current="page"] {
    background: var(--bg)
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer
}

.theme-toggle-indicator {
    width: 16px;
    height: 16px;
    border: 1px solid var(--muted);
    border-radius: 50%;
    background: var(--page-bg)
}

.mobile-nav {
    display: none
}

.nav-cta,
.btn-primary {
    background: var(--primary);
    color: #fff;
    font-family: 'Google Sans', sans-serif;
    box-shadow: 0 9px 25px rgba(8, 169, 223, .2)
}

.btn-primary:hover {
    transform: translateY(-1px);
    background: var(--dark);
    color: var(--primary)
}


.btn-secondary {
    background: var(--secondary);
    color: #fff;
    box-shadow: 0 9px 25px rgba(255, 117, 31, .2)
}

.nav-cta:hover,
.btn-primary:hover {
    transform: translateY(-1px)
}

.btn-secondary:hover {
    transform: translateY(-1px);
    background: var(--dark);
    color: var(--card)
}

.btn-outline {
    border: 1px solid #d8e1e9;
    background: var(--card);
    color: var(--ink)
}

.btn-outline:hover {
    border: 1px solid #d8e1e9;
    background: var(--dark);
    color: var(--card);
    transform: translateY(-1px);
}

.btn-dark {
    background: var(--dark);
    color: #fff
}

.btn-dark:hover {
    background: var(--ink);
    color: #0fafe1;
}


.btn-light {
    background: var(--card);
    color: var(--ink)
}

.btn-full {
    width: 100%
}

.menu-toggle {
    display: none;
    border: 0;
    background: none;
    font-size: 25px
}

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(ellipse at 8% 12%, rgba(15, 175, 225, .25), transparent 44%), radial-gradient(ellipse at 88% 82%, rgba(255, 117, 31, .16), transparent 40%), linear-gradient(125deg, #eaf9ff 0%, #fff 50%, #fff6ee 100%);
    padding: 85px 0 70px
}

.hero::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image: radial-gradient(rgba(8, 132, 177, .48) 1.25px, transparent 1.65px);
    background-position: 0 0;
    background-size: 22px 22px;
    content: "";
    opacity: .62;
    pointer-events: none;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .2), #000 34%);
    --dot-glow: rgba(8, 132, 177, .7);
    animation: hero-dots-drift 32s linear infinite alternate, hero-dots-glow 6s ease-in-out infinite
}

.hero .container {
    position: relative;
    z-index: 1
}

@keyframes hero-dots-drift {
    to {
        background-position: 22px 22px
    }
}

@keyframes hero-dots-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 0 transparent);
    }

    50% {
        filter: drop-shadow(0 0 4px var(--dot-glow));
    }
}

@media(prefers-reduced-motion: reduce) {
    .hero::before {
        animation: none
    }
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center
}

.hero-copy {
    text-align: center
}

.eyebrow,
.mini-label {
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 850;
    color: var(--primary)
}

h1,
h2,
h3,
p {
    margin-top: 0
}

.hero h1 {
    font-size: clamp(44px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -3.8px;
    margin: 14px 0 22px
}

.hero h1 span {
    color: var(--primary)
}

.hero-copy>p {
    font-size: 18px;
    color: var(--muted);
    max-width: 620px;
    margin-right: auto;
    margin-left: auto
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 30px 0
}

.trust-row {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 35px
}

.trust-row div {
    display: flex;
    flex-direction: column
}

.trust-row strong {
    font-size: 15px
}

.trust-row small {
    color: var(--muted)
}

.purchase-card,
.form-card,
.summary-card,
.auth-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 20px 60px rgba(13, 27, 42, .08)
}

.purchase-card {
    padding: 27px
}

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px
}

.card-head h3 {
    font-size: 24px;
    margin: 3px 0
}

.status-dot {
    font-size: 11px;
    padding: 5px 9px;
    border-radius: 20px;
    background: #eafbf4;
    color: #1d9b63
}

.status-dot:before {
    content: "●";
    margin-right: 5px
}

label {
    display: block;
    font-size: 13px;
    font-weight: 750;
    margin: 15px 0 7px
}

input,
select,
textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--card);
    font: inherit;
    color: var(--ink);
    outline: none
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(8, 169, 223, .1)
}

.secure-note,
.demo-note {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    margin: 14px 0 0
}

.network-strip {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 38px 0 42px;
    background: linear-gradient(180deg, var(--page-bg), var(--bg))
}

.network-heading {
    margin-bottom: 22px;
    text-align: center
}

.network-heading .eyebrow {
    color: var(--primary-dark)
}

.network-heading p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 14px
}

.network-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
    align-items: stretch
}

.network-card {
    --network-accent: #0fafe1;
    --network-tint: rgba(15, 175, 225, .1);
    position: relative;
    display: flex;
    min-height: 194px;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    padding: 21px 23px 19px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--card);
    color: var(--ink);
    box-shadow: 0 10px 28px rgba(13, 27, 42, .055);
    text-decoration: none;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease
}

.network-card::after {
    position: absolute;
    right: -35px;
    bottom: -48px;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background: var(--network-tint);
    content: "";
    pointer-events: none
}

.network-card-mtn { --network-accent: #bd8d00; --network-tint: rgba(255, 204, 0, .2) }
.network-card-telecel { --network-accent: #d92e3e; --network-tint: rgba(227, 38, 53, .12) }
.network-card-at { --network-accent: #176dc1; --network-tint: rgba(30, 119, 205, .14) }

.network-card:hover, .network-card:focus-visible {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--network-accent) 42%, var(--line));
    box-shadow: 0 18px 38px rgba(13, 27, 42, .12)
}

.network-card:focus-visible { outline: 3px solid var(--network-accent); outline-offset: 3px }

.network-card-top {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px
}

.network-brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--network-accent) 18%, transparent);
    border-radius: 14px;
    background: var(--network-tint);
    color: var(--network-accent);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -.5px
}

.network-card-arrow {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
    font-size: 13px;
    transition: color .2s ease, background .2s ease, border-color .2s ease
}

.network-card:hover .network-card-arrow, .network-card:focus-visible .network-card-arrow {
    border-color: var(--network-accent);
    background: var(--network-accent);
    color: #fff
}

.network-card>strong { font-size: 19px; letter-spacing: -.35px }
.network-card-description { margin-top: 3px; color: var(--muted); font-size: 12px }
.network-card-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 16px; color: var(--network-accent); font-size: 12px; font-weight: 850 }
.network-card-cta i { transition: transform .2s ease }
.network-card:hover .network-card-cta i { transform: translateX(3px) }

.proof-stats {
    padding: 54px 0;
    background: var(--proof-bg);
    color: var(--proof-ink);
    transition: background .35s ease, color .35s ease
}

.proof-stats-inner {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(105px, .8fr));
    gap: 18px;
    align-items: center
}

.proof-intro .eyebrow { color: var(--proof-icon-color) }
.proof-intro h2 { margin: 8px 0; font-size: 27px; line-height: 1.15; letter-spacing: -1px }
.proof-intro p { max-width: 380px; margin: 0; color: var(--proof-muted); font-size: 14px }
.proof-stat { min-width: 0; min-height: 118px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-left: 1px solid var(--proof-line); text-align: center }
.proof-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; border-radius: 11px; background: var(--proof-icon-bg); color: var(--proof-icon-color) }
.proof-stat strong { font-size: 28px; line-height: 1.2; letter-spacing: -.8px }
.proof-stat>span:last-child { color: var(--proof-muted); font-size: 12px }
.proof-goal .proof-icon { background: var(--proof-goal-icon-bg); color: var(--proof-goal-icon-color) }

.reviews-section { background: var(--bg) }
.reviews-section .center-heading { margin-bottom: 34px }
.reviews-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; align-items: stretch }
.review-card { position: relative; display: flex; min-height: 260px; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 14px 38px rgba(13,27,42,.045) }
.review-rating { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #b88027 }
.rating-stars { display: inline-flex; gap: 2px; font-size: 18px; line-height: 1 }
.rating-star.full { color: #f2ad25 }
.rating-star.empty { color: #d7dfe6 }
.rating-star.half { background: linear-gradient(90deg,#f2ad25 50%,#d7dfe6 50%); -webkit-background-clip: text; background-clip: text; color: transparent }
.review-rating>strong { color: var(--ink); font-size: 13px }
.review-rating>strong small { color: var(--muted); font-size: 10px; font-weight: 500 }
.review-card blockquote { flex: 1; margin: 17px 0 22px; color: var(--ink); font-size: 16px; font-weight: 650; line-height: 1.5 }
.review-author { display: flex; align-items: center; gap: 11px; padding-top: 15px; border-top: 1px solid var(--line) }
.review-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 14px; background: linear-gradient(135deg,#e5f8fe,#f2f1ff); color: var(--primary-dark); font-size: 17px; font-weight: 850 }
.review-author>div { display: flex; flex-direction: column; line-height: 1.45 }
.review-author strong { font-size: 13px }
.review-author small { color: var(--muted); font-size: 11px }

html:not(.aos-enabled) [data-aos] { opacity: 1 !important; transform: none !important; visibility: visible !important }
@media(prefers-reduced-motion:reduce) {
    [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; visibility: visible !important }
}

.mtn {
    color: #FFCC00;
    padding: 4px 20px;
    border-radius: 10px;
    background: #FFF7D9;
}

.telecel {
    color: #e32635;
    padding: 4px 20px;
    border-radius: 10px;
    background: #FFF0F1;

}

.at {
    color: #106AC5;
    padding: 4px 20px;
    border-radius: 10px;
    background: #86b3df;
}

.section {
    padding: 90px 0
}

.soft {
    background: var(--bg)
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 35px
}

.section-heading h2,
.center-heading h2,
.feature-grid h2 {
    font-size: 38px;
    line-height: 1.12;
    letter-spacing: -1.6px;
    margin: 8px 0 0
}

.text-link {
    font-weight: 750;
    color: var(--primary)
}

.bundle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px
}

.bundle-grid.large {
    grid-template-columns: repeat(4, 1fr)
}

.bundle-filters {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--line)
}

.bundle-filter {
    flex: 0 0 auto;
    padding: 10px 2px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s, border-color .2s
}

.bundle-filter:hover,
.bundle-filter[aria-pressed="true"] {
    border-bottom-color: var(--primary);
    color: var(--primary)
}

.bundle-card {
    --bundle-accent: #0fafe1;
    --bundle-tint: rgba(15, 175, 225, .08);
    position: relative;
    display: flex;
    min-height: 260px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 21px;
    padding: 22px;
    background: var(--card);
    box-shadow: 0 12px 32px rgba(13, 27, 42, .055);
    isolation: isolate;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease
}

.bundle-card[hidden] {
    display: none !important
}

.bundle-card::before {
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    height: 4px;
    background: var(--bundle-accent);
    content: ""
}

.bundle-card::after {
    position: absolute;
    z-index: -1;
    top: 35px;
    right: -50px;
    width: 142px;
    height: 142px;
    border-radius: 50%;
    background: var(--bundle-tint);
    content: "";
    pointer-events: none
}

.bundle-card[data-network="mtn"] { --bundle-accent: #e5b500; --bundle-tint: rgba(255, 204, 0, .13) }
.bundle-card[data-network="telecel"] { --bundle-accent: #d92e3e; --bundle-tint: rgba(227, 38, 53, .09) }
.bundle-card[data-network="at"] { --bundle-accent: #176dc1; --bundle-tint: rgba(30, 119, 205, .1) }

.bundle-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--bundle-accent) 35%, var(--line));
    box-shadow: 0 20px 44px rgba(13, 27, 42, .13)
}

.bundle-card>* { position: relative; z-index: 1 }

.bundle-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 21px
}

.bundle-validity {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border-radius: 12px;
    background: #E7F8F2;
    color: #3FAF8C;
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap
}

.network-pill {
    font-size: 11px;
    font-weight: 850;
    padding: 5px 9px;
    border-radius: 20px;
    background: #f0f5f8
}

.network-pill.mtn {
    background: #fff7d9
}

.network-pill.telecel {
    background: #fff0f1
}

.network-pill.at {
    background: #fff2ec
}

.popular {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 9px;
    border: 1px solid rgba(15, 175, 225, .16);
    border-radius: 30px;
    background: rgba(15, 175, 225, .08);
    color: var(--primary-dark);
    font-weight: 850
}

.bundle-size-row { display: flex; align-items: center; justify-content: space-between; gap: 12px }

.bundle-size {
    font-size: clamp(33px, 3.5vw, 40px);
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1.05
}

.bundle-size-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--bundle-accent) 16%, transparent);
    border-radius: 14px;
    background: var(--bundle-tint);
    color: var(--bundle-accent);
    font-size: 20px
}

.bundle-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 11px 0 20px
}

.bundle-price small { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .8px; text-transform: uppercase }
.bundle-price strong { color: var(--ink); font-size: 19px; font-weight: 850; letter-spacing: -.35px }
.bundle-card>.btn { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 9px; margin-top: auto; border-radius: 13px; font-weight: 800 }
.bundle-card>.btn i { transition: transform .2s ease }
.bundle-card:hover>.btn i { transform: translateX(3px) }

.center-heading {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 45px
}

.center-heading p {
    color: var(--muted)
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}

.step {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    padding: 28px;
    border-radius: 18px
}

.step>span {
    font-size: 15px;
    font-weight: 900;
    color: var(--primary);
    background: #eefaff;
    padding: 3px 6px;
    border-radius: 5px;
}

.step-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #eefaff;
    color: var(--primary);
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 20px;
    margin: 25px 0 15px
}

.step h3 {
    margin-bottom: 7px
}

.step p {
    color: var(--muted);
    font-size: 14px
}

.feature-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 90px
}

.feature-grid>div:first-child p {
    color: var(--muted);
    max-width: 430px
}

.feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.feature-list>div {
    border-top: 1px solid var(--line);
    padding-top: 18px
}

.feature-list b {
    color: var(--primary);
    font-size: 11px
}

.feature-list h3 {
    margin: 7px 0
}

.feature-list p {
    color: var(--muted);
    font-size: 13px
}

.cta-section {
    background: var(--dark);
    color: #fff;
    padding: 65px 0
}

.cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px
}

.cta-inner h2 {
    font-size: 38px;
    letter-spacing: -1.5px;
    margin: 8px 0
}

.cta-inner p {
    color: #aeb9c8
}

.footer {
    background: #0b1422;
    color: #aab6c5;
    padding: 60px 0 20px
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px
}

.footer-brand {
    color: #fff
}

.footer-grid p {
    max-width: 300px;
    font-size: 13px
}

.footer-grid h4 {
    color: #fff;
    margin: 0 0 15px
}

.footer-grid a {
    display: block;
    font-size: 13px;
    margin: 9px 0
}

.footer-grid a:hover {
    color: #fff
}

.footer-bottom {
    border-top: 1px solid #243143;
    margin-top: 45px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 11px
}

.page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(ellipse at 92% 18%, rgba(15, 175, 225, .16), transparent 38%), radial-gradient(ellipse at 8% 100%, rgba(255, 117, 31, .24), transparent 46%), linear-gradient(115deg, #fff5ec 0%, #f7fafc 58%, #f1f9fa 100%);
    padding: 75px 0
}

.page-hero::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image: radial-gradient(rgba(15, 137, 154, .34) .9px, transparent 1.4px);
    background-position: 0 0;
    background-size: 26px 26px;
    content: "";
    opacity: .48;
    pointer-events: none;
    mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .65) 38%, transparent 88%);
    --dot-glow: rgba(15, 137, 154, .65);
    animation: page-hero-dots-drift 42s linear infinite alternate, hero-dots-glow 7s ease-in-out infinite
}

.page-hero .container {
    position: relative;
    z-index: 1
}

@keyframes page-hero-dots-drift {
    to {
        background-position: 13px 13px
    }
}

@media(prefers-reduced-motion: reduce) {
    .page-hero::before {
        animation: none
    }
}

.page-hero h1 {
    font-size: 52px;
    letter-spacing: -2.5px;
    margin: 8px 0
}

.page-hero p {
    color: var(--muted);
    max-width: 650px
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 25px
}

.form-card,
.summary-card {
    padding: 30px
}

.summary-card {
    height: max-content;
    position: sticky;
    top: 100px
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 17px 0;
    border-bottom: 1px solid var(--line)
}

.summary-row.total {
    font-size: 18px;
    border-bottom: 0
}

.summary-card p {
    font-size: 12px;
    color: var(--muted);
    margin-top: 20px
}

.network-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px
}

.radio-card {
    margin: 0
}

.radio-card input {
    display: none
}

.radio-card span {
    display: block;
    border: 1px solid var(--line);
    padding: 13px;
    text-align: center;
    border-radius: 11px;
    cursor: pointer
}

.radio-card input:checked+span {
    border-color: var(--primary);
    background: #eefaff;
    color: var(--primary);
    font-weight: 800
}

.vertical {
    display: grid;
    gap: 15px
}

.vertical .step {
    display: flex;
    gap: 30px;
    align-items: flex-start
}

.vertical .step-icon {
    display: none
}

.info-box {
    background: #f2f9fc;
    border: 1px solid #d9eef6;
    padding: 13px;
    border-radius: 11px;
    font-size: 12px;
    color: #526475;
    margin: 18px 0
}

.auth-page {
    background: var(--bg);
    min-height: 70vh;
    padding: 70px 0;
    display: grid;
    place-items: start center
}

.auth-card {
    width: min(460px, 92%);
    padding: 35px
}

.auth-card h1 {
    font-size: 34px;
    margin: 7px 0
}

.auth-card>p {
    color: var(--muted)
}

.auth-error {
    padding: 10px 12px;
    border: 1px solid #fecdca;
    border-radius: 8px;
    color: #b42318 !important;
    background: #fef3f2
}

html[data-theme="dark"] .auth-error {
    border-color: rgba(253, 162, 155, .35);
    color: #fda29b !important;
    background: rgba(217, 45, 32, .12)
}

.auth-foot {
    text-align: center;
    margin: 20px 0 0 !important;
    font-size: 13px
}

.auth-foot a {
    color: var(--primary);
    font-weight: 750
}

.auth-card .remember-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    width: fit-content;
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer
}

.auth-card .remember-option input[type="checkbox"] {
    display: inline-block;
    width: 17px !important;
    min-width: 17px;
    height: 17px;
    min-height: 17px;
    margin: 0;
    padding: 0;
    accent-color: var(--primary);
    flex: 0 0 auto
}

.auth-card .remember-option span {
    display: inline-block;
    flex: 0 1 auto;
    white-space: nowrap
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px
}

.contact-grid>div>p {
    color: var(--muted)
}

.contact-item {
    border-top: 1px solid var(--line);
    padding: 18px 0;
    display: flex;
    flex-direction: column
}

.contact-item span {
    color: var(--muted)
}

.faq {
    max-width: 850px
}

.faq details {
    border-bottom: 1px solid var(--line);
    padding: 22px 0
}

.faq summary {
    font-weight: 800;
    cursor: pointer
}

.faq p {
    color: var(--muted);
    margin: 14px 0 0
}

.legal {
    max-width: 850px
}

.legal h2 {
    margin-top: 35px
}

.legal p {
    color: var(--muted)
}

@media(max-width:850px) {
    .nav-links {
        display: none
    }

    .mobile-nav {
        position: fixed;
        z-index: 100;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        min-height: 66px;
        padding: 6px 5px max(6px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        background: var(--header-bg);
        backdrop-filter: blur(14px);
        box-shadow: none
    }

    .mobile-nav>a,
    .mobile-nav .more-trigger {
        display: flex;
        min-width: 0;
        min-height: 48px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        text-align: center;
        color: var(--muted);
        font-size: 11px;
        line-height: 1.15;
        font-weight: 700
    }

    .mobile-nav>a>i,
    .mobile-nav .more-trigger>i {
        font-size: 17px;
        line-height: 1
    }

    .mobile-nav>a>img,
    .mobile-nav .more-trigger>img,
    .mobile-nav .more-menu a>img {
        transition: filter .18s ease, transform .18s ease
    }

    .mobile-nav>a[aria-current="page"],
    .mobile-nav .more-trigger[aria-current="page"] {
        border-radius: 8px;
        background: rgba(8, 169, 223, .12);
        color: var(--primary)
    }

    .mobile-nav>a[aria-current="page"]>img,
    .mobile-nav .more-trigger[aria-current="page"]>img,
    .mobile-nav .more-menu a[aria-current="page"]>img {
        filter: invert(56%) sepia(92%) saturate(1800%) hue-rotate(157deg) brightness(96%) contrast(102%);
        transform: scale(1.1)
    }

    .mobile-nav .more-trigger {
        width: 100%;
        height: 100%;
        padding: 5px
    }

    .mobile-nav .more-menu {
        right: 0;
        bottom: calc(100% + 10px);
        min-width: 185px;
        box-shadow: none
    }

    .mobile-nav .more-menu a {
        display: flex;
        align-items: center;
        gap: 10px
    }

    .mobile-nav .more-menu a>i {
        width: 18px;
        color: var(--muted);
        text-align: center
    }

    body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom))
    }

    .theme-toggle {
        margin-left: auto
    }

    .hero-grid,
    .feature-grid,
    .checkout-grid,
    .contact-grid {
        grid-template-columns: 1fr
    }

    .hero-grid {
        gap: 40px
    }

    .bundle-grid,
    .bundle-grid.large {
        grid-template-columns: repeat(2, 1fr)
    }

    .steps {
        grid-template-columns: 1fr
    }

    .feature-grid {
        gap: 45px
    }

    .summary-card {
        position: static
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr
    }

    .cta-inner {
        flex-direction: column;
        align-items: flex-start
    }

    .network-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px
    }

    .proof-stats-inner { grid-template-columns: repeat(4, 1fr); gap: 12px }
    .proof-intro { grid-column: 1 / -1; text-align: center; margin-bottom: 8px }
    .proof-intro p { margin: auto }
    .proof-stat { min-height: 100px; border-left: 0; border-right: 1px solid var(--proof-line) }
    .proof-stat:nth-of-type(5) { border-right: 0 }
    .reviews-grid { grid-template-columns: 1fr }
    .review-card { min-height: 230px }
}

@media (max-width: 620px) {
    .network-strip { padding: 30px 0 32px }
    .network-heading { margin-bottom: 18px }
    .network-list { grid-template-columns: 1fr; gap: 11px }
    .network-card { min-height: 164px; padding: 18px 20px }
}

html[data-theme="dark"] .hero {
    background: radial-gradient(ellipse at 12% 10%, rgba(15, 175, 225, .19), transparent 42%), radial-gradient(ellipse at 88% 78%, rgba(255, 117, 31, .1), transparent 38%), linear-gradient(125deg, #142630 0%, var(--page-bg) 58%, #241f1a 100%)
}

html[data-theme="dark"] .hero::before {
    background-image: radial-gradient(rgba(111, 213, 245, .3) 1px, transparent 1.5px);
    --dot-glow: rgba(111, 213, 245, .8)
}

html[data-theme="dark"] .page-hero {
    background: radial-gradient(ellipse at 92% 18%, rgba(15, 175, 225, .18), transparent 38%), radial-gradient(ellipse at 8% 100%, rgba(255, 117, 31, .2), transparent 46%), linear-gradient(115deg, #30251f 0%, var(--bg) 58%, #172824 100%)
}

html[data-theme="dark"] .page-hero::before {
    background-image: radial-gradient(rgba(116, 216, 210, .3) .9px, transparent 1.4px);
    --dot-glow: rgba(116, 216, 210, .75)
}

html[data-theme="dark"] .mobile-nav img {
    filter: brightness(0) invert(1)
}

html[data-theme="dark"] .mobile-nav>a[aria-current="page"]>img,
html[data-theme="dark"] .mobile-nav .more-trigger[aria-current="page"]>img,
html[data-theme="dark"] .mobile-nav .more-menu a[aria-current="page"]>img {
    filter: invert(56%) sepia(92%) saturate(1800%) hue-rotate(157deg) brightness(96%) contrast(102%);
    transform: scale(1.1)
}

html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .info-box {
    border-color: var(--line);
    background: #1b2e39;
    color: #b8cbd6
}

html[data-theme="dark"] .network-pill {
    background: #293743
}

html[data-theme="dark"] .radio-card input:checked+span,
html[data-theme="dark"] .step-icon {
    background: #123642
}

@media(max-width:520px) {
    .hero {
        padding-top: 55px
    }

    .hero h1 {
        font-size: 45px;
        letter-spacing: -2.5px
    }

    .trust-row {
        gap: 15px
    }

    .bundle-grid,
    .bundle-grid.large,
    .feature-list,
    .network-options {
        grid-template-columns: 1fr
    }

    .section {
        padding: 65px 0
    }

    .section-heading {
        display: block
    }

    .section-heading .text-link {
        display: inline-block;
        margin-top: 15px
    }

    .page-hero h1 {
        font-size: 39px
    }

    .footer-grid {
        grid-template-columns: 1fr
    }

    .footer-bottom {
        display: block
    }

    .proof-stats { padding: 43px 0 }
    .proof-stats-inner { gap: 6px }
    .proof-stats-inner { grid-template-columns: repeat(2,minmax(0,1fr)) }
    .proof-stat { min-height: 94px; border: 0; border-top: 1px solid var(--proof-line) }
    .proof-stat strong { font-size: 20px }
    .proof-intro h2 { font-size: 24px }
    .proof-stat strong { font-size: 22px }
    .proof-stat>span:last-child { font-size: 10px }

    .footer-bottom span {
        display: block;
        margin: 5px 0
    }

    .hero-actions {
        flex-direction: column
    }

    .btn {
        width: 100%
    }
}

#socials {
    font-size: 20px;
    cursor: pointer;
    color: #000;
    padding: 4px 6px;
    background: #EEFAFF;
    border-radius: 10px;
    margin: 3px 3px;
}

#socials:hover {
    font-size: 20px;
    cursor: pointer;
    color: #0fafe1;
    padding: 4px 6px;
    background: var(--dark);
    border-radius: 10px;
    margin: 3px 3px;
}

.tracking-section{background:#f7fafc;min-height:60vh}
.tracking-results .error-box{padding:14px 16px;border:1px solid #f1cccc;border-radius:12px;background:#fff0f0;color:#a52c2c;font-size:14px}
.tracking-container{max-width:850px}
.tracking-card,.tracking-order-card,.tracking-empty{border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 16px 44px rgba(13,27,42,.07)}
.tracking-card{padding:clamp(22px,5vw,38px)}
.tracking-how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px}
.tracking-how-card{position:relative;overflow:hidden;min-height:235px;padding:26px;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:0 14px 38px rgba(13,27,42,.06);transition:transform .22s ease,box-shadow .22s ease}
.tracking-how-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(13,27,42,.1)}
.tracking-how-number{position:absolute;top:17px;right:20px;color:var(--line);font-size:34px;font-weight:900;letter-spacing:-2px}
.tracking-how-icon{display:grid;place-items:center;width:49px;height:49px;margin-bottom:22px;border-radius:15px;background:linear-gradient(135deg,rgba(15,175,225,.16),rgba(15,175,225,.06));color:var(--primary-dark);font-size:22px}
.tracking-how-card h3{margin:0 0 9px;font-size:17px}
.tracking-how-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}
.tracking-card h2{margin:8px 0 22px;font-size:28px;letter-spacing:-.8px}
.tracking-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:6px;border-radius:14px;background:#f0f5f8;margin-bottom:25px}
.tracking-tab{border:0;border-radius:10px;background:transparent;padding:12px 10px;color:#657386;font:inherit;font-size:14px;font-weight:750;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.tracking-tab.is-active{background:#fff;color:var(--primary-dark);box-shadow:0 3px 12px rgba(13,27,42,.09)}
.tracking-form[hidden]{display:none}
.tracking-form small{display:block;color:var(--muted);font-size:12px;margin:8px 0 20px}
.tracking-form .btn{min-height:50px}
.tracking-results{margin-top:28px;scroll-margin-top:100px}
.results-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0 0 15px}
.results-heading h2{font-size:25px;margin:6px 0 0}
.result-count{padding:7px 11px;border-radius:30px;background:#e8f7fd;color:#087fa9;font-size:12px;font-weight:800;white-space:nowrap}
.tracking-order-list{display:grid;gap:14px}
.tracking-order-card{padding:22px}
.tracking-order-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.tracking-order-top>div,.tracking-order-details>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.tracking-order-top small,.tracking-order-details small{color:var(--muted);font-size:9px;letter-spacing:1px;font-weight:850}
.tracking-order-top strong{font-size:16px;overflow-wrap:anywhere}
.tracking-order-top time{color:var(--muted);font-size:11px;text-align:right}
.tracking-order-details{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;padding:18px 0}
.tracking-order-details strong{font-size:13px;overflow-wrap:anywhere}
.tracking-statuses{display:flex;align-items:center;gap:12px 22px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:15px}
.tracking-statuses>span{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;font-weight:700}
.tracking-statuses .badge{display:inline-block;padding:5px 9px;border-radius:20px;background:#eef2f5;color:#526475;font-size:10px;font-weight:800;text-transform:capitalize}
.tracking-statuses .badge.successful,.tracking-statuses .badge.paid{background:#eaf9f2;color:#198b5a}
.tracking-statuses .badge.pending,.tracking-statuses .badge.unpaid,.tracking-statuses .badge.processing{background:#fff7df;color:#9a7200}
.tracking-statuses .badge.failed{background:#fff0f0;color:#c73535}
.tracking-statuses .badge.refunded{background:#f0f1ff;color:#5a58a6}
.tracking-empty{text-align:center;padding:38px 24px}
.tracking-empty-icon{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 15px;border-radius:14px;background:#eef8fc;color:var(--primary-dark);font-size:22px;font-weight:900}
.tracking-empty h2{margin-bottom:7px;font-size:22px}
.tracking-empty p{max-width:520px;margin:0 auto;color:var(--muted);font-size:14px}
@media(max-width:760px){.tracking-how-grid{grid-template-columns:1fr;gap:13px}.tracking-how-card{min-height:0;padding:22px}.tracking-how-icon{margin-bottom:17px}}
@media(max-width:600px){.tracking-order-details{grid-template-columns:1fr 1fr}.tracking-order-card{padding:17px}.tracking-order-top{flex-direction:column}.tracking-order-top time{text-align:left}.tracking-statuses{gap:10px 14px}}

html[data-theme="dark"] .tracking-section{background:var(--page-bg)}
html[data-theme="dark"] .tracking-card,
html[data-theme="dark"] .tracking-how-card,
html[data-theme="dark"] .tracking-order-card,
html[data-theme="dark"] .tracking-empty{background:var(--card);border-color:var(--line);box-shadow:0 18px 48px rgba(0,0,0,.22)}
html[data-theme="dark"] .tracking-how-number{color:#34414e}
html[data-theme="dark"] .tracking-how-icon{background:linear-gradient(135deg,rgba(15,175,225,.22),rgba(15,175,225,.08));color:#7bd8f3}
html[data-theme="dark"] .tracking-tabs{background:#111b25}
html[data-theme="dark"] .tracking-tab{color:#aab7c5}
html[data-theme="dark"] .tracking-tab.is-active{background:#263746;color:#7bd8f3;box-shadow:0 3px 12px rgba(0,0,0,.24)}
html[data-theme="dark"] .tracking-form input{background:#111b25;border-color:#3b4a58;color:var(--ink)}
html[data-theme="dark"] .tracking-form input::placeholder{color:#8393a3}
html[data-theme="dark"] .tracking-order-top,
html[data-theme="dark"] .tracking-order-details,
html[data-theme="dark"] .tracking-statuses{border-color:var(--line)}
html[data-theme="dark"] .tracking-empty-icon{background:#123642;color:#7bd8f3}
html[data-theme="dark"] .tracking-statuses .badge{background:#2a3946;color:#d3dde6}
html[data-theme="dark"] .tracking-statuses .badge.successful,
html[data-theme="dark"] .tracking-statuses .badge.paid{background:#153b30;color:#8fe0b8}
html[data-theme="dark"] .tracking-statuses .badge.pending,
html[data-theme="dark"] .tracking-statuses .badge.unpaid,
html[data-theme="dark"] .tracking-statuses .badge.processing{background:#40371d;color:#f0d27c}
html[data-theme="dark"] .tracking-statuses .badge.failed{background:#48272b;color:#f2a0a5}
html[data-theme="dark"] .tracking-statuses .badge.refunded{background:#302e50;color:#c2bdfa}
html[data-theme="dark"] .tracking-results .error-box{border-color:#713d42;background:#3c2428;color:#ffc2c6}

.flash-message{position:fixed;z-index:120;top:92px;left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 32px));padding:14px 18px;border:1px solid #bde8d2;border-radius:14px;background:#effbf5;color:#176b48;box-shadow:0 14px 38px rgba(13,27,42,.16);font-size:14px;font-weight:700;opacity:1;transition:opacity .45s ease,transform .45s ease}
.flash-message.is-fading{opacity:0;transform:translate(-50%,-10px);pointer-events:none}
.flash-error{border-color:#f1c8c8;background:#fff4f4;color:#9e3030}
html[data-theme="dark"] .flash-error{border-color:#713d42;background:#3c2428;color:#ffc2c6}
.payment-message{margin:14px 0 0;padding:13px 15px;border:1px solid #bde8d2;border-radius:12px;background:#effbf5;color:#176b48;font-size:13px;font-weight:700}
.payment-account-link{display:inline-flex;align-items:center;gap:7px;margin-top:9px;color:#087fa9;font-weight:850;text-decoration:underline;text-underline-offset:3px}
.payment-message.is-error{border-color:#f1c8c8;background:#fff4f4;color:#9e3030}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
html[data-theme="dark"] .payment-message{border-color:#2f6650;background:#17352b;color:#a5e6c5}
html[data-theme="dark"] .payment-account-link{color:#7bd8f3}
html[data-theme="dark"] .payment-message.is-error{border-color:#713d42;background:#3c2428;color:#ffc2c6}
@media(prefers-reduced-motion:reduce){.flash-message{transition:none}}

/* How it works: clearer steps and a compact benefits grid */
.works-hero-copy .btn{margin-top:12px}
.works-steps{max-width:900px;grid-template-columns:1fr;gap:14px}
.works-steps .step{align-items:center;padding:22px 26px;border-radius:16px;box-shadow:0 10px 28px rgba(13,27,42,.045);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.works-steps .step:hover{transform:translateY(-2px);border-color:rgba(15,175,225,.42);box-shadow:0 16px 34px rgba(13,27,42,.08)}
.works-steps .step>span{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;padding:0;border:1px solid rgba(15,175,225,.2);border-radius:15px;background:linear-gradient(145deg,rgba(15,175,225,.16),rgba(15,175,225,.04));color:#087fa9;font-size:14px}
.works-steps .step h2{margin:0 0 4px;font-size:20px;letter-spacing:-.3px}
.works-steps .step p{margin:0;color:var(--muted);font-size:14px}
.works-benefits-section{position:relative;overflow:hidden;background:radial-gradient(ellipse at 4% 4%,rgba(15,175,225,.10),transparent 34%),var(--bg)}
.works-benefits-section .center-heading{margin-bottom:36px}
.works-benefits-section .center-heading h2{margin:7px 0 10px}
.works-benefits-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.works-benefit-card{position:relative;min-height:250px;padding:25px 22px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:0 12px 34px rgba(13,27,42,.045);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.works-benefit-card:hover{transform:translateY(-5px);border-color:rgba(15,175,225,.5);box-shadow:0 20px 42px rgba(13,27,42,.1)}
.works-benefit-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:22px;border:1px solid rgba(15,175,225,.16);border-radius:15px;background:linear-gradient(145deg,rgba(15,175,225,.16),rgba(15,175,225,.04));color:#087fa9;font-size:21px}
.works-benefit-number{color:var(--muted);font-size:10px;font-weight:850;letter-spacing:1.1px}
.works-benefit-card h3{margin:7px 0 8px;font-size:18px;letter-spacing:-.35px}
.works-benefit-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}
.works-benefits-note{display:flex;align-items:center;gap:13px;margin-top:20px;padding:16px 19px;border:1px solid rgba(15,175,225,.18);border-radius:15px;background:rgba(15,175,225,.065);color:var(--muted)}
.works-benefits-note>i{flex:0 0 auto;color:#087fa9;font-size:19px}
.works-benefits-note p{flex:1;margin:0;font-size:13px}
.works-benefits-note strong{color:var(--ink)}
.works-benefits-note a{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;color:#087fa9;font-size:13px;font-weight:800}
html[data-theme="dark"] .works-steps .step>span,html[data-theme="dark"] .works-benefit-icon{color:#7bd8f3;background:linear-gradient(145deg,rgba(15,175,225,.22),rgba(15,175,225,.08));border-color:rgba(123,216,243,.16)}
html[data-theme="dark"] .works-benefit-card{box-shadow:0 12px 34px rgba(0,0,0,.14)}
html[data-theme="dark"] .works-benefit-card:hover{box-shadow:0 20px 42px rgba(0,0,0,.25)}
html[data-theme="dark"] .works-benefits-note{background:rgba(15,175,225,.09);border-color:rgba(123,216,243,.17)}
html[data-theme="dark"] .works-benefits-note>i,html[data-theme="dark"] .works-benefits-note a{color:#7bd8f3}
@media(max-width:900px){.works-benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.works-steps .step{gap:17px;padding:18px}.works-steps .step>span{flex-basis:42px;width:42px;height:42px;border-radius:13px}.works-benefits-grid{grid-template-columns:1fr}.works-benefit-card{min-height:0}.works-benefits-note{align-items:flex-start;flex-wrap:wrap}.works-benefits-note p{flex-basis:calc(100% - 35px)}.works-benefits-note a{margin-left:32px}}
@media(prefers-reduced-motion:reduce){.works-steps .step,.works-benefit-card{transition:none}.works-steps .step:hover,.works-benefit-card:hover{transform:none}}

.contact-hero h1{max-width:760px}
.contact-section{background:radial-gradient(ellipse at 4% 6%,rgba(15,175,225,.08),transparent 34%),var(--page-bg)}
.contact-layout{grid-template-columns:.78fr 1.22fr;align-items:start;gap:34px}
.contact-info-panel{position:relative;overflow:hidden;padding:36px 32px;border:1px solid rgba(15,175,225,.18);border-radius:22px;background:linear-gradient(150deg,#102438,#0e1b2b 72%,#172c3b);color:#fff;box-shadow:0 22px 56px rgba(13,27,42,.18)}
.contact-info-panel:after{position:absolute;right:-72px;top:-86px;width:220px;height:220px;border:1px solid rgba(100,213,242,.16);border-radius:50%;box-shadow:0 0 0 24px rgba(100,213,242,.035),0 0 0 48px rgba(100,213,242,.025);content:"";pointer-events:none}
.contact-info-panel>.eyebrow{color:#68d4f1}
.contact-info-panel h2{position:relative;z-index:1;margin:10px 0 9px;color:#fff;font-size:30px;line-height:1.15;letter-spacing:-1px}
.contact-info-panel>p{position:relative;z-index:1;margin:0 0 28px;color:#bdcad5;font-size:14px}
.contact-channel{position:relative;z-index:1;display:flex;align-items:center;gap:13px;margin-top:12px;padding:15px 14px;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:rgba(255,255,255,.045);transition:background .18s,border-color .18s,transform .18s}
.contact-channel:hover{transform:translateY(-2px);border-color:rgba(104,212,241,.36);background:rgba(255,255,255,.08)}
.contact-channel-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:rgba(15,175,225,.18);color:#72d9f4;font-size:19px}
.contact-channel-icon.whatsapp{background:rgba(37,211,102,.14);color:#7ae7a5}
.contact-channel>span:nth-child(2){display:grid;min-width:0;gap:2px}
.contact-channel small{color:#9eafbf;font-size:9px;font-weight:850;letter-spacing:1px}
.contact-channel strong{color:#fff;font-size:13px;overflow-wrap:anywhere}
.contact-channel-arrow{margin-left:auto;color:#90a6b8}
.contact-response-note{display:flex;gap:10px;margin-top:23px;padding-top:20px;border-top:1px solid rgba(255,255,255,.13);color:#b8c7d3;font-size:12px}
.contact-response-note i{flex:0 0 auto;color:#72d9f4;font-size:16px}
.contact-socials{display:flex;gap:9px;margin-top:24px}
.contact-socials a{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.15);border-radius:12px;color:#d4e1ea;transition:.18s}
.contact-socials a:hover{border-color:#68d4f1;color:#68d4f1;transform:translateY(-2px)}
.contact-form-card{padding:32px}
.contact-form-heading{margin-bottom:24px}
.contact-form-heading h2{margin:5px 0;font-size:26px;letter-spacing:-.8px}
.contact-form-heading p{margin:0;color:var(--muted);font-size:13px}
.contact-form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.contact-form label{margin:0 0 7px;font-size:12px}
.contact-form input,.contact-form textarea{border-radius:12px;font-size:14px}
.contact-form textarea{min-height:150px;resize:vertical}
.contact-form-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px}
.contact-form-bottom small{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}
.contact-form-bottom .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 19px;white-space:nowrap}
.contact-alert{display:flex;align-items:flex-start;gap:10px;margin:0 0 18px;padding:13px 15px;border:1px solid;border-radius:12px;font-size:13px;font-weight:650}
.contact-alert i{margin-top:2px}
.contact-alert.success{border-color:#bde8d2;background:#effbf5;color:#176b48}
.contact-alert.error{border-color:#f1c8c8;background:#fff4f4;color:#9e3030}
.contact-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
html[data-theme="dark"] .contact-form-card{background:var(--card)}
html[data-theme="dark"] .contact-alert.success{border-color:#2f6650;background:#17352b;color:#a5e6c5}
html[data-theme="dark"] .contact-alert.error{border-color:#713d42;background:#3c2428;color:#ffc2c6}
@media(max-width:850px){.contact-layout{grid-template-columns:1fr;gap:22px}.contact-info-panel{padding:29px}}
@media(max-width:520px){.contact-form-card{padding:24px 19px}.contact-form-row{grid-template-columns:1fr;gap:0}.contact-form-bottom{align-items:stretch;flex-direction:column}.contact-form-bottom .btn{width:100%}}

.home-hero{display:grid;min-height:min(700px,calc(100svh - 76px));align-items:center;padding:68px 0 64px;background:radial-gradient(ellipse at 6% 15%,rgba(15,175,225,.19),transparent 39%),radial-gradient(ellipse at 83% 87%,rgba(255,117,31,.12),transparent 39%),linear-gradient(118deg,#f3fbff 0%,#fff 54%,#fff8f1 100%)}
.home-hero::after{position:absolute;z-index:0;right:-140px;top:50%;width:520px;height:520px;transform:translateY(-50%);border:1px solid rgba(15,175,225,.12);border-radius:50%;box-shadow:0 0 0 32px rgba(15,175,225,.025),0 0 0 78px rgba(15,175,225,.02);content:"";pointer-events:none}
.home-hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(390px,.9fr);gap:clamp(38px,7vw,94px)}
.home-hero-copy{text-align:left;max-width:600px}
.home-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid rgba(15,175,225,.18);border-radius:30px;background:rgba(255,255,255,.67);font-size:10px;letter-spacing:1.5px}
.home-hero-eyebrow i{font-size:13px}
.home-hero h1{margin:23px 0 18px;font-size:clamp(52px,6vw,78px);line-height:.99;letter-spacing:-4.7px}
.home-hero h1 span{background:linear-gradient(95deg,#079fce 5%,#19bce4 62%,#ff8c3a);-webkit-background-clip:text;background-clip:text;color:transparent}
.home-hero-copy>p{max-width:530px;margin:0;color:var(--muted);font-size:17px;line-height:1.7}
.home-hero .hero-actions{justify-content:flex-start;gap:11px;margin:27px 0 25px}
.home-hero .hero-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:14px 20px;border-radius:13px;font-size:14px;font-weight:800;transition:transform .2s,box-shadow .2s,background .2s}
.home-hero .hero-actions .btn-secondary{background:linear-gradient(135deg,#ff8a28,#f36b1d);box-shadow:0 11px 24px rgba(243,107,29,.22)}
.home-hero .hero-actions .btn-secondary:hover{transform:translateY(-2px);background:linear-gradient(135deg,#fa7e19,#e85d12);box-shadow:0 15px 30px rgba(243,107,29,.3)}
.home-hero .hero-actions .btn-outline{border-color:var(--line);background:var(--card)}
.home-hero-highlights{display:flex;align-items:center;gap:0;margin-top:28px}
.home-hero-highlights>div{display:grid;gap:1px;padding:0 19px;border-left:1px solid var(--line)}
.home-hero-highlights>div:first-child{padding-left:0;border-left:0}
.home-hero-highlights strong{color:var(--ink);font-size:18px;line-height:1.15}
.home-hero-highlights strong i{color:#11a678;font-size:16px}
.home-hero-highlights span{color:var(--muted);font-size:10px;font-weight:650}
.home-hero-visual{position:relative;isolation:isolate;padding:22px 12px}
.hero-plan-card{position:relative;z-index:1;padding:25px;border:1px solid rgba(255,255,255,.74);border-radius:25px;background:rgba(255,255,255,.84);box-shadow:0 30px 75px rgba(13,47,67,.15),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(18px);animation:hero-card-float 7s ease-in-out infinite}
@keyframes hero-card-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hero-plan-top{display:flex;align-items:center;gap:10px;margin-bottom:21px}
.hero-plan-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#e7f8fd;color:#0b9ec8;font-size:17px}
.hero-plan-label{color:#738496;font-size:9px;font-weight:900;letter-spacing:1.6px}
.hero-plan-live{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:6px 9px;border-radius:20px;background:#ecf9f2;color:#37845f;font-size:8px;font-weight:900;letter-spacing:.8px}
.hero-plan-live i{width:6px;height:6px;border-radius:50%;background:#39b877;box-shadow:0 0 0 3px rgba(57,184,119,.12)}
.hero-plan-card>h2{margin:0 0 4px;color:#162638;font-size:24px;letter-spacing:-.7px}
.hero-plan-card>p{margin:0 0 16px;color:#728193;font-size:12px}
.hero-network-list{display:grid;gap:9px}
.hero-network-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto 17px;align-items:center;gap:11px;padding:12px 13px;border:1px solid #e8eef2;border-radius:15px;background:#fff;transition:transform .18s,border-color .18s,box-shadow .18s}
.hero-network-row:hover{transform:translateX(3px);border-color:rgba(15,175,225,.42);box-shadow:0 8px 20px rgba(13,47,67,.07)}
.hero-network-brand{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;font-size:12px;font-weight:950}
.hero-network-brand-mtn{background:#fff4c7;color:#a77c00}.hero-network-brand-telecel{background:#ffeded;color:#da3845}.hero-network-brand-at{background:#e9f3ff;color:#2572bd}
.hero-network-name,.hero-network-price{display:grid;gap:1px}
.hero-network-name strong{color:#1b2d3f;font-size:12px}
.hero-network-name small,.hero-network-price small{color:#8a98a6;font-size:9px}
.hero-network-price{text-align:right}.hero-network-price strong{color:#1a2d40;font-size:12px;white-space:nowrap}
.hero-network-row>i{color:#9aa8b5;font-size:13px}
.hero-plan-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:15px;padding:10px 2px 0;color:#0787af;font-size:11px;font-weight:850}
.hero-plan-footer:hover{color:#f17021}
.hero-orbit{position:absolute;z-index:0;display:block;border-radius:50%;pointer-events:none}
.hero-orbit-one{top:0;right:0;width:74px;height:74px;background:linear-gradient(145deg,rgba(15,175,225,.2),rgba(15,175,225,.015))}
.hero-orbit-two{bottom:0;left:0;width:42px;height:42px;border:7px solid rgba(255,117,31,.18)}
html[data-theme="dark"] .home-hero{background:radial-gradient(ellipse at 6% 15%,rgba(15,175,225,.19),transparent 39%),radial-gradient(ellipse at 83% 87%,rgba(255,117,31,.1),transparent 39%),linear-gradient(118deg,#142630 0%,var(--page-bg) 54%,#241f1a 100%)}
html[data-theme="dark"] .home-hero-eyebrow{border-color:rgba(123,216,243,.22);background:rgba(16,31,42,.72)}
html[data-theme="dark"] .home-hero-highlights>div{border-color:var(--line)}
html[data-theme="dark"] .hero-plan-card{border-color:rgba(255,255,255,.11);background:rgba(28,40,53,.9);box-shadow:0 30px 75px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04)}
html[data-theme="dark"] .hero-plan-card>h2,html[data-theme="dark"] .hero-network-name strong,html[data-theme="dark"] .hero-network-price strong{color:#e8eef5}
html[data-theme="dark"] .hero-plan-card>p,html[data-theme="dark"] .hero-plan-label,html[data-theme="dark"] .hero-network-name small,html[data-theme="dark"] .hero-network-price small{color:#aab7c5}
html[data-theme="dark"] .hero-plan-icon{background:#123642;color:#7bd8f3}
html[data-theme="dark"] .hero-network-row{border-color:#34414e;background:#17232e}
html[data-theme="dark"] .hero-network-row:hover{border-color:rgba(123,216,243,.38)}
html[data-theme="dark"] .hero-network-brand-mtn{background:#423a21;color:#f4d56f}
html[data-theme="dark"] .hero-network-brand-telecel{background:#42272c;color:#ff9ca4}
html[data-theme="dark"] .hero-network-brand-at{background:#20364b;color:#8fc7ff}
@media(max-width:920px){.home-hero{min-height:0;padding:68px 0}.home-hero-grid{grid-template-columns:1fr;gap:32px}.home-hero-copy{max-width:700px}.home-hero-visual{width:min(560px,100%);margin:0 auto}}
@media(max-width:620px){.home-hero{padding:52px 0 45px}.home-hero h1{font-size:clamp(46px,12vw,62px);letter-spacing:-3px}.home-hero-copy>p{font-size:15px}.home-hero .hero-actions{flex-direction:column;align-items:stretch;margin:23px 0}.home-hero .hero-actions .btn{width:100%}.home-hero-highlights{justify-content:space-between;gap:0;margin-top:25px}.home-hero-highlights>div{padding:0 11px}.home-hero-highlights strong{font-size:16px}.home-hero-highlights span{font-size:9px}.home-hero-visual{padding:12px 2px}.hero-plan-card{padding:20px 16px;border-radius:21px}.hero-plan-card>h2{font-size:21px}.hero-network-row{grid-template-columns:38px minmax(0,1fr) auto 14px;gap:8px;padding:11px 9px}.hero-network-brand{width:36px;height:36px;border-radius:11px}.hero-network-price strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){.hero-plan-card{animation:none}.hero-network-row,.home-hero .hero-actions .btn{transition:none}.hero-network-row:hover,.home-hero .hero-actions .btn-secondary:hover{transform:none}}