/* ================================================================
   ZUKTI INNOVATIONS — UI ENHANCEMENT LAYER
   Load AFTER style.css. Purely additive — no existing class/id
   hooks are removed, only refined. Everything degrades gracefully.
================================================================ */

@property --zk-a {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

:root {
    --zk-ink: #10332F;
    --zk-ink-2: #092E29;
    --zk-mint: #2DD4BF;
    --zk-mint-soft: rgba(45, 212, 191, .14);
    --zk-teal: #0B7B6B;
    --zk-cream: #FFF8F0;
    --zk-ease: cubic-bezier(.22, .61, .36, 1);
    --zk-spring: cubic-bezier(.34, 1.3, .64, 1);
    --zk-shadow-lift: 0 22px 48px -18px rgba(16, 51, 47, .32);
}

/* ================================================================
   0. GLOBAL — scroll progress, reveal engine, canvas layer
================================================================ */

.zk-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 1200;
    pointer-events: none;
    background: transparent;
}

.zk-progress i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--zk-teal), var(--zk-mint) 70%, #7df0e2);
    box-shadow: 0 0 14px rgba(45, 212, 191, .65);
    transform-origin: left center;
    transition: width .08s linear;
}

/* Canvas backdrops */
.zk-fx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    z-index: 0;
}

/* Film grain — keeps flat colour fields from looking "template-y" */
.zk-grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .18;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* ── Reveal-on-scroll ── */
[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity .75s var(--zk-ease), transform .75s var(--zk-ease);
    transition-delay: var(--zk-d, 0ms);
    will-change: opacity, transform;
}

[data-reveal="left"] {
    transform: translate3d(-32px, 0, 0);
}

[data-reveal="right"] {
    transform: translate3d(32px, 0, 0);
}

[data-reveal="zoom"] {
    transform: scale(.93);
}

[data-reveal="clip"] {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 102% 0);
    transition: clip-path .95s var(--zk-ease);
    transition-delay: var(--zk-d, 0ms);
}

.zk-in[data-reveal] {
    opacity: 1;
    transform: none;
    /* clip-path: inset(0 0 -2% 0); */
}

/* ================================================================
   1. HERO BANNER
================================================================ */

.herobanner {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 520px at 10% -14%, rgba(45, 212, 191, .26), transparent 62%),
        radial-gradient(860px 480px at 94% 112%, rgba(11, 123, 107, .20), transparent 64%),
        #FFF8F0 !important;
}

.herobanner::after {
    /* hairline optical grid */
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(rgba(16, 51, 47, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 51, 47, .045) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
    mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 78%);
}

.herobanner-inner-box {
    position: relative;
    z-index: 2;
}

/* Eyebrow pill */
.left-section-top-section {
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(6px);
    background-color: rgba(255, 255, 255, .55) !important;
    border-color: rgba(16, 51, 47, .14) !important;
    box-shadow: 0 2px 10px rgba(16, 51, 47, .05);
}

.left-section-top-section::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    background: linear-gradient(100deg, transparent, rgba(45, 212, 191, .35), transparent);
    animation: zk-sweep 4.6s var(--zk-ease) infinite;
}

@keyframes zk-sweep {

    0%,
    55% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(120%);
    }
}

.top-section-dot {
    position: relative;
    animation: zk-ping 2.6s var(--zk-ease) infinite;
}

@keyframes zk-ping {
    0% {
        box-shadow: 0 0 0 0 rgba(45, 212, 191, .7);
    }

    70% {
        box-shadow: 0 0 0 11px rgba(45, 212, 191, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(45, 212, 191, 0);
    }
}

/* Headline — gradient word + hand-drawn underline */
.herobanner-maintext span {
    position: relative;
    display: inline-block;
    color: transparent !important;
    background: linear-gradient(104deg, #0B7B6B 0%, #2DD4BF 38%, #8af2e5 58%, #2DD4BF 78%, #0B7B6B 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: zk-shine 7s linear infinite;
}

@keyframes zk-shine {
    to {
        background-position: -260% 0;
    }
}

.herobanner-maintext span::after {
    content: '';
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: .06em;
    height: .09em;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(45, 212, 191, 0), #2DD4BF 18%, #0B7B6B 82%, rgba(11, 123, 107, 0));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1s var(--zk-ease) .45s;
    margin-bottom: -8px;
}

.zk-in .herobanner-maintext span::after,
.herobanner-maintext.zk-in span::after {
    transform: scaleX(1);
}

.hero-subheading {
    color: rgba(16, 51, 47, .72);
}

/* Buttons — magnetic + depth */
.hero-buttons-box button {
    position: relative;
    overflow: hidden;
    transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
    transition: transform .3s var(--zk-spring), background-color .3s var(--zk-ease),
        color .3s var(--zk-ease), box-shadow .3s var(--zk-ease), border-color .3s var(--zk-ease);
}

.hero-buttons-box button::before {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-110%) skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);
    transition: transform .65s var(--zk-ease);
}

