:root {
    --blue-dark: #061a40;
    --blue: #0d47a1;
    --blue-light: #1d4ed8;
    --gold: #facc15;
    --gold-dark: #f59e0b;
    --green: #16a34a;
    --green-soft: #dcfce7;
    --white: #ffffff;
    --soft-bg: #f8fafc;
    --soft-blue: #eef6ff;
    --text: #1f2937;
    --muted: #475569;
    --card-shadow: 0 22px 55px rgba(15, 23, 42, 0.12);
    --card-shadow-hover: 0 32px 75px rgba(15, 23, 42, 0.18);
    --radius: 28px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Segoe UI", Arial, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(22, 163, 74, 0.05), transparent 24%),
        radial-gradient(circle at top right, rgba(250, 204, 21, 0.06), transparent 26%),
        var(--soft-bg);
    color: var(--text);
    line-height: 1.5;
}

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

a {
    color: inherit;
}

/* NAVBAR */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(5, 25, 70, 0.96);
    backdrop-filter: blur(14px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 6%;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
}

.brand span {
    color: var(--gold);
    font-size: 25px;
    font-weight: 900;
    letter-spacing: 0.3px;
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-links a {
    display: inline-block;
    color: #eef6ff;
    text-decoration: none;
    font-weight: 800;
    padding: 10px 10px;
    border-radius: 999px;
    transition: 0.3s ease;
}

.nav-links a:hover {
    color: var(--gold);
    background: rgba(255, 255, 255, 0.08);
}

.nav-links a.active {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #082f73;
    box-shadow: 0 10px 22px rgba(250, 204, 21, 0.35);
}

.menu-toggle,
.menu-icon {
    display: none;
}

/* BUTTONS */
.btn,
.small-btn,
.lesson-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 900;
    transition: 0.35s ease;
}

.btn {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #082f73;
    padding: 16px 34px;
    box-shadow: 0 16px 35px rgba(250, 204, 21, 0.28);
    border: none;
}

.btn:hover,
.small-btn:hover,
.lesson-btn:hover {
    transform: translateY(-5px);
}

.btn:hover {
    background: #ffffff;
    color: var(--blue);
}

.secondary-btn {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.58);
    box-shadow: none;
}

.secondary-btn:hover {
    background: #ffffff;
    color: var(--blue);
}

.small-btn {
    margin-top: 18px;
    background: var(--blue);
    color: white;
    padding: 12px 24px;
    box-shadow: 0 12px 25px rgba(13, 71, 161, 0.22);
}

.small-btn:hover {
    background: var(--gold);
    color: #082f73;
}

.disabled-btn,
.coming-soon-btn {
    cursor: not-allowed;
    opacity: 0.78;
    filter: grayscale(0.2);
}

.disabled-btn:hover,
.coming-soon-btn:hover {
    transform: none;
}

/* COMMON SECTIONS */
.section,
.featured-courses,
.video-library,
.contact-section,
.downloads-section,
.about-section {
    padding: 90px 8%;
}

.section-white {
    background:
        radial-gradient(circle at 8% 12%, rgba(22, 163, 74, 0.045), transparent 24%),
        #ffffff;
}

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

.section-heading h2,
.page-hero h1 {
    color: var(--blue);
    font-size: 46px;
    letter-spacing: -1px;
    margin-bottom: 14px;
}

.section-heading p,
.page-hero p,
.about-intro {
    color: var(--muted);
    font-size: 19px;
    line-height: 1.75;
}

.section-heading.light h2,
.section-heading.light p {
    color: #ffffff;
}

.eyebrow {
    display: inline-flex;
    width: fit-content;
    color: var(--gold);
    background: rgba(250, 204, 21, 0.13);
    border: 1px solid rgba(250, 204, 21, 0.28);
    border-radius: 999px;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.eyebrow.dark {
    color: var(--blue);
    background: rgba(13, 71, 161, 0.08);
    border-color: rgba(13, 71, 161, 0.16);
}

/* HERO */
.hero {
    min-height: 90vh;
    padding: 85px 8%;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 60px;
    color: white;
    background:
        radial-gradient(circle at 84% 16%, rgba(250, 204, 21, 0.26), transparent 28%),
        radial-gradient(circle at 14% 84%, rgba(96, 165, 250, 0.28), transparent 30%),
        linear-gradient(135deg, #061a40 0%, #0d47a1 52%, #020617 100%);
    overflow: hidden;
}

.hero h1 {
    font-size: 66px;
    line-height: 1.04;
    margin-bottom: 18px;
    letter-spacing: -2px;
}

.hero p {
    font-size: 22px;
    color: #e5edff;
}

.tagline {
    color: var(--gold) !important;
    font-weight: 900;
    margin-bottom: 12px;
}

.hero-desc {
    max-width: 720px;
    font-size: 20px !important;
    line-height: 1.75;
    color: #dbeafe !important;
}

.hero-voice {
    max-width: 660px;
    margin-top: 16px;
    color: #fef3c7 !important;
    font-size: 18px !important;
    font-weight: 800;
    border-left: 5px solid var(--gold);
    padding: 12px 0 12px 18px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0 18px 18px 0;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 34px;
}

.hero-image {
    position: relative;
    display: flex;
    justify-content: center;
    animation: floatImage 4s ease-in-out infinite;
}

.image-frame {
    border-radius: 36px;
    padding: 9px;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.42);
}

.image-frame img,
.about-image img {
    width: 100%;
    max-width: 390px;
    border-radius: 30px;
    border: 7px solid rgba(255, 255, 255, 0.55);
}

.floating-note {
    position: absolute;
    background: rgba(255, 255, 255, 0.94);
    color: var(--blue);
    padding: 12px 16px;
    border-radius: 999px;
    font-weight: 900;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.20);
}

