@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+Devanagari:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');

/* =========================================================
   RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    width: 100%;
    overflow-x: hidden;

    background: #05060a;
    color: #fff;

    font-family:
        "DM Sans",
        "Noto Sans Devanagari",
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
}

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

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

button {
    font: inherit;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {
    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.header {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.92),
            rgba(0,0,0,.35),
            transparent
        );
}

.nav {
    min-height: 88px;

    display: flex;
    align-items: center;

    gap: 28px;
}


/* =========================================================
   BRAND
========================================================= */

.brand {
    display: flex;
    align-items: center;
    gap: 11px;

    flex-shrink: 0;
}

.brand-mark {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(246,199,91,.65);
    border-radius: 50%;

    color: #f6c75b;
    background: rgba(246,199,91,.06);
}

.brand-content {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-family: "Playfair Display", serif;

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

    line-height: 1;
}

.brand-name span {
    color: #ffe39a;
}

.brand-sub {
    margin-top: 4px;

    color: rgba(255,255,255,.65);

    font-size: 10px;
}


/* =========================================================
   NAV
========================================================= */

.nav-links {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 30px;
}

.nav-links a {
    position: relative;

    padding: 8px 0;

    color: rgba(255,255,255,.88);

    font-size: 14px;

    transition: color .3s ease;
}

.nav-links a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background: #f6c75b;

    transition: width .3s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: #ffe39a;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}


/* =========================================================
   WHATSAPP BUTTON
========================================================= */

.wa {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 54px;

    padding: 0 25px;

    border: 1px solid rgba(246,199,91,.5);

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #ffe69f,
            #f6c75b
        );

    color: #171207;

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

    white-space: nowrap;

    box-shadow:
        0 12px 35px rgba(246,199,91,.22);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.wa:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 45px rgba(246,199,91,.35);
}


/* GREEN WHATSAPP ICON */

.wa-icon {
    width: 24px;
    height: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #25D366 !important;

    font-size: 18px;
}


/* =========================================================
   MOBILE MENU
========================================================= */

.menu-btn {
    display: none;

    width: 44px;
    height: 44px;

    margin-left: auto;

    border: 1px solid rgba(255,255,255,.18);

    border-radius: 12px;

    background: rgba(255,255,255,.06);

    color: white;

    cursor: pointer;
}


/* =========================================================
   HERO
========================================================= */

/*
   IMPORTANT:
   HERO IMAGE SIRF YAHAN DEFINE HAI.
   Media queries me background-image CHANGE NAHI HOGI.
*/

.hero {
    position: relative;

    width: 100%;

    min-height: 100vh;

    min-height: 760px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background-color: #05060a;

    background-image:
        linear-gradient(
            90deg,
            rgba(3,4,7,.96) 0%,
            rgba(3,4,7,.85) 27%,
            rgba(3,4,7,.48) 55%,
            rgba(3,4,7,.15) 100%
        ),
        url("/assetes/hero-bg.png");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center center;
}


/* HERO LIGHT */

.hero::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(246,199,91,.12),
            transparent 32%
        );
}


/* HERO BOTTOM */

.hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 100px;

    pointer-events: none;

    background:
        linear-gradient(
            transparent,
            rgba(5,6,10,.9)
        );
}

.hero > .container {
    position: relative;

    z-index: 2;
}

.hero-content {
    width: min(720px, 100%);

    padding-top: 60px;
}


/* =========================================================
   HERO TEXT
========================================================= */

.eyebrow {
    margin-bottom: 16px;

    color: #ffe39a;

    font-size: 15px;
    font-weight: 600;
}

.hero h1 {
    margin: 0;

    max-width: 760px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(48px, 5.7vw, 82px);

    line-height: 1.03;

    letter-spacing: -1.5px;
}

.hero h1 strong {
    display: block;

    color: #ffe39a;
}

.hero-copy {
    max-width: 620px;

    margin-top: 20px;

    color: rgba(255,255,255,.82);

    font-size:
        clamp(15px,1.2vw,18px);

    line-height: 1.75;
}

.hero-content > .wa {
    margin-top: 28px;
}


/* =========================================================
   BADGES
========================================================= */

