/* ==========================================================================
   UNITDIME — GLOBAL DESIGN SYSTEM
   ========================================================================== */


/* ---------- Theme variables ---------- */

:root {
    --bg: #f7f8fc;
    --surface: rgba(255, 255, 255, 0.82);
    --surface-solid: #ffffff;

    --text: #111827;
    --text-soft: #667085;

    --border: rgba(17, 24, 39, 0.08);

    --primary: #635bff;
    --primary-dark: #5046e5;

    --radius-small: 12px;
    --radius-medium: 20px;
    --radius-large: 30px;

    --shadow:
        0 20px 60px rgba(20, 24, 40, 0.08);

    --container: 1180px;
}


/* ---------- Base ---------- */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(99, 91, 255, 0.09),
            transparent 32%
        ),
        var(--bg);

    color: var(--text);

    line-height: 1.6;
}


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


.container {
    width: min(92%, var(--container));
    margin-inline: auto;
}


.narrow {
    max-width: 820px;
}


/* ---------- Navigation ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;

    backdrop-filter: blur(18px);

    background: rgba(247, 248, 252, 0.78);

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


.navbar {
    min-height: 76px;

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


.brand {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}


.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;

    color: var(--text-soft);
}


.nav-links a {
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


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


/* ---------- Buttons ---------- */

.button {
    display: inline-flex;

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

    min-height: 48px;

    padding: 0 22px;

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

    font-weight: 700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.button:hover {
    transform: translateY(-2px);
}


.button-primary {
    color: white;

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

    box-shadow:
        0 14px 30px rgba(99, 91, 255, 0.24);
}


.button-primary:hover {
    background: var(--primary-dark);
}


.button-secondary {
    background: var(--surface-solid);

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


.button-small {
    min-height: 40px;
    padding: 0 17px;

    color: white;

    background: var(--text);
}


/* ---------- Typography ---------- */

.eyebrow {
    display: inline-block;

    margin-bottom: 14px;

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: var(--primary);
}


h1,
h2,
h3 {
    margin-top: 0;

    line-height: 1.1;

    letter-spacing: -0.04em;
}


h1 {
    font-size: clamp(3rem, 7vw, 5.6rem);
}


h2 {
    font-size: clamp(2rem, 4vw, 3.4rem);
}


h3 {
    font-size: 1.2rem;
}


.gradient-text {
    background:
        linear-gradient(
            120deg,
            var(--primary),
            #a855f7
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


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

.hero {
    padding: 110px 0 90px;
}


.hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(340px, 0.9fr);

    gap: 80px;

    align-items: center;
}


.hero-description {
    max-width: 680px;

    font-size: 1.18rem;

    color: var(--text-soft);
}


.hero-actions {
    display: flex;
    gap: 14px;

    flex-wrap: wrap;

    margin: 32px 0;
}


.hero-exams {
    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    color: var(--text-soft);

    font-size: 0.92rem;
}


.hero-exams strong {
    color: var(--text);
}


/* ---------- Dashboard preview ---------- */

.hero-preview {
    padding: 22px;

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

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.96),
            rgba(255,255,255,0.72)
        );

    box-shadow: var(--shadow);

    transform: rotate(1deg);
}


.preview-top {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;

    margin-bottom: 18px;
}


.preview-label {
    color: var(--text-soft);

    font-size: 0.85rem;
}


.streak-pill {
    padding: 8px 12px;

    border-radius: 999px;

    background: #fff2e5;

    font-size: 0.84rem;

    font-weight: 700;
}


.preview-card {
    display: flex;
    flex-direction: column;

    gap: 9px;

    padding: 18px;

    margin-top: 12px;

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

    border-radius: 18px;

    background: rgba(255,255,255,0.72);
}


.progress-row {
    display: flex;

    align-items: center;

    gap: 12px;
}


.progress-bar {
    flex: 1;

    height: 8px;

    overflow: hidden;

    border-radius: 999px;

    background: #eceef5;
}


.progress-fill {
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            #9b8cff
        );
}


.progress-72 {
    width: 72%;
}


.big-number {
    font-size: 2rem;
}


/* ---------- Sections ---------- */

.section {
    padding: 100px 0;
}


.section-heading {
    max-width: 720px;

    margin-bottom: 46px;
}


.section-heading p {
    color: var(--text-soft);

    font-size: 1.05rem;
}


/* ---------- Feature cards ---------- */

.feature-grid {
    display: grid;

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

    gap: 18px;
}


.feature-card,
.exam-card {
    padding: 28px;

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

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

    background: var(--surface);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.feature-card:hover,
.exam-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 22px 45px rgba(20, 24, 40, 0.08);
}


.feature-card p,
.exam-card p {
    margin-bottom: 0;

    color: var(--text-soft);
}


.feature-icon {
    display: block;

    margin-bottom: 24px;

    font-size: 1.6rem;
}


/* ---------- Exams ---------- */

.exam-grid {
    display: grid;

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

    gap: 18px;
}


.exam-card > span {
    display: inline-block;

    margin-bottom: 20px;

    color: var(--primary);

    font-weight: 800;
}


/* ---------- About ---------- */

.page-hero {
    padding: 120px 0 70px;
}


.page-hero p {
    font-size: 1.15rem;

    color: var(--text-soft);
}


.about-grid {
    display: grid;

    grid-template-columns:
        1.1fr 0.9fr;

    gap: 70px;
}


.about-grid p {
    color: var(--text-soft);
}


.about-highlight {
    padding: 32px;

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

    background: #111827;

    color: white;
}


.about-highlight span {
    color: #a8a4ff;

    font-size: 0.82rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.1em;
}


.about-highlight blockquote {
    margin: 25px 0 0;

    font-size: 1.65rem;

    line-height: 1.45;

    letter-spacing: -0.03em;
}


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

.cta-section {
    padding: 50px 0 110px;
}