.hero-buttons-box button:hover::before {
    transform: translateX(110%) skewX(-18deg);
}

/* Image frame — rotating conic rim + float */
.right-section-box {
    position: relative;
    isolation: isolate;
    animation: zk-float 8s ease-in-out infinite;
    backdrop-filter: blur(2px);
}

.right-section-box::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    padding: 3px;
    background: conic-gradient(from var(--zk-a),
            rgba(45, 212, 191, 0) 0deg,
            rgba(45, 212, 191, .95) 70deg,
            rgba(11, 123, 107, .15) 160deg,
            rgba(45, 212, 191, 0) 300deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: zk-spin 10s linear infinite;
    z-index: -1;
}

@keyframes zk-spin {
    to {
        --zk-a: 360deg;
    }
}

@keyframes zk-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

.herobanner-img img {
    transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 10px), 0);
    transition: transform .5s cubic-bezier(.2, .8, .3, 1);
    filter: drop-shadow(0 26px 34px rgba(16, 51, 47, .18));
}

/* Scroll cue */
.zk-scrollcue {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 3;
    transform: translateX(-50%);
    width: 24px;
    height: 38px;
    border: 2px solid rgba(16, 51, 47, .28);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    padding-top: 7px;
    cursor: pointer;
    background: transparent;
    transition: opacity .4s var(--zk-ease), transform .4s var(--zk-spring),
        border-color .3s var(--zk-ease), box-shadow .3s var(--zk-ease);
}

.zk-scrollcue:hover,
.zk-scrollcue:focus-visible {
    border-color: var(--zk-mint);
    box-shadow: 0 0 0 5px rgba(45, 212, 191, .14);
    transform: translateX(-50%) translateY(3px);
    outline: none;
}

.zk-scrollcue:hover i {
    background: var(--zk-mint);
}

/* fades out once scrolling starts */
.zk-scrollcue.zk-cue-gone {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(14px);
}

.zk-scrollcue i {
    width: 3px;
    height: 7px;
    border-radius: 3px;
    background: var(--zk-teal);
    animation: zk-wheel 1.9s var(--zk-ease) infinite;
}

@keyframes zk-wheel {

    0%,
    15% {
        opacity: 0;
        transform: translateY(-4px);
    }

    40% {
        opacity: 1;
    }

    85%,
    100% {
        opacity: 0;
        transform: translateY(12px);
    }
}

/* ================================================================
   2. ABOUT — scanning eye card
================================================================ */

.hero-section-bg {
    position: relative;
    background:
        radial-gradient(700px 400px at 100% 0%, rgba(45, 212, 191, .10), transparent 60%),
        #fff;
}

.hero-eye-card::after {
    /* glass sweep on hover */
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .34) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: transform .9s var(--zk-ease);
}

.hero-eye-card:hover::after {
    transform: translateX(120%);
}

.hero-eye-card img {
    transition: transform 1.1s var(--zk-ease);
}

.hero-eye-card:hover img {
    transform: scale(1.06);
}

/* Horizontal scan line */
.zk-scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(45, 212, 191, .9), transparent);
    box-shadow: 0 0 18px 2px rgba(45, 212, 191, .45);
    animation: zk-scan 4.2s var(--zk-ease) infinite;
}

