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

   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 {



    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;

}



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

   SCROLL PROGRESS

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



.scroll-progress {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 2000;



    width: 0;

    height: 3px;



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



    pointer-events: none;

}



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

   BACK TO TOP

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



.back-to-top {

    position: fixed;

    right: 2.4rem;

    bottom: 2.4rem;

    z-index: 1500;



    width: 4.8rem;

    height: 4.8rem;



    display: inline-flex;

    align-items: center;

    justify-content: center;



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

    border-radius: 50%;



    color: var(--white);

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



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



    opacity: 0;

    visibility: hidden;

    pointer-events: none;



    transform: translateY(1rem);



    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-color: var(--brand-primary-dark);

    transform: translateY(-2px);

}



.back-to-top svg {

    width: 1.9rem;

    height: 1.9rem;

}





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

   EXACTSUB HOMEPAGE

   HOMEPAGE-SPECIFIC STYLES

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





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

   NAVBAR

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



.site-header {

    position: relative;

    z-index: 1000;

}



.navbar {

    height: var(--nav-height);



    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

}



.navbar-logo {

    justify-self: start;

}



.navbar-logo img {

    width: 15rem;

    height: auto;



    transition: transform var(--transition);

}



.navbar-logo:hover img {

    transform: translateY(-1px);

}
.nav-links {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 3rem;

}
.nav-links a {

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

    position: relative;



    padding-block: 0.5rem;



    color: var(--gray-700);



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

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



    transition: color var(--transition);

}
.nav-links a::after {

    content: "";



    position: absolute;

    left: 0;

    bottom: 0;



    width: 100%;

    height: 2px;



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



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



    transform: scaleX(0);



    transition: transform var(--transition);

}
.nav-links a:hover {

    color: var(--brand-primary);

}
.nav-links a:hover::after {

    transform: scaleX(1);

}



.nav-actions {

    justify-self: end;



    display: flex;

    align-items: center;

    gap: 1rem;

}



.theme-toggle {

    width: 4.2rem;

    height: 4.2rem;



    display: inline-flex;

    align-items: center;

    justify-content: center;



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

    border-radius: 50%;



    color: var(--gray-700);

    background-color: transparent;



    transition:

        background-color var(--transition),

        color var(--transition),

        border-color var(--transition),

        transform var(--transition);

}



.theme-toggle:hover {

    background-color: var(--gray-100);

    transform: rotate(8deg);

}



.theme-icon {

    display: block;

}



.mobile-controls {

    display: none;

}



.mobile-menu {

    display: none;

}





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

   HERO

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



.hero {

    position: relative;



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



    display: flex;

    align-items: center;



    overflow: hidden;



    padding-block: 7rem 8rem;



    background:

        radial-gradient(

            circle at 80% 50%,

            rgba(2, 42, 123, 0.075),

            transparent 30%

        ),

        radial-gradient(

            circle at 10% 85%,

            rgba(41, 186, 34, 0.05),

            transparent 25%

        ),

        var(--white);

}



.hero-background {

    position: absolute;

    inset: 0;



    pointer-events: none;

}



.hero-orb {

    position: absolute;



    border-radius: 50%;



    filter: blur(1px);



    opacity: 0.5;

}



.hero-orb-one {

    width: 34rem;

    height: 34rem;



    top: 5%;

    right: -15rem;



    background: rgba(2, 42, 123, 0.07);

}



.hero-orb-two {

    width: 20rem;

    height: 20rem;



    bottom: -8rem;

    left: -7rem;



    background: rgba(41, 186, 34, 0.08);

}



.hero-grid-pattern {

    position: absolute;

    inset: 0;



    opacity: 0.2;



    background-image:

        linear-gradient(

            rgba(2, 42, 123, 0.035) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(2, 42, 123, 0.035) 1px,

            transparent 1px

        );



    background-size: 5rem 5rem;



    mask-image: linear-gradient(

        to right,

        black,

        transparent 70%

    );

}



.hero-container {

    position: relative;

    z-index: 2;



    display: grid;



    grid-template-columns:

        minmax(0, 1fr)

        minmax(42rem, 0.9fr);



    align-items: flex-start;



    gap: 6rem;

}





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

   HERO CONTENT

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



.hero-content {

    max-width: 62rem;

}



