/*
|--------------------------------------------------------------------------
| Japa Sankalp - Main Stylesheet
|--------------------------------------------------------------------------
*/

:root {

    --primary: #8b4513;
    --primary-dark: #5d2e0c;
    --saffron: #f59e0b;
    --saffron-light: #fff7ed;

    --cream: #fffaf3;
    --text: #3b2415;
    --muted: #78675b;

    --white: #ffffff;
    --border: #eadfd3;

    --shadow:
        0 10px 35px rgba(91, 52, 20, .10);

    --radius: 22px;

}


/*
|--------------------------------------------------------------------------
| GLOBAL
|--------------------------------------------------------------------------
*/

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

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

    background: var(--cream);

    color: var(--text);

    line-height: 1.6;

}


a {
    text-decoration: none;
}


img {
    max-width: 100%;
}


.container {
    max-width: 1180px;
}


/*
|--------------------------------------------------------------------------
| NAVBAR
|--------------------------------------------------------------------------
*/

.navbar {

    background: rgba(255, 250, 243, .96);

    backdrop-filter: blur(12px);

    border-bottom:
        1px solid rgba(139, 69, 19, .08);

    padding:
        10px 0;

}


.navbar-brand {
    color: var(--text);
}


.navbar-brand:hover {
    color: var(--primary);
}


.brand-logo {

    width: 44px;
    height: 44px;

    border-radius: 50%;

    display: flex;

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

    background:
        linear-gradient(
            135deg,
            var(--saffron),
            var(--primary)
        );

    color: white;

    font-size: 23px;

    box-shadow:
        0 6px 18px rgba(139, 69, 19, .22);

}


.brand-title {

    font-size: 19px;

    font-weight: 800;

    line-height: 1.1;

}


.brand-subtitle {

    font-size: 10px;

    color: var(--muted);

    letter-spacing: .5px;

}


.nav-link {

    color: #604b3b !important;

    font-weight: 600;

    padding:
        9px 14px !important;

    border-radius: 12px;

}


.nav-link:hover {

    background: var(--saffron-light);

    color: var(--primary) !important;

}


.btn-login {

    border: 1px solid var(--primary);

    color: var(--primary);

    font-weight: 700;

    border-radius: 30px;

    padding:
        9px 20px;

}


.btn-login:hover {

    background: var(--primary);

    color: white;

}


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

.hero {

    position: relative;

    overflow: hidden;

    padding:
        85px 0 100px;

    background:

        radial-gradient(
            circle at 90% 20%,
            rgba(245,158,11,.18),
            transparent 30%
        ),

        radial-gradient(
            circle at 10% 80%,
            rgba(139,69,19,.10),
            transparent 30%
        ),

        var(--cream);

}


.hero::before {

    content: "ॐ";

    position: absolute;

    right: -30px;
    top: 30px;

    font-size: 230px;

    font-weight: 800;

    color:
        rgba(139,69,19,.035);

}


.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        8px 15px;

    border-radius: 30px;

    background:
        rgba(245,158,11,.12);

    color:
        var(--primary);

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 22px;

}


.hero h1 {

    font-size:
        clamp(2.2rem, 5vw, 4rem);

    line-height: 1.18;

    font-weight: 800;

    letter-spacing: -1px;

}


.hero h1 span {

    color: var(--primary);

}


.hero-text {

    max-width: 680px;

    color: var(--muted);

    font-size: 17px;

    line-height: 1.9;

    margin-top: 22px;

}


.hero-buttons {

    margin-top: 30px;

}


.btn-primary-custom {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: none;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #a95c1a
        );

    color: white;

    font-weight: 700;

    border-radius: 30px;

    padding:
        13px 24px;

    box-shadow:
        0 10px 25px
        rgba(139,69,19,.22);

    transition:
        .25s ease;

}


.btn-primary-custom:hover {

    color: white;

    transform: translateY(-2px);

    box-shadow:
        0 14px 30px
        rgba(139,69,19,.28);

}


.btn-outline-custom {

    display: inline-flex;

    align-items: center;

    justify-content: center;

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

    color: var(--primary);

    font-weight: 700;

    border-radius: 30px;

    padding:
        12px 22px;

    background: white;

}


.btn-outline-custom:hover {

    background:
        var(--saffron-light);

    color: var(--primary);

}


/*
|--------------------------------------------------------------------------
| JAP PREVIEW
|--------------------------------------------------------------------------
*/

.jap-preview-wrapper {

    display: flex;

    justify-content: center;

}


.jap-preview {

    width: 100%;

    max-width: 340px;

    padding: 24px;

    border-radius: 32px;

    background: white;

    border:
        1px solid rgba(139,69,19,.10);

    box-shadow:
        0 25px 60px
        rgba(70,39,15,.15);

    transform:
        rotate(1deg);

}


.phone-top {

    text-align: center;

    padding-bottom: 18px;

}


.phone-top small {

    color: var(--muted);

}


.jap-name {

    font-size: 27px;

    font-weight: 800;

    color: var(--primary);

    margin-top: 4px;

}