.cta-card {
    padding: clamp(35px, 7vw, 80px);

    text-align: center;

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

    color: white;

    background:
        linear-gradient(
            135deg,
            #111827,
            #25223e
        );
}


.cta-card p {
    max-width: 620px;

    margin:
        0 auto 28px;

    color: #c9cbd2;
}


/* ---------- Footer ---------- */

.site-footer {
    padding: 34px 0;

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


.footer-content {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    color: var(--text-soft);
}


.footer-content p {
    margin: 4px 0 0;
}


/* ---------- Responsive ---------- */

@media (max-width: 900px) {

    .hero-grid,
    .about-grid {
        grid-template-columns: 1fr;
    }


    .hero-preview {
        transform: none;
    }


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

}


@media (max-width: 650px) {

    .nav-links > a:not(.button) {
        display: none;
    }


    .hero {
        padding-top: 75px;
    }


    .feature-grid,
    .exam-grid {
        grid-template-columns: 1fr;
    }


    .footer-content {
        flex-direction: column;

        align-items: flex-start;
    }

}
/* ==========================================================================
   AUTHENTICATION
   ========================================================================== */

.auth-section {
    min-height: calc(100vh - 76px);

    display: flex;
    align-items: center;

    padding: 80px 0 110px;
}


.auth-container {
    width: min(92%, 500px);

    margin-inline: auto;
}


.auth-heading {
    margin-bottom: 32px;

    text-align: center;
}


.auth-heading h1 {
    margin-bottom: 14px;

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


.auth-heading p {
    margin: 0;

    color: var(--text-soft);
}


.auth-card {
    padding: 32px;

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

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

    background: var(--surface-solid);

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


/* ---------- Forms ---------- */

.form-group {
    margin-bottom: 20px;
}


.form-group label {
    display: block;

    margin-bottom: 8px;

    font-size: 0.9rem;

    font-weight: 700;
}


.form-input {
    width: 100%;
    height: 50px;

    padding: 0 15px;

    border: 1px solid #d9dce5;
    border-radius: 12px;

    outline: none;

    background: #ffffff;

    color: var(--text);

    font: inherit;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.form-input:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 4px rgba(99, 91, 255, 0.1);
}


.form-error {
    display: block;

    margin-top: 6px;

    color: #c83232;

    font-size: 0.82rem;
}


.form-helper {
    display: flex;

    justify-content: flex-end;

    margin-top: -8px;
    margin-bottom: 20px;

    font-size: 0.87rem;
}


.form-helper a,
.auth-switch a,
.auth-institution a {
    color: var(--primary);

    font-weight: 700;
}


.auth-submit {
    width: 100%;

    border: 0;
    cursor: pointer;

    font: inherit;
}


/* ---------- Google placeholder ---------- */

.auth-divider {
    display: flex;
    align-items: center;

    gap: 14px;

    margin: 24px 0;

    color: var(--text-soft);

    font-size: 0.8rem;
}


.auth-divider::before,
.auth-divider::after {
    content: "";

    flex: 1;

    height: 1px;

    background: var(--border);
}


.google-button {
    width: 100%;
    min-height: 48px;

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

    gap: 10px;

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

    background: #ffffff;

    color: var(--text);

    font: inherit;
    font-weight: 700;

    opacity: 0.65;
}


.google-button small {
    color: var(--text-soft);

    font-weight: 500;
}


.auth-switch,
.auth-institution {
    margin: 24px 0 0;

    text-align: center;

    color: var(--text-soft);

    font-size: 0.9rem;
}


.auth-institution {
    margin-top: 10px;
}


/* ---------- Flash messages ---------- */

/* Smooth appearance/disappearance for notifications. */

.flash-message {
    transition:
        opacity 300ms ease,
        transform 300ms ease;
}


.flash-hide {
    opacity: 0;

    transform: translateY(-8px);

    pointer-events: none;
}

.flash-container {
    position: fixed;

    top: 92px;
    left: 50%;

    z-index: 1000;

    width: min(92%, 500px);

    transform: translateX(-50%);
}


.flash-message {
    padding: 14px 18px;

    margin-bottom: 10px;

    border-radius: 12px;

    box-shadow: var(--shadow);

    font-weight: 600;
}


.flash-success {
    background: #ecfdf3;

    color: #167647;

    border: 1px solid #b7ebce;
}


.flash-error {
    background: #fff1f1;

    color: #b42318;

    border: 1px solid #ffc9c9;
}


/* ---------- Logged-in navbar ---------- */

.nav-user {
    color: var(--text);

    font-size: 0.9rem;

    font-weight: 700;
}


.nav-logout-form {
    margin: 0;
}


.nav-logout {
    padding: 0;

    border: 0;

    background: transparent;

    color: var(--text-soft);

    font: inherit;

    cursor: pointer;
}


.nav-logout:hover {
    color: var(--text);
}
/* ==========================================================================
   MODERN INTERACTION POLISH
   ========================================================================== */

/*
 * Keep interactions subtle.
 * Buttons should feel responsive without visibly "jumping".
 */

.button {
    transition:
        transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
}


.button:hover {
    transform: translateY(-1px);
}


.button:active {
    transform: translateY(0) scale(0.985);
}


.button-primary:hover {
    background:
        linear-gradient(
            135deg,
            #5b54f2,
            #7167ff
        );

    box-shadow:
        0 10px 24px rgba(99, 91, 255, 0.22);
}


.button-secondary:hover {
    background: #ffffff;

    border-color: rgba(99, 91, 255, 0.22);

    box-shadow:
        0 8px 20px rgba(20, 24, 40, 0.06);
}


.button-small:hover {
    box-shadow:
        0 7px 18px rgba(17, 24, 39, 0.15);
}


/* Clear keyboard focus without affecting mouse clicks. */

.button:focus-visible,
.nav-logout:focus-visible {
    outline: 3px solid rgba(99, 91, 255, 0.22);
    outline-offset: 3px;
}


/*
 * Respect users who have reduced-motion enabled
 * in their operating system.
 */

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

    .button {
        transition: none;
    }

    .button:hover,
    .button:active {
        transform: none;
    }
}
/* ==========================================================================
   GOOGLE SIGN-IN
   ========================================================================== */

.google-auth-section {
    margin-bottom: 4px;
}


.google-auth-label {
    margin: 0 0 10px;

    color: var(--text-soft);

    font-size: 0.82rem;
    font-weight: 650;

    text-align: center;
}


/*
 * Keep Google's official button perfectly centered
 * within the same width as the email/password fields.
 */
.google-signin-container {
    width: 100%;

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

    min-height: 44px;
}


/*
 * Google's button itself is rendered by Google,
 * so we style its placement rather than altering
 * Google's branding internally.
 */
.google-signin-container > div {
    display: flex;
    justify-content: center;

    width: 100%;
}


.google-auth-message {
    min-height: 18px;

    margin: 9px 0 0;

    color: #b42318;

    text-align: center;

    font-size: 0.84rem;
}


/* Make the divider spacing feel balanced. */

.auth-divider {
    margin: 26px 0 24px;
}


.auth-divider span {
    white-space: nowrap;
}


/* Smaller screens need a little less auth-card padding. */

@media (max-width: 540px) {

    .auth-card {
        padding: 26px 20px;
    }

}
/* ==========================================================================
   UNITDIME UI POLISH + RESPONSIVE OVERRIDES
   ========================================================================== */


/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {
    --kinetix-primary: #635bff;
    --kinetix-primary-hover: #564df0;
    --kinetix-primary-dark: #4840d8;

    --kinetix-soft: #f1efff;
    --kinetix-soft-hover: #e9e6ff;

    --kinetix-border: #e3e1f3;

    --kinetix-text: #141827;
    --kinetix-muted: #667085;
}


/* Prevent accidental horizontal overflow anywhere on public pages. */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}


main {
    min-width: 0;
}


/* ==========================================================================
   GLOBAL SMALL TEXT / EYEBROWS
   ========================================================================== */

.eyebrow,
.auth-heading .eyebrow {
    color: #5d54ef;

    font-size: 0.75rem;
    font-weight: 760;

    letter-spacing: 0.11em;
    text-transform: uppercase;
}


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

/*
 * UnitDime actions should use the brand colour rather than black.
 */

.button-primary,
.site-header .button-small {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #635bff 0%,
            #756aff 100%
        ) !important;

    border: 1px solid transparent !important;

    box-shadow:
        0 8px 20px rgba(99, 91, 255, 0.20) !important;
}