.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 0.9rem;



    margin-bottom: 2rem;

    padding: 0.7rem 1.3rem;



    border: 1px solid rgba(41, 186, 34, 0.2);

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



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

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



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

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

}



.hero-badge-dot {

    width: 0.8rem;

    height: 0.8rem;



    flex-shrink: 0;



    border-radius: 50%;



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



    box-shadow:

        0 0 0 0.4rem rgba(41, 186, 34, 0.12);



    animation: hero-status-pulse 2.2s infinite;

}



.hero-title {

    max-width: 70rem;



    margin-bottom: 2.4rem;



    color: var(--gray-800);



    font-size: clamp(4.3rem, 5.4vw, 6.3rem);



    line-height: 1.05;



    letter-spacing: -0.045em;

}



.hero-title span {

    display: block;



    color: var(--brand-primary);

}



.hero-description {

    max-width: 58rem;



    margin-bottom: 3rem;



    color: var(--gray-600);



    font-size: 1.8rem;



    line-height: 1.7;

}



.hero-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;



    gap: 1.2rem;

}



.hero-actions .btn {

    gap: 0.8rem;

}



.hero-actions .btn svg {

    transition: transform var(--transition);

}



.hero-actions .btn:hover svg {

    transform: translateX(3px);

}





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

   HERO TRUST

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



.hero-trust {

    display: flex;

    flex-wrap: wrap;



    gap: 1.8rem;



    margin-top: 3rem;

}



.hero-trust-item {

    display: inline-flex;

    align-items: center;



    gap: 0.7rem;



    color: var(--gray-600);



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

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

}



.hero-trust-icon {

    width: 2rem;

    height: 2rem;



    display: inline-flex;

    align-items: center;

    justify-content: center;



    border-radius: 50%;



    color: var(--white);

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

}





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

   HERO VISUAL

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



.hero-visual {

    position: relative;



    min-height: 60rem;



    display: flex;

    align-items: center;

    justify-content: center;

}



.hero-visual-glow {

    position: absolute;



    width: 43rem;

    height: 43rem;



    border-radius: 50%;



    background:

        radial-gradient(

            circle,

            rgba(2, 42, 123, 0.12),

            rgba(2, 42, 123, 0.035) 48%,

            transparent 70%

        );

}





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

   PHONE

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



.phone-mockup {

    position: relative;

    z-index: 3;



    width: 31rem;

    height: 59rem;



    padding: 0.9rem;



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



    border-radius: 4rem;



    background:

        linear-gradient(

            145deg,

            #18243b,

            #080e19

        );



    box-shadow:

        0 3rem 7rem rgba(2, 42, 123, 0.2),

        0 1rem 3rem rgba(0, 0, 0, 0.15);



    transform: rotate(2deg);



    transition:

        transform 0.55s ease,

        box-shadow 0.55s ease;

}



.hero-visual:hover .phone-mockup {

    transform: rotate(0deg) translateY(-0.8rem);



    box-shadow:

        0 3.5rem 8rem rgba(2, 42, 123, 0.24),

        0 1.2rem 3.5rem rgba(0, 0, 0, 0.15);

}



.phone-speaker {

    position: absolute;

    z-index: 5;



    top: 1.7rem;

    left: 50%;



    width: 9rem;

    height: 2.5rem;



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



    background-color: #080e19;



    transform: translateX(-50%);

}



.phone-screen {

    position: relative;



    width: 100%;

    height: 100%;



    overflow: hidden;



    padding: 3.9rem 1.6rem 1rem;



    border-radius: 3.3rem;



    background-color: var(--gray-50);

}





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

   PHONE HEADER

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



.phone-header {

    display: flex;

    align-items: center;

    justify-content: space-between;



    margin-bottom: 1.5rem;

}



.phone-user {

    display: flex;

    flex-direction: column;

}



.phone-user span {

    color: var(--gray-500);



    font-size: 1rem;

}



.phone-user strong {

    margin-top: 0.15rem;



    color: var(--gray-800);



    font-size: 1.7rem;

}



.phone-avatar {

    width: 3.6rem;

    height: 3.6rem;



    display: flex;

    align-items: center;

    justify-content: center;



    border-radius: 50%;



    color: var(--white);

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



    font-size: 1.05rem;

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



    box-shadow:

        0 0 0 0.4rem var(--brand-primary-light);

}





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

   WALLET

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