@keyframes zk-scan {

    0%,
    100% {
        top: 8%;
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    95% {
        top: 92%;
        opacity: 0;
    }
}

.corner-bracket {
    z-index: 3;
    opacity: .85;
    transition: opacity .4s var(--zk-ease), transform .5s var(--zk-spring);
}

.hero-eye-card:hover .corner-bracket {
    opacity: 1;
    transform: scale(1.12);
}

.accuracy-badge {
    z-index: 4;
    background: linear-gradient(148deg, #14433D 0%, #10332F 60%, #092E29 100%);
    border: 1px solid rgba(45, 212, 191, .22);
    transition: transform .4s var(--zk-spring), box-shadow .4s var(--zk-ease);
    animation: zk-badge 5s ease-in-out infinite;
}

@keyframes zk-badge {

    0%,
    100% {
        box-shadow: 0 8px 24px rgba(0, 0, 0, .2), 0 0 0 0 rgba(45, 212, 191, .28);
    }

    50% {
        box-shadow: 0 14px 34px rgba(0, 0, 0, .26), 0 0 0 12px rgba(45, 212, 191, 0);
    }
}

.accuracy-badge:hover {
    transform: translateY(-4px) rotate(-2deg);
}

.hero-eyebrow {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(16, 51, 47, .1);
}

.hero-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--zk-mint);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, .2);
}

.teal-underline {
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform .8s var(--zk-ease) .25s;
}

.zk-in .teal-underline,
.teal-underline.zk-in {
    transform: scaleX(1);
}

/* Stats */
.stat-item {
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--zk-spring), border-color .3s, box-shadow .35s;
}

.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--zk-teal), var(--zk-mint));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--zk-ease);
}

.stat-item:hover {
    transform: translateY(-6px);
    border-color: rgba(45, 212, 191, .55);
    box-shadow: var(--zk-shadow-lift);
    border: unset;
}

.stat-item:hover::before {
    transform: scaleX(1);
}

/* ================================================================
   3. DIGITAL EYE EXAM
================================================================ */

.eye-exam-bg {
    position: relative;
    overflow: hidden;
}

.eye-exam-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(16, 51, 47, .10) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
    opacity: .7;
}

.eye-exam-section {
    position: relative;
    z-index: 1;
}

.section-eyebrow {
    align-items: center;
    gap: 8px;
    display: flex;
    border: 1px solid rgba(16, 51, 47, .1);
}

.section-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    display: inline-flex;
    border-radius: 50%;
    background: var(--zk-mint);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, .2);
}

.exam-feature-card {
    position: relative;
    transition: border-color .4s var(--zk-ease), box-shadow .4s var(--zk-ease), transform .4s var(--zk-ease);
}

.exam-feature-card:hover {
    border-color: rgba(45, 212, 191, .4);
    box-shadow: 0 28px 60px -26px rgba(16, 51, 47, .4);
    transform: translateY(-4px);
}

.exam-card-img img {
    transition: transform 1.1s var(--zk-ease);
}

.exam-feature-card:hover .exam-card-img img {
    transform: scale(1.07);
}

.exam-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(249, 247, 243, .55) 0%, transparent 30%);
}

/* Feature cards — cursor spotlight + gradient rim */
.feature-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .35s var(--zk-spring), box-shadow .35s var(--zk-ease), border-color .35s;
}

.feature-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s var(--zk-ease);
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
            rgba(45, 212, 191, .18), transparent 60%);
}

.feature-card:hover {
    transform: translateY(-7px);
    border-color: rgba(45, 212, 191, .45);
    box-shadow: var(--zk-shadow-lift);
}

.feature-card:hover::after {
    opacity: 1;
}

.feature-icon {
    transition: transform .45s var(--zk-spring), background .35s, box-shadow .35s;
}

.feature-card:hover .feature-icon {
    transform: translateY(-2px) rotate(-7deg) scale(1.08);
    background: rgba(45, 212, 191, .2) !important;
    box-shadow: 0 10px 22px -10px rgba(11, 123, 107, .55);
}

.feature-card.quote-card {
    background: linear-gradient(150deg, #0E5047 0%, #0A5C4F 45%, #092E29 100%);
    position: relative;
    overflow: hidden;
}

.feature-card.quote-card::before {
    content: '';
    position: absolute;
    top: -70px;
    right: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 212, 191, .26), transparent 68%);
    animation: zk-breathe 6s ease-in-out infinite;
}

@keyframes zk-breathe {

    0%,
    100% {
        transform: scale(1);
        opacity: .8;
    }

    50% {
        transform: scale(1.18);
        opacity: 1;
    }
}

.quote-card .quote-icon {
    position: relative;
    z-index: 1;
    background-color: var(--zk-mint) !important;
    opacity: .8;
    animation: zk-float 6s ease-in-out infinite;
}