.button-primary:hover,
.site-header .button-small:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #574ef1 0%,
            #685df6 100%
        ) !important;

    box-shadow:
        0 10px 24px rgba(99, 91, 255, 0.26) !important;

    transform: translateY(-1px);
}


.button-primary:active,
.site-header .button-small:active {
    transform: translateY(0) scale(0.985);
}


/* Make the navbar CTA slightly smaller and cleaner. */

.site-header .button-small {
    min-height: 40px;

    padding: 9px 18px;

    border-radius: 12px;

    font-size: 0.88rem;
    font-weight: 700;
}


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

.button-secondary {
    color: #554de0 !important;

    background: #f6f5ff !important;

    border:
        1px solid
        #dedaff !important;

    box-shadow: none !important;
}


.button-secondary:hover {
    color: #4d45d5 !important;

    background: #eeecff !important;

    border-color: #cbc6ff !important;

    box-shadow:
        0 7px 18px rgba(99, 91, 255, 0.08) !important;
}


/* ==========================================================================
   PUBLIC NAVBAR
   ========================================================================== */

.site-header {
    min-height: 70px;
}


.site-header .container {
    min-height: 70px;
}


/* Links shouldn't look washed out. */

.site-header a:not(.button) {
    color: #596174;
}


.site-header a:not(.button):hover {
    color: #4f46dc;
}


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

.hero {
    min-height: auto !important;

    padding:
        clamp(64px, 7vw, 92px)
        0
        clamp(70px, 8vw, 104px) !important;
}


.hero-grid {
    gap:
        clamp(44px, 6vw, 80px);
}


/*
 * Previous heading was visually too dominant.
 * This remains a strong hero but uses the screen more efficiently.
 */

.hero-content h1 {
    max-width: 700px;

    font-size:
        clamp(
            3rem,
            5.2vw,
            4.7rem
        ) !important;

    line-height: 0.99;

    letter-spacing: -0.055em;
}


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

    margin-top: 26px;

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.12rem
        );

    line-height: 1.65;
}


.hero-actions {
    margin-top: 28px;

    gap: 12px;
}


.hero-actions .button {
    min-height: 46px;

    padding:
        11px
        20px;

    border-radius: 12px;

    font-size: 0.9rem;
}


/* Dashboard preview should not dominate the page. */

.hero-preview {
    width: 100%;
    max-width: 510px;

    justify-self: end;
}


/* ==========================================================================
   PUBLIC CONTENT SECTIONS
   ========================================================================== */

.section {
    padding:
        clamp(58px, 7vw, 88px)
        0;
}


.section-heading {
    margin-bottom:
        clamp(28px, 4vw, 44px);
}


.section-heading h2 {
    font-size:
        clamp(
            1.8rem,
            3.5vw,
            2.7rem
        );
}


.feature-grid,
.exam-grid {
    gap:
        clamp(
            14px,
            2vw,
            22px
        );
}


.feature-card,
.exam-card {
    padding:
        clamp(
            20px,
            2.5vw,
            28px
        );
}


/* ==========================================================================
   AUTH PAGE
   ========================================================================== */

/*
 * IMPORTANT:
 *
 * Don't vertically centre a tall form inside the viewport.
 * On shorter laptop screens this can push the heading behind
 * the navbar or make the top look clipped.
 */

