/* =========================================================

   ExactSub WAEC Result Checker

   Main stylesheet

   ========================================================= */





/* =========================================================

   VARIABLES

   ========================================================= */



:root {



    --primary: #022A7B;

    --primary-light: #0A3D9C;



    --accent: #29BA22;

    --accent-dark: #1D8E19;



    --white: #FFFFFF;



    --text: #101828;

    --text-light: #475467;



    --muted: #667085;

    --muted-light: #98A2B3;



    --background: #FFFFFF;

    --surface: #F7F9FC;

    --surface-dark: #EEF3FA;



    --border: #E4EAF2;



    --shadow-sm:

        0 8px 24px rgba(16, 24, 40, 0.06);



    --shadow-md:

        0 18px 50px rgba(2, 42, 123, 0.10);



    --shadow-lg:

        0 30px 80px rgba(2, 42, 123, 0.16);



    --radius-sm: 12px;

    --radius-md: 18px;

    --radius-lg: 28px;



    --container-width: 1180px;



    --nav-height: 78px;



    --ease:

        cubic-bezier(.22, 1, .36, 1);



}





/* =========================================================

   RESET

   ========================================================= */



*,

*::before,

*::after {

    box-sizing: border-box;

}





html {

    scroll-behavior: smooth;

    scroll-padding-top: 100px;

}





body {



    margin: 0;



    font-family:

        Inter,

        ui-sans-serif,

        system-ui,

        -apple-system,

        BlinkMacSystemFont,

        "Segoe UI",

        sans-serif;



    color: var(--text);



    background: var(--background);



    line-height: 1.65;



    -webkit-font-smoothing: antialiased;



    text-rendering: optimizeLegibility;



}





img,

svg {

    display: block;

    max-width: 100%;

}





button,

input,

textarea,

select {

    font: inherit;

}





a {

    color: inherit;

    text-decoration: none;

}





ul,

ol {

    margin: 0;

    padding: 0;

    list-style: none;

}





h1,

h2,

h3 {

    margin-top: 0;



    line-height: 1.12;



    letter-spacing: -0.035em;

}





p {

    margin-top: 0;

}





::selection {

    color: var(--white);

    background: var(--primary);

}





/* =========================================================

   ACCESSIBILITY

   ========================================================= */



.skip-link {



    position: fixed;



    top: -60px;

    left: 16px;



    z-index: 9999;



    padding: 10px 16px;



    border-radius: 10px;



    color: var(--white);



    background: var(--primary);



    transition: top .2s ease;



}





.skip-link:focus {

    top: 16px;

}





/* =========================================================

   GLOBAL

   ========================================================= */



.container {



    width:

        min(

            calc(100% - 40px),

            var(--container-width)

        );



    margin-inline: auto;



}





.section {



    position: relative;



    padding: 110px 0;



    overflow: hidden;



}





.section-soft {



    background:



        radial-gradient(

            circle at 10% 10%,

            rgba(2, 42, 123, .035),

            transparent 28%

        ),



        var(--surface);



}





.section-heading {



    max-width: 720px;



    margin:

        0 auto 56px;



    text-align: center;



}





.section-kicker {



    display: inline-block;



    margin-bottom: 14px;



    color: var(--primary);



    font-size: .78rem;



    font-weight: 800;



    letter-spacing: .14em;



    text-transform: uppercase;



}





.section-heading h2,

.purchase-copy h2,

.faq-intro h2 {



    margin-bottom: 18px;



    font-size:

        clamp(

            2rem,

            4vw,

            3.3rem

        );



}





.section-heading p,

.purchase-copy > p,

.faq-intro > p {



    margin-bottom: 0;



    color: var(--muted);



    font-size: 1.05rem;



}





/* =========================================================

   BUTTONS

   ========================================================= */



.btn {



    display: inline-flex;



    align-items: center;



    justify-content: center;



    gap: 10px;



    min-height: 48px;



    padding: 12px 20px;



    border: 1px solid transparent;



    border-radius: 999px;



    font-size: .95rem;



    font-weight: 750;



    line-height: 1;



    cursor: pointer;



    transition:



        transform .25s var(--ease),



        box-shadow .25s var(--ease),



        background-color .25s ease,



        border-color .25s ease,



        color .25s ease;



}





.btn:hover {



    transform: translateY(-3px);



}





.btn:active {



    transform: translateY(-1px);



}





.btn-primary {



    color: var(--white);



    background: var(--primary);



    box-shadow:

        0 10px 24px rgba(2, 42, 123, .18);



}





.btn-primary:hover {



    background: var(--primary-light);



    box-shadow:

        0 15px 30px rgba(2, 42, 123, .25);



}





.btn-outline {



    color: var(--primary);



    border-color:

        rgba(2, 42, 123, .25);



    background: var(--white);



}





.btn-outline:hover {



    color: var(--white);



    border-color: var(--primary);



    background: var(--primary);



}





.btn-light {



    color: var(--primary);



    background: var(--white);



}





.btn-light:hover {



    box-shadow:

        0 12px 28px rgba(0, 0, 0, .14);



}





.btn-ghost-light {



    color: var(--white);



    border-color:

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



    background: transparent;



}





.btn-ghost-light:hover {



    border-color: var(--white);



    background:

        rgba(255, 255, 255, .1);



}





.btn-sm {



    min-height: 42px;



    padding: 10px 17px;



    font-size: .9rem;



}





.btn-lg {



    min-height: 56px;



    padding: 15px 24px;



    font-size: 1rem;



}





.btn-arrow {



    display: inline-block;



    font-size: 1.15em;



    transition:

        transform .25s var(--ease);



}





.btn:hover .btn-arrow {



    transform:

        translateX(4px);



}





/* =========================================================

   HEADER

   ========================================================= */