.phone-wallet {

    padding: 1.7rem;



    border-radius: 1.8rem;



    color: var(--white);



    background:

        linear-gradient(

            135deg,

            var(--brand-primary),

            #0647bf

        );



    box-shadow:

        0 1rem 2.2rem rgba(2, 42, 123, 0.18);

}



.wallet-top,

.wallet-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.wallet-top span,

.wallet-bottom span {

    font-size: 0.95rem;

}



.wallet-top span:first-child,

.wallet-bottom {

    opacity: 0.75;

}



.wallet-balance {

    display: block;



    margin-block: 0.8rem 1.25rem;



    color: var(--white);



    font-size: 2.55rem;



    line-height: 1;

}





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

   PHONE SERVICES

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



.phone-section-title {

    display: flex;

    align-items: center;

    justify-content: space-between;



    margin: 1.8rem 0 1rem;

}



.phone-section-title strong {

    color: var(--gray-800);



    font-size: 1.15rem;

}



.phone-section-title span {

    color: var(--brand-primary);



    font-size: 0.9rem;

}



.phone-services {

    display: grid;



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



    gap: 0.7rem;

}



.phone-service {

    display: flex;

    flex-direction: column;

    align-items: center;



    gap: 0.55rem;



    color: var(--gray-600);



    font-size: 0.85rem;

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

}



.phone-service-icon {

    width: 4.1rem;

    height: 4.1rem;



    display: flex;

    align-items: center;

    justify-content: center;



    border-radius: 1.2rem;

}



.service-blue {

    color: var(--brand-primary);

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

}



.service-green {

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

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

}



.service-orange {

    color: #b56b00;

    background-color: #fff4d6;

}



.service-purple {

    color: #6741d9;

    background-color: #f0ebff;

}





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

   PHONE ACTIVITY

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



.activity-title {

    margin-top: 2rem;

}



.phone-transaction {

    display: flex;

    align-items: center;



    gap: 0.85rem;



    padding: 1.1rem;



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



    border-radius: 1.4rem;



    background-color: var(--white);



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



    transition:

        opacity 0.25s ease,

        transform 0.25s ease;

}



.transaction-icon {

    width: 3.7rem;

    height: 3.7rem;



    flex: 0 0 3.7rem;



    display: flex;

    align-items: center;

    justify-content: center;



    border-radius: 1rem;



    color: var(--brand-primary);

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

}



.transaction-details {

    min-width: 0;

    flex: 1;



    display: flex;

    flex-direction: column;

}



.transaction-title {

    overflow: hidden;



    color: var(--gray-800);



    font-size: 0.98rem;



    white-space: nowrap;

    text-overflow: ellipsis;

}



.transaction-meta {

    color: var(--gray-500);



    font-size: 0.8rem;

}



.transaction-amount {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

}



.transaction-amount strong {

    color: var(--gray-800);



    font-size: 0.95rem;

}



.transaction-amount span {

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



    font-size: 0.75rem;

}





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

   PHONE BOTTOM NAV

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



.phone-bottom-nav {

    position: absolute;



    right: 1.6rem;

    bottom: 1rem;

    left: 1.6rem;



    display: grid;



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



    padding: 0.75rem 0;



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



    background-color: var(--gray-50);

}



.phone-nav-item {

    display: flex;

    flex-direction: column;

    align-items: center;



    gap: 0.25rem;



    color: var(--gray-400);



    font-size: 1.2rem;

}



.phone-nav-item small {

    font-size: 0.7rem;

}



.phone-nav-active {

    color: var(--brand-primary);

}





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

   FLOATING HERO CARDS

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



.hero-floating-card {

    position: absolute;

    z-index: 5;



    display: flex;

    align-items: center;



    gap: 1rem;



    padding: 1.15rem 1.3rem;



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



    border-radius: 1.5rem;



    background-color: var(--white);



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



    animation: hero-floating 4.5s ease-in-out infinite;

}



.hero-floating-card strong {

    display: block;



    color: var(--gray-800);



    font-size: 1.05rem;

}



.hero-floating-card span {

    display: block;



    margin-top: 0.15rem;



    color: var(--gray-500);



    font-size: 0.85rem;

}



.hero-floating-data {

    top: 11%;

    left: 0;

}