.quote-card .quote-text {
    position: relative;
    z-index: 1;
}

.learn-btn {
    position: relative;
    overflow: hidden;
}

.learn-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-110%) skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
    transition: transform .7s var(--zk-ease);
}

.learn-btn:hover::before {
    transform: translateX(110%) skewX(-18deg);
}

/* ================================================================
   4. PRODUCTS — dark, canvas-lit
================================================================ */

section.zukti-digital {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 500px at 8% 0%, rgba(18, 165, 143, .18), transparent 62%),
        radial-gradient(760px 480px at 96% 100%, rgba(45, 212, 191, .12), transparent 60%),
        var(--zp-bg-deep) !important;
}

section.zukti-digital>.container {
    position: relative;
    z-index: 2;
}

.zp-eyebrow {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(45, 212, 191, .22);
}

.zp-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--zk-mint);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, .18);
}

.zp-prod-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03));
    backdrop-filter: blur(10px);
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
    transition: transform .35s var(--zk-ease), box-shadow .35s var(--zk-ease), border-color .35s;
    will-change: transform;
}

.zp-prod-card:hover {
    --ty: -8px;
    border-color: rgba(45, 212, 191, .42);
    box-shadow: 0 32px 64px -24px rgba(0, 0, 0, .65), 0 0 0 1px rgba(45, 212, 191, .12);
}

.zp-prod-card::after {
    /* cursor glow */
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s var(--zk-ease);
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
            rgba(45, 212, 191, .18), transparent 62%);
}

.zp-prod-card:hover::after {
    opacity: 1;
}

.zp-card-img-wrap::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to top, rgba(9, 46, 41, .95), transparent);
}

.zp-prod-tag {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(45, 212, 191, .2);
}

.zp-tag-dot {
    animation: zk-ping 2.8s var(--zk-ease) infinite;
}

.zp-card-body .zp-prod-name {
    transition: color .3s var(--zk-ease);
}

.zp-prod-card:hover .zp-prod-name {
    color: var(--zk-mint);
}

.open-button.zp-book-btn svg {
    transition: transform .35s var(--zk-spring);
}

.open-button.zp-book-btn:hover svg {
    transform: translateX(5px);
}

.zp-prod-carousel.owl-carousel .owl-nav button {
    background: rgba(45, 212, 191, .16) !important;
    border-color: rgba(45, 212, 191, .4) !important;
    color: var(--zk-mint) !important;
    backdrop-filter: blur(6px);
    transition: background .25s var(--zk-ease), transform .25s var(--zk-spring), color .25s;
}

.zp-prod-carousel.owl-carousel .owl-nav button:hover {
    background: var(--zk-mint) !important;
    color: var(--zk-ink) !important;
    transform: scale(1.1);
}

/* ================================================================
   5. CONTACT
================================================================ */

section.Contact-Us {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(720px 420px at 0% 100%, rgba(45, 212, 191, .14), transparent 62%),
        #FFF8F0 !important;
}

.zp-contact-info {
    position: relative;
    overflow: hidden;
    background: linear-gradient(158deg, #14433D 0%, #10332F 52%, #092E29 100%);
}

.zp-contact-info::before {
    content: '';
    position: absolute;
    top: -90px;
    right: -90px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 212, 191, .26), transparent 68%);
    animation: zk-breathe 7s ease-in-out infinite;
    pointer-events: none;
}

.zp-contact-info>* {
    position: relative;
    z-index: 1;
}

.zp-ci-icon {
    transition: background .3s var(--zk-ease), color .3s, transform .4s var(--zk-spring);
}

.zp-ci-item:hover .zp-ci-icon {
    background: var(--zk-mint);
    color: var(--zk-ink);
    transform: rotate(-7deg) scale(1.08);
}

.zp-ci-value {
    width: fit-content;
    position: relative;
}

.zp-ci-value::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: var(--zk-mint);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s var(--zk-ease);
}

a.zp-ci-value:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.zp-form-card {
    position: relative;
}

.zp-form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--zk-teal), var(--zk-mint), var(--zk-teal));
    background-size: 220% 100%;
    animation: zk-shine 6s linear infinite;
}

.zp-form-group:focus-within .zp-form-label {
    color: var(--zk-teal);
    transform: translateY(-1px);
}

.zp-form-label {
    transition: color .25s var(--zk-ease), transform .25s var(--zk-ease);
}