.site-header {



    position: sticky;



    top: 0;



    z-index: 1000;



    height: var(--nav-height);



    border-bottom:

        1px solid rgba(228, 234, 242, .8);



    background:

        rgba(255, 255, 255, .88);



    backdrop-filter: blur(18px);



    -webkit-backdrop-filter: blur(18px);



    transition:

        box-shadow .3s ease,

        background-color .3s ease;



}





.site-header.scrolled {



    background:

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



    box-shadow:

        0 8px 30px rgba(16, 24, 40, .08);



}





.navbar {



    height: 100%;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 30px;



}





.brand {



    display: inline-flex;



    align-items: center;



    flex-shrink: 0;



}





.logo {



    width: 46px;



    height: 46px;



    object-fit: contain;



}





.nav-panel {



    display: flex;



    align-items: center;



    justify-content: space-between;



    flex: 1;



    gap: 30px;



}





.nav-links,

.nav-actions {



    display: flex;



    align-items: center;



    gap: 8px;



}





.nav-links {



    margin-left: 35px;



}





.nav-links a {



    position: relative;



    display: inline-flex;



    padding: 10px 13px;



    color: #344054;



    font-size: .94rem;



    font-weight: 650;



    transition:

        color .2s ease;



}





.nav-links a::after {



    content: "";



    position: absolute;



    left: 13px;

    right: 13px;



    bottom: 3px;



    height: 2px;



    border-radius: 999px;



    background: var(--primary);



    transform:

        scaleX(0);



    transform-origin: center;



    transition:

        transform .25s var(--ease);



}





.nav-links a:hover {



    color: var(--primary);



}





.nav-links a:hover::after,

.nav-links a.active::after {



    transform:

        scaleX(1);



}





.menu-toggle {



    display: none;



    width: 46px;



    height: 46px;



    padding: 11px;



    border:

        1px solid var(--border);



    border-radius: 12px;



    background: var(--white);



    cursor: pointer;



}





.menu-toggle span {



    display: block;



    height: 2px;



    margin: 5px 0;



    border-radius: 99px;



    background: var(--primary);



    transition:

        transform .25s ease,

        opacity .25s ease;



}





.menu-toggle.active span:nth-child(1) {



    transform:

        translateY(7px)

        rotate(45deg);



}





.menu-toggle.active span:nth-child(2) {



    opacity: 0;



}





.menu-toggle.active span:nth-child(3) {



    transform:

        translateY(-7px)

        rotate(-45deg);



}





/* =========================================================

   HERO

   ========================================================= */



.hero {



    position: relative;



    min-height: 720px;



    display: flex;



    align-items: center;



    padding:

        95px 0 110px;



    overflow: hidden;



    background:



        radial-gradient(

            circle at 0% 30%,

            rgba(41, 186, 34, .08),

            transparent 25%

        ),



        radial-gradient(

            circle at 80% 20%,

            rgba(2, 42, 123, .09),

            transparent 30%

        ),



        linear-gradient(

            180deg,

            #fff 0%,

            #f8faff 100%

        );



}





.hero-grid {



    position: relative;



    z-index: 2;



    display: grid;



    grid-template-columns:

        minmax(0, 1.05fr)

        minmax(390px, .95fr);



    align-items: center;



    gap: 70px;



}





.hero-content {



    max-width: 650px;



}





.eyebrow {



    display: inline-flex;



    align-items: center;



    gap: 9px;



    margin-bottom: 20px;



    padding: 7px 12px;



    border:

        1px solid rgba(2, 42, 123, .12);



    border-radius: 999px;



    color: var(--primary);



    background:

        rgba(255, 255, 255, .78);



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



    font-size: .78rem;



    font-weight: 800;



    letter-spacing: .08em;



    text-transform: uppercase;



}





.eyebrow-dot {



    width: 7px;



    height: 7px;



    border-radius: 50%;



    background: var(--accent);



    box-shadow:

        0 0 0 5px rgba(41, 186, 34, .12);



}





.hero h1 {



    max-width: 760px;



    margin-bottom: 24px;



    font-size:

        clamp(

            2.65rem,

            5.2vw,

            5rem

        );



    letter-spacing: -.055em;



}





.hero h1 span {



    color: var(--primary);



}





.hero-text {



    max-width: 610px;



    margin-bottom: 34px;



    color: var(--muted);



    font-size:

        clamp(

            1rem,

            1.5vw,

            1.12rem

        );



}





.hero-actions {



    display: flex;



    align-items: center;



    flex-wrap: wrap;



    gap: 20px;



}





.login-prompt {



    color: var(--muted);



    font-size: .92rem;



}





.login-prompt strong {



    margin-left: 4px;



    color: var(--primary);



}





.login-prompt:hover {



    text-decoration: underline;



}





.hero-divider {



    width: min(100%, 580px);



    height: 1px;



    margin:

        36px 0 22px;



    background: var(--border);



}





.trust-row {



    display: flex;



    flex-wrap: wrap;



    gap: 14px 22px;



}





.trust-badge {



    display: inline-flex;



    align-items: center;



    gap: 7px;



    color: #475467;



    font-size: .82rem;



    font-weight: 650;



}





.check-icon {



    display: grid;



    width: 19px;



    height: 19px;



    place-items: center;



    border-radius: 50%;



    color: var(--white);



    background: var(--accent);



    font-size: .7rem;



    font-weight: 900;



}





/* =========================================================

   HERO PRODUCT CARD

   ========================================================= */



.hero-card-wrap {



    position: relative;



    min-height: 500px;



    display: grid;



    place-items: center;



}





.hero-card-glow {



    position: absolute;



    width: 370px;



    height: 370px;



    border-radius: 50%;



    background:

        rgba(2, 42, 123, .10);



    filter: blur(60px);



    animation:

        pulse-glow 5s ease-in-out infinite;



}





