/* =========================================================
   TUTOR MONK — MERGED / FIXED WEBSITE CSS
   Original visual style + corrected HTML selectors
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    /* BRAND */
    --tmk-navy: #092b52;
    --tmk-navy-dark: #061f3b;

    --tmk-orange: #f47b34;
    --tmk-orange-dark: #e66c2d;

    --tmk-blue: #0874d9;

    --tmk-cream: #f7efd2;
    --tmk-beige: #e9d9c3;

    --tmk-white: #ffffff;

    /* TEXT */
    --tmk-text: #2a1f1b;
    --tmk-text-light: #617086;
    --tmk-muted: #77716c;

    /* SUPPORT */
    --tmk-soft-blue: #eef6ff;
    --tmk-soft-orange: #fff2e9;
    --tmk-soft-green: #effbf2;
    --tmk-green: #159447;

    --tmk-border: #e8e1da;

    /* SHADOWS */
    --tmk-shadow-sm:
        0 4px 14px rgba(42, 31, 27, .05);

    --tmk-shadow-md:
        0 10px 28px rgba(42, 31, 27, .08);

    --tmk-shadow-lg:
        0 18px 45px rgba(42, 31, 27, .12);

    --tmk-radius-sm: 12px;
    --tmk-radius: 16px;
    --tmk-radius-lg: 24px;

    --tmk-container: 1200px;
}


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

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    color: var(--tmk-text);
    background: #fff;

    overflow-x: hidden;

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

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

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

button {
    cursor: pointer;
}

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

::selection {
    color: #fff;
    background: var(--tmk-orange);
}

:focus-visible {
    outline: 3px solid rgba(8,116,217,.35);
    outline-offset: 4px;
}


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

.tmk-page {
    width: 100%;
    overflow: hidden;
}


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

.tmk-hero {
    position: relative;

    width: 100%;

    padding:
        55px
        20px
        65px;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(255,214,159,.24) 0,
            rgba(255,214,159,0) 25%
        ),
        radial-gradient(
            circle at 92% 8%,
            rgba(194,219,239,.28) 0,
            rgba(194,219,239,0) 28%
        ),
        linear-gradient(
            135deg,
            #fbf7f0 0%,
            #f7efe4 52%,
            #f2e8d8 100%
        );
}


/* HERO DECORATION */

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

    position: absolute;

    width: 420px;
    height: 420px;

    left: -250px;
    top: -180px;

    border-radius: 50%;

    background:
        rgba(255,202,135,.16);

    pointer-events: none;
}

.tmk-hero::after {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -300px;
    top: -260px;

    border-radius: 50%;

    background:
        rgba(185,210,231,.18);

    pointer-events: none;
}


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

.tmk-hero-inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: var(--tmk-container);

    margin: 0 auto;

    display: grid;

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

    align-items: center;

    gap: 50px;
}


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

.tmk-hero-content {
    position: relative;
    z-index: 4;
}


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

.tmk-hero-eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 13px;

    padding:
        6px 12px;

    border-radius: 30px;

    background:
        rgba(244,123,52,.09);

    color: var(--tmk-orange);

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

    letter-spacing: 1.4px;
}


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

#hero-title,
.tmk-hero-content h1 {
    max-width: 650px;

    margin: 0;

    color: var(--tmk-navy);

    font-size:
        clamp(40px, 4.2vw, 50px);

    line-height: 1.10;

    font-weight: 800;

    letter-spacing: -1.25px;
}

#hero-title span,
.tmk-hero-content h1 span {
    display: block;

    color: var(--tmk-orange);
}


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

.tmk-hero-copy {
    max-width: 575px;

    margin:
        18px 0 0;

    color:
        var(--tmk-text-light);

    font-size: 14px;
    line-height: 1.78;
}


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

.tmk-hero-actions {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 25px;
}


/* =========================================================
   MAIN BUTTON
========================================================= */

.tmk-main-btn {
    position: relative;
    overflow: hidden;

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

    gap: 10px;

    min-width: 170px;
    min-height: 48px;

    padding:
        0 22px;

    border-radius: 30px;

    background:
        var(--tmk-orange);

    color: #fff !important;

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

    line-height: 1;

    text-decoration: none !important;

    box-shadow:
        0 7px 18px rgba(244,123,52,.18);

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

.tmk-main-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -125%;

    width: 65%;
    height: 100%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform:
        skewX(-20deg);

    animation:
        tmk-button-shine
        4s
        ease-in-out
        infinite;

    pointer-events: none;
}

.tmk-main-btn span {
    position: relative;
    z-index: 2;

    font-size: 18px;

    transition:
        transform .25s ease;
}

.tmk-main-btn:hover {
    background:
        var(--tmk-orange-dark);

    transform:
        translateY(-3px)
        scale(1.015);

    box-shadow:
        0 11px 24px rgba(244,123,52,.25);
}

.tmk-main-btn:hover span {
    transform:
        translateX(4px);
}

@keyframes tmk-button-shine {
    0% {
        left: -125%;
    }

    35% {
        left: 140%;
    }

    100% {
        left: 140%;
    }
}


/* =========================================================
   OUTLINE BUTTON
========================================================= */

.tmk-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 125px;
    min-height: 48px;

    padding:
        0 18px;

    border:
        1px solid rgba(9,43,82,.16);

    border-radius: 30px;

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

    color:
        var(--tmk-navy) !important;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none !important;

    transition:
        .25s ease;
}

.tmk-outline-btn:hover {
    background: #fff;

    border-color:
        var(--tmk-orange);

    color:
        var(--tmk-orange) !important;

    transform:
        translateY(-2px);
}


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

.tmk-hero-points {
    display: flex;
    flex-wrap: wrap;

    gap: 13px;

    margin-top: 18px;
}

.tmk-hero-points span {
    color: #6c746f;

    font-size: 9px;
    font-weight: 500;
}


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

.tmk-hero-video {
    position: relative;

    width: 100%;
}

.tmk-video-frame {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    padding: 10px;

    overflow: hidden;

    border-radius:
        var(--tmk-radius-lg);

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

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

    box-shadow:
        0 20px 48px rgba(42,31,27,.13);

    backdrop-filter:
        blur(6px);
}

.tmk-video-frame::after {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.5);
}

.tmk-video-frame video {
    width: 100%;
    height: 100% !important;

    object-fit: cover;
    object-position: center;

    border-radius: 16px;

    background:
        #101827;

    outline: none;
}


/* =========================================================
   PLAY BUTTON
========================================================= */

.tmk-play-btn {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 10;

    width: 76px;
    height: 76px;

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

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

    padding: 0;

    border: 0;
    border-radius: 50%;

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

    color:
        var(--tmk-orange);

    cursor: pointer;

    box-shadow:
        0 12px 32px rgba(0,0,0,.20);

    transition:
        transform .22s ease,
        opacity .22s ease;
}

