:root {
    --primary: #386e58;
    --primary-dark: #285341;
    --surface: #f5f8f6;
    --text: #101828;
    --muted: #667085;
    --border: #e4e7ec;
    --white: #ffffff;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    font-family: "Inter", Arial, sans-serif;
    color: var(--text);
    background: #ffffff;
    line-height: 1.6;
}


img {
    max-width: 100%;
    display: block;
}


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





/* Header */


.site-header {

    height: 82px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.92);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(10px);

}


.header-inner {

    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

}


.brand img {

    height: 42px;

}


.navigation {

    display: flex;
    gap: 30px;

}


.navigation a {

    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;

}


.navigation a:hover {

    color: var(--primary);

}



.header-actions {

    display: flex;
    gap: 12px;
    align-items: center;

}





/* Buttons */


.button {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: .25s ease;

}


.button-primary {

    background: var(--primary);
    color: #ffffff;
    border: 1px solid var(--primary);

}


.button-primary:hover {

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

}



.button-outline {

    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);

}



.button-outline:hover {

    background: var(--surface);

}





/* Hero */


.hero {

    padding: 100px 0 60px; /* Reduced bottom padding slightly to accommodate social proof */
    background:
    radial-gradient(
        circle at top right,
        #e8f2ed,
        transparent 40%
    );

}



.hero-layout {

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;

}



.eyebrow {

    color: var(--primary);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 18px;

}



.hero-content h1 {

    font-size: clamp(42px,5vw,62px);
    line-height: 1.08;
    letter-spacing: -2px;
    margin-bottom: 25px;

}



.hero-description {

    color: var(--muted);
    font-size: 18px;
    max-width: 560px;
    margin-bottom: 35px;

}



.hero-buttons {

    display: flex;
    gap: 14px;

}





/* Card */

.card-display {
    display: flex;
    justify-content: center;
    align-items: center;
}


.payment-card {

    width: 390px;
    height: 235px;
    padding: 28px;

    border-radius: 24px;

    color: white;

    background:
    linear-gradient(
        135deg,
        #386e58,
        #163629
    );

    box-shadow:
    0 30px 80px rgba(56,110,88,.25);

    transform: rotate(4deg);

    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Fun visual feedback to draw attention to the product */
.payment-card:hover {
    transform: rotate(0deg) scale(1.03);
}


/* Top section */

.card-header {

    display:flex;
    justify-content:space-between;
    align-items:center;

    font-weight:700;
    font-size:14px;

}

.card-network {
    font-size: 11px;
    letter-spacing: 1px;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
}


/* Chip */

.card-chip {

    width:50px;
    height:36px;

    background:#d8c989;

    border-radius:8px;

    margin-top:28px;

}



/* Number */

.card-number {

    margin-top:22px;

    font-size:21px;

    letter-spacing:4px;

    white-space:nowrap;

}



/* Bottom */

.card-footer {

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin-top:22px;

}


.card-footer div {

    display:flex;
    flex-direction:column;

}


.card-footer small {

    opacity:.65;

    font-size:9px;

    line-height:1;

    text-transform:uppercase;

}


.card-footer strong {

    font-size:12px;

    margin-top:4px;

    white-space:nowrap;

}


/* Social Proof & Networks Strip */

.social-proof {
    padding: 40px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: #fafbfa;
}

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

.proof-label {
    font-size: 14px;
    color: var(--muted);
    font-weight: 500;
    max-width: 320px;
}

.proof-logos {
    display: flex;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
}

.proof-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) opacity(60%);
    transition: filter 0.3s ease;
}

.proof-logo:hover {
    filter: grayscale(0%) opacity(100%);
}




/* Sections */


.section {

    padding: 90px 0;

}



.section-heading {

    max-width: 650px;
    margin: 0 auto 50px;
    text-align:center;

}



.section-heading h2,
.journey h2,
.business-section h2,
.partner-section h2 {

    font-size:38px;
    letter-spacing:-1px;
    margin-bottom:15px;

}



.section-heading p,
.partner-section p,
.business-section p {

    color:var(--muted);

}





/* Product cards */


.product-grid {

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;

}



.product-card {

    padding:35px;
    border:1px solid var(--border);
    border-radius:20px;
    transition:.25s;

}



.product-card:hover {

    transform:translateY(-5px);
    border-color:var(--primary);
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.04);

}

.card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--surface);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}


.product-card h3 {

    margin-bottom:12px;

}



.product-card p {

    color:var(--muted);

}





/* Journey */


.journey {

    padding:90px 0;
    background:var(--primary);
    color:white;

}



.journey h2 {

    text-align:center;
    color:white;
    margin-bottom:50px;

}



.steps {

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;

}



.steps article {

    background:rgba(255,255,255,.12);
    padding:35px;
    border-radius:20px;

}



.steps span {

    font-size:38px;
    font-weight:700;

}





/* Security */


.security-list {

    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;

}



.security-item {

    padding:14px 28px;
    border:1px solid var(--border);
    border-radius:40px;
    font-weight:500;
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;

}

.security-icon {
    color: var(--primary);
    flex-shrink: 0;
}





/* Business */


.business-section {

    background:var(--surface);
    padding:90px 0;
    text-align:center;

}



.business-section p {

    max-width:650px;
    margin:0 auto 35px;

}





/* Partner */


.partner-section {

    padding:80px 0;
    text-align:center;

}



.partner-section p {

    max-width:720px;
    margin:auto;

}





/* Footer */


.footer {

    background:#101828;
    color:white;
    padding:60px 0 40px;

}



.footer-brand p {

    color:#98a2b3;

}



.footer-links {

    margin:25px 0;
    display:flex;
    gap:20px;

}



.footer-links a {

    color:white;
    text-decoration:none;
    font-size:15px;

}

.footer-links a:hover {
    color: #cbd5e1;
}

.footer-compliance {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.legal-disclaimer {
    color: #667085;
    font-size: 12px;
    line-height: 1.6;
}



.copyright {

    color:#98a2b3;
    font-size:14px;
    margin-top: 20px;

}





/* Responsive */


@media(max-width:950px){


.navigation {

    display:none;

}


.hero-layout {

    grid-template-columns:1fr;
    text-align:center;

}


.hero-description {

    margin-left:auto;
    margin-right:auto;

}


.hero-buttons {

    justify-content:center;

}

.proof-inner {
    flex-direction: column;
    text-align: center;
    gap: 24px;
}

.proof-label {
    max-width: 100%;
}

.proof-logos {
    justify-content: center;
    gap: 32px;
}


.product-grid,
.steps {

    grid-template-columns:1fr;

}


.payment-card {

    width:320px;
    height:195px;
    padding:22px;

}


}