.hero-floating-success {

    right: -1rem;

    bottom: 13%;



    animation-delay: -2.2s;

}



.floating-icon {

    width: 3.8rem;

    height: 3.8rem;



    display: flex;

    align-items: center;

    justify-content: center;



    border-radius: 1rem;

}



.floating-icon-blue {

    color: var(--brand-primary);

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

}



.floating-success-icon {

    width: 3.4rem;

    height: 3.4rem;



    display: flex;

    align-items: center;

    justify-content: center;



    border-radius: 50%;



    color: var(--white);

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

}





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

   HERO ANIMATIONS

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



@keyframes hero-floating {



    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-0.9rem);

    }

}



@keyframes hero-status-pulse {



    0%,

    100% {

        opacity: 1;

        transform: scale(1);

    }



    50% {

        opacity: 0.55;

        transform: scale(0.82);

    }

}





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

   FEATURES

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



.features {

    background-color: var(--gray-50);

}



.features-grid {

    display: grid;



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



    gap: 2rem;

}



.feature-card {

    position: relative;



    min-height: 31rem;



    display: flex;

    flex-direction: column;

    align-items: flex-start;



    overflow: hidden;



    padding: 2.8rem;



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



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



    background-color: var(--white);



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



    transition:

        transform var(--transition),

        box-shadow var(--transition),

        border-color var(--transition);

}



.feature-card::after {

    content: "";



    position: absolute;



    right: -6rem;

    bottom: -6rem;



    width: 14rem;

    height: 14rem;



    border-radius: 50%;



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



    opacity: 0;



    transition: opacity 0.35s ease;

}



.feature-card:hover {

    transform: translateY(-0.6rem);



    border-color: rgba(2, 42, 123, 0.18);



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

}



.feature-card:hover::after {

    opacity: 0.45;

}



.feature-icon {

    width: 5.4rem;

    height: 5.4rem;



    display: flex;

    align-items: center;

    justify-content: center;



    margin-bottom: 1.8rem;



    border-radius: 1.4rem;



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



    transition:

        transform var(--transition),

        background-color var(--transition);

}



.feature-icon img {

    width: 3rem;

    height: 3rem;



    object-fit: contain;

}



.feature-card:hover .feature-icon {

    transform: scale(1.06);



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

}



.feature-card-number {

    position: absolute;



    top: 2.8rem;

    right: 2.8rem;



    color: var(--gray-300);



    font-size: 1.2rem;

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



    letter-spacing: 0.08em;

}



.feature-card h3 {

    margin-bottom: 1rem;



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

}



.feature-card p {

    max-width: 30rem;



    margin-bottom: 2rem;



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



    line-height: 1.65;

}



.feature-card a {

    position: relative;

    z-index: 2;



    margin-top: auto;



    display: inline-flex;

    align-items: center;



    gap: 0.7rem;



    color: var(--brand-primary);



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

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



    transition:

        color var(--transition),

        gap var(--transition);

}



.feature-card a:hover {

    gap: 1rem;



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

}





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

   BENEFITS

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



.benefits {

    background-color: var(--white);

}



.benefits-grid {

    display: grid;



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



    gap: 2rem;

}



.benefit-card {

    padding: 3rem;



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



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



    background-color: var(--white);



    text-align: center;



    transition:

        transform var(--transition),

        box-shadow var(--transition),

        border-color var(--transition);

}



.benefit-card:hover {

    transform: translateY(-0.5rem);



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



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

}



.benefit-icon {

    width: 5.8rem;

    height: 5.8rem;



    display: flex;

    align-items: center;

    justify-content: center;



    margin: 0 auto 2rem;



    border-radius: 50%;



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

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



    transition: transform var(--transition);

}



.benefit-card:hover .benefit-icon {

    transform: scale(1.08) rotate(4deg);

}



.benefit-card h3 {

    margin-bottom: 1rem;



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

}



.benefit-card p {

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



    line-height: 1.65;

}





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

   API

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



.api-section {

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

}



.api-card {

    position: relative;



    overflow: hidden;



    padding: 6rem 3rem;



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



    color: var(--white);



    background:

        radial-gradient(

            circle at 80% 20%,

            rgba(41, 186, 34, 0.18),

            transparent 30%

        ),

        linear-gradient(

            135deg,

            var(--brand-primary),

            var(--brand-primary-dark)

        );



    text-align: center;



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

}



