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

   EXACTSUB — NECO RESULT CHECKER

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



:root {

    --primary: #022A7B;

    --primary-dark: #011d56;

    --primary-light: #eaf1ff;



    --green: #29BA22;

    --green-dark: #1d9418;

    --green-light: #eaf9e9;



    --white: #ffffff;

    --black: #101828;



    --text: #344054;

    --muted: #667085;



    --border: #e4e7ec;

    --background: #f8faff;

    --soft-background: #f5f8ff;



    --shadow-sm:

        0 2px 8px rgba(16, 24, 40, 0.05);



    --shadow:

        0 15px 45px rgba(2, 42, 123, 0.10);



    --shadow-lg:

        0 25px 70px rgba(2, 42, 123, 0.16);



    --radius-sm: 10px;

    --radius: 18px;

    --radius-lg: 28px;



    --container: 1180px;



    --transition:

        0.3s cubic-bezier(.4, 0, .2, 1);

}





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

   RESET

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



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}





html {

    scroll-behavior: smooth;

    scroll-padding-top: 90px;

}





body {

    font-family:

        Inter,

        ui-sans-serif,

        system-ui,

        -apple-system,

        BlinkMacSystemFont,

        "Segoe UI",

        sans-serif;



    color: var(--text);

    background: var(--white);



    line-height: 1.6;



    overflow-x: hidden;

}





img {

    max-width: 100%;

    display: block;

}





a {

    color: inherit;

    text-decoration: none;

}





button,

input,

textarea,

select {

    font: inherit;

}





button {

    border: 0;

}





ul {

    list-style: none;

}





::selection {

    color: var(--white);

    background: var(--primary);

}





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

   GLOBAL

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



.container {

    width: min(

        calc(100% - 40px),

        var(--container)

    );



    margin-inline: auto;

}





.section {

    padding: 110px 0;

}





.section-heading {

    max-width: 720px;

    margin: 0 auto 65px;

    text-align: center;

}





.section-tag {

    display: inline-flex;



    align-items: center;

    justify-content: center;



    color: var(--green);



    font-size: 0.76rem;

    font-weight: 800;



    letter-spacing: 0.14em;



    margin-bottom: 14px;

}





.section-heading h2,

.price-content h2,

.faq-intro h2 {

    color: var(--black);



    font-size: clamp(

        2rem,

        4vw,

        3.2rem

    );



    line-height: 1.12;



    letter-spacing: -0.04em;

}





.section-heading h2 span,

.price-content h2 span,

.faq-intro h2 span {

    color: var(--primary);

}





.section-heading p {

    margin-top: 18px;



    color: var(--muted);



    font-size: 1.05rem;

}





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

   BUTTONS

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



.btn {

    display: inline-flex;



    align-items: center;

    justify-content: center;

    gap: 10px;



    min-height: 48px;



    padding: 0 22px;



    border-radius: 12px;



    font-size: 0.95rem;

    font-weight: 700;



    cursor: pointer;



    transition:

        transform var(--transition),

        box-shadow var(--transition),

        background var(--transition),

        border-color var(--transition);

}





.btn:hover {

    transform: translateY(-2px);

}





.btn-primary {

    color: var(--white);

    background: var(--primary);



    box-shadow:

        0 10px 25px rgba(2, 42, 123, 0.18);

}





.btn-primary:hover {

    background: var(--primary-dark);



    box-shadow:

        0 14px 30px rgba(2, 42, 123, 0.25);

}





.btn-outline {

    color: var(--primary);



    border: 1.5px solid var(--primary);



    background: var(--white);

}





.btn-outline:hover {

    color: var(--white);

    background: var(--primary);

}





.btn-small {

    min-height: 42px;

    padding: 0 17px;

}





.btn-large {

    min-height: 56px;

    padding-inline: 25px;

}





.btn-full {

    width: 100%;

}





.btn-text {

    color: var(--primary);

    background: transparent;



    padding-inline: 8px;

}





.btn-text:hover {

    color: var(--green);

}





.btn-white {

    color: var(--primary);

    background: var(--white);



    box-shadow:

        0 10px 30px rgba(0, 0, 0, 0.12);

}





.btn-white:hover {

    background: #f4f7ff;

}





.btn-arrow {

    transition: transform var(--transition);

}





.btn:hover .btn-arrow,

.btn:hover > span:last-child {

    transform: translateX(4px);

}





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

   PAGE LOADER

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



.page-loader {

    position: fixed;

    inset: 0;



    z-index: 9999;



    display: flex;



    flex-direction: column;



    align-items: center;

    justify-content: center;



    gap: 18px;



    background: var(--white);



    transition:

        opacity 0.5s ease,

        visibility 0.5s ease;

}





.page-loader.loaded {

    opacity: 0;

    visibility: hidden;

}





.loader-logo img {

    width: 52px;





    animation:

        loaderPulse 1.2s ease-in-out infinite;

}





.loader-spinner {

    width: 26px;

    height: 26px;



    border: 3px solid var(--primary-light);

    border-top-color: var(--primary);



    border-radius: 50%;



    animation:

        spin 0.8s linear infinite;

}





@keyframes spin {

    to {

        transform: rotate(360deg);

    }

}





@keyframes loaderPulse {



    0%,

    100% {

        transform: scale(1);

    }



    50% {

        transform: scale(1.08);

    }

}





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

   SCROLL PROGRESS

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