.note-one {
    top: 24px;
    left: -8px;
}

.note-two {
    bottom: 34px;
    left: -4px;
}

.note-three {
    right: 0;
    bottom: 105px;
}

/* STATS */
.stats-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    padding: 70px 8%;
    background: linear-gradient(180deg, #ffffff, var(--soft-blue));
}

.stat-card,
.course-card,
.path-card,
.contact-card,
.download-card,
.about-card,
.notice-card,
.youtube-hero-card,
.video-series {
    background: rgba(255, 255, 255, 0.93);
    border-radius: var(--radius);
    border: 1px solid rgba(13, 110, 253, 0.10);
    box-shadow: var(--card-shadow);
    transition: 0.35s ease;
    overflow: hidden;
}

.stat-card:hover,
.course-card:hover,
.path-card:hover,
.contact-card:hover,
.download-card:hover,
.video-series:hover,
.about-card:hover {
    transform: translateY(-9px);
    box-shadow: var(--card-shadow-hover);
}

.stat-card {
    text-align: center;
    padding: 36px 24px;
}

.stat-card h2 {
    color: var(--blue);
    font-size: 36px;
    margin-bottom: 10px;
}

.stat-card p {
    color: #334155;
    font-size: 17px;
    font-weight: 800;
}

.muted-stat {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(250, 204, 21, 0.12));
}

/* LEARNING PATH */
.learning-section {
    background:
        radial-gradient(circle at top right, rgba(13, 110, 253, 0.08), transparent 30%),
        linear-gradient(180deg, var(--soft-bg), #ffffff);
}

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

.path-card {
    padding: 30px 24px;
    position: relative;
    overflow: hidden;
}

.path-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 6px;
    width: 100%;
    background: linear-gradient(135deg, var(--gold), var(--blue));
}

.path-card span {
    display: inline-flex;
    color: var(--blue);
    background: rgba(13, 71, 161, 0.08);
    border-radius: 999px;
    padding: 7px 12px;
    font-weight: 900;
    margin-bottom: 18px;
}

.path-card h3 {
    color: #082f73;
    font-size: 22px;
    margin-bottom: 12px;
}

.path-card p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}