.auth-section {
    min-height: 0 !important;

    align-items: flex-start !important;

    padding:
        34px
        18px
        64px !important;
}


.auth-container {
    width: min(
        100%,
        520px
    );

    margin-inline: auto;
}


.auth-heading {
    margin-bottom: 20px;

    text-align: center;
}


.auth-heading h1 {
    margin:
        6px
        0
        9px !important;

    font-size:
        clamp(
            1.8rem,
            3.5vw,
            2.45rem
        ) !important;

    line-height: 1.06;

    letter-spacing: -0.04em;
}


.auth-heading p {
    max-width: 460px;

    margin:
        0
        auto;

    color: #697184;

    font-size: 0.9rem;
    line-height: 1.55;
}


/* Auth card */

.auth-card {
    width: 100%;
    max-width: 460px;

    margin-inline: auto;

    padding:
        26px
        30px !important;

    border-radius: 22px;
}


/* Slightly reduce huge gaps inside forms. */

.auth-form {
    gap: 16px;
}


.auth-form label {
    font-size: 0.84rem;
    font-weight: 680;
}


.auth-form .form-input,
.auth-card .form-input {
    min-height: 47px;

    padding:
        11px
        14px;

    border-radius: 11px;

    font-size: 0.91rem;
}


/* ==========================================================================
   GOOGLE
   ========================================================================== */

.google-auth-section {
    margin-bottom: 0;
}


.google-auth-label {
    margin:
        0
        0
        11px;

    color: #667085;

    font-size: 0.76rem;
    font-weight: 680;
}


.google-signin-container {
    width: 100%;

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

    min-height: 44px;

    overflow: hidden;
}


.google-signin-container > div {
    max-width: 100%;
}


.google-auth-message {
    min-height: 14px;
}


.auth-divider {
    margin:
        22px
        0
        20px !important;
}


.auth-divider span {
    color: #7b8191;

    font-size: 0.78rem;
}


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

@media (max-width: 960px) {

    .hero {
        padding:
            56px
            0
            72px !important;
    }


    .hero-grid {
        grid-template-columns:
            1fr !important;

        gap: 46px;
    }


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


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

        justify-self: start;
    }


    .hero-content h1 {
        font-size:
            clamp(
                2.8rem,
                8vw,
                4.3rem
            ) !important;
    }
}


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

@media (max-width: 640px) {

    /*
     * Overall public page spacing
     */

    .container {
        width: min(
            100% - 32px,
            1180px
        ) !important;
    }


    .site-header,
    .site-header .container {
        min-height: 62px;
    }


    .site-header .button-small {
        min-height: 36px;

        padding:
            8px
            13px;

        border-radius: 10px;

        font-size: 0.76rem;
    }


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

    .hero {
        padding:
            42px
            0
            58px !important;
    }


    .hero-grid {
        gap: 38px;
    }


    .hero-content h1 {
        max-width: 100%;

        font-size:
            clamp(
                2.4rem,
                12.5vw,
                3.25rem
            ) !important;

        line-height: 1.01;
    }


    .hero-description {
        margin-top: 20px;

        font-size: 0.95rem;

        line-height: 1.6;
    }


    .hero-actions {
        display: grid;

        grid-template-columns: 1fr;

        width: 100%;

        gap: 10px;

        margin-top: 23px;
    }


    .hero-actions .button {
        width: 100%;

        justify-content: center;
    }


    .hero-preview {
        max-width: 100%;
    }


    /* --------------------------------------------------------------
       Sections
       -------------------------------------------------------------- */

    .section {
        padding:
            52px
            0;
    }


    .section-heading h2 {
        font-size: 1.85rem;
    }


    .feature-grid,
    .exam-grid {
        grid-template-columns:
            1fr !important;
    }


    /* --------------------------------------------------------------
       Auth
       -------------------------------------------------------------- */

    .auth-section {
        padding:
            24px
            12px
            46px !important;
    }


    .auth-container {
        width: 100%;
    }


    .auth-heading {
        margin-bottom: 16px;
    }


    .auth-heading .eyebrow {
        font-size: 0.66rem;
    }


    .auth-heading h1 {
        max-width: 340px;

        margin:
            5px
            auto
            8px !important;

        font-size:
            clamp(
                1.65rem,
                8vw,
                2rem
            ) !important;

        line-height: 1.05;
    }


    .auth-heading p {
        max-width: 330px;

        font-size: 0.8rem;

        line-height: 1.5;
    }


    .auth-card {
        max-width: 100%;

        padding:
            22px
            18px !important;

        border-radius: 18px;
    }


    .auth-divider {
        margin:
            19px
            0 !important;
    }


    .auth-form {
        gap: 14px;
    }


    .auth-form .form-input,
    .auth-card .form-input {
        min-height: 45px;

        font-size: 0.88rem;
    }
}


/* ==========================================================================
   SMALL PHONES
   ========================================================================== */

@media (max-width: 380px) {

    .container {
        width: min(
            100% - 24px,
            1180px
        ) !important;
    }


    .hero-content h1 {
        font-size: 2.25rem !important;
    }


    .auth-section {
        padding-inline: 10px !important;
    }


    .auth-card {
        padding:
            20px
            14px !important;
    }
}


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

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

    .button,
    .feature-card,
    .exam-card {
        transition: none !important;
    }
}
/* ==========================================================================
   UNITDIME HERO — STACKED PRODUCT SHOWCASE
   ========================================================================== */


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

.kinetix-hero {
    position: relative;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 12% 22%,
            rgba(105, 92, 255, 0.13),
            transparent 31%
        ),
        radial-gradient(
            circle at 86% 18%,
            rgba(154, 117, 255, 0.11),
            transparent 28%
        ),
        radial-gradient(
            circle at 65% 90%,
            rgba(111, 93, 255, 0.07),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #f7f7ff 0%,
            #f2f1ff 48%,
            #fafaff 100%
        );
}