.scroll-progress {

    position: fixed;



    top: 0;

    left: 0;



    width: 0;

    height: 3px;



    z-index: 10000;



    background:

        linear-gradient(

            90deg,

            var(--primary),

            var(--green)

        );

}





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

   HEADER

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



.site-header {

    position: sticky;



    top: 0;



    z-index: 1000;



    background:

        rgba(255, 255, 255, 0.92);



    border-bottom: 1px solid rgba(228, 231, 236, 0.7);



    backdrop-filter: blur(18px);

}





.navbar {

    min-height: 78px;



    display: flex;



    align-items: center;

    justify-content: space-between;

}





.brand img {

    width: 43px;

    height: 43px;



    object-fit: contain;

}





.navigation {

    display: flex;



    align-items: center;



    gap: 45px;

}





.nav-links {

    display: flex;



    align-items: center;



    gap: 30px;

}





.nav-links a {

    color: #475467;



    font-size: 0.94rem;

    font-weight: 600;



    transition:

        color var(--transition);

}





.nav-links a:hover {

    color: var(--primary);

}





.nav-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}





.mobile-menu-button {

    display: none;



    width: 42px;

    height: 42px;



    align-items: center;

    justify-content: center;



    flex-direction: column;

    gap: 5px;



    background: var(--primary-light);



    border-radius: 10px;



    cursor: pointer;

}





.mobile-menu-button span {

    width: 19px;

    height: 2px;



    background: var(--primary);



    transition:

        transform var(--transition),

        opacity var(--transition);

}





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

   HERO

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



.hero {

    position: relative;



    min-height: 680px;



    display: flex;

    align-items: center;



    overflow: hidden;



    background:

        radial-gradient(

            circle at 15% 30%,

            rgba(41, 186, 34, 0.06),

            transparent 30%

        ),



        radial-gradient(

            circle at 85% 50%,

            rgba(2, 42, 123, 0.08),

            transparent 32%

        ),



        var(--white);

}





.hero-grid {

    position: relative;



    z-index: 2;



    display: grid;



    grid-template-columns:

        minmax(0, 1.05fr)

        minmax(400px, 0.95fr);



    gap: 70px;



    align-items: center;



    padding: 90px 0;

}





.hero-content {

    max-width: 650px;

}





.eyebrow {

    display: inline-flex;



    align-items: center;

    gap: 9px;



    padding: 8px 13px;



    margin-bottom: 22px;



    border-radius: 999px;



    color: var(--primary);



    background: var(--primary-light);



    font-size: 0.76rem;

    font-weight: 800;



    letter-spacing: 0.08em;

    text-transform: uppercase;

}





.eyebrow-dot {

    width: 7px;

    height: 7px;



    border-radius: 50%;



    background: var(--green);



    box-shadow:

        0 0 0 5px rgba(41, 186, 34, 0.12);

}





.hero h1 {

    max-width: 700px;



    color: var(--black);



    font-size: clamp(

        2.8rem,

        6vw,

        5rem

    );



    line-height: 1.03;



    letter-spacing: -0.055em;

}





.hero h1 span {

    color: var(--primary);

}





.hero-description {

    max-width: 600px;



    margin-top: 25px;



    color: var(--muted);



    font-size: 1.08rem;



    line-height: 1.8;

}





.hero-buttons {

    display: flex;



    align-items: center;

    gap: 18px;



    margin-top: 34px;

}





.hero-trust {

    display: flex;



    flex-wrap: wrap;



    gap: 18px;



    margin-top: 30px;

}





.trust-item {

    display: flex;



    align-items: center;

    gap: 8px;



    color: #667085;



    font-size: 0.84rem;

    font-weight: 600;

}





.trust-icon {

    width: 21px;

    height: 21px;



    display: inline-flex;



    align-items: center;

    justify-content: center;



    border-radius: 50%;



    color: var(--green);

    background: var(--green-light);



    font-size: 0.7rem;

    font-weight: 900;

}





/* HERO VISUAL */



.hero-visual {

    position: relative;



    min-height: 480px;



    display: flex;



    align-items: center;

    justify-content: center;

}





.neco-card {

    position: relative;



    width: min(100%, 450px);



    min-height: 300px;



    padding: 32px;



    display: flex;



    flex-direction: column;

    justify-content: space-between;



    overflow: hidden;



    border-radius: 28px;



    color: var(--white);



    background:

        linear-gradient(

            135deg,

            #022A7B 0%,

            #06399f 60%,

            #022A7B 100%

        );



    box-shadow:

        0 35px 70px rgba(2, 42, 123, 0.30);



    transform:

        perspective(1000px)

        rotateY(-4deg)

        rotateX(2deg);



    transition:

        transform 0.5s ease;

}





.neco-card:hover {

    transform:

        perspective(1000px)

        rotateY(0deg)

        rotateX(0deg)

        translateY(-7px);

}





.card-glow {

    position: absolute;



    width: 300px;

    height: 300px;



    top: -150px;

    right: -100px;



    border-radius: 50%;



    background:

        rgba(255, 255, 255, 0.1);



    filter: blur(3px);

}





.neco-card-top,

.neco-card-bottom {

    position: relative;

    z-index: 2;



    display: flex;



    align-items: center;

    justify-content: space-between;

}





.neco-logo {

    font-size: 1.5rem;

    font-weight: 900;



    letter-spacing: 0.08em;

}





.card-status {

    padding: 7px 11px;



    border:

        1px solid

        rgba(255, 255, 255, 0.22);



    border-radius: 999px;



    color: rgba(255, 255, 255, 0.85);



    font-size: 0.7rem;

}





