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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
}

:root {
    --ep-font: "Poppins", "Segoe UI", Arial, Helvetica, sans-serif;
    --ep-heading: "Outfit", "Poppins", "Segoe UI", sans-serif;
}

body {
    font-family: var(--ep-font);
    color: #172033;
    background: #ffffff;
    line-height: 1.6;
    font-weight: 400;
}

h1, h2, h3, h4,
.section-heading h2,
.page-hero h1,
.fp-hero-copy h1,
.hp-stage-copy h1,
.fp-row-copy h2,
.cp-group-head h2,
.pp-session-copy h2,
.cta-box h2 {
    font-family: var(--ep-heading);
    font-weight: 700;
    letter-spacing: -0.03em;
}

a {
    text-decoration: none;
}

.container {
    width: 90%;
    max-width: 1180px;
    margin: auto;
}

.container-fluid {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 24px;
    padding-right: 24px;
}


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

.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: transparent;
}

.header-premium {
    background: #fff;
    box-shadow: 0 12px 32px rgba(8, 17, 31, 0.08);
}

.header .container {
    width: 100%;
    max-width: none;
    padding-left: 28px;
    padding-right: 28px;
}

.topbar {
    background: linear-gradient(90deg, #06101c 0%, #102037 52%, #163056 100%);
    border-bottom: 0;
    color: #d5e0f0;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 44px;
}

.topbar-contact,
.topbar-actions,
.topbar-contact a,
.topbar-premium,
.lang-btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-contact a,
.lang-btn {
    color: #d7e4f7;
    font-family: var(--ep-font);
    font-size: 0.78rem;
    font-weight: 500;
    background: none;
    border: 0;
    cursor: pointer;
}

.topbar-contact a:hover,
.lang-btn:hover {
    color: #fff;
}

.topbar svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.topbar-sep {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.18);
}

.topbar-motto {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fde68a;
    font-family: var(--ep-heading);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.topbar-motto span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(253, 230, 138, 0.1);
}

.topbar-motto span + span::before {
    content: none;
}

.topbar-premium {
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #3b2204;
    font-family: var(--ep-heading);
    font-size: 0.74rem;
    font-weight: 700;
}

.topbar-premium:hover {
    color: #1c1003;
}

.lang-switch {
    position: relative;
}

.lang-btn span {
    color: inherit;
}

.lang-btn svg:last-child {
    width: 14px;
    height: 14px;
}

.lang-menu,
.notify-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 160px;
    padding: 8px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
    z-index: 20;
}

.lang-menu button,
.notify-menu a {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.lang-menu button:hover,
.lang-menu button[aria-selected="true"],
.notify-menu a:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.navbar {
    background: #fff;
    border-bottom: 1px solid #e8eef6;
}

.header.is-scrolled .navbar {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 84px;
}

.logo,
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #0f172a;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    flex-shrink: 0;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.brand-name {
    color: #10233f;
    font-size: 1.22rem;
    line-height: 1;
}

.brand-tagline {
    color: #94a3b8;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.brand-logo {
    display: block;
    height: 52px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
}

.logo-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}

.logo-text span,
.logo > span:last-child > span {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.nav-panel {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 16px;
    min-width: 0;
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    padding: 6px;
    border-radius: 999px;
    background: #f4f7fb;
}

.nav-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 16px;
    color: #475569;
    font-family: var(--ep-heading);
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.nav-links svg {
    width: 16px;
    height: 16px;
}

.nav-links a:hover {
    color: #0f172a;
    background: #fff;
}

.nav-links a.is-active {
    color: #fff;
    background: linear-gradient(135deg, #1d4ed8, #4338ca);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.28);
}

.nav-links a.is-active svg {
    stroke: #fff;
}

.nav-panel-login {
    display: none;
}

.nav-drawer-head,
.nav-drawer-kicker,
.nav-drawer-account,
.nav-drawer-help,
.nav-backdrop {
    display: none;
}

.nav-search {
    display: flex;
    align-items: center;
    width: min(280px, 22vw);
    min-width: 210px;
    height: 42px;
    padding: 0 8px 0 12px;
    border-radius: 12px;
    background: #f4f7fb;
    border: 1px solid #e6edf6;
    flex-shrink: 0;
}

.nav-search-icon {
    display: flex;
    color: #94a3b8;
}

.nav-search-icon svg,
.notify-btn svg,
.dash-btn svg {
    width: 16px;
    height: 16px;
}

.nav-search input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: #334155;
    font: inherit;
    font-size: 0.84rem;
    padding: 0 8px;
}

.nav-search kbd {
    flex-shrink: 0;
    padding: 3px 6px;
    border-radius: 6px;
    background: #e8eef6;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.nav-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.nav-tools::before {
    content: "";
    width: 1px;
    height: 28px;
    background: #e5eaf1;
}

.notify-wrap {
    position: relative;
}

.notify-btn {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #475569;
    cursor: pointer;
}

.notify-btn em {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 99px;
    background: #ef4444;
    color: #fff;
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

.notify-menu {
    min-width: 260px;
}

.notify-menu strong {
    display: block;
    padding: 6px 10px 10px;
    color: #0f172a;
    font-size: 0.82rem;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
}

.nav-user-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.nav-user-copy strong {
    color: #10233f;
    font-size: 0.92rem;
}

.nav-user-copy small {
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 600;
}

.login-btn {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #d7e3f3;
    color: #0f172a;
    font-family: var(--ep-heading);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 999px;
    transition: 0.2s ease;
}

.login-btn:hover {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.dash-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    border-radius: 999px;
    font-family: var(--ep-heading);
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(234, 88, 12, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dash-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.3);
}

.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 16px;
    height: 2px;
    margin: 4px auto;
    background: #0f172a;
    border-radius: 99px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.header.is-open .nav-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.header.is-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

.header.is-open .nav-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.resource-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 20px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e8eef6;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
    color: #0f172a;
}

.resource-card span {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
}

.resource-card svg {
    width: 22px;
    height: 22px;
}

.resource-card small {
    color: #64748b;
}

@media (max-width: 1280px) {
    .topbar-motto,
    .nav-tools::before,
    .nav-user-copy,
    .nav-search kbd {
        display: none;
    }

    .nav-search {
        width: 200px;
        min-width: 180px;
    }
}

@media (max-width: 1100px) {
    .nav-links a span {
        display: none;
    }

    .nav-links a {
        padding: 9px;
    }

    .topbar-contact a:last-of-type {
        display: none;
    }
}

@media (max-width: 900px) {
    .topbar {
        display: none;
    }

    .nav {
        min-height: 72px;
        gap: 12px;
        justify-content: space-between;
    }

    .nav-tools {
        margin-left: auto;
    }

    .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .notify-wrap,
    .nav-user,
    .login-btn {
        display: none;
    }

    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1090;
        background: rgba(7, 17, 31, 0.52);
        backdrop-filter: blur(8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
    }

    .header.is-open .nav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .nav-panel {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: min(400px, 92vw);
        height: 100vh;
        height: 100dvh;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 22px 20px 28px;
        overflow-y: auto;
        border: 0;
        border-radius: 28px 0 0 28px;
        background:
            radial-gradient(280px 160px at 100% 0%, rgba(37, 99, 235, 0.1), transparent 62%),
            #fff;
        box-shadow: -24px 0 60px rgba(15, 23, 42, 0.18);
        transform: translate3d(100%, 0, 0);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.32s;
        z-index: 1100;
    }

    .header.is-open .nav-panel {
        transform: translate3d(0, 0, 0);
        visibility: visible;
        pointer-events: auto;
    }

    .nav-drawer-head,
    .nav-drawer-account,
    .nav-drawer-help {
        display: flex;
    }

    .nav-drawer-head {
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 22px;
    }

    .nav-drawer-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #0f172a;
    }

    .nav-drawer-mark {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 14px;
        background: #2563eb;
        color: #fff;
        font-family: var(--ep-heading);
        font-size: 1.05rem;
        font-weight: 800;
    }

    .nav-drawer-brand strong {
        display: block;
        font-family: var(--ep-heading);
        font-size: 1.02rem;
        letter-spacing: -0.03em;
    }

    .nav-drawer-brand small {
        display: block;
        color: #64748b;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .nav-drawer-close {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        background: #f8fafc;
        color: #0f172a;
        cursor: pointer;
    }

    .nav-drawer-close svg {
        width: 18px;
        height: 18px;
    }

    .nav-drawer-kicker {
        display: block;
        margin: 0 0 10px;
        color: #2563eb;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px;
        border-radius: 20px;
        background: #f8fbff;
    }

    .nav-links a,
    .nav-links a.is-active {
        justify-content: flex-start;
        gap: 12px;
        min-height: 52px;
        padding: 0 14px;
        border-radius: 16px;
        font-size: 1rem;
    }

    .nav-links a span {
        display: inline;
    }

    .nav-links a svg {
        width: 18px;
        height: 18px;
    }

    .nav-drawer-account {
        flex-direction: column;
        gap: 10px;
        margin-top: 22px;
        padding-top: 18px;
        border-top: 1px solid #eef2f7;
    }

    .nav-drawer-hello {
        margin: 0 0 2px;
        color: #0f172a;
        font-family: var(--ep-heading);
        font-size: 1.05rem;
        font-weight: 700;
    }

    .nav-panel-login,
    .nav-drawer-account a:not(.nav-drawer-start):not(.nav-panel-login) {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        min-height: 48px;
        padding: 0 14px;
        border-radius: 14px;
        background: #f8fafc;
        color: #1d4ed8;
        font-size: 0.92rem;
        font-weight: 700;
    }

    .nav-drawer-account a svg {
        width: 16px;
        height: 16px;
    }

    .nav-drawer-start {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 48px;
        border-radius: 14px;
        background: linear-gradient(135deg, #f59e0b, #ea580c);
        color: #fff;
        font-family: var(--ep-heading);
        font-weight: 700;
        box-shadow: 0 10px 22px rgba(234, 88, 12, 0.24);
    }

    .nav-drawer-help {
        flex-direction: column;
        gap: 8px;
        margin-top: auto;
        padding-top: 18px;
    }

    .nav-drawer-help a {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #64748b;
        font-size: 0.82rem;
        font-weight: 600;
    }

    .nav-drawer-help svg {
        width: 15px;
        height: 15px;
        color: #2563eb;
    }

    .nav-search {
        width: auto;
        min-width: 0;
        height: 48px;
        padding: 0 12px;
    }

    .brand-name {
        font-size: 1.05rem;
    }

    .logo-icon {
        width: 38px;
        height: 38px;
    }

    .topbar-contact {
        display: none;
    }

    .resource-grid {
        grid-template-columns: 1fr 1fr;
    }

    .fp-jump {
        top: 72px;
    }
}

@media (max-width: 500px) {
    .dash-btn {
        padding: 10px 12px;
        font-size: 0.82rem;
    }

    .topbar-premium span,
    .topbar-premium {
        font-size: 0.72rem;
    }

    .resource-grid {
        grid-template-columns: 1fr;
    }
}

.primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.24);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.3);
}

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