button.fill-butten {
    position: relative;
    overflow: hidden;
}

button.fill-butten::before {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-110%) skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
    transition: transform .75s var(--zk-ease);
}

button.fill-butten:hover::before {
    transform: translateX(110%) skewX(-18deg);
}

/* ================================================================
   6. FOOTER polish
================================================================ */

.zf-list a {
    position: relative;
    width: fit-content;
    display: inline-block;
}

.zf-list a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 1px;
    background: var(--zk-mint);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s var(--zk-ease);
}

.zf-list a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.zf-send-btn {
    transition: background .25s, color .25s, transform .3s var(--zk-spring);
}

.zf-send-btn:hover {
    transform: translateX(3px) scale(1.06);
}

/* ================================================================
   7. RESPONSIVE / MOTION SAFETY
================================================================ */

@media (max-width: 768px) {
    .zk-scrollcue {
        display: none;
    }

    .right-section-box {
        animation-duration: 10s;
    }

    .herobanner::after {
        background-size: 40px 40px;
    }
}

@media (hover: none) {
    .zp-prod-card {
        transform: none;
    }

    .feature-card::after,
    .zp-prod-card::after {
        display: none;
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }

    .zk-fx,
    .zk-scanline,
    .zk-scrollcue,
    #zkHeroStage {
        display: none !important;
    }
}

/* ================================================================
   8. CANVAS STAGE LAYER  (v2)
   Hero canvas now starts at the very top of the document, behind
   the header. Every other section gets its own injected canvas.
================================================================ */

body {
    position: relative;
}

/* ── Full-bleed stage: top of page → bottom of hero ── */
#zkHeroStage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(1100px 560px at 10% -6%, rgba(45, 212, 191, .3), transparent 62%),
        radial-gradient(880px 520px at 94% 108%, rgba(11, 123, 107, .22), transparent 64%),
        linear-gradient(180deg, #F2FBF9 0%, #FFF8F0 52%, #FFF8F0 100%);
}

#zkHeroStage::after {
    /* optical grid continues up through the header */
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(16, 51, 47, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 51, 47, .05) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 46%, #000 18%, transparent 80%);
    mask-image: radial-gradient(ellipse at 50% 46%, #000 18%, transparent 80%);
}

/* The hero itself is now transparent — the stage paints behind it */
.herobanner {
    background: transparent !important;
}

.herobanner::after {
    content: none;
}

/* ── Header sits ON the stage: its own background is cleared so the
      canvas + gradient run straight through the top strip.
      Triple-class specificity beats the theme's own !important. ── */
/* `overflow-x: hidden` on html/body turns them into a scroll
   container and kills position:sticky — `clip` hides the same
   overflow without that side effect. */
html,
body {
    overflow-x: clip;
}

@supports not (overflow-x: clip) {

    html,
    body {
        overflow-x: hidden;
    }
}

/* Fixed + spacer rather than sticky: sticky is bound by its parent's
   box and by any ancestor overflow/height, so it drops out partway
   down the page. Fixed never does. The spacer (injected by JS) keeps
   the document flow identical. */
.zk-nav-spacer {
    height: var(--zk-nav-h, 88px);
    width: 100%;
    pointer-events: none;
    flex: none;
}

.zk-top-nav.zk-top-nav.zk-top-nav {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 40;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-bottom: 0;
    transition: background-color .35s var(--zk-ease), box-shadow .35s var(--zk-ease),
        border-color .35s var(--zk-ease), backdrop-filter .35s var(--zk-ease);
}

/* full-width wrappers inside the header (container / navbar / row).
   .logo-wrap is deliberately NOT listed — the dark logo card keeps
   its own background. Add it here if you want that cleared too. */
.zk-nav-clear.zk-nav-clear.zk-nav-clear,
.zk-top-nav .nav-inner-wrap,
.zk-top-nav .nav-bar-wrap,
.zk-top-nav .menu-bar,
.zk-top-nav>.container {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* once scrolled past the hero, the bar earns a light glass plate
   so content never collides with it */
.zk-top-nav.zk-top-nav.zk-top-nav.zk-nav-stuck {
    background-color: rgba(255, 248, 240, .86) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border-bottom-color: rgba(16, 51, 47, .09);
    box-shadow: 0 14px 34px -24px rgba(16, 51, 47, .45) !important;
}

/* a tall mobile menu scrolls inside the fixed bar instead of
   running off the bottom of the screen */
.zk-top-nav .navbar-collapse,
.zk-top-nav .menu-bar.show {
    max-height: calc(100vh - var(--zk-nav-h, 88px) - 12px);
    overflow-y: auto;
}

/* anchor targets clear the fixed bar instead of hiding under it */
section[id],
#about-us,
#products,
#contect {
    scroll-margin-top: calc(var(--zk-nav-h, 88px) + 14px);
}