.card-main {

    position: relative;

    z-index: 2;

}





.card-label {

    display: block;



    margin-bottom: 7px;



    color:

        rgba(255, 255, 255, 0.7);



    font-size: 0.7rem;



    letter-spacing: 0.15em;

}





.card-main h2 {

    font-size: 1.8rem;



    letter-spacing: -0.03em;

}





.pin-placeholder {

    margin-top: 20px;



    font-size: 1.35rem;



    letter-spacing: 0.18em;



    color:

        rgba(255, 255, 255, 0.7);

}





.neco-card-bottom {

    font-size: 0.78rem;

}





.neco-card-bottom small {

    display: block;



    color:

        rgba(255, 255, 255, 0.6);

}





.neco-card-bottom strong {

    font-size: 0.95rem;

}





.card-check {

    width: 40px;

    height: 40px;



    display: flex;



    align-items: center;

    justify-content: center;



    border-radius: 50%;



    color: var(--primary);



    background: var(--white);



    font-weight: 900;

}





/* FLOATING CARDS */



.floating-card {

    position: absolute;



    z-index: 5;



    display: flex;



    align-items: center;

    gap: 12px;



    padding: 14px 17px;



    border:

        1px solid

        rgba(255, 255, 255, 0.8);



    border-radius: 15px;



    background:

        rgba(255, 255, 255, 0.94);



    box-shadow:

        0 15px 35px rgba(16, 24, 40, 0.13);



    backdrop-filter: blur(10px);



    animation:

        floating 4s ease-in-out infinite;

}





.floating-card strong {

    display: block;



    color: var(--black);



    font-size: 0.85rem;

}





.floating-card small {

    display: block;



    margin-top: 2px;



    color: var(--muted);



    font-size: 0.68rem;

}





.floating-card-one {

    top: 45px;

    right: -5px;

}





.floating-card-two {

    bottom: 42px;

    left: -10px;



    animation-delay: -2s;

}





.floating-icon,

.price-icon {

    width: 35px;

    height: 35px;



    display: flex;



    align-items: center;

    justify-content: center;



    flex-shrink: 0;



    border-radius: 10px;



    color: var(--green);



    background: var(--green-light);



    font-weight: 900;

}





.price-icon {

    color: var(--primary);

    background: var(--primary-light);

}





@keyframes floating {



    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-10px);

    }

}





/* BACKGROUND SHAPES */



.hero-background-shape {

    position: absolute;



    border-radius: 50%;



    pointer-events: none;

}





.shape-one {

    width: 300px;

    height: 300px;



    right: -130px;

    top: 80px;



    background:

        rgba(41, 186, 34, 0.06);

}





.shape-two {

    width: 180px;

    height: 180px;



    left: -80px;

    bottom: 40px;



    background:

        rgba(2, 42, 123, 0.05);

}





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

   STATS

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



.stats-section {

    padding: 28px 0;



    border-top:

        1px solid var(--border);



    border-bottom:

        1px solid var(--border);



    background:

        var(--soft-background);

}





.stats-grid {

    display: grid;



    grid-template-columns:

        repeat(4, 1fr);



    gap: 20px;

}





.stat-item {

    text-align: center;



    padding: 16px;

}





.stat-item strong {

    display: block;



    color: var(--primary);



    font-size: 1.8rem;

    font-weight: 850;



    letter-spacing: -0.04em;

}





.stat-item span {

    color: var(--muted);



    font-size: 0.8rem;

    font-weight: 600;

}





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

   HOW IT WORKS

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



.how-section {

    background: var(--white);

}





.steps-grid {

    display: grid;



    grid-template-columns:

        repeat(3, 1fr);



    gap: 24px;

}





.step-card {

    position: relative;



    padding: 35px;



    border:

        1px solid var(--border);



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



    background: var(--white);



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



    transition:

        transform var(--transition),

        box-shadow var(--transition),

        border-color var(--transition);

}





.step-card:hover {

    transform: translateY(-7px);



    border-color:

        rgba(2, 42, 123, 0.18);



    box-shadow: var(--shadow);

}





.step-number {

    position: absolute;



    top: 24px;

    right: 25px;



    color:

        rgba(2, 42, 123, 0.08);



    font-size: 2.5rem;

    font-weight: 900;

}





.step-icon {

    width: 52px;

    height: 52px;



    display: flex;



    align-items: center;

    justify-content: center;



    margin-bottom: 25px;



    border-radius: 15px;



    background: var(--primary-light);

}





.step-icon svg {

    width: 25px;

    height: 25px;



    fill: var(--primary);

}





.step-card h3 {

    margin-bottom: 10px;



    color: var(--black);



    font-size: 1.15rem;

}





.step-card p {

    color: var(--muted);



    font-size: 0.92rem;

}





.center-button {

    display: flex;



    justify-content: center;



    margin-top: 45px;

}





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

   PRICE

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



.price-section {

    background:

        var(--soft-background);

}





.price-grid {

    display: grid;



    grid-template-columns:

        1fr 0.75fr;



    gap: 90px;



    align-items: center;

}





.price-content {

    max-width: 590px;

}





.price-content > p {

    margin-top: 22px;



    color: var(--muted);



    font-size: 1.02rem;



    line-height: 1.8;

}





.check-list {

    display: grid;



    gap: 15px;



    margin-top: 30px;

}





.check-list li {

    display: flex;



    align-items: center;

    gap: 11px;



    color: #475467;



    font-weight: 600;

}