.progress-box {

    padding: 18px;

    border-radius: 20px;

    background:
        var(--saffron-light);

}


.progress {

    height: 9px;

    border-radius: 20px;

    background:
        #eadfd3;

}


.progress-bar {

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--saffron),
            var(--primary)
        );

}


.jap-count {

    font-size: 30px;

    font-weight: 800;

    color: var(--primary);

}


/*
|--------------------------------------------------------------------------
| 9 BUTTON KEYPAD
|--------------------------------------------------------------------------
*/

.jap-buttons {

    display: grid;

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

    gap: 10px;

    margin-top: 20px;

}


.jap-btn {

    aspect-ratio: 1;

    border-radius: 16px;

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

    background:
        #fffaf5;

    color:
        var(--text);

    font-size: 18px;

    font-weight: 800;

    cursor: pointer;

    transition:
        .18s ease;

}


.jap-btn:hover {

    transform:
        scale(1.04);

}


.jap-btn.active {

    background:
        linear-gradient(
            135deg,
            var(--saffron),
            var(--primary)
        );

    color: white;

    border-color:
        transparent;

    box-shadow:
        0 8px 20px
        rgba(139,69,19,.25);

}


.focus-note {

    text-align: center;

    color: var(--muted);

    font-size: 11px;

    margin-top: 15px;

}


/*
|--------------------------------------------------------------------------
| STATS
|--------------------------------------------------------------------------
*/

.stats-strip {

    position: relative;

    margin-top: -35px;

    z-index: 5;

}


.stat-card {

    height: 100%;

    background: white;

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

    border-radius: 20px;

    padding: 22px 15px;

    text-align: center;

    box-shadow:
        var(--shadow);

}


.stat-icon {

    font-size: 23px;

    color: var(--primary);

}


.stat-number {

    font-size: 23px;

    font-weight: 800;

    color: var(--primary);

    margin-top: 5px;

}


.stat-label {

    font-size: 13px;

    color: var(--muted);

}


/*
|--------------------------------------------------------------------------
| SECTIONS
|--------------------------------------------------------------------------
*/

.section {

    padding:
        90px 0;

}


.section-title {

    max-width: 760px;

    margin:
        0 auto 45px;

    text-align: center;

}


.eyebrow {

    display: inline-block;

    color: var(--primary);

    font-size: 13px;

    font-weight: 800;

    margin-bottom: 10px;

}


.section-title h2 {

    font-size:
        clamp(1.8rem, 4vw, 2.7rem);

    font-weight: 800;

    margin-bottom: 15px;

}


.section-title p {

    color: var(--muted);

    line-height: 1.8;

}


/*
|--------------------------------------------------------------------------
| FEATURE CARDS
|--------------------------------------------------------------------------
*/

.feature-card {

    height: 100%;

    padding: 30px;

    border-radius:
        var(--radius);

    background: white;

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

    box-shadow:
        0 8px 25px
        rgba(91,52,20,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.feature-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 18px 40px
        rgba(91,52,20,.11);

}


.feature-icon {

    width: 55px;
    height: 55px;

    border-radius: 17px;

    display: flex;

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

    background:
        var(--saffron-light);

    color:
        var(--primary);

    font-size: 25px;

    margin-bottom: 20px;

}


.feature-card h5 {

    font-weight: 800;

    margin-bottom: 10px;

}


.feature-card p {

    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;

    margin: 0;

}


/*
|--------------------------------------------------------------------------
| FOCUS SECTION
|--------------------------------------------------------------------------
*/

.focus-section {

    background:
        linear-gradient(
            135deg,
            #351a0b,
            #5d2e0c
        );

    color: white;

    position: relative;

    overflow: hidden;

}


.focus-section::after {

    content: "॥";

    position: absolute;

    right: 5%;

    bottom: -80px;

    font-size: 260px;

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

}


.focus-section .section-title p {

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

}


.mini-keypad {

    max-width: 320px;

    margin: auto;

    padding: 25px;

    border-radius: 30px;

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

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

    backdrop-filter:
        blur(10px);

}


.mini-keypad-grid {

    display: grid;

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

    gap: 12px;

}


.mini-key {

    aspect-ratio: 1;

    display: flex;

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

    border-radius: 18px;

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

    font-size: 22px;

    font-weight: 800;

}


.mini-key.active {

    background:
        linear-gradient(
            135deg,
            var(--saffron),
            #c2410c
        );

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

}


/*
|--------------------------------------------------------------------------
| MILESTONE
|--------------------------------------------------------------------------
*/

.milestone-card {

    height: 100%;

    text-align: center;

    background: white;

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

    border-radius:
        var(--radius);

    padding: 28px 20px;

    box-shadow:
        var(--shadow);

}


.milestone-icon {

    font-size: 42px;

    margin-bottom: 10px;

}


.milestone-number {

    font-size: 27px;

    font-weight: 800;

    color: var(--primary);

}


/*
|--------------------------------------------------------------------------
| RANKING
|--------------------------------------------------------------------------
*/

.ranking-box {

    max-width: 720px;

    margin: auto;

    background: white;

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

    border-radius: 25px;

    overflow: hidden;

    box-shadow:
        var(--shadow);

}


.ranking-header {

    padding: 18px 22px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #a95c1a
        );

    color: white;

    font-weight: 800;

}