.api-card::before {

    content: "";



    position: absolute;



    top: -12rem;

    right: -8rem;



    width: 30rem;

    height: 30rem;



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



    border-radius: 50%;

}



.api-card::after {

    content: "";



    position: absolute;



    bottom: -14rem;

    left: -8rem;



    width: 32rem;

    height: 32rem;



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



    border-radius: 50%;

}



.api-label {

    position: relative;

    z-index: 2;



    display: flex;

    align-items: center;

    justify-content: center;



    gap: 1rem;



    margin-bottom: 1.8rem;

}



.api-label span {

    width: 3rem;

    height: 2px;



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

}



.api-label strong {

    color: var(--brand-accent);



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



    letter-spacing: 0.12em;

}



.api-card h2 {

    position: relative;

    z-index: 2;



    margin-bottom: 1.5rem;



    color: var(--white);



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

}



.api-card h2 span {

    color: var(--brand-accent);

}



.api-card p {

    position: relative;

    z-index: 2;



    max-width: 65rem;



    margin: 0 auto 3rem;



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



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



    line-height: 1.7;

}



.api-card .btn {

    position: relative;

    z-index: 2;



    gap: 0.7rem;

}



.api-card .btn-primary {

    color: var(--brand-primary);



    background-color: var(--white);



    border-color: var(--white);

}



.api-card .btn-primary:hover {

    color: var(--white);



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



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

}





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

   REVIEWS

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



.reviews {

    background-color: var(--gray-50);

}



.reviews-grid {

    display: grid;



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



    gap: 2rem;

}



.review-card {

    display: flex;

    flex-direction: column;



    min-height: 30rem;



    padding: 2.8rem;



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



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



    background-color: var(--white);



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



    transition:

        transform var(--transition),

        box-shadow var(--transition);

}



.review-card:hover {

    transform: translateY(-0.4rem);



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

}



.review-top {

    display: flex;

    align-items: center;

    justify-content: space-between;



    margin-bottom: 2rem;

}



.review-icon {

    width: 4.4rem;

    height: 4.4rem;



    display: flex;

    align-items: center;

    justify-content: center;



    border-radius: 50%;



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

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

}



.review-stars {

    color: var(--brand-accent);



    font-size: 1.2rem;



    letter-spacing: 0.12em;

}



.review-text {

    margin-bottom: 2.8rem;



    color: var(--gray-600);



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



    line-height: 1.75;

}



.review-author {

    margin-top: auto;



    display: flex;

    flex-direction: column;



    gap: 0.3rem;

}



.review-author strong {

    color: var(--gray-800);



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

}



.review-author span {

    color: var(--gray-500);



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

}





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

   FAQ

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



.faq {

    background-color: var(--white);

}



.faq-container {

    max-width: 900px;

}



.faq-list {

    display: flex;

    flex-direction: column;



    gap: 4rem;

}



.faq-category h3 {

    margin-bottom: 1.6rem;



    color: var(--brand-primary);



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

}



.faq-items {

    display: flex;

    flex-direction: column;



    gap: 1rem;

}



.faq-item {

    overflow: hidden;



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



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



    background-color: var(--white);



    transition:

        border-color var(--transition),

        box-shadow var(--transition);

}



.faq-item:hover {

    border-color: rgba(2, 42, 123, 0.5);

}



.faq-item.active {

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



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

}



.faq-question {

    width: 100%;



    display: flex;

    align-items: center;

    justify-content: space-between;



    gap: 2rem;



    padding: 2rem;



    border: none;



    color: var(--gray-800);



    background: transparent;



    text-align: left;



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

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

}



.faq-icon {

    width: 3rem;

    height: 3rem;



    flex: 0 0 3rem;



    display: flex;

    align-items: center;

    justify-content: center;



    border-radius: 50%;



    color: var(--brand-primary);



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



    font-size: 2rem;



    transition:

        transform var(--transition),

        background-color var(--transition),

        color var(--transition);

}



.faq-item.active .faq-icon {

    color: var(--white);



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



    transform: rotate(180deg);

}



.faq-answer {

    max-height: 0;



    overflow: hidden;



    padding-inline: 2rem;



    transition:

        max-height 0.35s ease,

        padding-bottom 0.35s ease;

}