/* keep the logo card and nav items above the stage */
.zk-top-nav.zk-top-nav>*,
.zk-nav-clear.zk-nav-clear>* {
    position: relative;
    z-index: 2;
}

/* mint underline accent on the active/hovered nav item */
.zk-top-nav .nav-link {
    position: relative;
    transition: color .25s var(--zk-ease);
}

.zk-top-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--zk-teal), var(--zk-mint));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s var(--zk-ease);
}

.zk-top-nav .nav-link:hover::after,
.zk-top-nav .nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ── Per-section canvas hosts ── */
.zk-has-fx {
    position: relative;
    overflow: hidden;
}

.zk-has-fx>.zk-fx {
    z-index: 0;
}

/* keep every section's real content above its canvas */
.hero-section-bg>.hero,
.eye-exam-bg>.eye-exam-section,
section.zukti-digital>.container,
section.Contact-Us>.container,
.zf-footer>.container,
.zf-footer>div:not(.zk-fx) {
    position: relative;
    z-index: 2;
}

/* The about + exam sections keep their own tints, so the canvas
   needs them to stay translucent rather than opaque. */
.hero-section-bg {
    background:
        radial-gradient(700px 400px at 100% 0%, rgba(45, 212, 191, .10), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #FCFEFD 100%);
}

.eye-exam-bg::before {
    opacity: .4;
}

/* Contact canvas fades to the section's own cream, so the section
   must not paint a second opaque layer on top of it. */
section.Contact-Us {
    background:
        radial-gradient(720px 420px at 0% 100%, rgba(45, 212, 191, .14), transparent 62%),
        #FFF8F0 !important;
}

/* Footer canvas */
.zf-footer {
    position: relative;
    overflow: hidden;
}

/* ── Mobile: lighter canvases, no backdrop blur cost ── */
@media (max-width: 768px) {
    #zkHeroStage::after {
        background-size: 40px 40px;
    }

    .zk-top-nav.zk-top-nav.zk-top-nav.zk-nav-stuck {
        background-color: rgba(255, 248, 240, .96) !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ── Header menu hover ── */
.zk-top-nav ul.menu-list li.menu-li>a {
    position: relative;
    display: inline-block;
    padding-bottom: 7px;
    color: var(--zk-ink);
    font-weight: 600;
    letter-spacing: .01em;
    transition: color .28s var(--zk-ease), transform .28s var(--zk-spring);
}

/* the animated rule */
.zk-top-nav ul.menu-list li.menu-li>a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--zk-teal), var(--zk-mint));
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .4s var(--zk-ease);
}

/* soft mint halo that blooms under the word */
.zk-top-nav ul.menu-list li.menu-li>a::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 15px;
    width: 72%;
    height: 14px;
    transform: translateX(-50%) scale(.4);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(45, 212, 191, .5), transparent 70%);
    opacity: 0;
    transition: opacity .35s var(--zk-ease), transform .45s var(--zk-ease);
    pointer-events: none;
}

.zk-top-nav ul.menu-list li.menu-li>a:hover {
    color: var(--zk-teal);
    transform: translateY(-2px);
}

.zk-top-nav ul.menu-list li.menu-li>a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.zk-top-nav ul.menu-list li.menu-li>a:hover::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* active item — replace the flat 2px border with the gradient rule */
.zk-top-nav ul.menu-list li.menu-li.nav-active {
    border-bottom: none !important;
}

.zk-top-nav ul.menu-list li.menu-li.nav-active>a {
    color: var(--zk-ink);
}

.zk-top-nav ul.menu-list li.menu-li.nav-active>a::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* keyboard focus parity */
.zk-top-nav ul.menu-list li.menu-li>a:focus-visible {
    outline: none;
    color: var(--zk-teal);
}

.zk-top-nav ul.menu-list li.menu-li>a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}