.hero-badges {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 28px;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 35px;

    padding: 0 12px;

    border:
        1px solid
        rgba(255,255,255,.15);

    border-radius: 999px;

    background:
        rgba(255,255,255,.055);

    color:
        rgba(255,255,255,.86);

    font-size: 11px;

    backdrop-filter: blur(10px);
}

.badge-icon {
    color: #f6c75b;
}


/* =========================================================
   SERVICES
========================================================= */

.services {
    width: 100%;

    padding:
        100px 0;

    background: #fbf7ef;

    color: #17181d;
}

.section-head {
    max-width: 850px;

    margin: 0 auto 48px;

    text-align: center;
}

.section-kicker {
    margin-bottom: 10px;

    color: #a97918;

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

.section-head h2 {
    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(35px,4vw,58px);

    line-height: 1.12;
}

.section-head p {
    max-width: 700px;

    margin: 14px auto 0;

    color: #68645e;

    font-size: 16px;
}


/* =========================================================
   CARDS
========================================================= */

.cards {
    display: grid;

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

    gap: 24px;
}

.card {
    position: relative;

    min-height: 250px;

    padding: 30px;

    overflow: hidden;

    border:
        1px solid
        rgba(30,25,10,.08);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffdf8
        );

    box-shadow:
        0 12px 35px
        rgba(40,30,10,.07);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 24px 55px
        rgba(40,30,10,.13);
}

.card-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin-bottom: 18px;

    border-radius: 17px;

    font-size: 24px;
}

.card-icon.red {
    background: #fff0ef;
    color: #e33c3c;
}

.card-icon.blue {
    background: #eef5ff;
    color: #1976d2;
}

.card-icon.yellow {
    background: #fff8df;
    color: #d99b00;
}

.card-icon.green {
    background: #ecf9ef;
    color: #269c55;
}

.card-icon.purple {
    background: #f5ecff;
    color: #8d3fc2;
}

.card-icon.orange {
    background: #fff1e4;
    color: #e88718;
}

.card h3 {
    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(20px,1.6vw,25px);

    line-height: 1.2;
}

.card p {
    max-width: 430px;

    margin-top: 9px;

    color: #68645d;

    font-size: 14px;

    line-height: 1.65;
}

.arrow {
    position: absolute;

    right: 22px;
    bottom: 20px;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(23,24,28,.12);

    border-radius: 50%;

    background: white;

    transition:
        background .3s ease,
        transform .3s ease;
}

.card:hover .arrow {
    background: #f6c75b;

    transform: translateX(5px);
}


/* =========================================================
   TRUST
========================================================= */

.trust {
    width: 100%;

    padding: 70px 0;

    background: #0b0e15;
}

.trust-grid {
    display: grid;

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

    gap: 18px;
}

.trust-item {
    min-width: 0;

    min-height: 105px;

    padding: 18px;

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

    gap: 13px;

    border:
        1px solid
        rgba(246,199,91,.14);

    border-radius: 18px;

    background:
        rgba(255,255,255,.025);

    text-align: center;
}

.trust-icon {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(246,199,91,.38);

    border-radius: 50%;

    background:
        rgba(246,199,91,.08);

    color: #f6c75b;
}

.trust-title {
    font-family:
        "Playfair Display",
        serif;

    font-size: 20px;
}

.trust-text {
    margin-top: 3px;

    color:
        rgba(255,255,255,.56);

    font-size: 11px;
}


/* =========================================================
   FOOTER CTA
========================================================= */

/*
   IMPORTANT:
   FOOTER IMAGE BHI SIRF YAHAN DEFINE HAI.
*/

.footer-cta {
    position: relative;

    width: 100%;

    min-height: 570px;

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

    overflow: hidden;

    padding: 90px 0;

    text-align: center;

    background-color: #05060a;

    background-image:
        linear-gradient(
            rgba(4,5,10,.28),
            rgba(4,5,10,.62)
        ),
        url("/assetes/footer-bg.png");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center center;
}

.footer-cta::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at center,
            rgba(246,199,91,.12),
            transparent 45%
        );
}

.cta-inner {
    position: relative;

    z-index: 2;

    width:
        min(850px, calc(100% - 30px));

    margin: 0 auto;
}

.cta-inner h2 {
    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(38px,5.2vw,68px);

    line-height: 1.08;
}