.result-card {



    position: relative;



    z-index: 2;



    width: min(100%, 430px);



    overflow: hidden;



    border:

        1px solid rgba(255, 255, 255, .9);



    border-radius: 30px;



    background:

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



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



    transform:

        perspective(1200px)

        rotateY(-4deg)

        rotateX(2deg);



    transition:

        transform .6s var(--ease);



}





.hero-card-wrap:hover .result-card {



    transform:

        perspective(1200px)

        rotateY(0)

        rotateX(0)

        translateY(-5px);



}





.result-card-top {



    display: flex;



    align-items: center;



    justify-content: space-between;



    padding: 20px 22px;



    border-bottom:

        1px solid var(--border);



}





.result-card-brand {



    display: flex;



    align-items: center;



    gap: 9px;



    color: var(--primary);



    font-weight: 800;



}





.mini-logo {



    width: 30px;



    height: 30px;



    object-fit: contain;



}





.status-pill {



    padding: 6px 10px;



    border-radius: 999px;



    color: var(--accent-dark);



    background:

        rgba(41, 186, 34, .10);



    font-size: .73rem;



    font-weight: 800;



}





.result-card-body {



    padding: 35px;



}





.card-label {



    color: var(--muted-light);



    font-size: .72rem;



    font-weight: 800;



    letter-spacing: .14em;



}





.result-card h2 {



    margin:

        10px 0;



    font-size: 2rem;



}





.result-card-body > p {



    margin-bottom: 28px;



    color: var(--muted);



}





.price-row {



    display: flex;



    align-items: end;



    justify-content: space-between;



    margin-bottom: 25px;



    padding:

        18px 0;



    border-top:

        1px dashed var(--border);



    border-bottom:

        1px dashed var(--border);



}





.price-row small {



    display: block;



    margin-bottom: 3px;



    color: var(--muted);



    font-size: .75rem;



}





.price-row strong {



    color: var(--primary);



    font-size: 2.15rem;



    line-height: 1;



}





.secure-mark {



    color: var(--accent-dark);



    font-size: .78rem;



    font-weight: 800;



}





.card-btn {



    width: 100%;



}





/* =========================================================

   FLOATING CARDS

   ========================================================= */



.floating-card {



    position: absolute;



    z-index: 3;



    display: flex;



    align-items: center;



    gap: 11px;



    padding: 13px 16px;



    border:

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



    border-radius: 16px;



    background:

        rgba(255, 255, 255, .94);



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



    backdrop-filter: blur(12px);



    animation:

        float-card 4.5s ease-in-out infinite;



}





.floating-card strong,

.floating-card small {



    display: block;



}





.floating-card strong {



    color: var(--text);



    font-size: .78rem;



}





.floating-card small {



    margin-top: 2px;



    color: var(--muted);



    font-size: .68rem;



}





.floating-card-one {



    top: 35px;



    left: 0;



}





.floating-card-two {



    right: 0;



    bottom: 55px;



    animation-delay: -2s;



}





.floating-icon {



    display: grid;



    width: 35px;



    height: 35px;



    flex-shrink: 0;



    place-items: center;



    border-radius: 11px;



    color: var(--white);



    background: var(--accent);



    font-weight: 900;



}





/* =========================================================

   STEPS

   ========================================================= */



.steps-grid {



    display: grid;



    grid-template-columns:

        repeat(4, 1fr);



    gap: 18px;



}





.step-card {



    position: relative;



    min-height: 285px;



    padding: 28px;



    overflow: hidden;



    border:

        1px solid var(--border);



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



    background: var(--white);



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



    transition:

        transform .4s var(--ease),

        box-shadow .4s var(--ease);



}





.step-card::before {



    content: "";



    position: absolute;



    top: 0;



    left: 0;



    width: 100%;



    height: 4px;



    background:

        linear-gradient(

            90deg,

            var(--primary),

            var(--accent)

        );



    transform:

        scaleX(0);



    transform-origin: left;



    transition:

        transform .5s var(--ease);



}





.step-card:hover {



    transform:

        translateY(-8px);



    box-shadow:

        var(--shadow-md);



}





.step-card:hover::before {



    transform:

        scaleX(1);



}





.step-number {



    color: var(--primary);



    font-size: .76rem;



    font-weight: 900;



    letter-spacing: .12em;



}





.step-icon {



    display: grid;



    width: 52px;



    height: 52px;



    margin:

        28px 0 22px;



    place-items: center;



    border-radius: 15px;



    color: var(--primary);



    background:

        rgba(2, 42, 123, .08);



    font-size: 1.2rem;



    font-weight: 900;



}





.step-card h3 {



    margin-bottom: 10px;



    font-size: 1.2rem;



}





.step-card p {



    margin-bottom: 0;



    color: var(--muted);



    font-size: .92rem;



}





.step-card a {



    color: var(--primary);



    font-weight: 700;



}





.step-card a:hover {



    text-decoration: underline;



}





/* =========================================================

   PURCHASE

   ========================================================= */



.purchase-grid {



    display: grid;



    grid-template-columns:

        1fr 460px;



    align-items: center;



    gap: 90px;



}





.purchase-copy {



    max-width: 600px;



}





.benefit-list {



    display: grid;



    grid-template-columns:

        repeat(2, minmax(0, 1fr));



    gap: 14px;



    margin-top: 34px;



}





.benefit-list li {



    display: flex;



    align-items: center;



    gap: 10px;



    color: #344054;



    font-size: .92rem;



    font-weight: 650;



}





.benefit-list li span {



    display: grid;



    width: 23px;



    height: 23px;



    place-items: center;



    border-radius: 50%;



    color: var(--accent-dark);



    background:

        rgba(41, 186, 34, .10);



    font-size: .7rem;



    font-weight: 900;



}