/*
 * Very subtle grid.
 *
 * This gives it an academic / technology feel without
 * making the page look like graph paper.
 */

.kinetix-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -3;

    pointer-events: none;

    opacity: 0.30;

    background-image:

        linear-gradient(
            rgba(99, 91, 255, 0.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(99, 91, 255, 0.035) 1px,
            transparent 1px
        );

    background-size:
        40px
        40px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            rgba(0, 0, 0, 0.6) 60%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            rgba(0, 0, 0, 0.6) 60%,
            transparent 100%
        );
}


/* ==========================================================================
   AMBIENT GRADIENT ORBS
   ========================================================================== */

.hero-background-orb {
    position: absolute;

    z-index: -2;

    border-radius: 999px;

    pointer-events: none;

    filter: blur(4px);
}


.hero-background-orb-one {
    width: 380px;
    height: 380px;

    top: 25px;
    right: 25%;

    background:
        radial-gradient(
            circle,
            rgba(111, 91, 255, 0.14),
            transparent 68%
        );
}


.hero-background-orb-two {
    width: 450px;
    height: 450px;

    right: -150px;
    bottom: -220px;

    background:
        radial-gradient(
            circle,
            rgba(162, 119, 255, 0.13),
            transparent 68%
        );
}


/* ==========================================================================
   SHOWCASE WRAPPER
   ========================================================================== */

.hero-showcase {
    width: 100%;

    max-width: 505px;

    justify-self: end;

    /*
     * Give the rotated cards enough room so their corners
     * aren't clipped.
     */

    padding:
        26px
        24px
        22px
        20px;
}


/* ==========================================================================
   CARD STACK
   ========================================================================== */

.hero-card-stack {
    position: relative;

    width: 100%;

    height: 500px;

    perspective: 1500px;

    transform-style: preserve-3d;
}


/* ==========================================================================
   BASE CARD
   ========================================================================== */

.hero-product-card {
    position: absolute;

    inset:
        0
        auto
        auto
        0;

    width: 100%;

    min-height: 455px;

    padding: 27px;

    overflow: hidden;

    border:
        1px solid
        rgba(30, 32, 45, 0.075);

    border-radius: 27px;

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

    box-shadow:
        0 28px 65px
        rgba(
            45,
            38,
            103,
            0.10
        );

    transform-origin:
        center center;

    backface-visibility:
        hidden;

    transition:

        transform
        720ms
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        ),

        opacity
        500ms
        ease,

        filter
        500ms
        ease,

        box-shadow
        600ms
        ease;

    will-change:
        transform,
        opacity;

    pointer-events: none;
}


/*
 * Very subtle highlight inside each card.
 */

.hero-product-card::after {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    background:
        linear-gradient(
            140deg,
            rgba(255, 255, 255, 0.48),
            transparent 28%
        );
}


/* ==========================================================================
   CARD 1 — FRONT
   ========================================================================== */

.hero-product-card[
    data-stack-position="0"
] {
    z-index: 40;

    opacity: 1;

    pointer-events: auto;

    transform:
        translate3d(
            0,
            0,
            40px
        )
        rotate(-1.5deg)
        scale(1);

    filter:
        blur(0)
        saturate(1);

    box-shadow:
        0 30px 75px
        rgba(
            44,
            37,
            100,
            0.13
        );
}


/* ==========================================================================
   CARD 2 — FIRST BEHIND
   ========================================================================== */

.hero-product-card[
    data-stack-position="1"
] {
    z-index: 30;

    opacity: 0.88;

    transform:
        translate3d(
            21px,
            14px,
            0
        )
        rotate(3.2deg)
        scale(0.976);

    filter:
        saturate(0.91);
}


/* ==========================================================================
   CARD 3 — SECOND BEHIND
   ========================================================================== */

.hero-product-card[
    data-stack-position="2"
] {
    z-index: 20;

    opacity: 0.58;

    transform:
        translate3d(
            -9px,
            28px,
            -40px
        )
        rotate(-4.2deg)
        scale(0.95);

    filter:
        saturate(0.80);
}


/* ==========================================================================
   CARD 4 — LAST
   ========================================================================== */

.hero-product-card[
    data-stack-position="3"
] {
    z-index: 10;

    opacity: 0.30;

    transform:
        translate3d(
            30px,
            38px,
            -80px
        )
        rotate(5deg)
        scale(0.92);

    filter:
        saturate(0.68);
}


/* ==========================================================================
   EXIT ANIMATION
   ========================================================================== */

/*
 * The front card:
 *
 * 1. lifts slightly
 * 2. rotates
 * 3. slides left/up
 * 4. fades
 *
 * Then JS places it behind the stack.
 */

.hero-product-card.showcase-card-exit {
    z-index: 100 !important;

    opacity: 0 !important;

    transform:
        translate3d(
            -115px,
            -24px,
            90px
        )
        rotate(-8deg)
        scale(1.025)
        !important;

    box-shadow:
        0 36px 90px
        rgba(
            44,
            37,
            100,
            0.06
        );

    filter:
        saturate(0.9);
}


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

.showcase-card-top {
    position: relative;

    z-index: 2;

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

    gap: 18px;

    margin-bottom: 26px;
}


.showcase-kicker {
    display: block;

    margin-bottom: 5px;

    color: #655bea;

    font-size: 0.68rem;
    font-weight: 780;

    letter-spacing: 0.095em;

    text-transform: uppercase;
}


.showcase-card-top h3 {
    max-width: 300px;

    margin: 0;

    color: #171a29;

    font-size: 1.38rem;
    font-weight: 760;

    line-height: 1.15;

    letter-spacing: -0.032em;
}


/* ==========================================================================
   CHIPS
   ========================================================================== */