.faq-answer p {

    padding-bottom: 2rem;



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



    line-height: 1.7;

}





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

   FOOTER

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



.footer {

    padding-block: var(--space-20) var(--space-8);



    color: var(--white);



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

}



.footer-cta {

    padding-bottom: var(--space-16);



    text-align: center;

}



.footer-cta .section-label {

    color: var(--brand-accent);



    background-color: rgba(41, 186, 34, 0.12);

}



.footer-cta h2 {

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



    color: var(--white);



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

}



.footer-cta p {

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



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

}



.footer-app-btn {

    gap: 0.7rem;



    color: var(--brand-primary);



    background-color: var(--white);

}



.footer-app-btn:hover {

    color: var(--white);



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

}



.footer-grid {

    display: grid;



    grid-template-columns:

        1fr

        1.5fr

        1fr

        1fr;



    gap: 4rem;



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



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



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

}



.footer-column h3 {

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



    color: var(--white);



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

}



.footer-column ul {

    display: flex;

    flex-direction: column;



    gap: 1.2rem;

}



.footer-column a {

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



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



    transition: color var(--transition);

}



.footer-column a:hover {

    color: var(--brand-accent);

}



.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;



    padding-top: var(--space-6);

}



.footer-bottom p {

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



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

}







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

   TABLET

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



@media (max-width: 992px) {



    :root {

        --container-padding: 2rem;

    }



    .navbar {

        grid-template-columns: 1fr auto;

    }
.nav-links,

    .nav-actions {

        display: none;

    }



    .mobile-controls {

        display: flex;

        align-items: center;



        gap: 1rem;

    }



    .menu-toggle {

        width: 4.4rem;

        height: 4.4rem;



        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;



        gap: 0.5rem;



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



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



        background: transparent;

    }



    .menu-toggle span {

        width: 2rem;

        height: 2px;



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



        background-color: var(--gray-800);



        transition:

            transform var(--transition),

            opacity var(--transition);

    }



    .menu-toggle[aria-expanded="true"] span:nth-child(1) {

        transform: translateY(7px) rotate(45deg);

    }



    .menu-toggle[aria-expanded="true"] span:nth-child(2) {

        opacity: 0;

    }



    .menu-toggle[aria-expanded="true"] span:nth-child(3) {

        transform: translateY(-7px) rotate(-45deg);

    }



    .mobile-menu {

        position: absolute;



        top: var(--nav-height);

        left: 0;



        width: 100%;



        display: block;



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



        background-color: var(--white);



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



        opacity: 0;

        visibility: hidden;



        transform: translateY(-10px);



        transition:

            opacity var(--transition),

            visibility var(--transition),

            transform var(--transition);

    }



    .mobile-menu.active {

        opacity: 1;

        visibility: visible;



        transform: translateY(0);

    }



    .mobile-menu-inner {

        width: min(

            calc(100% - 4rem),

            var(--container-width)

        );



        margin-inline: auto;



        padding-block: 2rem;

    }



    .mobile-menu ul {

        display: flex;

        flex-direction: column;



        gap: 0.5rem;

    }



    .mobile-menu li a {

        display: block;



        padding: 1.4rem 1rem;



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



        color: var(--gray-700);



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

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

    }



    .mobile-menu li a:hover {

        color: var(--brand-primary);



        background-color: var(--gray-100);

    }



    .mobile-menu-actions {

        display: grid;



        grid-template-columns: 1fr 1fr;



        gap: 1rem;



        margin-top: 1.5rem;

        padding-top: 1.5rem;



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

    }





    /* HERO */



    .hero {

        min-height: auto;



        padding-block: 7rem 8rem;

    }



    .hero-container {

        grid-template-columns: 1fr;



        gap: 5rem;



        text-align: center;

    }



    .hero-content {

        max-width: 72rem;



        margin-inline: auto;

    }



    .hero-title,

    .hero-description {

        margin-inline: auto;

    }



    .hero-actions,

    .hero-trust {

        justify-content: center;

    }



    .hero-visual {

        min-height: 58rem;

    }



    .hero-floating-data {

        left: 8%;

    }



    .hero-floating-success {

        right: 7%;

    }





    .features-grid,

    .benefits-grid,

    .reviews-grid {

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

    }





    .footer-grid {

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

    }



}





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

   MOBILE

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