.product-card {



    overflow: hidden;



    border:

        1px solid var(--border);



    border-radius:

        var(--radius-lg);



    background: var(--white);



    box-shadow:

        var(--shadow-lg);



}





.product-card-header {



    display: flex;



    justify-content: space-between;



    align-items: center;



    padding: 18px 22px;



    border-bottom:

        1px solid var(--border);



}





.product-badge {



    color: var(--primary);



    font-size: .75rem;



    font-weight: 900;



    letter-spacing: .1em;



}





.product-status {



    display: inline-flex;



    align-items: center;



    gap: 7px;



    color: var(--accent-dark);



    font-size: .75rem;



    font-weight: 800;



}





.product-status span {



    width: 7px;



    height: 7px;



    border-radius: 50%;



    background: var(--accent);



}





.product-card-content {



    padding: 34px;



}





.product-card-content > span {



    display: block;



    margin-bottom: 12px;



    color: #475467;



    font-weight: 700;



}





.product-card-content strong {



    display: block;



    margin-bottom: 12px;



    color: var(--primary);



    font-size: 3rem;



    line-height: 1;



    letter-spacing: -.05em;



}





.product-card-content p {



    margin-bottom: 28px;



    color: var(--muted);



}





.product-btn {



    width: 100%;



}





/* =========================================================

   RESULT CHECKER

   ========================================================= */



.checker-layout {



    display: grid;



    grid-template-columns:

        330px 1fr;



    gap: 70px;



    align-items: start;



}





.checker-progress {



    position: sticky;



    top: 110px;



    padding: 10px 0;



}





.progress-line {



    position: absolute;



    top: 30px;



    bottom: 30px;



    left: 19px;



    width: 1px;



    background:

        linear-gradient(

            var(--primary),

            var(--border)

        );



}





.check-step {



    position: relative;



    z-index: 1;



    display: flex;



    align-items: center;



    gap: 14px;



    min-height: 72px;



}





.check-step > span {



    display: grid;



    width: 39px;



    height: 39px;



    flex-shrink: 0;



    place-items: center;



    border:

        1px solid var(--border);



    border-radius: 50%;



    color: var(--muted);



    background: var(--white);



    font-size: .78rem;



    font-weight: 900;



    transition:

        all .3s ease;



}





.check-step.active > span {



    color: var(--white);



    border-color: var(--primary);



    background: var(--primary);



    box-shadow:

        0 0 0 7px

        rgba(2, 42, 123, .08);



}





.check-step strong,

.check-step small {



    display: block;



}





.check-step strong {



    color: var(--text);



    font-size: .9rem;



}





.check-step small {



    margin-top: 2px;



    color: var(--muted);



    font-size: .75rem;



}





.checker-details {



    display: grid;



    gap: 15px;



}





.detail-card {



    display: grid;



    grid-template-columns:

        54px 1fr;



    gap: 20px;



    padding: 28px;



    border:

        1px solid var(--border);



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



    background: var(--white);



    box-shadow:

        var(--shadow-sm);



    transition:

        transform .35s var(--ease),

        box-shadow .35s var(--ease);



}





.detail-card:hover {



    transform:

        translateX(7px);



    box-shadow:

        var(--shadow-md);



}





.detail-number {



    display: grid;



    width: 46px;



    height: 46px;



    place-items: center;



    border-radius: 13px;



    color: var(--primary);



    background:

        rgba(2, 42, 123, .08);



    font-size: .75rem;



    font-weight: 900;



}





.detail-card h3 {



    margin-bottom: 8px;



    font-size: 1.12rem;



}





.detail-card p {



    margin-bottom: 12px;



    color: var(--muted);



    font-size: .9rem;



}





.detail-card code {



    display: inline-block;



    padding: 5px 9px;



    border-radius: 7px;



    color: var(--primary);



    background: var(--surface-dark);



    font-family:

        ui-monospace,

        SFMono-Regular,

        Menlo,

        Consolas,

        monospace;



    font-size: .76rem;



}





/* =========================================================

   BENEFITS

   ========================================================= */



.benefits-grid {



    display: grid;



    grid-template-columns:

        repeat(3, 1fr);



    gap: 18px;



}





.benefit-card {



    padding: 30px;



    border:

        1px solid var(--border);



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



    background: var(--white);



    box-shadow:

        var(--shadow-sm);



    transition:

        transform .35s var(--ease),

        border-color .35s ease,

        box-shadow .35s ease;



}





.benefit-card:hover {



    transform:

        translateY(-7px);



    border-color:

        rgba(2, 42, 123, .18);



    box-shadow:

        var(--shadow-md);



}





.benefit-icon {



    display: inline-grid;



    width: 43px;



    height: 43px;



    margin-bottom: 22px;



    place-items: center;



    border-radius: 12px;



    color: var(--primary);



    background:

        rgba(2, 42, 123, .08);



    font-size: .7rem;



    font-weight: 900;



}





.benefit-card h3 {



    margin-bottom: 10px;



    font-size: 1.15rem;



}





.benefit-card p {



    margin-bottom: 0;



    color: var(--muted);



    font-size: .9rem;



}





/* =========================================================

   FAQ

   ========================================================= */



.faq-layout {



    display: grid;



    grid-template-columns:

        360px 1fr;



    align-items: start;



    gap: 80px;



}





.faq-intro {



    position: sticky;



    top: 110px;



}





.faq-intro .btn {



    margin-top: 28px;



}





.faq-list {



    display: grid;



    gap: 10px;



}





.faq-item {



    overflow: hidden;



    border:

        1px solid var(--border);



    border-radius: 14px;



    background: var(--white);



    transition:

        border-color .25s ease,

        box-shadow .25s ease;



}