.tmk-play-btn[hidden] {
    display: none !important;
}

.tmk-play-btn:hover {
    transform:
        translate(-50%, -50%)
        scale(1.08);
}

.tmk-play-btn:focus-visible {
    outline:
        3px solid rgba(244,123,52,.35);

    outline-offset:
        5px;
}

.tmk-play-icon {
    margin-left: 4px;

    font-size: 25px;
    line-height: 1;
}


/* =========================================================
   VIDEO CONTROLS
========================================================= */

.tmk-controls {
    position: absolute;

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

    z-index: 8;

    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        34px
        14px
        11px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.88),
            rgba(0,0,0,0)
        );

    opacity: 0;

    transition:
        opacity .22s ease;
}

.tmk-video-frame:hover .tmk-controls,
.tmk-video-frame:focus-within .tmk-controls {
    opacity: 1;
}

.tmk-control-btn {
    width: 34px;
    height: 34px;

    flex:
        0 0 34px;

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

    padding: 0;

    border: 0;
    border-radius: 50%;

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

    color:
        #fff;

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

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

.tmk-control-btn:hover {
    background:
        rgba(255,255,255,.28);

    transform:
        scale(1.05);
}

.tmk-time {
    flex:
        0 0 auto;

    min-width: 34px;

    color:
        #fff;

    font-size: 9px;
    font-weight: 600;

    text-align: center;
}

.tmk-progress {
    flex:
        1 1 auto;

    min-width: 30px;

    width: auto;
    height: 4px;

    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    border-radius: 20px;

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

    cursor: pointer;
}

.tmk-progress::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 13px;
    height: 13px;

    border: 0;
    border-radius: 50%;

    background:
        var(--tmk-orange);
}

.tmk-progress::-moz-range-thumb {
    width: 13px;
    height: 13px;

    border: 0;
    border-radius: 50%;

    background:
        var(--tmk-orange);
}


/* =========================================================
   VIDEO NOTE
========================================================= */

.tmk-video-note {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin:
        11px 0 0;

    color:
        #77736e;

    font-size: 9px;
    line-height: 1.5;

    text-align: center;
}

.tmk-video-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background:
        var(--tmk-orange);
}


/* =========================================================
   LEARNING TICKER
========================================================= */

.tmk-learning-ticker {
    position: relative;

    overflow: hidden;

    padding:
        28px
        0
        34px;

    background:
         #f0e5d6;
}

.tmk-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}

.tmk-ticker-top,
.tmk-ticker-viewport {
    position: relative;
    overflow: hidden;
}

.tmk-ticker-top {
    margin-bottom: 15px;
}

.tmk-ticker-track {
    display: flex;

    width: max-content;

    will-change:
        transform;
}

.tmk-ticker-track--tags {
    animation:
        tmk-ticker-left
        34s
        linear
        infinite;
}

.tmk-ticker-track--subjects {
    animation:
        tmk-ticker-right
        42s
        linear
        infinite;
}

.tmk-ticker-group {
    display: flex;

    flex:
        0 0 auto;

    align-items: center;
}

.tmk-ticker-track--tags
.tmk-ticker-group {
    gap: 20px;
    padding-right: 20px;
}

.tmk-ticker-tag {
    display: inline-flex;
    align-items: center;

    min-height: 36px;

    padding:
        0 17px;

    border-radius: 999px;

    color:
        var(--tmk-navy);

    background:
        #ffd99f;

    font-size: 12px;
    font-weight: 600;

    white-space: nowrap;

    transform:
        rotate(-3deg);
}

.tmk-ticker-tag:nth-child(2n) {
    background: #83e7e7;
    transform:
        rotate(2deg);
}

.tmk-ticker-tag:nth-child(3n) {
    background: #ffe17a;
    transform:
        rotate(-1deg);
}

.tmk-ticker-viewport {
    margin-inline:
        clamp(10px, 3vw, 56px);

    padding:
        clamp(22px, 4vw, 38px)
        0;

    border-radius: 24px;

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

    box-shadow:
        0 15px 40px rgba(9,43,82,.06);
}

.tmk-ticker-track--subjects
.tmk-ticker-group {
    gap:
        clamp(30px, 5vw, 75px);

    padding-right:
        clamp(30px, 5vw, 75px);
}

.tmk-ticker-wordmark {
    color:
        #087f7d;

    font-size:
        clamp(20px, 3vw, 38px);

    font-weight: 800;

    letter-spacing:
        -.06em;

    white-space:
        nowrap;
}

.tmk-ticker-wordmark:nth-child(3n) {
    color:
        var(--tmk-navy);
}

.tmk-ticker-track--subjects
.tmk-ticker-wordmark:first-child {
    color:
        var(--tmk-orange);
}

@keyframes tmk-ticker-left {
    from {
        transform:
            translate3d(0,0,0);
    }

    to {
        transform:
            translate3d(-50%,0,0);
    }
}

@keyframes tmk-ticker-right {
    from {
        transform:
            translate3d(-50%,0,0);
    }

    to {
        transform:
            translate3d(0,0,0);
    }
}


/* =========================================================
   SHARED SECTION HEADING
========================================================= */

.tmk-section-heading,
.tmk-course-heading,
.tmk-feature-heading,
.tmk-process-heading,
.tmk-faq-heading {
    max-width: 720px;

    margin:
        0 auto 30px;

    text-align: center;
}

.tmk-section-heading > span,
.tmk-course-heading > span,
.tmk-feature-heading > span,
.tmk-process-heading > span,
.tmk-faq-heading > span {
    display: block;

    margin-bottom: 8px;

    color:
        var(--tmk-orange);

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

    letter-spacing:
        1.4px;
}

.tmk-section-heading h2,
.tmk-course-heading h2,
.tmk-feature-heading h2,
.tmk-process-heading h2,
.tmk-faq-heading h2 {
    margin: 0;

    color:
        var(--tmk-navy);

    font-size:
        29px;

    line-height:
        1.25;

    font-weight:
        700;
}

.tmk-section-heading h2 span {
    color:
        var(--tmk-orange);
}

.tmk-section-heading p,
.tmk-course-heading p,
.tmk-feature-heading p,
.tmk-process-heading p {
    max-width: 630px;

    margin:
        9px auto 0;

    color:
        var(--tmk-text-light);

    font-size: 12px;

    line-height:
        1.75;
}


/* =========================================================
   COUNTRY SECTION
========================================================= */

.tmk-country-section {
    width: 100%;

    padding:
        58px
        20px
        62px;

    background:
        #fff;
}

.button-row {
    width: 100%;
    max-width: 1100px;

    margin:
        0 auto;

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

    flex-wrap: wrap;

    gap: 12px;
}

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

    gap: 9px;

    min-width: 143px;
    min-height: 45px;

    padding:
        0 18px;

    border:
        1px solid #eadfd8;

    border-radius: 25px;

    background:
        #fff;

    color:
        var(--tmk-orange) !important;

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

    text-decoration: none !important;

    box-shadow:
        0 4px 13px rgba(0,0,0,.035);

    transition:
        .25s ease;
}