.rank-row {

    display: grid;

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

    align-items: center;

    gap: 10px;

    padding:
        17px 22px;

    border-bottom:
        1px solid #f0e8df;

}


.rank-row:last-child {

    border-bottom: none;

    background:
        var(--saffron-light);

}


.rank-position {

    font-weight: 800;

    color: var(--primary);

}


.rank-name {

    font-weight: 700;

}


.rank-count {

    font-weight: 800;

    color: var(--primary);

}


/*
|--------------------------------------------------------------------------
| PRODUCT CARDS
|--------------------------------------------------------------------------
*/

.product-card {

    height: 100%;

    overflow: hidden;

    background: white;

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

    border-radius:
        var(--radius);

    box-shadow:
        0 8px 25px
        rgba(91,52,20,.06);

}


.product-image {

    height: 145px;

    display: flex;

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

    background:
        linear-gradient(
            135deg,
            #fff7ed,
            #ffedd5
        );

    font-size: 60px;

}


.product-content {

    padding: 18px;

}


.sponsored {

    display: inline-block;

    font-size: 9px;

    padding:
        3px 8px;

    border-radius: 20px;

    background:
        #f3f0ec;

    color:
        #806e5f;

}


/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.cta {

    padding:
        90px 20px;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            #fff1dc,
            var(--cream)
        );

}


.cta h2 {

    font-weight: 800;

    font-size:
        clamp(1.8rem, 4vw, 2.8rem);

}


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

footer {

    background:
        #29150a;

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

    padding:
        65px 0 30px;

}


.footer-brand {

    color: white;

    font-size: 22px;

    font-weight: 800;

}


footer a {

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

}


footer a:hover {

    color: white;

}


footer hr {

    border-color:
        rgba(255,255,255,.10);

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 991px) {


    .navbar-collapse {

        padding:
            15px 0;

    }


    .nav-actions {

        margin-top: 10px;

    }


    .hero {

        padding:
            60px 0 80px;

    }


    .hero::before {

        font-size: 150px;

    }


    .hero h1 {

        letter-spacing: 0;

    }


}


@media (max-width: 767px) {


    .section {

        padding:
            65px 0;

    }


    .hero {

        text-align: center;

    }


    .hero-text {

        font-size: 15px;

    }


    .hero-buttons {

        justify-content: center;

    }


    .hero-buttons .btn {

        width: 100%;

    }


    .jap-preview {

        transform:
            none;

    }


    .stats-strip {

        margin-top: -25px;

    }


    .stat-card {

        padding:
            17px 10px;

    }


    .stat-number {

        font-size: 19px;

    }


    .stat-label {

        font-size: 11px;

    }


    .feature-card {

        padding:
            24px;

    }


    .rank-row {

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

        padding:
            15px;

    }


}


@media (max-width: 400px) {


    .brand-title {

        font-size: 16px;

    }


    .brand-subtitle {

        font-size: 9px;

    }


    .brand-logo {

        width: 40px;
        height: 40px;

    }


    .hero {

        padding-top:
            45px;

    }


    .hero h1 {

        font-size:
            2rem;

    }


    .jap-preview {

        padding:
            18px;

    }


}









/*
|--------------------------------------------------------------------------
| PWA INSTALL BUTTON
|--------------------------------------------------------------------------
*/

.btn-install {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: none;

    background:
        linear-gradient(
            135deg,
            #f59e0b,
            #d97706
        );

    color: white;

    font-weight: 800;

    border-radius: 30px;

    padding:
        9px 17px;

    box-shadow:
        0 7px 20px
        rgba(217,119,6,.25);

    animation:
        installPulse 2.5s infinite;

}


.btn-install:hover {

    color: white;

    transform:
        translateY(-2px);

}


.btn-install-hero {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: none;

    background:
        linear-gradient(
            135deg,
            #f59e0b,
            #d97706
        );

    color: white;

    font-weight: 800;

    border-radius: 30px;

    padding:
        13px 23px;

    box-shadow:
        0 10px 28px
        rgba(217,119,6,.28);

}


.btn-install-hero:hover {

    color: white;

    transform:
        translateY(-2px);

}


@keyframes installPulse {

    0% {
        box-shadow:
            0 7px 20px
            rgba(217,119,6,.25);
    }

    50% {
        box-shadow:
            0 7px 28px
            rgba(217,119,6,.45);
    }

    100% {
        box-shadow:
            0 7px 20px
            rgba(217,119,6,.25);
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE INSTALL BUTTON
|--------------------------------------------------------------------------
*/

@media (max-width: 767px) {

    .btn-install {

        width: 100%;

        padding:
            11px 18px;

        margin-bottom: 8px;

    }


    .btn-install-hero {

        width: 100%;

        margin-top: 10px;

    }

}