.faq-item[open] {



    border-color:

        rgba(2, 42, 123, .2);



    box-shadow:

        var(--shadow-sm);



}





.faq-item summary {



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 20px;



    padding: 21px 23px;



    color: var(--text);



    font-size: .94rem;



    font-weight: 750;



    cursor: pointer;



    list-style: none;



}





.faq-item summary::-webkit-details-marker {

    display: none;

}





.faq-plus {



    position: relative;



    width: 25px;



    height: 25px;



    flex-shrink: 0;



    border:

        1px solid var(--border);



    border-radius: 50%;



}





.faq-plus::before,

.faq-plus::after {



    content: "";



    position: absolute;



    top: 50%;



    left: 50%;



    width: 9px;



    height: 1.5px;



    border-radius: 10px;



    background: var(--primary);



    transform:

        translate(-50%, -50%);



    transition:

        transform .25s ease;



}





.faq-plus::after {



    transform:

        translate(-50%, -50%)

        rotate(90deg);



}





.faq-item[open]

.faq-plus::after {



    transform:

        translate(-50%, -50%)

        rotate(0);



}





.faq-answer {



    padding:

        0 23px 22px;



}





.faq-answer p {



    margin: 0;



    color: var(--muted);



    font-size: .9rem;



}





/* =========================================================

   CTA

   ========================================================= */



.cta-section {



    padding: 80px 0;



    background: var(--white);



}





.cta-card {



    position: relative;



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 40px;



    padding:

        52px 60px;



    overflow: hidden;



    border-radius:

        var(--radius-lg);



    color: var(--white);



    background:



        radial-gradient(

            circle at 80% 10%,

            rgba(41, 186, 34, .18),

            transparent 25%

        ),



        linear-gradient(

            135deg,

            var(--primary),

            #063B9D

        );



    box-shadow:

        var(--shadow-lg);



}





.cta-card::after {



    content: "";



    position: absolute;



    right: -90px;



    bottom: -120px;



    width: 280px;



    height: 280px;



    border:

        1px solid

        rgba(255, 255, 255, .10);



    border-radius: 50%;



}





.cta-card .section-kicker {



    color:

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



}





.cta-card h2 {



    margin-bottom: 10px;



    font-size:

        clamp(

            2rem,

            4vw,

            3rem

        );



}





.cta-card p {



    margin: 0;



    color:

        rgba(255, 255, 255, .72);



}





.cta-actions {



    position: relative;



    z-index: 2;



    display: flex;



    flex-wrap: wrap;



    gap: 12px;



}





/* =========================================================

   FOOTER

   ========================================================= */



.footer {



    padding:

        70px 0 25px;



    color:

        rgba(255, 255, 255, .72);



    background:

        #061B45;



}





.footer-grid {



    display: grid;



    grid-template-columns:

        1.45fr

        repeat(4, 1fr);



    gap: 40px;



    padding-bottom: 55px;



}





.footer-logo {



    display: inline-flex;



    width: 52px;



    height: 52px;



    padding: 7px;



    margin-bottom: 18px;



    border-radius: 14px;



    background: var(--white);



}





.footer-logo img {



    width: 100%;



    height: 100%;



    object-fit: contain;



}





.footer-brand p {



    max-width: 250px;



    margin-bottom: 16px;



    font-size: .88rem;



}





.footer-email {



    color: var(--white);



    font-size: .88rem;



    font-weight: 650;



}





.footer-column h3 {



    margin-bottom: 18px;



    color: var(--white);



    font-size: .88rem;



}





.footer-column li + li {



    margin-top: 10px;



}





.footer-column a {



    font-size: .83rem;



    transition:

        color .2s ease;



}





.footer-column a:hover,

.footer-email:hover {



    color: var(--white);



}





.footer-bottom {



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 20px;



    padding-top: 22px;



    border-top:

        1px solid

        rgba(255, 255, 255, .10);



    font-size: .8rem;



}





.footer-bottom a:hover {



    color: var(--white);



}





/* =========================================================

   SCROLL REVEAL

   ========================================================= */



.reveal {



    opacity: 0;



    transform:

        translateY(35px);



    transition:



        opacity .75s var(--ease),



        transform .75s var(--ease);



    transition-delay:

        var(--reveal-delay, 0ms);



}





.reveal.revealed {



    opacity: 1;



    transform:

        translateY(0);



}





.reveal-delay-1 {

    --reveal-delay: 90ms;

}





.reveal-delay-2 {

    --reveal-delay: 180ms;

}





.reveal-delay-3 {

    --reveal-delay: 270ms;

}





/* =========================================================

   KEYFRAME ANIMATIONS

   ========================================================= */



@keyframes pulse-glow {



    0%,

    100% {



        opacity: .7;



        transform:

            scale(.94);



    }



    50% {



        opacity: 1;



        transform:

            scale(1.06);



    }



}





@keyframes float-card {



    0%,

    100% {



        transform:

            translateY(0);



    }



    50% {



        transform:

            translateY(-10px);



    }



}





/* =========================================================

   TABLET

   ========================================================= */