.custom-btn img {
    width: 23px;
    height: 23px;

    object-fit: cover;

    border-radius: 50%;
}

.custom-btn:hover {
    background:
        #f7ebe4;

    border-color:
        #f7ebe4;

    transform:
        translateY(-2px);
}


/* =========================================================
   COURSE SECTION
========================================================= */

.tmk-course-section {
    width: 100%;

    padding:
        68px
        0
        70px;

    background:
        var(--tmk-cream);
}

.tmk-course-wrapper {
    width: 100%;
    max-width: 1200px;

    margin:
        0 auto;

    padding:
        8px 16px;

    display: grid;

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

    gap: 18px;
}

.tmk-course-card {
    min-width: 0;

    background:
        #f4f4f4;

    border-radius:
        14px;

    overflow:
        hidden;

    border:
        1px solid rgba(0,0,0,.03);

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

.tmk-course-card:hover {
    transform:
        translateY(-5px);

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

.tmk-course-content {
    padding:
        18px;
}

.tmk-category {
    margin:
        0 0 6px;

    color:
        #888;

    font-size:
        10px;

    font-weight:
        500;
}

.tmk-course-content h3 {
    margin:
        0;

    color:
        var(--tmk-text);

    font-size:
        17px;

    line-height:
        1.32;

    font-weight:
        700;
}

.tmk-course-description {
    margin:
        8px
        0
        14px;

    color:
        #69645f;

    font-size:
        10px;

    line-height:
        1.7;
}

.tmk-buttons {
    display: flex;
    gap: 7px;
}

.tmk-btn {
    min-height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0
        12px;

    border-radius:
        22px;

    font-size:
        10px;

    font-weight:
        600;

    text-decoration:
        none !important;

    transition:
        .25s ease;
}

.tmk-btn.primary {
    width:
        100%;

    background:
        var(--tmk-orange);

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

    color:
        #fff !important;
}

.tmk-btn.primary:hover {
    background:
        var(--tmk-orange-dark);

    border-color:
        var(--tmk-orange-dark);

    transform:
        translateY(-1px);
}


/* =========================================================
   WHY TUTOR MONK / VALUE
========================================================= */

.tmk-value-section {
    width: 100%;

    padding:
        70px
        16px;

    background:
        #fdf9f2;
}

.tmk-value-container {
    width: 100%;
    max-width: 1200px;

    margin:
        0 auto;
}

.tmk-value-heading {
    max-width:
        680px;

    margin:
        0 auto
        38px;

    text-align:
        center;
}

.tmk-eyebrow {
    display:
        inline-block;

    margin-bottom:
        8px;

    color:
        var(--tmk-orange);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1.5px;
}

.tmk-value-heading h2 {
    margin:
        0;

    color:
        var(--tmk-text);

    font-size:
        31px;

    line-height:
        1.22;

    font-weight:
        700;
}

.tmk-value-heading h2 span {
    display:
        block;

    color:
        var(--tmk-blue);
}

.tmk-value-heading p {
    max-width:
        610px;

    margin:
        10px auto 0;

    color:
        var(--tmk-text-light);

    font-size:
        12px;

    line-height:
        1.8;
}

.tmk-value-grid {
    display:
        grid;

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

    gap:
        18px;
}

.tmk-value-card {
    min-width:
        0;

    padding:
        23px;

    background:
        #fff;

    border:
        1px solid rgba(42,31,27,.05);

    border-radius:
        15px;

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

.tmk-value-card:hover {
    transform:
        translateY(-5px);

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

.tmk-card-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        21px;
}

.tmk-card-number {
    color:
        #aaa19a;

    font-size:
        10px;

    font-weight:
        700;
}

.tmk-card-icon {
    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--tmk-soft-blue);

    color:
        var(--tmk-blue);

    font-size:
        16px;
}

.tmk-value-card h3 {
    margin:
        0 0 9px;

    color:
        var(--tmk-text);

    font-size:
        18px;

    line-height:
        1.3;

    font-weight:
        700;
}

.tmk-value-card p {
    margin:
        0;

    color:
        #5d5956;

    font-size:
        12px;

    line-height:
        1.7;
}

.tmk-card-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        20px;

    padding-top:
        12px;

    border-top:
        1px solid #ece7e2;
}

.tmk-card-footer span:first-child {
    color:
        var(--tmk-muted);

    font-size:
        9px;

    font-weight:
        600;
}

.tmk-arrow {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        24px;

    height:
        24px;

    border-radius:
        50%;

    background:
        var(--tmk-orange);

    color:
        #fff;

    font-size:
        13px;

    transition:
        transform .25s ease;
}

.tmk-value-card:hover .tmk-arrow {
    transform:
        translateX(3px);
}


/* =========================================================
   SUBJECTS
========================================================= */

.tmk-subject-section {
    width:
        100%;

    padding:
        70px
        20px;

    background:
        #fff;
}

.tmk-subject-grid {
    width:
        100%;

    max-width:
        1050px;

    margin:
        0 auto;

    display:
        grid;

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

    gap:
        14px;
}

.tmk-subject-card {
    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        13px;

    min-height:
        115px;

    padding:
        18px;

    border:
        1px solid #eee8e2;

    border-radius:
        14px;

    background:
        #fcfbf9;

    color:
        var(--tmk-text);

    text-decoration:
        none !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.tmk-subject-card:hover {
    background:
        #fff;

    border-color:
        rgba(8,116,217,.14);

    transform:
        translateY(-4px);

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

.tmk-subject-card::after {
    content:
        "→";

    position:
        absolute;

    right:
        15px;

    bottom:
        12px;

    color:
        var(--tmk-orange);

    font-size:
        15px;

    transition:
        transform .25s ease;
}

.tmk-subject-card:hover::after {
    transform:
        translateX(4px);
}

.tmk-subject-icon {
    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        var(--tmk-soft-blue);

    color:
        var(--tmk-blue);

    font-size:
        15px;

    font-weight:
        700;
}

.tmk-subject-card h3 {
    margin:
        0;

    color:
        var(--tmk-navy);

    font-size:
        14px;

    line-height:
        1.35;

    font-weight:
        700;
}

.tmk-subject-card p {
    margin:
        5px 0 0;

    color:
        var(--tmk-text-light);

    font-size:
        10px;

    line-height:
        1.6;
}


/* =========================================================
   FEATURES
========================================================= */

.tmk-feature-wrapper {
    width:
        100%;

    padding:
        65px
        16px
        70px;

    background:
        #fff;
}

.tmk-feature-heading {
    max-width:
        680px;

    margin:
        0 auto
        30px;

    text-align:
        center;
}

.tmk-feature-section {
    width:
        100%;

    max-width:
        1100px;

    margin:
        0 auto;

    display:
        grid;

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

    gap:
        18px;
}

.tmk-card {
    min-height:
        82px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        15px
        18px;

    background:
        #f7f7f7;

    border-radius:
        14px;

    box-shadow:
        0 5px 15px rgba(0,0,0,.05);

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

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

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

.tmk-card img {
    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    object-fit:
        contain;
}

.tmk-card strong {
    display:
        block;

    color:
        var(--tmk-text);

    font-size:
        13px;

    font-weight:
        600;
}

.tmk-card small {
    display:
        block;

    margin-top:
        3px;

    color:
        #878787;

    font-size:
        9px;

    line-height:
        1.45;
}


/* =========================================================
   SEO CONTENT
========================================================= */

.tmk-seo-content {
    width:
        100%;

    padding:
        68px
        20px
        72px;

    background:
        #fff;
}

.tmk-seo-content-inner {
    width:
        100%;

    max-width:
        900px;

    margin:
        0 auto;
}

.tmk-seo-content-inner h3 {
    margin:
        26px 0 8px;

    color:
        var(--tmk-navy);

    font-size:
        18px;

    line-height:
        1.4;

    font-weight:
        700;
}

.tmk-seo-content-inner h3:first-child {
    margin-top:
        0;
}

.tmk-seo-content-inner p {
    margin:
        0;

    color:
        var(--tmk-text-light);

    font-size:
        12px;

    line-height:
        1.8;
}


/* =========================================================
   PROCESS
========================================================= */

.tmk-process-section {
    width:
        100%;

    padding:
        70px
        16px;

    background:
        #fff;
}

.tmk-process-grid {
    width:
        100%;

    max-width:
        1050px;

    margin:
        0 auto;

    display:
        grid;

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

    gap:
        18px;
}

.tmk-process-card {
    padding:
        23px;

    border-radius:
        15px;

    background:
        #faf8f5;

    border:
        1px solid #eee8e2;

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

.tmk-process-card:hover {
    transform:
        translateY(-4px);

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

.tmk-process-number {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        31px;

    height:
        31px;

    margin-bottom:
        17px;

    border-radius:
        50%;

    background:
        var(--tmk-orange);

    color:
        #fff;

    font-size:
        9px;

    font-weight:
        700;
}

.tmk-process-card h3 {
    margin:
        0;

    color:
        var(--tmk-navy);

    font-size:
        16px;

    line-height:
        1.4;
}

.tmk-process-card p {
    margin-top:
        8px;

    color:
        var(--tmk-text-light);

    font-size:
        11px;

    line-height:
        1.7;
}


/* =========================================================
   FAQ
========================================================= */

.tmk-faq-section {
    width:
        100%;

    padding:
        70px
        20px;

    background:
        var(--tmk-cream);
}

.tmk-faq-list {
    width:
        100%;

    max-width:
        850px;

    margin:
        0 auto;
}

.tmk-faq-item {
    margin-bottom:
        10px;

    background:
        #fff;

    border:
        1px solid #ebe5df;

    border-radius:
        12px;

    overflow:
        hidden;
}

.tmk-faq-item summary {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        54px;

    padding:
        0
        18px;

    color:
        var(--tmk-navy);

    font-size:
        12px;

    font-weight:
        600;

    cursor:
        pointer;

    list-style:
        none;
}

.tmk-faq-item summary::-webkit-details-marker {
    display:
        none;
}

.tmk-faq-item summary::after {
    content:
        "+";

    color:
        var(--tmk-orange);

    font-size:
        20px;

    transition:
        transform .25s ease;
}

.tmk-faq-item[open] summary::after {
    transform:
        rotate(45deg);
}

.tmk-faq-item p {
    margin:
        0;

    padding:
        0
        18px
        17px;

    color:
        var(--tmk-text-light);

    font-size:
        11px;

    line-height:
        1.75;
}


/* =========================================================
   FINAL CTA
========================================================= */

.tmk-final-cta {
    position:
        relative;

    width:
        calc(100% - 40px);

    max-width:
        1200px;

    margin:
        0 auto
        55px;

    padding:
        60px 20px;

    border-radius:
        18px;

    overflow:
        hidden;

    background:
        linear-gradient(
            125deg,
            #f47b34,
            #ff9a28
        );

    text-align:
        center;
}

.tmk-final-cta::before {
    content:
        "";

    position:
        absolute;

    width:
        300px;

    height:
        300px;

    top:
        -180px;

    right:
        -100px;

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

    border-radius:
        50%;
}

.tmk-final-cta::after {
    content:
        "";

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    left:
        -130px;

    bottom:
        -140px;

    border-radius:
        50%;

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

.tmk-final-cta-inner {
    position:
        relative;

    z-index:
        2;

    max-width:
        650px;

    margin:
        0 auto;
}

.tmk-final-cta-inner > span {
    color:
        rgba(255,255,255,.85);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1.5px;
}

.tmk-final-cta h2 {
    margin-top:
        8px;

    color:
        #fff;

    font-size:
        31px;

    line-height:
        1.25;

    font-weight:
        700;
}

.tmk-final-cta p {
    max-width:
        550px;

    margin:
        10px auto 0;

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

    font-size:
        12px;

    line-height:
        1.7;
}

.tmk-final-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    min-height:
        45px;

    margin-top:
        21px;

    padding:
        0 22px;

    border-radius:
        25px;

    background:
        #fff;

    color:
        var(--tmk-orange) !important;

    font-size:
        12px;

    font-weight:
        700;

    text-decoration:
        none !important;

    box-shadow:
        0 7px 20px rgba(0,0,0,.08);

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

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

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

.tmk-final-button span {
    font-size:
        16px;

    transition:
        transform .25s ease;
}

.tmk-final-button:hover span {
    transform:
        translateX(4px);
}


/* =========================================================
   WHATSAPP FLOAT
========================================================= */

.whatsapp-btn {
    position:
        fixed;

    right:
        20px;

    bottom:
        20px;

    z-index:
        9999;

    width:
        57px;

    height:
        57px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #25D366;

    color:
        #fff !important;

    font-size:
        25px;

    text-decoration:
        none !important;

    box-shadow:
        0 7px 20px rgba(0,0,0,.16);

    transition:
        transform .25s ease;
}

.whatsapp-btn:hover {
    transform:
        translateY(-3px)
        scale(1.03);
}


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

@media (max-width: 1024px) {

    .tmk-hero-inner {
        gap:
            30px;
    }

    #hero-title,
    .tmk-hero-content h1 {
        font-size:
            40px;
    }

    .tmk-value-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .tmk-value-card:last-child {
        grid-column:
            1 / -1;
    }

    .tmk-subject-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .tmk-feature-section {
        grid-template-columns:
            repeat(2,1fr);
    }

    .tmk-feature-section
    .tmk-card:last-child {
        grid-column:
            1 / -1;
    }

    .tmk-course-wrapper {
        grid-template-columns:
            repeat(2,1fr);
    }

    .tmk-process-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .tmk-process-card:last-child {
        grid-column:
            1 / -1;
    }
}


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

@media (max-width: 768px) {

    .tmk-hero {
        padding:
            38px
            14px
            48px;
    }

    .tmk-hero-inner {
        grid-template-columns:
            1fr;

        gap:
            28px;
    }

    .tmk-hero-content {
        text-align:
            center;
    }

    #hero-title,
    .tmk-hero-content h1 {
        font-size:
            30px;

        letter-spacing:
            -.6px;
    }

    .tmk-hero-copy {
        margin:
            14px auto 0;

        font-size:
            12px;
    }

    .tmk-hero-actions {
        justify-content:
            center;
    }

    .tmk-hero-points {
        justify-content:
            center;
    }

    .tmk-video-frame {
        aspect-ratio:
            16 / 9;

        padding:
            7px;

        border-radius:
            18px;
    }

    .tmk-video-frame video {
        border-radius:
            12px;
    }

    .tmk-play-btn {
        width:
            60px;

        height:
            60px;
    }

    .tmk-play-icon {
        font-size:
            19px;
    }

    .tmk-controls {
        opacity:
            1;

        gap:
            5px;

        padding:
            29px
            8px
            7px;
    }

    .tmk-control-btn {
        width:
            30px;

        height:
            30px;

        flex-basis:
            30px;

        font-size:
            10px;
    }

    .tmk-time {
        min-width:
            28px;

        font-size:
            8px;
    }


    /* TICKER */

    .tmk-learning-ticker {
        padding:
            24px
            0
            30px;
    }

    .tmk-ticker-tag {
        min-height:
            33px;

        padding-inline:
            13px;

        font-size:
            11px;
    }


    /* COUNTRY */

    .tmk-country-section {
        padding:
            42px
            12px
            48px;
    }

    .button-row {
        justify-content:
            flex-start;

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        padding:
            3px
            2px
            7px;

        scrollbar-width:
            none;
    }

    .button-row {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 12px;
    padding: 3px 2px 7px;
}

.custom-btn {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 0 12px;
    font-size: 10px;
}


    /* GENERAL HEADINGS */

    .tmk-section-heading h2,
    .tmk-course-heading h2,
    .tmk-feature-heading h2,
    .tmk-process-heading h2,
    .tmk-faq-heading h2 {
        font-size:
            25px;
    }


    /* VALUE */

    .tmk-value-section {
        padding:
            50px
            12px;
    }

    .tmk-value-heading {
        margin-bottom:
            28px;
    }

    .tmk-value-heading h2 {
        font-size:
            25px;
    }

    .tmk-value-grid {
        grid-template-columns:
            1fr;

        gap:
            14px;
    }

    .tmk-value-card:last-child {
        grid-column:
            auto;
    }


    /* SUBJECTS */

    .tmk-subject-section {
        padding:
            52px
            12px;
    }

    .tmk-subject-grid {
        grid-template-columns:
            1fr;

        gap:
            12px;
    }


    /* FEATURES */

    .tmk-feature-wrapper {
        padding:
            48px
            12px
            52px;
    }

    .tmk-feature-section {
        grid-template-columns:
            1fr;

        gap:
            12px;
    }

    .tmk-feature-section
    .tmk-card:last-child {
        grid-column:
            auto;
    }


    /* COURSES */

    .tmk-course-section {
        padding:
            48px
            0
            50px;
    }

    .tmk-course-wrapper {
        grid-template-columns:
            1fr;

        gap:
            14px;

        padding:
            8px
            12px;
    }


    /* SEO */

    .tmk-seo-content {
        padding:
            50px
            14px
            55px;
    }

    .tmk-seo-content-inner h3 {
        font-size:
            16px;
    }

    .tmk-seo-content-inner p {
        font-size:
            11px;
    }


    /* PROCESS */

    .tmk-process-section {
        padding:
            50px
            12px;
    }

    .tmk-process-grid {
        grid-template-columns:
            1fr;

        gap:
            12px;
    }

    .tmk-process-card:last-child {
        grid-column:
            auto;
    }


    /* FAQ */

    .tmk-faq-section {
        padding:
            50px
            12px;
    }


    /* CTA */

    .tmk-final-cta {
        width:
            calc(100% - 24px);

        margin:
            0
            12px
            40px;

        padding:
            43px
            18px;

        border-radius:
            15px;
    }

    .tmk-final-cta h2 {
        font-size:
            24px;
    }


    /* WHATSAPP */

    .whatsapp-btn {
        width:
            51px;

        height:
            51px;

        right:
            14px;

        bottom:
            14px;

        font-size:
            23px;
    }
}


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

@media (max-width: 480px) {

    #hero-title,
    .tmk-hero-content h1 {
        font-size:
            27px;
    }

    .tmk-hero-copy {
        font-size:
            11px;
    }

    .tmk-main-btn,
    .tmk-outline-btn {
        min-height:
            42px;

        height:
            42px;

        padding:
            0
            17px;

        font-size:
            11px;
    }

    .tmk-hero-points span {
        font-size:
            8px;
    }

    .tmk-video-frame {
        padding:
            5px;

        border-radius:
            15px;
    }

    .tmk-video-frame video {
        border-radius:
            10px;
    }

    .tmk-play-btn {
        width:
            52px;

        height:
            52px;
    }

    .tmk-play-icon {
        font-size:
            16px;
    }

    .tmk-controls {
        gap:
            3px;

        padding:
            27px
            5px
            5px;
    }

    .tmk-control-btn {
        width:
            26px;

        height:
            26px;

        flex-basis:
            26px;

        font-size:
            9px;
    }

    .tmk-time {
        min-width:
            24px;

        font-size:
            7px;
    }

    .tmk-section-heading h2,
    .tmk-course-heading h2,
    .tmk-feature-heading h2,
    .tmk-process-heading h2,
    .tmk-faq-heading h2 {
        font-size:
            21px;
    }

    .tmk-value-heading h2 {
        font-size:
            22px;
    }

    .tmk-final-cta h2 {
        font-size:
            21px;
    }

    .tmk-final-cta p {
        font-size:
            10px;
    }

    .tmk-faq-item summary {
        min-height:
            50px;

        padding:
            0
            15px;

        font-size:
            11px;
    }

    .tmk-faq-item p {
        padding:
            0
            15px
            15px;

        font-size:
            10px;
    }

    .tmk-seo-content {
        padding:
            44px
            13px
            48px;
    }

    .tmk-seo-content-inner h3 {
        font-size:
            15px;
    }

    .tmk-seo-content-inner p {
        font-size:
            10px;
    }

    .tmk-btn {
        min-height:
            38px;

        font-size:
            10px;
    }
}


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

.tmk-hero-content {
    animation:
        tmk-fade-up
        .8s
        cubic-bezier(.22,1,.36,1)
        both;
}

.tmk-hero-video {
    opacity: 1;
}

.tmk-video-frame.tmk-video-scroll-in {
    animation:
        tmk-video-enter
        .9s
        cubic-bezier(.22,1,.36,1)
        both;
}

.tmk-course-card,
.tmk-value-card,
.tmk-subject-card,
.tmk-process-card,
.tmk-feature-section .tmk-card {
    animation:
        tmk-card-enter
        .7s
        cubic-bezier(.22,1,.36,1)
        both;
}

@keyframes tmk-fade-up {
    from {
        opacity: 0;
        transform:
            translateY(22px);
    }

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

@keyframes tmk-video-enter {
    from {
        opacity: 0;

        transform:
            translateY(18px)
            scale(.97);
    }

    to {
        opacity: 1;

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

@keyframes tmk-card-enter {
    from {
        opacity: 0;
        transform:
            translateY(20px);
    }

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


/* =========================================================
   STAGGER
========================================================= */

.tmk-course-card:nth-child(1),
.tmk-value-card:nth-child(1),
.tmk-subject-card:nth-child(1),
.tmk-process-card:nth-child(1),
.tmk-feature-section .tmk-card:nth-child(1) {
    animation-delay:
        .05s;
}

.tmk-course-card:nth-child(2),
.tmk-value-card:nth-child(2),
.tmk-subject-card:nth-child(2),
.tmk-process-card:nth-child(2),
.tmk-feature-section .tmk-card:nth-child(2) {
    animation-delay:
        .10s;
}

.tmk-course-card:nth-child(3),
.tmk-value-card:nth-child(3),
.tmk-subject-card:nth-child(3),
.tmk-process-card:nth-child(3),
.tmk-feature-section .tmk-card:nth-child(3) {
    animation-delay:
        .15s;
}

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

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

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


/* =========================================================
   FINAL CTA MICRO MOTION
========================================================= */

.tmk-final-button {
    animation:
        tmk-button-pulse
        3.5s
        ease-in-out
        infinite;
}

@keyframes tmk-button-pulse {
    0%,
    100% {
        box-shadow:
            0 7px 20px rgba(0,0,0,.08);
    }

    50% {
        box-shadow:
            0 10px 28px rgba(255,255,255,.18);
    }
}


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

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

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

    .tmk-ticker-track {
        animation:
            none !important;

        transform:
            none !important;
    }

    .tmk-main-btn::before {
        animation:
            none !important;
    }
}
/* =========================================================
   TUTOR MONK — ADDITIONAL HERO BACKGROUND ANIMATION
   ADD THIS AT THE VERY END
   DOES NOT REPLACE EXISTING ANIMATIONS
========================================================= */


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

.tmk-hero {
    background-image:
        linear-gradient(
            rgba(9, 43, 82, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(9, 43, 82, 0.035) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 8% 15%,
            rgba(255, 214, 159, 0.24),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 8%,
            rgba(194, 219, 239, 0.28),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #fbf7f0 0%,
            #f7efe4 52%,
            #f2e8d8 100%
        );

    background-size:
        55px 55px,
        55px 55px,
        100% 100%,
        100% 100%,
        100% 100%;

    background-position:
        0 0,
        0 0,
        center,
        center,
        center;

    animation:
        tmk-hero-grid-motion
        20s
        linear
        infinite;
}


/* =========================================================
   MOVING GRID
========================================================= */

@keyframes tmk-hero-grid-motion {

    0% {
        background-position:
            0 0,
            0 0,
            center,
            center,
            center;
    }

    50% {
        background-position:
            55px 55px,
            -55px 55px,
            center,
            center,
            center;
    }

    100% {
        background-position:
            110px 110px,
            -110px 110px,
            center,
            center,
            center;
    }

}


/* =========================================================
   SCROLL-TRIGGERED POP REVEALS
========================================================= */

.tmk-scroll-reveal {
    opacity: 0;
    filter: blur(7px);
    translate: 0 28px;
    scale: .97;
    animation: none !important;
    transition:
        opacity .75s cubic-bezier(.2,.8,.2,1),
        filter .75s cubic-bezier(.2,.8,.2,1),
        translate .75s cubic-bezier(.2,.8,.2,1),
        scale .75s cubic-bezier(.2,.8,.2,1);
    transition-delay: var(--tmk-reveal-delay, 0ms);
    will-change: opacity, filter, translate, scale;
}

.tmk-scroll-reveal.tmk-scroll-visible {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
    scale: 1;
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .tmk-scroll-reveal {
        opacity: 1 !important;
        filter: none !important;
        translate: none !important;
        scale: none !important;
        transition: none !important;
    }
}


/* =========================================================
   HERO TYPEWRITER & FLOATING MATH
========================================================= */

.tmk-hero-math {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.tmk-math-symbol {
    position: absolute;
    display: block;
    color: rgba(9,43,82,.32);
    font-size: clamp(22px, 3vw, 38px);
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 8px 22px rgba(9,43,82,.08);
    animation: tmk-math-drift 7s ease-in-out infinite;
    will-change: transform;
}

.tmk-math-symbol--minus {
    top: 16%;
    left: 8%;
    color: rgba(244,123,52,.48);
}

.tmk-math-symbol--plus {
    top: 48%;
    left: 45%;
    animation-delay: -1.3s;
}

.tmk-math-symbol--question {
    top: 22%;
    right: 43%;
    color: rgba(8,116,217,.4);
    animation-delay: -2.4s;
}

.tmk-math-symbol--equals {
    bottom: 18%;
    left: 53%;
    color: rgba(244,123,52,.46);
    animation-delay: -3.2s;
}

.tmk-math-symbol--percent {
    top: 65%;
    right: 7%;
    animation-delay: -4.1s;
}

.tmk-math-symbol--formula {
    right: 21%;
    bottom: 14%;
    font-size: clamp(17px, 2.2vw, 27px);
    color: rgba(8,116,217,.4);
    animation-delay: -2s;
}

.tmk-math-symbol--formula sup {
    font-size: .58em;
}

.tmk-math-symbol--ampersand {
    top: 12%;
    right: 12%;
    color: rgba(244,123,52,.46);
    animation-delay: -5s;
}

#hero-title .tmk-hero-typed {
    min-height: 1.12em;
    white-space: normal;
}

#hero-title .tmk-hero-typed > #heroTypedText {
    display: inline-block;
    min-height: 1.12em;
}

#hero-title .tmk-hero-typed::after {
    content: "";
    display: inline-block;
    width: 3px;
    height: .82em;
    margin-left: .08em;
    vertical-align: -.05em;
    border-radius: 2px;
    background: currentColor;
    animation: tmk-type-cursor .85s steps(2, start) infinite;
}

@keyframes tmk-math-drift {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-8deg);
    }

    50% {
        transform: translate3d(8px, -20px, 0) rotate(9deg);
    }
}

@keyframes tmk-type-cursor {
    to { visibility: hidden; }
}

@media (max-width: 768px) {
    .tmk-math-symbol {
        font-size: 23px;
    }

    .tmk-math-symbol--plus,
    .tmk-math-symbol--question,
    .tmk-math-symbol--equals {
        display: none;
    }

    .tmk-math-symbol--formula {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tmk-math-symbol,
    #hero-title .tmk-hero-typed::after {
        animation: none !important;
    }

    #hero-title .tmk-hero-typed::after {
        display: none;
    }
}


/* =========================================================
   EXTRA FLOATING LIGHT — LEFT
========================================================= */

.tmk-hero-inner::before {

    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    left: -210px;
    top: -170px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(244, 123, 52, 0.14) 0%,
            rgba(244, 123, 52, 0.06) 35%,
            transparent 72%
        );

    filter:
        blur(8px);

    pointer-events:
        none;

    z-index:
        -1;

    animation:
        tmk-floating-orange
        9s
        ease-in-out
        infinite;
}


/* =========================================================
   EXTRA FLOATING LIGHT — RIGHT
========================================================= */

.tmk-hero-inner::after {

    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -230px;
    top: -190px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(8, 116, 217, 0.10) 0%,
            rgba(8, 116, 217, 0.04) 38%,
            transparent 72%
        );

    filter:
        blur(10px);

    pointer-events:
        none;

    z-index:
        -1;

    animation:
        tmk-floating-blue
        12s
        ease-in-out
        infinite;
}


/* =========================================================
   ORANGE FLOAT
========================================================= */

@keyframes tmk-floating-orange {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    35% {
        transform:
            translate3d(35px, 22px, 0)
            scale(1.04);
    }

    70% {
        transform:
            translate3d(65px, -5px, 0)
            scale(1.08);
    }

}


/* =========================================================
   BLUE FLOAT
========================================================= */

@keyframes tmk-floating-blue {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    35% {
        transform:
            translate3d(-30px, 25px, 0)
            scale(1.05);
    }

    70% {
        transform:
            translate3d(-65px, 50px, 0)
            scale(1.08);
    }

}


/* =========================================================
   LIGHT SWEEP
========================================================= */

.tmk-hero-content::before {

    content: "";

    position: absolute;

    top: -80%;
    left: -35%;

    width: 24%;
    height: 230%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.18),
            transparent
        );

    transform:
        rotate(17deg);

    pointer-events:
        none;

    z-index:
        -1;

    animation:
        tmk-hero-light-sweep
        10s
        ease-in-out
        infinite;
}


@keyframes tmk-hero-light-sweep {

    0% {
        left: -40%;
        opacity: 0;
    }

    10% {
        opacity: .45;
    }

    45% {
        left: 115%;
        opacity: .16;
    }

    55% {
        left: 115%;
        opacity: 0;
    }

    100% {
        left: 115%;
        opacity: 0;
    }

}


/* =========================================================
   FLOATING PARTICLE 1
========================================================= */

.tmk-hero-content::after {

    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    right: -8%;
    bottom: 12%;

    border-radius: 50%;

    background:
        var(--tmk-orange);

    box-shadow:
        0 0 0 7px rgba(244,123,52,.06),
        0 0 22px rgba(244,123,52,.22);

    pointer-events:
        none;

    animation:
        tmk-particle-one
        6s
        ease-in-out
        infinite;
}


@keyframes tmk-particle-one {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);

        opacity:
            .35;
    }

    50% {
        transform:
            translate3d(10px, -22px, 0)
            scale(1.3);

        opacity:
            .85;
    }

}