.showcase-streak {
    flex-shrink: 0;

    padding:
        9px
        12px;

    border-radius: 999px;

    background: #fff2e3;

    color: #282832;

    font-size: 0.76rem;
    font-weight: 720;
}


.showcase-icon-chip {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #eeebff,
            #e4e0ff
        );

    color: #5c53df;

    font-size: 1rem;
    font-weight: 800;
}


/* ==========================================================================
   TODAY / PREPARATION
   ========================================================================== */

.showcase-focus-total {
    position: relative;

    z-index: 2;

    margin-bottom: 21px;
}


.showcase-focus-total span {
    display: block;

    margin-bottom: 4px;

    color: #747b8c;

    font-size: 0.76rem;
}


.showcase-focus-total strong {
    color: #151927;

    font-size: 2rem;
    font-weight: 770;

    line-height: 1;

    letter-spacing: -0.05em;
}


/* ==========================================================================
   GENERAL METRIC
   ========================================================================== */

.showcase-metric {
    position: relative;

    z-index: 2;

    padding: 17px;

    border:
        1px solid
        #eaeaF1;

    border-radius: 16px;

    background: #ffffff;
}


.showcase-metric-heading,
.showcase-subject-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 12px;

    margin-bottom: 10px;

    color: #343847;

    font-size: 0.82rem;
}


.showcase-metric-heading strong,
.showcase-subject-heading strong {
    color: #252936;

    font-weight: 760;
}


/* ==========================================================================
   PROGRESS BARS
   ========================================================================== */

.showcase-progress {
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background: #ececf3;
}


.showcase-progress-fill {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #635bff,
            #9a84ff
        );
}


.showcase-progress-72 {
    width: 72%;
}


.showcase-progress-54 {
    width: 54%;
}


/* ==========================================================================
   MINI METRICS
   ========================================================================== */

.showcase-mini-grid {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 11px;

    margin-top: 12px;
}


.showcase-mini-grid > div {
    padding: 16px;

    border:
        1px solid
        #ececf3;

    border-radius: 15px;

    background: #ffffff;
}


.showcase-mini-grid span,
.showcase-session-stats span,
.showcase-result-grid span {
    display: block;

    margin-bottom: 4px;

    color: #7b8191;

    font-size: 0.71rem;
}


.showcase-mini-grid strong {
    color: #181c29;

    font-size: 1.25rem;
}


/* ==========================================================================
   SYLLABUS
   ========================================================================== */

.showcase-subject {
    position: relative;

    z-index: 2;

    margin-bottom: 17px;

    padding: 15px 17px;

    border:
        1px solid
        #ececf3;

    border-radius: 15px;

    background: #ffffff;
}


.showcase-chapter-row {
    position: relative;

    z-index: 2;

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

    gap: 12px;

    padding:
        12px
        5px;

    border-bottom:
        1px solid
        #f0f0f4;
}


.showcase-chapter-row:last-child {
    border-bottom: 0;
}


.showcase-chapter-row > div {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #313543;

    font-size: 0.8rem;
}


.showcase-chapter-row small {
    color: #7f8594;

    font-size: 0.68rem;
}


.showcase-status-dot {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;
}


.showcase-status-dot.completed {
    background: #22a06b;
}


.showcase-status-dot.progress {
    background: #f0a323;
}


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

.showcase-timer {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding:
        30px
        20px;

    border:
        1px solid
        #ececf3;

    border-radius: 20px;

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

    text-align: center;
}


.showcase-timer span {
    color: #6f7585;

    font-size: 0.77rem;
}


.showcase-timer strong {
    margin:
        12px
        0
        7px;

    color: #171a27;

    font-size: 2.5rem;
    font-weight: 750;

    line-height: 1;

    letter-spacing: -0.06em;
}


.showcase-timer small {
    color: #6259dd;

    font-size: 0.7rem;
    font-weight: 680;
}


.showcase-session-stats {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 10px;

    margin-top: 14px;
}


.showcase-session-stats > div {
    padding:
        14px
        10px;

    border:
        1px solid
        #ececf3;

    border-radius: 14px;

    background: #fff;

    text-align: center;
}


.showcase-session-stats strong {
    color: #202432;

    font-size: 1rem;
}


/* ==========================================================================
   PRACTICE
   ========================================================================== */

.showcase-practice-title {
    position: relative;

    z-index: 2;

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

    gap: 15px;

    padding:
        16px
        17px;

    border:
        1px solid
        #ececf3;

    border-radius: 15px;

    background: #ffffff;
}


.showcase-practice-title span {
    color: #303443;

    font-size: 0.81rem;
}


.showcase-practice-title strong {
    color: #6259e8;

    font-size: 0.91rem;
}


.showcase-result-grid {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 10px;

    margin:
        14px
        0;
}


.showcase-result-grid > div {
    padding:
        15px
        10px;

    border:
        1px solid
        #ececf3;

    border-radius: 14px;

    background: #ffffff;

    text-align: center;
}


.showcase-result-grid strong {
    color: #202432;

    font-size: 1.04rem;
}


.showcase-insight {
    position: relative;

    z-index: 2;

    padding: 16px;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #efedff,
            #f8f7ff
        );
}


.showcase-insight span,
.showcase-insight small {
    display: block;
}