.cta-inner h2 span {
    color: #ffe39a;
}

.cta-inner p {
    max-width: 680px;

    margin: 17px auto 0;

    color:
        rgba(255,255,255,.82);

    font-size: 16px;
}

.cta-inner > .wa {
    margin-top: 27px;

    min-width: 300px;
}


/* =========================================================
   ONLINE STATUS
========================================================= */

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

    gap: 8px;

    margin-top: 18px;

    color:
        rgba(255,255,255,.78);

    font-size: 13px;
}

.dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #25D366 !important;

    box-shadow:
        0 0 0 5px
        rgba(37,211,102,.12);

    animation:
        pulse 2s infinite;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    padding: 24px 0;

    background: #05060a;

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

    text-align: center;
}

footer p {
    margin: 0;

    color:
        rgba(255,255,255,.48);

    font-size: 12px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .container {
        width:
            calc(100% - 50px);
    }

    .nav-links,
    .nav > .wa {
        display: none;
    }

    .menu-btn {
        display: grid;
        place-items: center;
    }

    .hero {
        min-height: 720px;

        background-position:
            62% center;
    }

    .hero-content {
        max-width: 620px;
    }

    .hero h1 {
        font-size:
            clamp(45px,6vw,65px);
    }

    .cards {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .trust-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .container {
        width:
            calc(100% - 28px);
    }

    .nav {
        min-height: 70px;
    }

    .brand-mark {
        width: 40px;
        height: 40px;
    }

    .brand-name {
        font-size: 20px;
    }

    .brand-sub {
        display: none;
    }


    /* ---------------- HERO ---------------- */

    .hero {
        min-height: 720px;

        /*
          ONLY position change.
          Image same rahegi.
        */

        background-position:
            68% center;

        background-size:
            cover;
    }

    .hero-content {
        width: 100%;

        padding-top: 45px;
    }

    .eyebrow {
        margin-bottom: 13px;

        font-size: 11px;
    }

    .hero h1 {
        max-width: 500px;

        font-size:
            clamp(36px,10vw,50px);

        line-height: 1.04;

        letter-spacing: -.5px;
    }

    .hero-copy {
        margin-top: 16px;

        font-size: 13px;

        line-height: 1.7;
    }

    .hero-content > .wa {
        width: 100%;

        min-height: 51px;

        margin-top: 22px;
    }

    .hero-badges {
        display: grid;

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

        gap: 6px;

        margin-top: 21px;
    }

    .badge {
        min-width: 0;

        min-height: 32px;

        padding: 0 4px;

        font-size: 8px;

        white-space: nowrap;
    }


    /* ---------------- SERVICES ---------------- */

    .services {
        padding:
            65px 0 75px;
    }

    .section-head {
        margin-bottom: 34px;
    }

    .section-kicker {
        font-size: 11px;
    }

    .section-head h2 {
        font-size:
            clamp(30px,8vw,40px);
    }

    .section-head p {
        font-size: 13px;
    }

    .cards {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .card {
        min-height: 210px;

        padding: 23px;

        border-radius: 20px;
    }

    .card-icon {
        width: 53px;
        height: 53px;

        margin-bottom: 15px;
    }

    .card h3 {
        font-size: 21px;
    }

    .card p {
        max-width: 82%;

        font-size: 11px;
    }


    /* ---------------- TRUST ---------------- */

    .trust {
        padding: 48px 0;
    }

    .trust-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap: 10px;
    }

    .trust-item {
        min-height: 108px;

        padding: 15px 8px;

        flex-direction: column;

        gap: 6px;
    }

    .trust-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

    .trust-title {
        font-size: 14px;
    }

    .trust-text {
        font-size: 8px;
    }


    /* ---------------- FOOTER ---------------- */

    .footer-cta {
        min-height: 460px;

        /*
          ONLY position/size change.
          Image property SAME as desktop.
        */

        background-position:
            center center;

        background-size:
            cover;
    }

    .cta-inner {
        width:
            calc(100% - 28px);
    }

    .cta-inner h2 {
        font-size:
            clamp(34px,9vw,47px);
    }

    .cta-inner p {
        font-size: 13px;
    }

    .cta-inner > .wa {
        width: 100%;

        min-width: 0;
    }
}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 400px) {

    .hero {
        min-height: 700px;

        background-position:
            70% center;
    }

    .hero h1 {
        font-size: 35px;
    }

    .hero-copy {
        font-size: 12px;
    }

    .badge {
        font-size: 7px;
    }

    .footer-cta {
        min-height: 430px;

        background-position:
            center center;
    }

    .cta-inner h2 {
        font-size: 32px;
    }
}