.hero {
    position: relative;
    padding: 88px 0 100px;
    background:
        radial-gradient(circle at 12% 18%, rgba(59, 130, 246, 0.1), transparent 28%),
        radial-gradient(circle at 88% 8%, rgba(99, 102, 241, 0.1), transparent 24%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 72%);
    overflow: hidden;
}

.hp-stage {
    position: relative;
    width: 100%;
    padding: 36px 0 40px;
    overflow: hidden;
    color: #172033;
    background:
        radial-gradient(920px 380px at 8% -12%, rgba(37, 99, 235, 0.1), transparent 58%),
        radial-gradient(640px 280px at 96% 0%, rgba(245, 158, 11, 0.08), transparent 52%),
        linear-gradient(180deg, #f4f8ff 0%, #ffffff 72%);
}

.hp-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 78%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 78%);
}

.hp-stage-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 20px;
}

.hp-stage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
    gap: 40px;
    align-items: stretch;
}

.hp-stage-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 0;
}

.hp-kicker {
    display: inline-flex;
    align-self: flex-start;
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hp-stage-copy h1 {
    max-width: 720px;
    margin: 18px 0 16px;
    color: #0f172a;
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.06;
    letter-spacing: -0.05em;
}

.hp-stage-copy h1 strong {
    display: block;
    color: #2563eb;
}

.hp-stage-copy > p {
    max-width: 560px;
    margin: 0 0 24px;
    color: #64748b;
    font-size: 1.06rem;
    line-height: 1.7;
}

.hp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hp-actions .primary-btn {
    min-height: 52px;
    padding: 0 26px;
    border-radius: 16px;
}

.hp-actions .secondary-btn {
    min-height: 52px;
    padding: 0 22px;
    border: 1px solid #dbe4f0;
    background: #fff;
    color: #334155;
}

.hp-note {
    margin: 16px 0 0;
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 600;
}

.hp-skills {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #e8eef6;
}

.hp-label {
    margin: 0 0 12px;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hp-pills a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px 0 8px;
    border: 1px solid #e8eef6;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

.hp-pills a:hover {
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.hp-pill-ico,
.hp-step-ico,
.hp-stat-ico {
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.hp-pill-ico {
    width: 22px;
    height: 22px;
    border-radius: 7px;
}

.hp-pill-ico svg,
.hp-step-ico svg,
.hp-stat-ico svg {
    width: 14px;
    height: 14px;
}

.hp-pill-ico.is-blue,
.hp-step-ico.is-blue,
.hp-stat-ico.is-blue { background: #eff6ff; color: #2563eb; }
.hp-pill-ico.is-green,
.hp-step-ico.is-green,
.hp-stat-ico.is-green { background: #ecfdf5; color: #059669; }
.hp-pill-ico.is-purple,
.hp-step-ico.is-purple,
.hp-stat-ico.is-purple { background: #f5f3ff; color: #7c3aed; }
.hp-pill-ico.is-orange,
.hp-step-ico.is-orange,
.hp-stat-ico.is-orange { background: #fff7ed; color: #ea580c; }
.hp-pill-ico.is-pink,
.hp-stat-ico.is-pink { background: #fdf2f8; color: #db2777; }
.hp-pill-ico.is-yellow { background: #fefce8; color: #ca8a04; }
.hp-pill-ico.is-violet { background: #f5f3ff; color: #6d28d9; }

.hp-board {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 22px;
    border: 1px solid #e8eef6;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.08);
}

.hp-board-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.hp-board-head em {
    display: block;
    color: #2563eb;
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hp-board-head strong {
    display: block;
    margin-top: 6px;
    color: #0f172a;
    font-family: var(--ep-heading);
    font-size: 1.28rem;
    letter-spacing: -0.03em;
}

.hp-board-head > span {
    flex-shrink: 0;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.75rem;
    font-weight: 800;
}

.hp-board-progress {
    margin: 16px 0 14px;
}

.hp-board-meter {
    height: 8px;
    border-radius: 999px;
    background: #eef2f7;
    overflow: hidden;
}

.hp-board-meter i {
    display: block;
    width: 22%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #f59e0b);
}

.hp-board-progress small {
    display: block;
    margin-top: 8px;
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 600;
}

.hp-board-list {
    display: grid;
    gap: 10px;
    flex: 1;
}

.hp-board-list article {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 12px;
    border: 1px solid #eef2f7;
    border-radius: 18px;
    background: #f8fbff;
}

.hp-board-list article.is-green { box-shadow: inset 3px 0 0 #10b981; }
.hp-board-list article.is-blue { box-shadow: inset 3px 0 0 #2563eb; }
.hp-board-list article.is-purple { box-shadow: inset 3px 0 0 #7c3aed; }
.hp-board-list article.is-orange { box-shadow: inset 3px 0 0 #ea580c; }

.hp-step-ico {
    width: 42px;
    height: 42px;
    border-radius: 14px;
}

.hp-board-list article .pp-badge {
    margin-bottom: 4px;
}

.hp-board-list article strong {
    display: block;
    color: #0f172a;
    font-size: 0.98rem;
    letter-spacing: -0.02em;
}

.hp-board-list .pp-time {
    color: #64748b;
    font-weight: 700;
}

.hp-board-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eef2f7;
}

.hp-board-foot span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f8fbff;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 700;
}

.hp-proof {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    border: 1px solid #e8eef6;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}

.hp-proof li {
    padding: 18px 22px;
    border-right: 1px solid #eef2f7;
}

.hp-proof li:last-child {
    border-right: 0;
}

.hp-proof strong {
    display: block;
    color: #0f172a;
    font-family: var(--ep-heading);
    font-size: 1.28rem;
    letter-spacing: -0.03em;
}

.hp-proof span {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
}

.hp-stage-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.hp-stage-stats article {
    padding: 18px 18px 16px;
    border: 1px solid #e8eef6;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.hp-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.hp-stat-ico {
    width: 36px;
    height: 36px;
    border-radius: 12px;
}

.hp-stage-stats strong {
    display: block;
    color: #0f172a;
    font-family: var(--ep-heading);
    font-size: 1.08rem;
    letter-spacing: -0.03em;
}

.hp-stage-stats article > span:last-child {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.5;
}

body.is-nav-open {
    overflow: hidden;
}

body.is-home {
    overflow-x: hidden;
}

body.is-home .container,
body.is-home .header .container {
    width: 100%;
    max-width: none;
    padding-left: 24px;
    padding-right: 24px;
}

body.is-home .cta {
    padding-left: 0;
    padding-right: 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 72px;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 22px;
}

.hero h1 {
    max-width: 640px;
    margin: 0 0 18px;
    color: #0f172a;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.05em;
}

.hero h1 span {
    display: block;
    color: #2563eb;
}

.hero-content > p {
    max-width: 540px;
    margin: 0 0 28px;
    color: #64748b;
    font-size: 1.08rem;
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid #dbe4f0;
    border-radius: 14px;
    background: #fff;
    color: #334155;
    font-size: 0.95rem;
    font-weight: 700;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 40px;
}

.hero-stats strong {
    display: block;
    color: #0f172a;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
}

.hero-stats span {
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 600;
}

.hero-card-area {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.learning-card {
    width: min(100%, 400px);
    padding: 26px;
    border: 1px solid #e8eef6;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.1);
}

.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.card-top small {
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.card-top h3 {
    margin-top: 4px;
    color: #0f172a;
    font-size: 1.2rem;
}

.progress-circle {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 800;
}

.progress-bar {
    height: 7px;
    margin: 22px 0;
    border-radius: 999px;
    background: #eef2f7;
}

.progress-bar div {
    width: 78%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #4f46e5);
}

.lesson {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    margin-bottom: 8px;
}

.lesson > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
}

.lesson svg {
    width: 15px;
    height: 15px;
}

.lesson.completed > span {
    background: #dcfce7;
    color: #16a34a;
}

.lesson.active {
    background: #f1f5ff;
}

.lesson.active > span {
    background: #2563eb;
    color: #fff;
}

.lesson strong {
    display: block;
    font-size: 0.88rem;
}

.lesson small {
    color: #94a3b8;
    font-size: 0.72rem;
}

.continue-btn {
    display: block;
    margin-top: 16px;
    padding: 13px;
    border-radius: 12px;
    background: #2563eb;
    color: #fff;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 800;
}

.floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
}

.mini-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    color: #2563eb;
}

.mini-icon svg {
    width: 18px;
    height: 18px;
}

.mini-icon.is-blue {
    background: #eff6ff;
}

.mini-icon.is-gold {
    background: #fff7ed;
    color: #d97706;
}

.floating-card strong {
    display: block;
    font-size: 0.82rem;
}

.floating-card small {
    color: #94a3b8;
    font-size: 0.72rem;
}

.card-one {
    left: 0;
    top: 42px;
}

.card-two {
    right: 0;
    bottom: 36px;
}

.page-hero {
    padding: 56px 0 24px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.page-hero span {
    display: inline-block;
    margin-bottom: 10px;
    color: #2563eb;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.page-hero h1 {
    max-width: 720px;
    color: #0f172a;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.page-hero p {
    max-width: 620px;
    margin-top: 12px;
    color: #64748b;
}

.features,
.resources,
.practice,
.courses,
.reviews {
    padding: 96px 0;
}

.section-heading {
    max-width: 680px;
    margin: 0 auto 48px;
    text-align: center;
}

.section-heading > span,
.about span {
    color: #3b82f6;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.section-heading h2,
.about h2 {
    margin: 10px 0 12px;
    color: #0f172a;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.2;
    letter-spacing: -0.04em;
}

.section-heading h2 strong {
    color: #2563eb;
}

.section-heading p,
.about > div > p {
    color: #6b7280;
}

.features {
    background: #fff;
}

.resources {
    background: #f8fbff;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.feature-card {
    padding: 28px 24px 30px;
    border: 1px solid #eef2f7;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.feature-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 22px;
    border-radius: 14px;
}

.feature-icon svg {
    width: 24px;
    height: 24px;
}

.feature-icon.blue {
    background: #eff6ff;
    color: #2563eb;
}

.feature-icon.purple {
    background: #f5f3ff;
    color: #7c3aed;
}

.feature-icon.orange {
    background: #fff7ed;
    color: #ea580c;
}

.feature-icon.green {
    background: #ecfdf5;
    color: #059669;
}

.feature-icon.pink {
    background: #fdf2f8;
    color: #db2777;
}

.feature-icon.yellow {
    background: #fefce8;
    color: #ca8a04;
}

.feature-icon.violet {
    background: #f5f3ff;
    color: #7c3aed;
}

.features-page {
    padding: 72px 0 96px;
    background: #fff;
}

.feature-showcase {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.feature-box {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    min-height: 210px;
    overflow: hidden;
    border: 1px solid #eef2f7;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.feature-box-copy {
    padding: 22px 18px 22px 22px;
}

.feature-box-copy .feature-icon {
    margin-bottom: 14px;
}

.feature-box-copy h3 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 1.12rem;
}

.feature-box-copy p {
    margin: 0 0 14px;
    color: #6b7280;
    font-size: 0.88rem;
    line-height: 1.6;
}

.feature-box-copy a {
    color: #2563eb;
    font-size: 0.86rem;
    font-weight: 800;
}

.feature-box-art {
    position: relative;
    display: grid;
    place-items: center;
    padding: 16px;
    background:
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.7), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}

.feature-box.is-purple .feature-box-art { background: linear-gradient(180deg, #faf8ff, #f3e8ff); }
.feature-box.is-orange .feature-box-art { background: linear-gradient(180deg, #fffaf3, #ffedd5); }
.feature-box.is-green .feature-box-art { background: linear-gradient(180deg, #f3fdf8, #dcfce7); }
.feature-box.is-pink .feature-box-art { background: linear-gradient(180deg, #fff7fb, #fce7f3); }
.feature-box.is-yellow .feature-box-art { background: linear-gradient(180deg, #fffdf3, #fef9c3); }
.feature-box.is-violet .feature-box-art { background: linear-gradient(180deg, #faf8ff, #ede9fe); }

.fx-speak span,
.fx-bars span,
.fx-chat b {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 14px 14px 14px 4px;
    background: #2563eb;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
}

.fx-speak em {
    display: block;
    width: 64px;
    height: 64px;
    margin: 14px auto 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #93c5fd, #2563eb);
}

.fx-tabs,
.fx-papers,
.fx-list,
.fx-note {
    display: grid;
    gap: 8px;
    width: 100%;
}

.fx-tabs b,
.fx-papers b,
.fx-list b,
.fx-note b {
    padding: 8px 10px;
    border-radius: 10px;
    background: #fff;
    color: #1e3a8a;
    font-size: 0.78rem;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.fx-tabs b:nth-child(2),
.fx-papers b:nth-child(2) { background: #dbeafe; }
.fx-tabs b:nth-child(3),
.fx-papers b:nth-child(3) { background: #dcfce7; color: #166534; }

.fx-audio {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 72px;
}

.fx-audio i {
    display: block;
    width: 10px;
    border-radius: 99px;
    background: #22c55e;
}

.fx-audio i:nth-child(1) { height: 22px; }
.fx-audio i:nth-child(2) { height: 40px; }
.fx-audio i:nth-child(3) { height: 64px; background: #2563eb; }
.fx-audio i:nth-child(4) { height: 36px; }
.fx-audio i:nth-child(5) { height: 20px; }

.fx-book {
    width: 86px;
    height: 62px;
    border-radius: 8px 14px 14px 8px;
    background: linear-gradient(90deg, #f472b6, #fb7185);
    box-shadow: 0 10px 20px rgba(244, 114, 182, 0.28);
}

.fx-book span {
    position: absolute;
    top: 22px;
    padding: 6px 8px;
    border-radius: 999px;
    background: #facc15;
    color: #854d0e;
    font-size: 0.68rem;
    font-weight: 800;
}

.fx-chat em {
    display: block;
    width: 42px;
    height: 28px;
    margin-top: 10px;
    margin-left: auto;
    border-radius: 14px;
    background: #e2e8f0;
}

.fx-bars {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 84px;
}

.fx-bars span {
    position: absolute;
    top: 18px;
    right: 14px;
}

.fx-bars i {
    width: 12px;
    border-radius: 6px 6px 0 0;
    background: #22c55e;
}

.fx-bars i:nth-child(2) { height: 22px; }
.fx-bars i:nth-child(3) { height: 36px; background: #2563eb; }
.fx-bars i:nth-child(4) { height: 50px; }
.fx-bars i:nth-child(5) { height: 64px; background: #2563eb; }

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

body.is-features,
body.is-courses,
body.is-practice {
    overflow-x: hidden;
}

html:has(body.is-features),
html:has(body.is-courses),
html:has(body.is-practice) {
    scroll-padding-top: 188px;
}

.fp-hero {
    position: relative;
    padding: 56px 0 48px;
    overflow: hidden;
    background:
        radial-gradient(720px 280px at 8% -10%, rgba(37, 99, 235, 0.16), transparent 58%),
        radial-gradient(560px 240px at 92% 0%, rgba(79, 70, 229, 0.12), transparent 52%),
        linear-gradient(180deg, #07111f 0%, #102037 100%);
    color: #e8eef8;
}

.fp-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 48px;
    align-items: center;
}

.fp-hero-copy span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.12);
    color: #fde68a;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.fp-hero-copy h1 {
    max-width: 640px;
    margin: 16px 0 14px;
    color: #fff;
    font-size: clamp(34px, 4.6vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.fp-hero-copy h1 strong {
    color: #93c5fd;
}

.fp-hero-copy p {
    max-width: 560px;
    margin: 0 0 28px;
    color: #b7c4d8;
    font-size: 1.05rem;
    line-height: 1.7;
}

.fp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.fp-hero-actions .secondary-btn {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.fp-hero-aside {
    display: grid;
    gap: 12px;
}

.fp-hero-aside article {
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
}

.fp-hero-aside em {
    display: block;
    margin-bottom: 6px;
    color: #fbbf24;
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.fp-hero-aside strong {
    display: block;
    color: #fff;
    font-size: 1.05rem;
    letter-spacing: -0.03em;
}

.fp-hero-aside span {
    display: block;
    margin-top: 4px;
    color: #9fb0c9;
    font-size: 0.86rem;
    line-height: 1.55;
}

.fp-hero.is-light {
    color: #172033;
    background:
        radial-gradient(920px 380px at 8% -12%, rgba(37, 99, 235, 0.1), transparent 58%),
        radial-gradient(640px 280px at 96% 0%, rgba(245, 158, 11, 0.08), transparent 52%),
        linear-gradient(180deg, #f4f8ff 0%, #ffffff 72%);
}

.fp-hero.is-light .fp-hero-copy span {
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
    letter-spacing: 0.08em;
}

.fp-hero.is-light .fp-hero-copy h1 {
    color: #0f172a;
}

.fp-hero.is-light .fp-hero-copy h1 strong {
    color: #2563eb;
}

.fp-hero.is-light .fp-hero-copy p {
    color: #64748b;
}

.fp-hero.is-light .fp-hero-actions .secondary-btn {
    border-color: #dbe4f0;
    background: #fff;
    color: #334155;
}

.fp-hero.is-light .fp-hero-aside article {
    border-color: #e8eef6;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.fp-hero.is-light .fp-hero-aside em {
    color: #2563eb;
}

.fp-hero.is-light .fp-hero-aside strong {
    color: #0f172a;
}

.fp-hero.is-light .fp-hero-aside span {
    color: #64748b;
}

.fp-jump {
    position: sticky;
    top: 128px;
    z-index: 20;
    border-bottom: 1px solid #e8eef6;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
}

.fp-jump-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    scrollbar-width: none;
}

.fp-jump-row::-webkit-scrollbar {
    display: none;
}

.fp-jump-row a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #e8eef6;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.fp-jump-row a:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.fp-list {
    padding: 28px 0 40px;
    background:
        radial-gradient(640px 220px at 100% 0%, rgba(37, 99, 235, 0.05), transparent 55%),
        #fff;
}

.fp-row {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(240px, 0.95fr);
    gap: 36px;
    align-items: center;
    margin: 28px 0;
    padding: 36px 40px;
    border: 1px solid #e8eef6;
    border-radius: 28px;
    background:
        radial-gradient(280px 160px at 100% 0%, rgba(37, 99, 235, 0.06), transparent 62%),
        #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
}

.fp-row.is-flip {
    grid-template-columns: minmax(240px, 0.95fr) minmax(0, 1.05fr);
}

.fp-row.is-flip .fp-row-copy {
    order: 2;
}

.fp-row.is-flip .fp-row-visual {
    order: 1;
}

.fp-row-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.fp-row-kicker .feature-icon {
    width: 48px;
    height: 48px;
    margin: 0;
}

.fp-row-kicker span {
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.fp-row-copy h2 {
    max-width: 520px;
    margin: 0 0 12px;
    color: #0f172a;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.fp-row-copy > p {
    max-width: 540px;
    margin: 0 0 18px;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.7;
}

.fp-row-copy ul {
    display: grid;
    gap: 10px;
    margin: 0 0 22px;
    list-style: none;
}

.fp-row-copy li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #334155;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.5;
}

.fp-row-copy li svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #2563eb;
}

.fp-row-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.9rem;
    font-weight: 800;
}

.fp-row-cta:hover {
    background: #dbeafe;
}

.fp-row-visual {
    min-height: 260px;
}

.fp-row-panel {
    display: grid;
    place-items: center;
    min-height: 260px;
    padding: 28px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 80% 18%, rgba(255, 255, 255, 0.8), transparent 34%),
        linear-gradient(180deg, #f8fbff 0%, #e8f0ff 100%);
}

.fp-row.is-purple .fp-row-panel { background: linear-gradient(180deg, #faf8ff, #efe6ff); }
.fp-row.is-orange .fp-row-panel { background: linear-gradient(180deg, #fffaf3, #ffedd5); }
.fp-row.is-green .fp-row-panel { background: linear-gradient(180deg, #f3fdf8, #dcfce7); }
.fp-row.is-pink .fp-row-panel { background: linear-gradient(180deg, #fff7fb, #fce7f3); }
.fp-row.is-yellow .fp-row-panel { background: linear-gradient(180deg, #fffdf3, #fef9c3); }
.fp-row.is-violet .fp-row-panel { background: linear-gradient(180deg, #faf8ff, #ede9fe); }

.fp-mock {
    width: 100%;
    max-width: 320px;
    padding: 18px 18px 20px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
}

.fp-mock-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.fp-mock-bar i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e2e8f0;
}

.fp-mock-bar i:nth-child(1) { background: #fca5a5; }
.fp-mock-bar i:nth-child(2) { background: #fcd34d; }
.fp-mock-bar i:nth-child(3) { background: #86efac; }

.fp-mock strong {
    display: block;
    color: #0f172a;
    font-size: 1.12rem;
    letter-spacing: -0.03em;
}

.fp-mock > span {
    display: block;
    margin: 4px 0 16px;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 700;
}

.fp-mock ul {
    display: grid;
    gap: 8px;
    margin: 0;
    list-style: none;
}

.fp-mock li {
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fbff;
    color: #334155;
    font-size: 0.86rem;
    font-weight: 700;
}

.fp-row.is-purple .fp-mock li { background: #f5f3ff; }
.fp-row.is-orange .fp-mock li { background: #fff7ed; }
.fp-row.is-green .fp-mock li { background: #ecfdf5; }
.fp-row.is-pink .fp-mock li { background: #fdf2f8; }
.fp-row.is-yellow .fp-mock li { background: #fefce8; }
.fp-row.is-violet .fp-mock li { background: #f5f3ff; }

.fp-together {
    padding: 40px 0 96px;
    background:
        radial-gradient(640px 220px at 0% 0%, rgba(37, 99, 235, 0.06), transparent 55%),
        #f8fbff;
}

.fp-together-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.fp-together-grid article {
    padding: 24px 22px 26px;
    border: 1px solid #e8eef6;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.fp-together-grid em {
    display: inline-flex;
    margin-bottom: 14px;
    color: #2563eb;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.fp-together-grid h3 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 1.08rem;
    letter-spacing: -0.03em;
}

.fp-together-grid p {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.65;
}

.fp-together-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 36px 0 0;
}

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

.cp-compare,
.cp-catalog,
.cp-path {
    padding: 48px 0 24px;
}

.cp-catalog {
    padding-top: 12px;
    padding-bottom: 40px;
    background:
        radial-gradient(640px 220px at 100% 0%, rgba(37, 99, 235, 0.05), transparent 55%),
        #fff;
}

.cp-compare {
    background:
        radial-gradient(640px 220px at 0% 0%, rgba(37, 99, 235, 0.06), transparent 55%),
        #f8fbff;
}

.cp-compare-grid,
.cp-path-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.cp-path-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cp-compare-card,
.cp-path-grid article {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px 22px 20px;
    border: 1px solid #e8eef6;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cp-compare-card::before,
.cp-path-grid article::before,
.cp-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.cp-compare-card:hover,
.cp-path-grid article:hover,
.cp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.1);
}

.cp-compare-card.is-beginner {
    background:
        radial-gradient(160px 90px at 100% 0%, rgba(16, 185, 129, 0.12), transparent 62%),
        #fff;
}

.cp-compare-card.is-intermediate {
    background:
        radial-gradient(160px 90px at 100% 0%, rgba(37, 99, 235, 0.12), transparent 62%),
        #fff;
}

.cp-compare-card.is-advanced {
    background:
        radial-gradient(160px 90px at 100% 0%, rgba(234, 88, 12, 0.12), transparent 62%),
        #fff;
}

.cp-compare-card.is-beginner::before { background: linear-gradient(90deg, #059669, #6ee7b7); }
.cp-compare-card.is-intermediate::before { background: linear-gradient(90deg, #2563eb, #93c5fd); }
.cp-compare-card.is-advanced::before { background: linear-gradient(90deg, #ea580c, #fdba74); }
.cp-compare-card.is-beginner:hover { border-color: #6ee7b7; }
.cp-compare-card.is-intermediate:hover { border-color: #93c5fd; }
.cp-compare-card.is-advanced:hover { border-color: #fdba74; }

.cp-compare-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.cp-compare-card em,
.cp-path-grid em,
.cp-group-head span {
    display: inline-flex;
    margin-bottom: 0;
    color: #2563eb;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.cp-group-head span {
    margin-bottom: 10px;
}

.cp-compare-card h3,
.cp-path-grid h3,
.cp-group-head h2 {
    margin: 0 0 8px;
    color: #0f172a;
    font-family: var(--ep-heading);
    letter-spacing: -0.04em;
}

.cp-compare-card h3,
.cp-path-grid h3 {
    font-size: 1.28rem;
}

.cp-compare-card p,
.cp-path-grid p,
.cp-group-head p {
    margin: 0 0 16px;
    color: #64748b;
    font-size: 0.94rem;
    line-height: 1.65;
}

.cp-compare-card > p:not(.cp-includes) {
    min-height: 3.3em;
}

.cp-includes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px !important;
    color: #94a3b8 !important;
    font-size: 0.72rem !important;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cp-includes b {
    color: #64748b;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.cp-skill-board,
.cp-compare-card ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 0 0 16px;
    padding: 10px;
    list-style: none;
    border: 1px solid #eef2f7;
    border-radius: 18px;
    background: #f8fafc;
}

.cp-compare-card li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 11px;
    font-size: 0.8rem;
    font-weight: 700;
}

.cp-compare-card li.is-on {
    background: #fff;
    border: 1px solid #d1fae5;
    color: #065f46;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.cp-compare-card li.is-off {
    background: transparent;
    border: 1px dashed #e2e8f0;
    color: #94a3b8;
}

.cp-compare-card li svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.cp-compare-card li.is-on svg {
    color: #16a34a;
}

.cp-compare-card li.is-off svg {
    color: #cbd5e1;
}

.cp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-height: 42px;
    margin-top: auto;
    padding: 0 14px;
    border-radius: 14px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.82rem;
    font-weight: 800;
}

.cp-compare-card:hover .cp-cta,
.cp-card:hover .cp-cta {
    background: #2563eb;
    color: #fff;
}

.cp-path-grid article.is-blue { background: radial-gradient(160px 100px at 100% 0%, rgba(37, 99, 235, 0.12), transparent 62%), #fff; }
.cp-path-grid article.is-orange { background: radial-gradient(160px 100px at 100% 0%, rgba(234, 88, 12, 0.12), transparent 62%), #fff; }
.cp-path-grid article.is-purple { background: radial-gradient(160px 100px at 100% 0%, rgba(124, 58, 237, 0.12), transparent 62%), #fff; }
.cp-path-grid article.is-green { background: radial-gradient(160px 100px at 100% 0%, rgba(16, 185, 129, 0.12), transparent 62%), #fff; }
.cp-path-grid article.is-blue::before { background: linear-gradient(90deg, #2563eb, #93c5fd); }
.cp-path-grid article.is-orange::before { background: linear-gradient(90deg, #ea580c, #fdba74); }
.cp-path-grid article.is-purple::before { background: linear-gradient(90deg, #7c3aed, #c4b5fd); }
.cp-path-grid article.is-green::before { background: linear-gradient(90deg, #059669, #6ee7b7); }

.cp-path-grid em {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: #eff6ff;
    color: #1d4ed8;
    letter-spacing: 0.04em;
}

.cp-path-grid article.is-orange em { background: #fff7ed; color: #c2410c; }
.cp-path-grid article.is-purple em { background: #f5f3ff; color: #6d28d9; }
.cp-path-grid article.is-green em { background: #ecfdf5; color: #047857; }

.cp-group {
    margin-bottom: 36px;
    scroll-margin-top: 188px;
}

.cp-anchor {
    display: block;
    height: 0;
    scroll-margin-top: 188px;
}

.cp-group-head {
    max-width: 640px;
    margin-bottom: 22px;
}

.cp-group-head h2 {
    font-size: clamp(26px, 3vw, 36px);
}

.cp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

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

.cp-grid.is-single {
    grid-template-columns: 1fr;
}

.cp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 100%;
    scroll-margin-top: 188px;
    padding: 22px 22px 20px;
    border: 1px solid #e8eef6;
    border-radius: 24px;
    background:
        radial-gradient(180px 110px at 100% 0%, rgba(37, 99, 235, 0.07), transparent 62%),
        #fff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cp-card.is-beginner::before { background: linear-gradient(90deg, #059669, #6ee7b7); }
.cp-card.is-intermediate::before { background: linear-gradient(90deg, #2563eb, #93c5fd); }
.cp-card.is-advanced::before { background: linear-gradient(90deg, #ea580c, #fdba74); }
.cp-card.is-beginner:hover { border-color: #6ee7b7; }
.cp-card.is-intermediate:hover { border-color: #93c5fd; }
.cp-card.is-advanced:hover { border-color: #fdba74; }

.cp-card.is-beginner {
    background:
        radial-gradient(180px 110px at 100% 0%, rgba(16, 185, 129, 0.1), transparent 62%),
        #fff;
}

.cp-card.is-advanced {
    background:
        radial-gradient(180px 110px at 100% 0%, rgba(234, 88, 12, 0.1), transparent 62%),
        #fff;
}

.cp-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.cp-card-top em {
    margin: 0;
    color: #2563eb;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.cp-card.is-beginner .cp-card-top em { color: #059669; }
.cp-card.is-advanced .cp-card-top em { color: #ea580c; }

.cp-card-title {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 14px;
}

.cp-card .course-mark {
    width: 52px;
    min-width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 1.05rem;
}

.cp-card.is-beginner .course-mark { background: #ecfdf5; color: #047857; }
.cp-card.is-intermediate .course-mark { background: #eff6ff; color: #1d4ed8; }
.cp-card.is-advanced .course-mark { background: #fff7ed; color: #c2410c; }

.cp-card h3 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 1.18rem;
    letter-spacing: -0.03em;
}

.cp-card > p,
.cp-card-title p {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.6;
    min-height: 2.8em;
}

.cp-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.cp-card-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f8fbff;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 700;
}

.cp-card ul,
.cp-card-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 0 0 16px;
    padding: 10px;
    list-style: none;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    background: #f8fafc;
}

.cp-card li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 8px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e8eef6;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 700;
}

.cp-card li svg {
    width: 14px;
    height: 14px;
    color: #16a34a;
    flex-shrink: 0;
}

.cp-card-foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #eef2f7;
}

.cp-card-foot strong {
    color: #0f172a;
    font-size: 1.12rem;
    letter-spacing: -0.03em;
}

.cp-card-foot .course-mrp {
    color: #94a3b8;
    font-weight: 600;
    text-decoration: line-through;
    margin-right: 6px;
    font-size: 0.86rem;
}

.cp-card-foot .course-off {
    color: #16a34a;
    font-style: normal;
    font-weight: 800;
    font-size: 0.72em;
    margin-left: 4px;
}

.cp-card-foot a,
.cp-card .cp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 14px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.84rem;
    font-weight: 800;
    white-space: nowrap;
}

.cp-card-foot a:hover,
.cp-card:hover .cp-cta,
.cp-card:hover .cp-card-foot a {
    background: #2563eb;
    color: #fff;
}

.cp-grid.is-single .cp-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 280px;
    gap: 8px 36px;
    align-items: center;
    padding: 28px 28px 28px 32px;
}

.cp-grid.is-single .cp-card-top,
.cp-grid.is-single .cp-card-title,
.cp-grid.is-single h3,
.cp-grid.is-single > p,
.cp-grid.is-single .cp-card-meta,
.cp-grid.is-single ul,
.cp-grid.is-single .cp-card-points {
    grid-column: 1;
}

.cp-grid.is-single ul,
.cp-grid.is-single .cp-card-points {
    margin-bottom: 0;
}

.cp-grid.is-single .cp-card-foot {
    grid-column: 2;
    grid-row: 1 / span 8;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    margin: 0;
    padding: 8px 0 8px 28px;
    border-top: 0;
    border-left: 1px solid #e8eef6;
    min-height: 220px;
}

.cp-grid.is-single .cp-card-foot strong {
    font-size: 1.2rem;
}

.cp-grid.is-single .cp-card-foot a {
    justify-content: center;
    min-height: 46px;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
}

.cp-grid.is-single .cp-card-foot a:hover {
    background: linear-gradient(135deg, #1d4ed8, #4338ca);
}

.cp-path {
    padding: 28px 0 96px;
    background: #f8fbff;
}

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

.pp-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.pp-badge.is-blue { background: #eff6ff; color: #1d4ed8; }
.pp-badge.is-green { background: #ecfdf5; color: #047857; }
.pp-badge.is-purple { background: #f5f3ff; color: #6d28d9; }
.pp-badge.is-orange { background: #fff7ed; color: #c2410c; }
.pp-badge.is-pink { background: #fdf2f8; color: #be185d; }
.pp-badge.is-yellow { background: #fefce8; color: #a16207; }
.pp-badge.is-violet { background: #f5f3ff; color: #6d28d9; }

.pp-time {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
}

.pp-plan,
.pp-skills,
.pp-habit {
    padding: 48px 0 24px;
    scroll-margin-top: 188px;
}

.pp-session {
    scroll-margin-top: 188px;
}

.pp-plan {
    background:
        radial-gradient(640px 220px at 0% 0%, rgba(37, 99, 235, 0.06), transparent 55%),
        #f8fbff;
}

.pp-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.pp-plan-card {
    padding: 24px 22px 22px;
    border: 1px solid #e8eef6;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.pp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.pp-plan-card em {
    color: #2563eb;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.pp-plan-card h3,
.pp-skill-card h3,
.pp-habit-grid h3 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 1.12rem;
    letter-spacing: -0.03em;
}

.pp-plan-card p,
.pp-skill-card p,
.pp-habit-grid p {
    margin: 0 0 16px;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.65;
}

.pp-plan-card a,
.pp-skill-cta {
    color: #2563eb;
    font-size: 0.84rem;
    font-weight: 800;
}

.pp-skills {
    background: #fff;
}

.pp-skill-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

a.pp-skill-card {
    display: flex;
    flex-direction: column;
    padding: 22px 20px 20px;
    border: 1px solid #e8eef6;
    border-radius: 22px;
    background:
        radial-gradient(140px 90px at 100% 0%, rgba(37, 99, 235, 0.07), transparent 62%),
        #fff;
    color: inherit;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.pp-skill-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.pp-skill-card.is-green { background: radial-gradient(140px 90px at 100% 0%, rgba(16, 185, 129, 0.1), transparent 62%), #fff; }
.pp-skill-card.is-purple { background: radial-gradient(140px 90px at 100% 0%, rgba(124, 58, 237, 0.1), transparent 62%), #fff; }
.pp-skill-card.is-orange { background: radial-gradient(140px 90px at 100% 0%, rgba(234, 88, 12, 0.1), transparent 62%), #fff; }
.pp-skill-card.is-pink { background: radial-gradient(140px 90px at 100% 0%, rgba(219, 39, 119, 0.1), transparent 62%), #fff; }
.pp-skill-card.is-yellow { background: radial-gradient(140px 90px at 100% 0%, rgba(202, 138, 4, 0.1), transparent 62%), #fff; }
.pp-skill-card.is-violet { background: radial-gradient(140px 90px at 100% 0%, rgba(109, 40, 217, 0.1), transparent 62%), #fff; }

.pp-skill-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.pp-skill-card .feature-icon {
    margin: 0;
}

.pp-skill-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.pp-skill-card p {
    flex: 1;
}

.pp-session {
    padding: 28px 0 20px;
    background: #fff;
}

.pp-session-card {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
    gap: 28px;
    align-items: stretch;
    padding: 36px 36px;
    border: 1px solid #e8eef6;
    border-radius: 28px;
    background:
        radial-gradient(280px 160px at 0% 0%, rgba(37, 99, 235, 0.08), transparent 58%),
        #f8fbff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
}

.pp-session-copy h2 {
    max-width: 460px;
    margin: 12px 0 12px;
    color: #0f172a;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.pp-session-copy > p {
    max-width: 480px;
    margin: 0 0 16px;
    color: #64748b;
    line-height: 1.7;
}

.pp-session-copy ul {
    display: grid;
    gap: 10px;
    margin: 0 0 22px;
    list-style: none;
}

.pp-session-copy li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #334155;
    font-size: 0.94rem;
    font-weight: 600;
}

.pp-session-copy li svg {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: #2563eb;
    flex-shrink: 0;
}

.pp-session-list {
    display: grid;
    gap: 12px;
}

.pp-session-list article {
    position: relative;
    padding: 16px 18px 16px 16px;
    border: 1px solid #e8eef6;
    border-radius: 18px;
    background: #fff;
}

.pp-session-list article > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.pp-session-list strong {
    display: block;
    color: #0f172a;
    font-size: 0.98rem;
}

.pp-session-list p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.55;
}

.pp-session-list em {
    position: absolute;
    top: 16px;
    right: 16px;
    color: #cbd5e1;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 800;
}

.pp-habit {
    padding: 28px 0 96px;
    background:
        radial-gradient(640px 220px at 100% 0%, rgba(37, 99, 235, 0.05), transparent 55%),
        #f8fbff;
}

.pp-habit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.pp-habit-grid article {
    padding: 24px 22px 22px;
    border: 1px solid #e8eef6;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
}

.pp-habit-grid .pp-badge {
    margin-bottom: 14px;
}

.feature-card h3 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 1.08rem;
}

.feature-card p {
    color: #6b7280;
    font-size: 0.92rem;
    line-height: 1.65;
}

.practice {
    background: #f8fafc;
}

.step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.step-card {
    padding: 28px;
    border: 1px solid #e8eef6;
    border-radius: 20px;
    background: #fff;
}

.step-card em {
    display: inline-flex;
    margin-bottom: 16px;
    color: #2563eb;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.step-card h3 {
    margin: 0 0 8px;
    font-size: 1.15rem;
}

.step-card p {
    color: #64748b;
}

.step-card a {
    display: inline-block;
    margin-top: 14px;
    color: #2563eb;
    font-size: 0.9rem;
    font-weight: 700;
}

.courses {
    background: #fff;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.course-card {
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid #e8eef6;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.course-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.course-mark {
    display: grid;
    place-items: center;
    min-width: 48px;
    height: 48px;
    padding: 0 10px;
    border-radius: 14px;
    background: #eff6ff;
    font-size: 1.2rem;
    font-weight: 800;
}

.course-card.is-beginner .course-mark { background: #ecfdf5; }
.course-card.is-intermediate .course-mark { background: #eff6ff; }
.course-card.is-advanced .course-mark { background: #fff7ed; }

.level {
    color: #2563eb;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.course-card h3 {
    margin: 0 0 8px;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
}

.course-card p {
    margin: 0 0 18px;
    color: #64748b;
}

.course-card ul {
    list-style: none;
    margin: 0 0 22px;
}

.course-card li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    color: #334155;
    font-size: 0.92rem;
}

.course-card li svg {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    color: #16a34a;
    flex-shrink: 0;
}

.course-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.course-card-foot strong {
    color: #0f172a;
}

.course-card-foot .course-mrp {
    color: #94a3b8;
    font-weight: 600;
    text-decoration: line-through;
    margin-right: 6px;
}

.course-card-foot .course-off {
    color: #16a34a;
    font-style: normal;
    font-weight: 800;
    font-size: 0.78em;
    margin-left: 4px;
}

.course-card a {
    color: #2563eb;
    font-size: 0.88rem;
    font-weight: 800;
}

.about {
    background: #f8fbff;
}

.about-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
}

.about h2 {
    max-width: 520px;
    text-align: left;
}

.about-points {
    display: grid;
    gap: 12px;
    margin-top: 22px;
    list-style: none;
}

.about-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #334155;
    font-weight: 600;
}

.about-points svg {
    width: 18px;
    height: 18px;
    color: #2563eb;
}

.about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.about-stats article {
    padding: 22px;
    border: 1px solid #e8eef6;
    border-radius: 18px;
    background: #fff;
}

.about-stats strong {
    display: block;
    margin-bottom: 4px;
    font-size: 1.05rem;
}

.about-stats span {
    color: #64748b;
    font-size: 0.86rem;
    letter-spacing: 0;
    font-weight: 500;
}

.reviews {
    background: #fff;
}

.review-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.review-card {
    padding: 26px;
    border: 1px solid #eef2f7;
    border-radius: 20px;
    background: #f8fafc;
}

.review-card p {
    margin: 0 0 18px;
    color: #334155;
    font-size: 1rem;
    line-height: 1.7;
}

.review-card strong {
    display: block;
}

.review-card small {
    color: #94a3b8;
}

.cta {
    padding: 24px 0 0;
    background: #fff;
}

.cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 40px 40px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.16), transparent 28%),
        linear-gradient(135deg, #1d4ed8, #4338ca);
    color: #fff;
}

.cta-box > div {
    max-width: 720px;
}

.cta-box span {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.cta-box h2 {
    margin: 8px 0 10px;
    font-size: clamp(26px, 3vw, 36px);
    letter-spacing: -0.04em;
}

.cta-box p {
    color: #dbeafe;
}

.cta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.cta-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.cta-box .primary-btn {
    background: #fff;
    color: #1d4ed8;
    box-shadow: none;
    white-space: nowrap;
}

.cta-box .secondary-btn {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.footer {
    border-top: 0;
    padding: 28px 0 0;
}

.footer-premium {
    margin-top: 28px;
    background:
        radial-gradient(720px 240px at 8% 0%, rgba(37, 99, 235, 0.18), transparent 58%),
        linear-gradient(180deg, #06101c 0%, #0c1a30 100%);
    color: #c5d4ea;
}

.foot-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.foot-stats article {
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
}

.foot-stats strong {
    display: block;
    color: #fff;
    font-family: var(--ep-heading);
    font-size: 1.12rem;
    letter-spacing: -0.03em;
}

.foot-stats span {
    display: block;
    margin-top: 2px;
    color: #9fb0c9;
    font-size: 0.78rem;
    font-weight: 600;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.75fr 0.85fr 0.8fr 1fr;
    gap: 28px;
    padding-bottom: 28px;
}

.footer-premium .footer-grid p {
    max-width: 360px;
    margin-top: 14px;
    color: #9fb0c9;
    font-size: 0.92rem;
    line-height: 1.65;
}

.footer-premium .footer-grid strong {
    display: block;
    margin-bottom: 14px;
    color: #fff;
    font-family: var(--ep-heading);
    font-size: 0.92rem;
    letter-spacing: -0.02em;
}

.footer-premium .footer-grid a {
    display: block;
    margin-bottom: 8px;
    color: #9fb0c9;
    font-size: 0.9rem;
}

.footer-premium .footer-grid a:hover {
    color: #fff;
}

.foot-brand .logo {
    display: inline-flex;
    padding: 8px 10px;
    border-radius: 14px;
    background: #fff;
}

.foot-contact {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.foot-contact a {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    color: #d7e4f7 !important;
    font-weight: 600;
}

.foot-contact svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.foot-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.foot-pills span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(253, 230, 138, 0.12);
    color: #fde68a;
    font-size: 0.72rem;
    font-weight: 700;
}

.foot-mini {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
}

.foot-mini em {
    display: block;
    margin-bottom: 6px;
    color: #fde68a;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.foot-mini span {
    display: block;
    color: #9fb0c9;
    font-size: 0.82rem;
    line-height: 1.55;
}

.foot-mini a {
    margin: 10px 0 0 !important;
    color: #93c5fd !important;
    font-weight: 800;
}

.footer-premium .copyright {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 -24px;
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #7f93ad;
    text-align: left;
}

.foot-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.foot-legal a {
    color: #9fb0c9;
    font-size: 0.8rem;
    font-weight: 600;
}

.foot-legal a:hover {
    color: #fff;
}

/* =========================
   HOME — premium sections
========================= */

.home-stats {
    padding: 0 0 8px;
    margin-top: -28px;
    position: relative;
    z-index: 2;
}

.home-stats-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 10px;
    border: 1px solid #e8eef6;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
}

.home-stats-row article {
    padding: 18px 18px 16px;
    border-radius: 16px;
}

.home-stats-row article:hover {
    background: #f8fbff;
}

.home-stats-row .pp-badge {
    margin-bottom: 10px;
}

.home-stats-row strong {
    display: block;
    color: #0f172a;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.home-stats-row article > span:last-child {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.5;
}

.home-features {
    padding: 72px 0 56px;
    background:
        radial-gradient(720px 240px at 8% 0%, rgba(37, 99, 235, 0.05), transparent 55%),
        #fff;
}

.hf-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.hf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 22px 20px 20px;
    overflow: hidden;
    border: 1px solid #e8eef6;
    border-radius: 24px;
    background: #fff;
    color: inherit;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.hf-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0.9;
}

.hf-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.1);
}

.hf-card.is-blue { background: radial-gradient(160px 100px at 100% 0%, rgba(37, 99, 235, 0.12), transparent 62%), #fff; }
.hf-card.is-purple { background: radial-gradient(160px 100px at 100% 0%, rgba(124, 58, 237, 0.12), transparent 62%), #fff; }
.hf-card.is-orange { background: radial-gradient(160px 100px at 100% 0%, rgba(234, 88, 12, 0.12), transparent 62%), #fff; }
.hf-card.is-green { background: radial-gradient(160px 100px at 100% 0%, rgba(16, 185, 129, 0.12), transparent 62%), #fff; }
.hf-card.is-pink { background: radial-gradient(160px 100px at 100% 0%, rgba(219, 39, 119, 0.12), transparent 62%), #fff; }
.hf-card.is-yellow { background: radial-gradient(160px 100px at 100% 0%, rgba(202, 138, 4, 0.12), transparent 62%), #fff; }
.hf-card.is-violet { background: radial-gradient(160px 100px at 100% 0%, rgba(109, 40, 217, 0.12), transparent 62%), #fff; }

.hf-card.is-blue::before { background: linear-gradient(90deg, #2563eb, #93c5fd); }
.hf-card.is-purple::before { background: linear-gradient(90deg, #7c3aed, #c4b5fd); }
.hf-card.is-orange::before { background: linear-gradient(90deg, #ea580c, #fdba74); }
.hf-card.is-green::before { background: linear-gradient(90deg, #059669, #6ee7b7); }
.hf-card.is-pink::before { background: linear-gradient(90deg, #db2777, #f9a8d4); }
.hf-card.is-yellow::before { background: linear-gradient(90deg, #ca8a04, #fde047); }
.hf-card.is-violet::before { background: linear-gradient(90deg, #6d28d9, #c4b5fd); }

.hf-card.is-blue:hover { border-color: #93c5fd; }
.hf-card.is-purple:hover { border-color: #c4b5fd; }
.hf-card.is-orange:hover { border-color: #fdba74; }
.hf-card.is-green:hover { border-color: #6ee7b7; }
.hf-card.is-pink:hover { border-color: #f9a8d4; }
.hf-card.is-yellow:hover { border-color: #fde047; }
.hf-card.is-violet:hover { border-color: #c4b5fd; }

.hf-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.hf-card-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.hf-card-icon {
    margin: 0;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.hf-card h3 {
    margin: 0 0 8px;
    color: #0f172a;
    font-family: var(--ep-heading);
    font-size: 1.12rem;
    letter-spacing: -0.03em;
}

.hf-card p {
    margin: 0 0 18px;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.65;
    flex: 1;
}

.hf-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.8rem;
    font-weight: 800;
}

.hf-card:hover .hf-cta {
    background: #2563eb;
    color: #fff;
}

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

a.home-feature-card {
    display: block;
    color: inherit;
    border-color: #e8eef6;
    background:
        radial-gradient(120px 80px at 100% 0%, rgba(37, 99, 235, 0.07), transparent 62%),
        #fff;
}

a.home-feature-card h3 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 1.08rem;
}

a.home-feature-card p {
    margin: 0 0 14px;
    color: #64748b;
    font-size: 0.88rem;
}

a.home-feature-card span {
    color: #2563eb;
    font-size: 0.82rem;
    font-weight: 800;
}

.home-more {
    margin: 28px 0 0;
    text-align: center;
}

.home-more a {
    color: #2563eb;
    font-weight: 800;
}

.home-steps {
    padding: 72px 0 56px;
    background:
        radial-gradient(640px 200px at 100% 0%, rgba(79, 70, 229, 0.06), transparent 50%),
        #f8fbff;
}

.hs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.hs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 22px 20px 20px;
    overflow: hidden;
    border: 1px solid #e8eef6;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.hs-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.hs-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 36px;
    right: -18px;
    z-index: 2;
    width: 18px;
    height: 2px;
    background: linear-gradient(90deg, #bfdbfe, #c4b5fd);
}

.hs-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.1);
}

.hs-card.is-blue { background: radial-gradient(160px 100px at 100% 0%, rgba(37, 99, 235, 0.12), transparent 62%), #fff; }
.hs-card.is-orange { background: radial-gradient(160px 100px at 100% 0%, rgba(234, 88, 12, 0.12), transparent 62%), #fff; }
.hs-card.is-purple { background: radial-gradient(160px 100px at 100% 0%, rgba(124, 58, 237, 0.12), transparent 62%), #fff; }
.hs-card.is-green { background: radial-gradient(160px 100px at 100% 0%, rgba(16, 185, 129, 0.12), transparent 62%), #fff; }

.hs-card.is-blue::before { background: linear-gradient(90deg, #2563eb, #93c5fd); }
.hs-card.is-orange::before { background: linear-gradient(90deg, #ea580c, #fdba74); }
.hs-card.is-purple::before { background: linear-gradient(90deg, #7c3aed, #c4b5fd); }
.hs-card.is-green::before { background: linear-gradient(90deg, #059669, #6ee7b7); }

.hs-card.is-blue:hover { border-color: #93c5fd; }
.hs-card.is-orange:hover { border-color: #fdba74; }
.hs-card.is-purple:hover { border-color: #c4b5fd; }
.hs-card.is-green:hover { border-color: #6ee7b7; }

.hs-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.hs-num {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: #eff6ff;
    color: #1d4ed8;
    font-family: var(--ep-heading);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.hs-card.is-orange .hs-num { background: #fff7ed; color: #c2410c; }
.hs-card.is-purple .hs-num { background: #f5f3ff; color: #6d28d9; }
.hs-card.is-green .hs-num { background: #ecfdf5; color: #047857; }

.hs-icon {
    margin: 0 0 16px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.hs-card h3 {
    margin: 0 0 8px;
    color: #0f172a;
    font-family: var(--ep-heading);
    font-size: 1.12rem;
    letter-spacing: -0.03em;
}

.hs-card p {
    margin: 0 0 18px;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.65;
    flex: 1;
}

.hs-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.8rem;
    font-weight: 800;
}

.hs-card:hover .hs-cta {
    background: #2563eb;
    color: #fff;
}

.home-step-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-steps .step-card {
    border: 1px solid #e8eef6;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.home-steps .step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.1);
}

.home-steps .step-card em {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(145deg, #60a5fa, #4f46e5);
    color: #fff;
    letter-spacing: 0;
}

.home-courses {
    background: #fff;
}

.home-session {
    padding: 8px 0 40px;
    background: #fff;
}

.hx-session {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
    gap: 32px;
    align-items: stretch;
    overflow: hidden;
    padding: 36px;
    border: 1px solid #e8eef6;
    border-radius: 28px;
    background:
        radial-gradient(320px 180px at 0% 0%, rgba(37, 99, 235, 0.1), transparent 58%),
        #f8fbff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.hx-session::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #7c3aed, #f59e0b);
}

.hx-session-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hx-session-copy h2 {
    max-width: 460px;
    margin: 14px 0 12px;
    color: #0f172a;
    font-family: var(--ep-heading);
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.hx-session-copy .primary-btn {
    align-self: flex-start;
    min-height: 48px;
}

.hx-session-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
}

.hx-session-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid #e8eef6;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 700;
}

.hx-session-list {
    display: grid;
    gap: 12px;
}

.hx-session-list article {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e8eef6;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.hx-session-list article:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}

.hx-session-list article.is-green { box-shadow: inset 3px 0 0 #10b981, 0 10px 24px rgba(15, 23, 42, 0.04); }
.hx-session-list article.is-blue { box-shadow: inset 3px 0 0 #2563eb, 0 10px 24px rgba(15, 23, 42, 0.04); }
.hx-session-list article.is-purple { box-shadow: inset 3px 0 0 #7c3aed, 0 10px 24px rgba(15, 23, 42, 0.04); }
.hx-session-list article.is-orange { box-shadow: inset 3px 0 0 #ea580c, 0 10px 24px rgba(15, 23, 42, 0.04); }

.hx-session-list article.is-green:hover { border-color: #6ee7b7; }
.hx-session-list article.is-blue:hover { border-color: #93c5fd; }
.hx-session-list article.is-purple:hover { border-color: #c4b5fd; }
.hx-session-list article.is-orange:hover { border-color: #fdba74; }

.hx-step-ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
}

.hx-step-ico svg {
    width: 18px;
    height: 18px;
}

.hx-step-ico.is-green { background: #ecfdf5; color: #059669; }
.hx-step-ico.is-blue { background: #eff6ff; color: #2563eb; }
.hx-step-ico.is-purple { background: #f5f3ff; color: #7c3aed; }
.hx-step-ico.is-orange { background: #fff7ed; color: #ea580c; }

.hx-session-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.hx-session-list strong {
    display: block;
    color: #0f172a;
    font-family: var(--ep-heading);
    font-size: 0.98rem;
    letter-spacing: -0.02em;
}

.hx-session-list em {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #f8fbff;
    color: #94a3b8;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 800;
}

body.is-home .section-heading h2 {
    font-family: var(--ep-heading);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.04em;
}

body.is-home .section-heading p {
    font-size: 1.02rem;
    font-weight: 400;
}

body.is-home .pp-skill-card h3,
body.is-home .pp-plan-card h3,
body.is-home .hs-card h3,
body.is-home .cp-card h3,
body.is-home .home-stats-row strong,
body.is-home .review-who strong {
    font-family: var(--ep-heading);
}

body.is-home .primary-btn,
body.is-home .secondary-btn,
body.is-home .dash-btn {
    font-family: var(--ep-font);
    font-weight: 600;
}

.home-reviews .review-card {
    padding: 26px 24px 24px;
    background: #fff;
    border: 1px solid #e8eef6;
    border-radius: 22px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}

.home-reviews .review-card .pp-badge {
    margin-bottom: 14px;
}

.home-reviews .review-card p {
    margin: 0 0 18px;
    color: #334155;
    font-size: 1.02rem;
    line-height: 1.7;
}

.review-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 14px;
    color: #f59e0b;
}

.review-stars svg {
    width: 16px;
    height: 16px;
}

.review-who {
    display: flex;
    align-items: center;
    gap: 10px;
}

.review-who span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
}

.home-faq {
    padding: 96px 0;
    background:
        radial-gradient(700px 220px at 50% 0%, rgba(37, 99, 235, 0.06), transparent 55%),
        #f8fbff;
}

.faq-list {
    display: grid;
    gap: 12px;
    max-width: 760px;
    margin: 0 auto;
}

.faq-item {
    border: 1px solid #e8eef6;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    list-style: none;
    cursor: pointer;
    color: #0f172a;
    font-weight: 800;
}

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

.faq-item summary::after {
    content: "+";
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 1.1rem;
    font-weight: 700;
}

.faq-item[open] summary::after {
    content: "–";
}

.faq-item p {
    margin: 0;
    padding: 0 20px 18px;
    color: #64748b;
    font-size: 0.94rem;
    line-height: 1.7;
}

@media (max-width: 980px) {
    .hero-grid,
    .about-grid,
    .feature-grid,
    .feature-showcase,
    .fp-hero-inner,
    .fp-row,
    .fp-row.is-flip,
    .fp-together-grid,
    .cp-compare-grid,
    .cp-grid,
    .cp-path-grid,
    .pp-plan-grid,
    .pp-skill-grid,
    .pp-session-card,
    .hx-session,
    .pp-habit-grid,
    .resource-grid,
    .step-grid,
    .home-step-grid,
    .home-stats-row,
    .course-grid,
    .review-grid,
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .fp-row.is-flip .fp-row-copy,
    .fp-row.is-flip .fp-row-visual {
        order: unset;
    }

    .fp-jump {
        top: 128px;
    }

    .fp-row {
        gap: 22px;
        padding: 28px 24px;
    }

    .hp-stage {
        min-height: 0;
        padding: 24px 0 28px;
    }

    .hp-stage-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hp-proof,
    .hp-stage-stats {
        grid-template-columns: 1fr 1fr;
    }

    .hp-proof li {
        border-bottom: 1px solid #eef2f7;
    }

    .hp-proof li:nth-child(2n) {
        border-right: 0;
    }

    .hp-proof li:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .hf-grid,
    .hs-grid,
    .foot-stats {
        grid-template-columns: 1fr 1fr;
    }

    .hs-card:not(:last-child)::after {
        display: none;
    }

    .hero,
    .features,
    .resources,
    .practice,
    .courses,
    .reviews,
    .home-faq {
        padding: 72px 0;
    }

    .cta-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 36px 28px;
    }
}

@media (max-width: 720px) {
    .brand-logo {
        height: 40px;
        max-width: 180px;
    }

    .hp-stage {
        min-height: 0;
        padding: 22px 0 28px;
    }

    .hp-stage-copy h1 {
        font-size: 32px;
    }

    .hp-proof,
    .hp-stage-stats {
        grid-template-columns: 1fr 1fr;
    }

    .hp-board {
        padding: 16px;
    }

    .hf-grid,
    .hs-grid {
        grid-template-columns: 1fr;
    }

    .foot-stats {
        grid-template-columns: 1fr 1fr;
    }

    .container {
        width: 92%;
    }

    .hero-grid,
    .about-grid,
    .feature-grid,
    .feature-showcase,
    .fp-hero-inner,
    .fp-row,
    .fp-row.is-flip,
    .fp-together-grid,
    .cp-compare-grid,
    .cp-grid,
    .cp-path-grid,
    .pp-plan-grid,
    .pp-skill-grid,
    .pp-session-card,
    .hx-session,
    .pp-habit-grid,
    .resource-grid,
    .step-grid,
    .home-step-grid,
    .home-stats-row,
    .course-grid,
    .review-grid,
    .about-stats,
    .footer-grid {
        grid-template-columns: 1fr;
    }

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

    .hero-card-area {
        min-height: 0;
    }

    .floating-card {
        display: none;
    }

    .hero-buttons,
    .hero-stats {
        gap: 12px;
    }

    .cta {
        padding-bottom: 56px;
    }

    .fp-hero {
        padding: 32px 0 28px;
    }

    .fp-hero-copy h1 {
        font-size: 32px;
    }

    .fp-row {
        margin: 16px 0;
        padding: 22px 18px;
    }

    .fp-row-visual,
    .fp-row-panel {
        min-height: 200px;
    }

    .fp-jump {
        top: 72px;
    }

    .fp-together {
        padding: 24px 0 72px;
    }

    .cp-compare,
    .cp-catalog,
    .cp-path {
        padding-left: 0;
        padding-right: 0;
    }

    .cp-path {
        padding-bottom: 72px;
    }

    .cp-card,
    .cp-compare-card {
        padding: 22px 18px;
    }

    .cp-card ul,
    .cp-card-points {
        grid-template-columns: 1fr;
    }

    .cp-grid.is-single .cp-card {
        grid-template-columns: 1fr;
        padding: 22px 18px;
    }

    .cp-grid.is-single .cp-card-foot {
        grid-column: 1;
        grid-row: auto;
        flex-direction: row;
        align-items: center;
        min-height: 0;
        margin-top: 16px;
        padding: 16px 0 0;
        border-left: 0;
        border-top: 1px solid #eef2f7;
    }

    .pp-session-card,
    .hx-session {
        padding: 22px 18px;
    }

    .pp-habit {
        padding-bottom: 72px;
    }
}