.showcase-insight span {
    margin-bottom: 4px;

    color: #766d98;

    font-size: 0.66rem;
    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.showcase-insight strong {
    display: block;

    margin-bottom: 4px;

    color: #393251;

    font-size: 0.94rem;
}


.showcase-insight small {
    color: #716d7d;

    font-size: 0.7rem;
}


/* ==========================================================================
   INDICATORS
   ========================================================================== */

.hero-showcase-dots {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 13px;
}


.showcase-dot {
    width: 7px;
    height: 7px;

    border-radius: 999px;

    background:
        rgba(
            99,
            91,
            255,
            0.22
        );

    cursor: pointer;

    transition:
        width 280ms ease,
        background 280ms ease,
        transform 180ms ease;
}


.showcase-dot:hover {
    transform: scale(1.2);
}


.showcase-dot-active {
    width: 23px;

    background: #635bff;
}


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

@media (max-width: 960px) {

    .hero-showcase {
        max-width: 560px;

        justify-self: start;

        padding-right: 30px;
    }


    .hero-card-stack {
        height: 490px;
    }
}


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

@media (max-width: 640px) {

    .hero-showcase {
        width: 100%;
        max-width: 100%;

        padding:
            20px
            12px
            14px;
    }


    .hero-card-stack {
        height: 445px;
    }


    .hero-product-card {
        min-height: 410px;

        padding: 20px;

        border-radius: 21px;
    }


    /*
     * Keep visible rotation on mobile,
     * just use smaller angles.
     */

    .hero-product-card[
        data-stack-position="0"
    ] {
        transform:
            translate3d(
                0,
                0,
                30px
            )
            rotate(-1deg)
            scale(1);
    }


    .hero-product-card[
        data-stack-position="1"
    ] {
        transform:
            translate3d(
                8px,
                10px,
                0
            )
            rotate(2deg)
            scale(0.978);
    }


    .hero-product-card[
        data-stack-position="2"
    ] {
        transform:
            translate3d(
                -5px,
                18px,
                -30px
            )
            rotate(-2.5deg)
            scale(0.955);
    }


    .hero-product-card[
        data-stack-position="3"
    ] {
        transform:
            translate3d(
                11px,
                25px,
                -60px
            )
            rotate(3deg)
            scale(0.935);
    }


    .hero-product-card.showcase-card-exit {
        transform:
            translate3d(
                -65px,
                -15px,
                70px
            )
            rotate(-7deg)
            scale(1.02)
            !important;
    }


    .showcase-card-top {
        margin-bottom: 20px;
    }


    .showcase-card-top h3 {
        font-size: 1.14rem;
    }


    .showcase-focus-total strong {
        font-size: 1.65rem;
    }


    .showcase-timer {
        padding:
            24px
            14px;
    }


    .showcase-timer strong {
        font-size: 2rem;
    }
}


/* ==========================================================================
   SMALL PHONES
   ========================================================================== */

@media (max-width: 390px) {

    .hero-card-stack {
        height: 425px;
    }


    .hero-product-card {
        min-height: 394px;

        padding: 17px;
    }


    .showcase-streak {
        padding:
            7px
            9px;

        font-size: 0.67rem;
    }


    .showcase-session-stats,
    .showcase-result-grid {
        gap: 6px;
    }
}


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

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

    .hero-product-card {
        transition: none;
    }


    .hero-background-orb {
        display: none;
    }
}
/* ==========================================================================
   HERO STACK — FINAL SMOOTHNESS + POSITION OVERRIDES
   ========================================================================== */


/* ==========================================================================
   MOVE HERO UP
   ========================================================================== */

/*
 * The previous hero had too much breathing room above the content.
 *
 * Desktop:
 * navbar
 * ↓
 * ~35px
 * ↓
 * hero
 */

.kinetix-hero {
    padding-top:
        34px !important;

    padding-bottom:
        54px !important;
}


.kinetix-hero .hero-grid {
    align-items: center;

    min-height: 540px;
}


/*
 * Both sides should visually begin around the same region.
 */

.kinetix-hero .hero-content {
    align-self: center;
}


.kinetix-hero .hero-showcase {
    align-self: center;
}


/* ==========================================================================
   SMOOTH CARD ENGINE
   ========================================================================== */

/*
 * JavaScript / Web Animations API now owns the transforms.
 *
 * Disable old CSS transitions so the two animation engines
 * don't fight each other.
 */

.hero-product-card {
    transition:
        none !important;

    /*
     * Avoid animated blur/filter.
     *
     * Transform + opacity are enough to create the depth.
     */
    filter:
        none !important;

    /*
     * Hint that the element's transform and opacity will change.
     */
    will-change:
        transform,
        opacity;

    /*
     * Keep card rendering isolated.
     */
    backface-visibility:
        hidden;

    transform-style:
        preserve-3d;
}


/*
 * Don't animate shadows.
 *
 * All cards retain a static shadow.
 */

.hero-product-card {
    box-shadow:
        0 24px 58px
        rgba(
            42,
            36,
            94,
            0.10
        ) !important;
}


/*
 * Front card receives slightly stronger depth.
 */

.hero-product-card[
    data-stack-position="0"
] {
    box-shadow:
        0 30px 70px
        rgba(
            42,
            36,
            94,
            0.135
        ) !important;
}


/*
 * Old class is no longer used by the new JS.
 * Neutralise it in case a stale class remains after hot reload.
 */

.hero-product-card.showcase-card-exit,
.hero-product-card.showcase-card-leaving {
    transition:
        none !important;
}


/* ==========================================================================
   SHOWCASE POSITION
   ========================================================================== */

.hero-showcase {
    /*
     * Slightly more top/right breathing room for rotated cards,
     * but substantially less wasted vertical whitespace.
     */

    padding-top:
        18px !important;

    padding-bottom:
        12px !important;
}


.hero-card-stack {
    height:
        485px !important;
}


/* ==========================================================================
   SLIGHTLY MORE REFINED BACKGROUND
   ========================================================================== */

.kinetix-hero {
    background:

        radial-gradient(
            circle at 20% 15%,
            rgba(
                99,
                91,
                255,
                0.115
            ),
            transparent 32%
        ),

        radial-gradient(
            circle at 78% 26%,
            rgba(
                145,
                111,
                255,
                0.095
            ),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            #f8f8ff 0%,
            #f2f1ff 49%,
            #fafaff 100%
        );
}


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