/* =========================================================
   VIDEO OUTER GLOW
   DOES NOT TOUCH ORIGINAL VIDEO ANIMATION
========================================================= */

.tmk-hero-video {
    position: relative;
}


/* separate glow layer */
.tmk-hero-video::before {

    content: "";

    position: absolute;

    left: 8%;
    right: 8%;
    bottom: -16px;

    height: 50px;

    border-radius: 50%;

    background:
        rgba(244,123,52,.15);

    filter:
        blur(25px);

    pointer-events:
        none;

    z-index:
        -1;

    animation:
        tmk-video-shadow
        5s
        ease-in-out
        infinite;
}


@keyframes tmk-video-shadow {

    0%,
    100% {
        opacity:
            .35;

        transform:
            scaleX(.92);
    }

    50% {
        opacity:
            .8;

        transform:
            scaleX(1.04);
    }

}


/* =========================================================
   PLAY BUTTON EXTRA RING
   DOES NOT REPLACE ORIGINAL PLAY BUTTON STYLES
========================================================= */

.tmk-play-btn::before {

    content: "";

    position: absolute;

    inset: -8px;

    border:
        1px solid rgba(244,123,52,.28);

    border-radius: 50%;

    pointer-events:
        none;

    animation:
        tmk-play-ring
        2.8s
        ease-out
        infinite;
}