@media (max-width: 600px) {



    :root {

        --container-padding: 1.6rem;

    }



    .section {

        padding-block: 6.4rem;

    }



    .navbar-logo img {

        width: 12.5rem;

    }



    .theme-toggle {

        width: 4rem;

        height: 4rem;

    }





    /* HERO */



    .hero {

        padding-block: 5.5rem 6rem;

    }



    .hero-container {

        gap: 3.5rem;

    }



    .hero-title {

        font-size: clamp(3.6rem, 11vw, 4.8rem);



        letter-spacing: -0.04em;

    }



    .hero-description {

        font-size: 1.55rem;

    }



    .hero-actions {

        width: 100%;



        flex-direction: column;

    }



    .hero-actions .btn {

        width: 100%;

    }



    .hero-trust {

        display: grid;



        grid-template-columns: 1fr;



        justify-items: center;



        gap: 1rem;

    }



    .hero-visual {

        min-height: 53rem;

    }



    .phone-mockup {

        width: 27rem;

        height: 52rem;



        border-radius: 3.5rem;

    }



    .phone-screen {

        border-radius: 2.9rem;

    }



    .hero-floating-card {

        transform: scale(0.86);

    }



    .hero-floating-data {

        top: 7%;

        left: -1.5rem;

    }



    .hero-floating-success {

        right: -1.5rem;

        bottom: 9%;

    }





    /* FEATURES */



    .features-grid,

    .benefits-grid,

    .reviews-grid {

        grid-template-columns: 1fr;

    }



    .feature-card,

    .benefit-card,

    .review-card {

        padding: 2.4rem;

    }





    /* API */



    .api-card {

        padding: 4.5rem 2rem;



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

    }



    .api-card h2 {

        font-size: 3rem;

    }



    .api-card p {

        font-size: 1.5rem;

    }





    /* FAQ */



    .faq-question {

        padding: 1.6rem;



        font-size: 1.5rem;

    }



    .faq-answer {

        padding-inline: 1.6rem;

    }



    .faq-answer p {

        font-size: 1.5rem;

    }





    /* FOOTER */



    .footer {

        padding-top: 7rem;

    }



    .footer-grid {

        grid-template-columns: 1fr;



        gap: 3rem;

    }



    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;



        gap: 0.8rem;

    }



}





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

   SMALL MOBILE

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



@media (max-width: 380px) {



    .navbar-logo img {

        width: 11rem;

    }



    .mobile-controls {

        gap: 0.6rem;

    }



    .hero-title {

        font-size: 3.2rem;

    }



    .hero-description {

        font-size: 1.4rem;

    }



    .mobile-menu-actions {

        grid-template-columns: 1fr;

    }



    .hero-visual {

        min-height: 49rem;

    }



    .phone-mockup {

        width: 25rem;

        height: 48rem;

    }



    .hero-floating-card {

        transform: scale(0.76);

    }



}





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

   DARK THEME

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



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

    background:

        radial-gradient(

            circle at 80% 50%,

            rgba(41, 186, 34, 0.07),

            transparent 30%

        ),

        var(--white);

}



[data-theme="dark"] .hero-grid-pattern {

    opacity: 0.08;

}



[data-theme="dark"] .phone-mockup {

    border-color: #263247;

}



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

    background-color: var(--gray-50);

}



[data-theme="dark"] .phone-wallet {

    background:

        linear-gradient(

            135deg,

            #123d91,

            var(--brand-primary)

        );

}



[data-theme="dark"] .hero-floating-card {

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

}



[data-theme="dark"] .feature-card::after {

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

}



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

    background:

        radial-gradient(

            circle at 80% 20%,

            rgba(41, 186, 34, 0.1),

            transparent 30%

        ),

        linear-gradient(

            135deg,

            #102b63,

            #07152f

        );

}





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

   REDUCED MOTION

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



@media (prefers-reduced-motion: reduce) {



    html {

        scroll-behavior: auto;

    }



    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }



    .phone-mockup {

        transform: none;

    }



}

/* =========================================================
   ACCESSIBILITY / NAVIGATION ENHANCEMENTS
========================================================= */

.skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 3000;
    padding: 1rem 1.4rem;
    border-radius: var(--radius-md);
    color: var(--white);
    background: var(--brand-primary);
    transform: translateY(-200%);
    transition: transform var(--transition);
}