.check-list span {

    width: 23px;

    height: 23px;



    display: flex;



    align-items: center;

    justify-content: center;



    border-radius: 50%;



    color: var(--green);



    background: var(--green-light);



    font-size: 0.72rem;

    font-weight: 900;

}





.price-card {

    position: relative;



    padding: 8px;



    border-radius: 29px;



    background:

        linear-gradient(

            135deg,

            var(--primary),

            #0a48b8

        );



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

}





.price-card-inner {

    padding: 38px;



    border-radius: 23px;



    background: var(--white);



    text-align: center;

}





.popular-badge {

    position: absolute;



    top: -13px;

    left: 50%;



    transform: translateX(-50%);



    padding: 6px 13px;



    border-radius: 999px;



    color: var(--white);



    background: var(--green);



    font-size: 0.67rem;

    font-weight: 900;



    letter-spacing: 0.08em;

}





.product-icon {

    width: 60px;

    height: 60px;



    display: flex;



    align-items: center;

    justify-content: center;



    margin: 0 auto 18px;



    border-radius: 18px;



    color: var(--white);



    background: var(--primary);



    font-size: 1.5rem;

    font-weight: 900;

}





.product-type {

    color: var(--muted);



    font-size: 0.8rem;

    font-weight: 700;



    text-transform: uppercase;



    letter-spacing: 0.1em;

}





.price-card h3 {

    margin-top: 8px;



    color: var(--black);



    font-size: 1.35rem;

}





.product-price {

    margin-top: 17px;



    color: var(--primary);



    font-size: 3.5rem;

    font-weight: 900;



    letter-spacing: -0.06em;

}





.product-price small {

    font-size: 1.6rem;

}





.price-card-inner > p {

    margin-bottom: 27px;



    color: var(--muted);



    font-size: 0.88rem;

}





.secure-note {

    display: flex;



    justify-content: center;

    align-items: center;

    gap: 7px;



    margin-top: 18px;



    color: var(--muted);



    font-size: 0.72rem;

}





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

   RESULT SECTION

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



.result-section {

    background: var(--white);

}





.result-grid {

    display: grid;



    grid-template-columns:

        repeat(2, 1fr);



    gap: 18px;

}





.result-step {

    display: flex;



    align-items: flex-start;

    gap: 18px;



    padding: 24px;



    border:

        1px solid var(--border);



    border-radius: 16px;



    transition:

        transform var(--transition),

        box-shadow var(--transition);

}





.result-step:hover {

    transform: translateY(-4px);



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

}





.result-step > span {

    width: 38px;

    height: 38px;



    display: flex;



    align-items: center;

    justify-content: center;



    flex-shrink: 0;



    border-radius: 10px;



    color: var(--white);



    background: var(--primary);



    font-size: 0.76rem;

    font-weight: 800;

}





.result-step h3 {

    margin-bottom: 6px;



    color: var(--black);



    font-size: 1rem;

}





.result-step p {

    color: var(--muted);



    font-size: 0.87rem;

}





.official-portal {

    display: grid;



    grid-template-columns: auto 1fr auto;



    align-items: center;



    gap: 20px;



    margin-top: 35px;



    padding: 25px 28px;



    border:

        1px solid

        rgba(2, 42, 123, 0.12);



    border-radius: 18px;



    background: var(--primary-light);

}





.portal-icon {

    width: 50px;

    height: 50px;



    display: flex;



    align-items: center;

    justify-content: center;



    border-radius: 15px;



    color: var(--white);



    background: var(--primary);



    font-weight: 900;

}





.official-portal span {

    color: var(--primary);



    font-size: 0.68rem;

    font-weight: 900;



    letter-spacing: 0.1em;

}





.official-portal h3 {

    margin-top: 3px;



    color: var(--black);



    font-size: 1rem;

}





.official-portal p {

    margin-top: 4px;



    color: var(--muted);



    font-size: 0.82rem;

}





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

   BENEFITS

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



.benefits-section {

    background: var(--soft-background);

}





.benefits-grid {

    display: grid;



    grid-template-columns:

        repeat(3, 1fr);



    gap: 20px;

}





.benefit-card {

    padding: 30px;



    border:

        1px solid var(--border);



    border-radius: 20px;



    background: var(--white);



    transition:

        transform var(--transition),

        box-shadow var(--transition);

}





.benefit-card:hover {

    transform: translateY(-6px);



    box-shadow: var(--shadow);

}





.benefit-icon {

    width: 48px;

    height: 48px;



    display: flex;



    align-items: center;

    justify-content: center;



    margin-bottom: 20px;



    border-radius: 14px;



    background: var(--primary-light);



    font-size: 1.2rem;

}





.benefit-card h3 {

    margin-bottom: 8px;



    color: var(--black);



    font-size: 1.05rem;

}





.benefit-card p {

    color: var(--muted);



    font-size: 0.87rem;

}





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

   FAQ

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



.faq-section {

    background: var(--white);

}





.faq-container {

    display: grid;



    grid-template-columns:

        0.7fr 1.3fr;



    gap: 80px;



    align-items: start;

}





.faq-intro {

    position: sticky;



    top: 110px;

}





.faq-intro h2 {

    font-size: clamp(

        2rem,

        4vw,

        2.8rem

    );

}





.faq-intro p {

    margin: 20px 0 28px;



    color: var(--muted);



    font-size: 0.96rem;

}





.faq-list {

    display: grid;



    gap: 10px;

}