@keyframes tmk-play-ring {

    0% {
        transform:
            scale(.88);

        opacity:
            .75;
    }

    70%,
    100% {
        transform:
            scale(1.35);

        opacity:
            0;
    }

}


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

@media (max-width: 768px) {

    .tmk-hero {

        background-size:
            42px 42px,
            42px 42px,
            100% 100%,
            100% 100%,
            100% 100%;
    }

    .tmk-hero-inner::before {

        width:
            280px;

        height:
            280px;

        left:
            -170px;

        top:
            -120px;
    }

    .tmk-hero-inner::after {

        width:
            320px;

        height:
            320px;

        right:
            -190px;

        top:
            -150px;
    }

}


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

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

    .tmk-hero,
    .tmk-hero-inner::before,
    .tmk-hero-inner::after,
    .tmk-hero-content::before,
    .tmk-hero-content::after,
    .tmk-hero-video::before,
    .tmk-play-btn::before {

        animation:
            none !important;
    }

}
/* =========================================================
   TUTOR MONK — SAFE MOTION UPGRADE
   Loaded after style.css; scroll behavior is wired in logic.js.
========================================================= */

/* Anchored headings stay clear of a sticky WordPress admin bar. */
.tmk-page [id] {
    scroll-margin-top: 90px;
}