@media (max-width: 1050px) {



    .hero-grid {



        grid-template-columns: 1fr;



        gap: 60px;



    }





    .hero-content {



        max-width: 780px;



        margin-inline: auto;



        text-align: center;



    }





    .hero-text {



        margin-inline: auto;



    }





    .hero-actions,

    .trust-row {



        justify-content: center;



    }





    .hero-divider {



        margin-inline: auto;



    }





    .hero-card-wrap {



        width: 100%;



        max-width: 570px;



        margin-inline: auto;



    }





    .steps-grid {



        grid-template-columns:

            repeat(2, 1fr);



    }





    .purchase-grid {



        grid-template-columns: 1fr;



        gap: 55px;



    }





    .purchase-copy {



        max-width: 760px;



        margin-inline: auto;



        text-align: center;



    }





    .benefit-list {



        text-align: left;



    }





    .product-card {



        width: min(100%, 520px);



        margin-inline: auto;



    }





    .checker-layout {



        grid-template-columns: 1fr;



    }





    .checker-progress {



        position: relative;



        top: auto;



        display: grid;



        grid-template-columns:

            repeat(3, 1fr);



        gap: 10px;



    }





    .progress-line {



        display: none;



    }





    .check-step {



        min-height: auto;



        padding: 8px;



    }





    .faq-layout {



        grid-template-columns: 1fr;



        gap: 45px;



    }





    .faq-intro {



        position: relative;



        top: auto;



        max-width: 700px;



        margin-inline: auto;



        text-align: center;



    }





    .footer-grid {



        grid-template-columns:

            repeat(3, 1fr);



    }



}





/* =========================================================

   MOBILE

   ========================================================= */



@media (max-width: 760px) {



    :root {

        --nav-height: 70px;

    }





    .container {



        width:

            min(

                calc(100% - 28px),

                var(--container-width)

            );



    }





    .section {



        padding: 78px 0;



    }





    .menu-toggle {



        display: block;



    }





    .nav-panel {



        position: absolute;



        top:

            calc(100% + 1px);



        left: 14px;



        right: 14px;



        display: block;



        padding: 14px;



        border:

            1px solid var(--border);



        border-radius: 18px;



        background:

            rgba(255, 255, 255, .98);



        box-shadow:

            var(--shadow-lg);



        opacity: 0;



        visibility: hidden;



        transform:

            translateY(-8px);



        transition:



            opacity .25s ease,



            visibility .25s ease,



            transform .25s var(--ease);



    }





    .nav-panel.open {



        opacity: 1;



        visibility: visible;



        transform:

            translateY(0);



    }





    .nav-links,

    .nav-actions {



        display: grid;



        margin: 0;



        gap: 5px;



    }





    .nav-actions {



        grid-template-columns:

            1fr 1fr;



        margin-top: 10px;



        padding-top: 10px;



        border-top:

            1px solid var(--border);



    }





    .nav-links a {



        width: 100%;



        padding: 12px;



        border-radius: 10px;



    }





    .nav-links a:hover {



        background:

            var(--surface);



    }





    .nav-links a::after {



        display: none;



    }





    .hero {



        min-height: auto;



        padding:

            72px 0 80px;



    }





    .hero h1 {



        font-size:

            clamp(

                2.25rem,

                11vw,

                3.5rem

            );



    }





    .hero-actions {



        flex-direction: column;



        align-items: stretch;



    }





    .hero-actions .btn {



        width: 100%;



    }





    .login-prompt {



        text-align: center;



    }





    .trust-row {



        display: grid;



        justify-content: center;



    }





    .hero-card-wrap {



        min-height: 410px;



    }





    .result-card {



        width:

            min(

                100%,

                390px

            );



    }





    .result-card-body {



        padding: 27px;



    }





    .floating-card {



        display: none;



    }





    .steps-grid,

    .benefits-grid {



        grid-template-columns: 1fr;



    }





    .step-card {



        min-height: auto;



    }





    .benefit-list {



        grid-template-columns: 1fr;



        justify-content: center;



    }





    .checker-progress {



        grid-template-columns:

            repeat(2, 1fr);



    }





    .detail-card {



        grid-template-columns:

            44px 1fr;



        padding: 22px;



        gap: 14px;



    }





    .detail-number {



        width: 40px;



        height: 40px;



    }





    .detail-card:hover {



        transform:

            translateY(-4px);



    }





    .cta-card {



        align-items: flex-start;



        flex-direction: column;



        padding:

            38px 28px;



    }





    .cta-actions {



        width: 100%;



    }





    .cta-actions .btn {



        flex: 1;



    }





    .footer-grid {



        grid-template-columns:

            repeat(2, 1fr);



        gap:

            35px 25px;



    }





    .footer-brand {



        grid-column:

            1 / -1;



    }



}





/* =========================================================

   SMALL MOBILE

   ========================================================= */



@media (max-width: 480px) {



    .section-heading {



        margin-bottom: 40px;



    }





    .hero h1 {



        font-size:

            2.3rem;



    }





    .result-card h2 {



        font-size:

            1.65rem;



    }





    .price-row strong,

    .product-card-content strong {



        font-size:

            2.35rem;



    }





    .checker-progress {



        grid-template-columns:

            1fr;



    }





    .check-step {



        padding:

            6px 0;



    }





    .cta-actions {



        flex-direction: column;



    }





    .cta-actions .btn {



        width: 100%;



    }





    .footer-grid {



        grid-template-columns:

            1fr;



    }





    .footer-brand {



        grid-column: auto;



    }





    .footer-bottom {



        flex-direction: column;



        align-items: flex-start;



    }



}





/* =========================================================

   REDUCED MOTION

   ========================================================= */



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



    html {

        scroll-behavior: auto;

    }





    *,

    *::before,

    *::after {



        animation-duration:

            .01ms !important;



        animation-iteration-count:

            1 !important;



        transition-duration:

            .01ms !important;



    }





    .reveal {



        opacity: 1;



        transform: none;



    }



}



/* =========================================================

   OFFICIAL WAEC RESULT CHECKER

   ========================================================= */



.official-waec-action {



    max-width: 900px;



    margin: -18px auto 58px;



    padding: 0 20px;



}