.coming-card,
.coming-course {
    background: linear-gradient(135deg, #ffffff, rgba(250, 204, 21, 0.13));
}

/* COURSE CARDS */
.course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.courses-page-grid {
    grid-template-columns: repeat(5, 1fr);
}

.course-card {
    padding: 36px 27px;
    text-align: center;
}

.course-icon,
.contact-icon,
.download-icon {
    font-size: 50px;
    margin-bottom: 16px;
}

.course-card h3,
.contact-card h2,
.download-card h3,
.about-card h3 {
    color: #082f73;
    font-size: 24px;
    margin-bottom: 12px;
}

.course-card p,
.contact-card p,
.download-card p,
.about-card p,
.notice-card p {
    color: #334155;
    font-size: 16.5px;
    line-height: 1.75;
}

/* COMMUNITY */
.community-section {
    padding: 80px 8%;
    background:
        radial-gradient(circle at top right, rgba(250, 204, 21, 0.18), transparent 32%),
        linear-gradient(135deg, #061a40, #0d47a1);
}

.community-card {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr auto;
    gap: 28px;
    align-items: center;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 32px;
    padding: 42px;
    color: #ffffff;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
}

.community-card h2 {
    font-size: 36px;
    margin-bottom: 12px;
}

.community-card p {
    color: #e5edff;
    font-size: 18px;
    line-height: 1.7;
}

.whatsapp-btn {
    white-space: nowrap;
}

/* WHY SECTION */
.why-section {
    padding: 90px 8%;
    background: linear-gradient(135deg, #061a40, #0d47a1);
    color: white;
}

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

.why-card {
    background: rgba(255, 255, 255, 0.12);
    padding: 32px 23px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    transition: 0.3s;
}

.why-card:hover {
    transform: translateY(-9px);
    background: rgba(255, 255, 255, 0.18);
}

.why-icon {
    font-size: 42px;
    margin-bottom: 14px;
}

.why-card h3 {
    color: var(--gold);
    font-size: 22px;
    margin-bottom: 10px;
}

.why-card p {
    color: #eef6ff;
    font-size: 16px;
    line-height: 1.7;
}

/* PAGE HERO */
.page-hero {
    padding: 90px 8%;
    text-align: center;
    color: #ffffff;
    background:
        radial-gradient(circle at 80% 20%, rgba(250, 204, 21, 0.22), transparent 30%),
        linear-gradient(135deg, #061a40, #0d47a1 60%, #020617);
}

.page-hero h1 {
    color: #ffffff;
}

.page-hero p {
    color: #e5edff;
    max-width: 800px;
    margin: 0 auto;
}

.compact-hero {
    padding-top: 75px;
    padding-bottom: 75px;
}

/* ABOUT */
.about-section {
    background:
        radial-gradient(circle at top right, rgba(250, 204, 21, 0.14), transparent 30%),
        linear-gradient(180deg, var(--soft-bg), #ffffff);
}

.about-content {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 58px;
    align-items: center;
}

.about-image {
    display: flex;
    justify-content: center;
}

.about-image img {
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.25);
    border-color: #ffffff;
}

.about-text h2 {
    color: var(--blue);
    font-size: 42px;
    margin-bottom: 16px;
}

.about-card {
    padding: 28px;
    margin-top: 22px;
}

/* DOWNLOADS */
.download-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.download-card {
    padding: 32px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: flex-start;
}

.download-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    margin-top: 20px;
}

.small-link {
    color: var(--blue);
    font-weight: 900;
    text-decoration: none;
}

.small-link:hover {
    color: var(--gold-dark);
}

.notice-card {
    margin-top: 30px;
    padding: 26px;
    text-align: center;
    background: linear-gradient(135deg, #ffffff, rgba(250, 204, 21, 0.14));
}

.notice-card strong {
    color: var(--blue);
    font-size: 20px;
}

.notice-card p {
    margin-top: 8px;
}

/* YOUTUBE */
.youtube-hero {
    min-height: 70vh;
    padding: 90px 8%;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 55px;
    align-items: center;
    color: white;
    background:
        radial-gradient(circle at top right, rgba(255, 0, 0, 0.22), transparent 28%),
        radial-gradient(circle at bottom left, rgba(250, 204, 21, 0.24), transparent 28%),
        linear-gradient(135deg, #061a40, #0d47a1 56%, #020617);
}

.youtube-hero h1 {
    font-size: 58px;
    line-height: 1.08;
    margin-bottom: 18px;
}

.youtube-hero p {
    color: #e5edff;
    font-size: 20px;
    line-height: 1.75;
    max-width: 720px;
}

.youtube-main-btn {
    margin-top: 30px;
}

.youtube-hero-card {
    padding: 38px;
    text-align: center;
    color: var(--text);
}

.youtube-hero-card img {
    width: 210px;
    margin: 0 auto 22px;
}

.youtube-hero-card h3 {
    color: var(--blue);
    font-size: 28px;
    margin-bottom: 10px;
}

.youtube-hero-card p {
    color: var(--muted);
    font-size: 17px;
}

.video-library {
    padding-top: 90px;
}

.video-series {
    padding: 32px;
    margin-bottom: 30px;
}

.series-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
}

.series-icon {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    font-size: 30px;
    box-shadow: 0 14px 28px rgba(250, 204, 21, 0.25);
}

.series-heading h2 {
    color: var(--blue);
    font-size: 30px;
    margin-bottom: 5px;
}

.series-heading p {
    color: var(--muted);
    line-height: 1.6;
}

.lesson-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.lesson-buttons.two-columns {
    grid-template-columns: repeat(2, 1fr);
}

.lesson-btn {
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 92px;
    border-radius: 22px;
    padding: 20px 22px;
    background: linear-gradient(135deg, #082f73, #0d47a1);
    color: #ffffff;
    text-align: left;
    box-shadow: 0 16px 32px rgba(13, 71, 161, 0.20);
}

.lesson-btn span {
    color: var(--gold);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lesson-btn:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #082f73;
}

.lesson-btn:hover span {
    color: #082f73;
}

.coming-soon-btn {
    background: linear-gradient(135deg, #e5e7eb, #cbd5e1);
    color: #334155;
    box-shadow: none;
}

.coming-soon-btn span {
    color: #64748b;
}

.coming-soon-series {
    background: linear-gradient(135deg, #ffffff, rgba(250, 204, 21, 0.12));
}

/* CONTACT */
.contact-section {
    background:
        radial-gradient(circle at top right, rgba(250, 204, 21, 0.13), transparent 28%),
        linear-gradient(180deg, var(--soft-bg), #ffffff);
}

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

.contact-card {
    padding: 34px 24px;
    text-align: center;
}

.contact-community {
    padding-top: 70px;
}

/* FOOTER */
.site-footer {
    background: #020617;
    color: #e5e7eb;
    padding: 38px 8% 22px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.footer-content h3 {
    color: var(--gold);
    font-size: 24px;
    margin-bottom: 6px;
}

.footer-content p {
    color: #cbd5e1;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.footer-links a {
    color: #e5e7eb;
    text-decoration: none;
    font-weight: 800;
}

.footer-links a:hover {
    color: var(--gold);
}

.copyright {
    text-align: center;
    padding-top: 22px;
    color: #cbd5e1;
    font-weight: 600;
}

/* ANIMATIONS */
@keyframes floatImage {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-14px);
    }
}

/* RESPONSIVE */
@media (max-width: 1200px) {
    .courses-page-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 980px) {
    .navbar {
        flex-wrap: wrap;
        padding: 12px 6%;
    }

    .menu-icon {
        display: block;
        color: #ffffff;
        font-size: 30px;
        cursor: pointer;
        padding: 6px 10px;
    }

    .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        padding-top: 16px;
    }

    .nav-links a {
        width: 100%;
        text-align: center;
    }

    .menu-toggle:checked ~ .nav-links {
        display: flex;
    }

    .hero,
    .youtube-hero,
    .about-content,
    .community-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero {
        padding: 70px 6%;
    }

    .hero h1,
    .youtube-hero h1 {
        font-size: 44px;
    }

    .hero-buttons,
    .community-card,
    .series-heading,
    .download-actions {
        justify-content: center;
    }

    .stats-section,
    .path-grid,
    .why-grid,
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .course-grid,
    .courses-page-grid,
    .download-grid,
    .lesson-buttons,
    .lesson-buttons.two-columns {
        grid-template-columns: 1fr;
    }

    .floating-note {
        display: none;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 620px) {
    .brand span {
        font-size: 20px;
    }

    .brand img {
        width: 45px;
        height: 45px;
    }

    .hero h1,
    .youtube-hero h1,
    .page-hero h1,
    .section-heading h2 {
        font-size: 34px;
    }

    .hero p,
    .youtube-hero p,
    .section-heading p,
    .page-hero p {
        font-size: 17px;
    }

    .stats-section,
    .path-grid,
    .why-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .section,
    .featured-courses,
    .video-library,
    .contact-section,
    .downloads-section,
    .about-section,
    .why-section,
    .community-section,
    .page-hero,
    .youtube-hero {
        padding-left: 6%;
        padding-right: 6%;
    }

    .community-card,
    .video-series,
    .download-card {
        padding: 26px;
    }

    .download-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .series-heading {
        flex-direction: column;
        text-align: center;
    }

    .lesson-btn {
        text-align: center;
        align-items: center;
    }
}


/* ATHANAS INSPIRES PLATFORM UPDATES */
.home-search-section {
    padding: 42px 8%;
    background: linear-gradient(180deg, #ffffff, var(--soft-blue));
}

.home-search-card {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 26px;
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(13, 71, 161, 0.12);
    border-radius: 32px;
    padding: 34px;
    box-shadow: var(--card-shadow);
}

.home-search-card h2 {
    color: var(--blue);
    font-size: 32px;
    margin-bottom: 8px;
}

.home-search-card p {
    color: var(--muted);
    line-height: 1.7;
}

.search-box {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
}

.search-box input {
    width: 100%;
    border: 2px solid rgba(13, 71, 161, 0.12);
    border-radius: 999px;
    padding: 16px 20px;
    font-size: 16px;
    outline: none;
    background: var(--soft-bg);
}

.search-box input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(13, 71, 161, 0.10);
}

.search-box button {
    border: none;
    border-radius: 999px;
    background: var(--blue);
    color: #ffffff;
    font-weight: 900;
    padding: 0 22px;
    cursor: pointer;
}

.no-results {
    display: none;
    margin-top: 28px;
    text-align: center;
    color: var(--muted);
    font-weight: 800;
}

.clickable-card {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}

.clickable-card:hover {
    transform: translateY(-9px);
    box-shadow: var(--card-shadow-hover);
}

.updates-section {
    background:
        radial-gradient(circle at top right, rgba(250, 204, 21, 0.16), transparent 26%),
        linear-gradient(180deg, var(--soft-bg), #ffffff);
}

.updates-grid,
.platform-grid,
.assignment-grid,
.session-card-grid {
    display: grid;
    gap: 24px;
}

.updates-grid {
    grid-template-columns: repeat(3, 1fr);
}

.update-card,
.platform-card,
.assignment-card,
.session-card {
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(13, 71, 161, 0.10);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    padding: 30px;
    transition: 0.35s ease;
}

.update-card:hover,
.platform-card:hover,
.assignment-card:hover,
.session-card:hover {
    transform: translateY(-9px);
    box-shadow: var(--card-shadow-hover);
}

.update-card h3,
.platform-card h3,
.assignment-card h3,
.session-card h3 {
    color: #082f73;
    font-size: 24px;
    margin: 14px 0 10px;
}

.update-card p,
.platform-card p,
.assignment-card p,
.session-card p {
    color: var(--muted);
    line-height: 1.7;
    font-size: 16.5px;
}

.platform-grid {
    grid-template-columns: repeat(4, 1fr);
}

.platform-card span:first-child {
    display: inline-block;
    font-size: 42px;
    margin-bottom: 10px;
}

.label,
.session-label {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.new-label {
    color: #064e3b;
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.coming-label {
    color: #854d0e;
    background: rgba(250, 204, 21, 0.18);
    border: 1px solid rgba(250, 204, 21, 0.32);
}

.card-action-text {
    display: inline-block;
    color: var(--blue);
    margin-top: 18px;
}

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

.assignment-card {
    text-align: center;
}

.assignment-icon {
    font-size: 48px;
    margin: 14px 0 4px;
}

.card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
}

.outline-btn {
    background: #ffffff;
    color: var(--blue);
    border: 2px solid rgba(13, 71, 161, 0.18);
    box-shadow: none;
}

.outline-btn:hover {
    background: var(--blue);
    color: #ffffff;
}

.submit-btn {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #ffffff;
}

.submit-btn:hover {
    background: var(--gold);
    color: #082f73;
}

.ict-session-library {
    padding-top: 40px;
}

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

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

.session-card {
    min-height: 230px;
}

.coming-session {
    background: linear-gradient(135deg, #ffffff, rgba(250, 204, 21, 0.13));
}

.course-overview-section .course-card,
.featured-courses .course-card {
    height: 100%;
}

.featured-courses .clickable-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.featured-courses .clickable-card .small-btn,
.course-overview-section .clickable-card .small-btn {
    margin-top: auto;
}

/* Keep the old path cards usable if any page still uses them */
.path-card a,
.path-card .small-btn {
    margin-top: 16px;
}

@media (max-width: 1200px) {
    .platform-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 980px) {
    .home-search-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .updates-grid,
    .assignment-grid,
    .session-card-grid,
    .two-card-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .home-search-section {
        padding-left: 6%;
        padding-right: 6%;
    }

    .home-search-card {
        padding: 26px;
    }

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

    .search-box button {
        padding: 14px 20px;
    }

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

    .card-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .card-actions .small-btn {
        width: 100%;
    }
}


/* ATHANAS-LIKE BEAUTY AND CLEAR ACTION UPDATES */
.hero::after,
.page-hero::after,
.youtube-hero::after {
    content: "";
    position: absolute;
    inset: auto 8% 0 auto;
    width: 160px;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold), var(--green));
    opacity: 0.8;
}

.hero,
.page-hero,
.youtube-hero {
    position: relative;
}

.course-card,
.update-card,
.platform-card,
.assignment-card,
.session-card,
.download-card,
.contact-card,
.about-card,
.video-series,
.home-search-card {
    border-top: 4px solid rgba(250, 204, 21, 0.85);
}

.platform-card:nth-child(even),
.course-card:nth-child(even),
.update-card:nth-child(even) {
    border-top-color: rgba(22, 163, 74, 0.7);
}

.quiet-card {
    cursor: default;
}

.quiet-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow);
}

.section-action {
    text-align: center;
    margin-top: 34px;
}

.section-action .btn {
    min-width: 230px;
}

.static-lesson {
    cursor: default;
}

.static-lesson:hover,
.coming-soon-btn.static-lesson:hover {
    transform: none;
    background: linear-gradient(135deg, #e5e7eb, #cbd5e1);
    color: #334155;
}

.home-search-card {
    background:
        radial-gradient(circle at top right, rgba(250, 204, 21, 0.13), transparent 32%),
        #ffffff;
}

.search-box button:hover {
    background: var(--green);
}

.community-card {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08));
}

.site-footer {
    background:
        radial-gradient(circle at top right, rgba(250, 204, 21, 0.10), transparent 28%),
        linear-gradient(135deg, #020617, #061a40);
    color: #e5e7eb;
    padding: 58px 8% 26px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.75fr 0.85fr 0.85fr;
    gap: 34px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand h3 {
    color: var(--gold);
    font-size: 28px;
    margin-bottom: 8px;
}

.footer-brand > p:first-of-type {
    color: #ffffff;
    font-weight: 900;
    margin-bottom: 12px;
}

.footer-note {
    color: #cbd5e1;
    line-height: 1.75;
    max-width: 420px;
}

.footer-column h4 {
    color: var(--gold);
    font-size: 17px;
    margin-bottom: 14px;
}

.footer-column a {
    display: block;
    color: #e5e7eb;
    text-decoration: none;
    font-weight: 750;
    margin-bottom: 11px;
    transition: 0.25s ease;
}

.footer-column a:hover {
    color: var(--gold);
    transform: translateX(4px);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 24px;
    color: #cbd5e1;
    font-weight: 650;
}

.footer-content,
.footer-links,
.copyright {
    display: none;
}

@media (max-width: 980px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 620px) {
    .hero-voice {
        border-left: none;
        border-top: 4px solid var(--gold);
        border-radius: 18px;
        padding: 14px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-note {
        margin: 0 auto;
    }
}


/* START HERE + SUBMISSION GUIDE UPDATES */
.start-here-section {
    padding: 44px 8%;
    background: linear-gradient(180deg, #ffffff, var(--soft-blue));
}

.start-here-card,
.submit-guide-card {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    background:
        radial-gradient(circle at top right, rgba(250, 204, 21, 0.14), transparent 32%),
        #ffffff;
    border: 1px solid rgba(13, 71, 161, 0.12);
    border-top: 4px solid rgba(22, 163, 74, 0.75);
    border-radius: 32px;
    padding: 34px;
    box-shadow: var(--card-shadow);
}

.start-here-icon,
.submit-guide-icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    font-size: 34px;
    box-shadow: 0 14px 28px rgba(250, 204, 21, 0.25);
}

.start-here-card h2,
.submit-guide-card h3 {
    color: var(--blue);
    font-size: 30px;
    margin-bottom: 8px;
}

.start-here-card p,
.submit-guide-card p {
    color: var(--muted);
    line-height: 1.7;
    font-size: 17px;
}

.submit-guide-card {
    grid-template-columns: auto 1fr;
    margin-bottom: 34px;
    text-align: left;
}

.submit-guide-card a {
    color: var(--green);
    font-weight: 900;
    text-decoration: none;
}

.submit-guide-card a:hover {
    color: var(--blue);
    text-decoration: underline;
}

@media (max-width: 980px) {
    .start-here-card {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .submit-guide-card {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }
}

@media (max-width: 620px) {
    .start-here-section {
        padding-left: 6%;
        padding-right: 6%;
    }

    .start-here-card,
    .submit-guide-card {
        padding: 26px;
    }
}

/* SCIENTIFIC CALCULATOR PAGE */
.calculator-hero {
    padding: 92px 8% 70px;
    color: #ffffff;
    background:
        radial-gradient(circle at 14% 18%, rgba(250, 204, 21, 0.25), transparent 26%),
        radial-gradient(circle at 82% 12%, rgba(34, 197, 94, 0.22), transparent 30%),
        linear-gradient(135deg, #07111f, #0d47a1 55%, #03111f);
    position: relative;
    overflow: hidden;
}

.calculator-hero::after {
    content: "";
    position: absolute;
    inset: auto -120px -160px auto;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.calculator-hero-text {
    position: relative;
    z-index: 1;
    max-width: 840px;
}

.calculator-hero h1 {
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1;
    margin: 12px 0 18px;
}

.calculator-hero p:not(.eyebrow) {
    max-width: 760px;
    font-size: 20px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
}

.calculator-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.calculator-page {
    display: grid;
    grid-template-columns: minmax(320px, 720px) minmax(280px, 390px);
    gap: 28px;
    align-items: start;
    padding: 60px 8%;
    background:
        radial-gradient(circle at 20% 10%, rgba(250, 204, 21, 0.14), transparent 28%),
        linear-gradient(180deg, #eef5ff, #ffffff 56%, #eef5ff);
}

.calculator-shell {
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.16), transparent 28%),
        linear-gradient(145deg, #111827, #030712);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 36px;
    padding: 24px;
    box-shadow: 0 32px 80px rgba(3, 7, 18, 0.28);
}

.calculator-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    color: #ffffff;
}

.calc-mini-title {
    color: #facc15;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.calculator-topbar h2 {
    font-size: 24px;
    margin-top: 3px;
}

.angle-toggle,
.pill-tool {
    border: none;
    cursor: pointer;
    font-weight: 900;
    border-radius: 999px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.angle-toggle {
    min-width: 72px;
    padding: 14px 18px;
    color: #03111f;
    background: linear-gradient(135deg, #facc15, #f59e0b);
    box-shadow: 0 12px 24px rgba(250, 204, 21, 0.25);
}

.angle-toggle:hover,
.pill-tool:hover,
.calc-btn:hover {
    transform: translateY(-2px);
}

.calculator-screen {
    min-height: 154px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(237, 255, 255, 0.96), rgba(211, 235, 235, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 0 0 1px rgba(3, 7, 18, 0.05);
    overflow: hidden;
}

.screen-expression {
    min-height: 44px;
    color: #0f172a;
    font-size: clamp(24px, 4vw, 40px);
    line-height: 1.25;
    text-align: right;
    word-break: break-all;
}

.screen-result {
    color: #0d47a1;
    font-size: 20px;
    font-weight: 900;
    text-align: right;
    word-break: break-word;
}

.calculator-tools-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0;
}

.pill-tool {
    padding: 11px 16px;
    color: #dbeafe;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.calculator-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(54px, 1fr));
    gap: 10px;
}

.calc-btn {
    min-height: 66px;
    border: none;
    border-radius: 18px;
    cursor: pointer;
    color: #ffffff;
    background: linear-gradient(180deg, #374151, #1f2937);
    font-size: 21px;
    font-weight: 900;
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.18), 0 16px 28px rgba(0, 0, 0, 0.16);
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.calc-btn.pressed,
.calc-btn:active {
    transform: translateY(3px);
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18), 0 10px 18px rgba(0, 0, 0, 0.12);
}

.calc-btn.number {
    background: linear-gradient(180deg, #1f2937, #111827);
    font-size: 30px;
}

.calc-btn.operator,
.calc-btn.scientific,
.calc-btn.constant {
    background: linear-gradient(180deg, #4b5563, #30333d);
}

.calc-btn.danger,
.calc-btn.warning {
    color: #111827;
    background: linear-gradient(180deg, #fb923c, #f97316);
}

.calc-btn.equals {
    color: #03111f;
    background: linear-gradient(180deg, #facc15, #eab308);
}

.calc-btn.wide {
    grid-column: span 2;
}

.calculator-side-panel {
    display: grid;
    gap: 22px;
}

.side-card {
    background: #ffffff;
    border-radius: 28px;
    padding: 26px;
    border: 1px solid rgba(13, 71, 161, 0.1);
    box-shadow: var(--card-shadow);
}

.side-card h3 {
    color: var(--blue);
    font-size: 24px;
    margin-bottom: 10px;
}

.side-card p,
.side-card li {
    color: var(--muted);
    line-height: 1.7;
}

.learning-card ul {
    padding-left: 20px;
    margin-top: 10px;
}

.history-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.empty-history {
    display: block;
    color: var(--muted);
    background: var(--soft-blue);
    padding: 16px;
    border-radius: 16px;
}

.history-item {
    border: none;
    cursor: pointer;
    display: grid;
    gap: 4px;
    text-align: left;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #eef5ff, #ffffff);
    color: #0f172a;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.history-item:hover {
    transform: translateX(4px);
    box-shadow: 0 10px 24px rgba(13, 71, 161, 0.12);
}

.history-item span {
    color: var(--muted);
    font-size: 14px;
    word-break: break-word;
}

.history-item strong {
    color: var(--blue);
    font-size: 18px;
    word-break: break-word;
}

@media (max-width: 980px) {
    .calculator-page {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .calculator-hero {
        padding: 72px 6% 54px;
    }

    .calculator-page {
        padding: 34px 4%;
    }

    .calculator-shell {
        padding: 14px;
        border-radius: 28px;
    }

    .calculator-grid {
        gap: 7px;
    }

    .calc-btn {
        min-height: 54px;
        border-radius: 14px;
        font-size: 16px;
    }

    .calc-btn.number {
        font-size: 24px;
    }

    .calculator-screen {
        min-height: 132px;
        padding: 18px;
        border-radius: 22px;
    }
}

/* GENERAL ICT QUIZ GAME */
.tools-grid-enhanced {
    align-items: stretch;
}

.featured-tool-card {
    background:
        radial-gradient(circle at top right, rgba(250, 204, 21, 0.22), transparent 36%),
        linear-gradient(135deg, #ffffff, #eef6ff);
}

.quiz-hero {
    min-height: 58vh;
    padding: 86px 8%;
    display: grid;
    align-items: center;
    color: #ffffff;
    background:
        radial-gradient(circle at 84% 18%, rgba(250, 204, 21, 0.26), transparent 30%),
        radial-gradient(circle at 12% 82%, rgba(22, 163, 74, 0.26), transparent 30%),
        linear-gradient(135deg, #061a40, #0d47a1 58%, #020617);
    position: relative;
    overflow: hidden;
}

.quiz-hero::after {
    content: "";
    position: absolute;
    inset: auto 8% 0 auto;
    width: 160px;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold), var(--green));
    opacity: 0.8;
}

.quiz-hero-text {
    max-width: 880px;
}

.quiz-hero h1 {
    font-size: clamp(42px, 7vw, 72px);
    line-height: 1.02;
    margin-bottom: 18px;
    letter-spacing: -1.8px;
}

.quiz-hero p:not(.eyebrow) {
    max-width: 760px;
    color: #e5edff;
    font-size: 20px;
    line-height: 1.75;
}

.quiz-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.quiz-page {
    padding: 70px 6%;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    gap: 28px;
    background:
        radial-gradient(circle at top left, rgba(13, 71, 161, 0.08), transparent 28%),
        linear-gradient(180deg, #f8fafc, #ffffff);
}

.quiz-app-card {
    background: #ffffff;
    border-radius: 34px;
    padding: 30px;
    border: 1px solid rgba(13, 71, 161, 0.10);
    box-shadow: var(--card-shadow);
}

.quiz-topbar {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 22px;
}

.quiz-topbar h2 {
    color: var(--blue);
    font-size: clamp(28px, 4vw, 40px);
    letter-spacing: -0.8px;
}

.quiz-score-pill {
    white-space: nowrap;
    padding: 12px 16px;
    border-radius: 999px;
    color: #082f73;
    font-weight: 900;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    box-shadow: 0 10px 22px rgba(250, 204, 21, 0.25);
}

.quiz-category-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.category-tab,
.answer-btn,
.quiz-control,
.share-score-btn {
    font-family: inherit;
}

.category-tab {
    border: 1px solid rgba(13, 71, 161, 0.14);
    background: var(--soft-blue);
    color: #082f73;
    padding: 11px 15px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 900;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.category-tab:hover,
.category-tab.active {
    transform: translateY(-2px);
    color: #ffffff;
    background: linear-gradient(135deg, var(--blue), var(--blue-light));
}

.quiz-status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.quiz-status-card {
    background: linear-gradient(135deg, #eef6ff, #ffffff);
    border: 1px solid rgba(13, 71, 161, 0.09);
    border-radius: 20px;
    padding: 16px;
}

.quiz-status-card span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}

.quiz-status-card strong {
    color: var(--blue);
    font-size: 19px;
}

.quiz-progress {
    height: 12px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 24px;
}

.quiz-progress-bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--green), var(--gold));
    transition: width 0.3s ease;
}

.question-card {
    background:
        radial-gradient(circle at top right, rgba(250, 204, 21, 0.16), transparent 34%),
        linear-gradient(135deg, #061a40, #0d47a1);
    border-radius: 30px;
    padding: 30px;
    color: #ffffff;
    box-shadow: 0 24px 56px rgba(13, 71, 161, 0.20);
}

.question-tag {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--gold);
    padding: 8px 13px;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 16px;
}

.question-card h3 {
    font-size: clamp(24px, 4vw, 36px);
    line-height: 1.25;
    margin-bottom: 22px;
}

.answer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.answer-btn {
    min-height: 72px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    cursor: pointer;
    padding: 16px;
    font-size: 17px;
    font-weight: 850;
    text-align: left;
    line-height: 1.35;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.answer-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.18);
}

.answer-btn.correct-answer {
    color: #052e16;
    background: linear-gradient(135deg, #bbf7d0, #86efac);
    border-color: rgba(34, 197, 94, 0.8);
}

.answer-btn.wrong-answer {
    color: #450a0a;
    background: linear-gradient(135deg, #fecaca, #fca5a5);
    border-color: rgba(239, 68, 68, 0.8);
}

.feedback-box {
    min-height: 0;
    margin-top: 18px;
    border-radius: 18px;
    line-height: 1.65;
    font-size: 16px;
}

.feedback-box.correct,
.feedback-box.wrong {
    padding: 16px;
}

.feedback-box.correct {
    color: #052e16;
    background: rgba(220, 252, 231, 0.96);
}

.feedback-box.wrong {
    color: #450a0a;
    background: rgba(254, 226, 226, 0.96);
}

.quiz-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 24px;
}

.quiz-control {
    cursor: pointer;
}

.quiz-control:disabled {
    cursor: not-allowed;
    opacity: 0.62;
    transform: none;
}

.quiz-side-panel {
    display: grid;
    gap: 22px;
    align-content: start;
}

.quiz-result-card {
    text-align: center;
}

.quiz-result-card .small-btn {
    width: 100%;
}

.result-score-circle {
    width: 140px;
    height: 140px;
    margin: 22px auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #082f73;
    font-size: 34px;
    font-weight: 1000;
    background:
        radial-gradient(circle at center, #ffffff 0 54%, transparent 55%),
        conic-gradient(var(--gold), var(--green), var(--blue), var(--gold));
    box-shadow: 0 20px 42px rgba(13, 71, 161, 0.18);
}

@media (max-width: 980px) {
    .quiz-page {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .quiz-hero {
        padding: 72px 6% 56px;
    }

    .quiz-page {
        padding: 36px 4%;
    }

    .quiz-app-card,
    .question-card {
        padding: 20px;
        border-radius: 24px;
    }

    .quiz-topbar,
    .quiz-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .quiz-score-pill,
    .quiz-control {
        width: 100%;
        text-align: center;
    }

    .quiz-status-grid,
    .answer-grid {
        grid-template-columns: 1fr;
    }

    .answer-btn {
        min-height: 62px;
    }
}


/* SHORTCUT KEYS TRAINER */
.shortcut-hero {
    background:
        linear-gradient(135deg, rgba(6, 26, 64, 0.88), rgba(13, 71, 161, 0.72)),
        radial-gradient(circle at 20% 20%, rgba(250, 204, 21, 0.28), transparent 32%),
        radial-gradient(circle at 82% 22%, rgba(22, 163, 74, 0.22), transparent 28%),
        linear-gradient(135deg, #061a40, #0d47a1);
}

.shortcut-page {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: 26px;
    padding: 56px 6%;
    background:
        radial-gradient(circle at left top, rgba(250, 204, 21, 0.10), transparent 34%),
        radial-gradient(circle at right bottom, rgba(22, 163, 74, 0.09), transparent 32%),
        var(--soft-bg);
}

.shortcut-app-card,
.shortcut-question-card {
    background: linear-gradient(145deg, #061a40, #0f2f73);
    color: #ffffff;
    border-radius: 30px;
    box-shadow: var(--card-shadow);
}

.shortcut-app-card {
    padding: 28px;
    overflow: hidden;
}

.shortcut-stats-pill {
    padding: 12px 18px;
    border-radius: 999px;
    color: #082f73;
    font-weight: 950;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    box-shadow: 0 14px 32px rgba(250, 204, 21, 0.24);
}

.shortcut-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0;
}

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

.shortcut-question-card {
    margin-top: 22px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.shortcut-prompt-label {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 850;
    margin: 18px 0 6px;
}

.shortcut-question-card h3 {
    font-size: clamp(24px, 4vw, 36px);
    line-height: 1.25;
    margin-bottom: 20px;
    text-transform: capitalize;
}

.shortcut-keyboard-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 70px;
    margin: 10px 0 24px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.keycap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    min-height: 48px;
    padding: 10px 15px;
    border-radius: 14px;
    color: #082f73;
    font-weight: 1000;
    background: linear-gradient(180deg, #ffffff, #dbeafe);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 8px 0 rgba(148, 163, 184, 0.55), 0 18px 30px rgba(0, 0, 0, 0.18);
}

.key-plus {
    color: var(--gold);
    font-size: 28px;
    font-weight: 1000;
}

.shortcut-choice-btn {
    text-align: center;
    font-size: 19px;
    letter-spacing: 0.2px;
}

.shortcut-side-panel {
    display: grid;
    align-content: start;
    gap: 22px;
}

.shortcut-score-circle {
    background:
        radial-gradient(circle at center, #ffffff 0 54%, transparent 55%),
        conic-gradient(var(--green), var(--gold), var(--blue), var(--green));
}

.shortcut-mini-list {
    display: grid;
    gap: 12px;
}

.shortcut-mini-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.shortcut-mini-list div:last-child {
    border-bottom: none;
}

.shortcut-mini-list span {
    color: var(--muted);
    font-weight: 750;
}

.shortcut-mini-list strong {
    color: var(--blue);
    font-weight: 950;
}

@media (max-width: 980px) {
    .shortcut-page {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 720px) {
    .shortcut-page {
        padding: 36px 4%;
    }

    .shortcut-app-card,
    .shortcut-question-card {
        padding: 20px;
        border-radius: 24px;
    }

    .shortcut-status-grid,
    .shortcut-answer-grid {
        grid-template-columns: 1fr;
    }

    .shortcut-stats-pill {
        width: 100%;
        text-align: center;
    }

    .shortcut-keyboard-preview {
        justify-content: center;
    }

    .keycap {
        min-width: 52px;
        min-height: 42px;
        padding: 8px 12px;
    }
}


/* ATHANAS INSPIRES TOOL IDENTITY */
.tool-identity-strip,
.athanas-tool-note {
    margin: 0 auto 26px;
    padding: 18px 22px;
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(250, 204, 21, 0.18), rgba(22, 163, 74, 0.12)),
        #ffffff;
    border: 1px solid rgba(250, 204, 21, 0.36);
    color: var(--text-main);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    line-height: 1.65;
}

.tool-identity-strip {
    max-width: 980px;
    text-align: center;
}

.tool-identity-strip strong,
.athanas-tool-note strong {
    color: var(--blue);
    font-weight: 950;
}

.athanas-tool-note {
    margin: 18px 0 20px;
    background:
        linear-gradient(135deg, rgba(250, 204, 21, 0.20), rgba(255, 255, 255, 0.10)),
        rgba(255, 255, 255, 0.10);
    color: #ffffff;
    border-color: rgba(250, 204, 21, 0.45);
}

.athanas-tool-note strong {
    color: var(--gold);
}

.athanas-identity-card {
    border-top: 5px solid var(--gold);
}

.athanas-identity-card h3::after {
    content: " ✨";
}

@media (max-width: 720px) {
    .tool-identity-strip,
    .athanas-tool-note {
        padding: 16px;
        border-radius: 18px;
        text-align: left;
    }
}