/* The hero already contains its own video caption. */
.tmk-hero-inner > .tmk-video-note {
    display: none;
}

/* Restore each card's normal hover transitions after its reveal settles. */
.tmk-scroll-reveal.tmk-scroll-visible.tmk-revealed {
    transition:
        opacity .75s cubic-bezier(.2,.8,.2,1),
        filter .75s cubic-bezier(.2,.8,.2,1),
        translate .75s cubic-bezier(.2,.8,.2,1),
        scale .75s cubic-bezier(.2,.8,.2,1),
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        border-color .25s ease;
    transition-delay: 0ms;
    will-change: auto;
}

/* Give the three intentionally empty value-card icon wells meaning. */
.tmk-value-card:nth-child(1) .tmk-card-icon::before { content: "\01F3AF"; }
.tmk-value-card:nth-child(2) .tmk-card-icon::before { content: "\01F393"; }
.tmk-value-card:nth-child(3) .tmk-card-icon::before { content: "\01F680"; }

.tmk-value-card .tmk-card-icon::before {
    font-size: 25px;
    line-height: 1;
}

/* Video state styling. The playing class is managed by logic.js. */
.tmk-video-frame {
    cursor: pointer;
    transition: filter .3s ease;
}

.tmk-controls {
    cursor: default;
}