.faq-item {

    overflow: hidden;



    border:

        1px solid var(--border);



    border-radius: 14px;



    background: var(--white);

}





.faq-question {

    width: 100%;



    min-height: 68px;



    padding: 18px 20px;



    display: flex;



    align-items: center;

    justify-content: space-between;



    gap: 20px;



    color: var(--black);



    background: transparent;



    text-align: left;



    cursor: pointer;



    font-size: 0.94rem;

    font-weight: 700;

}





.faq-icon {

    width: 28px;

    height: 28px;



    display: flex;



    align-items: center;

    justify-content: center;



    flex-shrink: 0;



    border-radius: 50%;



    color: var(--primary);



    background: var(--primary-light);



    font-size: 1.1rem;



    transition:

        transform var(--transition);

}





.faq-item.active .faq-icon {

    transform: rotate(45deg);

}





.faq-answer {

    display: grid;



    grid-template-rows: 0fr;



    transition:

        grid-template-rows 0.35s ease;

}





.faq-answer p {

    overflow: hidden;



    padding-inline: 20px;



    color: var(--muted);



    font-size: 0.87rem;



    line-height: 1.75;

}





.faq-item.active .faq-answer {

    grid-template-rows: 1fr;

}





.faq-item.active .faq-answer p {

    padding-bottom: 20px;

}





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

   CTA

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



.cta-section {

    padding: 30px 0 110px;



    background: var(--white);

}





.cta-box {

    position: relative;



    overflow: hidden;



    padding: 75px 50px;



    border-radius: 30px;



    color: var(--white);



    background:

        linear-gradient(

            120deg,

            #022A7B,

            #073da0

        );



    text-align: center;



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

}





.cta-content {

    position: relative;



    z-index: 2;



    max-width: 760px;



    margin: 0 auto;

}





.cta-content .section-tag {

    color: #9eea99;

}





.cta-content h2 {

    color: var(--white);



    font-size: clamp(

        2.3rem,

        5vw,

        4rem

    );



    line-height: 1.08;



    letter-spacing: -0.05em;

}





.cta-content h2 span {

    color: #a7ef9f;

}





.cta-content p {

    max-width: 580px;



    margin: 18px auto 30px;



    color:

        rgba(255, 255, 255, 0.78);



    font-size: 1rem;

}





.cta-buttons {

    display: flex;



    align-items: center;

    justify-content: center;



    gap: 22px;



    flex-wrap: wrap;

}





.cta-login {

    color:

        rgba(255, 255, 255, 0.8);



    font-size: 0.84rem;

}





.cta-login strong {

    color: var(--white);



    text-decoration: underline;

}





.cta-decoration {

    position: absolute;



    border-radius: 50%;



    border:

        1px solid

        rgba(255, 255, 255, 0.08);

}





.decoration-one {

    width: 350px;

    height: 350px;



    right: -120px;

    top: -160px;

}





.decoration-two {

    width: 250px;

    height: 250px;



    left: -100px;

    bottom: -140px;

}





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

   FOOTER

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



.footer {

    padding: 75px 0 25px;



    color:

        rgba(255, 255, 255, 0.72);



    background: #061638;

}





.footer-main {

    display: grid;



    grid-template-columns:

        1.5fr

        repeat(4, 1fr);



    gap: 45px;



    padding-bottom: 55px;

}





.footer-brand img {

    width: 45px;



    margin-bottom: 18px;

}





.footer-brand p {

    max-width: 260px;



    font-size: 0.82rem;



    line-height: 1.7;

}





.footer-store-buttons {

    margin-top: 22px;

}





.store-button {

    display: inline-flex;



    align-items: center;

    gap: 10px;



    padding: 10px 14px;



    border:

        1px solid

        rgba(255, 255, 255, 0.15);



    border-radius: 10px;

}





.store-button > span {

    font-size: 1.3rem;

}





.store-button small,

.store-button strong {

    display: block;

}





.store-button small {

    font-size: 0.55rem;

}





.store-button strong {

    color: var(--white);



    font-size: 0.76rem;

}





.footer-column h3 {

    margin-bottom: 18px;



    color: var(--white);



    font-size: 0.87rem;

}





.footer-column ul {

    display: grid;



    gap: 10px;

}





.footer-column a {

    color:

        rgba(255, 255, 255, 0.62);



    font-size: 0.8rem;



    transition:

        color var(--transition);

}





.footer-column a:hover {

    color: var(--white);

}





.footer-bottom {

    padding-top: 22px;



    display: flex;



    align-items: center;

    justify-content: space-between;



    gap: 20px;



    border-top:

        1px solid

        rgba(255, 255, 255, 0.1);



    font-size: 0.72rem;

}





.footer-bottom a {

    color: var(--white);

}





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

   FLOATING CTA

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



.floating-cta {

    position: fixed;



    right: 22px;

    bottom: 22px;



    z-index: 900;



    display: flex;



    align-items: center;

    gap: 10px;



    padding: 10px 14px 10px 10px;



    border-radius: 15px;



    color: var(--white);



    background: var(--primary);



    box-shadow:

        0 12px 35px rgba(2, 42, 123, 0.3);



    transition:

        transform var(--transition),

        box-shadow var(--transition);

}





.floating-cta:hover {

    transform: translateY(-4px);



    box-shadow:

        0 18px 40px rgba(2, 42, 123, 0.38);

}