.skip-link:focus {
    transform: translateY(0);
}

/* Services dropdown */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding-block: 0.5rem;
    border: 0;
    background: transparent;
    color: var(--gray-700);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: color var(--transition);
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible {
    color: var(--brand-primary);
}

.nav-dropdown-toggle::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: var(--radius-full);
    background-color: var(--brand-accent);
    transform: scaleX(0);
    transition: transform var(--transition);
}

.nav-dropdown-toggle:hover::after,
.nav-dropdown.open .nav-dropdown-toggle::after {
    transform: scaleX(1);
}

.dropdown-chevron {
    flex-shrink: 0;
    transition: transform var(--transition);
}

.nav-dropdown:hover .dropdown-chevron,
.nav-dropdown.open .dropdown-chevron {
    transform: rotate(180deg);
}

.services-dropdown {
    position: absolute;
    top: calc(100% + 1.2rem);
    left: 50%;
    width: min(72rem, 90vw);
    padding: 1.4rem;
    transform: translateX(-50%) translateY(0.8rem);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
    z-index: 1100;
}

.services-dropdown::before {
    content: "";
    position: absolute;
    top: -1.3rem;
    left: 0;
    width: 100%;
    height: 1.3rem;
}

.nav-dropdown:hover .services-dropdown,
.nav-dropdown:focus-within .services-dropdown,
.nav-dropdown.open .services-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.services-dropdown-inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.services-dropdown-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.services-dropdown-heading {
    display: block;
    margin-bottom: 0.65rem;
    padding: 0 0.8rem;
    color: var(--gray-500);
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.services-dropdown-column > a {
    display: flex;
    align-items: center;
    min-height: 3.8rem;
    padding: 0.75rem 0.8rem;
    border-radius: var(--radius-md);
    color: var(--gray-700);
    font-size: 0.95rem;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition), background-color var(--transition), transform var(--transition);
}

.services-dropdown-column > a:hover,
.services-dropdown-column > a:focus-visible {
    color: var(--brand-primary);
    background-color: var(--gray-100);
    transform: translateX(2px);
}

[data-theme="dark"] .services-dropdown {
    background-color: var(--gray-900, #111827);
    border-color: var(--gray-700);
}

[data-theme="dark"] .nav-dropdown-toggle {
    color: var(--gray-200);
}

[data-theme="dark"] .services-dropdown-column > a {
    color: var(--gray-200);
}

[data-theme="dark"] .services-dropdown-column > a:hover,
[data-theme="dark"] .services-dropdown-column > a:focus-visible {
    color: var(--white);
    background-color: var(--gray-800);
}

/* Mobile services menu */
.mobile-services {
    width: 100%;
}

.mobile-services-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border: 0;
    background: transparent;
    color: var(--gray-700);
    font-family: inherit;
    font-size: var(--text-base);
    text-align: left;
    cursor: pointer;
}

.mobile-services-toggle:hover,
.mobile-services-toggle:focus-visible {
    color: var(--brand-primary);
}

.mobile-services-chevron {
    transition: transform var(--transition);
}

.mobile-services-toggle[aria-expanded="true"] .mobile-services-chevron {
    transform: rotate(180deg);
}

.mobile-services-menu {
    display: none;
    padding: 0.4rem 0 0.8rem 1.2rem;
}

.mobile-services-menu.active {
    display: grid;
    gap: 0.2rem;
}

.mobile-services-menu > a {
    display: flex;
    align-items: center;
    min-height: 3.6rem;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-md);
    color: var(--gray-600);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
}

.mobile-services-menu > a:hover,
.mobile-services-menu > a:focus-visible {
    color: var(--brand-primary);
    background-color: var(--gray-100);
}

[data-theme="dark"] .mobile-services-toggle {
    color: var(--gray-200);
}

[data-theme="dark"] .mobile-services-menu > a {
    color: var(--gray-300);
}

[data-theme="dark"] .mobile-services-menu > a:hover,
[data-theme="dark"] .mobile-services-menu > a:focus-visible {
    color: var(--white);
    background-color: var(--gray-800);
}

@media (max-width: 900px) {
    .services-dropdown {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .services-dropdown,
    .dropdown-chevron,
    .mobile-services-chevron,
    .nav-dropdown-toggle::after {
        transition: none;
    }
}