.official-waec-content {



    position: relative;



    overflow: hidden;



    padding: 36px 40px;



    border: 1px solid #D8E3F2;



    border-radius: 22px;



    text-align: center;



    background:

        linear-gradient(135deg, #EEF4FF 0%, #FFFFFF 100%);



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



}





.official-waec-content::before {



    content: "";



    position: absolute;



    top: -100px;



    right: -70px;



    width: 190px;



    height: 190px;



    border-radius: 50%;



    background: rgba(2, 42, 123, .06);



    pointer-events: none;



}





.official-waec-label {



    position: relative;



    display: inline-block;



    margin-bottom: 11px;



    color: var(--primary);



    font-size: .72rem;



    font-weight: 850;



    letter-spacing: .13em;



}





.official-waec-content h3 {



    position: relative;



    margin-bottom: 12px;



    font-size: clamp(1.35rem, 2.2vw, 1.75rem);



}





.official-waec-content p {



    position: relative;



    max-width: 680px;



    margin: 0 auto 24px;



    color: var(--text-light);



    font-size: .96rem;



}





.official-waec-content .btn {



    position: relative;



}





@media (max-width: 760px) {



    .official-waec-action {



        margin: -5px auto 45px;



        padding: 0 14px;



    }





    .official-waec-content {



        padding: 30px 22px;



        border-radius: 18px;



    }





    .official-waec-content p {



        font-size: .92rem;



    }





    .official-waec-content .btn {



        width: 100%;



    }



}


/* =========================================================
   EXACTSUB PRODUCTION ENHANCEMENTS
   ========================================================= */

.breadcrumb {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    width: min(calc(100% - 40px), var(--container-width));
    margin-inline: auto;
    padding: 1.25rem 0 .25rem;
    color: var(--muted);
    font-size: .85rem;
}
.breadcrumb a { color: var(--primary); font-weight: 700; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--muted); }

.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 10px 13px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #344054;
    font-size: .94rem;
    font-weight: 650;
    cursor: pointer;
}
.nav-dropdown-toggle > span:last-child { transition: transform .2s ease; }
.nav-dropdown.open .nav-dropdown-toggle > span:last-child { transform: rotate(180deg); }
.services-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 1200;
    display: grid;
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    width: min(760px, calc(100vw - 32px));
    gap: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--white);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.nav-dropdown.open .services-menu,
.nav-dropdown:hover .services-menu,
.nav-dropdown:focus-within .services-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}
.services-column { display: grid; align-content: start; gap: .25rem; }
.services-heading {
    margin-bottom: .5rem;
    color: var(--primary);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .1em;
}
.services-menu a {
    padding: .65rem .7rem;
    border-radius: .7rem;
    color: var(--text-light);
    font-size: .84rem;
    font-weight: 600;
}
.services-menu a:hover,
.services-menu a.active { color: var(--primary); background: var(--surface); }

.theme-toggle {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--white);
    color: var(--primary);
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.theme-toggle:hover { transform: translateY(-2px); border-color: var(--primary); }
.theme-icon { font-size: 1.35rem; line-height: 1; }
[data-theme="dark"] body { background: var(--background); }
[data-theme="dark"] .site-header { background: rgba(17,24,39,.94); border-color: var(--border); }
[data-theme="dark"] .nav-links a,
[data-theme="dark"] .nav-dropdown-toggle { color: var(--gray-600); }
[data-theme="dark"] .services-menu,
[data-theme="dark"] .nav-panel,
[data-theme="dark"] .theme-toggle { background: var(--white); }
[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .breadcrumb [aria-current="page"] { color: var(--muted); }

.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1500;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    color: #fff;
    background: var(--primary);
    box-shadow: 0 12px 30px rgba(2,42,123,.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}
.back-to-top.visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: var(--primary-light); transform: translateY(-3px); }
.back-to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 900px) {
    /* Mobile navigation is an anchored panel below the header. */
    .navbar {
        position: relative;
    }

    .nav-panel {
        position: absolute;
        top: calc(100% + 1px);
        left: 10px;
        right: 10px;
        width: auto;
        display: block;
        max-height: calc(100vh - var(--nav-height) - 20px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: var(--white);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
    }

    .nav-panel.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .menu-toggle {
        display: block;
        position: relative;
        z-index: 2;
    }

    .nav-links,
    .nav-actions {
        display: grid;
        width: 100%;
        margin: 0;
        gap: 4px;
    }

    .nav-links {
        align-items: stretch;
    }

    .nav-links > li,
    .nav-dropdown {
        width: 100%;
        min-width: 0;
    }

    .nav-links > li > a,
    .nav-dropdown-toggle {
        width: 100%;
        min-height: 46px;
        padding: 12px 13px;
        border-radius: 10px;
        box-sizing: border-box;
    }

    .nav-dropdown-toggle {
        justify-content: space-between;
        text-align: left;
    }

    /* Services becomes a true mobile accordion rather than a desktop mega-menu. */
    .services-menu {
        position: static;
        display: none;
        width: 100%;
        max-height: none;
        box-sizing: border-box;
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 4px 0 6px;
        padding: 10px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface);
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        overflow: visible;
    }

    .nav-dropdown.open .services-menu {
        display: grid;
    }

    /* Hover/focus must not force the dropdown open on touch devices. */
    .nav-dropdown:hover .services-menu {
        opacity: 1;
        visibility: visible;
    }

    .services-column {
        display: grid;
        gap: 2px;
        min-width: 0;
    }

    .services-column + .services-column {
        padding-top: 8px;
        border-top: 1px solid var(--border);
    }

    .services-heading {
        display: block;
        margin: 0 0 4px;
        padding: 5px 8px;
        font-size: .68rem;
        line-height: 1.3;
    }

    .services-menu a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 10px 9px;
        border-radius: 9px;
        font-size: .84rem;
        line-height: 1.35;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .nav-actions {
        grid-template-columns: auto 1fr 1fr;
        align-items: center;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
    }

    .nav-actions > li {
        min-width: 0;
    }

    .theme-toggle { width: 42px; height: 42px; }
    .breadcrumb { width: min(calc(100% - 28px), var(--container-width)); padding-top: 1rem; }
}
@media (max-width: 480px) {
    .breadcrumb { font-size: .8rem; }
    .back-to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; }
    .nav-actions { grid-template-columns: auto 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .back-to-top, .services-menu, .nav-panel { transition: none; }
}