.floating-cta > span {

    width: 34px;

    height: 34px;



    display: flex;



    align-items: center;

    justify-content: center;



    border-radius: 10px;



    color: var(--primary);



    background: var(--white);



    font-weight: 900;

}





.floating-cta strong,

.floating-cta small {

    display: block;

}





.floating-cta strong {

    font-size: 0.75rem;

}





.floating-cta small {

    margin-top: 1px;



    color:

        rgba(255, 255, 255, 0.7);



    font-size: 0.65rem;

}





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

   SCROLL REVEAL

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



.reveal {

    opacity: 0;



    transform:

        translateY(35px);



    transition:

        opacity 0.75s ease,

        transform 0.75s cubic-bezier(.2, .7, .2, 1);

}





.reveal-left {

    transform:

        translateX(-45px);

}





.reveal-right {

    transform:

        translateX(45px);

}





.reveal.visible {

    opacity: 1;



    transform:

        translate(0);

}





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

   RESPONSIVE

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



@media (max-width: 1050px) {



    .hero-grid {

        gap: 35px;

    }





    .navigation {

        gap: 25px;

    }





    .nav-links {

        gap: 20px;

    }





    .price-grid {

        gap: 45px;

    }





    .faq-container {

        gap: 45px;

    }



}





@media (max-width: 900px) {



    .mobile-menu-button {

        display: flex;

    }





    .navigation {

        position: absolute;



        top: calc(100% + 1px);

        left: 0;

        right: 0;



        display: flex;



        flex-direction: column;



        align-items: stretch;



        gap: 20px;



        padding: 20px;



        border-bottom:

            1px solid var(--border);



        background: var(--white);



        box-shadow: var(--shadow);



        opacity: 0;

        visibility: hidden;



        transform: translateY(-10px);



        transition:

            opacity var(--transition),

            visibility var(--transition),

            transform var(--transition);

    }





    .navigation.active {

        opacity: 1;

        visibility: visible;



        transform: translateY(0);

    }





    .nav-links {

        flex-direction: column;



        align-items: stretch;



        gap: 0;

    }





    .nav-links li {

        border-bottom:

            1px solid var(--border);

    }





    .nav-links a {

        display: block;



        padding: 14px 5px;

    }





    .nav-actions {

        display: grid;



        grid-template-columns: 1fr 1fr;

    }





    .hero-grid {

        grid-template-columns: 1fr;



        text-align: center;

    }





    .hero-content {

        max-width: 760px;



        margin-inline: auto;

    }





    .hero-description {

        margin-inline: auto;

    }





    .hero-buttons,

    .hero-trust {

        justify-content: center;

    }





    .hero-visual {

        min-height: 450px;

    }





    .price-grid {

        grid-template-columns: 1fr;



        max-width: 750px;

        margin-inline: auto;

    }





    .price-content {

        max-width: none;



        text-align: center;

    }





    .check-list {

        max-width: 390px;



        margin-inline: auto;



        text-align: left;

    }





    .benefits-grid {

        grid-template-columns:

            repeat(2, 1fr);

    }





    .faq-container {

        grid-template-columns: 1fr;

    }





    .faq-intro {

        position: static;



        max-width: 700px;

    }





    .footer-main {

        grid-template-columns:

            repeat(3, 1fr);

    }





    .footer-brand {

        grid-column: 1 / -1;

    }



}





@media (max-width: 700px) {



    .container {

        width: min(

            calc(100% - 28px),

            var(--container)

        );

    }





    .section {

        padding: 75px 0;

    }





    .navbar {

        min-height: 68px;

    }





    .hero {

        min-height: auto;

    }





    .hero-grid {

        padding: 65px 0;

    }





    .hero h1 {

        font-size: clamp(

            2.35rem,

            11vw,

            3.5rem

        );

    }





    .hero-description {

        font-size: 0.96rem;

    }





    .hero-buttons {

        flex-direction: column;



        align-items: stretch;

    }





    .hero-buttons .btn {

        width: 100%;

    }





    .hero-trust {

        display: grid;



        grid-template-columns:

            repeat(3, 1fr);



        gap: 7px;

    }





    .trust-item {

        flex-direction: column;



        text-align: center;



        font-size: 0.7rem;

    }





    .hero-visual {

        min-height: 390px;

    }





    .neco-card {

        min-height: 265px;



        padding: 25px;



        transform: none;

    }





    .floating-card-one {

        top: 5px;

        right: -5px;

    }





    .floating-card-two {

        bottom: 5px;

        left: -5px;

    }





    .floating-card {

        padding: 10px;

    }





    .floating-card strong {

        font-size: 0.7rem;

    }





    .floating-card small {

        font-size: 0.6rem;

    }





    .stats-grid {

        grid-template-columns:

            repeat(2, 1fr);

    }





    .steps-grid,

    .benefits-grid {

        grid-template-columns: 1fr;

    }





    .result-grid {

        grid-template-columns: 1fr;

    }





    .official-portal {

        grid-template-columns: auto 1fr;

    }





    .official-portal .btn {

        grid-column: 1 / -1;

        width: 100%;

    }





    .price-card-inner {

        padding: 30px 22px;

    }





    .product-price {

        font-size: 3rem;

    }





    .cta-box {

        padding: 55px 22px;

    }





    .cta-buttons {

        flex-direction: column;

    }





    .cta-buttons .btn {

        width: 100%;

    }





    .footer-main {

        grid-template-columns:

            repeat(2, 1fr);



        gap: 35px 25px;

    }





    .footer-brand {

        grid-column: 1 / -1;

    }





    .footer-bottom {

        flex-direction: column;



        align-items: flex-start;

    }





    .floating-cta {

        right: 12px;

        bottom: 12px;

    }



}