@media (
    max-width: 960px
) {

    .kinetix-hero {
        padding-top:
            38px !important;

        padding-bottom:
            64px !important;
    }


    .kinetix-hero .hero-grid {
        min-height:
            0;

        align-items:
            start;
    }


    .hero-card-stack {
        height:
            480px !important;
    }
}


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

@media (
    max-width: 640px
) {

    .kinetix-hero {
        padding-top:
            30px !important;

        padding-bottom:
            52px !important;
    }


    .kinetix-hero .hero-grid {
        gap:
            34px !important;
    }


    .hero-showcase {
        padding-top:
            8px !important;
    }


    .hero-card-stack {
        height:
            425px !important;
    }


    /*
     * Shadows slightly lighter on phones to reduce
     * GPU/paint work.
     */

    .hero-product-card {
        box-shadow:
            0 18px 42px
            rgba(
                42,
                36,
                94,
                0.09
            ) !important;
    }


    .hero-product-card[
        data-stack-position="0"
    ] {
        box-shadow:
            0 22px 48px
            rgba(
                42,
                36,
                94,
                0.115
            ) !important;
    }
}


/* ==========================================================================
   VERY SMALL PHONES
   ========================================================================== */

@media (
    max-width: 390px
) {

    .kinetix-hero {
        padding-top:
            24px !important;
    }


    .hero-card-stack {
        height:
            410px !important;
    }
}


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

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

    .hero-product-card {
        transition:
            none !important;

        animation:
            none !important;
    }
}
/* ==========================================================================
   HERO CAROUSEL — CRISP RENDERING FIX
   ========================================================================== */


/*
 * JavaScript now controls all movement.
 *
 * Don't let older transition/3D rules interfere.
 */

.hero-product-card {
    transition: none !important;

    /*
     * Remove the old 3D rendering setup.
     * This helps Chrome keep text noticeably sharper.
     */
    filter: none !important;

    backface-visibility: visible !important;

    transform-style: flat !important;

    /*
     * No blur effects on cards.
     */
    -webkit-font-smoothing: antialiased;

    /*
     * Normal high-quality white card.
     */
    background: #ffffff !important;

    opacity: 1;

    box-shadow:
        0 22px 56px
        rgba(42, 36, 94, 0.10) !important;
}


/*
 * Remove any old perspective-based appearance.
 */

.hero-card-stack {
    perspective: none !important;

    transform-style: flat !important;
}


/*
 * Front card gets a slightly stronger shadow.
 */

.hero-product-card[data-stack-position="0"] {
    box-shadow:
        0 28px 66px
        rgba(42, 36, 94, 0.13) !important;
}


/*
 * The rear cards are faded only with opacity.
 * No blur/filter.
 */

.hero-product-card[data-stack-position="1"] {
    filter: none !important;
}

.hero-product-card[data-stack-position="2"] {
    filter: none !important;
}

.hero-product-card[data-stack-position="3"] {
    filter: none !important;
}


/* ==========================================================================
   HERO VERTICAL POSITION
   ========================================================================== */

.kinetix-hero {
    padding-top: 24px !important;
}


.kinetix-hero .hero-grid {
    min-height: 520px !important;
}


@media (max-width: 960px) {

    .kinetix-hero {
        padding-top: 30px !important;
    }


    .kinetix-hero .hero-grid {
        min-height: 0 !important;
    }
}


@media (max-width: 640px) {

    .kinetix-hero {
        padding-top: 24px !important;
    }
}
/* ==========================================================================
   MOBILE HERO — CENTERED LAYOUT
   ========================================================================== */

@media (max-width: 640px) {

    /* Center the main hero copy. */
    .kinetix-hero .hero-content {
        width: 100%;
        max-width: 100%;

        margin-inline: auto;

        text-align: center;
    }


    /* Small label above heading. */
    .kinetix-hero .hero-content .eyebrow {
        display: block;

        text-align: center;
    }


    /* Main heading. */
    .kinetix-hero .hero-content h1 {
        max-width: 390px;

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

        text-align: center;
    }


    /* Description. */
    .kinetix-hero .hero-description {
        max-width: 360px;

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

        text-align: center;
    }


    /*
     * Buttons remain full-width on mobile,
     * but the whole action area stays centered.
     */
    .kinetix-hero .hero-actions {
        width: 100%;
        max-width: 360px;

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


    /* JEE / NEET / Custom Exams row. */
    .kinetix-hero .hero-exams {
        display: flex;
        align-items: center;
        justify-content: center;

        flex-wrap: wrap;

        gap: 8px 12px;

        width: 100%;

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

        text-align: center;
    }


    /*
     * Keep the carousel centered underneath the hero.
     */
    .kinetix-hero .hero-showcase {
        margin-left: auto;
        margin-right: auto;

        justify-self: center;
    }
}
/* ==========================================================================
   HERO HEADING — SAFE CLIPPING FIX
   ========================================================================== */

.kinetix-hero .hero-content h1 {
    line-height: 1.1 !important;
    letter-spacing: -0.038em !important;

    overflow: visible !important;

    /* tiny breathing room so rounded letters do not look clipped */
    padding-right: 0.03em;
    padding-bottom: 0.05em;

    word-break: normal;
    overflow-wrap: normal;
    text-wrap: balance;
}


/*
 * Keep highlighted words behaving like normal text.
 * Do NOT force inline-block here, because that can create
 * awkward wrapping/clipping on different screen sizes.
 */
.kinetix-hero .hero-content h1 span,
.kinetix-hero .hero-content h1 .hero-highlight,
.kinetix-hero .hero-content h1 .gradient-text {
    display: inline !important;
    overflow: visible !important;

    padding: 0 !important;
    margin: 0 !important;

    line-height: inherit !important;
    vertical-align: baseline !important;
}


/* Mobile fine-tuning */
@media (max-width: 640px) {
    .kinetix-hero .hero-content h1 {
        line-height: 1.12 !important;
        letter-spacing: -0.034em !important;
        text-wrap: pretty;
    }
}