:root {
    --green-900: #014D4E;
    --green-800: #098485;
    --green-700: #10CCCE;
    --green-600: #098485;
    --mint: #e7f6f4;
    --gold: #C99700;
    --gold-light: #E9B209;
    --gold-dark: #836200;
    --cream: #f6f4ef;
    --white: #ffffff;
    --shadow-strong: 0 25px 60px rgba(15, 63, 58, 0.25);
    --shadow-soft: 0 12px 30px rgba(15, 63, 58, 0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Poppins', sans-serif;
    color: #1d2b2a;
    background: var(--cream);
    line-height: 1.6;
}

body:not(.aos-ready) [data-aos] {
    opacity: 1 !important;
    transform: none !important;
}

        h1, h2, h3, .section-title, .nav-links a {
            font-family: 'Avenir Next Rounded', 'Avenir Next', 'Poppins', sans-serif;
        }

        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; display: block; }

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

        header {
            background: var(--green-900);
            color: var(--white);
            position: sticky;
            top: 0;
            z-index: 10;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        }

        .nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 0;
        }

        .logo {
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
        }

        .logo img {
            width: 160px;
            height: auto;
            border-radius: 0;
            object-fit: contain;
            box-shadow: none;
        }

        .nav-links {
            display: flex;
            gap: 22px;
            font-size: 14px;
            opacity: 0.9;
        }

        .nav-links a {
            text-transform: uppercase;
            letter-spacing: 0.6px;
            font-weight: 600;
            transition: color 0.2s ease;
        }

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

        .nav-cta {
            padding: 10px 16px;
            background: var(--gold);
            border-radius: 999px;
            font-weight: 600;
            color: #1b1402;
        }

        .nav-cta:hover { box-shadow: 0 10px 20px rgba(201,151,0,0.35); transform: translateY(-2px); }

        .hero {
            background: #098485;
            color: var(--white);
            position: relative;
            overflow: hidden;
        }

        .hero-wave {
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 260px;
            z-index: 0;
            pointer-events: none;
        }

        .hero::before {
            content: "";
            position: absolute;
            width: 420px;
            height: 420px;
            left: 40px;
            top: -40px;
            background: url("../image/gold_store.png") no-repeat center;
            background-size: contain;
            opacity: 0.12;
            z-index: 0;
        }

        .hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 25% 20%, rgba(233,178,9,0.45), rgba(233,178,9,0) 35%),
                radial-gradient(circle at 60% 30%, rgba(255,255,255,0.25), rgba(255,255,255,0) 40%),
                radial-gradient(circle at 75% 15%, rgba(233,178,9,0.35), rgba(233,178,9,0) 30%);
            opacity: 0.35;
            pointer-events: none;
            z-index: 0;
        }

        .hero-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
            align-items: center;
            padding: 80px 0 70px;
            position: relative;
            z-index: 1;
        }

        .hero-text h1 {
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(2.4rem, 3.2vw, 3.6rem);
            line-height: 1.15;
            margin-bottom: 18px;
            color: var(--white);
        }

        .hero-text h1 span { color: var(--gold); }

        .hero-text p {
            font-size: 1.05rem;
            opacity: 0.9;
            margin-bottom: 28px;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            margin-bottom: 120px;
        }

        .btn-primary {
            background: var(--gold);
            color: #1b1402;
            border: none;
            padding: 12px 22px;
            border-radius: 12px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 12px 20px rgba(201,151,0,0.35);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(201,151,0,0.45); }

        .btn-ghost {
            background: transparent;
            color: var(--white);
            border: 1px solid rgba(255,255,255,0.45);
            padding: 12px 20px;
            border-radius: 12px;
            font-weight: 600;
        }

        .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

        .card-stack {
            display: grid;
            place-items: center end;
            position: relative;
        }

        .hero-sparkle {
            position: absolute;
            width: 120px;
            height: 120px;
            right: 32px;
            top: -6px;
            background: url("../image/gold_bar.png") no-repeat center;
            background-size: contain;
            opacity: 0.7;
            pointer-events: none;
            z-index: 0;
        }

        .card-glow {
            position: absolute;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            right: 10px;
            top: 20px;
            background: radial-gradient(circle, rgba(212,161,30,0.45) 0%, rgba(212,161,30,0.0) 70%);
            filter: blur(2px);
            z-index: 0;
            pointer-events: none;
        }

        .hero-card {
            width: min(440px, 100%);
            background: rgba(255,255,255,0.9);
            border: 1px solid rgba(255,255,255,0.55);
            border-radius: 22px;
            padding: 22px;
            box-shadow: var(--shadow-strong);
            animation: float 5s ease-in-out infinite;
            margin-left: 22px;
            position: relative;
            z-index: 1;
            color: #1d2b2a;
        }

        .rate-badge {
            position: absolute;
            top: 12px;
            right: 6px;
            color: rgba(255,255,255,0.85);
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 0.3px;
            z-index: 0;
            opacity: 0.8;
        }

        .buy-card {
            display: grid;
            gap: 14px;
            color: #1d2b2a;
        }

        .buy-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
        }

        .buy-head-left { flex: 1; }

        .buy-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        .live-pill {
            background: #f7c7c4;
            color: #c62828;
            font-size: 10px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 6px;
            margin-right: 6px;
        }

        .live-rate { font-weight: 600; font-size: 14px; }

        .buy-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 4px;
        }

        .buy-purity {
            color: rgba(145,113,13,0.96);
            font-size: 12px;
            font-weight: 600;
        }

        .buy-progress {
            width: 100%;
            height: 5px;
            background: #e6e6e6;
            border-radius: 999px;
            overflow: hidden;
            margin-top: 2px;
        }

        .buy-progress span {
            display: block;
            height: 100%;
            width: 72%;
            background: linear-gradient(120deg, var(--gold) 0%, var(--gold-dark) 100%);
        }

        .buy-timer { font-size: 12px; color: var(--green-600); font-weight: 600; }

        .buy-inputs {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 50px;
            position: relative;
            align-items: end;
        }

        .buy-field label { font-size: 13px; color: #7b8b88; font-weight: 700; letter-spacing: 0.4px; }
        .buy-field.grams label { text-align: right; display: block; }

        .field-box {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 0 6px;
            border-radius: 0;
            background: transparent;
            margin-top: 6px;
            font-weight: 700;
            font-size: 20px;
            color: #1e3a37;
            border-bottom: 2px solid rgba(9,132,133,0.6);
        }

        .field-box input {
            border: none;
            background: transparent;
            width: 100%;
            font-weight: 700;
            font-size: 20px;
            color: inherit;
            outline: none;
        }

        .buy-swap {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #ffffff;
            border: 2px solid rgba(201,151,0,0.6);
            display: grid;
            place-items: center;
            font-size: 14px;
            color: #c99700;
            box-shadow: 0 6px 16px rgba(15,63,58,0.15);
            pointer-events: none;
        }

        .buy-field:first-child .field-box { padding-right: 26px; }
        .buy-field:last-child .field-box { padding-left: 26px; }

        .buy-gst {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            font-weight: 600;
        }

        .toggle {
            width: 40px;
            height: 20px;
            border-radius: 999px;
            background: #ccc;
            padding: 2px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            border: 1px solid rgba(9,132,133,0.3);
            transition: background 0.2s ease, border 0.2s ease;
        }

        .toggle.on { background: var(--green-600); border-color: var(--green-600); justify-content: flex-end; }

        .toggle span {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        }

        .buy-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .pill {
            background: #f1f2f2;
            padding: 7px 12px;
            border-radius: 999px;
            font-size: 15px;
            font-weight: 600;
            color: #5f6e6b;
            border: 1px solid rgba(9,132,133,0.3);
            transition: background 0.2s ease, color 0.2s ease, border 0.2s ease;
        }

        .pill.active {
            background: var(--green-600);
            color: #ffffff;
            border-color: var(--green-600);
        }

        .breakup-card {
            background: #f6f7f7;
            padding: 12px;
            border-radius: 12px;
            font-size: 15px;
            display: grid;
            gap: 6px;
        }

        .row {
            display: flex;
            justify-content: space-between;
            color: #5f6e6b;
        }

        .row strong { color: #1d2b2a; }

        .row.total {
            color: var(--green-900);
            font-weight: 700;
        }

        .row.total strong {
            color: var(--green-900);
        }

        .breakup-divider {
            height: 1px;
            background: #92beb2;
            margin: 6px 0;
        }

.buy-cta {
    width: 100%;
    text-transform: none;
    font-size: 16px;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(1, 32, 30, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9999;
}

.modal-overlay.show {
    display: flex;
}

.modal-card {
    width: min(420px, 92vw);
    background: #ffffff;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 22px 50px rgba(15, 63, 58, 0.28);
    border: 1px solid rgba(15, 63, 58, 0.12);
    text-align: center;
    animation: modal-pop 0.2s ease-out;
}

.modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--green-900);
    margin-bottom: 8px;
}

.modal-text {
    color: #506463;
    font-size: 14px;
    margin-bottom: 18px;
}

.modal-cta {
    width: 140px;
    margin: 0 auto;
}

@keyframes modal-pop {
    from { transform: translateY(8px) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

        .trust-bar {
            background: var(--green-900);
            color: var(--mint);
            padding: 18px 0;
            font-size: 0.9rem;
        }

        .trust-items {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 12px;
            align-items: center;
            text-align: center;
        }

        .trust-item {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-weight: 600;
        }

        .section { padding: 70px 0; }
        .section-title {
            text-align: center;
            font-family: 'Montserrat', sans-serif;
            color: var(--green-900);
            font-size: clamp(1.5rem, 2.5vw, 2.2rem);
            margin-bottom: 12px;
        }
        .section-subtitle {
            text-align: center;
            max-width: 720px;
            margin: 0 auto 40px;
            color: #506463;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: 22px;
        }

        .card {
            background: var(--white);
            padding: 22px;
            border-radius: 18px;
            box-shadow: var(--shadow-soft);
            border: 1px solid rgba(15,63,58,0.08);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .card.bg-shield {
            background: #ffffff url("../image/insured_vault.png") no-repeat center 24px;
            background-size: 120px 120px;
            padding-top: 160px;
        }

        .card.bg-report {
            background: #ffffff url("../image/real_time_pricing.png") no-repeat center 24px;
            background-size: 120px 120px;
            padding-top: 160px;
        }

        .card.bg-convert {
            background: #ffffff url("../image/quick_response.png") no-repeat center 24px;
            background-size: 120px 120px;
            padding-top: 160px;
        }

        .card.bg-wallet {
            background: #ffffff url("../image/flexible_plan.png") no-repeat center 24px;
            background-size: 120px 120px;
            padding-top: 160px;
        }

        .card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(15,63,58,0.18); }

        .card-illustration {
            height: 110px;
            display: grid;
            place-items: center;
            margin-bottom: 12px;
        }

        .card-illustration img {
            width: 120px;
            height: 120px;
            object-fit: fill;
        }

        .grid .card h3,
        .partner-grid .card h3,
        .experience-card h3,
        .steps .step-card h3,
        .steps .step-card .step-title {
            text-align: center;
        }

        .grid .card p,
        .partner-grid .card p,
        .experience-card p,
        .steps .step-card p {
            text-align: left;
        }

        .card-illustration.small img {
            width: 90px;
            height: 90px;
        }

        .experience-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 24px;
        }

        .experience-card {
            background: #ffffff;
            border-radius: 20px;
            padding: 22px;
            box-shadow: var(--shadow-soft);
        }

        .experience-image {
            height: 200px;
            border-radius: 16px;
            overflow: hidden;
            background: #f8faf9;
            margin-bottom: 18px;
            display: grid;
            place-items: center;
            padding: 8px;
        }

        .experience-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

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

        .step-card img {
            width: 90px;
            height: 90px;
            object-fit: fill;
            margin: 0 auto 10px;
            display: block;
        }

        .step-card {
            background: var(--white);
            border-radius: 18px;
            padding: 20px;
            box-shadow: var(--shadow-soft);
        }

        .step-title {
            font-weight: 700;
            margin-bottom: 6px;
            color: #1d2b2a;
            text-align: center;
        }

        .partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }

        footer {
            background: var(--green-900);
            color: var(--mint);
            padding: 40px 0 30px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 20px;
            font-size: 0.92rem;
        }

        .footer-title { font-weight: 700; color: var(--white); margin-bottom: 10px; }

        .badge {
            background: rgba(255,255,255,0.12);
            color: var(--white);
            border: 2px solid var(--gold);
            padding: 6px 10px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        @media (max-width: 800px) {
            .nav-links { display: none; }
            .hero-content { padding: 60px 0; }
            .hero-card { width: min(420px, 100%); }
        }
    



        body:not(.aos-ready) [data-aos] {
            opacity: 1 !important;
            transform: none !important;
        }