@media (max-width: 420px) {



    .hero-trust {

        grid-template-columns: 1fr;

    }





    .trust-item {

        flex-direction: row;



        justify-content: center;

    }





    .hero-visual {

        min-height: 350px;

    }





    .neco-card {

        min-height: 235px;



        padding: 20px;

    }





    .card-main h2 {

        font-size: 1.4rem;

    }





    .pin-placeholder {

        font-size: 1rem;

    }





    .floating-card {

        transform: scale(0.9);

    }





    .floating-card-one {

        right: -10px;

    }





    .floating-card-two {

        left: -10px;

    }





    .footer-main {

        grid-template-columns: 1fr;

    }



}





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

   REDUCED MOTION

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



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



    html {

        scroll-behavior: auto;

    }





    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;



        animation-iteration-count: 1 !important;



        transition-duration: 0.01ms !important;

    }





    .reveal {

        opacity: 1;



        transform: none;

    }



}


/* =========================================================
   EXACTSUB GLOBAL / NECO ENHANCEMENTS
   ========================================================= */

:root {
    --exact-primary: #022A7B;
    --exact-primary-light: #0A3D9C;
    --exact-accent: #29BA22;
    --exact-border: #E4EAF2;
    --exact-muted: #667085;
    --exact-surface: #F7F9FC;
    --exact-white: #FFFFFF;
    --exact-shadow-lg: 0 30px 80px rgba(2, 42, 123, 0.16);
}