/* =========================================================
   NAVBAR + BREADCRUMB/HERO SPACING REFINEMENT
   ========================================================= */

/* Keep the main desktop navigation links centered in the navbar.
   The logo remains on the left while the action buttons remain on the right. */
@media (min-width: 901px) {
    .navbar {
        position: relative;
    }

    .nav-links {
        position: absolute;
        left: 50%;
        margin-left: 0;
        transform: translateX(-50%);
    }
}

/* Preserve the existing mobile/tablet navigation layout. */
@media (max-width: 900px) {
    .nav-links {
        position: static;
        margin-left: 0;
        transform: none;
    }
}

/* Reduce the visual distance from the breadcrumb to the hero content
   by approximately half: 95px -> 48px on desktop. */
.hero {
    padding-top: 48px;
}

@media (max-width: 760px) {
    .hero {
        padding-top: 36px;
    }
}

/* =========================================================
   MOBILE SERVICES DROPDOWN — FINAL OVERRIDES
   ========================================================= */
@media (max-width: 900px) {
    .navbar { position: relative; }

    .nav-panel {
        left: 10px;
        right: 10px;
        width: auto;
        overflow-x: hidden;
    }

    .nav-dropdown,
    .nav-dropdown-toggle {
        width: 100%;
    }

    .nav-dropdown-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .services-menu {
        position: static !important;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        grid-template-columns: 1fr !important;
        gap: 12px;
        margin: 4px 0 6px !important;
        padding: 10px !important;
        transform: none !important;
        overflow: visible;
    }

    .nav-dropdown:not(.open) .services-menu {
        display: none !important;
        pointer-events: none;
    }

    .nav-dropdown.open .services-menu {
        display: grid !important;
        pointer-events: auto;
    }

    .nav-dropdown:hover .services-menu,
    .nav-dropdown:focus-within .services-menu {
        opacity: 1;
        visibility: visible;
    }

    .services-menu a {
        min-width: 0;
        white-space: normal;
    }
}


/* =========================================================
   EXACTSUB DARK THEME — COMPLETE PAGE OVERRIDES
   ========================================================= */

[data-theme="dark"] {
    --background: #0B1220;
    --surface: #111827;
    --surface-dark: #172033;
    --text: #F5F7FA;
    --text-light: #C8D2E1;
    --muted: #98A6BA;
    --muted-light: #7F8DA3;
    --border: #26344A;
    --shadow-sm: 0 8px 24px rgba(0, 0, 0, .22);
    --shadow-md: 0 18px 50px rgba(0, 0, 0, .28);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, .36);
}

[data-theme="dark"] body {
    color: var(--text);
    background: var(--background);
}

[data-theme="dark"] .site-header,
[data-theme="dark"] .site-header.scrolled {
    background: rgba(11, 18, 32, .94);
    border-color: var(--border);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .24);
}

[data-theme="dark"] .nav-links a,
[data-theme="dark"] .nav-dropdown-toggle {
    color: var(--text-light);
}

[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links a.active,
[data-theme="dark"] .nav-dropdown-toggle:hover {
    color: #FFFFFF;
}

[data-theme="dark"] .nav-panel,
[data-theme="dark"] .services-menu,
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .menu-toggle {
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="dark"] .services-menu a {
    color: var(--text-light);
}

[data-theme="dark"] .services-menu a:hover,
[data-theme="dark"] .services-menu a.active {
    color: #FFFFFF;
    background: var(--surface-dark);
}

[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .theme-icon {
    color: #FFFFFF;
}

[data-theme="dark"] .section-soft {
    background:
        radial-gradient(circle at 10% 10%, rgba(2, 42, 123, .16), transparent 30%),
        var(--background);
}

[data-theme="dark"] .hero {
    background:
        radial-gradient(circle at 0% 30%, rgba(41, 186, 34, .08), transparent 25%),
        radial-gradient(circle at 100% 10%, rgba(2, 42, 123, .20), transparent 34%),
        var(--background);
}

[data-theme="dark"] .hero-badge,
[data-theme="dark"] .floating-card,
[data-theme="dark"] .result-card,
[data-theme="dark"] .step-card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .detail-card,
[data-theme="dark"] .benefit-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .official-waec-content {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="dark"] .result-card,
[data-theme="dark"] .floating-card {
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .hero-badge,
[data-theme="dark"] .floating-card {
    background: rgba(17, 24, 39, .94);
}

[data-theme="dark"] .hero-product-card,
[data-theme="dark"] .product-card,
[data-theme="dark"] .step-card,
[data-theme="dark"] .detail-card,
[data-theme="dark"] .benefit-card,
[data-theme="dark"] .faq-item {
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .faq-item summary,
[data-theme="dark"] .faq-item button,
[data-theme="dark"] .faq-question {
    color: var(--text);
}

[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .breadcrumb a,
[data-theme="dark"] .breadcrumb [aria-current="page"] {
    color: var(--muted);
}

[data-theme="dark"] .breadcrumb a:hover {
    color: #FFFFFF;
}

[data-theme="dark"] .cta-section {
    background: #071A3D;
}

[data-theme="dark"] .official-waec-content {
    background: linear-gradient(135deg, #111827 0%, #172033 100%);
}

[data-theme="dark"] .official-waec-content {
    border-color: var(--border);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--muted-light);
}

[data-theme="dark"] ::selection {
    color: #FFFFFF;
    background: var(--primary);
}