.tmk-video-frame video {
    transition: filter .3s ease;
}

.tmk-video-frame:not(.tmk-is-playing) video {
    filter: brightness(.84);
}

.tmk-video-frame.tmk-is-playing {
    animation: tmk-live-pulse 2.8s ease-out infinite;
}

@keyframes tmk-live-pulse {
    0% {
        box-shadow:
            0 20px 48px rgba(42,31,27,.13),
            0 0 0 0 rgba(244,123,52,.28);
    }

    70%, 100% {
        box-shadow:
            0 20px 48px rgba(42,31,27,.13),
            0 0 0 15px rgba(244,123,52,0);
    }
}

.tmk-play-btn:not([hidden]) {
    animation: tmk-play-pop-in .34s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes tmk-play-pop-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.65);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Lightweight translated grid and per-section parallax layers. */
.tmk-hero.tmk-fx-on {
    animation: none;
    background-image:
        radial-gradient(circle at 8% 15%, rgba(255,214,159,.24), transparent 25%),
        radial-gradient(circle at 92% 8%, rgba(194,219,239,.28), transparent 28%),
        linear-gradient(135deg, #fbf7f0 0%, #f7efe4 52%, #f2e8d8 100%);
    background-size: 100% 100%;
    background-position: center;
}

.tmk-fx-grid {
    position: absolute;
    inset: -110px;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(9,43,82,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(9,43,82,.035) 1px, transparent 1px);
    background-size: 55px 55px;
    translate: 0 var(--tmk-grid-y, 0px);
    animation: tmk-grid-drift 18s linear infinite;
    will-change: transform;
}

@keyframes tmk-grid-drift {
    to { transform: translate3d(55px, 55px, 0); }
}

.tmk-hero-inner::before {
    translate:
        var(--tmk-glow-left-x, 0px)
        var(--tmk-glow-left-y, 0px);
}

.tmk-hero-inner::after {
    translate:
        var(--tmk-glow-right-x, 0px)
        var(--tmk-glow-right-y, 0px);
}

.tmk-hero-video {
    translate: 0 var(--tmk-video-y, 0px);
}

.tmk-math-symbol--minus {
    translate: 0 var(--tmk-symbol-y, 0px);
    rotate: var(--tmk-symbol-rotate, 0deg);
}

.tmk-math-symbol--plus {
    translate: 0 var(--tmk-symbol-y, 0px);
    rotate: var(--tmk-symbol-rotate, 0deg);
}

.tmk-math-symbol--question {
    translate: 0 var(--tmk-symbol-y, 0px);
    rotate: var(--tmk-symbol-rotate, 0deg);
}

.tmk-math-symbol--equals {
    translate: 0 var(--tmk-symbol-y, 0px);
    rotate: var(--tmk-symbol-rotate, 0deg);
}

.tmk-math-symbol--percent {
    translate: 0 var(--tmk-symbol-y, 0px);
    rotate: var(--tmk-symbol-rotate, 0deg);
}

.tmk-math-symbol--formula {
    translate: 0 var(--tmk-symbol-y, 0px);
}

.tmk-math-symbol--ampersand {
    translate: 0 var(--tmk-symbol-y, 0px);
    rotate: var(--tmk-symbol-rotate, 0deg);
}

.tmk-fx-host {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    --fx-a: 244,123,52;
    --fx-b: 8,116,217;
}

.tmk-fx-host > :not(.tmk-fx-layer) {
    position: relative;
    z-index: 1;
}

.tmk-fx-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.tmk-fx-shape {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
    translate: 0 var(--tmk-shape-y, 0px);
    rotate: var(--tmk-shape-rotation, 0deg);
    animation: tmk-fx-float var(--dur, 9s) ease-in-out var(--delay, 0s) infinite;
    will-change: transform, translate;
}

@keyframes tmk-fx-float {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(10px,-16px,0) scale(1.06); }
}

