/* =========================================================
   SURAJ SHIKSHA
   GLOBAL DESIGN SYSTEM
   ========================================================= */

:root {
    --navy: #0f1b2a;
    --navy-soft: #172637;

    --gold: #b28d4e;
    --gold-light: #c7a66a;

    --white: #ffffff;
    --ivory: #fafbf9;
    --page: #f5f7f6;

    --text: #17232f;
    --text-soft: #69757e;
    --text-muted: #929ba1;

    --border: #e1e6e3;
    --border-soft: #edf0ee;

    --success: #34764b;
    --danger: #a43a3a;

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 30px;

    --shadow-soft:
        0 10px 35px rgba(20, 30, 40, 0.05);

    --shadow-premium:
        0 25px 70px rgba(20, 30, 40, 0.10);

    --transition:
        220ms cubic-bezier(.22, .61, .36, 1);
}


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    color: var(--text);
    background: var(--page);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
}

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

a {
    color: inherit;
}


/* =========================================================
   COMMON TYPOGRAPHY
   ========================================================= */

.eyebrow {
    display: inline-block;

    font-size: 10px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: 0.16em;

    color: var(--gold);

    text-transform: uppercase;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.primary-btn,
.outline-btn,
.danger-btn {

    min-height: 48px;

    padding:
        0 18px;

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

    display: inline-flex;

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

    gap: 9px;

    text-decoration: none;

    font-weight: 650;

    font-size: 13px;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background var(--transition),
        border-color var(--transition);

    user-select: none;
}


/* PRIMARY */

.primary-btn {

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

    background:
        var(--navy);

    color:
        var(--white);

    box-shadow:
        0 9px 24px rgba(15, 27, 42, 0.13);
}

.primary-btn:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 13px 30px rgba(15, 27, 42, 0.18);
}

.primary-btn:active {

    transform:
        translateY(1px);

    box-shadow:
        0 5px 15px rgba(15, 27, 42, 0.12);
}


/* OUTLINE */

.outline-btn {

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

    background:
        var(--white);

    color:
        var(--text);
}

.outline-btn:hover {

    border-color:
        #c4ccc8;

    background:
        #fafcfb;
}


/* DANGER */

.danger-btn {

    border:
        1px solid #efd0d0;

    background:
        #fff7f7;

    color:
        var(--danger);
}

.danger-btn:hover {

    background:
        #fff0f0;
}


/* =========================================================
   LANDING PAGE
   ========================================================= */

.landing-page {

    min-height:
        100svh;

    display:
        grid;

    place-items:
        center;

    padding:
        24px;

    background:

        radial-gradient(
            circle at 50% 15%,
            #ffffff 0%,
            #f7f8f6 48%,
            #edf1ee 100%
        );
}


.landing-card {

    width:
        min(520px, 100%);

    padding:
        54px 38px;

    text-align:
        center;

    background:
        rgba(255, 255, 255, 0.88);

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

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

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

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);
}


.brand-area {

    display:
        flex;

    justify-content:
        center;

    margin-bottom:
        28px;
}


.brand-logo {

    width:
        min(190px, 55vw);

    height:
        auto;

    object-fit:
        contain;
}


.landing-card h1 {

    margin:
        14px 0 18px;

    font-size:
        clamp(42px, 9vw, 72px);

    line-height:
        0.98;

    letter-spacing:
        -0.055em;

    font-weight:
        720;

    color:
        var(--text);
}


.landing-card h1 em {

    font-style:
        normal;

    color:
        var(--gold);
}


.landing-description {

    max-width:
        410px;

    margin:
        0 auto 28px;

    color:
        var(--text-soft);

    font-size:
        14px;

    line-height:
        1.7;
}


.landing-btn {

    width:
        100%;

    margin-bottom:
        15px;
}


.btn-arrow {

    font-size:
        18px;

    line-height:
        1;
}


.micro-copy {

    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        10px;

    line-height:
        1.5;
}


/* =========================================================
   SUCCESS
   ========================================================= */

.success-card {

    padding-top:
        48px;
}


.success-icon {

    width:
        72px;

    height:
        72px;

    margin:
        0 auto 24px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #edf6ef;

    color:
        var(--success);

    font-size:
        31px;

    font-weight:
        700;

    box-shadow:
        0 12px 30px rgba(52, 118, 75, 0.08);
}


/* =========================================================
   TOAST
   ========================================================= */

.toast {

    position:
        fixed;

    left:
        50%;

    bottom:
        26px;

    z-index:
        9999;

    transform:
        translate(-50%, 20px);

    opacity:
        0;

    pointer-events:
        none;

    background:
        var(--navy);

    color:
        white;

    padding:
        12px 17px;

    border-radius:
        12px;

    font-size:
        12px;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.18);

    transition:
        opacity var(--transition),
        transform var(--transition);
}


.toast.show {

    opacity:
        1;

    transform:
        translate(-50%, 0);
}


/* =========================================================
   FOCUS ACCESSIBILITY
   ========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {

    outline:
        3px solid rgba(178, 141, 78, 0.25);

    outline-offset:
        2px;
}


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

@media (max-width: 520px) {

    .landing-page {
        padding:
            14px;
    }

    .landing-card {

        padding:
            44px 22px;

        border-radius:
            26px;
    }

    .landing-card h1 {

        font-size:
            clamp(40px, 12vw, 58px);
    }
}


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

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

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition:
            none !important;

        animation:
            none !important;
    }
}