.breadcrumb {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.7rem;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 18px 0 8px;
    color: var(--muted, #667085);
    font-size: 0.88rem;
}

.breadcrumb a {
    color: var(--primary, #022A7B);
    font-weight: 700;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
    color: var(--muted, #667085);
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 10px;
    border: 0;
    color: #475467;
    background: transparent;
    font-size: 0.94rem;
    font-weight: 600;
    cursor: pointer;
}

.nav-dropdown-toggle > span {
    line-height: 1;
    transition: transform 0.2s ease;
}

.nav-dropdown.open .nav-dropdown-toggle > span {
    transform: rotate(180deg);
}

.services-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    z-index: 1200;
    display: grid;
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    width: min(760px, calc(100vw - 32px));
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--border, #E4E7EC);
    border-radius: 18px;
    background: var(--white, #FFFFFF);
    box-shadow: var(--shadow-lg, var(--exact-shadow-lg));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.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: 3px;
}

.services-heading {
    margin-bottom: 7px;
    color: var(--primary, #022A7B);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.services-menu a {
    display: block;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--text, #344054);
    font-size: 0.86rem;
    font-weight: 600;
}

.services-menu a:hover,
.services-menu a:focus-visible {
    color: var(--primary, #022A7B);
    background: var(--surface, #F7F9FC);
}

.theme-toggle {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border, #E4E7EC);
    border-radius: 50%;
    color: var(--primary, #022A7B);
    background: var(--white, #FFFFFF);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.theme-toggle:hover {
    transform: translateY(-2px);
    border-color: var(--primary, #022A7B);
}

.theme-icon {
    font-size: 1.15rem;
    line-height: 1;
}

.back-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 950;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #FFFFFF;
    background: var(--primary, #022A7B);
    box-shadow: 0 12px 30px rgba(2, 42, 123, 0.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--primary-dark, #011D56);
    transform: translateY(-3px);
}

.back-to-top svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

[data-theme="dark"] {
    --white: #111827;
    --black: #FFFFFF;
    --text: #E5E7EB;
    --muted: #AAB4C5;
    --border: #2D3748;
    --background: #0F172A;
    --primary-light: #183B80;
    --soft-background: #162033;
}

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

[data-theme="dark"] .site-header {
    background: rgba(15, 23, 42, 0.94);
    border-color: rgba(148, 163, 184, 0.18);
}

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

[data-theme="dark"] .services-menu,
[data-theme="dark"] .theme-toggle {
    color: var(--text);
    background: #111827;
    border-color: #2D3748;
}

[data-theme="dark"] .services-menu a {
    color: #CBD5E1;
}

[data-theme="dark"] .services-menu a:hover,
[data-theme="dark"] .services-menu a:focus-visible {
    background: #172033;
    color: #FFFFFF;
}

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

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

[data-theme="dark"] .page-loader {
    background: #0F172A;
}

@media (max-width: 900px) {
    .navigation {
        position: absolute;
        top: calc(100% + 1px);
        left: 14px;
        right: 14px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        max-height: calc(100vh - 95px);
        overflow-y: auto;
        padding: 14px;
        border: 1px solid var(--border, #E4E7EC);
        border-radius: 16px;
        background: var(--white, #FFFFFF);
        box-shadow: var(--shadow-lg, var(--exact-shadow-lg));
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    }

    .navigation.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .nav-links {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

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

    .nav-links a,
    .nav-dropdown-toggle {
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 9px;
    }

    .nav-links a:hover,
    .nav-dropdown-toggle:hover {
        background: var(--surface, #F7F9FC);
    }

    .services-menu {
        position: static;
        display: none;
        width: 100%;
        grid-template-columns: 1fr;
        margin-top: 4px;
        padding: 10px;
        border-radius: 12px;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

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

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

    .nav-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .breadcrumb {
        width: min(1180px, calc(100% - 28px));
        padding-top: 12px;
    }

    .mobile-menu-button {
        display: flex;
    }
}

@media (max-width: 520px) {
    .services-menu {
        gap: 8px;
    }

    .back-to-top {
        right: 14px;
        bottom: 14px;
        width: 44px;
        height: 44px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .services-menu,
    .theme-toggle,
    .back-to-top {
        transition: none;
    }
}

/* =========================================================
   EXACTSUB — FINAL NECO HERO FIX
   Based on the live neco-result-checker.html structure.
   This block intentionally comes last so it overrides older
   duplicate hero media-query rules safely.
   ========================================================= */

.hero,
.hero .container,
.hero-grid,
.hero-grid > *,
.hero-content,
.hero-visual {
    min-width: 0;
}

.hero {
    width: 100%;
    overflow: hidden;
}

.hero .container.hero-grid {
    width: min(calc(100% - 40px), var(--container));
    margin-inline: auto;
    box-sizing: border-box;
}

.hero-grid {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    align-items: center;
    gap: clamp(35px, 5vw, 70px);
    padding: 80px 0;
    box-sizing: border-box;
}

.hero-content {
    width: 100%;
    max-width: 680px;
    margin: 0;
    box-sizing: border-box;
}

.hero h1 {
    width: 100%;
    max-width: 650px;
    margin: 0;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.hero-description {
    width: 100%;
    max-width: 580px;
}

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

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

.hero-visual {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 460px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.neco-card {
    width: min(100%, 450px);
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1050px) {
    .hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(330px, 0.9fr);
        gap: 38px;
        padding: 70px 0;
    }

    .hero h1 {
        max-width: 600px;
        font-size: clamp(2.8rem, 5.2vw, 4.2rem);
    }

    .hero-visual {
        min-height: 430px;
    }
}

@media (max-width: 900px) {
    .hero .container.hero-grid {
        width: min(calc(100% - 32px), var(--container));
    }

    .hero-grid {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 45px;
        padding: 65px 0;
        text-align: center;
    }

    .hero-content {
        width: 100%;
        max-width: 760px;
        margin-inline: auto;
        text-align: center;
    }

    .hero h1 {
        width: 100%;
        max-width: 700px;
        margin-inline: auto;
        font-size: clamp(2.7rem, 7.5vw, 4rem);
        line-height: 1.04;
    }

    .hero-description {
        width: 100%;
        max-width: 620px;
        margin-inline: auto;
    }

    .hero-buttons,
    .hero-trust {
        justify-content: center;
    }

    .hero-visual {
        width: 100%;
        max-width: 100%;
        min-height: 420px;
        margin-inline: auto;
    }
}

@media (max-width: 700px) {
    .hero .container.hero-grid {
        width: calc(100% - 28px);
        max-width: none;
    }

    .hero-grid {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 38px;
        padding: 55px 0 50px;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
    }

    .hero h1 {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        font-size: clamp(2.35rem, 10vw, 3.45rem);
        line-height: 1.04;
        letter-spacing: -0.045em;
    }

    .hero-description {
        width: 100%;
        max-width: 600px;
        margin-inline: auto;
        font-size: 0.96rem;
        line-height: 1.7;
    }

    .hero-buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 100%;
    }

    .hero-trust {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .trust-item {
        min-width: 0;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        font-size: 0.7rem;
    }

    .hero-visual {
        width: 100%;
        max-width: 100%;
        min-height: 390px;
        margin-inline: auto;
    }

    .neco-card {
        width: min(100%, 450px);
        max-width: 100%;
        min-height: 265px;
        padding: 25px;
        transform: none;
    }

    .neco-card:hover {
        transform: none;
    }

    .floating-card {
        max-width: calc(100% - 20px);
        padding: 10px;
    }

    .floating-card-one {
        top: 5px;
        right: 0;
    }

    .floating-card-two {
        bottom: 5px;
        left: 0;
    }
}

@media (max-width: 420px) {
    .hero .container.hero-grid {
        width: calc(100% - 24px);
    }

    .hero-grid {
        width: 100%;
        gap: 32px;
        padding: 45px 0 40px;
    }

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

    .hero h1 {
        width: 100%;
        max-width: 100%;
        font-size: clamp(2.15rem, 10.5vw, 3.05rem);
        line-height: 1.04;
        letter-spacing: -0.042em;
    }

    .hero-description {
        width: 100%;
        max-width: 100%;
        padding-inline: 2px;
        font-size: 0.92rem;
        line-height: 1.68;
    }

    .hero-visual {
        width: 100%;
        max-width: 100%;
        min-height: 350px;
    }

    .neco-card {
        width: min(100%, 450px);
        max-width: 100%;
        min-height: 235px;
        padding: 20px;
    }

    .floating-card {
        transform: scale(0.88);
        transform-origin: center;
    }

    .floating-card-one {
        top: 0;
        right: -2px;
    }

    .floating-card-two {
        bottom: 0;
        left: -2px;
    }

    .hero-trust {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .trust-item {
        flex-direction: row;
        justify-content: center;
    }
}

@media (max-width: 360px) {
    .hero .container.hero-grid {
        width: calc(100% - 20px);
    }

    .hero h1 {
        font-size: 2.05rem;
    }

    .hero-description {
        font-size: 0.9rem;
    }

    .hero-visual {
        min-height: 325px;
    }

    .neco-card {
        min-height: 220px;
        padding: 17px;
    }

    .floating-card {
        transform: scale(0.78);
    }
}