.tmk-fx-blob {
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(var(--fx-a),.20), rgba(var(--fx-a),.07) 55%, transparent 72%);
    filter: blur(6px);
}

.tmk-fx-ring {
    border: 2px solid rgba(var(--fx-b),.22);
    border-radius: 50%;
}

.tmk-fx-square {
    border: 2px solid rgba(var(--fx-a),.30);
    border-radius: 12px;
}

.tmk-fx-dots {
    background-image: radial-gradient(rgba(var(--fx-b),.35) 2px, transparent 2.5px);
    background-size: 16px 16px;
    -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 75%);
    mask-image: radial-gradient(circle, #000 40%, transparent 75%);
}

.tmk-final-cta::before {
    translate: 0 var(--tmk-cta-before-y, 0px);
}

.tmk-final-cta::after {
    translate: 0 var(--tmk-cta-after-y, 0px);
}

.tmk-ticker-wordmark {
    transform: skewX(var(--tmk-skew, 0deg));
    transition: transform .2s ease-out;
}

.tmk-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 99998;
    pointer-events: none;
    transform-origin: 0 50%;
    transform: scaleX(var(--tmk-progress, 0));
    background: linear-gradient(90deg, var(--tmk-orange), #ff9a28, var(--tmk-blue));
}

body.admin-bar .tmk-scroll-progress { top: 32px; }

@media (max-width: 782px) {
    body.admin-bar .tmk-scroll-progress { top: 46px; }
}

@media (max-width: 768px) {
    .tmk-fx-shape:nth-child(n+5) { display: none; }
    .tmk-fx-blob { --s: 200px !important; }
    .tmk-ticker-wordmark { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tmk-fx-layer,
    .tmk-scroll-progress {
        display: none !important;
    }

    .tmk-fx-grid {
        animation: none !important;
    }

    .tmk-fx-grid,
    .tmk-hero-inner::before,
    .tmk-hero-inner::after,
    .tmk-hero-video,
    .tmk-math-symbol,
    .tmk-final-cta::before,
    .tmk-final-cta::after {
        translate: none !important;
        rotate: none !important;
    }

    .tmk-ticker-wordmark { transform: none !important; }

    .tmk-video-frame.tmk-is-playing { animation: none !important; }

    .tmk-play-btn:not([hidden]) { animation: none !important; }
}/* =========================================================