/* =========================================================
   ASTROTALK — PREMIUM ANIMATIONS
   ========================================================= */

/* ---------- Header entrance ---------- */

.header {
    animation: headerReveal 1s cubic-bezier(.22,1,.36,1) both;
}

@keyframes headerReveal {
    from {
        opacity: 0;
        transform: translateY(-25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ---------- Hero content ---------- */

.hero-content {
    animation:
        heroContentReveal
        1.1s
        .15s
        cubic-bezier(.22,1,.36,1)
        both;
}

@keyframes heroContentReveal {

    from {
        opacity: 0;
        transform:
            translate3d(-45px, 25px, 0);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform:
            translate3d(0,0,0);
        filter: blur(0);
    }
}


/* ---------- Eyebrow ---------- */

.eyebrow {
    animation:
        textReveal
        .8s
        .35s
        cubic-bezier(.22,1,.36,1)
        both;
}


/* ---------- Hero heading ---------- */

.hero h1 {
    animation:
        headingReveal
        1s
        .45s
        cubic-bezier(.22,1,.36,1)
        both;
}

@keyframes headingReveal {

    from {
        opacity: 0;

        transform:
            translateY(35px);

        filter:
            blur(8px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);

        filter:
            blur(0);
    }
}


/* ---------- Hero paragraph ---------- */

.hero-copy {
    animation:
        textReveal
        .9s
        .65s
        cubic-bezier(.22,1,.36,1)
        both;
}

@keyframes textReveal {

    from {
        opacity: 0;

        transform:
            translateY(20px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ---------- Hero WhatsApp button ---------- */

.hero-content > .wa {
    animation:
        buttonReveal
        .9s
        .8s
        cubic-bezier(.22,1,.36,1)
        both;
}

@keyframes buttonReveal {

    from {
        opacity: 0;

        transform:
            translateY(20px)
            scale(.94);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   HERO IMAGE — SUBTLE CINEMATIC MOVEMENT
   ========================================================= */

.hero {
    background-position:
        center center;

    animation:
        heroAtmosphere
        1.8s
        ease-out
        both;
}

@keyframes heroAtmosphere {

    from {
        background-position:
            52% center;
    }

    to {
        background-position:
            center center;
    }
}


/* =========================================================
   HERO GOLD LIGHT
   ========================================================= */

.hero::before {
    animation:
        goldenGlow
        5s
        ease-in-out
        infinite;
}

@keyframes goldenGlow {

    0%,
    100% {
        opacity: .55;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}


/* =========================================================
   BADGES
   ========================================================= */

.hero-badges .badge {
    opacity: 0;

    animation:
        badgeReveal
        .65s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.hero-badges .badge:nth-child(1) {
    animation-delay: 1s;
}

.hero-badges .badge:nth-child(2) {
    animation-delay: 1.12s;
}

.hero-badges .badge:nth-child(3) {
    animation-delay: 1.24s;
}

@keyframes badgeReveal {

    from {
        opacity: 0;

        transform:
            translateY(15px)
            scale(.92);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   WHATSAPP BUTTON SHINE
   ========================================================= */

.wa::after {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            105deg,
            transparent,
            rgba(255,255,255,.48),
            transparent
        );

    transform:
        skewX(-20deg);

    animation:
        buttonShine
        4.5s
        ease-in-out
        infinite;
}

@keyframes buttonShine {

    0% {
        left: -120%;
    }

    25%,
    100% {
        left: 150%;
    }
}


/* =========================================================
   SERVICE SECTION
   ========================================================= */

.section-head {
    animation:
        sectionReveal
        .9s
        ease-out
        both;
}

@keyframes sectionReveal {

    from {
        opacity: 0;

        transform:
            translateY(30px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   SERVICE CARDS
   ========================================================= */

.card {
    opacity: 0;

    animation:
        cardReveal
        .8s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.card:nth-child(1) {
    animation-delay: .1s;
}

.card:nth-child(2) {
    animation-delay: .2s;
}

.card:nth-child(3) {
    animation-delay: .3s;
}

.card:nth-child(4) {
    animation-delay: .4s;
}

.card:nth-child(5) {
    animation-delay: .5s;
}

.card:nth-child(6) {
    animation-delay: .6s;
}

@keyframes cardReveal {

    from {
        opacity: 0;

        transform:
            translateY(35px)
            scale(.96);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* Card hover */

.card {
    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease,
        border-color .35s ease;
}

.card:hover {
    transform:
        translateY(-10px)
        scale(1.015);
}


/* Icon animation */

.card-icon {
    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease;
}

.card:hover .card-icon {
    transform:
        translateY(-5px)
        rotate(-6deg)
        scale(1.08);

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.08);
}


/* Arrow */

.arrow {
    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        background .3s ease,
        box-shadow .3s ease;
}

.card:hover .arrow {
    transform:
        translateX(7px)
        scale(1.08);

    box-shadow:
        0 6px 18px
        rgba(246,199,91,.25);
}


/* =========================================================
   TRUST ITEMS
   ========================================================= */

.trust-item {
    opacity: 0;

    animation:
        trustReveal
        .8s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.trust-item:nth-child(1) {
    animation-delay: .1s;
}

.trust-item:nth-child(2) {
    animation-delay: .2s;
}

.trust-item:nth-child(3) {
    animation-delay: .3s;
}

.trust-item:nth-child(4) {
    animation-delay: .4s;
}

@keyframes trustReveal {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

.trust-item {
    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        border-color .35s ease,
        background .35s ease;
}

.trust-item:hover {
    transform:
        translateY(-7px);
}

.trust-icon {
    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        box-shadow .4s ease;
}

.trust-item:hover .trust-icon {
    transform:
        rotate(12deg)
        scale(1.1);

    box-shadow:
        0 0 25px
        rgba(246,199,91,.18);
}


/* =========================================================
   FOOTER CINEMATIC EFFECT
   ========================================================= */

.footer-cta {
    animation:
        footerReveal
        1s
        ease-out
        both;
}

@keyframes footerReveal {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* Golden footer glow */

.footer-cta::before {
    animation:
        footerGlow
        6s
        ease-in-out
        infinite;
}

@keyframes footerGlow {

    0%,
    100% {
        opacity: .35;

        transform:
            scale(1);
    }

    50% {
        opacity: .8;

        transform:
            scale(1.12);
    }
}


/* Footer heading */

.cta-inner h2 {
    animation:
        footerText
        1s
        .2s
        cubic-bezier(.22,1,.36,1)
        both;
}

.cta-inner p {
    animation:
        footerText
        1s
        .35s
        cubic-bezier(.22,1,.36,1)
        both;
}

.cta-inner > .wa {
    animation:
        footerButton
        .9s
        .5s
        cubic-bezier(.22,1,.36,1)
        both;
}

@keyframes footerText {

    from {
        opacity: 0;

        transform:
            translateY(30px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

@keyframes footerButton {

    from {
        opacity: 0;

        transform:
            translateY(25px)
            scale(.94);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   ONLINE DOT
   ========================================================= */

.dot {
    animation:
        onlinePulse
        2s
        ease-out
        infinite;
}

@keyframes onlinePulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(37,211,102,.45);
    }

    70% {
        box-shadow:
            0 0 0 9px
            rgba(37,211,102,0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(37,211,102,0);
    }
}


/* =========================================================
   FLOATING GOLD PARTICLE FEEL
   ========================================================= */

.hero-badges {
    animation:
        badgeFloat
        5s
        ease-in-out
        infinite;
}

@keyframes badgeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}


/* =========================================================
   MOBILE — KEEP ANIMATIONS
   ========================================================= */

@media (max-width: 600px) {

    .hero-content {
        animation-duration: .8s;
    }

    .hero h1 {
        animation-duration: .8s;
    }

    .card {
        animation-duration: .65s;
    }

    .trust-item {
        animation-duration: .65s;
    }

    .hero-badges {
        animation-duration: 4s;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}