/** Shopify CDN: Minification failed

Line 5482:0 Unexpected "50%"
Line 5485:0 Unexpected "}"
Line 18136:34 The "+" operator only works if there is whitespace on both sides

**/
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lora:ital,wght@0,400..700;1,400..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --black: #0b1220;
    --white: #f5f3ee;
    --accent: #abce3b;
    --accent2: #c8e855;
    --mid: #111c2e;
    --mid2: #192339;
    --nav-bg: rgba(11, 18, 32, 0.95);
    --nav-text: #f5f3ee;
    --nav-muted: rgba(245, 243, 238, 0.85);
    --nav-border: rgba(255, 255, 255, 0.08);
    --footer-bg: #030508;
    --footer-text: #f5f3ee;
    --footer-muted: rgba(255, 255, 255, 0.68);
    --footer-border: rgba(255, 255, 255, 0.07);
    --dim: #6e84a0;
    --fd: 'Calibri';
    --fb: 'Calibri';
    --nh: 70px;
}

@font-face {
    font-family: 'Calibri';
    src: url('{{ "Calibri.eot?#iefix" | asset_url }}') ormat('embedded-opentype'),
    url('{{ "Calibri.ttf" | asset_url }}') format('truetype'),
    url('{{ "Calibri.svg#Calibri" | asset_url }}') format('svg'),
    url('{{ "Calibri.woff2" | asset_url }}') format('woff2'),
    url('{{ "Calibri.woff" | asset_url }}') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    /* background: var(--black); */
    color: var(--white);
    font-family: var(--fb);
    overflow-x: hidden;
    font-feature-settings: 'cv11', 'ss01';
    line-height: normal;
}

th,
td,
body,
input,
textarea,
button,
select {
    font-family: var(--fb);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    letter-spacing: 0px;
    font-family: var(--fb);
    text-transform: none;
    font-size: inherit;
    text-transform: none;
}

.main-content {
    padding-top: 0px;
}

.page-container {
    overflow: unset;
    -webkit-transform: none;
    transform: none;
}

a:not([disabled]):hover,
a:focus {
    color: #0b1220;
}

.header-fixed {
    padding: 13px 40px;
    background: #0b1220f2;
    backdrop-filter: blur(20px);
    border-bottom: 1.5px solid var(--nav-border);
    box-shadow: 0 1px 16px rgba(0, 0, 0, 0.06);
    transition: all 0.3s;
}

/*  */
/* ══ NAV ══ */
#nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    height: var(--nh);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    gap: 16px;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    border-bottom: 1.5px solid var(--nav-border);
    box-shadow: 0 1px 16px rgba(0, 0, 0, 0.06);
    transition: all 0.3s;
}

#nav.scrolled {
    height: 58px;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.09);
}

.nav-logo {
    text-decoration: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.nav-logo img {
    width: 100%;
    max-width: 180px;
    display: block;
    background: transparent !important;
    animation: glowPulseImg 2s infinite alternate;
    /* Make dark navy text appear white on dark nav background 
  filter: brightness(0) saturate(100%) invert(90%) sepia(10%) hue-rotate(60deg) brightness(1.1);*/
}

@keyframes glowPulseImg {
    from {
        filter: drop-shadow(0 0 5px #00ff00);
    }

    to {
        filter: drop-shadow(0 0 20px #00ff00);
    }
}

@keyframes floatMove {
    0% {
        transform: translateY(0px);
    }

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

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

/* On scroll (when nav might change), keep logo visible */
/* #nav.scrolled .nav-logo img {
  filter: brightness(0) saturate(100%) invert(90%) sepia(10%) hue-rotate(60deg) brightness(1.1);
} */

/* ── search bar ── */
.nav-search-wrap {
    flex: 1;
    max-width: 360px;
    position: relative;
    display: flex;
    align-items: center;
}

.nav-search-wrap svg {
    position: absolute;
    left: 13px;
    pointer-events: none;
    color: #9aafbf;
}

.nav-search-wrap input {
    width: 100%;
    padding: 9px 14px 9px 40px;
    border: 1.5px solid var(--nav-border);
    border-radius: 50px;
    outline: none;
    font-family: var(--fb);
    font-size: 0.845rem;
    color: var(--nav-text);
    background: rgba(255, 255, 255, 0.07);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.nav-search-wrap input::placeholder {
    color: rgba(245, 243, 238, 0.35);
}

.nav-search-wrap input:focus {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(171, 206, 59, 0.1);
}

.nav-center {
    display: flex;
    align-items: center;
    gap: 1px;
    list-style: none;
    position: relative;
}

.nav-item {
    position: relative;
}

.nav-item>a,
.nav-item>button {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--nav-muted);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    transition: color 0.18s, background 0.18s;
    white-space: nowrap;
}

.nav-item>a:hover,
.nav-item>button:hover,
.nav-item.open>button {
    color: var(--white);
    background: rgba(255, 255, 255, 0.07);
}

.chev {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    transition: transform 0.22s;
    pointer-events: none;
    stroke: currentColor;
}

.nav-item.open .chev {
    transform: rotate(180deg);
}

/* dropdown */
.nav-dd {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 230px;
    background: #0d1525;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

.nav-item.open .nav-dd {
    display: block;
    animation: ddIn 0.16s ease;
}

@keyframes ddIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.nav-dd a {
    display: block;
    padding: 9px 13px;
    border-radius: 5px;
    font-size: 0.8rem;
    color: rgba(245, 243, 238, 0.65);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.14s, color 0.14s;
}

.nav-dd a:hover {
    background: rgba(171, 206, 59, 0.1);
    color: var(--accent);
}

.nav-dd-all {
    color: var(--accent) !important;
    font-weight: 600;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin-top: 4px;
    padding-top: 10px !important;
}

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

/* icon buttons — search & cart */
.nav-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(245, 243, 238, 0.65);
    text-decoration: none;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
    position: relative;
    flex-shrink: 0;
}

.nav-icon-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(171, 206, 59, 0.08);
}

.nav-icon-btn:not([disabled]):hover {
    color: var(--accent);
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

.btn-ng {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 8px 17px;
    border-radius: 7px;
    text-decoration: none;
    background: transparent;
    transition: border-color 0.2s, color 0.2s;
}

.btn-ng:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-ns {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    padding: 9px 20px;
    border-radius: 7px;
    text-decoration: none;
    transition: background 0.2s, box-shadow 0.2s;
}

.btn-ns:hover {
    background: #8aaa20;
    box-shadow: 0 4px 14px rgba(171, 206, 59, 0.3);
}

/* ── Account dropdown button ── */
.nav-account-wrap {
    position: relative;
}

.btn-account {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(245, 243, 238, 0.92);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 7px;
    padding: 8px 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.btn-account:hover,
.nav-account-wrap.open .btn-account {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(171, 206, 59, 0.08);
}

.nav-account-wrap .nav-dd {
    min-width: 180px;
    left: 50%;
    transform: translateX(-50%);
}

.nav-account-wrap .nav-dd a {
    display: flex;
    align-items: center;
    gap: 9px;
}

.nav-account-wrap.open .nav-dd {
    display: block;
    animation: ddIn 0.16s ease;
}

/* ── CC App button ── */
.btn-ccapp {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #0b1220;
    background: var(--accent);
    border: none;
    border-radius: 7px;
    padding: 9px 16px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.btn-ccapp:hover {
    background: #c8e855;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(171, 206, 59, 0.35);
}

.btn-ccapp svg {
    flex-shrink: 0;
}

/* hide account/ccapp on mobile - show in hamburger menu */
/* Tablet: compact nav */
/* ════ NAV BREAKPOINTS — single source of truth ════ */






/* Mobile: strip to essentials */
/* hamburger */
.hbg {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 8px;
    margin-left: 4px;
}

.hbg span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: transform 0.28s, opacity 0.28s;
}

.hbg.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hbg.open span:nth-child(2) {
    opacity: 0;
}

.hbg.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* mobile drawer */
#mob {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8998;
    background: #07070f;
    overflow-y: auto;
    padding: calc(var(--nh) + 16px) 20px 48px;
}

#mob.open {
    display: block;
}

.mob-sec {
    margin-bottom: 28px;
}

.mob-sec-t {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mob-sec a {
    display: block;
    padding: 10px 0;
    font-size: 0.9rem;
    color: rgba(245, 243, 238, 0.72);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: color 0.18s, padding-left 0.18s;
}

.mob-sec a:hover {
    color: var(--accent);
    padding-left: 6px;
}

/* ══ COMPACT MOBILE DRAWER TOP PANEL ══ */
.mob-top-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mob-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mob-brand {
    font-family: var(--fd);
    font-weight: 700;
    font-size: 1rem;
    color: var(--white);
}

.mob-brand b {
    color: var(--accent);
    font-style: normal;
}

.mob-acct-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 4px 4px 4px 10px;
    flex-shrink: 0;
}

.mob-avatar-sm {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fd);
    font-size: 0.72rem;
    font-weight: 800;
    color: #0b1220;
}

.mob-username {
    font-family: var(--fb);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(245, 243, 238, 0.85);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mob-pill-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 999px;
    font-family: var(--fb);
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s;
}

.mob-pill-login {
    background: var(--accent);
    color: #0b1220;
}

.mob-pill-login:active {
    background: #b8d83f;
}

.mob-pill-register {
    background: transparent;
    color: rgba(245, 243, 238, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.mob-pill-account,
.mob-pill-logout {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(245, 243, 238, 0.7);
}

.mob-pill-logout {
    background: rgba(220, 60, 60, 0.15);
    color: rgba(255, 110, 110, 0.9);
}

.mob-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 9px 12px;
}

.mob-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-family: var(--fb);
    font-size: 0.82rem;
    color: var(--white);
}

.mob-search-input::placeholder {
    color: rgba(245, 243, 238, 0.35);
}

.mob-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mob-action-primary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: var(--accent);
    border-radius: 8px;
    font-family: var(--fd);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0b1220;
    text-decoration: none;
    white-space: nowrap;
}

.mob-action-primary:active {
    background: #b8d83f;
}

.mob-action-sec {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    font-family: var(--fd);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, 0.8);
    text-decoration: none;
    white-space: nowrap;
}

.mob-action-sec:active {
    background: rgba(255, 255, 255, 0.1);
}

.mob-action-shop {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(162, 205, 56, 0.12);
    border: 1px solid rgba(162, 205, 56, 0.25);
    border-radius: 8px;
    color: var(--accent);
    text-decoration: none;
}

.mob-action-shop:active {
    background: rgba(162, 205, 56, 0.25);
}

.mob-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin: 14px 0;
}

/* Custom NAV end */

.nav-logo {
    width: auto;
    display: block;
}

.site-nav__link--button {
    border: none;
    background-color: transparent;
    padding: 3px 10px;
    border-radius: 6px;
}

#SiteNav li a {
    font-size: 12px;
}

.site-nav a {
    padding: 3px 5px 3px 0;
}

.site-nav__label {
    border-bottom: none;
}

.site-nav__link:focus .site-nav__label,
.site-nav__link:not([disabled]):hover .site-nav__label {
    color: #ffffff;
}

.site-nav__link--button:focus,
.site-nav__link--button:hover,
.site-nav--active .site-nav__link--button {
    background: rgba(255, 255, 255, 0.07);
}

.site-nav__link .icon-chevron-down {
    margin-left: 0;
}

.site-nav__dropdown ul {
    background: #0d1525;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

.site-nav__dropdown a span {
    color: rgba(245, 243, 238, 0.65);
}

#SiteNav .site-nav__dropdown li a {
    padding: 9px 13px;
    border-radius: 5px;
}

#SiteNav .site-nav__dropdown li a:hover {
    background: rgba(171, 206, 59, 0.1);
}

.site-nav__link:not([disabled]):hover .site-nav__label {
    color: var(--accent);
}

.list--inline>li .icon {
    transition: transform 0.22s;
}

.site-nav--active-dropdown .icon {
    transform: rotate(180deg);
    transition: transform 0.22s;
}

a.btn-ng {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 8px 17px;
    border-radius: 7px;
    text-decoration: none;
    background: transparent;
    transition: border-color 0.2s, color 0.2s;
}

a.btn-ng:hover {
    border-color: var(--accent);
    color: var(--accent);
}

a.btn-ccapp {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #0b1220;
    background: var(--accent);
    border: none;
    border-radius: 7px;
    padding: 9px 16px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

a.btn-ccapp:hover {
    background: #c8e855;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(171, 206, 59, 0.35);
}

.nav-account-wrap {
    position: relative;
}

.btn-account:hover,
.nav-account-wrap.open .btn-account {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(171, 206, 59, 0.08);
}

.nav-item>button {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--nav-muted);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    transition: color 0.18s, background 0.18s;
    white-space: nowrap;
}

.chev {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    transition: transform 0.22s;
    pointer-events: none;
    stroke: currentColor;
}

.nav-dd {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 230px;
    background: #0d1525;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

.site-header__icons-wrapper {
    gap: 8px;
}

.nav-account-wrap.open .nav-dd {
    display: block;
    animation: ddIn 0.16s ease;
}

.nav-item.open .nav-dd {
    display: block;
    animation: ddIn 0.16s ease;
}

.nav-account-wrap .nav-dd {
    min-width: 180px;
    left: 50%;
    transform: translateX(-50%);
}

.nav-dd a {
    display: block;
    padding: 9px 13px;
    border-radius: 5px;
    font-size: 0.8rem;
    color: rgba(245, 243, 238, 0.65);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.14s, color 0.14s;
}

.nav-dd a:hover {
    background: rgba(171, 206, 59, 0.1);
    color: var(--accent);
}

.nav-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(245, 243, 238, 0.65);
    text-decoration: none;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
    position: relative;
    flex-shrink: 0;
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

.site-header__icons-wrapper {
    width: auto;
}

/* ── search bar ── */
.nav-search-wrap {
    flex: 1;
    max-width: 360px;
    position: relative;
    display: flex;
    align-items: center;
}

.nav-search-wrap svg {
    position: absolute;
    left: 13px;
    pointer-events: none;
    color: #9aafbf;
}

.nav-search-wrap input {
    width: 100%;
    padding: 9px 14px 9px 40px;
    border: 1.5px solid var(--nav-border);
    border-radius: 50px;
    outline: none;
    font-family: var(--fb);
    font-size: 0.845rem;
    color: var(--nav-text);
    background: rgba(255, 255, 255, 0.07);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.nav-search-wrap input::placeholder {
    color: rgba(245, 243, 238, 0.35);
}

.nav-search-wrap input:focus {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(171, 206, 59, 0.1);
}


/* ══ HERO — CINEMATIC SPLIT SLIDESHOW ══ */
.hero {
    height: 720px;
    position: relative;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #030609;
}

/* Left panel — text content */
.hero-left {
    position: relative;
    z-index: 4;
    width: 50%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--nh) + 20px) 72px 60px 80px;
    background: linear-gradient(105deg, rgba(3, 6, 9, 0.92) 0%, rgba(4, 8, 16, 0.75) 55%, transparent 100%);
}

/* Right panel — rotating visuals */
.hero-right {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.hero-right::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(90deg,
            rgba(3, 6, 9, 1.0) 0%,
            rgba(3, 6, 9, 0.95) 30%,
            rgba(3, 6, 9, 0.6) 44%,
            rgba(3, 6, 9, 0.15) 58%,
            transparent 72%);
    pointer-events: none;
}

/* Slide panels inside right */
.h-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.4s ease;
}

.h-slide.active {
    opacity: 1;
}

/* Each slide is a gradient illustration */
.h-slide-1 {
    background:
        radial-gradient(ellipse 70% 70% at 60% 40%, rgba(171, 206, 59, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(0, 100, 200, 0.12) 0%, transparent 50%),
        linear-gradient(145deg, #030a14 0%, #060f1e 50%, #030a12 100%);
}

.h-slide-1::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-conic-gradient(rgba(171, 206, 59, 0.04) 0deg 6deg, transparent 6deg 12deg);
    mask-image: radial-gradient(ellipse 80% 80% at 60% 40%, black 20%, transparent 80%);
}

/* Big theta-chamber orb visualization */
.h-slide-1::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 420px;
    height: 420px;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(171, 206, 59, 0.22),
        0 0 0 40px rgba(171, 206, 59, 0.05),
        0 0 0 80px rgba(171, 206, 59, 0.03),
        0 0 0 130px rgba(171, 206, 59, 0.015),
        0 0 80px 20px rgba(171, 206, 59, 0.15);
    animation: orbPulse 5s ease-in-out infinite alternate;
}

@keyframes orbPulse {
    from {
        transform: translate(-50%, -50%) scale(0.95)
    }

    to {
        transform: translate(-50%, -50%) scale(1.05)
    }
}

.h-slide-2 {
    background: linear-gradient(150deg, #030a0a 0%, #050f10 50%, #030a08 100%);
}

.h-slide-2::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 49.7%, rgba(171, 206, 59, 0.07) 50%, transparent 50.3%),
        linear-gradient(transparent 49.7%, rgba(171, 206, 59, 0.05) 50%, transparent 50.3%);
    background-size: 44px 44px;
}

.h-slide-2::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -46%);
    width: 380px;
    height: 200px;
    border: 1px solid rgba(171, 206, 59, 0.14);
    border-radius: 20px;
    box-shadow:
        inset 0 0 60px rgba(171, 206, 59, 0.08),
        0 0 60px 15px rgba(171, 206, 59, 0.12),
        0 0 120px 30px rgba(0, 60, 255, 0.06);
    animation: vibexPulse 4s ease-in-out infinite alternate;
}

@keyframes vibexPulse {
    from {
        box-shadow: inset 0 0 40px rgba(171, 206, 59, 0.06), 0 0 40px 10px rgba(171, 206, 59, 0.1);
    }

    to {
        box-shadow: inset 0 0 80px rgba(171, 206, 59, 0.12), 0 0 80px 25px rgba(171, 206, 59, 0.18);
    }
}

.h-slide-3 {
    background: linear-gradient(150deg, #0e0318 0%, #160420 50%, #090215 100%);
}

.h-slide-3::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(255, 0, 80, 0.08) 0%, rgba(255, 100, 0, 0.07) 17%,
            rgba(255, 210, 0, 0.07) 34%, rgba(0, 255, 100, 0.09) 50%,
            rgba(0, 130, 255, 0.09) 67%, rgba(130, 0, 255, 0.09) 84%,
            rgba(255, 0, 80, 0.08) 100%);
    filter: blur(40px);
}

.h-slide-3::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 500px;
    border: 1px solid rgba(200, 100, 255, 0.1);
    border-radius: 160px;
    box-shadow:
        0 0 40px 10px rgba(200, 50, 255, 0.1),
        0 0 80px 20px rgba(0, 150, 255, 0.08),
        inset 0 0 60px rgba(150, 0, 255, 0.06);
}

.h-slide-4 {
    background: linear-gradient(150deg, #030f15 0%, #041520 50%, #030e14 100%);
}

.h-slide-4::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 55% 50%, transparent 25%, rgba(171, 206, 59, 0.055) 26%, transparent 27%),
        radial-gradient(circle at 55% 50%, transparent 42%, rgba(171, 206, 59, 0.04) 43%, transparent 44%),
        radial-gradient(circle at 55% 50%, transparent 60%, rgba(171, 206, 59, 0.03) 61%, transparent 62%),
        radial-gradient(circle at 55% 50%, transparent 78%, rgba(171, 206, 59, 0.02) 79%, transparent 80%);
}

.h-slide-4::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 12px rgba(171, 206, 59, 0.09), 0 0 0 28px rgba(171, 206, 59, 0.05), 0 0 60px 12px rgba(171, 206, 59, 0.25);
}

/* Real photo background in hero slides */
.h-slide-img,
.h-slide-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.92;
    border: none;
    transition: opacity 1.4s ease, transform 8s ease;
    transform: scale(1.04);
}

.h-slide.active .h-slide-img {
    opacity: 0.92;
    transform: scale(1.0);
}

.h-slide-video {
    position: absolute;
    top: 0;
    right: 0;
    width: 62%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 1;
    opacity: 0.92;
}

.h-slide-label {
    position: relative;
    z-index: 10;
}

/* Floating right-side label card */
.h-slide-label {
    position: absolute;
    bottom: 80px;
    right: 40px;
    z-index: 10;
    background: rgba(5, 10, 18, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(171, 206, 59, 0.22);
    border-radius: 12px;
    padding: 20px 26px;
    min-width: 230px;
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.8s ease 0.5s, transform 0.8s ease 0.5s;
}

.h-slide.active .h-slide-label {
    opacity: 1;
    transform: translateX(0);
}

.h-slide-label-tag {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
    display: block;
}

.h-slide-label-name {
    font-family: var(--fd);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--white);
    line-height: 1.2;
    margin-bottom: 4px;
}

.h-slide-label-sub {
    font-size: 0.73rem;
    color: rgba(245, 243, 238, 0.5);
}

/* Slide counter */
.hero-counter {
    position: absolute;
    bottom: 40px;
    left: 80px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 14px;
}

.hero-counter-num {
    font-family: var(--fd);
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(245, 243, 238, 0.4);
    letter-spacing: 0.06em;
}

.hero-counter-num span {
    color: var(--accent);
    font-size: 1rem;
}

.hero-progress {
    width: 140px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1px;
    overflow: hidden;
}

.hero-progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 1px;
    width: 25%;
    transition: width 6s linear;
}

/* Left panel — text animation */
.hero-slide-txt {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.hero-slide-txt.active {
    background-color: transparent;
}

.hero-slide-txt.active:after {
    display: none;
}

.hero-slide-txt.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.hero-txt-wrap {
    position: relative;
    height: 340px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    width: auto;
    max-width: max-content;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid rgba(171, 206, 59, 0.32);
    padding: 5px 13px;
    border-radius: 100px;
    margin-bottom: 26px;
    white-space: nowrap;
}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: blink 2s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.3
    }
}

.hero h1,
.hero .hero-slide-h {
    font-family: var(--fd);
    font-weight: 700;
    font-size: clamp(2.4rem, 4vw, 4.2rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin-bottom: 22px;
    text-transform: unset;
}

.hero h1 i,
.hero .hero-slide-h i {
    font-style: normal;
    color: var(--accent);
}

.rotag {
    color: #fff;
    font-size: 18px;
    margin-top: 5px;
}

.fade-word {
    display: inline-block;
    color: var(--accent);
    opacity: 1;
    transition: opacity 0.8s ease-in-out;
}

.fade-out {
    opacity: 0;
}

.hero-sub {
    font-size: clamp(0.92rem, 1.3vw, 1.02rem);
    font-weight: 400;
    color: rgba(245, 243, 238, 0.62);
    line-height: 1.78;
    max-width: 440px;
    margin-bottom: 28px;
}

.hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}

.btn-p {
    font-family: var(--fb);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--accent);
    color: var(--black);
    padding: 14px 36px;
    border-radius: 3px;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s, transform 0.2s;
}

.btn-p:hover,
.btn-p:not([disabled]):hover,
.btn-p:focus {
    background: var(--accent2);
    transform: translateY(-2px);
    color: var(--black);
}

.htt-auto {
    text-transform: none;
}

.btn-g {
    font-family: var(--fb);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 14px 36px;
    border-radius: 3px;
    text-decoration: none;
    text-align: center;
    transition: border-color 0.2s, color 0.2s;
}

.btn-g:hover,
.btn-g:not([disabled]):hover,
.btn-g:focus {
    border-color: var(--accent);
    color: var(--accent);
}

.hero-scroll-cue {
    position: absolute;
    bottom: 34px;
    right: 32%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dim);
    z-index: 10;
}

.scroll-line {
    width: 1px;
    height: 44px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    animation: drip 2.4s ease infinite;
}

@keyframes drip {
    0% {
        transform: scaleY(0);
        transform-origin: top;
        opacity: 1;
    }

    60% {
        transform: scaleY(1);
        transform-origin: top;
        opacity: 1;
    }

    100% {
        transform: scaleY(1);
        transform-origin: top;
        opacity: 0;
    }
}

@keyframes fup {
    from {
        opacity: 0;
        transform: translateY(26px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-left>.hero-badge,
.hero-left>.hero-btns {
    animation: fup 0.8s ease both;
}

/* Dot nav on right */
.hero-dots {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hero-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(171, 206, 59, 0.3);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.hero-dot.active {
    background: var(--accent);
    transform: scale(1.25);
}

.hero-dot.active:after,
.via-dots .via-dot.active:after,
.ep-fbtn.active:after {
    display: none;
}

/* ══ TICKER ══ */
.ticker-bar {
    background: var(--accent);
    padding: 11px 0;
    overflow: hidden;
}

.ticker-t {
    display: flex;
    white-space: nowrap;
    animation: tick 34s linear infinite;
}

.ticker-t span {
    font-family: var(--fd);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--black);
    padding: 0 34px;
}

.t-dot {
    opacity: 0.3;
    padding: 0 6px !important;
}

@keyframes tick {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

/* ══ SHARED ══ */
section {
    position: relative;
}

.slabel {
    display: block;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 13px;
}

.stitle {
    font-family: var(--fd);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.8vw, 3.5rem);
    line-height: 1.03;
    letter-spacing: -0.02em;
    text-transform: none;
}

.ssub {
    font-size: 0.93rem;
    font-weight: 400;
    color: #4a6278;
    line-height: 1.76;
    margin-top: 13px;
    max-width: 490px;
}

.lnk {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    transition: gap 0.18s;
}

.lnk::after {
    content: '→';
}

.lnk:hover {
    gap: 13px;
}

/* ══ EQUIPMENT ══ */
.eq-sec {
    padding: 108px 0 0;
    background: #f5f9fc;
    border-bottom: 2px solid #dce8f0;
}

.eq-hd {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 70px;
    margin-bottom: 52px;
}

.eq-hd-tw {
    max-width: 540px;
}

.eq-sec .stitle {
    color: #0b1a2e;
}

.eq-sec .slabel {
    color: var(--accent);
}

.eq-sec .ssub {
    color: #4a6278;
}

.eq-main {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 0 72px 20px;
    max-width: 1600px;
    margin: 0 auto;
}

.eq-card {
    position: relative;
    height: 520px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 0.5s 0.14s, transform 0.5s 0.14s;
    font-family: var(--fb);
}

.eq-card:hover .vis {
    transform: scale(1.04);
}

.vis {
    position: absolute;
    inset: 0;
    transition: transform 0.68s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    z-index: 1;
}

/* ══ HOVER BENEFITS OVERLAY ══ */
.eq-benefits {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px 40px 36px;
    background: linear-gradient(180deg,
            rgba(3, 5, 12, 0.10) 0%,
            rgba(3, 5, 12, 0.30) 22%,
            rgba(3, 5, 12, 0.85) 52%,
            rgba(3, 5, 12, 0.98) 72%,
            rgba(3, 5, 12, 1.00) 100%);
    backdrop-filter: blur(0px);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.32s ease, transform 0.32s ease;
    pointer-events: none;
}

.ep-light .ben-list {
    display: flex !important;
}

.eq-card:hover .eq-benefits,
.eq-sm:hover .eq-benefits {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* keep normal info hidden on hover */
.eq-card:hover .eq-overlay,
.eq-card:hover .eq-info,
.eq-sm:hover .eq-overlay,
.eq-sm:hover .eq-info,
.hc:hover .ben-tag {
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
    display: block;
}

.ben-name {
    font-family: var(--fd);
    font-weight: 800;
    font-size: clamp(1.3rem, 2vw, 1.9rem);
    line-height: 1.1;
    margin-bottom: 20px;
    color: var(--white);
}

.ben-tag {
    color: var(--white);
}

.ben-desc {
    font-size: 0.76rem;
    color: rgba(245, 243, 238, 0.55);
    line-height: 1.5;
    margin-bottom: 14px;
    font-weight: 300;
}

.ben-desc strong {
    color: rgba(245, 243, 238, 0.75);
    font-weight: 600;
}

.eq-card:nth-child(3):not(.ep-dark .eq-card:nth-child(3)) .ben-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 40px;
}

.ben-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 24px;
}

.ben-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 0.82rem;
    color: rgba(245, 243, 238, 0.8);
    line-height: 1.5;
}

.ben-check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(171, 206, 59, 0.15);
    border: 1px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.ben-check svg {
    width: 8px;
    height: 8px;
}

.ben-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--black);
    background: var(--accent);
    padding: 10px 22px;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.2s;
    width: fit-content;
}

.ben-cta:hover {
    background: var(--accent2);
}

.ben-cta::after {
    content: '→';
}

/* smaller cards — tighter layout */
.eq-sm .eq-benefits {
    padding: 22px 24px;
}

.eq-sm .ben-name {
    font-size: 1rem;
    margin-bottom: 14px;
}

.eq-sm .ben-list {
    gap: 8px;
    margin-bottom: 16px;
}

.eq-sm .ben-list li {
    font-size: 0.76rem;
}

.eq-sm .ben-cta {
    padding: 8px 16px;
    font-size: 0.68rem;
}

/* ─ card visual CSS art ─ */
.v-theta {
    background: linear-gradient(145deg, #04081b, #080f2c, #04081a);
}

.v-theta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-conic-gradient(rgba(171, 206, 59, 0.055) 0deg 9deg, transparent 9deg 18deg);
}

.v-theta::after {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(171, 206, 59, 0.18),
        0 0 0 28px rgba(171, 206, 59, 0.05),
        0 0 0 56px rgba(171, 206, 59, 0.03),
        0 0 0 90px rgba(171, 206, 59, 0.015),
        0 0 60px 12px rgba(171, 206, 59, 0.12);
}

.v-vibex {
    background: linear-gradient(160deg, #040e08, #061910, #040c08);
}

.v-vibex::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 49.6%, rgba(171, 206, 59, 0.06) 50%, transparent 50.4%),
        linear-gradient(transparent 49.6%, rgba(171, 206, 59, 0.06) 50%, transparent 50.4%);
    background-size: 38px 38px;
}

.v-vibex::after {
    content: '';
    position: absolute;
    bottom: 22%;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    box-shadow: 0 0 28px 5px rgba(171, 206, 59, 0.28);
}

.v-led {
    background: linear-gradient(150deg, #110420, #190530, #0d0418);
}

.v-led::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(-45deg, transparent, transparent 16px,
            rgba(170, 40, 255, 0.03) 16px, rgba(170, 40, 255, 0.03) 17px);
}

.v-led::after {
    content: '';
    position: absolute;
    top: 28%;
    left: 8%;
    right: 8%;
    bottom: 28%;
    background: linear-gradient(90deg,
            rgba(255, 0, 90, 0.13), rgba(255, 110, 0, 0.1),
            rgba(255, 215, 0, 0.1), rgba(0, 255, 110, 0.13),
            rgba(0, 140, 255, 0.13), rgba(140, 0, 255, 0.13));
    filter: blur(28px);
    border-radius: 50%;
}

.v-scan {
    background: linear-gradient(155deg, #040f1a, #071520);
}

.v-scan::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 50% 50%, transparent 29%, rgba(171, 206, 59, 0.045) 30%, transparent 31%),
        radial-gradient(circle at 50% 50%, transparent 48%, rgba(171, 206, 59, 0.04) 49%, transparent 50%),
        radial-gradient(circle at 50% 50%, transparent 68%, rgba(171, 206, 59, 0.028) 69%, transparent 70%);
}

.v-scan::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow:
        0 0 0 10px rgba(171, 206, 59, 0.07),
        0 0 0 22px rgba(171, 206, 59, 0.045),
        0 0 0 38px rgba(171, 206, 59, 0.025),
        0 0 50px 10px rgba(171, 206, 59, 0.18);
}

.v-acoustic {
    background: linear-gradient(150deg, #100a03, #1a1204);
}

.v-acoustic::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse 3px 75% at 28% 50%, rgba(250, 190, 0, 0.11), transparent),
        radial-gradient(ellipse 3px 55% at 38% 50%, rgba(250, 190, 0, 0.08), transparent),
        radial-gradient(ellipse 3px 88% at 50% 50%, rgba(250, 190, 0, 0.13), transparent),
        radial-gradient(ellipse 3px 62% at 62% 50%, rgba(250, 190, 0, 0.08), transparent),
        radial-gradient(ellipse 3px 72% at 72% 50%, rgba(250, 190, 0, 0.11), transparent);
}

.v-h2o {
    background: linear-gradient(155deg, #031520, #042028);
}

.v-h2o::before {
    content: '';
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 180px;
    border: 1px solid rgba(0, 160, 255, 0.14);
    border-radius: 50px;
}

.v-h2o::after {
    content: '';
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    width: 66px;
    height: 136px;
    background: linear-gradient(to bottom, rgba(0, 180, 255, 0.13), rgba(0, 220, 255, 0.04));
    border-radius: 33px;
    box-shadow: 0 0 40px 12px rgba(0, 180, 255, 0.09);
}

.v-ozone {
    background: linear-gradient(150deg, #130808, #1e0c0c);
}

.v-ozone::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 58% 38% at 50% 58%, rgba(255, 95, 25, 0.1), transparent 70%),
        repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(255, 95, 25, 0.022) 28px, rgba(255, 95, 25, 0.022) 29px);
}

.v-press {
    background: linear-gradient(155deg, #090918, #111228);
}

.v-press::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-radial-gradient(ellipse 58% 58% at 50% 50%,
            transparent 0, transparent 27%,
            rgba(100, 100, 255, 0.04) 28%, transparent 30%);
}

/* card small / wide */
.eq-wide {
    grid-column: span 2;
    height: 430px;
}

.eq-wide .eq-card {
    height: 430px;
    grid-column: span 2;
}

/* .eq-card:nth-child(3) {
  grid-column: span 2;
  height: 420px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  position: relative;
  cursor: pointer;
} */

/* Row 1 → 2 columns */
.eq-main> :nth-child(1),
.eq-main> :nth-child(2) {
    grid-column: span 2;
}

/* Row 2 → 1 column */
.eq-main> :nth-child(3) {
    grid-column: span 4;
}

.eq-main> :nth-child(n+4):nth-child(-n+7) {
    grid-column: span 1;
    height: 280px;
}

.eq-sm-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 0;
    padding: 20px 72px 72px;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

.eq-sm {
    position: relative;
    height: 280px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

.eq-sm:hover .vis {
    transform: scale(1.05);
}

.eq-sm .eq-info {
    padding: 20px 22px;
}

.eq-main> :nth-child(n+4):nth-child(-n+7) .eq-name {
    font-size: 1.08rem;
}

.eq-main> :nth-child(n+4):nth-child(-n+7) .eq-benefits {
    padding: 22px 24px;
}

.eq-main> :nth-child(n+4):nth-child(-n+7) .eq-info {
    padding: 20px 22px;
}

.eq-main> :nth-child(n+4):nth-child(-n+7) .eq-name {
    font-size: 1.08rem;
}

.eq-main> :nth-child(n+4):nth-child(-n+7) .eq-desc {
    font-size: 0.74rem;
    margin-bottom: 10px;
}

.eq-main> :nth-child(n+4):nth-child(-n+7) .ben-name {
    font-size: 1rem;
    margin-bottom: 14px;
}

.eq-main> :nth-child(n+4):nth-child(-n+7) .ben-desc {
    font-size: 0.74rem;
    color: rgba(245, 243, 238, 0.55);
    line-height: 1.5;
    margin-bottom: 10px;
    font-weight: 300;
}

.eq-main> :nth-child(n+4):nth-child(-n+7) .ben-list li {
    font-size: 0.76rem;
}

.eq-main> :nth-child(n+4):nth-child(-n+7) .ben-cta {
    padding: 8px 16px;
    font-size: 0.68rem;
}

.eq-main> :nth-child(n+4):nth-child(-n+7) .ben-list {
    gap: 8px;
    margin-bottom: 16px;
}

.eq-sm .eq-desc {
    font-size: 0.74rem;
    margin-bottom: 10px;
}

.eq-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(4, 5, 8, 0.92) 0%,
            rgba(4, 5, 8, 0.55) 32%,
            rgba(4, 5, 8, 0.08) 62%,
            transparent 100%);
    z-index: 2;
    transition: opacity 0.3s ease;
}

.eq-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 36px;
}

.eq-tag {
    display: block;
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 7px;
}

.eq-name {
    font-family: var(--fd);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.3vw, 2.1rem);
    line-height: 1.1;
    margin-bottom: 9px;
    color: var(--white);
}

.eq-desc {
    font-size: 0.82rem;
    color: rgba(245, 243, 238, 0.6);
    font-weight: 300;
    line-height: 1.62;
    max-width: 370px;
    margin-bottom: 18px;
}

.eq-card-wide .eq-name {
    font-size: clamp(1.9rem, 3.2vw, 2.9rem);
}

/* ══ STATS ══ */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: linear-gradient(135deg, #e8f7f3 0%, #edf4f9 50%, #e8f5f2 100%);
    border-top: 1.5px solid #c8e8df;
    border-bottom: 1.5px solid #c8e8df;
}

.stat-c {
    padding: 50px 36px;
    text-align: center;
    border-right: 1px solid #d4ede6;
}

.stat-c:last-child {
    border-right: none;
}

.stat-n {
    font-family: var(--fd);
    font-weight: 700;
    font-size: clamp(2.3rem, 3.8vw, 3.7rem);
    color: var(--accent);
    line-height: 1;
    margin-bottom: 7px;
}

.stat-l {
    font-size: 0.76rem;
    color: #3a6050;
    letter-spacing: 0.04em;
    font-weight: 500;
}

/* ══ SUPPLEMENTS ══ */
.supp-sec {
    padding: 115px 70px;
    background: #f7fafb;
    border-top: 2px solid #dde8f2;
    border-bottom: 2px solid #dde8f2;
}

.supp-in {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 76px;
    align-items: center;
}

.supp-vis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    height: 490px;
}

.supp-tile {
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px;
    transition: transform 0.28s;
}

/* Supp tile image layers */
.supp-tile-img,
.supp-tile-hover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.supp-tile-img {
    opacity: 0.55;
    filter: saturate(0.75) brightness(0.8);
}

.supp-tile-hover-img {
    opacity: 0;
    transform: scale(1.06);
    filter: brightness(0.28) saturate(0.5);
    z-index: 1;
}

.supp-tile::before,
.supp-tile::after,
.st-label,
.st-sub,
.st-benefits {
    position: relative;
    z-index: 2;
}

.supp-tile:hover .supp-tile-img {
    opacity: 0;
    transform: scale(1.03);
}

.supp-tile:hover .supp-tile-hover-img {
    opacity: 1;
    transform: scale(1);
}

.supp-tile:hover {
    transform: translateY(-4px);
}

.supp-tile:nth-child(1) {
    grid-row: span 2;
    background: linear-gradient(168deg, #051a10, #0a2e18);
}

.supp-tile:nth-child(1)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 18px,
            rgba(171, 206, 59, 0.028) 18px, rgba(171, 206, 59, 0.028) 19px);
}

.supp-tile:nth-child(2) {
    background: linear-gradient(155deg, #141405, #201e06);
}

.supp-tile:nth-child(2)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(200, 195, 0, 0.08), transparent 60%);
}

.supp-tile:nth-child(3) {
    background: linear-gradient(155deg, #040918, #060f1e);
}

.supp-tile:nth-child(3)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 80%, rgba(50, 140, 255, 0.08), transparent 60%);
}

.supp-tile::after {
    content: '';
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.38;
}

.st-label {
    font-family: var(--fd);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 3px;
    position: relative;
    z-index: 1;
    transition: opacity 0.22s;
}

.st-sub {
    font-size: 0.72rem;
    color: rgba(245, 243, 238, 0.48);
    position: relative;
    z-index: 1;
    transition: opacity 0.22s;
}

.supp-tile {
    cursor: pointer;
}

.supp-tile:hover .st-label,
.supp-tile:hover .st-sub {
    opacity: 0;
}

.supp-tile .st-benefits {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px 24px;
    background: rgba(3, 4, 8, 0.96);
    backdrop-filter: blur(6px);
    border-radius: 6px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.30s ease, transform 0.30s ease;
    pointer-events: none;
}

.supp-tile:hover .st-benefits {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.st-ben-tag {
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
    display: block;
}

.st-ben-name {
    font-family: var(--fd);
    font-weight: 800;
    font-size: 0.92rem;
    line-height: 1.15;
    margin-bottom: 10px;
}

.st-ben-how {
    font-size: 0.72rem;
    color: rgba(245, 243, 238, 0.55);
    line-height: 1.5;
    margin-bottom: 10px;
    font-weight: 300;
}

.st-ben-how strong {
    color: rgba(245, 243, 238, 0.75);
    font-weight: 600;
}

.st-ben-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 14px;
}

.st-ben-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.73rem;
    color: rgba(245, 243, 238, 0.80);
    line-height: 1.45;
}

.st-ben-check {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(171, 206, 59, 0.15);
    border: 1px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.st-ben-check svg {
    width: 7px;
    height: 7px;
}

.st-ben-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--black);
    background: var(--accent);
    padding: 7px 14px;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.2s;
    width: fit-content;
}

.st-ben-cta:hover {
    background: var(--accent2);
}

.st-ben-cta::after {
    content: '→';
}

.supp-cnt .stitle {
    margin-bottom: 14px;
    color: #0b1a2e;
    max-width: 485px;
}

.supp-pts {
    list-style: none;
    margin: 26px 0 34px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.supp-pts li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font-size: 0.87rem;
    color: #4a6278;
    line-height: 1.58;
}

.supp-pts li::before {
    content: '';
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: 8px;
}

.supp-btns {
    display: flex;
    gap: 13px;
}

/* ══ TESTIMONIAL ══ */
.testi-sec {
    padding: 90px 70px;
    background: linear-gradient(135deg, #0a1a14 0%, #0d2018 50%, #091a12 100%);
    position: relative;
    overflow: hidden;
}

.testi-sec::before {
    content: '';
    position: absolute;
    top: -120px;
    left: -120px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(171, 206, 59, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.testi-sec::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(171, 206, 59, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.testi-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
}

.testi-slide {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: none;
}

.testi-slide.active {
    display: flex;
    background-color: transparent;
}

.testi-quote-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(171, 206, 59, 0.12);
    border: 1px solid rgba(171, 206, 59, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

.testi-quote-icon svg {
    color: var(--accent);
    width: 22px;
    height: 22px;
}

.testi-text {
    font-family: var(--fd);
    font-size: clamp(1.3rem, 2.4vw, 2rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.55;
    color: rgba(245, 243, 238, 0.92);
    margin-bottom: 36px;
    letter-spacing: -0.01em;
}

.testi-text em {
    font-style: normal;
    color: var(--accent);
}

.testi-divider {
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    margin-bottom: 24px;
}

.testi-author {
    display: flex;
    align-items: center;
    gap: 16px;
}

.testi-author {
    display: flex;
    align-items: center;
    gap: 20px;
}

.testi-clinic-logo {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(171, 206, 59, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    backdrop-filter: blur(6px);
}

.testi-clinic-logo svg {
    width: 52px;
    height: 52px;
}

.testi-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(171, 206, 59, 0.2), rgba(171, 206, 59, 0.08));
    border: 2px solid rgba(171, 206, 59, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fd);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--accent);
    flex-shrink: 0;
}

.testi-info {
    text-align: left;
}

.testi-name {
    font-family: var(--fd);
    font-weight: 700;
    font-size: 1rem;
    color: var(--white);
    margin-bottom: 2px;
}

.testi-clinic-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.06em;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.testi-role {
    font-size: 0.76rem;
    color: rgba(245, 243, 238, 0.5);
    letter-spacing: 0.04em;
}

/* Dots nav */
.testi-dots {
    display: flex;
    gap: 8px;
    margin-top: 40px;
}

.testi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(171, 206, 59, 0.2);
    border: 1px solid rgba(171, 206, 59, 0.3);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.testi-dot.active {
    background: var(--accent);
    transform: scale(1.2);
}

.testi-dot.active:after,
.testi-slide.active:after {
    display: none;
}

.testi-inner {
    transition: opacity 0.4s ease;
}

.testi-inner.fading {
    opacity: 0;
}



/* ══ EQUIPMENT ══ */
.eq-sec {
    padding: 108px 0 0;
    background: #f5f9fc;
    border-bottom: 2px solid #dce8f0;
}

.eq-hd {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 70px;
    margin-bottom: 52px;
}

.eq-sec .stitle {
    color: #0b1a2e;
}

.eq-sec .slabel {
    color: var(--accent);
}

.eq-sec .ssub {
    color: #4a6278;
}

/* .eq-main { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0 72px 20px; max-width: 1600px; margin: 0 auto; } */
.eq-card {
    position: relative;
    height: 520px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.eq-card:hover .vis {
    transform: scale(1.04);
}

.vis {
    position: absolute;
    inset: 0;
    transition: transform 0.68s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    z-index: 1;
}

/* ══ HOVER BENEFITS OVERLAY ══ */
.eq-benefits {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px 40px 36px;
    background: linear-gradient(180deg,
            rgba(3, 5, 12, 0.10) 0%,
            rgba(3, 5, 12, 0.30) 22%,
            rgba(3, 5, 12, 0.85) 52%,
            rgba(3, 5, 12, 0.98) 72%,
            rgba(3, 5, 12, 1.00) 100%);
    backdrop-filter: blur(0px);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.32s ease, transform 0.32s ease;
    pointer-events: none;
}

.eq-card:hover .eq-benefits,
.eq-sm:hover .eq-benefits {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* keep normal info hidden on hover */
.eq-card:hover .eq-overlay,
.eq-card:hover .eq-info,
.eq-sm:hover .eq-overlay,
.eq-sm:hover .eq-info {
    opacity: 0;
}

.ben-tag {
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    /* margin-bottom: 10px; */
    display: block;
}

.ben-name {
    font-family: var(--fd);
    font-weight: 800;
    font-size: clamp(1.3rem, 2vw, 1.9rem);
    line-height: 1.1;
    margin-bottom: 20px;
}

.ben-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 24px;
}

.ben-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 0.82rem;
    color: rgba(245, 243, 238, 0.8);
    line-height: 1.5;
}

.ben-check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(171, 206, 59, 0.15);
    border: 1px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.ben-check svg {
    width: 8px;
    height: 8px;
}

.ben-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--black);
    background: var(--accent);
    padding: 10px 22px;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.2s;
    width: fit-content;
}

.ben-cta:hover {
    background: var(--accent2);
}

.ben-cta::after {
    content: '→';
}

/* smaller cards — tighter layout */
.eq-sm .eq-benefits {
    padding: 22px 24px;
}

.eq-sm .ben-name {
    font-size: 1rem;
    margin-bottom: 14px;
}

.eq-sm .ben-list {
    gap: 8px;
    margin-bottom: 16px;
}

.eq-sm .ben-list li {
    font-size: 0.76rem;
}

.eq-sm .ben-cta {
    padding: 8px 16px;
    font-size: 0.68rem;
}

/* ─ card visual CSS art ─ */
.v-theta {
    background: linear-gradient(145deg, #04081b, #080f2c, #04081a);
}

.v-theta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-conic-gradient(rgba(171, 206, 59, 0.055) 0deg 9deg, transparent 9deg 18deg);
}

.v-theta::after {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(171, 206, 59, 0.18),
        0 0 0 28px rgba(171, 206, 59, 0.05),
        0 0 0 56px rgba(171, 206, 59, 0.03),
        0 0 0 90px rgba(171, 206, 59, 0.015),
        0 0 60px 12px rgba(171, 206, 59, 0.12);
}

.v-vibex {
    background: linear-gradient(160deg, #040e08, #061910, #040c08);
}

.v-vibex::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 49.6%, rgba(171, 206, 59, 0.06) 50%, transparent 50.4%),
        linear-gradient(transparent 49.6%, rgba(171, 206, 59, 0.06) 50%, transparent 50.4%);
    background-size: 38px 38px;
}

.v-vibex::after {
    content: '';
    position: absolute;
    bottom: 22%;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    box-shadow: 0 0 28px 5px rgba(171, 206, 59, 0.28);
}

.v-led {
    background: linear-gradient(150deg, #110420, #190530, #0d0418);
}

.v-led::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(-45deg, transparent, transparent 16px,
            rgba(170, 40, 255, 0.03) 16px, rgba(170, 40, 255, 0.03) 17px);
}

.v-led::after {
    content: '';
    position: absolute;
    top: 28%;
    left: 8%;
    right: 8%;
    bottom: 28%;
    background: linear-gradient(90deg,
            rgba(255, 0, 90, 0.13), rgba(255, 110, 0, 0.1),
            rgba(255, 215, 0, 0.1), rgba(0, 255, 110, 0.13),
            rgba(0, 140, 255, 0.13), rgba(140, 0, 255, 0.13));
    filter: blur(28px);
    border-radius: 50%;
}

.v-scan {
    background: linear-gradient(155deg, #040f1a, #071520);
}

.v-scan::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 50% 50%, transparent 29%, rgba(171, 206, 59, 0.045) 30%, transparent 31%),
        radial-gradient(circle at 50% 50%, transparent 48%, rgba(171, 206, 59, 0.04) 49%, transparent 50%),
        radial-gradient(circle at 50% 50%, transparent 68%, rgba(171, 206, 59, 0.028) 69%, transparent 70%);
}

.v-scan::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow:
        0 0 0 10px rgba(171, 206, 59, 0.07),
        0 0 0 22px rgba(171, 206, 59, 0.045),
        0 0 0 38px rgba(171, 206, 59, 0.025),
        0 0 50px 10px rgba(171, 206, 59, 0.18);
}

.v-acoustic {
    background: linear-gradient(150deg, #100a03, #1a1204);
}

.v-acoustic::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse 3px 75% at 28% 50%, rgba(250, 190, 0, 0.11), transparent),
        radial-gradient(ellipse 3px 55% at 38% 50%, rgba(250, 190, 0, 0.08), transparent),
        radial-gradient(ellipse 3px 88% at 50% 50%, rgba(250, 190, 0, 0.13), transparent),
        radial-gradient(ellipse 3px 62% at 62% 50%, rgba(250, 190, 0, 0.08), transparent),
        radial-gradient(ellipse 3px 72% at 72% 50%, rgba(250, 190, 0, 0.11), transparent);
}

.v-h2o {
    background: linear-gradient(155deg, #031520, #042028);
}

.v-h2o::before {
    content: '';
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 180px;
    border: 1px solid rgba(0, 160, 255, 0.14);
    border-radius: 50px;
}

.v-h2o::after {
    content: '';
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    width: 66px;
    height: 136px;
    background: linear-gradient(to bottom, rgba(0, 180, 255, 0.13), rgba(0, 220, 255, 0.04));
    border-radius: 33px;
    box-shadow: 0 0 40px 12px rgba(0, 180, 255, 0.09);
}

.v-ozone {
    background: linear-gradient(150deg, #130808, #1e0c0c);
}

.v-ozone::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 58% 38% at 50% 58%, rgba(255, 95, 25, 0.1), transparent 70%),
        repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(255, 95, 25, 0.022) 28px, rgba(255, 95, 25, 0.022) 29px);
}

.v-press {
    background: linear-gradient(155deg, #090918, #111228);
}

.v-press::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-radial-gradient(ellipse 58% 58% at 50% 50%,
            transparent 0, transparent 27%,
            rgba(100, 100, 255, 0.04) 28%, transparent 30%);
}

/* card small / wide */
.eq-wide {
    grid-column: span 2;
    height: 430px;
}

.eq-wide .eq-card {
    height: 430px;
    grid-column: span 2;
}

.eq-card-wide {
    grid-column: span 2;
    height: 420px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.eq-sm-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 0;
    padding: 20px 72px 72px;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

.eq-sm {
    position: relative;
    height: 280px;
    overflow: hidden;
    cursor: pointer;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

.eq-sm:hover .vis {
    transform: scale(1.05);
}

.eq-sm .eq-info {
    padding: 20px 22px;
}

.eq-sm .eq-name {
    font-size: 1.08rem;
}

.eq-sm .eq-desc {
    font-size: 0.74rem;
    margin-bottom: 10px;
}

.eq-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(4, 5, 8, 0.92) 0%,
            rgba(4, 5, 8, 0.55) 32%,
            rgba(4, 5, 8, 0.08) 62%,
            transparent 100%);
    z-index: 2;
    transition: opacity 0.3s ease;
}

.eq-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 36px;
}

.eq-tag {
    display: block;
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 7px;
}

.eq-name {
    font-family: var(--fd);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.3vw, 2.1rem);
    line-height: 1.1;
    margin-bottom: 9px;
}

.eq-desc {
    font-size: 0.82rem;
    color: rgba(245, 243, 238, 0.6);
    font-weight: 300;
    line-height: 1.62;
    max-width: 370px;
    margin-bottom: 18px;
}

.eq-card-wide .eq-name {
    font-size: clamp(1.9rem, 3.2vw, 2.9rem);
}

/* ══ STATS ══ */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: linear-gradient(135deg, #e8f7f3 0%, #edf4f9 50%, #e8f5f2 100%);
    border-top: 1.5px solid #c8e8df;
    border-bottom: 1.5px solid #c8e8df;
}

.stat-c {
    padding: 50px 36px;
    text-align: center;
    border-right: 1px solid #d4ede6;
}

.stat-c:last-child {
    border-right: none;
}

.stat-n {
    font-family: var(--fd);
    font-weight: 700;
    font-size: clamp(2.3rem, 3.8vw, 3.7rem);
    color: var(--accent);
    line-height: 1;
    margin-bottom: 7px;
}

.stat-l {
    font-size: 0.76rem;
    color: #3a6050;
    letter-spacing: 0.04em;
    font-weight: 500;
}

/* ══ SUPPLEMENTS ══ */
.supp-sec {
    padding: 115px 70px;
    background: #f7fafb;
    border-top: 2px solid #dde8f2;
    border-bottom: 2px solid #dde8f2;
}

.supp-in {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 76px;
    align-items: center;
}

.supp-vis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    height: 490px;
}

.supp-tile {
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px;
    transition: transform 0.28s;
}

/* Supp tile image layers */
.supp-tile-img,
.supp-tile-hover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.supp-tile-img {
    opacity: 0.55;
    filter: saturate(0.75) brightness(0.8);
}

.supp-tile-hover-img {
    opacity: 0;
    transform: scale(1.06);
    filter: brightness(0.28) saturate(0.5);
    z-index: 1;
}

.supp-tile::before,
.supp-tile::after,
.st-label,
.st-sub,
.st-benefits {
    position: relative;
    z-index: 2;
}

.supp-tile:hover .supp-tile-img {
    opacity: 0;
    transform: scale(1.03);
}

.supp-tile:hover .supp-tile-hover-img {
    opacity: 1;
    transform: scale(1);
}

.supp-tile:hover {
    transform: translateY(-4px);
}

.supp-tile:nth-child(1) {
    grid-row: span 2;
    background: linear-gradient(168deg, #051a10, #0a2e18);
}

.supp-tile:nth-child(1)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 18px,
            rgba(171, 206, 59, 0.028) 18px, rgba(171, 206, 59, 0.028) 19px);
}

.supp-tile:nth-child(2) {
    background: linear-gradient(155deg, #141405, #201e06);
}

.supp-tile:nth-child(2)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(200, 195, 0, 0.08), transparent 60%);
}

.supp-tile:nth-child(3) {
    background: linear-gradient(155deg, #040918, #060f1e);
}

.supp-tile:nth-child(3)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 80%, rgba(50, 140, 255, 0.08), transparent 60%);
}

.supp-tile::after {
    content: '';
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.38;
}

.st-label {
    font-family: var(--fd);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 3px;
    position: relative;
    z-index: 1;
    transition: opacity 0.22s;
}

.st-sub {
    font-size: 0.72rem;
    color: rgba(245, 243, 238, 0.48);
    position: relative;
    z-index: 1;
    transition: opacity 0.22s;
}

.supp-tile {
    cursor: pointer;
}

.supp-tile:hover .st-label,
.supp-tile:hover .st-sub {
    opacity: 0;
}

.supp-tile .st-benefits {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px 24px;
    background: rgba(3, 4, 8, 0.96);
    backdrop-filter: blur(6px);
    border-radius: 6px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.30s ease, transform 0.30s ease;
    pointer-events: none;
}

.supp-tile:hover .st-benefits {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.st-ben-tag {
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
    display: block;
}

.st-ben-name {
    font-family: var(--fd);
    font-weight: 800;
    font-size: 0.92rem;
    line-height: 1.15;
    margin-bottom: 10px;
}

.st-ben-how {
    font-size: 0.72rem;
    color: rgba(245, 243, 238, 0.55);
    line-height: 1.5;
    margin-bottom: 10px;
    font-weight: 300;
}

.st-ben-how strong {
    color: rgba(245, 243, 238, 0.75);
    font-weight: 600;
}

.st-ben-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 14px;
}

.st-ben-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.73rem;
    color: rgba(245, 243, 238, 0.80);
    line-height: 1.45;
}

.st-ben-check {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(171, 206, 59, 0.15);
    border: 1px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.st-ben-check svg {
    width: 7px;
    height: 7px;
}

.st-ben-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--black);
    background: var(--accent);
    padding: 7px 14px;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.2s;
    width: fit-content;
}

.st-ben-cta:hover {
    background: var(--accent2);
}

.st-ben-cta::after {
    content: '→';
}

.supp-cnt .stitle {
    margin-bottom: 14px;
    color: #0b1a2e;
}

.supp-pts {
    list-style: none;
    margin: 26px 0 34px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.supp-pts li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font-size: 0.87rem;
    color: #4a6278;
    line-height: 1.58;
}

.supp-pts li::before {
    content: '';
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: 8px;
}

.supp-btns {
    display: flex;
    gap: 13px;
}

/* ══ TESTIMONIAL ══ */
.testi-sec {
    padding: 90px 70px;
    background: linear-gradient(135deg, #0a1a14 0%, #0d2018 50%, #091a12 100%);
    position: relative;
    overflow: hidden;
}

.testi-sec::before {
    content: '';
    position: absolute;
    top: -120px;
    left: -120px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(171, 206, 59, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.testi-sec::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(171, 206, 59, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.testi-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
}

.testi-quote-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(171, 206, 59, 0.12);
    border: 1px solid rgba(171, 206, 59, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

.testi-quote-icon svg {
    color: var(--accent);
    width: 22px;
    height: 22px;
}

.testi-text {
    font-family: var(--fd);
    font-size: clamp(1.3rem, 2.4vw, 2rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.55;
    color: rgba(245, 243, 238, 0.92);
    margin-bottom: 36px;
    letter-spacing: -0.01em;
}

.testi-text em {
    font-style: normal;
    color: var(--accent);
}

.testi-divider {
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    margin-bottom: 24px;
}

.testi-author {
    display: flex;
    align-items: center;
    gap: 16px;
}

.testi-author {
    display: flex;
    align-items: center;
    gap: 20px;
}

.testi-clinic-logo {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(171, 206, 59, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    backdrop-filter: blur(6px);
}

.testi-clinic-logo svg {
    width: 52px;
    height: 52px;
}

.testi-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(171, 206, 59, 0.2), rgba(171, 206, 59, 0.08));
    border: 2px solid rgba(171, 206, 59, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fd);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--accent);
    flex-shrink: 0;
}

.testi-info {
    text-align: left;
}

.testi-name {
    font-family: var(--fd);
    font-weight: 700;
    font-size: 1rem;
    color: var(--white);
    margin-bottom: 2px;
}

.testi-clinic-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.06em;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.testi-role {
    font-size: 0.76rem;
    color: rgba(245, 243, 238, 0.5);
    letter-spacing: 0.04em;
}

/* Dots nav */
.testi-dots {
    display: flex;
    gap: 8px;
    margin-top: 40px;
}

.testi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(171, 206, 59, 0.2);
    border: 1px solid rgba(171, 206, 59, 0.3);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.testi-dot.active {
    background: var(--accent);
    transform: scale(1.2);
}

.testi-inner {
    transition: opacity 0.4s ease;
}

.testi-inner.fading {
    opacity: 0;
}

/* ══ MORE EQUIPMENT ══ */
.more-sec {
    padding: 96px 0 80px;
    overflow: visible;
    background: linear-gradient(180deg, #f0f6fc 0%, #f8fafd 100%);
    border-top: 1.5px solid #d6e4ee;
    border-bottom: 1.5px solid #d6e4ee;
}

.more-sec .stitle {
    max-width: 530px;
}

.more-hd {
    padding: 0 70px;
    margin-bottom: 36px;
}

.hscroll-wrap {
    position: relative;
    margin: 0;
}

.hscroll {
    display: flex;
    gap: 16px;
    padding: 8px 70px 28px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.hscroll::-webkit-scrollbar {
    display: none;
}

/* Arrow buttons */
.hscroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    border: 1.5px solid #c8d8e8;
    box-shadow: 0 3px 16px rgba(0, 20, 60, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.hscroll-arrow:hover {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 4px 18px rgba(171, 206, 59, 0.3);
}

.hscroll-arrow:hover svg {
    stroke: #0b1220;
}

.hscroll-arrow svg {
    stroke: #1a2a3a;
    transition: stroke 0.2s;
}

.hscroll-arrow.prev {
    left: 24px;
}

.hscroll-arrow.next {
    right: 24px;
}

.hc {
    flex-shrink: 0;
    width: 295px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: #ffffff;
    border: 1.5px solid #dde6ee;
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform 0.28s;
}

.hc:hover {
    transform: translateY(-6px);
}

.hc:hover .hc-vis .eq-prod-img {
    filter: brightness(0.55) saturate(0.8);
    transition: filter 0.4s ease;
}

.hc-vis {
    height: 185px;
    position: relative;
    overflow: hidden;
}

.hc-body {
    padding: 20px;
    background: #fff;
}

.hc-cat {
    display: block;
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 5px;
}

.hc-name {
    font-family: var(--fd);
    font-weight: 700;
    font-size: 0.97rem;
    margin-bottom: 7px;
    color: #0f1e30;
}

.hc-txt {
    font-size: 0.78rem;
    color: #5a7089;
    line-height: 1.58;
}

.hc-lnk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    transition: gap 0.18s;
}

.hc-lnk::after {
    content: '→';
}

.hc-lnk:hover {
    gap: 11px;
}

/* small card visuals */
.v-pass {
    background: linear-gradient(145deg, #051408, #082010);
}

.v-pass::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 78% 78% at 50% 30%, rgba(171, 206, 59, 0.09), transparent 70%);
}

.v-air {
    background: linear-gradient(145deg, #130820, #1d0b30);
}

.v-air::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 17px, rgba(155, 75, 255, 0.04) 18px, transparent 20px);
}

.v-qest {
    background: linear-gradient(145deg, #040d18, #06121e);
}

.v-qest::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(171, 206, 59, 0.055) 1px, transparent 1px) 0 0 / 18px 100%,
        linear-gradient(rgba(171, 206, 59, 0.04) 1px, transparent 1px) 0 0 / 100% 18px;
}

.v-press2 {
    background: linear-gradient(145deg, #080818, #0d0e26);
}

.v-press2::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 110px;
    border: 1px solid rgba(100, 100, 255, 0.14);
    border-radius: 36px;
    box-shadow: 0 0 0 14px rgba(100, 100, 255, 0.04), 0 0 0 28px rgba(100, 100, 255, 0.02);
}

.v-sonic {
    background: linear-gradient(145deg, #0f0f00, #1a1a00);
}

.v-sonic::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(ellipse 2px 68% at 22% 50%, rgba(255, 218, 0, 0.11), transparent), radial-gradient(ellipse 2px 86% at 37% 50%, rgba(255, 218, 0, 0.07), transparent), radial-gradient(ellipse 2px 58% at 50% 50%, rgba(255, 218, 0, 0.13), transparent), radial-gradient(ellipse 2px 78% at 63% 50%, rgba(255, 218, 0, 0.07), transparent), radial-gradient(ellipse 2px 66% at 78% 50%, rgba(255, 218, 0, 0.11), transparent);
}

.v-hp {
    background: linear-gradient(145deg, #070d04, #0f1605);
}

.v-hp::before {
    content: '';
    position: absolute;
    top: 14%;
    left: 50%;
    transform: translateX(-50%);
    width: 54px;
    height: 122px;
    background: linear-gradient(180deg, rgba(171, 206, 59, 0.14), rgba(171, 206, 59, 0.03));
    border-radius: 27px;
    box-shadow: 0 0 28px 7px rgba(171, 206, 59, 0.09);
}

.v-ora {
    background: linear-gradient(145deg, #170810, #250c17);
}

.v-ora::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 68% 58% at 50% 50%, rgba(255, 70, 150, 0.08), transparent 70%);
}

/* ══ ABOUT ══ */
.about-sec {
    padding: 106px 70px;
    background: #f0f6f3;
    border-top: 2px solid #cde0d8;
}

.about-grid {
    display: grid;
    grid-template-columns: 5fr 4fr;
    gap: 86px;
    align-items: start;
}

.about-txt h2 {
    font-family: var(--fd);
    font-weight: 800;
    font-size: clamp(1.9rem, 3.4vw, 3.1rem);
    line-height: 1.08;
    margin-bottom: 20px;
    color: #0b1a2e;
    text-transform: none;
    letter-spacing: 0;
    max-width: 670px;
}

.about-txt p {
    font-size: 0.9rem;
    font-weight: 400;
    color: #4a6278;
    line-height: 1.82;
    margin-bottom: 16px;
}

.qnav {
    margin-top: 6px;
}

.qnav-t {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
    display: block;
}

.qitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #c8ddd5;
    text-decoration: none;
    color: #1a3a2e;
    transition: padding-left 0.18s, color 0.18s;
}

.qitem:hover {
    color: var(--accent);
    padding-left: 5px;
}

.qitem-n {
    font-family: var(--fd);
    font-weight: 600;
    font-size: 0.87rem;
}

.qarr {
    color: var(--accent);
}

/* ══ HC CARD HOVER BENEFITS (scroll strip) ══ */
.hc {
    position: relative;
}

.hc-benefits {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px 18px 20px;
    background: linear-gradient(180deg,
            rgba(3, 5, 12, 0.05) 0%,
            rgba(3, 5, 12, 0.25) 20%,
            rgba(3, 5, 12, 0.88) 55%,
            rgba(3, 5, 12, 0.98) 100%);
    backdrop-filter: blur(0px);
    border-radius: 6px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    pointer-events: none;
}

.hc:hover .hc-benefits {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* HC body always opaque at rest */
.hc .hc-body {
    opacity: 1;
}

.hc:hover .hc-body {
    opacity: 0;
    transition: opacity 0.18s;
}

.hb-tag {
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
    display: block;
}

.hb-name {
    font-family: var(--fd);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    margin-bottom: 14px;
}

.hb-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.hb-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.74rem;
    color: rgba(245, 243, 238, 0.78);
    line-height: 1.45;
}

.hb-dot {
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: 5px;
}

.hb-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--black);
    background: var(--accent);
    padding: 8px 16px;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.2s;
    width: fit-content;
}

.hb-cta:hover {
    background: var(--accent2);
}

.hb-cta::after {
    content: '→';
}

/* ══ CC APP PROMO SECTION ══ */
.ccapp-sec {
    padding: 100px 70px;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.ccapp-sec::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(171, 206, 59, 0.07) 0%, transparent 70%);
    pointer-events: none;
}

.ccapp-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.ccapp-content {}

.ccapp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid rgba(171, 206, 59, 0.3);
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 22px;
}

.ccapp-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    animation: blink 2s infinite;
}

.ccapp-content h2 {
    font-family: var(--fd);
    font-weight: 800;
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    line-height: 1.08;
    margin-bottom: 16px;
    color: #0b1a2e;
    text-transform: none;
    letter-spacing: 0;
}

.ccapp-content h2 i {
    font-style: normal;
    color: var(--accent);
}

.ccapp-content p {
    font-size: 0.92rem;
    font-weight: 400;
    color: #4a6278;
    line-height: 1.8;
    margin-bottom: 32px;
    max-width: 460px;
}

.ccapp-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 36px;
}

.ccapp-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.ccapp-step-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(171, 206, 59, 0.12);
    border: 1px solid rgba(171, 206, 59, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fd);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--accent);
    margin-top: 1px;
}

.ccapp-step-text strong {
    display: block;
    font-family: var(--fd);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 2px;
    color: #0b1a2e;
}

.ccapp-step-text span {
    font-size: 0.8rem;
    color: #4a6278;
}

.ccapp-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* right panel: feature tiles */
.ccapp-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ccapp-tile {
    background: #f4f8fc;
    border: 1.5px solid #dde8f0;
    border-radius: 8px;
    padding: 24px 22px;
    transition: border-color 0.25s, transform 0.25s;
}

.ccapp-tile:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(171, 206, 59, 0.1);
}

.ccapp-tile-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(171, 206, 59, 0.1);
    border: 1px solid rgba(171, 206, 59, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.ccapp-tile-icon svg {
    width: 18px;
    height: 18px;
    color: var(--accent);
}

.ccapp-tile strong {
    display: block;
    font-family: var(--fd);
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 6px;
    color: #0b1a2e;
}

.ccapp-tile span {
    font-size: 0.76rem;
    color: #5a7289;
    line-height: 1.55;
}

.ccapp-tile.featured {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(171, 206, 59, 0.06) 0%, rgba(171, 206, 59, 0.02) 100%);
    border-color: rgba(171, 206, 59, 0.25);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
}

.ccapp-tile.featured .ccapp-tile-icon {
    flex-shrink: 0;
    margin-bottom: 0;
}

.ccapp-tile.featured div strong {
    font-size: 0.95rem;
}

/* ══ FAQ ══ */
.faq-section {
    padding: 90px 70px;
    background: linear-gradient(180deg, #f4f8fc 0%, #eef4f0 100%);
    border-top: 1.5px solid #d2e2ee;
}

.faq-section .faq-wrap {
    max-width: 820px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1.5px solid #d0dce8;
}

.faq-item:not(.faq-item.open) {
    padding-bottom: 16px;
}

.faq-q {
    font-family: var(--fd);
    font-weight: 600;
    font-size: 1rem;
    color: #0f1e30;
    cursor: pointer;
    padding: 18px 0 5px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: color 0.2s;
}

.faq-q:hover {
    color: var(--accent);
}

.faq-a p {
    color: #3d5a72;
    font-weight: 400;
}

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

.faq-q::after {
    content: '+';
    flex-shrink: 0;
    font-size: 1.4rem;
    color: var(--accent);
    font-weight: 300;
    transition: transform 0.25s;
}

details[open] .faq-q::after {
    content: '−';
}

.faq-a {
    padding: 0 0 20px;
}

.faq-section .faq-a {
    max-height: initial;
}

.faq-a p {
    font-size: 0.9rem;
    font-weight: 400;
    color: #3d5a72;
    line-height: 1.82;
}

/* ══ CTA ══ */
.cta-sec {
    padding: 96px 70px;
    text-align: center;
    background: linear-gradient(155deg, #eaf6f2 0%, #f2faf7 50%, #e8f5f0 100%);
    border-top: 2px solid #b8dece;
    border-bottom: 2px solid #b8dece;
}

.cta-sec h2 {
    font-family: var(--fd);
    font-weight: 800;
    font-size: clamp(2.1rem, 5vw, 4.6rem);
    line-height: 1.02;
    max-width: 800px;
    margin: 0 auto 16px;
    color: #0b1a2e;
    text-transform: none;
    letter-spacing: 0;
}

.cta-sec h2 i {
    font-style: normal;
    color: var(--accent);
}

.cta-sec p {
    font-size: 0.94rem;
    color: #4a6278;
    margin-bottom: 40px;
    font-weight: 400;
}

.cta-btns {
    display: flex;
    gap: 13px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ══ FOOTER ══ */
footer {
    background: var(--footer-bg);
    border-top: 1.5px solid var(--footer-border);
    padding: 80px 70px 40px;
}

.f-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 52px;
    margin-bottom: 52px;
}

.f-brand {
    margin-bottom: 20px;
}

.f-brand img {
    height: 35px;
    width: auto;
    display: block;
    margin-bottom: 10px;
    /* filter: brightness(0) invert(1) sepia(1) saturate(0) brightness(2.5) hue-rotate(0deg) opacity(0.9); */
}

.f-brand b {
    color: var(--accent);
}

.f-desc {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.75;
    margin-bottom: 20px;
    max-width: 265px;
}

.f-med {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.6;
    max-width: 265px;
}

/* Column headings — bigger, matching nav section labels */
.f-col h3,
.f-col h4 {
    font-family: var(--fd);
    font-weight: 800;
    font-size: 0.80rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(162, 205, 56, 0.2);
}

/* Links — bigger and cleaner */
.f-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.f-col a {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.18s, padding-left 0.18s;
    font-family: var(--fb);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 6px;
}

.f-col a::before {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.2s;
    flex-shrink: 0;
}

.f-col a:hover {
    color: var(--accent);
}

.f-col a:hover::before {
    width: 10px;
}

.f-bot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 28px;
    border-top: 1px solid var(--footer-border);
    font-size: 0.78rem;
    color: #c0d4e8;
}

.f-legal {
    font-size: 0.72rem;
    color: rgba(192, 212, 232, 0.6);
    text-align: right;
    max-width: 390px;
}

/* Mobile search overlay */
#mob-search-bar {
    display: none;
    position: fixed;
    top: var(--nh);
    left: 0;
    right: 0;
    z-index: 100000;
    padding: 12px 14px;
    background: #060a12;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 2px solid var(--accent);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

#mob-search-bar.open {
    display: flex;
    gap: 8px;
    align-items: center;
}

#mob-search-bar input {
    flex: 1;
    padding: 11px 14px 11px 42px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #fff;
    font-family: var(--fb);
    font-size: 0.95rem;
    outline: none;
}

#mob-search-bar input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

#mob-search-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* FAQ section responsive */
#faq-section {
    transition: padding 0.2s;
}

/* btn-g on light sections */
.supp-sec .btn-g,
.ccapp-sec .btn-g,
.about-sec .btn-g,
.cta-sec .btn-g {
    color: #0b1a2e;
    border-color: #b0ccd8;
}

.supp-sec .btn-g:hover,
.ccapp-sec .btn-g:hover,
.about-sec .btn-g:hover,
.cta-sec .btn-g:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* stitle/slabel on light sections */
.supp-sec .stitle,
.ccapp-sec .stitle,
.about-sec .stitle {
    color: #0b1a2e;
}

.supp-sec .slabel,
.ccapp-sec .slabel,
.about-sec .slabel {
    color: var(--accent);
}

/* ══ EQUIPMENT PRODUCT IMAGES ══ */
/* Primary image (always visible) */
.eq-prod-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: 1;
    transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
    background-color: #f0f6f3;
    filter: none;
}

/* Hover image (second image, slides in on hover) */
.eq-hover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 2;
    filter: brightness(0.75) saturate(0.9);
}

/* Gradient overlay always on top of images */
.eq-overlay {
    z-index: 3;
}

.eq-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 36px;
    z-index: 3;
    opacity: 1;
}

.eq-benefits {
    z-index: 5;
}

/* On card hover: fade primary, reveal hover img */
/* Card hover: primary fades OUT, hover image fades IN dark */
.eq-card:hover .eq-prod-img,
.eq-sm:hover .eq-prod-img {
    opacity: 0;
    transform: scale(1.04);
}

.eq-card:hover .eq-hover-img,
.eq-sm:hover .eq-hover-img {
    opacity: 1;
    transform: scale(1);
}

/* ══ MOBILE TOUCH — card titles always visible, overlay on tap ══ */
@media (hover: none) {

    /* Equipment main cards */
    .eq-info {
        opacity: 1 !important;
    }

    .eq-name {
        color: #fff !important;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
    }

    .eq-tag {
        opacity: 1 !important;
    }

    /* eq-card wide (LED bed) - fix 2-col benefits list on mobile */
    .eq-card-wide .ben-list {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* HC cards - body always visible on mobile */
    .hc-body {
        opacity: 1 !important;
    }

    .hc-name {
        color: #0f1e30 !important;
    }

    .hc-cat {
        opacity: 1 !important;
    }

    /* Supp tiles - show label/sub always */
    .supp-tile .st-label {
        opacity: 1 !important;
    }

    .supp-tile .st-sub {
        opacity: 1 !important;
    }
}

/* ════════════════════ SEE IT IN ACTION — VIDEO SHOWCASE ════════════════════ */
.via-sec {
    background: #030609;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.via-header {
    text-align: center;
    padding: 52px 24px 0;
    position: relative;
    z-index: 2;
}

.via-header .sec-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fd);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
}

.via-header .sec-tag::before {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    background: var(--accent);
}

.via-header h2 {
    font-family: var(--fd);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}

.via-header h2 i {
    font-style: normal;
    color: var(--accent);
}

.via-header p {
    color: rgba(245, 243, 238, 0.55);
    font-size: 1rem;
    max-width: 520px;
    margin: 0 auto;
    font-family: var(--fb);
    line-height: 1.6;
}

/* Carousel */
.via-carousel {
    position: relative;
    margin-top: 32px;
}

.via-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.via-slide {
    min-width: 100%;
    position: relative;
}

/* Video wrapper — 16:9 cinematic */
.via-vid-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    background: #080d14;
    overflow: hidden;
}

.via-vid-wrap video,
.via-vid-wrap img,
.via-vid-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}

/* Play button overlay */
.via-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    cursor: pointer;
    background: rgba(3, 6, 9, 0.25);
    transition: background 0.2s;
}

.via-play-btn:hover {
    background: rgba(3, 6, 9, 0.15);
}

.via-play-btn.hidden {
    display: none;
}

.via-play-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(162, 205, 56, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.via-play-btn:hover .via-play-circle {
    transform: scale(1.08);
    box-shadow: 0 12px 40px rgba(162, 205, 56, 0.55);
}

.via-play-circle svg {
    margin-left: 4px;
}

/* Placeholder state (no video yet) */
.via-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, #0d1a28 0%, #060d17 100%);
}

.via-placeholder-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px dashed rgba(162, 205, 56, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.via-placeholder span {
    font-family: var(--fd);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Info panel below each video */
.via-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 40px 18px 40px;
    background: #060d17;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    gap: 24px;
}

.via-info-left {
    flex: 1;
}

.via-eq-tag {
    font-family: var(--fd);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}

.via-eq-name {
    font-family: var(--fd);
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.15;
    margin-bottom: 6px;
}

.via-eq-desc {
    font-family: var(--fb);
    font-size: 0.88rem;
    color: rgba(245, 243, 238, 0.5);
    line-height: 1.5;
}

.via-info-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.via-learn-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fd);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0b1220;
    background: var(--accent);
    padding: 12px 22px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    white-space: nowrap;
}

.via-learn-btn:hover {
    background: #b8d83f;
    transform: translateY(-1px);
}

/* Nav arrows */
.via-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(6, 13, 23, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    backdrop-filter: blur(8px);
}

.via-arrow:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.via-arrow:hover svg {
    stroke: #0b1220;
}

.via-arrow svg {
    stroke: rgba(255, 255, 255, 0.8);
    transition: stroke 0.2s;
}

.via-arrow.prev {
    left: 20px;
}

.via-arrow.next {
    right: 20px;
}

/* Dot indicators */
.via-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 0 36px;
    background: #060d17;
}

.via-dot {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    transition: width 0.3s, background 0.3s;
    cursor: pointer;
    border: none;
}

.via-dot.active {
    width: 28px;
    background: var(--accent);
}

/* ============================================================
   EQUIPMENT LISTING PAGE — Additional Styles
   (equipment-grid, filter bar, category tabs, hero banner)
   ============================================================ */

/* ═══════════════════════════════════════════════════════
   SITE-WIDE BREADCRUMB BAR  —  .site-bc
   Green sticky bar, consistent across all pages.
   ═══════════════════════════════════════════════════════ */
.site-bc {
    background: var(--accent, #abce3b);
    position: sticky;
    top: var(--nh, 70px);
    z-index: 700;
    box-shadow: 0 2px 8px rgba(11, 18, 32, .1);
}

.site-bc-in {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 70px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.site-bc-trail {
    display: flex;
    align-items: center;
    gap: 6px;
}

.site-bc-link {
    font-family: var(--fb, 'Carlito', sans-serif);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: rgba(11, 18, 32, .6);
    text-decoration: none;
    transition: color .14s;
}

.site-bc-link:hover {
    color: #0b1220;
}

.site-bc-sep {
    color: rgba(11, 18, 32, .3);
    font-size: .82rem;
    line-height: 1;
}

.site-bc-cur {
    font-family: var(--fb, 'Carlito', sans-serif);
    font-size: .67rem;
    font-weight: 800;
    color: #0b1220;
    letter-spacing: .04em;
}

.site-bc-cta {
    font-family: var(--fb, 'Carlito', sans-serif);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #0b1220;
    text-decoration: none;
    background: rgba(11, 18, 32, .12);
    border-radius: 40px;
    padding: 5px 14px;
    transition: background .14s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}

.site-bc-cta:hover {
    background: rgba(11, 18, 32, .22);
}

/* ── Shared breadcrumb .ai-bc ── */
.ai-bc {
    background: #abce3b;
    position: sticky;
    top: 58px;
    z-index: 700;
    box-shadow: 0 2px 8px rgba(11, 18, 32, .1);
}

.ai-bc-in {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 70px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: space-between;
}

.ai-bc-trail {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ai-bc-link {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: rgba(11, 18, 32, .58);
    text-decoration: none;
    transition: color .13s;
}

.ai-bc-link:hover {
    color: #0b1220;
}

.ai-bc-sep {
    color: rgba(11, 18, 32, .3);
    font-size: .85rem;
    line-height: 1;
}

.ai-bc-cur {
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: #0b1220;
}

.ai-bc-cta {
    font-size: .66rem;
    font-weight: 700;
    color: #0b1220;
    background: rgba(11, 18, 32, .12);
    border-radius: 40px;
    padding: 5px 14px;
    text-decoration: none;
    transition: background .13s;
    white-space: nowrap;
}

.ai-bc-cta:hover {
    background: rgba(11, 18, 32, .22);
}

/* ══ EQUIPMENT PAGE ══ */
.ep-card {
    cursor: pointer;
    opacity: 1 !important;
    transform: translateY(0) !important;
    border: 1.5px solid rgba(255, 255, 255, .11) !important;
    box-shadow: 0 4px 22px rgba(0, 0, 0, .25) !important;
    transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease !important;
}

.ep-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .45) !important;
    border-color: rgba(171, 206, 59, .45) !important;
}

.ep-light .ep-card {
    border-color: rgba(11, 18, 32, .14) !important;
    box-shadow: 0 4px 18px rgba(11, 18, 32, .1) !important;
}

.ep-light .ep-card:hover {
    border-color: rgba(58, 106, 10, .38) !important;
    box-shadow: 0 18px 40px rgba(11, 18, 32, .2) !important;
}

.ep-card .eq-info {
    opacity: 1 !important;
    transition: opacity .26s ease !important;
    z-index: 3 !important;
}

.ep-card .eq-overlay {
    z-index: 2 !important;
    transition: opacity .26s ease !important;
}

.ep-card .eq-benefits {
    opacity: 0 !important;
    transform: translateY(14px) !important;
    transition: opacity .3s ease, transform .3s ease !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

.ep-card:hover .eq-info,
.ep-card:hover .eq-overlay {
    opacity: 0 !important;
}

.ep-card:hover .eq-benefits {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* Perspective grid lines for depth */
/* 3D floating stat cards on the right */

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

.ep-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: #f5f3ee;
    line-height: 1.1;
    margin: 0 0 8px;
}

.ep-h1 em {
    font-style: normal;
    color: #abce3b;
}

.ep-sub {
    font-size: .88rem;
    color: rgba(245, 243, 238, .45);
    max-width: 520px;
    line-height: 1.6;
    margin: 0;
}

.ep-filter {
    background: #f5f9fc;
    border-bottom: 1.5px solid #dce8f0;
    position: sticky;
    top: 102px;
    z-index: 750;
}

.ep-filter-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 70px;
    display: flex;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
}

.ep-filter-inner::-webkit-scrollbar {
    display: none;
}

.ep-fbtn {
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--fb, 'Carlito', sans-serif);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    color: rgba(11, 18, 32, .45);
    background: none;
    border: none;
    cursor: pointer;
    padding: 14px 18px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .18s, border-color .18s;
}

.ep-fbtn:hover {
    color: #0b1220;
}

.ep-fbtn.active {
    color: #3a6a0a;
    border-bottom-color: #3a6a0a;
}

.ep-fcount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: .57rem;
    background: rgba(58, 106, 10, .1);
    color: #3a6a0a;
}

.ep-fbtn.active .ep-fcount {
    background: rgba(58, 106, 10, .2);
}

.ep-sec {
    padding: 64px 0 72px !important;
}

.ep-light {
    background: #f5f9fc !important;
}

.ep-dark {
    background: #0b1220 !important;
}

.ep-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 70px;
}

.ep-sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 36px;
    flex-wrap: wrap;
    gap: 12px;
}

.ep-eyebrow {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.ep-light .ep-eyebrow {
    color: #3a6a0a;
}

.ep-dark .ep-eyebrow {
    color: #abce3b;
}

.ep-sec-title {
    text-transform: none;
    letter-spacing: 0px;
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
}

.ep-light .ep-sec-title {
    color: #0b1a2e;
}

.ep-dark .ep-sec-title {
    color: #f5f3ee;
}

.ep-sec-count {
    font-size: .72rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 2px;
}

.ep-light .ep-sec-count {
    background: rgba(11, 18, 32, .06);
    color: rgba(11, 18, 32, .45);
}

.ep-dark .ep-sec-count {
    background: rgba(171, 206, 59, .08);
    color: rgba(171, 206, 59, .7);
}

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

.ep-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.ep-grid-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

.ep-grid .ep-card {
    height: 420px;
}

.ep-grid-2 .ep-card {
    height: 440px;
}

.ep-grid-1 .ep-card {
    height: 520px;
}

.ep-card .eq-name {
    font-size: clamp(1rem, 1.5vw, 1.3rem) !important;
    color: #f5f3ee !important;
}

.ep-card .ben-name {
    font-size: clamp(.95rem, 1.4vw, 1.2rem) !important;
    color: #f5f3ee !important;
}

.ep-grid-2 .ep-card .eq-name {
    font-size: clamp(1.1rem, 1.7vw, 1.5rem) !important;
}

.ep-grid-2 .ep-card .ben-name {
    font-size: clamp(1.1rem, 1.7vw, 1.5rem) !important;
}

.ep-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 7;
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    background: #abce3b;
    color: #0b1220;
    padding: 3px 9px;
    border-radius: 2px;
}

.ep-new {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 7;
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: rgba(0, 200, 120, .1);
    border: 1px solid rgba(0, 200, 120, .32);
    color: #00c878;
    padding: 3px 9px;
    border-radius: 2px;
}

.ep-cta {
    background: linear-gradient(135deg, #0b1220 0%, #0d1a10 100%);
    border-top: 1px solid rgba(171, 206, 59, .12);
    padding: 60px 70px;
}

.ep-cta-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.ep-cta h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 700;
    color: #f5f3ee;
    line-height: 1.1;
    margin: 0 0 8px;
    text-transform: none;
    letter-spacing: 0;
}

.ep-cta h2 em {
    font-style: normal;
    color: #abce3b;
}

.ep-cta p {
    font-size: .88rem;
    color: rgba(245, 243, 238, .5);
    max-width: 400px;
    line-height: 1.7;
    margin: 0;
}

.ep-cta-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

@media (hover: none) {

    .ep-card:active .eq-info,
    .ep-card:active .eq-overlay {
        opacity: 0 !important;
    }

    .ep-card:active .eq-benefits {
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }
}

/* ── Equipment page hero — 3D depth ── */
.ep-title {
    background: #0b1220;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding: calc(var(--nh, 70px) + 56px) 0 52px;
    position: relative;
    overflow: hidden;
}

.ep-title::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 90% at 12% 50%, rgba(171, 206, 59, .08) 0%, transparent 60%),
        radial-gradient(ellipse 55% 65% at 82% 25%, rgba(0, 100, 180, .07) 0%, transparent 55%),
        linear-gradient(140deg, #070f1c 0%, #0b1220 50%, #060d1a 100%);
}

.ep-title::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(171, 206, 59, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(171, 206, 59, .04) 1px, transparent 1px);
    background-size: 56px 56px;
    transform: perspective(380px) rotateX(14deg) scaleY(1.4);
    transform-origin: bottom center;
    opacity: .55;
}

.ep-title-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 70px;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.ep-title-text {
    flex: 1;
}

.ep-title-deco {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
}

.ep-title-card {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(171, 206, 59, .14);
    border-radius: 14px;
    padding: 18px 20px;
    text-align: center;
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
    animation: ep-float 4s ease-in-out infinite;
}

.ep-title-card:nth-child(2) {
    animation-delay: -1.4s;
}

.ep-title-card:nth-child(3) {
    animation-delay: -2.8s;
}

@keyframes ep-float {

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

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

.ep-cn {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
}

.ep-cl {
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .38);
    display: block;
    margin-top: 4px;
}

/* ── FAQ ACCORDION ──────────────────────────────────────────────── */
.faq-sec {
    padding: 72px 0;
    background: #f5f9fc;
}

.faq-sec.ep-dark {
    background: #0b1220;
}

/* .faq-in {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 70px;
} */

.faq-eye {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.ep-light .faq-eye,
.faq-sec:not(.ep-dark) .faq-eye {
    color: #3a6a0a;
}

.ep-dark .faq-eye,
.faq-sec.ep-dark .faq-eye {
    color: #abce3b;
}

.faq-h2 {
    text-transform: none;
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: 0 0 36px;
}

.faq-sec:not(.ep-dark) .faq-h2 {
    color: #0b1a2e !important;
}

.faq-sec.ep-dark .faq-h2 {
    color: #f5f3ee !important;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(11, 18, 32, .1);
}

.faq-sec.ep-dark .faq-list {
    border-top-color: rgba(255, 255, 255, .07);
}

.faq-item {
    border-bottom: 1px solid rgba(11, 18, 32, .1);
}

.faq-sec.ep-dark .faq-item {
    border-bottom-color: rgba(255, 255, 255, .07);
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    padding: 18px 0;
    font-family: var(--fd, 'Lora', serif);
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.35;
    transition: color .15s;
}

.faq-sec:not(.ep-dark) .faq-q {
    color: #0b1a2e;
}

.faq-sec.ep-dark .faq-q {
    color: #f5f3ee;
}

.faq-sec:not(.ep-dark) .faq-q:hover {
    color: #3a6a0a;
}

.faq-sec.ep-dark .faq-q:hover {
    color: #abce3b;
}

.faq-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .25s;
}

.faq-sec:not(.ep-dark) .faq-icon {
    background: rgba(58, 106, 10, .1);
    border: 1px solid rgba(58, 106, 10, .22);
}

.faq-sec.ep-dark .faq-icon {
    background: rgba(171, 206, 59, .1);
    border: 1px solid rgba(171, 206, 59, .22);
}

.faq-icon svg {
    width: 12px;
    height: 12px;
    transition: transform .25s;
}

.faq-sec:not(.ep-dark) .faq-icon svg {
    stroke: #3a6a0a;
}

.faq-sec.ep-dark .faq-icon svg {
    stroke: #abce3b;
}

.faq-item.open .faq-icon {
    transform: scale(1.1);
}

.faq-item.open .faq-icon svg {
    transform: rotate(180deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .38s cubic-bezier(.22, .68, 0, 1.1), padding .2s;
}

.faq-item.open .faq-a {
    max-height: max-content;
}

.faq-a-inner {
    padding: 0 0 18px;
    font-size: .88rem;
    line-height: 1.76;
}

.faq-sec:not(.ep-dark) .faq-a-inner {
    color: #4a6278;
}

.faq-sec.ep-dark .faq-a-inner {
    color: rgba(245, 243, 238, .52);
}

/* Reset body background for this page */
body {
    background: #f5f9fc;
}

/* PAGE HERO HEADER — dark band, title clearly white */
.dl-header {
    background: #0b1220;
    padding: 52px 70px 44px;
    margin-top: var(--nh, 70px);
    position: relative;
    overflow: hidden;
}

.dl-header::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 80% at 85% 50%, rgba(171, 206, 59, .08) 0%, transparent 60%),
        radial-gradient(ellipse 35% 60% at 8% 80%, rgba(0, 100, 200, .05) 0%, transparent 55%);
}

.dl-header-in {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.dl-eyebrow {
    display: block;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 12px;
}

.dl-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.028em;
    color: #f5f3ee !important;
    /* force white — overrides shared h1 rule */
    margin: 0 0 12px;
    text-transform: none;
}

.dl-h1 em {
    font-style: normal;
    color: #abce3b;
}

.dl-sub {
    font-size: .9rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.66;
    margin: 0;
    max-width: 520px;
}

/* CONTROLS BAR — white sticky bar just below breadcrumb */
.dl-controls-bar {
    background: #fff;
    border-bottom: 2px solid rgba(11, 18, 32, .09);
    position: sticky;
    top: 102px;
    z-index: 600;
    box-shadow: 0 2px 12px rgba(11, 18, 32, .06);
}

.dl-cbar-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px;
    height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Search */
.dl-sw {
    position: relative;
    flex: 0 0 280px;
}

.dl-sw svg {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    stroke: rgba(11, 18, 32, .3);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
}

.dl-search {
    width: 100%;
    background: #f5f9fc;
    border: 1.5px solid rgba(11, 18, 32, .13);
    border-radius: 8px;
    padding: 9px 12px 9px 36px;
    font-size: .82rem;
    color: #0b1a2e;
    outline: none;
    font-family: var(--fd);
    transition: border-color .18s, background .18s;
}

.dl-search::placeholder {
    color: rgba(11, 18, 32, .35);
}

.dl-search:focus {
    border-color: #3a6a0a;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(58, 106, 10, .08);
}

/* Filter buttons */
.dl-filters {
    display: flex;
    gap: 6px;
}

.dl-fb {
    background: #f0f4f8;
    border: 1.5px solid rgba(11, 18, 32, .12);
    border-radius: 7px;
    color: rgba(11, 18, 32, .55);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 7px 15px;
    cursor: pointer;
    transition: all .15s;
    font-family: var(--fd);
}

.dl-fb:hover {
    background: #e8f2e8;
    border-color: rgba(58, 106, 10, .3);
    color: #3a6a0a;
}

.dl-fb.active {
    background: rgba(58, 106, 10, .1);
    border-color: #3a6a0a;
    color: #3a6a0a;
}

/* Count badge */
.dl-count-badge {
    margin-left: auto;
    font-size: .72rem;
    font-weight: 700;
    color: rgba(11, 18, 32, .4);
    background: #f0f4f8;
    border: 1px solid rgba(11, 18, 32, .1);
    padding: 4px 12px;
    border-radius: 40px;
    white-space: nowrap;
}

/* MAIN CONTENT — light background */
.dl-main {
    background: #f5f9fc;
    min-height: 60vh;
}

.dl-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 70px 80px;
}

/* SECTION LABEL */
.dl-sec {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 44px 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(11, 18, 32, .08);
}

.dl-sec h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: #0b1a2e !important;
    /* explicit dark — overrides any shared rule */
    margin: 0;
    letter-spacing: -.01em;
    text-transform: none;
}

.dl-sec-badge {
    font-size: .64rem;
    font-weight: 700;
    color: #3a6a0a;
    background: rgba(58, 106, 10, .1);
    border: 1px solid rgba(58, 106, 10, .22);
    padding: 3px 10px;
    border-radius: 40px;
}

/* FEATURED CARDS */
.dl-featured {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
}

.dl-feat-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .09);
    border-radius: 14px;
    padding: 22px 24px;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    box-shadow: 0 2px 12px rgba(11, 18, 32, .05);
}

.dl-feat-card:hover {
    border-color: rgba(58, 106, 10, .35);
    box-shadow: 0 8px 32px rgba(11, 18, 32, .1);
    transform: translateY(-2px);
}

.dl-feat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(58, 106, 10, .09);
    border: 1px solid rgba(58, 106, 10, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dl-feat-icon svg {
    width: 22px;
    height: 22px;
    stroke: #3a6a0a;
    fill: none;
}

.dl-feat-body {
    flex: 1;
    min-width: 0;
}

.dl-feat-type {
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #3a6a0a;
    display: block;
    margin-bottom: 3px;
}

.dl-feat-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 4px;
}

.dl-feat-desc {
    font-size: .79rem;
    color: #4a6278;
    line-height: 1.55;
    margin: 0;
}

.dl-feat-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #3a6a0a;
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, transform .15s;
}

.dl-feat-btn svg {
    stroke: #fff;
    width: 14px;
    height: 14px;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dl-feat-card:hover .dl-feat-btn {
    background: #4d8c0e;
    transform: translateY(-1px);
}

/* DOWNLOAD CARDS GRID */
.dl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}

.dl-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(11, 18, 32, .05);
    transition: transform .22s, box-shadow .22s, border-color .22s;
}

.dl-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(11, 18, 32, .12);
    border-color: rgba(58, 106, 10, .3);
}

.dl-card-img {
    position: relative;
    height: 160px;
    background: #f0f5f0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dl-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 10px;
    transition: transform .22s;
}

.dl-card:hover .dl-card-img img {
    transform: scale(1.04);
}

.dl-card-hover {
    position: absolute;
    inset: 0;
    background: rgba(11, 26, 11, .82);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity .2s;
}

.dl-card:hover .dl-card-hover {
    opacity: 1;
}

.dl-card-hover svg {
    stroke: #abce3b;
    width: 22px;
    height: 22px;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dl-card-hover span {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #f5f3ee;
}

.dl-card-body {
    padding: 10px 12px 13px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dl-card-type {
    font-size: .53rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #3a6a0a;
}

.dl-card-name {
    font-size: .8rem;
    font-weight: 700;
    color: #0b1a2e;
    line-height: 1.3;
}

.dl-card.hidden {
    display: none;
}

/* No results */
.dl-no-results {
    display: none;
    text-align: center;
    padding: 52px 20px;
}

.dl-no-results.show {
    display: block;
}

.dl-no-results svg {
    display: block;
    margin: 0 auto 16px;
    stroke: rgba(11, 18, 32, .2);
}

.dl-no-results p {
    font-size: .9rem;
    color: #4a6278;
}

.dl-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(11, 18, 32, .35);
    display: none;
    width: 20px;
    height: 20px;
    font-size: 1.15rem;
    line-height: 1;
    transition: color .15s;
    padding: 0
}

.dl-clear:hover {
    color: #0b1a2e
}

.dl-clear.show {
    display: flex;
    align-items: center;
    justify-content: center
}

/* EQUIPMENT TRAINING css */

/* PAGE HEADER */
.et-header {
    background: #0b1220;
    padding: 56px 70px 48px;
    margin-top: var(--nh, 70px);
    position: relative;
    overflow: hidden;
}

.et-header::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 90% at 90% 50%, rgba(171, 206, 59, .08) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 5% 80%, rgba(0, 100, 200, .05) 0%, transparent 55%);
}

/* Grid overlay */
.et-header::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(171, 206, 59, .02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(171, 206, 59, .02) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 80% 80% at 80% 50%, black 0%, transparent 70%);
}

.et-header-in {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.et-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 14px;
}

.et-eyebrow-line {
    width: 28px;
    height: 1px;
    background: rgba(171, 206, 59, .5);
}

.et-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.028em;
    color: #f5f3ee !important;
    margin: 0 0 14px;
    text-transform: none;
}

.et-h1 em {
    font-style: normal;
    color: #abce3b;
}

.et-sub {
    font-size: .92rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.68;
    margin: 0 0 28px;
    max-width: 500px;
}

.et-header-stats {
    display: flex;
    gap: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.et-hstat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.et-hstat-n {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: #abce3b;
    line-height: 1;
}

.et-hstat-l {
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .3);
}

/* MAIN */
.et-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 70px 88px;
}

/* Section intro */
.et-intro {
    text-align: center;
    margin-bottom: 52px;
}

.et-intro-eye {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #3a6a0a;
    margin-bottom: 10px;
}

.et-intro-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.02em;
    color: #0b1a2e !important;
    margin: 0 0 12px;
    text-transform: none;
}

.et-intro-p {
    font-size: .9rem;
    color: #4a6278;
    line-height: 1.72;
    margin: 0 auto;
    max-width: 520px;
}

/* REVEAL */
.r-up {
    /* opacity: 0;
  transform: translateY(20px); */
    transition: opacity .6s cubic-bezier(.22, .68, 0, 1.1), transform .6s cubic-bezier(.22, .68, 0, 1.1);
    transition-delay: var(--d, 0s);
}

/* COURSE CARDS GRID — 3 equal columns */
.et-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* CARD */
.et-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(11, 18, 32, .06);
    transition: transform .26s cubic-bezier(.22, .68, 0, 1.1), box-shadow .26s, border-color .26s;
}

.et-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 52px rgba(11, 18, 32, .14);
    border-color: rgba(58, 106, 10, .25);
}

/* Card image */
.et-card-img-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    height: 220px;
    background: #e8f2e8;
    flex-shrink: 0;
    text-decoration: none;
}

.et-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s cubic-bezier(.22, .68, 0, 1.1);
}

.et-card:hover .et-card-img {
    transform: scale(1.04);
}

.et-card-img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 26, 11, .72);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .22s;
}

.et-card:hover .et-card-img-overlay {
    opacity: 1;
}

.et-card-img-cta {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #abce3b;
    color: #0b1220;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 11px 22px;
    border-radius: 8px;
}

.et-card-img-cta svg {
    flex-shrink: 0;
}

/* Card body */
.et-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 24px 26px;
}

.et-card-tag {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
}

.et-tag-icon {
    width: 20px;
    height: 20px;
    color: #3a6a0a;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.et-tag-icon svg {
    width: 15px;
    height: 15px;
    stroke: #3a6a0a;
    fill: none;
}

.et-tag-label {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #3a6a0a;
}

.et-card-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.01em;
    color: #0b1a2e !important;
    margin: 0 0 10px;
}

.et-card-desc {
    font-size: .82rem;
    color: #4a6278;
    line-height: 1.65;
    margin: 0 0 18px;
    flex: 1;
}

/* Meta pills */
.et-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.et-meta-pill {
    font-size: .62rem;
    font-weight: 600;
    color: #3a6a0a;
    background: rgba(58, 106, 10, .08);
    border: 1px solid rgba(58, 106, 10, .18);
    padding: 4px 11px;
    border-radius: 40px;
}

/* CTA button */
.et-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #0b1a2e;
    color: #f5f3ee;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 12px 20px;
    border-radius: 9px;
    text-decoration: none;
    transition: background .18s, transform .18s;
    align-self: flex-start;
}

.et-card-btn svg {
    flex-shrink: 0;
}

.et-card:hover .et-card-btn {
    background: #1a3050;
    transform: translateX(3px);
}

a.et-card-btn:hover {
    color: #f5f3ee;
}

.et-ext-badge {
    display: flex;
    align-items: center;
    color: rgba(245, 243, 238, .45);
    margin-left: 2px;
}

.et-ext-badge svg {
    stroke: rgba(245, 243, 238, .45);
}

/* SUPPORT STRIP */
.et-support {
    margin-top: 64px;
    background: #0b1220;
    border-radius: 20px;
    padding: 40px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 20px 52px rgba(11, 18, 32, .16);
    position: relative;
    overflow: hidden;
}

.et-support::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(171, 206, 59, .08), transparent 65%);
    pointer-events: none;
}

.et-support-txt h3 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #f5f3ee !important;
    margin: 0 0 8px;
}

.et-support-txt p {
    font-size: .84rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.62;
    margin: 0;
    max-width: 420px;
}

.et-support-btns {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

/* HP100 PORTABLE css */

.r-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s cubic-bezier(.22, .68, 0, 1.1), transform .55s cubic-bezier(.22, .68, 0, 1.1);
    transition-delay: var(--d, 0s);
}

.r-up.on {
    opacity: 1;
}

.tc-sec {
    padding: 80px 0;
}

.tc-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px;
}

.ep-light {
    background: #f5f9fc;
}

.ep-dark {
    background: #0b1220;
}

.ep-eyebrow {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.ep-light .ep-eyebrow {
    color: #3a6a0a;
}

.ep-dark .ep-eyebrow {
    color: #abce3b;
}

.tc-body {
    font-size: .93rem;
    line-height: 1.76;
    margin-top: 14px;
    max-width: 530px;
}

.ep-light .tc-body {
    color: #4a6278;
}

.ep-dark .tc-body {
    color: rgba(245, 243, 238, .52);
}

/* HERO */
.tch {
    display: grid;
    grid-template-columns: 52% 48%;
    height: 520px;
    background: #020810;
    overflow: hidden;
    margin-top: var(--nh, 70px);
}

.tch-l {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 44px 40px 70px;
    position: relative;
    z-index: 2;
    background: linear-gradient(108deg, #020810 0%, rgba(2, 8, 16, .97) 55%, rgba(2, 8, 16, .55) 100%);
}

.tch-r {
    position: relative;
    background: #020810;
    overflow: hidden;
    perspective: 900px;
    cursor: crosshair;
}

/* Ambient glow */
.tch-r::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 65% 70% at 58% 45%, rgba(0, 160, 255, .07) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 75% 70%, rgba(171, 206, 59, .06) 0%, transparent 55%);
}

.tch-r::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to top, rgba(2, 8, 16, .45), transparent);
}

.tch-hero-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 16px;
    filter: drop-shadow(0 20px 52px rgba(0, 0, 0, .85)) drop-shadow(0 0 60px rgba(0, 160, 255, .12));
    transition: transform .08s linear;
    will-change: transform;
    pointer-events: none;
}

.tch-r-shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .05) 0%, transparent 60%);
    mix-blend-mode: screen;
    transition: background .08s linear;
}

.tch-badge {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(2, 8, 16, .78);
    border: 1px solid rgba(0, 160, 255, .28);
    backdrop-filter: blur(10px);
    padding: 6px 13px;
    border-radius: 6px;
    pointer-events: none;
}

.tch-bdot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #abce3b;
    animation: tch-blink 1.4s ease-in-out infinite;
}

@keyframes tch-blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .2
    }
}

.tch-badge span:last-child {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .6);
}

/* Hero text */
.tch-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(0, 160, 255, .1);
    border: 1px solid rgba(0, 160, 255, .3);
    color: #48b8f0;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 40px;
    margin-bottom: 17px;
    width: fit-content;
    animation: tch-up .5s ease both;
}

.tch-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #abce3b;
    animation: tch-pulse 2.2s ease-in-out infinite;
}

@keyframes tch-pulse {

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

    50% {
        opacity: .25;
        transform: scale(.6)
    }
}

@keyframes tch-up {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.tch-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.9rem, 3vw, 2.9rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.025em;
    color: #f5f3ee;
    margin: 0 0 5px;
    animation: tch-up .5s .1s ease both;
    text-transform: none;
}

.tch-h1 em {
    font-style: normal;
    color: #abce3b;
}

.tch-byline {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .3);
    display: block;
    margin-bottom: 16px;
    animation: tch-up .5s .18s ease both;
}

.tch-p {
    font-size: .88rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.72;
    max-width: 380px;
    margin: 0 0 22px;
    animation: tch-up .5s .26s ease both;
}

.tch-btns {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 24px;
    animation: tch-up .5s .34s ease both;
}

.tch-stats {
    display: flex;
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding-top: 16px;
    animation: tch-up .5s .42s ease both;
}

.tch-stat {
    flex: 1;
    padding-right: 14px;
    border-right: 1px solid rgba(255, 255, 255, .07);
}

.tch-stat:last-child {
    border-right: none;
    padding-right: 0;
    padding-left: 14px;
}

.tch-stat:first-child {
    padding-left: 0;
}

.tch-sn {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
    margin-bottom: 3px;
}

.tch-sl {
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .28);
}

/* SPLIT */
.hp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hp-split-img {
    border-radius: 16px;
    overflow: hidden;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ep-light .hp-split-img {
    background: #dde8f0;
    box-shadow: 0 14px 44px rgba(11, 18, 32, .12);
}

.ep-dark .hp-split-img {
    background: #060e1c;
    box-shadow: 0 14px 44px rgba(0, 0, 0, .5);
}

.hp-split-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.hp-feats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.hp-feat {
    font-size: .7rem;
    font-weight: 600;
    color: #3a6a0a;
    background: rgba(58, 106, 10, .07);
    border: 1px solid rgba(58, 106, 10, .17);
    padding: 5px 14px;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ANTIOXIDANT STAT BANNER */
.hp-stat-banner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-top: 52px;
    border-radius: 16px;
    overflow: hidden;
}

.hp-stat-tile {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    padding: 28px 22px;
    text-align: center;
    position: relative;
}

.hp-stat-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(171, 206, 59, .4), transparent);
}

.hp-stat-n {
    font-family: var(--fd, 'Lora', serif);
    font-size: 2.2rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
    margin-bottom: 6px;
}

.hp-stat-l {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .38);
}

.hp-stat-d {
    font-size: .78rem;
    color: rgba(245, 243, 238, .44);
    margin-top: 6px;
    line-height: 1.5;
}

/* FEATURE CARDS */
.hp-fg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 44px;
}

.hp-fc {
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 26px 22px;
    transition: transform .25s, border-color .25s, box-shadow .25s;
}

.hp-fc:hover {
    transform: translateY(-4px);
    border-color: rgba(171, 206, 59, .25);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .4);
}

.hp-fi {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(171, 206, 59, .1);
    border: 1px solid rgba(171, 206, 59, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #abce3b;
    margin-bottom: 14px;
}

.hp-fi svg {
    width: 21px;
    height: 21px;
}

.hp-ft {
    font-family: var(--fd, 'Lora', serif);
    font-size: .98rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 7px;
}

.hp-fd {
    font-size: .79rem;
    color: rgba(245, 243, 238, .44);
    line-height: 1.62;
    margin: 0;
}

/* BENEFITS */
.hp-bg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 44px;
}

.hp-bc {
    background: #fff;
    border: 1px solid rgba(11, 18, 32, .07);
    border-radius: 16px;
    padding: 26px 22px;
    box-shadow: 0 3px 14px rgba(11, 18, 32, .05);
    transition: transform .25s, box-shadow .25s;
}

.hp-bc:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(11, 18, 32, .12);
}

.hp-bi {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(58, 106, 10, .08);
    border: 1px solid rgba(58, 106, 10, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3a6a0a;
    margin-bottom: 14px;
}

.hp-bi svg {
    width: 21px;
    height: 21px;
}

.hp-bt {
    font-family: var(--fd, 'Lora', serif);
    font-size: .98rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 7px;
}

.hp-bd {
    font-size: .79rem;
    color: #4a6278;
    line-height: 1.62;
    margin: 0;
}

/* GALLERY */
.hp-gw {
    margin-top: 28px;
}

.hp-gm {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 460px;
    cursor: zoom-in;
    background: #0d1a28;
    box-shadow: 0 20px 52px rgba(0, 0, 0, .6);
    margin-bottom: 12px;
}

.hp-gi {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity .3s;
    padding: 16px;
}

.hp-gm::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30%;
    z-index: 1;
    background: linear-gradient(to top, rgba(2, 8, 16, .52), transparent);
    pointer-events: none;
}

.hp-gh {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 2;
    background: rgba(2, 8, 16, .7);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
    color: rgba(245, 243, 238, .6);
    font-size: .56rem;
    letter-spacing: .1em;
    padding: 5px 12px;
    border-radius: 40px;
    pointer-events: none;
}

.hp-gc {
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 2;
    background: rgba(2, 8, 16, .7);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    color: rgba(245, 243, 238, .45);
    font-size: .62rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 40px;
    pointer-events: none;
}

.hp-gs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.hp-gth {
    display: block;
    height: 100px;
    border-radius: 9px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .07);
    cursor: pointer;
    padding: 0;
    background: #0a1525;
    opacity: .46;
    transition: opacity .2s, border-color .2s;
    width: 100%;
}

.hp-gth img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    padding: 8px;
}

.hp-gth.on {
    opacity: 1;
    border-color: #abce3b;
}

.hp-gth:hover:not(.on) {
    opacity: .82;
    border-color: rgba(171, 206, 59, .35);
}

.hp-lb {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(2, 8, 16, .95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
}

.hp-lb.on {
    opacity: 1;
    pointer-events: auto;
}

.hp-lb-img {
    max-width: 88vw;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 10px;
}

.hp-lb-x {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    color: rgba(245, 243, 238, .42);
    font-size: 2.2rem;
    cursor: pointer;
    line-height: 1;
}

.hp-lb-x:hover {
    color: #f5f3ee;
}

/* SPECS */
.hp-sp-out {
    margin-top: 44px;
    background: #0b1220;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 52px rgba(11, 18, 32, .18);
}

.hp-sp-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 260px;
}

.hp-sp-img {
    background: #060e1c;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.hp-sp-img img {
    width: 100%;
    max-width: 280px;
    max-height: 220px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 12px 32px rgba(0, 0, 0, .7)) drop-shadow(0 0 40px rgba(0, 160, 255, .1));
}

.hp-sp-nums {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}

.hp-sp-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 2px;
}

.hp-sp-sub {
    font-size: .72rem;
    color: rgba(245, 243, 238, .35);
    margin: 0;
}

.hp-sp-sg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.hp-sp-stat {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 11px;
    padding: 12px 14px;
}

.hp-sp-sn {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.35rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
    margin-bottom: 3px;
}

.hp-sp-sl {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .35);
}

.hp-sp-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.hp-sp-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 11px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    border-right: 1px solid rgba(255, 255, 255, .05);
    gap: 12px;
}

.hp-sp-row:nth-child(even) {
    border-right: none;
}

.hp-sp-row:nth-last-child(-n+2) {
    border-bottom: none;
}

.hp-sp-k {
    font-size: .75rem;
    font-weight: 600;
    color: rgba(245, 243, 238, .42);
}

.hp-sp-v {
    font-size: .75rem;
    font-weight: 700;
    color: #f5f3ee;
    text-align: right;
}

/* CTA */
.hp-cta {
    background: linear-gradient(135deg, #0b1220 0%, #0a1828 60%, #0b1220 100%);
    position: relative;
    overflow: hidden;
}

.hp-cta::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -80px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 160, 255, .07), transparent 65%);
    pointer-events: none;
}

.hp-cta::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -60px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(171, 206, 59, .07), transparent 65%);
    pointer-events: none;
}

.hp-cta-in {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    padding: 56px 70px;
    position: relative;
    z-index: 1;
}

.hp-cta-eye {
    display: block;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 14px;
}

.hp-cta-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3.2vw, 2.7rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #f5f3ee;
    margin: 0 0 13px;
    text-transform: none;
}

.hp-cta-h2 em {
    font-style: normal;
    color: #abce3b;
}

.hp-cta-p {
    font-size: .9rem;
    color: rgba(245, 243, 238, .48);
    line-height: 1.72;
    margin: 0 auto 28px;
    max-width: 480px;
}

.hp-cta-btns {
    display: flex;
    gap: 11px;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}

.hp-cta-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.hp-cta-bdg {
    font-size: .67rem;
    color: rgba(245, 243, 238, .35);
    display: flex;
    align-items: center;
    gap: 7px;
}

.hp-cta-ck {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7l3.5 3.5L12 3.5' stroke='%23abce3b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* AIREZ css */

/* WHAT IS — split */
.az-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.az-split-img {
    border-radius: 16px;
    overflow: hidden;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ep-light .az-split-img {
    background: #dde8f0;
    box-shadow: 0 14px 44px rgba(11, 18, 32, .12);
}

.ep-dark .az-split-img {
    background: #060e1c;
    box-shadow: 0 14px 44px rgba(0, 0, 0, .5);
}

.az-split-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.az-feats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.az-feat {
    font-size: .7rem;
    font-weight: 600;
    color: #3a6a0a;
    background: rgba(58, 106, 10, .07);
    border: 1px solid rgba(58, 106, 10, .17);
    padding: 5px 14px;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* MODALITY CARDS — dark 3-col */
.az-mg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 44px;
}

.az-mc {
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 26px 22px;
    transition: transform .25s, border-color .25s, box-shadow .25s;
}

.az-mc:hover {
    transform: translateY(-4px);
    border-color: rgba(171, 206, 59, .25);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .4);
}

.az-mi {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(171, 206, 59, .1);
    border: 1px solid rgba(171, 206, 59, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #abce3b;
    margin-bottom: 14px;
}

.az-mi svg {
    width: 21px;
    height: 21px;
}

.az-mt {
    font-family: var(--fd, 'Lora', serif);
    font-size: .98rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 8px;
}

.az-md {
    font-size: .79rem;
    color: rgba(245, 243, 238, .44);
    line-height: 1.62;
    margin: 0;
}

/* APPLICATION CARDS — light 3-col */
.az-ag {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 44px;
}

.az-ac {
    background: #fff;
    border: 1px solid rgba(11, 18, 32, .07);
    border-radius: 16px;
    padding: 26px 22px;
    box-shadow: 0 3px 14px rgba(11, 18, 32, .05);
    transition: transform .25s, box-shadow .25s;
}

.az-ac:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(11, 18, 32, .12);
}

.az-ai {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(58, 106, 10, .08);
    border: 1px solid rgba(58, 106, 10, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3a6a0a;
    margin-bottom: 14px;
}

.az-ai svg {
    width: 21px;
    height: 21px;
}

.az-at {
    font-family: var(--fd, 'Lora', serif);
    font-size: .98rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 7px;
}

.az-ad {
    font-size: .79rem;
    color: #4a6278;
    line-height: 1.62;
    margin: 0;
}

/* SPECS DARK CARD */
.az-sp-out {
    margin-top: 44px;
    background: #0b1220;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 52px rgba(11, 18, 32, .18);
}

.az-sp-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 280px;
}

.az-sp-img {
    background: #060e1c;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.az-sp-img img {
    width: 100%;
    max-width: 300px;
    max-height: 240px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 12px 32px rgba(0, 0, 0, .6));
}

.az-sp-nums {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}

.az-sp-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 2px;
}

.az-sp-sub {
    font-size: .72rem;
    color: rgba(245, 243, 238, .35);
    margin: 0;
}

.az-sp-sg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.az-sp-stat {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 11px;
    padding: 12px 14px;
}

.az-sp-sn {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.35rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
    margin-bottom: 3px;
}

.az-sp-sl {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .35);
}

.az-sp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.az-sp-row {
    display: flex;
    justify-content: space-between;
    padding: 11px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    border-right: 1px solid rgba(255, 255, 255, .06);
    gap: 12px;
}

.az-sp-row:nth-child(even) {
    border-right: none;
}

.az-sp-k {
    font-size: .75rem;
    font-weight: 600;
    color: rgba(245, 243, 238, .5);
}

.az-sp-v {
    font-size: .75rem;
    font-weight: 700;
    color: #f5f3ee;
    text-align: right;
}

/* CTA */
.az-cta {
    background: linear-gradient(135deg, #0b1220 0%, #0d1e2c 60%, #0b1220 100%);
    position: relative;
    overflow: hidden;
}

.az-cta::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -80px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(171, 206, 59, .08), transparent 65%);
    pointer-events: none;
}

.az-cta::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -60px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 120, 255, .07), transparent 65%);
    pointer-events: none;
}

.az-cta-in {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    padding: 56px 70px;
    position: relative;
    z-index: 1;
}

.az-cta-eye {
    display: block;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 14px;
}

.az-cta-h2 {
    text-transform: none;
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3.2vw, 2.7rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #f5f3ee;
    margin: 0 0 13px;
}

.az-cta-h2 em {
    font-style: normal;
    color: #abce3b;
}

.az-cta-p {
    font-size: .9rem;
    color: rgba(245, 243, 238, .48);
    line-height: 1.72;
    margin: 0 auto 28px;
    max-width: 480px;
}

.az-cta-btns {
    display: flex;
    gap: 11px;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}

.az-cta-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.az-cta-bdg {
    font-size: .67rem;
    color: rgba(245, 243, 238, .35);
    display: flex;
    align-items: center;
    gap: 7px;
}

.az-cta-ck {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7l3.5 3.5L12 3.5' stroke='%23abce3b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* TESTIMONIALS */
.testi-sec {
    padding: 80px 0;
    background: #0b1220
}

.testi-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px
}

.testi-eye {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 9px
}

.testi-h2 {
    text-transform: none;
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.02em;
    color: #f5f3ee !important;
    margin: 0 0 44px
}

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

.testi-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color .22s, transform .22s
}

.testi-card:hover {
    border-color: rgba(171, 206, 59, .22);
    transform: translateY(-3px)
}

.testi-stars {
    display: flex;
    gap: 3px
}

.testi-star {
    color: #abce3b;
    font-size: .9rem
}

.testi-quote {
    font-family: var(--fd, 'Lora', serif);
    font-size: .92rem;
    font-style: italic;
    color: rgba(245, 243, 238, .82);
    line-height: 1.72;
    flex: 1
}

.testi-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .07)
}

.testi-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(171, 206, 59, .15);
    border: 1.5px solid rgba(171, 206, 59, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fd, 'Lora', serif);
    font-size: .9rem;
    font-weight: 700;
    color: #abce3b;
    flex-shrink: 0
}

.testi-name {
    font-size: .82rem;
    font-weight: 700;
    color: #f5f3ee;
    display: block;
    margin-bottom: 2px
}

.testi-role {
    font-size: .7rem;
    color: rgba(245, 243, 238, .38)
}

/* HYDROGEN WATER */

/* SPLIT LAYOUT — images always visible, no reveal */
.hw-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hw-split-img {
    border-radius: 16px;
    overflow: hidden;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ep-light .hw-split-img {
    background: #dde8f0;
    box-shadow: 0 14px 44px rgba(11, 18, 32, .12);
}

.ep-dark .hw-split-img {
    background: #060e1c;
    box-shadow: 0 14px 44px rgba(0, 0, 0, .5);
}

.hw-split-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.hw-feats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.hw-feat {
    font-size: .7rem;
    font-weight: 600;
    color: #3a6a0a;
    background: rgba(58, 106, 10, .07);
    border: 1px solid rgba(58, 106, 10, .17);
    padding: 5px 14px;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* FEATURE CARDS */
.hw-fg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 44px;
}

.hw-fc {
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 26px 22px;
    transition: transform .25s, border-color .25s, box-shadow .25s;
}

.hw-fc:hover {
    transform: translateY(-4px);
    border-color: rgba(171, 206, 59, .25);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .4);
}

.hw-fi {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(171, 206, 59, .1);
    border: 1px solid rgba(171, 206, 59, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #abce3b;
    margin-bottom: 14px;
}

.hw-fi svg {
    width: 21px;
    height: 21px;
}

.hw-ft {
    font-family: var(--fd, 'Lora', serif);
    font-size: .98rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 7px;
}

.hw-fd {
    font-size: .79rem;
    color: rgba(245, 243, 238, .44);
    line-height: 1.62;
    margin: 0;
}

/* BENEFITS CARDS — light */
.hw-bg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 44px;
}

.hw-bc {
    background: #fff;
    border: 1px solid rgba(11, 18, 32, .07);
    border-radius: 16px;
    padding: 26px 22px;
    box-shadow: 0 3px 14px rgba(11, 18, 32, .05);
    transition: transform .25s, box-shadow .25s;
}

.hw-bc:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(11, 18, 32, .12);
}

.hw-bi {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(58, 106, 10, .08);
    border: 1px solid rgba(58, 106, 10, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3a6a0a;
    margin-bottom: 14px;
}

.hw-bi svg {
    width: 21px;
    height: 21px;
}

.hw-bt {
    font-family: var(--fd, 'Lora', serif);
    font-size: .98rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 7px;
}

.hw-bd {
    font-size: .79rem;
    color: #4a6278;
    line-height: 1.62;
    margin: 0;
}

/* GALLERY */
.hw-gw {
    margin-top: 28px;
}

.hw-gm {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 460px;
    cursor: zoom-in;
    background: #0d1a28;
    box-shadow: 0 20px 52px rgba(0, 0, 0, .6);
    margin-bottom: 12px;
}

.hw-gi {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .3s;
}

.hw-gm::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35%;
    z-index: 1;
    background: linear-gradient(to top, rgba(2, 8, 16, .52), transparent);
    pointer-events: none;
}

.hw-gh {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 2;
    background: rgba(2, 8, 16, .7);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
    color: rgba(245, 243, 238, .6);
    font-size: .56rem;
    letter-spacing: .1em;
    padding: 5px 12px;
    border-radius: 40px;
    pointer-events: none;
}

.hw-gc {
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 2;
    background: rgba(2, 8, 16, .7);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    color: rgba(245, 243, 238, .45);
    font-size: .62rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 40px;
    pointer-events: none;
}

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

.hw-gth {
    display: block;
    height: 76px;
    border-radius: 9px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .07);
    cursor: pointer;
    padding: 0;
    background: #0a1525;
    opacity: .46;
    transition: opacity .2s, border-color .2s;
    width: 100%;
}

.hw-gth img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.hw-gth.on {
    opacity: 1;
    border-color: #abce3b;
}

.hw-gth:hover:not(.on) {
    opacity: .82;
    border-color: rgba(171, 206, 59, .35);
}

.tc-lb {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(2, 8, 16, .95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
}

.tc-lb.on {
    opacity: 1;
    pointer-events: auto;
}

.tc-lb-img {
    max-width: 88vw;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 10px;
}

.tc-lb-x {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    color: rgba(245, 243, 238, .42);
    font-size: 2.2rem;
    cursor: pointer;
    line-height: 1;
}

.tc-lb-x:hover {
    color: #f5f3ee;
}

/* HP100 SECTION */
.hw-hp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.hw-hp-fc {
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    padding: 22px 18px;
    transition: transform .22s, border-color .22s, box-shadow .22s;
}

.hw-hp-fc:hover {
    transform: translateY(-3px);
    border-color: rgba(171, 206, 59, .22);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}

.hw-hp-card:hover {
    border-color: rgba(171, 206, 59, .22);
}

.hw-hp-fi {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(171, 206, 59, .1);
    border: 1px solid rgba(171, 206, 59, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #abce3b;
    flex-shrink: 0;
}

.hw-hp-fi svg {
    width: 18px;
    height: 18px;
}

.hw-hp-ft {
    font-family: var(--fd, 'Lora', serif);
    font-size: .92rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 4px;
}

.hw-hp-fd {
    font-size: .79rem;
    color: rgba(245, 243, 238, .44);
    line-height: 1.6;
    margin: 0;
}

/* FILTERS */
.hw-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 44px;
}

.hw-fltr {
    background: #fff;
    border: 1px solid rgba(11, 18, 32, .07);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(11, 18, 32, .05);
    transition: transform .25s, box-shadow .25s;
}

.hw-fltr:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(11, 18, 32, .12);
}

.hw-fltr-img {
    height: 180px;
    overflow: hidden;
    background: #eef3f8;
}

.hw-fltr-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hw-fltr-body {
    padding: 22px 20px;
}

.hw-fltr-lbl {
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #3a6a0a;
    display: block;
    margin-bottom: 10px;
}

.hw-fltr-desc {
    font-size: .8rem;
    color: #4a6278;
    line-height: 1.64;
    margin: 0;
}

/* FILTER CERTS */
.hw-certs {
    background: #0b1220;
    border-radius: 16px;
    padding: 28px 32px;
    margin-top: 20px;
}

.hw-cert-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1rem;
    font-weight: 700;
    color: #abce3b;
    margin: 0 0 16px;
}

.hw-cert-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hw-cert-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .82rem;
    color: rgba(245, 243, 238, .55);
    line-height: 1.45;
}

.hw-cert-ck {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' stroke='%23abce3b' stroke-width='1.2'/%3E%3Cpath d='M5 8l2.5 2.5L11 5.5' stroke='%23abce3b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* SPECS DARK CARD */
.hw-sp-out {
    margin-top: 40px;
    background: #0b1220;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 52px rgba(11, 18, 32, .18);
}

.hw-sp-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 260px;
}

.hw-sp-img {
    background: #060e1c;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.hw-sp-img img {
    width: 100%;
    max-width: 280px;
    max-height: 220px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .6));
}

.hw-sp-nums {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}

.hw-sp-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 2px;
}

.hw-sp-sub {
    font-size: .72rem;
    color: rgba(245, 243, 238, .35);
    margin: 0;
}

.hw-sp-sg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.hw-sp-stat {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 11px;
    padding: 12px 14px;
}

.hw-sp-sn {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.35rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
    margin-bottom: 3px;
}

.hw-sp-sl {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .35);
}

.hw-sp-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.hw-sp-card {
    padding: 24px;
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.hw-sp-card:last-child {
    border-right: none;
}

.hw-sp-lbl {
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #abce3b;
    display: block;
    margin-bottom: 13px;
}

.hw-sp-row {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    gap: 10px;
}

.hw-sp-row:last-child {
    border-bottom: none;
}

.hw-sp-k {
    font-size: .75rem;
    font-weight: 600;
    color: rgba(245, 243, 238, .5);
}

.hw-sp-v {
    font-size: .75rem;
    font-weight: 700;
    color: #f5f3ee;
    text-align: right;
}

.hw-sp-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hw-sp-ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .76rem;
    color: rgba(245, 243, 238, .55);
    line-height: 1.44;
}

.hw-sp-ck {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7' cy='7' r='6' stroke='%23abce3b' stroke-width='1.2'/%3E%3Cpath d='M4.5 7l2 2L9.5 5' stroke='%23abce3b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* CTA */
.hw-cta {
    background: linear-gradient(135deg, #0b1220 0%, #0c1f2a 60%, #0b1220 100%);
    position: relative;
    overflow: hidden;
}

.hw-cta::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -80px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(171, 206, 59, .08), transparent 65%);
    pointer-events: none;
}

.hw-cta::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -60px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 150, 255, .07), transparent 65%);
    pointer-events: none;
}

.hw-cta-in {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    padding: 56px 70px;
    position: relative;
    z-index: 1;
}

.hw-cta-eye {
    display: block;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 14px;
}

.hw-cta-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3.2vw, 2.7rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #f5f3ee;
    margin: 0 0 13px;
    text-transform: none;
}

.hw-cta-h2 em {
    font-style: normal;
    color: #abce3b;
}

.hw-cta-p {
    font-size: .9rem;
    color: rgba(245, 243, 238, .48);
    line-height: 1.72;
    margin: 0 auto 28px;
    max-width: 480px;
}

.hw-cta-btns {
    display: flex;
    gap: 11px;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}

.hw-cta-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.hw-cta-bdg {
    font-size: .67rem;
    color: rgba(245, 243, 238, .35);
    display: flex;
    align-items: center;
    gap: 7px;
}

.hw-cta-ck {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7l3.5 3.5L12 3.5' stroke='%23abce3b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* ── FAQ ACCORDION ──────────────────────────────────────────────── */
.faq-sec {
    padding: 72px 0;
    background: #f5f9fc;
}

.faq-sec.ep-dark {
    background: #0b1220;
}

.faq-in {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 70px;
}

.faq-eye {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.ep-light .faq-eye,
.faq-sec:not(.ep-dark) .faq-eye {
    color: #3a6a0a;
}

.ep-dark .faq-eye,
.faq-sec.ep-dark .faq-eye {
    color: #abce3b;
}

.faq-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: 0 0 36px;
}

.faq-sec:not(.ep-dark) .faq-h2 {
    color: #0b1a2e !important;
}

.faq-sec.ep-dark .faq-h2 {
    color: #f5f3ee !important;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(11, 18, 32, .1);
}

.faq-sec.ep-dark .faq-list {
    border-top-color: rgba(255, 255, 255, .07);
}

.faq-item {
    border-bottom: 1px solid rgba(11, 18, 32, .1);
}

.faq-sec.ep-dark .faq-item {
    border-bottom-color: rgba(255, 255, 255, .07);
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    padding: 18px 0;
    font-family: var(--fd, 'Lora', serif);
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.35;
    transition: color .15s;
}

.faq-sec:not(.ep-dark) .faq-q {
    color: #0b1a2e;
}

.faq-sec.ep-dark .faq-q {
    color: #f5f3ee;
}

.faq-sec:not(.ep-dark) .faq-q:hover {
    color: #3a6a0a;
}

.faq-sec.ep-dark .faq-q:hover {
    color: #abce3b;
}

.faq-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .25s;
}

.faq-sec:not(.ep-dark) .faq-icon {
    background: rgba(58, 106, 10, .1);
    border: 1px solid rgba(58, 106, 10, .22);
}

.faq-sec.ep-dark .faq-icon {
    background: rgba(171, 206, 59, .1);
    border: 1px solid rgba(171, 206, 59, .22);
}

.faq-icon svg {
    width: 12px;
    height: 12px;
    transition: transform .25s;
}

.faq-sec:not(.ep-dark) .faq-icon svg {
    stroke: #3a6a0a;
}

.faq-sec.ep-dark .faq-icon svg {
    stroke: #abce3b;
}

.faq-item.open .faq-icon {
    transform: scale(1.1);
}

.faq-item.open .faq-icon svg {
    transform: rotate(180deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .38s cubic-bezier(.22, .68, 0, 1.1), padding .2s;
}

.faq-item.open .faq-a {
    max-height: max-content;
}

.faq-a-inner {
    padding: 0 0 18px;
    font-size: .88rem;
    line-height: 1.76;
}

.faq-sec:not(.ep-dark) .faq-a-inner {
    color: #4a6278;
}

.faq-sec.ep-dark .faq-a-inner {
    color: rgba(245, 243, 238, .52);
}

/* VIBEX PASSPORT */

/* ── SPLIT LAYOUT — images always visible, no reveal class ── */
.vp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.vp-split-img {
    border-radius: 16px;
    overflow: hidden;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ep-light .vp-split-img {
    background: #dde8f0;
    box-shadow: 0 14px 44px rgba(11, 18, 32, .12);
}

.ep-dark .vp-split-img {
    background: #060e1c;
    box-shadow: 0 14px 44px rgba(0, 0, 0, .5);
}

.vp-split-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.vp-feats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.vp-feat {
    font-size: .7rem;
    font-weight: 600;
    color: #3a6a0a;
    background: rgba(58, 106, 10, .07);
    border: 1px solid rgba(58, 106, 10, .17);
    padding: 5px 14px;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.vp-layers {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 22px;
}

.vp-layer {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.vp-layer-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(171, 206, 59, .12);
    border: 1px solid rgba(171, 206, 59, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.vp-layer-icon svg {
    width: 15px;
    height: 15px;
    stroke: #abce3b;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vp-layer-title {
    display: block;
    font-size: .88rem;
    font-weight: 700;
    color: #f5f3ee;
    margin-bottom: 3px;
}

.vp-layer-desc {
    font-size: .8rem;
    color: rgba(245, 243, 238, .48);
    line-height: 1.6;
}

/* ── FEATURES ── */
.vp-fg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 44px;
}

.vp-fc {
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 26px 22px;
    transition: transform .25s, border-color .25s, box-shadow .25s;
}

.vp-fc:hover {
    transform: translateY(-4px);
    border-color: rgba(171, 206, 59, .25);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .4);
}

.vp-fi {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(171, 206, 59, .1);
    border: 1px solid rgba(171, 206, 59, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #abce3b;
    margin-bottom: 14px;
}

.vp-fi svg {
    width: 21px;
    height: 21px;
}

.vp-ft {
    font-family: var(--fd, 'Lora', serif);
    font-size: .98rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 7px;
}

.vp-fd {
    font-size: .79rem;
    color: rgba(245, 243, 238, .44);
    line-height: 1.62;
    margin: 0;
}

/* ── GALLERY ── */
.vp-gw {
    margin-top: 28px;
}

.vp-gm {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 460px;
    cursor: zoom-in;
    background: #0d1a28;
    box-shadow: 0 20px 52px rgba(0, 0, 0, .6);
    margin-bottom: 12px;
}

.vp-gi {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .3s;
}

.vp-gm::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35%;
    z-index: 1;
    background: linear-gradient(to top, rgba(2, 8, 16, .52), transparent);
    pointer-events: none;
}

.vp-gh {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 2;
    background: rgba(2, 8, 16, .7);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
    color: rgba(245, 243, 238, .6);
    font-size: .56rem;
    letter-spacing: .1em;
    padding: 5px 12px;
    border-radius: 40px;
    pointer-events: none;
}

.vp-gc {
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 2;
    background: rgba(2, 8, 16, .7);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    color: rgba(245, 243, 238, .45);
    font-size: .62rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 40px;
    pointer-events: none;
}

.vp-gs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.vp-gth {
    display: block;
    height: 76px;
    border-radius: 9px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .07);
    cursor: pointer;
    padding: 0;
    background: #0a1525;
    opacity: .46;
    transition: opacity .2s, border-color .2s;
    width: 100%;
}

.vp-gth img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.vp-gth.on {
    opacity: 1;
    border-color: #abce3b;
}

.vp-gth:hover:not(.on) {
    opacity: .82;
    border-color: rgba(171, 206, 59, .35);
}

.tc-lb {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(2, 8, 16, .95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
}

.tc-lb.on {
    opacity: 1;
    pointer-events: auto;
}

.tc-lb-img {
    max-width: 88vw;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 10px;
}

.tc-lb-x {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    color: rgba(245, 243, 238, .42);
    font-size: 2.2rem;
    cursor: pointer;
    line-height: 1;
}

.tc-lb-x:hover {
    color: #f5f3ee;
}

/* ── SYMPTOMS ── */
.vp-sg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 40px;
}

.vp-sc {
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    padding: 24px 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: border-color .22s, transform .22s;
}

.vp-sc:hover {
    border-color: rgba(171, 206, 59, .22);
    transform: translateY(-3px);
}

.vp-si {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    object-fit: contain;
    filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(55deg) opacity(.8);
}

.vp-stit {
    font-family: var(--fd, 'Lora', serif);
    font-size: .95rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 5px;
}

.vp-sd {
    font-size: .79rem;
    color: rgba(245, 243, 238, .44);
    line-height: 1.6;
    margin: 0;
}

/* ── INTEGRATION MINI STATS ── */
.vp-ms {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 22px;
}

.vp-ms-c {
    background: rgba(58, 106, 10, .07);
    border: 1px solid rgba(58, 106, 10, .14);
    border-radius: 12px;
    padding: 14px 16px;
}

.vp-ms-n {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1rem;
    font-weight: 700;
    color: #3a6a0a;
    display: block;
    margin-bottom: 2px;
}

.vp-ms-l {
    font-size: .73rem;
    color: #4a6278;
}

/* ── SPECS ── */
.vp-sp-out {
    margin-top: 40px;
    background: #0b1220;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 52px rgba(11, 18, 32, .18);
}

.vp-sp-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 260px;
}

.vp-sp-img {
    background: #060e1c;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.vp-sp-img img {
    width: 100%;
    max-width: 280px;
    max-height: 220px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .6));
}

.vp-sp-nums {
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}

.vp-sp-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 2px;
}

.vp-sp-sub {
    font-size: .72rem;
    color: rgba(245, 243, 238, .35);
    margin: 0;
}

.vp-sp-sg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.vp-sp-stat {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 11px;
    padding: 12px 14px;
}

.vp-sp-sn {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.35rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
    margin-bottom: 3px;
}

.vp-sp-sl {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .35);
}

.vp-sp-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.vp-sp-card {
    padding: 24px;
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.vp-sp-card:last-child {
    border-right: none;
}

.vp-sp-lbl {
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #abce3b;
    display: block;
    margin-bottom: 13px;
}

.vp-sp-row {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    gap: 10px;
}

.vp-sp-row:last-child {
    border-bottom: none;
}

.vp-sp-k {
    font-size: .75rem;
    font-weight: 600;
    color: rgba(245, 243, 238, .5);
}

.vp-sp-v {
    font-size: .75rem;
    font-weight: 700;
    color: #f5f3ee;
    text-align: right;
}

.vp-sp-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vp-sp-ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .76rem;
    color: rgba(245, 243, 238, .55);
    line-height: 1.44;
}

.vp-sp-ck {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7' cy='7' r='6' stroke='%23abce3b' stroke-width='1.2'/%3E%3Cpath d='M4.5 7l2 2L9.5 5' stroke='%23abce3b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.vp-sp-bdg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.vp-sp-bdg:last-child {
    border-bottom: none;
}

.vp-sp-bk {
    font-size: .75rem;
    color: rgba(245, 243, 238, .5);
}

.vp-sp-bv {
    font-size: .67rem;
    font-weight: 700;
    color: #0b1220;
    background: #abce3b;
    padding: 2px 7px;
    border-radius: 3px;
}

.vp-sp-bv.dim {
    background: rgba(255, 255, 255, .08);
    color: rgba(245, 243, 238, .5);
}

/* ── CTA ── */
.vp-cta {
    background: linear-gradient(135deg, #0b1220 0%, #0e2214 60%, #0b1220 100%);
    position: relative;
    overflow: hidden;
}

.vp-cta::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -80px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(171, 206, 59, .08), transparent 65%);
    pointer-events: none;
}

.vp-cta::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -60px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 100, 200, .07), transparent 65%);
    pointer-events: none;
}

.vp-cta-in {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    padding: 56px 70px;
    position: relative;
    z-index: 1;
}

.vp-cta-eye {
    display: block;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 14px;
}

.vp-cta-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3.2vw, 2.7rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #f5f3ee;
    margin: 0 0 13px;
    text-transform: none;
}

.vp-cta-h2 em {
    font-style: normal;
    color: #abce3b;
}

.vp-cta-p {
    font-size: .9rem;
    color: rgba(245, 243, 238, .48);
    line-height: 1.72;
    margin: 0 auto 28px;
    max-width: 480px;
}

.vp-cta-btns {
    display: flex;
    gap: 11px;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}

.vp-cta-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.vp-cta-bdg {
    font-size: .67rem;
    color: rgba(245, 243, 238, .35);
    display: flex;
    align-items: center;
    gap: 7px;
}

.vp-cta-ck {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7l3.5 3.5L12 3.5' stroke='%23abce3b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* QUANTUM CELLULAR SCAN TRAINING css */

/* PAGE HERO */
.qcs-header {
    background: #020810;
    margin-top: var(--nh, 70px);
    padding: 60px 70px 52px;
    position: relative;
    overflow: hidden;
}

.qcs-header::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 65% 80% at 88% 45%, rgba(171, 206, 59, .09) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 6% 75%, rgba(0, 80, 200, .07) 0%, transparent 55%);
}

.qcs-header::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(171, 206, 59, .02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(171, 206, 59, .02) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 70% 70% at 80% 50%, black 0%, transparent 65%);
}

.qcs-header-in {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: center;
}

.qcs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 14px;
}

.qcs-eyebrow-line {
    width: 28px;
    height: 1px;
    background: rgba(171, 206, 59, .5);
}

.qcs-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2rem, 3.8vw, 3.2rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.028em;
    color: #f5f3ee !important;
    margin: 0 0 10px;
    text-transform: none;
}

.qcs-h1 em {
    font-style: normal;
    color: #abce3b;
}

.qcs-instructor {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .35);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.qcs-instructor-dot {
    width: 20px;
    height: 1px;
    background: rgba(245, 243, 238, .2);
}

.qcs-sub {
    font-size: .9rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.68;
    margin: 0 0 28px;
    max-width: 520px;
}

.qcs-stats {
    display: flex;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 20px;
}

.qcs-stat {
    flex: 1;
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.qcs-stat:last-child {
    border-right: none;
    padding-right: 0;
    padding-left: 20px;
}

.qcs-stat:first-child {
    padding-left: 0;
}

.qcs-sn {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
    margin-bottom: 3px;
}

.qcs-sl {
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .28);
}

/* Header right — visual accent */
.qcs-header-vis {
    position: relative;
    z-index: 2;
}

.qcs-progress-ring {
    width: 160px;
    height: 160px;
}

/* REVEAL */
.r-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s cubic-bezier(.22, .68, 0, 1.1), transform .55s cubic-bezier(.22, .68, 0, 1.1);
    transition-delay: var(--d, 0s);
}

.r-up.on {
    opacity: 1;
}

/* MAIN */
.qcs-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 70px 80px;
}

/* Section header */
.qcs-sec-head {
    margin-bottom: 28px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.qcs-sec-eye {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #3a6a0a;
    margin-bottom: 9px;
}

.qcs-sec-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.6rem, 2.8vw, 2.3rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #0b1a2e !important;
    margin: 0;
    text-transform: none;
}

.qcs-sec-h2 em {
    font-style: normal;
    color: #3a6a0a;
}

/* Category filter chips */
.qcs-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.qcs-cat {
    font-size: .68rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 40px;
    cursor: pointer;
    transition: all .15s;
    border: 1.5px solid;
    font-family: var(--fd);
}

.qcs-cat[data-cat="all"] {
    color: #3a6a0a;
    background: rgba(58, 106, 10, .1);
    border-color: rgba(58, 106, 10, .25);
}

.qcs-cat[data-cat="all"].active,
.qcs-cat[data-cat="all"]:hover {
    background: #3a6a0a;
    color: #fff;
    border-color: #3a6a0a;
}

.qcs-cat:not([data-cat="all"]).active {
    filter: brightness(.9);
}

/* LESSONS GRID */
.qcs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* LESSON CARD */
.qcs-card {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(11, 18, 32, .06);
    transition: transform .24s cubic-bezier(.22, .68, 0, 1.1), box-shadow .24s, border-color .24s;
    cursor: pointer;
}

.qcs-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 40px rgba(11, 18, 32, .14);
    border-color: rgba(58, 106, 10, .25);
}

.qcs-card.hidden {
    display: none;
}

/* Card image */
.qcs-card-img {
    position: relative;
    height: 148px;
    background: #0b1220;
    overflow: hidden;
}

.qcs-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s;
}

.qcs-card:hover .qcs-card-img img {
    transform: scale(1.05);
}

.qcs-overlay {
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 16, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s;
}

.qcs-card:hover .qcs-overlay {
    opacity: 1;
}

.qcs-play {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(171, 206, 59, .9);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s, box-shadow .2s;
    color: #0b1220;
}

.qcs-play svg {
    width: 16px;
    height: 16px;
    margin-left: 2px;
}

.qcs-card:hover .qcs-play {
    transform: scale(1.1);
    box-shadow: 0 0 28px rgba(171, 206, 59, .5);
}

.qcs-num {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(2, 8, 16, .82);
    color: #abce3b;
    font-family: var(--fd, 'Lora', serif);
    font-size: .75rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 5px;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(171, 206, 59, .25);
    line-height: 1.4;
}

/* Card body */
.qcs-card-body {
    padding: 14px 14px 16px;
}

.qcs-tag {
    display: inline-block;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 40px;
    border: 1px solid;
    margin-bottom: 8px;
}

.qcs-card-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: .9rem;
    font-weight: 700;
    color: #0b1a2e !important;
    margin: 0 0 6px;
    line-height: 1.28;
}

.qcs-card-desc {
    font-size: .74rem;
    color: #4a6278;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* LIGHTBOX */
.qcs-lb {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(2, 8, 16, .96);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
    padding: 20px;
}

.qcs-lb.on {
    opacity: 1;
    pointer-events: auto;
}

.qcs-lb-img {
    max-width: 92vw;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .8);
}

.qcs-lb-cap {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1rem;
    font-weight: 700;
    color: #f5f3ee;
    text-align: center;
    max-width: 600px;
}

.qcs-lb-sub {
    font-size: .76rem;
    color: rgba(245, 243, 238, .45);
}

.qcs-lb-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
}

.qcs-lb-btn {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    color: rgba(245, 243, 238, .7);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 8px 18px;
    border-radius: 7px;
    cursor: pointer;
    transition: background .15s;
    font-family: var(--fd);
}

.qcs-lb-btn:hover {
    background: rgba(255, 255, 255, .16);
    color: #f5f3ee;
}

.qcs-lb-btn.primary {
    background: #abce3b;
    color: #0b1220;
    border-color: #abce3b;
}

.qcs-lb-btn.primary:hover {
    background: #c8e855;
}

.qcs-lb-x {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    color: rgba(245, 243, 238, .4);
    font-size: 2.2rem;
    cursor: pointer;
    line-height: 1;
}

.qcs-lb-x:hover {
    color: #f5f3ee;
}

.qcs-lb-counter {
    font-size: .65rem;
    color: rgba(245, 243, 238, .3);
}

.qcs-lb-video {
    max-width: 800px;
    border-radius: 15px;
}

/* SUPPORT STRIP */
.qcs-support {
    margin-top: 56px;
    background: #0b1220;
    border-radius: 18px;
    padding: 36px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 16px 48px rgba(11, 18, 32, .18);
    position: relative;
    overflow: hidden;
}

.qcs-support::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(171, 206, 59, .07), transparent 65%);
    pointer-events: none;
}

.qcs-support-txt h3 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: #f5f3ee !important;
    margin: 0 0 7px;
}

.qcs-support-txt p {
    font-size: .84rem;
    color: rgba(245, 243, 238, .48);
    line-height: 1.62;
    margin: 0;
    max-width: 420px;
}

.qcs-support-btns {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

/* Theta chamber page css */

/* Reveal */
.r-card {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s cubic-bezier(.22, .68, 0, 1.1), transform .55s cubic-bezier(.22, .68, 0, 1.1);
    transition-delay: var(--d, 0s);
}

.r-card.on {
    opacity: 1;
    transform: none;
}

/* Sections */
.tc-sec {
    padding: 80px 0;
}

.tc-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px;
}

.ep-light {
    background: #f5f9fc;
}

.ep-dark {
    background: #0b1220;
}

/* Headings — same system as equipment page, colour via context */
.ep-eyebrow {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.ep-light .ep-eyebrow {
    color: #3a6a0a;
}

.ep-dark .ep-eyebrow {
    color: #abce3b;
}

.ep-sec-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3.2vw, 2.9rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.02em;
    margin: 0;
}

.ep-light .ep-sec-title {
    color: #0b1a2e;
}

.ep-dark .ep-sec-title {
    color: #f5f3ee;
}

.tc-body {
    font-size: .93rem;
    line-height: 1.76;
    margin-top: 14px;
    max-width: 530px;
}

.ep-light .tc-body {
    color: #4a6278;
}

.ep-dark .tc-body {
    color: rgba(245, 243, 238, .52);
}

/* ── HERO ── */
/* ── HERO: premium dark split ── */
.tch {
    display: grid;
    grid-template-columns: 52% 48%;
    height: 460px;
    background: #020810;
    overflow: hidden;
    margin-top: var(--nh, 70px);
}

/* Left text panel */
.tch-l {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 44px 40px 70px;
    position: relative;
    z-index: 2;
    background: linear-gradient(108deg, #020810 0%, rgba(2, 8, 16, .97) 55%, rgba(2, 8, 16, .55) 100%);
}

/* Right interactive panel */
.tch-r {
    position: relative;
    background: #020810;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 3D stage — fills all space above thumbstrip */
.tch-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    cursor: crosshair;
    position: relative;
    overflow: hidden;
}

/* Subtle ambient glow in background */
.tch-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 60% at 55% 45%, rgba(171, 206, 59, .07) 0%, transparent 70%);
}

/* The tilting product container */
.tch-product {
    width: 82%;
    height: 82%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
    transition: transform 0.08s linear;
    will-change: transform;
}

/* Product image */
.tch-product-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .75)) drop-shadow(0 4px 12px rgba(0, 0, 0, .5));
    pointer-events: none;
    transition: opacity 0.18s ease;
}

/* Glare overlay — moves with mouse */
.tch-shine {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .05) 0%, transparent 60%);
    pointer-events: none;
    border-radius: 8px;
    mix-blend-mode: screen;
}

/* Ground reflection */
.tch-ground {
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 28px;
    background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(171, 206, 59, .15) 0%, transparent 70%);
    pointer-events: none;
}

/* Thumbnail strip */
.tch-thumbs {
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    padding: 10px 16px 14px;
    background: rgba(2, 8, 16, .6);
    border-top: 1px solid rgba(255, 255, 255, .06);
    flex-shrink: 0;
}

.tch-thumb {
    width: 46px;
    height: 38px;
    border-radius: 7px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .12);
    cursor: pointer;
    padding: 0;
    background: #0a1525;
    opacity: .52;
    transition: opacity .18s, border-color .18s, transform .18s;
    flex-shrink: 0;
}

.tch-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.tch-thumb.on {
    opacity: 1;
    border-color: #abce3b;
}

.tch-thumb:hover:not(.on) {
    opacity: .8;
    border-color: rgba(171, 206, 59, .4);
    transform: translateY(-2px);
}

/* Hint label */
.tch-hint-label {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .35);
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.tch-hint-label svg {
    opacity: .5;
}

/* Live badge */
.tch-badge {
    position: absolute;
    bottom: 58px;
    right: 14px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(2, 8, 16, .78);
    border: 1px solid rgba(171, 206, 59, .28);
    backdrop-filter: blur(10px);
    padding: 6px 13px;
    border-radius: 6px;
    pointer-events: none;
}

.tch-bdot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #abce3b;
    animation: tch-blink 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes tch-blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .2
    }
}

.tch-badge span:last-child {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .6);
}

/* Hero text */
.tch-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(171, 206, 59, .08);
    border: 1px solid rgba(171, 206, 59, .24);
    color: #abce3b;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 40px;
    margin-bottom: 17px;
    width: fit-content;
    animation: tch-up .5s ease both;
}

.tch-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #abce3b;
    animation: tch-pulse 2.2s ease-in-out infinite;
}

@keyframes tch-pulse {

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

    50% {
        opacity: .25;
        transform: scale(.6)
    }
}

@keyframes tch-up {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.tch-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2rem, 3.2vw, 3rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.025em;
    color: #f5f3ee;
    margin: 0 0 5px;
    animation: tch-up .5s .1s ease both;
}

.tch-byline {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .3);
    display: block;
    margin-bottom: 16px;
    animation: tch-up .5s .18s ease both;
}

.tch-p {
    font-size: .88rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.72;
    max-width: 380px;
    margin: 0 0 23px;
    animation: tch-up .5s .26s ease both;
}

.tch-btns {
    display: flex;
    gap: 11px;
    align-items: center;
    margin-bottom: 26px;
    animation: tch-up .5s .34s ease both;
}

.tch-stats {
    display: flex;
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding-top: 18px;
    animation: tch-up .5s .42s ease both;
}

.tch-stat {
    flex: 1;
    padding-right: 16px;
    border-right: 1px solid rgba(255, 255, 255, .07);
}

.tch-stat:last-child {
    border-right: none;
    padding-right: 0;
    padding-left: 16px;
}

.tch-stat:first-child {
    padding-left: 0;
}

.tch-sn {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
    margin-bottom: 3px;
}

.tch-sl {
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .28);
}

/* ── WHAT IS ── */
.tcw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 68px;
    align-items: center;
}

.tcw-img {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 52px rgba(11, 18, 32, .14);
}

.tcw-img img {
    width: 100%;
    display: block;
}

.tcw-feats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.tcw-feat {
    font-size: .7rem;
    font-weight: 600;
    color: #3a6a0a;
    background: rgba(58, 106, 10, .07);
    border: 1px solid rgba(58, 106, 10, .17);
    padding: 5px 14px;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tcw-stat-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: linear-gradient(135deg, #e8f3e8, #eef5f0);
    border-radius: 14px;
    border: 1px solid rgba(58, 106, 10, .1);
    overflow: hidden;
    margin-top: 24px;
}

.tcw-stat {
    padding: 18px 14px;
    text-align: center;
    border-right: 1px solid rgba(58, 106, 10, .1);
}

.tcw-stat:last-child {
    border-right: none;
}

.tcw-stat-n {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: #3a6a0a;
    display: block;
    line-height: 1;
}

.tcw-stat-l {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #4a7a18;
    opacity: .7;
}

/* ── GALLERY ── */
.tcg-wrap {
    margin-top: 28px;
}

.tcg-main {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 460px;
    cursor: zoom-in;
    box-shadow: 0 20px 56px rgba(0, 0, 0, .6);
    background: #0d1a28;
    margin-bottom: 12px;
}

.tcg-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .3s ease;
}

.tcg-main::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35%;
    z-index: 1;
    background: linear-gradient(to top, rgba(2, 8, 16, .52), transparent);
    pointer-events: none;
}

.tcg-hint {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 2;
    background: rgba(2, 8, 16, .7);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
    color: rgba(245, 243, 238, .6);
    font-size: .56rem;
    letter-spacing: .1em;
    padding: 5px 12px;
    border-radius: 40px;
    pointer-events: none;
}

.tcg-count {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 2;
    background: rgba(2, 8, 16, .7);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
    color: rgba(245, 243, 238, .45);
    font-size: .62rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 40px;
    pointer-events: none;
}

.tcg-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.tcg-th {
    display: block;
    height: 78px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .07);
    cursor: pointer;
    padding: 0;
    background: none;
    opacity: .46;
    transition: opacity .2s, border-color .2s;
    width: 100%;
}

.tcg-ti {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.tcg-th.tcg-on {
    opacity: 1;
    border-color: #abce3b;
}

.tcg-th:hover:not(.tcg-on) {
    opacity: .82;
    border-color: rgba(171, 206, 59, .35);
}

/* Lightbox */
.tc-lb {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(2, 8, 16, .95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
}

.tc-lb.on {
    opacity: 1;
    pointer-events: auto;
}

.tc-lb-img {
    max-width: 88vw;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 10px;
}

.tc-lb-x {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    color: rgba(245, 243, 238, .42);
    font-size: 2.2rem;
    cursor: pointer;
    line-height: 1;
}

.tc-lb-x:hover {
    color: #f5f3ee;
}

/* ── VIDEO ── */
.tcv-wrap {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 52px rgba(0, 0, 0, .45);
    margin-top: 28px;
}

.tcv-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.tcv-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ── BENEFITS ── */
.tcb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 44px;
}

.tcb-card {
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 28px 24px;
    transition: transform .25s, border-color .25s, box-shadow .25s;
}

.tcb-card:hover {
    transform: translateY(-4px);
    border-color: rgba(171, 206, 59, .25);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .4);
}

.tcb-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(171, 206, 59, .1);
    border: 1px solid rgba(171, 206, 59, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #abce3b;
    margin-bottom: 16px;
}

.tcb-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 8px;
}

.tcb-desc {
    font-size: .79rem;
    color: rgba(245, 243, 238, .44);
    line-height: 1.64;
    margin: 0;
}

/* ── INDICATIONS ── */
.tci-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.tci-pill {
    font-size: .7rem;
    font-weight: 600;
    color: rgba(11, 18, 32, .65);
    background: rgba(11, 18, 32, .06);
    border: 1px solid rgba(11, 18, 32, .1);
    padding: 7px 16px;
    border-radius: 40px;
    cursor: default;
    transition: all .18s;
}

.tci-pill:hover {
    background: rgba(58, 106, 10, .09);
    border-color: rgba(58, 106, 10, .25);
    color: #3a6a0a;
}

/* ── MODALITIES ── */
.tcm-header {
    margin-bottom: 56px;
}

.tcm-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 68px;
    align-items: center;
    padding: 56px 0;
    border-bottom: 1px solid rgba(11, 18, 32, .07);
}

.tcm-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.tcm-rev .tcm-img {
    order: 2;
}

.tcm-rev .tcm-body {
    order: 1;
}

.tcm-img {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(11, 18, 32, .13);
}

.tcm-img img {
    width: 100%;
    display: block;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.tcm-num {
    font-family: var(--fd, 'Lora', serif);
    font-size: 3rem;
    font-weight: 700;
    color: rgba(11, 18, 32, .07);
    display: block;
    line-height: 1;
    margin-bottom: -4px;
}

.tcm-htitle {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 700;
    color: #0b1a2e;
    line-height: 1.12;
    margin: 0 0 12px;
}

.tcm-text {
    font-size: .87rem;
    color: #4e6579;
    line-height: 1.78;
    margin: 0 0 18px;
}

.tcm-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tcm-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .8rem;
    color: #3a5918;
    font-weight: 600;
    line-height: 1.4;
}

.tcm-ck {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(58, 89, 24, .1);
    border: 1px solid rgba(58, 89, 24, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

/* ── BRAINWAVES ── */
.tcbw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    margin-top: 44px;
}

.tcbw-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    column-gap: 16px;
    row-gap: 4px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.tcbw-row:last-child {
    border-bottom: none;
}

.tcbw-hz {
    font-size: .54rem;
    color: rgba(245, 243, 238, .3);
    display: block;
    letter-spacing: .06em;
    font-family: var(--fd);
}

.tcbw-nm {
    font-family: var(--fd, 'Lora', serif);
    font-size: .92rem;
    font-weight: 700;
    color: rgba(245, 243, 238, .5);
}

.tcbw-on .tcbw-nm {
    color: #abce3b;
    font-size: 1rem;
}

.tcbw-bw {
    background: rgba(255, 255, 255, .06);
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
    align-self: center;
}

/* Bar colour set inline via style attribute per row */
.tcbw-b {
    height: 100%;
    border-radius: 4px;
    display: block;
}

.tcbw-d {
    grid-column: 1/-1;
    font-size: .72rem;
    color: rgba(245, 243, 238, .32);
    line-height: 1.5;
    margin: 0;
    padding-top: 2px;
}

.tcbw-on .tcbw-d {
    color: rgba(245, 243, 238, .62);
    font-weight: 500;
}

.tcbw-aside {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tcbw-photo {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
}

.tcbw-photo img {
    width: 100%;
    display: block;
}

.tcbw-callout {
    background: rgba(171, 206, 59, .05);
    border: 1px solid rgba(171, 206, 59, .14);
    border-left: 3px solid #abce3b;
    border-radius: 0 14px 14px 0;
    padding: 22px 24px;
}

.tcbw-callout strong {
    font-family: var(--fd, 'Lora', serif);
    color: #abce3b;
    display: block;
    margin-bottom: 8px;
    font-size: .95rem;
}

.tcbw-callout p {
    font-size: .83rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.72;
    margin: 0;
}

/* ── TESTIMONIALS ── */
.tct-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 44px;
}

.tct-card {
    background: #fff;
    border-radius: 16px;
    padding: 26px 22px;
    border: 1px solid rgba(11, 18, 32, .06);
    box-shadow: 0 3px 16px rgba(11, 18, 32, .06);
    display: flex;
    flex-direction: column;
    transition: transform .25s, box-shadow .25s;
}

.tct-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(11, 18, 32, .12);
}

.tct-stars {
    font-size: .84rem;
    color: #f4c21f;
    letter-spacing: 2px;
    margin-bottom: 14px;
    display: block;
}

.tct-card blockquote {
    font-family: var(--fd, 'Lora', serif);
    font-size: .92rem;
    font-style: italic;
    color: #0b1a2e;
    line-height: 1.55;
    margin: 0 0 16px;
    flex: 1;
}

.tct-foot {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: auto;
}

.tct-av {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #abce3b, #7aa32a);
    color: #0b1220;
    font-size: .9rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tct-name {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: #0b1a2e;
}

.tct-role {
    font-size: .65rem;
    color: #5a8a1a;
    font-weight: 600;
    display: block;
    margin-top: 1px;
}

/* ── FAQ ── */
.tcf-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 52px;
    margin-top: 40px;
}

.tcf-item {
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.tcf-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--fd, 'Lora', serif);
    font-size: .92rem;
    font-weight: 700;
    color: #f5f3ee;
    cursor: pointer;
    padding: 18px 0;
    list-style: none;
    gap: 14px;
}

.tcf-q::-webkit-details-marker {
    display: none;
}

.tcf-ico {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    position: relative;
    transition: background .18s, border-color .18s, transform .22s;
}

.tcf-ico::before,
.tcf-ico::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: #f5f3ee;
    border-radius: 1px;
}

.tcf-ico::before {
    width: 9px;
    height: 1.5px;
    margin: -.75px 0 0 -4.5px;
}

.tcf-ico::after {
    width: 1.5px;
    height: 9px;
    margin: -4.5px 0 0 -.75px;
}

details[open] .tcf-q {
    color: #abce3b;
}

details[open] .tcf-ico {
    background: #abce3b;
    border-color: #abce3b;
    transform: rotate(45deg);
}

details[open] .tcf-ico::before,
details[open] .tcf-ico::after {
    background: #0b1220;
}

.tcf-ans {
    padding: 0 0 18px;
    animation: tcf-open .22s ease;
}

@keyframes tcf-open {
    from {
        opacity: 0;
        transform: translateY(-4px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.tcf-ans p {
    font-size: .86rem;
    color: rgba(245, 243, 238, .48);
    line-height: 1.76;
    margin: 0;
}

/* ── SPECS ── */
/* Outer: dark card wrapping everything so it looks cohesive */
.tcsp-outer {
    margin-top: 44px;
    background: #0b1220;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 56px rgba(11, 18, 32, .18);
}

/* Top hero strip: large image left, key numbers right */
.tcsp-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 340px;
}

/* Image panel */
.tcsp-img-panel {
    background: #060e1c;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.tcsp-img-panel img {
    width: 100%;
    max-width: 340px;
    object-fit: contain;
    display: block;
}

/* Numbers panel */
.tcsp-nums {
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}

.tcsp-nums-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 4px;
    letter-spacing: -.01em;
}

.tcsp-nums-sub {
    font-size: .72rem;
    color: rgba(245, 243, 238, .35);
    letter-spacing: .04em;
    margin: 0;
}

.tcsp-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.tcsp-stat {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    padding: 16px 18px;
}

.tcsp-stat-n {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
    margin-bottom: 4px;
}

.tcsp-stat-l {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .35);
}

/* Bottom row: three equal cards on dark background */
.tcsp-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.tcsp-card {
    padding: 28px 28px;
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.tcsp-card:last-child {
    border-right: none;
}

.tcsp-lbl {
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #abce3b;
    display: block;
    margin-bottom: 16px;
}

.tcsp-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    gap: 10px;
}

.tcsp-row:last-child {
    border-bottom: none;
}

.tcsp-k {
    font-size: .76rem;
    font-weight: 600;
    color: rgba(245, 243, 238, .5);
}

.tcsp-v {
    font-size: .76rem;
    font-weight: 700;
    color: #f5f3ee;
    text-align: right;
}

/* Checklist items */
.tcsp-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tcsp-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .77rem;
    color: rgba(245, 243, 238, .55);
    line-height: 1.45;
}

.tcsp-ck {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' stroke='%23abce3b' stroke-width='1.2'/%3E%3Cpath d='M5 8l2.5 2.5L11 5.5' stroke='%23abce3b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Badge row in card 3 */
.tcsp-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    gap: 10px;
}

.tcsp-badge-row:last-child {
    border-bottom: none;
}

.tcsp-badge-k {
    font-size: .76rem;
    font-weight: 600;
    color: rgba(245, 243, 238, .5);
}

.tcsp-badge-v {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: #0b1220;
    background: #abce3b;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.tcsp-badge-v.muted {
    background: rgba(255, 255, 255, .08);
    color: rgba(245, 243, 238, .5);
}

/* ── CTA ── */
.tccta {
    background: linear-gradient(135deg, #0b1220 0%, #0e2214 60%, #0b1220 100%);
    position: relative;
    overflow: hidden;
}

.tccta::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -80px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(171, 206, 59, .08) 0%, transparent 65%);
    pointer-events: none;
}

.tccta::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -60px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 100, 200, .07) 0%, transparent 65%);
    pointer-events: none;
}

.tccta-in {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    padding: 48px 70px;
    position: relative;
    z-index: 1;
}

.tccta-eye {
    display: block;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 14px;
}

.tccta-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3.2vw, 2.8rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #f5f3ee;
    margin: 0 0 16px;
    text-transform: none;
}

.tccta-h2 em {
    font-style: normal;
    color: #abce3b;
}

.tccta-p {
    font-size: .9rem;
    color: rgba(245, 243, 238, .48);
    line-height: 1.72;
    margin: 0 auto 34px;
    max-width: 480px;
}

.tccta-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin-bottom: 34px;
}

.tccta-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.tccta-badge {
    font-size: .67rem;
    color: rgba(245, 243, 238, .35);
    display: flex;
    align-items: center;
    gap: 7px;
}

.tccta-ck {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7l3.5 3.5L12 3.5' stroke='%23abce3b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Qest4 Holistic Equipment page css */

.r-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s cubic-bezier(.22, .68, 0, 1.1), transform .55s cubic-bezier(.22, .68, 0, 1.1);
    transition-delay: var(--d, 0s);
}

.tc-sec {
    padding: 80px 0;
}

.tc-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px;
}

.ep-light {
    background: #f5f9fc;
}

.ep-dark {
    background: #0b1220;
}

.ep-eyebrow {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.ep-light .ep-eyebrow {
    color: #3a6a0a;
}

.ep-dark .ep-eyebrow {
    color: #abce3b;
}

.ep-sec-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3.2vw, 2.9rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.02em;
    margin: 0;
}

.ep-light .ep-sec-title {
    color: #0b1a2e;
}

.ep-dark .ep-sec-title {
    color: #f5f3ee;
}

.tc-body {
    font-size: .93rem;
    line-height: 1.76;
    margin-top: 14px;
    max-width: 560px;
}

.ep-light .tc-body {
    color: #4a6278;
}

.ep-dark .tc-body {
    color: rgba(245, 243, 238, .52);
}

/* HERO */
.tch {
    display: grid;
    grid-template-columns: 52% 48%;
    height: 500px;
    background: #020810;
    overflow: hidden;
    margin-top: var(--nh, 70px);
}

.tch-l {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 44px 40px 70px;
    position: relative;
    z-index: 2;
    background: linear-gradient(108deg, #020810 0%, rgba(2, 8, 16, .97) 55%, rgba(2, 8, 16, .55) 100%);
}

/* Hero right: SVG illustration panel */
.tch-r {
    position: relative;
    background: #020810;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tch-r::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 70% at 55% 45%, rgba(171, 206, 59, .08) 0%, transparent 65%),
        radial-gradient(ellipse 40% 40% at 80% 75%, rgba(0, 100, 200, .06) 0%, transparent 55%);
}

/* Grid overlay */
.tch-r::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(171, 206, 59, .02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(171, 206, 59, .02) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 70% at 55% 50%, black 0%, transparent 70%);
}

.q4-hero-vis {
    position: relative;
    z-index: 2;
    width: 80%;
    max-width: 400px;
}

.tch-badge {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(2, 8, 16, .78);
    border: 1px solid rgba(171, 206, 59, .28);
    backdrop-filter: blur(10px);
    padding: 6px 13px;
    border-radius: 6px;
    pointer-events: none;
}

.tch-bdot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #abce3b;
    animation: tch-blink 1.4s ease-in-out infinite;
}

@keyframes tch-blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .2
    }
}

.tch-badge span:last-child {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .6);
}

.tch-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(171, 206, 59, .08);
    border: 1px solid rgba(171, 206, 59, .24);
    color: #abce3b;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 40px;
    margin-bottom: 17px;
    width: fit-content;
    animation: tch-up .5s ease both;
}

.tch-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #abce3b;
    animation: tch-pulse 2.2s ease-in-out infinite;
}

@keyframes tch-pulse {

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

    50% {
        opacity: .25;
        transform: scale(.6)
    }
}

@keyframes tch-up {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.tch-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.9rem, 3vw, 2.9rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.025em;
    color: #f5f3ee;
    margin: 0 0 5px;
    animation: tch-up .5s .1s ease both;
}

.tch-byline {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .3);
    display: block;
    margin-bottom: 16px;
    animation: tch-up .5s .18s ease both;
}

.tch-p {
    font-size: .88rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.72;
    max-width: 380px;
    margin: 0 0 22px;
    animation: tch-up .5s .26s ease both;
}

.tch-btns {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 24px;
    animation: tch-up .5s .34s ease both;
}

.tch-stats {
    display: flex;
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding-top: 16px;
    animation: tch-up .5s .42s ease both;
}

.tch-stat {
    flex: 1;
    padding-right: 14px;
    border-right: 1px solid rgba(255, 255, 255, .07);
}

.tch-stat:last-child {
    border-right: none;
    padding-right: 0;
    padding-left: 14px;
}

.tch-stat:first-child {
    padding-left: 0;
}

.tch-sn {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
    margin-bottom: 3px;
}

.tch-sl {
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .28);
}

/* WHAT IS — split with large editorial text */
.q4-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.q4-intro-img {
    position: sticky;
    top: calc(var(--nh, 70px) + 60px);
}

.q4-intro-img img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(11, 18, 32, .14);
    display: block;
}

.q4-lede {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.72;
    color: #0b1a2e;
    margin: 18px 0 0;
    font-style: italic;
}

.q4-feats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.q4-feat {
    font-size: .7rem;
    font-weight: 600;
    color: #3a6a0a;
    background: rgba(58, 106, 10, .07);
    border: 1px solid rgba(58, 106, 10, .17);
    padding: 5px 14px;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* HOW TO USE — 4-step horizontal flow */
.q4-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin-top: 52px;
    border-radius: 16px;
    overflow: hidden;
}

.q4-step {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    padding: 28px 22px;
    position: relative;
    transition: background .25s, border-color .25s;
}

.q4-step:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(171, 206, 59, .2);
}

.q4-step-num {
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: var(--fd, 'Lora', serif);
    font-size: 2.4rem;
    font-weight: 700;
    color: rgba(171, 206, 59, .1);
    line-height: 1;
}

.q4-step-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(171, 206, 59, .1);
    border: 1px solid rgba(171, 206, 59, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #abce3b;
    margin-bottom: 16px;
}

.q4-step-icon svg {
    width: 20px;
    height: 20px;
}

.q4-step-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: .98rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 8px;
}

.q4-step-desc {
    font-size: .79rem;
    color: rgba(245, 243, 238, .44);
    line-height: 1.62;
    margin: 0;
}

/* DATABASE CARDS */
.q4-dg {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 48px;
}

.q4-dc {
    background: #fff;
    border: 1px solid rgba(11, 18, 32, .07);
    border-radius: 14px;
    padding: 24px 20px;
    box-shadow: 0 3px 14px rgba(11, 18, 32, .05);
    transition: transform .22s, box-shadow .22s, border-color .22s;
}

.q4-dc:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(11, 18, 32, .1);
    border-color: rgba(58, 106, 10, .2);
}

.q4-di {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(58, 106, 10, .08);
    border: 1px solid rgba(58, 106, 10, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3a6a0a;
    margin-bottom: 12px;
}

.q4-di svg {
    width: 19px;
    height: 19px;
}

.q4-dt {
    font-family: var(--fd, 'Lora', serif);
    font-size: .9rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 6px;
}

.q4-dd {
    font-size: .77rem;
    color: #4a6278;
    line-height: 1.6;
    margin: 0;
}

/* DATABASE STAT STRIP */
.q4-db-stat {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 40px;
    padding: 24px 32px;
    background: #0b1220;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .07);
}

.q4-db-stat-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.q4-db-stat-n {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.8rem;
    font-weight: 700;
    color: #abce3b;
    line-height: 1;
}

.q4-db-stat-l {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .38);
}

.q4-db-stat-sep {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, .1);
    flex-shrink: 0;
}

/* PRACTITIONERS grid */
.q4-practs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 36px;
}

.q4-pract {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(58, 106, 10, .06);
    border: 1px solid rgba(58, 106, 10, .15);
    border-radius: 40px;
    padding: 8px 16px;
    font-size: .78rem;
    font-weight: 600;
    color: #3a6a0a;
    transition: background .18s, border-color .18s, transform .18s;
}

.q4-pract:hover {
    background: rgba(58, 106, 10, .12);
    border-color: rgba(58, 106, 10, .3);
    transform: translateY(-2px);
}

.q4-pract svg {
    flex-shrink: 0;
    color: #3a6a0a;
}

/* DOWNLOAD CTA block inside page */
.q4-dl-block {
    margin-top: 48px;
    background: linear-gradient(108deg, #0b1220, #0e2010);
    border: 1px solid rgba(171, 206, 59, .18);
    border-radius: 16px;
    padding: 36px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.q4-dl-txt h3 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 8px;
}

.q4-dl-txt p {
    font-size: .85rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.62;
    margin: 0;
    max-width: 420px;
}

.q4-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #abce3b;
    color: #0b1220;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 13px 26px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s, transform .18s;
    flex-shrink: 0;
}

.q4-dl-btn:hover {
    background: #c8e855;
    transform: translateY(-2px);
}

.q4-dl-btn svg {
    width: 16px;
    height: 16px;
}

/* PURCHASE BANNER — full-width cinematic */
.q4-banner {
    position: relative;
    overflow: hidden;
    min-height: 320px;
    display: flex;
    align-items: center;
    background-color: #0b1220;
}

.q4-banner-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.q4-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(.35) saturate(.7);
}

.q4-banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(108deg, rgba(11, 18, 32, .92) 0%, rgba(11, 18, 32, .6) 60%, rgba(11, 18, 32, .3) 100%);
}

.q4-banner-in {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 70px;
}

.q4-banner-eye {
    display: block;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 12px;
}

.q4-banner-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3.2vw, 2.8rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #f5f3ee;
    margin: 0 0 14px;
    text-transform: none;
}

.q4-banner-h2 em {
    font-style: normal;
    color: #abce3b;
}

.q4-banner-p {
    font-size: .9rem;
    color: rgba(245, 243, 238, .52);
    line-height: 1.72;
    margin: 0 0 28px;
    max-width: 460px;
}

.q4-banner-btns {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.q4-banner-proof {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.q4-banner-bdg {
    font-size: .67rem;
    color: rgba(245, 243, 238, .35);
    display: flex;
    align-items: center;
    gap: 7px;
}

.q4-banner-ck {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7l3.5 3.5L12 3.5' stroke='%23abce3b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.faq-sec.ep-dark .faq-icon svg {
    width: 12px;
    height: 12px;
    transition: transform .25s;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
}

/* Base */
.tc-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px;
}

.tc-sec {
    padding: 100px 0;
}

.ep-light {
    background: #f5f9fc;
}

.ep-dark {
    background: #080e1a;
}

.ep-mid {
    background: #0b1220;
}

/* Headings — same colour system */
.ep-eyebrow {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ep-light .ep-eyebrow {
    color: #3a6a0a;
}

.ep-dark .ep-eyebrow,
.ep-mid .ep-eyebrow {
    color: #abce3b;
}

.ep-sec-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2rem, 3.6vw, 3.2rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.025em;
    margin: 0;
}

.ep-light .ep-sec-title {
    color: #0b1a2e;
}

.ep-dark .ep-sec-title,
.ep-mid .ep-sec-title {
    color: #f5f3ee;
}

.tc-body {
    font-size: .93rem;
    line-height: 1.8;
    margin-top: 16px;
    max-width: 540px;
}

.ep-light .tc-body {
    color: #4a6278;
}

.ep-dark .tc-body,
.ep-mid .tc-body {
    color: rgba(245, 243, 238, .5);
}

/* ── CINEMATIC HERO ──────────────────────────────────────── */
.ora-hero {
    height: 520px;
    background: #040810;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    position: relative;
    overflow: hidden;
    margin-top: var(--nh, 70px);
}

/* Dramatic ambient glows */
.ora-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 70% at 72% 45%, rgba(171, 206, 59, .09) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 20% 80%, rgba(0, 80, 200, .07) 0%, transparent 55%),
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(171, 206, 59, .04) 0%, transparent 50%);
}

/* Subtle grid overlay */
.ora-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(171, 206, 59, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(171, 206, 59, .025) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 80% at 65% 50%, black 0%, transparent 70%);
}

.ora-hero-l {
    padding: 48px 48px 48px 70px;
    position: relative;
    z-index: 5;
}

.ora-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .54rem;
    font-weight: 800;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 24px;
}

.ora-hero-tag-line {
    width: 32px;
    height: 1px;
    background: rgba(171, 206, 59, .5);
}

.ora-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2.2rem, 3.8vw, 3.6rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.03em;
    color: #f5f3ee;
    margin: 0 0 6px;
    animation: ora-up .8s ease both;
    text-transform: none;
}

.ora-h1 em {
    font-style: italic;
    color: #abce3b;
}

.ora-hero-sub {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .28);
    display: block;
    margin-bottom: 22px;
    animation: ora-up .8s .1s ease both;
}

.ora-hero-p {
    font-size: .95rem;
    color: rgba(245, 243, 238, .52);
    line-height: 1.78;
    max-width: 420px;
    margin: 0 0 20px;
    animation: ora-up .8s .2s ease both;
}

.ora-hero-btns {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
    animation: ora-up .8s .3s ease both;
}

.ora-hero-stats {
    display: flex;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding-top: 24px;
    animation: ora-up .8s .4s ease both;
}

.ora-stat {
    flex: 1;
    padding: 0 20px 0 0;
    border-right: 1px solid rgba(255, 255, 255, .07);
}

.ora-stat:last-child {
    border-right: none;
}

.ora-stat:first-child {
    padding-left: 0;
}

.ora-sn {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
    margin-bottom: 4px;
}

.ora-sl {
    font-size: .5rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .25);
}

@keyframes ora-up {
    from {
        opacity: 0;
        transform: translateY(18px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

/* Hero right: image panel */
.ora-hero-r {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
}

.ora-hero-img-wrap {
    position: relative;
    z-index: 2;
    width: 94%;
    max-width: 520px;
}

.ora-hero-img-wrap img {
    width: 100%;
    display: block;
    filter: drop-shadow(0 30px 80px rgba(0, 0, 0, .95)) drop-shadow(0 0 80px rgba(171, 206, 59, .22)) drop-shadow(0 0 120px rgba(171, 206, 59, .1));
    animation: ora-float 6s ease-in-out infinite;
}

@keyframes ora-float {

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

    50% {
        transform: translateY(-12px)
    }
}

/* Halo glow behind image */
.ora-hero-halo {
    position: absolute;
    width: 120%;
    height: 120%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(171, 206, 59, .18) 0%, transparent 65%);
    pointer-events: none;
    z-index: 1;
}

/* Floating stat chips */
.ora-chip {
    position: absolute;
    z-index: 10;
    background: rgba(4, 8, 16, .88);
    border: 1px solid rgba(171, 206, 59, .24);
    backdrop-filter: blur(16px);
    padding: 8px 14px 8px 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    animation: ora-float2 4s ease-in-out infinite;
    white-space: nowrap;
}

.ora-chip:nth-child(2) {
    animation-delay: -1.3s;
}

.ora-chip:nth-child(3) {
    animation-delay: -2.6s;
}

@keyframes ora-float2 {

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

    50% {
        transform: translateY(-7px)
    }
}

.ora-chip-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(171, 206, 59, .12);
    border: 1px solid rgba(171, 206, 59, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ora-chip-icon svg {
    width: 14px;
    height: 14px;
    stroke: #abce3b;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ora-chip-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ora-chip-lbl {
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .4);
    line-height: 1;
}

.ora-chip-val {
    font-family: var(--fd, 'Lora', serif);
    font-size: .82rem;
    font-weight: 700;
    color: #abce3b;
    line-height: 1.1;
}

/* ── ABOUT ── */
.ora-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.ora-about-img {
    border-radius: 20px;
    overflow: hidden;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #060e1c;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 80px rgba(0, 0, 0, .5);
}

.ora-about-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ora-feats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.ora-feat {
    font-size: .7rem;
    font-weight: 600;
    color: #3a6a0a;
    background: rgba(58, 106, 10, .07);
    border: 1px solid rgba(58, 106, 10, .18);
    padding: 5px 14px;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── TECHNOLOGY SHOWCASE ── (angled section) */
.ora-tech {
    background: #040810;
    padding: 100px 0 120px;
    position: relative;
}

/* Top angled edge */
.ora-tech::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 80px;
    pointer-events: none;
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
}

/* Bottom angled edge */
.ora-tech::after {
    content: '';
    position: absolute;
    bottom: -79px;
    left: 0;
    right: 0;
    height: 80px;
    pointer-events: none;
    background: #040810;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 2;
}

.ora-tech-header {
    text-align: center;
    margin-bottom: 72px;
}

.ora-tech-header .ep-eyebrow {
    justify-content: center;
    display: flex;
}

.ora-tech-header .ep-sec-title {
    max-width: 600px;
    margin: 0 auto;
}

/* Two-panel split: LEO + PEMF */
.ora-tech-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .07);
}

.ora-panel {
    background: rgba(255, 255, 255, .025);
    padding: 44px 40px;
    position: relative;
}

.ora-panel-tag {
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .3);
    display: block;
    margin-bottom: 6px;
}

.ora-panel-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 14px;
    line-height: 1.15;
}

.ora-panel-title em {
    font-style: italic;
    color: #abce3b;
}

.ora-panel-desc {
    font-size: .84rem;
    color: rgba(245, 243, 238, .45);
    line-height: 1.72;
    margin: 0 0 28px;
}

.ora-panel-img {
    border-radius: 12px;
    overflow: hidden;
    height: 220px;
    background: rgba(255, 255, 255, .03);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    border: 1px solid rgba(255, 255, 255, .06);
}

.ora-panel-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 16px;
}

/* Frequency pills inside panel */
.ora-freq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ora-freq-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ora-freq-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(171, 206, 59, .1);
    border: 1px solid rgba(171, 206, 59, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ora-freq-icon svg {
    width: 16px;
    height: 16px;
    stroke: #abce3b;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ora-freq-nm {
    font-size: .84rem;
    font-weight: 700;
    color: #f5f3ee;
    display: block;
    margin-bottom: 2px;
}

.ora-freq-desc {
    font-size: .76rem;
    color: rgba(245, 243, 238, .42);
    line-height: 1.55;
}

/* PEMF panel uses different accent */
.ora-panel:last-child {
    border-left: 1px solid rgba(255, 255, 255, .07);
}

.ora-pemf-range {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(171, 206, 59, .08);
    border: 1px solid rgba(171, 206, 59, .2);
    padding: 8px 18px;
    border-radius: 8px;
    margin-bottom: 22px;
}

.ora-pemf-range-n {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: #abce3b;
}

.ora-pemf-range-l {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .4);
}

.ora-pemf-uses {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ora-pemf-uses li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .82rem;
    color: rgba(245, 243, 238, .52);
    line-height: 1.45;
}

.ora-pemf-ck {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' stroke='%23abce3b' stroke-width='1.2'/%3E%3Cpath d='M5 8l2.5 2.5L11 5.5' stroke='%23abce3b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* ── BENEFITS ── */
.ora-ben-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
    margin-top: 56px;
}

.ora-ben-img {
    border-radius: 20px;
    overflow: hidden;
    height: 420px;
    background: #e0e8f0;
    box-shadow: 0 14px 44px rgba(11, 18, 32, .12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ora-ben-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ora-ben-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
}

.ora-ben-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .82rem;
    color: #4a6278;
    line-height: 1.45;
}

.ora-ben-ck {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── HOW TO USE ── two-col usage cards */
.ora-use-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 48px;
}

.ora-use-card {
    background: #0b1220;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    overflow: hidden;
}

.ora-use-img {
    height: 240px;
    background: #060e1c;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.ora-use-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .6));
}

.ora-use-body {
    padding: 28px 26px;
}

.ora-use-tag {
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    display: block;
    margin-bottom: 8px;
}

.ora-use-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 14px;
}

.ora-use-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ora-use-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .81rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.52;
}

.ora-use-list li .ora-pemf-ck {
    margin-top: 2px;
}

/* ── PRECAUTIONS ── */
.ora-prec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 44px;
}

.ora-prec-card {
    background: #fff;
    border: 1px solid rgba(11, 18, 32, .08);
    border-radius: 16px;
    padding: 28px 22px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(11, 18, 32, .05);
    transition: transform .25s, box-shadow .25s;
}

.ora-prec-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(11, 18, 32, .1);
}

.ora-prec-svg {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    display: block;
}

.ora-prec-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: .95rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 6px;
}

.ora-prec-desc {
    font-size: .79rem;
    color: #4a6278;
    line-height: 1.58;
    margin: 0;
}

/* ── SPECS ── (no image, pure data + glowing tiles) */
.ora-spec-out {
    background: #080e1a;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .07);
    overflow: hidden;
    margin-top: 48px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
}

.ora-spec-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.ora-spec-tile {
    padding: 28px 24px;
    border-right: 1px solid rgba(255, 255, 255, .07);
    text-align: center;
    position: relative;
}

.ora-spec-tile:last-child {
    border-right: none;
}

.ora-spec-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(171, 206, 59, .4), transparent);
}

.ora-spec-tile-n {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.8rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
    margin-bottom: 4px;
}

.ora-spec-tile-l {
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .35);
}

.ora-spec-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.ora-spec-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 13px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    border-right: 1px solid rgba(255, 255, 255, .05);
    gap: 16px;
}

.ora-spec-row:nth-child(even) {
    border-right: none;
}

.ora-spec-row:nth-last-child(-n+2) {
    border-bottom: none;
}

.ora-spec-k {
    font-size: .75rem;
    font-weight: 600;
    color: rgba(245, 243, 238, .42);
}

.ora-spec-v {
    font-size: .78rem;
    font-weight: 700;
    color: #f5f3ee;
    text-align: right;
}

/* ── CTA ── */
.ora-cta {
    position: relative;
    overflow: hidden;
    background: #040810;
}

.ora-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(171, 206, 59, .06) 0%, transparent 65%);
}

.ora-cta-in {
    max-width: 660px;
    margin: 0 auto;
    text-align: center;
    padding: 80px 70px;
    position: relative;
    z-index: 1;
}

.ora-cta-kicker {
    display: inline-block;
    font-size: .54rem;
    font-weight: 800;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #abce3b;
    border: 1px solid rgba(171, 206, 59, .28);
    padding: 6px 18px;
    border-radius: 40px;
    margin-bottom: 22px;
}

.ora-cta-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.025em;
    color: #f5f3ee;
    margin: 0 0 18px;
    text-transform: none;
}

.ora-cta-h2 em {
    font-style: italic;
    color: #abce3b;
}

.ora-cta-p {
    font-size: .93rem;
    color: rgba(245, 243, 238, .46);
    line-height: 1.76;
    margin: 0 auto 34px;
    max-width: 480px;
}

.ora-cta-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.ora-cta-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.ora-cta-bdg {
    font-size: .66rem;
    color: rgba(245, 243, 238, .32);
    display: flex;
    align-items: center;
    gap: 7px;
}

.ora-cta-ck {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7l3.5 3.5L12 3.5' stroke='%23abce3b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* ── GALLERY ── */
.ora-gal-wrap {
    margin-top: 36px;
}

.ora-gal-main {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 480px;
    cursor: zoom-in;
    background: #060e1c;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 80px rgba(0, 0, 0, .7);
    margin-bottom: 14px;
}

.ora-gal-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity .3s ease;
    padding: 12px;
}

.ora-gal-main::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30%;
    z-index: 1;
    background: linear-gradient(to top, rgba(4, 8, 16, .6), transparent);
    pointer-events: none;
}

.ora-gal-hint {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 2;
    background: rgba(4, 8, 16, .8);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
    color: rgba(245, 243, 238, .55);
    font-size: .55rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 40px;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 7px;
}

.ora-gal-count {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 2;
    background: rgba(4, 8, 16, .8);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
    color: rgba(245, 243, 238, .4);
    font-size: .62rem;
    font-weight: 700;
    padding: 5px 13px;
    border-radius: 40px;
    pointer-events: none;
}

.ora-gal-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.ora-gth {
    display: block;
    height: 78px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .07);
    cursor: pointer;
    padding: 0;
    background: #060e1c;
    opacity: .44;
    transition: opacity .2s, border-color .2s;
    width: 100%;
}

.ora-gth img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.ora-gth.on {
    opacity: 1;
    border-color: #abce3b;
}

.ora-gth:hover:not(.on) {
    opacity: .8;
    border-color: rgba(171, 206, 59, .35);
}

/* ── VIDEO SECTION ── */
.ora-vid-wrap {
    margin-top: 52px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #040810;
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 0 0 1px rgba(171, 206, 59, .06), 0 30px 80px rgba(0, 0, 0, .6);
    aspect-ratio: 16/9;
    cursor: pointer;
}

/* Poster image fills the frame */
.ora-vid-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .4s ease;
}

/* Dark cinematic vignette over poster */
.ora-vid-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 30%, rgba(4, 8, 16, .65) 100%);
}

/* Overlay content */
.ora-vid-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.ora-vid-label {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .5);
}

/* Play button */
.ora-play {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(171, 206, 59, .15);
    border: 2px solid rgba(171, 206, 59, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .22s, transform .22s, box-shadow .22s;
    backdrop-filter: blur(8px);
}

.ora-play svg {
    width: 24px;
    height: 24px;
    fill: #abce3b;
    margin-left: 3px;
}

.ora-vid-wrap:hover .ora-play {
    background: rgba(171, 206, 59, .28);
    transform: scale(1.08);
    box-shadow: 0 0 40px rgba(171, 206, 59, .25);
}

.ora-vid-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #f5f3ee;
    letter-spacing: -.01em;
}

/* Hidden state for iframe swap */
.ora-vid-wrap.playing .ora-vid-poster,
.ora-vid-wrap.playing .ora-vid-vignette,
.ora-vid-wrap.playing .ora-vid-overlay {
    opacity: 0;
    pointer-events: none;
}

.ora-vid-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    opacity: 0;
    transition: opacity .3s ease;
}

.ora-vid-wrap.playing .ora-vid-iframe {
    opacity: 1;
}

/* Lightbox */
.ora-lb {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(2, 8, 16, .96);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
}

.ora-lb.on {
    opacity: 1;
    pointer-events: auto;
}

.ora-lb-img {
    max-width: 88vw;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 12px;
}

.ora-lb-x {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    color: rgba(245, 243, 238, .4);
    font-size: 2.2rem;
    cursor: pointer;
    line-height: 1;
}

.ora-lb-x:hover {
    color: #f5f3ee;
}

/* Partner with us page css */
/* HERO */
.pw-hero {
    background: #020810;
    margin-top: var(--nh, 70px);
    position: relative;
    overflow: hidden
}

.pw-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 55% 80% at 85% 40%, rgba(171, 206, 59, .09) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at 6% 80%, rgba(0, 100, 200, .07) 0%, transparent 55%)
}

.pw-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(171, 206, 59, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(171, 206, 59, .022) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 70% 70% at 80% 50%, black 0%, transparent 65%)
}

.pw-hero-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 70px 0;
    display: grid;
    grid-template-columns: 55% 45%;
    align-items: end;
    position: relative;
    z-index: 1;
    gap: 40px
}

.pw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 16px
}

.pw-eyebrow-line {
    width: 28px;
    height: 1px;
    background: rgba(171, 206, 59, .5)
}

.pw-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.028em;
    color: #f5f3ee !important;
    margin: 0 0 18px;
    text-transform: none;
}

.pw-h1 em {
    font-style: normal;
    color: #abce3b
}

.pw-sub {
    font-size: .92rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.72;
    margin: 0 0 28px;
    max-width: 500px
}

.pw-hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px
}

.pw-hero-stats {
    display: flex;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 20px;
    margin-bottom: 0
}

.pw-stat {
    flex: 1;
    padding: 0 20px 28px 0;
    border-right: 1px solid rgba(255, 255, 255, .08)
}

.pw-stat:last-child {
    border-right: none;
    padding-right: 0;
    padding-left: 20px
}

.pw-stat:first-child {
    padding-left: 0
}

.pw-stat-n {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
    margin-bottom: 3px
}

.pw-stat-l {
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .3)
}

.pw-hero-img {
    align-self: end
}

.pw-hero-img img {
    width: 100%;
    max-width: 480px;
    display: block;
    border-radius: 16px 16px 0 0;
    object-fit: cover;
    filter: brightness(.85)
}

/* SECTION BASE */
.tc-sec {
    padding: 72px 0
}

.tc-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px
}

.ep-light {
    background: #f5f9fc
}

.ep-dark {
    background: #0b1220
}

.ep-eyebrow {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 9px
}

.ep-light .ep-eyebrow {
    color: #3a6a0a
}

.ep-dark .ep-eyebrow {
    color: #abce3b
}

.ep-sec-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3.2vw, 2.8rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.02em;
    margin: 0
}

.ep-light .ep-sec-title {
    color: #0b1a2e !important
}

.ep-dark .ep-sec-title {
    color: #f5f3ee !important
}

.ep-sec-sub {
    font-size: .9rem;
    line-height: 1.72;
    margin: 12px 0 0;
    max-width: 600px
}

.ep-light .ep-sec-sub {
    color: #4a6278
}

.ep-dark .ep-sec-sub {
    color: rgba(245, 243, 238, .48)
}

/* WHAT IS section — 2 col */
.pw-what {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center
}

.pw-what-txt h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #0b1a2e !important;
    margin: 0 0 18px;
    text-transform: none;
}

.pw-what-txt h2 em {
    font-style: normal;
    color: #3a6a0a
}

.pw-what-txt p {
    font-size: .9rem;
    color: #4a6278;
    line-height: 1.74;
    margin: 0 0 16px
}

.pw-what-img img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 14px 44px rgba(11, 18, 32, .12)
}

/* PARTNER TYPE CARDS — 3 col */
.pw-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 44px
}

.pw-type-card {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 18px;
    padding: 28px 26px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 4px 20px rgba(11, 18, 32, .06);
    transition: transform .22s cubic-bezier(.22, .68, 0, 1.1), box-shadow .22s
}

.pw-type-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(11, 18, 32, .12)
}

.pw-type-img {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    overflow: hidden;
    background: #f5f9fc;
    border: 1.5px solid rgba(11, 18, 32, .08);
    flex-shrink: 0
}

.pw-type-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px
}

.pw-type-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0
}

.pw-type-desc {
    font-size: .83rem;
    color: #4a6278;
    line-height: 1.62;
    margin: 0;
    flex: 1
}

.pw-type-perks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.pw-type-perks li {
    font-size: .78rem;
    color: #0b1a2e;
    display: flex;
    align-items: center;
    gap: 8px
}

.pw-type-perks li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0
}

.pw-type-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 11px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .16s, transform .16s;
    margin-top: auto
}

.pw-type-cta:hover {
    transform: translateX(3px)
}

.pw-type-cta svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round
}

/* BENEFITS GRID */
.pw-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 44px
}

.pw-ben {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color .2s, background .2s
}

.pw-ben:hover {
    border-color: rgba(171, 206, 59, .2);
    background: rgba(255, 255, 255, .07)
}

.pw-ben-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(171, 206, 59, .12);
    border: 1px solid rgba(171, 206, 59, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.pw-ben-icon svg {
    width: 26px;
    height: 26px
}

.pw-ben-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0
}

.pw-ben-desc {
    font-size: .82rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.62;
    margin: 0
}

/* BUSINESS PLAN */
.pw-biz {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center
}

.pw-biz-txt.h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.6rem, 2.8vw, 2.3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #0b1a2e !important;
    margin: 0 0 14px;
    text-transform: none;
}

.pw-biz-txt p {
    font-size: .88rem;
    color: #4a6278;
    line-height: 1.72;
    margin: 0 0 20px
}

.pw-biz-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.pw-biz-list li {
    font-size: .84rem;
    color: #0b1a2e;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600
}

.pw-biz-list li svg {
    width: 16px;
    height: 16px;
    stroke: #3a6a0a;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0
}

.pw-pma-card {
    background: #0b1220;
    border-radius: 16px;
    padding: 24px 26px;
    margin-top: 24px;
    border: 1px solid rgba(255, 255, 255, .08)
}

.pw-pma-card h4 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 8px
}

.pw-pma-card p {
    font-size: .8rem;
    color: rgba(245, 243, 238, .48);
    line-height: 1.62;
    margin: 0
}

.pw-biz-img img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 14px 44px rgba(11, 18, 32, .12)
}

/* CINEMATIC CTA BANNER */
.pw-banner {
    position: relative;
    overflow: hidden;
    min-height: 280px;
    display: flex;
    align-items: center
}

.pw-banner-bg {
    position: absolute;
    inset: 0
}

.pw-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.28) saturate(.5)
}

.pw-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(108deg, rgba(11, 18, 32, .95) 0%, rgba(11, 18, 32, .65) 60%, rgba(11, 18, 32, .28) 100%)
}

.pw-banner-in {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 52px 70px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 44px
}

.pw-banner-eye {
    display: block;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 12px
}

.pw-banner-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.022em;
    color: #f5f3ee !important;
    margin: 0 0 10px;
    text-transform: none;
}

.pw-banner-h2 em {
    font-style: normal;
    color: #abce3b
}

.pw-banner-p {
    font-size: .88rem;
    color: rgba(245, 243, 238, .48);
    line-height: 1.7;
    margin: 0;
    max-width: 460px
}

.pw-banner-r {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    min-width: 200px
}

/* FAQ */
.pw-faq-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 70px
}

.faq-eye {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #3a6a0a;
    margin-bottom: 9px
}

.faq-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #0b1a2e !important;
    margin: 0 0 36px
}

.faq-list {
    border-top: 1px solid rgba(11, 18, 32, .1)
}

.faq-item {
    border-bottom: 1px solid rgba(11, 18, 32, .09)
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    padding: 18px 0;
    font-family: var(--fd, 'Lora', serif);
    font-size: .98rem;
    font-weight: 700;
    color: #0b1a2e;
    line-height: 1.35;
    transition: color .15s
}

/* .faq-q::after,
.faq-q::before {
  content: '' !important;
  display: none !important
} */

.faq-q:hover {
    color: #3a6a0a
}

.faq-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(58, 106, 10, .1);
    border: 1px solid rgba(58, 106, 10, .22);
    transition: transform .25s
}

.faq-icon svg {
    width: 12px;
    height: 12px;
    stroke: #3a6a0a;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: transform .25s
}

.faq-item.open .faq-icon svg {
    transform: rotate(180deg)
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .38s cubic-bezier(.22, .68, 0, 1.1)
}

.faq-item.open .faq-a {
    max-height: 300px
}

.faq-a-inner {
    padding: 0 0 18px;
    font-size: .88rem;
    color: #4a6278;
    line-height: 1.76
}

/* Financing page css */
/* HERO */
.fn-hero {
    background: #020810;
    margin-top: var(--nh, 70px);
    position: relative;
    overflow: hidden;
    min-height: 460px;
    display: grid;
    grid-template-columns: 55% 45%
}

.fn-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(171, 206, 59, .09) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at 5% 80%, rgba(0, 100, 200, .06) 0%, transparent 55%)
}

.fn-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(171, 206, 59, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(171, 206, 59, .022) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 70% 70% at 75% 50%, black 0%, transparent 65%)
}

.fn-hero-l {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 52px 60px 70px;
    position: relative;
    z-index: 2
}

.fn-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 16px
}

.fn-eyebrow-line {
    width: 28px;
    height: 1px;
    background: rgba(171, 206, 59, .5)
}

.fn-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2rem, 3.8vw, 3.2rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.028em;
    color: #f5f3ee !important;
    margin: 0 0 16px;
}

.fn-h1 em {
    font-style: normal;
    color: #abce3b
}

.fn-sub {
    font-size: .92rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.72;
    max-width: 440px;
    margin: 0 0 28px
}

.fn-hero-btns {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 32px;
    animation: fn-up .6s .3s ease both
}

@keyframes fn-up {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fn-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    animation: fn-up .6s .4s ease both
}

.fn-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .68rem;
    font-weight: 600;
    color: rgba(245, 243, 238, .6);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    padding: 5px 13px;
    border-radius: 40px
}

.fn-pill-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #abce3b;
    flex-shrink: 0
}

/* QR side */
.fn-hero-r {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    z-index: 2
}

.fn-qr-card {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 28px 32px;
    text-align: center;
    max-width: 260px;
    width: 100%
}

.fn-qr-card img {
    width: 160px;
    height: 160px;
    border-radius: 12px;
    display: block;
    margin: 0 auto 16px;
    background: #fff;
    padding: 8px
}

.fn-qr-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: .95rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 6px
}

.fn-qr-sub {
    font-size: .74rem;
    color: rgba(245, 243, 238, .45);
    line-height: 1.5;
    margin: 0 0 18px
}

.fn-qr-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(171, 206, 59, .15);
    border: 1px solid rgba(171, 206, 59, .3);
    border-radius: 40px;
    padding: 5px 14px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #abce3b
}

/* MAIN */
.fn-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 70px 80px
}

.ep-light {
    background: #f5f9fc
}

.ep-dark {
    background: #0b1220
}

.ep-eyebrow {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 9px
}

.ep-light .ep-eyebrow {
    color: #3a6a0a
}

.ep-dark .ep-eyebrow {
    color: #abce3b
}

.ep-sec-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3.2vw, 2.9rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.02em;
    margin: 0
}

.ep-light .ep-sec-title {
    color: #0b1a2e !important
}

.ep-dark .ep-sec-title {
    color: #f5f3ee !important
}

.tc-body {
    font-size: .93rem;
    line-height: 1.76;
    margin-top: 14px;
    max-width: 540px
}

.ep-light .tc-body {
    color: #4a6278
}

.ep-dark .tc-body {
    color: rgba(245, 243, 238, .52)
}

/* HOW IT WORKS — 3-step */
.fn-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-top: 48px;
    border-radius: 16px;
    overflow: hidden
}

.fn-step {
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .07);
    padding: 30px 26px;
    position: relative;
    transition: background .22s, border-color .22s
}

.fn-step:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(171, 206, 59, .2)
}

.fn-step-num {
    position: absolute;
    top: 18px;
    right: 18px;
    font-family: var(--fd, 'Lora', serif);
    font-size: 2.8rem;
    font-weight: 700;
    color: rgba(171, 206, 59, .1);
    line-height: 1
}

.fn-step-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(171, 206, 59, .1);
    border: 1px solid rgba(171, 206, 59, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #abce3b;
    margin-bottom: 16px
}

.fn-step-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.fn-step-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 7px
}

.fn-step-desc {
    font-size: .8rem;
    color: rgba(245, 243, 238, .45);
    line-height: 1.62;
    margin: 0
}

/* REQUIREMENTS */
.fn-req-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 36px
}

.fn-req-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 12px;
    padding: 18px 16px;
    box-shadow: 0 3px 12px rgba(11, 18, 32, .05);
    transition: border-color .2s, transform .2s
}

.fn-req-item:hover {
    border-color: rgba(58, 106, 10, .28);
    transform: translateY(-2px)
}

.fn-req-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #3a6a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--fd, 'Lora', serif);
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    margin-top: 1px
}

.fn-req-label {
    font-size: .82rem;
    font-weight: 700;
    color: #0b1a2e;
    display: block;
    margin-bottom: 3px
}

.fn-req-desc {
    font-size: .76rem;
    color: #4a6278;
    line-height: 1.5;
    margin: 0
}

.fn-dl-block {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: #0b1220;
    border-radius: 12px;
    padding: 20px 24px;
    border: 1px solid rgba(255, 255, 255, .08)
}

.fn-dl-txt h4 {
    font-family: var(--fd, 'Lora', serif);
    font-size: .95rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 4px
}

.fn-dl-txt p {
    font-size: .78rem;
    color: rgba(245, 243, 238, .45);
    margin: 0
}

.fn-dl-btn {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #abce3b;
    color: #0b1220;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 11px 22px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, transform .15s
}

.fn-dl-btn:hover {
    background: #c8e855;
    transform: translateY(-1px)
}

.fn-dl-btn svg {
    width: 14px;
    height: 14px;
    stroke: #0b1220;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round
}

/* LOAN TYPES */
.fn-loan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 44px
}

.fn-loan-card {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .07);
    border-radius: 14px;
    padding: 26px 22px;
    box-shadow: 0 3px 14px rgba(11, 18, 32, .05);
    transition: transform .22s, box-shadow .22s, border-color .22s
}

.fn-loan-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(11, 18, 32, .12);
    border-color: rgba(58, 106, 10, .25)
}

.fn-loan-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(58, 106, 10, .08);
    border: 1px solid rgba(58, 106, 10, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3a6a0a;
    margin-bottom: 14px
}

.fn-loan-icon svg {
    width: 20px;
    height: 20px;
    stroke: #3a6a0a;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.fn-loan-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: .98rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 7px
}

.fn-loan-desc {
    font-size: .79rem;
    color: #4a6278;
    line-height: 1.62;
    margin: 0
}

/* DASHBOARD IMAGE */
.fn-dash-wrap {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 44px rgba(11, 18, 32, .14);
    margin-top: 44px;
    max-height: 420px
}

.fn-dash-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top
}

.fn-dash-wrap img {
    width: 100%;
    display: block
}

/* FAQ */
.fn-faq-sec {
    padding: 72px 0;
    background: #f5f9fc
}

.fn-faq-in {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 70px
}

.faq-eye {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #3a6a0a;
    margin-bottom: 9px
}

.faq-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #0b1a2e !important;
    margin: 0 0 36px
}

.faq-list {
    border-top: 1px solid rgba(11, 18, 32, .1)
}

.faq-item {
    border-bottom: 1px solid rgba(11, 18, 32, .1)
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    padding: 18px 0;
    font-family: var(--fd, 'Lora', serif);
    font-size: .98rem;
    font-weight: 700;
    color: #0b1a2e;
    line-height: 1.35;
    transition: color .15s
}

/* .faq-q::after,
.faq-q::before {
  content: '' !important;
  display: none !important
} */

.faq-q:hover {
    color: #3a6a0a
}

.faq-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(58, 106, 10, .1);
    border: 1px solid rgba(58, 106, 10, .22);
    transition: transform .25s
}

.faq-icon svg {
    width: 12px;
    height: 12px;
    stroke: #3a6a0a;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: transform .25s
}

.faq-item.open .faq-icon svg {
    transform: rotate(180deg)
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .38s cubic-bezier(.22, .68, 0, 1.1)
}

.faq-item.open .faq-a {
    max-height: max-content
}

.faq-a-inner {
    padding: 0 0 18px;
    font-size: .88rem;
    color: #4a6278;
    line-height: 1.76
}

/* CINEMATIC CTA BANNER */
.fn-banner {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    align-items: center
}

.fn-banner-bg {
    position: absolute;
    inset: 0
}

.fn-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.3) saturate(.6)
}

.fn-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(108deg, rgba(11, 18, 32, .94) 0%, rgba(11, 18, 32, .65) 60%, rgba(11, 18, 32, .3) 100%)
}

.fn-banner-in {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 70px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 40px
}

.fn-banner-eye {
    display: block;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 12px
}

.fn-banner-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3.2vw, 2.7rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #f5f3ee !important;
    margin: 0 0 14px
}

.fn-banner-h2 em {
    font-style: normal;
    color: #abce3b
}

.fn-banner-p {
    font-size: .9rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.7;
    margin: 0;
    max-width: 460px
}

.fn-banner-r {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0
}

.fn-banner-proof {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 10px
}

.fn-proof-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .7rem;
    color: rgba(245, 243, 238, .4)
}

.fn-proof-ck {
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7l3.5 3.5L12 3.5' stroke='%23abce3b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0
}

/* Blog page css */
/* HEADER */
.bl-header {
    background: #020810;
    padding: 56px 70px 48px;
    margin-top: var(--nh, 70px);
    position: relative;
    overflow: hidden
}

.bl-header::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 55% 80% at 85% 45%, rgba(171, 206, 59, .08) 0%, transparent 60%),
        radial-gradient(ellipse 35% 60% at 8% 80%, rgba(0, 100, 200, .05) 0%, transparent 55%)
}

.bl-header::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(171, 206, 59, .02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(171, 206, 59, .02) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 70% 70% at 80% 50%, black 0%, transparent 65%)
}

.bl-header-in {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px
}

.bl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 14px
}

.bl-eyebrow-line {
    width: 28px;
    height: 1px;
    background: rgba(171, 206, 59, .5)
}

.bl-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.028em;
    color: #f5f3ee !important;
    margin: 0 0 12px
}

.bl-h1 em {
    font-style: normal;
    color: #abce3b
}

.bl-sub {
    font-size: .9rem;
    color: rgba(245, 243, 238, .48);
    line-height: 1.66;
    margin: 0;
    max-width: 500px
}

.bl-header-stats {
    display: flex;
    gap: 24px;
    align-items: flex-end;
    flex-shrink: 0
}

.bl-hstat {
    text-align: right
}

.bl-hstat-n {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
    margin-bottom: 3px
}

.bl-hstat-l {
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .3)
}

/* CONTROLS BAR — single row, horizontally scrollable chips */
.bl-controls {
    background: #fff;
    border-bottom: 2px solid rgba(11, 18, 32, .08);
    position: sticky;
    top: 102px;
    z-index: 600;
    box-shadow: 0 2px 10px rgba(11, 18, 32, .05)
}

.bl-ctrl-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px;
    height: 58px;
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden
}

.bl-sw {
    position: relative;
    flex: 0 0 240px;
    margin-right: 14px
}

.bl-sw svg {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    stroke: rgba(11, 18, 32, .3);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none
}

.bl-search {
    width: 100%;
    background: #f5f9fc;
    border: 1.5px solid rgba(11, 18, 32, .13);
    border-radius: 8px;
    padding: 9px 32px 9px 36px;
    font-size: .82rem;
    color: #0b1a2e;
    outline: none;
    font-family: var(--fd);
    transition: border-color .18s, background .18s
}

.bl-search::placeholder {
    color: rgba(11, 18, 32, .35)
}

.bl-search:focus {
    border-color: #3a6a0a;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(58, 106, 10, .08)
}

.bl-sclear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(11, 18, 32, .35);
    display: none;
    font-size: 1.1rem;
    padding: 0;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    transition: color .15s
}

.bl-sclear:hover {
    color: #0b1a2e
}

.bl-sclear.show {
    display: flex
}

.bl-filts-wrap {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center
}

.bl-filts-wrap::before,
.bl-filts-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    z-index: 2;
    pointer-events: none
}

.bl-filts-wrap::before {
    left: 0;
    background: linear-gradient(to right, #fff, transparent)
}

.bl-filts-wrap::after {
    right: 2px;
    background: linear-gradient(to left, #fff, transparent)
}

.bl-filts {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 8px 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab
}

.bl-filts.dragging {
    cursor: grabbing
}

.bl-filts::-webkit-scrollbar {
    display: none
}

.bl-filt {
    background: #f0f4f8;
    border: 1.5px solid rgba(11, 18, 32, .1);
    border-radius: 40px;
    color: rgba(11, 18, 32, .52);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 6px 15px;
    cursor: pointer;
    transition: all .15s;
    font-family: var(--fd);
    white-space: nowrap;
    flex-shrink: 0
}

.bl-filt:hover {
    background: #e8f2e8;
    border-color: rgba(58, 106, 10, .3);
    color: #3a6a0a
}

.bl-filt.active {
    background: rgba(58, 106, 10, .12);
    border-color: #3a6a0a;
    color: #3a6a0a;
    font-weight: 800
}

.bl-count {
    flex-shrink: 0;
    font-size: .7rem;
    font-weight: 700;
    color: rgba(11, 18, 32, .4);
    white-space: nowrap;
    margin-left: 10px;
    background: #f0f4f8;
    border: 1px solid rgba(11, 18, 32, .1);
    padding: 4px 12px;
    border-radius: 40px
}

.ai-bc.ar-bc {
    top: 58px;
}

.ar-bc-in {
    justify-content: flex-start;
}

/* REVEAL */
.r-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s cubic-bezier(.22, .68, 0, 1.1), transform .55s cubic-bezier(.22, .68, 0, 1.1);
    transition-delay: var(--d, 0s)
}

.r-up.on {
    opacity: 1;
    transform: none
}

/* MAIN */
.bl-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 44px 70px 80px
}

/* FEATURED */
.bl-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    box-shadow: 0 4px 24px rgba(11, 18, 32, .08);
    margin-bottom: 48px
}

.bl-feat-img {
    display: block;
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 320px;
    flex-shrink: 0
}

.bl-feat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s cubic-bezier(.22, .68, 0, 1.1)
}

.bl-featured:hover .bl-feat-img img {
    transform: scale(1.04)
}

.bl-feat-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11, 18, 32, .15), transparent)
}

.bl-feat-body {
    padding: 36px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px
}

.bl-feat-tags,
.bl-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.bl-tag {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #3a6a0a;
    background: rgba(58, 106, 10, .09);
    border: 1px solid rgba(58, 106, 10, .2);
    padding: 3px 11px;
    border-radius: 40px
}

.bl-feat-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    margin: 0
}

.bl-feat-title a {
    color: #0b1a2e;
    text-decoration: none;
    transition: color .18s
}

.bl-feat-title a:hover {
    color: #3a6a0a
}

.bl-feat-excerpt {
    font-size: .85rem;
    color: #4a6278;
    line-height: 1.7;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.bl-feat-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid rgba(11, 18, 32, .07);
    margin-top: auto
}

.bl-author {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    font-weight: 600;
    color: #4a6278
}

.bl-author svg {
    stroke: #4a6278
}

.bl-dot {
    color: rgba(11, 18, 32, .25);
    font-size: .9rem
}

.bl-date,
.bl-read {
    font-size: .74rem;
    color: rgba(11, 18, 32, .45)
}

.bl-read-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #3a6a0a;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 9px 18px;
    border-radius: 7px;
    text-decoration: none;
    transition: background .16s, transform .16s
}

.bl-read-btn:hover {
    background: #4d8c0e;
    transform: translateX(3px)
}

.bl-read-btn svg {
    stroke: #fff
}

/* GRID */
.bl-sec-label {
    margin-bottom: 20px
}

.bl-sec-eye {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #3a6a0a;
    margin-bottom: 7px
}

.bl-sec-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: #0b1a2e !important;
    margin: 0;
    letter-spacing: 0px;
}

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

.bl-card {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(11, 18, 32, .06);
    transition: transform .24s cubic-bezier(.22, .68, 0, 1.1), box-shadow .24s, border-color .24s;
    display: flex;
    flex-direction: column
}

.bl-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 40px rgba(11, 18, 32, .13);
    border-color: rgba(58, 106, 10, .28)
}

.bl-card.hidden {
    display: none
}

.bl-card-img-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    height: 196px;
    background: #e8f2e8;
    flex-shrink: 0;
    text-decoration: none
}

.bl-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s
}

.bl-card:hover .bl-card-img-wrap img {
    transform: scale(1.05)
}

.bl-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 26, 11, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s
}

.bl-card:hover .bl-card-overlay {
    opacity: 1
}

.bl-card-body {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px
}

.bl-card-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.28;
    margin: 0
}

.bl-card-title a {
    color: #0b1a2e;
    text-decoration: none;
    transition: color .18s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.bl-card-title a:hover {
    color: #3a6a0a
}

.bl-card-excerpt {
    font-size: .78rem;
    color: #4a6278;
    line-height: 1.62;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.bl-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(11, 18, 32, .07);
    flex-wrap: wrap
}

.bl-card-meta .bl-author {
    font-size: .71rem
}

.bl-card-meta .bl-date {
    font-size: .7rem
}

.bl-read-time {
    font-size: .68rem;
    font-weight: 600;
    color: #3a6a0a;
    background: rgba(58, 106, 10, .08);
    border: 1px solid rgba(58, 106, 10, .18);
    padding: 2px 9px;
    border-radius: 40px;
    margin-left: auto
}

/* NO RESULTS */
.bl-no-results {
    display: none;
    text-align: center;
    padding: 60px 20px;
    grid-column: 1/-1
}

.bl-no-results.show {
    display: block
}

.bl-no-results p {
    font-size: .9rem;
    color: #4a6278
}

/* NEWSLETTER */
.bl-newsletter {
    margin-top: 64px;
    background: #0b1220;
    border-radius: 20px;
    padding: 44px 52px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 36px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 20px 52px rgba(11, 18, 32, .16);
    position: relative;
    overflow: hidden
}

.bl-newsletter::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(171, 206, 59, .07), transparent 65%);
    pointer-events: none
}

.bl-nl-txt h3 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: #f5f3ee !important;
    margin: 0 0 7px
}

.bl-nl-txt p {
    font-size: .84rem;
    color: rgba(245, 243, 238, .48);
    line-height: 1.62;
    margin: 0;
    max-width: 380px
}

.bl-nl-form {
    display: flex;
    gap: 10px;
    flex-shrink: 0
}

.bl-nl-input {
    background: rgba(255, 255, 255, .08);
    border: 1.5px solid rgba(255, 255, 255, .15);
    border-radius: 8px;
    padding: 11px 18px;
    font-size: .84rem;
    color: #f5f3ee;
    outline: none;
    font-family: var(--fd);
    width: 240px;
    transition: border-color .18s
}

.bl-nl-input::placeholder {
    color: rgba(245, 243, 238, .35)
}

.bl-nl-input:focus {
    border-color: #abce3b;
    background: rgba(255, 255, 255, .12)
}

.bl-nl-btn {
    background: #abce3b;
    color: #0b1220;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 11px 22px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-family: var(--fd);
    transition: background .15s, transform .15s;
    white-space: nowrap
}

.bl-nl-btn:hover {
    background: #c8e855;
    transform: translateY(-1px)
}

/* collection page css */

/* HERO HEADER */
.col-header {
    background: #020810;
    padding: 52px 70px 44px;
    margin-top: var(--nh, 70px);
    position: relative;
    overflow: hidden
}

.col-header::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 50% 80% at 85% 50%, rgba(171, 206, 59, .08) 0%, transparent 60%),
        radial-gradient(ellipse 35% 55% at 6% 80%, rgba(0, 100, 200, .06) 0%, transparent 55%)
}

.col-header::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(171, 206, 59, .02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(171, 206, 59, .02) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 70% 70% at 80% 50%, black 0%, transparent 65%)
}

.col-header-in {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px
}

.col-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 14px
}

.col-eyebrow-line {
    width: 28px;
    height: 1px;
    background: rgba(171, 206, 59, .5)
}

.col-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.026em;
    color: #f5f3ee !important;
    margin: 0 0 12px
}

.col-h1 em {
    font-style: normal;
    color: #abce3b
}

.col-desc {
    font-size: .88rem;
    color: rgba(245, 243, 238, .46);
    line-height: 1.7;
    margin: 0;
    max-width: 560px
}

.col-header-r {
    flex-shrink: 0;
    text-align: right
}

.col-stat-n {
    font-family: var(--fd, 'Lora', serif);
    font-size: 2.6rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
    margin-bottom: 3px
}

.col-stat-l {
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .3)
}

.col-med-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 40px;
    padding: 6px 14px;
    font-size: .64rem;
    font-weight: 600;
    color: rgba(245, 243, 238, .45)
}

.col-med-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #abce3b;
    flex-shrink: 0
}

/* CONTROLS BAR */
.col-controls {
    background: #fff;
    border-bottom: 2px solid rgba(11, 18, 32, .07);
    position: sticky;
    top: calc(var(--nh, 70px)+44px);
    z-index: 600;
    box-shadow: 0 2px 10px rgba(11, 18, 32, .05)
}

.col-ctrl-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden
}

.col-sw {
    position: relative;
    flex: 0 0 210px;
    margin-right: 12px
}

.col-sw svg {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    stroke: rgba(11, 18, 32, .3);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none
}

.col-search {
    width: 100%;
    background: #f5f9fc;
    border: 1.5px solid rgba(11, 18, 32, .12);
    border-radius: 8px;
    padding: 8px 28px 8px 32px;
    font-size: .8rem;
    color: #0b1a2e;
    outline: none;
    font-family: var(--fd);
    transition: border-color .18s, box-shadow .18s
}

.col-search::placeholder {
    color: rgba(11, 18, 32, .35)
}

.col-search:focus {
    border-color: #3a6a0a;
    box-shadow: 0 0 0 3px rgba(58, 106, 10, .08);
    background: #fff
}

.col-sclear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(11, 18, 32, .3);
    display: none;
    font-size: 1rem;
    padding: 0;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    transition: color .15s
}

.col-sclear:hover {
    color: #0b1a2e
}

.col-sclear.show {
    display: flex
}

/* scrollable filter strip */
.col-filts-wrap {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center
}

.col-filts-wrap::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 18px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to right, #fff, transparent)
}

.col-filts-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 18px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to left, #fff, transparent)
}

.col-filts {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 8px 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab
}

.col-filts.dragging {
    cursor: grabbing
}

.col-filts::-webkit-scrollbar {
    display: none
}

.col-filt {
    background: #f0f4f8;
    border: 1.5px solid rgba(11, 18, 32, .1);
    border-radius: 40px;
    color: rgba(11, 18, 32, .52);
    font-size: .68rem;
    font-weight: 700;
    padding: 5px 12px;
    cursor: pointer;
    transition: all .15s;
    font-family: var(--fd);
    white-space: nowrap;
    flex-shrink: 0
}

.col-filt:hover {
    background: #e8f2e8;
    border-color: rgba(58, 106, 10, .3);
    color: #3a6a0a
}

.col-filt.active {
    background: rgba(58, 106, 10, .12);
    border-color: #3a6a0a;
    color: #3a6a0a;
    font-weight: 800
}

/* sort + count */
.col-sort-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px
}

.col-sort-lbl {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(11, 18, 32, .35);
    white-space: nowrap
}

.col-sort {
    background: #f5f9fc;
    border: 1.5px solid rgba(11, 18, 32, .12);
    border-radius: 8px;
    padding: 7px 28px 7px 11px;
    font-size: .76rem;
    color: #0b1a2e;
    outline: none;
    font-family: var(--fd);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230b1a2e' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center
}

.col-sort:focus {
    border-color: #3a6a0a
}

.col-count {
    font-size: .67rem;
    font-weight: 700;
    color: rgba(11, 18, 32, .38);
    white-space: nowrap;
    background: #f0f4f8;
    border: 1px solid rgba(11, 18, 32, .08);
    padding: 4px 11px;
    border-radius: 40px;
    flex-shrink: 0;
    margin-left: 8px
}

/* MAIN */
.col-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 70px 80px
}

/* MEDICAL NOTE */
.col-note {
    background: #fff;
    border: 1.5px solid rgba(58, 106, 10, .14);
    border-radius: 12px;
    padding: 13px 18px;
    margin-bottom: 26px;
    display: flex;
    align-items: center;
    gap: 12px
}

.col-note svg {
    width: 17px;
    height: 17px;
    stroke: #3a6a0a;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    flex-shrink: 0
}

.col-note p {
    font-size: .75rem;
    color: #3a6a0a;
    margin: 0;
    line-height: 1.5
}

.col-note strong {
    font-weight: 700
}

/* REVEAL */
.r-up {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .42s cubic-bezier(.22, .68, 0, 1.1), transform .42s cubic-bezier(.22, .68, 0, 1.1);
    transition-delay: var(--d, 0s)
}

.r-up.on {
    opacity: 1;
    transform: none
}

/* PRODUCT GRID */
.col-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px
}

/* PRODUCT CARD */
.col-card {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .07);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .22s cubic-bezier(.22, .68, 0, 1.1), box-shadow .22s, border-color .22s;
    display: flex;
    flex-direction: column;
    position: relative
}

.template-collection .col-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 38px rgba(11, 18, 32, .12);
    border-color: rgba(58, 106, 10, .28)
}

.col-card.hidden {
    display: none
}

/* IMAGE AREA */
.col-card-img {
    position: relative;
    background: #f5f9fc;
    overflow: hidden;
    aspect-ratio: 1/1;
    flex-shrink: 0
}

.col-card-img a {
    display: block;
    width: 100%;
    height: 100%
}

.col-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 14px;
    display: block;
    transition: transform .34s cubic-bezier(.22, .68, 0, 1.1)
}

.col-card:hover .col-card-img img {
    transform: scale(1.07)
}

/* SALE BADGE */
.col-sale-badge {
    position: absolute;
    top: 9px;
    left: 9px;
    background: #abce3b;
    color: #0b1220;
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 5px;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(11, 18, 32, .15)
}

/* SLIDE-UP HOVER PANEL */
.col-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(11, 18, 32, .96) 0%, rgba(11, 18, 32, .82) 55%, transparent 100%);
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.22, .68, 0, 1.1);
    pointer-events: none
}

.col-card:hover .col-card-overlay {
    transform: translateY(0);
    pointer-events: auto
}

.col-card-overlay-desc {
    font-size: .69rem;
    color: rgba(245, 243, 238, .76);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.col-card-overlay-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px
}

.col-card-overlay-tag {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #abce3b;
    background: rgba(171, 206, 59, .12);
    border: 1px solid rgba(171, 206, 59, .25);
    padding: 2px 7px;
    border-radius: 40px
}

.col-card-overlay-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #abce3b;
    color: #0b1220;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .09em;
    padding: 7px 14px;
    border-radius: 7px;
    text-decoration: none;
    white-space: nowrap;
    align-self: flex-start;
    transition: background .14s
}

.col-card-overlay-btn:hover {
    background: #c8e855
}

.col-card-overlay-btn svg {
    width: 12px;
    height: 12px;
    stroke: #0b1220;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round
}

/* CARD BODY */
.col-card-body {
    padding: 14px 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-top: 1px solid rgba(11, 18, 32, .06)
}

.col-card-name {
    font-family: var(--fd, 'Lora', serif);
    font-size: .88rem;
    font-weight: 700;
    color: #0b1a2e !important;
    margin: 0;
    line-height: 1.22;
    text-decoration: none;
    display: block
}

.col-card-name:hover {
    color: #3a6a0a !important
}

.col-card-desc {
    font-size: .7rem;
    color: #4a6278;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1
}

/* PRICE */
.col-card-price {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px
}

.col-price {
    font-size: .84rem;
    font-weight: 700;
    color: #0b1a2e
}

.col-price.sale {
    color: #3a6a0a
}

.col-compare {
    font-size: .76rem;
    color: rgba(11, 18, 32, .35);
    text-decoration: line-through
}

.col-sale-lbl {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    background: rgba(58, 106, 10, .1);
    color: #3a6a0a;
    padding: 2px 7px;
    border-radius: 4px
}

.col-login-price {
    font-size: .72rem;
    font-weight: 700;
    color: #3a6a0a;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none
}

.col-login-price svg {
    width: 11px;
    height: 11px;
    stroke: #3a6a0a;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round
}

/* PAGINATION */
.col-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 44px;
    flex-wrap: wrap
}

.pag-no {
    display: flex;
    gap: 5px;
}

.col-pg-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1.5px solid rgba(11, 18, 32, .12);
    background: #fff;
    color: rgba(11, 18, 32, .6);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    font-family: var(--fd);
}

.col-pg-btn:hover:not(:disabled) {
    border-color: rgba(58, 106, 10, .35);
    background: #e8f2e8;
    color: #3a6a0a
}

.col-pg-btn.active {
    background: rgba(58, 106, 10, .12);
    border-color: #3a6a0a;
    color: #3a6a0a
}

.col-pg-btn:disabled {
    opacity: .35;
    cursor: not-allowed
}

.col-pg-btn.pg-arrow {
    font-size: 1.1rem
}

.col-pg-dots {
    color: rgba(11, 18, 32, .3);
    font-size: .8rem;
    padding: 0 4px;
    align-self: center
}

.col-pg-info {
    font-size: .72rem;
    color: rgba(11, 18, 32, .38);
    margin-top: 8px;
    text-align: center
}

/* NO RESULTS */
.col-no-results {
    display: none;
    text-align: center;
    padding: 56px 20px;
    grid-column: 1/-1
}

.col-no-results.show {
    display: block
}

.col-no-results svg {
    width: 44px;
    height: 44px;
    stroke: rgba(11, 18, 32, .15);
    margin-bottom: 14px
}

.col-no-results h3 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.1rem;
    color: rgba(11, 18, 32, .45);
    margin: 0 0 6px
}

.col-no-results p {
    font-size: .82rem;
    color: rgba(11, 18, 32, .32)
}

/* HEADER */
.ei-header {
    background: #0b1220;
    padding: 56px 70px 48px;
    margin-top: var(--nh, 70px);
    position: relative;
    overflow: hidden
}

.ei-header::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 55% 80% at 85% 45%, rgba(58, 106, 10, .1) 0%, transparent 60%),
        radial-gradient(ellipse 35% 60% at 8% 80%, rgba(0, 80, 200, .07) 0%, transparent 55%)
}

.ei-header::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(58, 106, 10, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(58, 106, 10, .025) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 70% 70% at 80% 50%, black 0%, transparent 65%)
}

.ei-header-in {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px
}

.ei-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 14px
}

.ei-eyebrow-line {
    width: 28px;
    height: 1px;
    background: rgba(171, 206, 59, .5)
}

.ei-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2.2rem, 4vw, 3.3rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.028em;
    color: #f5f3ee !important;
    margin: 0 0 12px
}

.ei-h1 em {
    font-style: normal;
    color: #abce3b
}

.ei-sub {
    font-size: .9rem;
    color: rgba(245, 243, 238, .48);
    line-height: 1.66;
    margin: 0;
    max-width: 500px
}

.ei-header-stats {
    display: flex;
    gap: 24px;
    align-items: flex-end;
    flex-shrink: 0
}

.ei-hstat {
    text-align: right
}

.ei-hstat-n {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
    margin-bottom: 3px
}

.ei-hstat-l {
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .3)
}

/* CONTROLS */
.ei-controls {
    background: #fff;
    border-bottom: 2px solid rgba(11, 18, 32, .08);
    position: sticky;
    top: calc(var(--nh, 70px)+44px);
    z-index: 600;
    box-shadow: 0 2px 10px rgba(11, 18, 32, .05)
}

.ei-ctrl-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px;
    height: 58px;
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden
}

.ei-sw {
    position: relative;
    flex: 0 0 240px;
    margin-right: 14px
}

.ei-sw svg {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    stroke: rgba(11, 18, 32, .3);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none
}

.ei-search {
    width: 100%;
    background: #f5f9fc;
    border: 1.5px solid rgba(11, 18, 32, .13);
    border-radius: 8px;
    padding: 9px 32px 9px 36px;
    font-size: .82rem;
    color: #0b1a2e;
    outline: none;
    font-family: var(--fd);
    transition: border-color .18s, background .18s
}

.ei-search::placeholder {
    color: rgba(11, 18, 32, .35)
}

.ei-search:focus {
    border-color: #3a6a0a;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(58, 106, 10, .08)
}

.ei-sclear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(11, 18, 32, .35);
    display: none;
    font-size: 1.1rem;
    padding: 0;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    transition: color .15s
}

.ei-sclear:hover {
    color: #0b1a2e
}

.ei-sclear.seen {
    display: flex
}

.ei-filts-wrap {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center
}

.ei-filts-wrap::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to right, #fff, transparent)
}

.ei-filts-wrap::after {
    content: '';
    position: absolute;
    right: 52px;
    top: 0;
    bottom: 0;
    width: 20px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to left, #fff, transparent)
}

.ei-filts {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 8px 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab
}

.ei-filts.dragging {
    cursor: grabbing
}

.ei-filts::-webkit-scrollbar {
    display: none
}

.ei-filt {
    background: #f0f4f8;
    border: 1.5px solid rgba(11, 18, 32, .1);
    border-radius: 40px;
    color: rgba(11, 18, 32, .52);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 6px 15px;
    cursor: pointer;
    transition: all .15s;
    font-family: var(--fd);
    white-space: nowrap;
    flex-shrink: 0
}

.ei-filt:hover {
    background: #e8f2e8;
    border-color: rgba(58, 106, 10, .3);
    color: #3a6a0a
}

.ei-filt.active {
    background: rgba(58, 106, 10, .12);
    border-color: #3a6a0a;
    color: #3a6a0a;
    font-weight: 800
}

.ei-filt-ct {
    font-weight: 400;
    opacity: .65
}

.ei-count {
    flex-shrink: 0;
    font-size: .7rem;
    font-weight: 700;
    color: rgba(11, 18, 32, .4);
    background: #f0f4f8;
    border: 1px solid rgba(11, 18, 32, .1);
    padding: 4px 12px;
    border-radius: 40px;
    white-space: nowrap;
    margin-left: 10px
}

/* MAIN */
.ei-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 44px 70px 80px
}

/* REVEAL */
.r-up {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s cubic-bezier(.22, .68, 0, 1.1), transform .5s cubic-bezier(.22, .68, 0, 1.1);
    transition-delay: var(--d, 0s)
}

.r-up.on {
    opacity: 1;
    transform: none
}

/* SECTION LABELS */
.ei-sec-head {
    margin: 0 0 18px
}

.ei-sec-eye {
    display: block;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #3a6a0a;
    margin-bottom: 7px
}

.ei-sec-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: #0b1a2e !important;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px
}

.ei-sec-badge {
    font-family: var(--fd);
    font-size: .64rem;
    font-weight: 700;
    color: #3a6a0a;
    background: rgba(58, 106, 10, .1);
    border: 1px solid rgba(58, 106, 10, .22);
    padding: 3px 10px;
    border-radius: 40px
}

/* PDF DOCUMENT CARDS */
.ei-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
    margin-bottom: 52px
}

.ei-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 13px;
    padding: 18px 16px;
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(11, 18, 32, .05);
    transition: transform .22s, box-shadow .22s, border-color .22s
}

.ei-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(11, 18, 32, .12);
    border-color: rgba(58, 106, 10, .28)
}

.ei-card.hidden {
    display: none
}

.ei-card-icon {
    flex-shrink: 0;
    width: 44px
}

.ei-card-icon svg {
    width: 44px;
    height: 52px;
    display: block
}

.ei-card-body {
    flex: 1;
    min-width: 0
}

.ei-tag {
    display: inline-block;
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 40px;
    border: 1px solid;
    margin-bottom: 6px
}

.ei-card-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: .88rem;
    font-weight: 700;
    color: #0b1a2e !important;
    margin: 0 0 5px;
    line-height: 1.3
}

.ei-card-desc {
    font-size: .74rem;
    color: #4a6278;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.ei-card-action {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #3a6a0a;
    padding-left: 8px;
    align-self: center
}

.ei-card-action svg {
    stroke: #3a6a0a
}

.ei-card-action span {
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #3a6a0a;
    white-space: nowrap
}

.ei-card:hover .ei-card-action,
.ei-card:hover .ei-card-action svg,
.ei-card:hover .ei-card-action span {
    color: #1a4d2e;
    stroke: #1a4d2e
}

/* VIDEO CARDS */
.ei-vid-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 52px
}

.ei-vid-card {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(11, 18, 32, .05);
    cursor: pointer;
    transition: transform .22s, box-shadow .22s, border-color .22s
}

.ei-vid-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(11, 18, 32, .13);
    border-color: rgba(184, 92, 0, .28)
}

.ei-vid-card.hidden {
    display: none
}

.ei-vid-thumb {
    position: relative;
    height: 160px;
    background: #fff3e8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.ei-vid-thumb-bg {
    opacity: .35
}

.ei-vid-thumb-bg svg {
    width: 80px;
    height: 80px
}

.ei-vid-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(184, 92, 0, .08);
    transition: background .2s
}

.ei-vid-card:hover .ei-vid-overlay {
    background: rgba(184, 92, 0, .2)
}

.ei-vid-play {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #b85c00;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(184, 92, 0, .4);
    transition: transform .2s, box-shadow .2s
}

.ei-vid-card:hover .ei-vid-play {
    transform: scale(1.1);
    box-shadow: 0 8px 28px rgba(184, 92, 0, .5)
}

.ei-vid-lbl {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #b85c00
}

.ei-vid-body {
    padding: 16px 18px 18px
}

.ei-vid-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: .95rem;
    font-weight: 700;
    color: #0b1a2e !important;
    margin: 8px 0 6px;
    line-height: 1.3
}

.ei-vid-desc {
    font-size: .74rem;
    color: #4a6278;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

/* VIDEO LIGHTBOX */
.ei-vid-lb {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(2, 8, 16, .96);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s
}

.ei-vid-lb.on {
    opacity: 1;
    pointer-events: auto
}

.ei-vid-lb-inner {
    width: min(860px, 90vw);
    aspect-ratio: 16/9;
    position: relative
}

.ei-vid-lb-inner iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px
}

.ei-vid-lb-x {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: rgba(245, 243, 238, .5);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    transition: color .15s
}

.ei-vid-lb-x:hover {
    color: #f5f3ee
}

/* NO RESULTS */
.ei-no-results {
    display: none;
    text-align: center;
    padding: 48px 20px;
    grid-column: 1/-1
}

.ei-no-results.show {
    display: block
}

.ei-no-results p {
    font-size: .9rem;
    color: #4a6278
}

/* CTA */
.ei-cta {
    margin-top: 52px;
    background: #0b1220;
    border-radius: 18px;
    padding: 36px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 16px 48px rgba(11, 18, 32, .18);
    position: relative;
    overflow: hidden
}

.ei-cta::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(171, 206, 59, .07), transparent 65%);
    pointer-events: none
}

.ei-cta-txt h3 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: #f5f3ee !important;
    margin: 0 0 7px
}

.ei-cta-txt p {
    font-size: .84rem;
    color: rgba(245, 243, 238, .48);
    line-height: 1.62;
    margin: 0;
    max-width: 420px
}

.ei-cta-btns {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0
}

/* HERO HEADER */
.cl-header {
    background: #020810;
    padding: 52px 70px 44px;
    margin-top: var(--nh, 70px);
    position: relative;
    overflow: hidden;
}

.cl-header::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 55% 80% at 85% 45%, rgba(171, 206, 59, .08) 0%, transparent 60%),
        radial-gradient(ellipse 35% 60% at 6% 80%, rgba(0, 100, 200, .06) 0%, transparent 55%);
}

.cl-header::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(171, 206, 59, .02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(171, 206, 59, .02) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 70% 70% at 80% 50%, black 0%, transparent 65%);
}

.cl-header-in {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.cl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 14px;
}

.cl-eyebrow-line {
    width: 28px;
    height: 1px;
    background: rgba(171, 206, 59, .5);
}

.cl-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.026em;
    color: #abce3b !important;
    margin: 0 0 12px;
}

.cl-h1 em {
    font-style: normal;
    color: #ffffff;
}

.cl-sub {
    font-size: .88rem;
    color: rgba(245, 243, 238, .46);
    line-height: 1.7;
    margin: 0;
    max-width: 520px;
}

.cl-header-stats {
    display: flex;
    gap: 28px;
    flex-shrink: 0;
}

.cl-stat {
    text-align: right;
}

.cl-stat-n {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.9rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
    margin-bottom: 3px;
}

.cl-stat-l {
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .3);
}

/* MAIN */
.cl-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 44px 70px 80px;
}

/* SECTION LABELS */
.cl-sec-label {
    margin-bottom: 22px;
}

.cl-sec-eye {
    display: block;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #3a6a0a;
    margin-bottom: 8px;
}

.cl-sec-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: #0b1a2e !important;
    margin: 0;
}

/* FEATURED ROW — 3 large cards */
.cl-featured {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

/* FEATURED CARD */
.cl-feat-card {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .07);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(11, 18, 32, .07);
    transition: transform .24s cubic-bezier(.22, .68, 0, 1.1), box-shadow .24s, border-color .24s;
}

.cl-feat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 44px rgba(11, 18, 32, .13);
}

/* Featured image trio */
.cl-feat-img-wrap {
    position: relative;
    height: 200px;
    background: #f5f9fc;
    overflow: hidden;
    flex-shrink: 0;
}

.cl-feat-img-main {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 130px;
    height: 130px;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(11, 18, 32, .18));
    transition: transform .32s;
    z-index: 3;
}

.cl-feat-card:hover .cl-feat-img-main {
    transform: translateY(-58%) scale(1.06);
}

.cl-feat-img-sec {
    position: absolute;
    left: 16px;
    bottom: 10px;
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(11, 18, 32, .12));
    opacity: .7;
    z-index: 2;
    transition: opacity .22s;
}

.cl-feat-img-ter {
    position: absolute;
    left: 60px;
    bottom: 24px;
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(11, 18, 32, .1));
    opacity: .45;
    z-index: 1;
    transition: opacity .22s;
}

.cl-feat-card:hover .cl-feat-img-sec {
    opacity: .9;
}

.cl-feat-card:hover .cl-feat-img-ter {
    opacity: .65;
}

/* Accent gradient overlay */
.cl-feat-overlay {
    position: absolute;
    inset: 0;
    opacity: .06;
    transition: opacity .22s;
}

.cl-feat-card:hover .cl-feat-overlay {
    opacity: .1;
}

.cl-feat-body {
    padding: 20px 22px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cl-feat-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.cl-feat-tag {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 40px;
    border: 1px solid;
}

.cl-feat-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 7px;
    line-height: 1.2;
}

.cl-feat-desc {
    font-size: .78rem;
    color: #4a6278;
    line-height: 1.58;
    margin: 0 0 16px;
    flex: 1;
}

.cl-feat-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid rgba(11, 18, 32, .07);
}

.cl-feat-count {
    font-size: .72rem;
    font-weight: 700;
    color: rgba(11, 18, 32, .45);
}

.cl-feat-arrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #3a6a0a;
    transition: gap .18s;
}

.cl-feat-card:hover .cl-feat-arrow {
    gap: 9px;
}

.cl-feat-arrow svg {
    width: 12px;
    height: 12px;
    stroke: #3a6a0a;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* MORE COLLECTIONS GRID — 5-col */
.cl-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

/* STANDARD CARD */
.cl-card {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .07);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    box-shadow: 0 3px 12px rgba(11, 18, 32, .06);
    transition: transform .22s cubic-bezier(.22, .68, 0, 1.1), box-shadow .22s, border-color .22s;
}

.cl-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(11, 18, 32, .12);
}

.cl-card-img-wrap {
    height: 148px;
    background: #f5f9fc;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.cl-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    display: block;
    transition: transform .32s cubic-bezier(.22, .68, 0, 1.1);
}

.cl-card:hover .cl-card-img-wrap img {
    transform: scale(1.07);
}

.cl-card-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .2s;
}

.cl-card:hover .cl-card-overlay {
    opacity: .07;
}

.cl-card-body {
    padding: 14px 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid rgba(11, 18, 32, .06);
}

.cl-card-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: .9rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0;
    line-height: 1.22;
}

.cl-card-desc {
    font-size: .71rem;
    color: #4a6278;
    line-height: 1.5;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cl-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(11, 18, 32, .06);
}

.cl-card-count {
    font-size: .66rem;
    font-weight: 700;
    color: rgba(11, 18, 32, .38);
}

.cl-card-go {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(58, 106, 10, .1);
    border: 1px solid rgba(58, 106, 10, .2);
    transition: background .15s;
}

.cl-card:hover .cl-card-go {
    background: #3a6a0a;
    border-color: #3a6a0a;
}

.cl-card-go svg {
    width: 11px;
    height: 11px;
    stroke: rgba(58, 106, 10, .8);
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .15s;
}

.cl-card:hover .cl-card-go svg {
    stroke: #fff;
}

/* CTA STRIP */
.cl-cta {
    margin-top: 56px;
    background: #0b1220;
    border-radius: 18px;
    padding: 36px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 16px 48px rgba(11, 18, 32, .18);
    position: relative;
    overflow: hidden;
}

.cl-cta::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(171, 206, 59, .07), transparent 65%);
    pointer-events: none;
}

.cl-cta-txt h3 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: #f5f3ee !important;
    margin: 0 0 7px;
}

.cl-cta-txt p {
    font-size: .84rem;
    color: rgba(245, 243, 238, .48);
    line-height: 1.62;
    margin: 0;
    max-width: 420px;
}

.cl-cta-btns {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

/* Product page css */
.pd-bc.moVedw {
    top: 70px;
}

.pd-page-start {
    margin-top: calc(var(--nh, 70px) + 44px)
}

.r-up {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s cubic-bezier(.22, .68, 0, 1.1), transform .5s cubic-bezier(.22, .68, 0, 1.1);
    transition-delay: var(--d, 0s)
}

.r-up.on {
    opacity: 1;
    transform: none
}

/* PRODUCT HERO */
.pd-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 52px 70px 60px
}

.pd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start
}

.ai-bc-back {
    font-size: .65rem;
    font-weight: 700;
    color: #0b1220;
    background: rgba(11, 18, 32, .1);
    border-radius: 40px;
    padding: 5px 15px;
    text-decoration: none;
}

/* ── GALLERY ── */
.pd-gallery {
    position: sticky;
    top: calc(var(--nh, 70px)+44px+24px)
}

.pd-main-img {
    background: #f5f9fc;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 1/1;
    position: relative;
    margin-bottom: 14px;
    box-shadow: 0 4px 24px rgba(11, 18, 32, .07)
}

.pd-main-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 24px;
    display: block;
    transition: opacity .2s
}

.pd-thumbs {
    display: flex;
    gap: 10px
}

.pd-thumb {
    width: 72px;
    height: 72px;
    border: 2px solid rgba(11, 18, 32, .1);
    border-radius: 10px;
    overflow: hidden;
    background: #f5f9fc;
    cursor: pointer;
    transition: border-color .18s, transform .18s;
    flex-shrink: 0
}

.pd-thumb:hover {
    border-color: rgba(58, 106, 10, .4);
    transform: translateY(-2px)
}

.pd-thumb.active {
    border-color: #3a6a0a;
    box-shadow: 0 0 0 3px rgba(58, 106, 10, .12)
}

.pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    display: block
}

/* SALE RIBBON */
.pd-sale-ribbon {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #abce3b;
    color: #0b1220;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(11, 18, 32, .15);
    z-index: 2
}

/* ── INFO ── */
.pd-info {}

.pd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #3a6a0a;
    margin-bottom: 12px
}

.pd-eyebrow-line {
    width: 22px;
    height: 1px;
    background: rgba(58, 106, 10, .4)
}

.pd-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.022em;
    color: #0b1a2e !important;
    margin: 0 0 16px
}

.pd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px
}

.pd-tag {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #3a6a0a;
    background: rgba(58, 106, 10, .09);
    border: 1px solid rgba(58, 106, 10, .22);
    padding: 3px 10px;
    border-radius: 40px
}

.pd-stk {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: #abce3b;
    color: #0b1220;
    padding: 3px 10px;
    margin-bottom: 15px;
    display: inline-block;
    border-radius: 5px
}

/* PRICE */
.pd-price-block {
    background: #f5f9fc;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 20px
}

.pd-price-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px
}

.pd-price {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.9rem;
    font-weight: 700;
    color: #3a6a0a
}

.pd-compare {
    font-size: 1.1rem;
    color: rgba(11, 18, 32, .35);
    text-decoration: line-through
}

.pd-save {
    background: #3a6a0a;
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 4px 11px;
    border-radius: 5px
}

.pd-price-note {
    font-size: .76rem;
    color: rgba(11, 18, 32, .45);
    line-height: 1.5;
    margin: 0
}

/* SIZE SELECTOR */
.pd-option-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(11, 18, 32, .55);
    margin: 0 0 8px;
    display: block
}

.pd-sizes {
    display: flex;
    gap: 8px;
    margin-bottom: 20px
}

.pd-size {
    background: #fff;
    border: 2px solid rgba(11, 18, 32, .15);
    border-radius: 8px;
    padding: 9px 20px;
    font-size: .82rem;
    font-weight: 700;
    color: #0b1a2e;
    cursor: pointer;
    transition: all .15s;
    font-family: var(--fd);
}

.pd-size:hover {
    border-color: #3a6a0a;
    color: #3a6a0a
}

.pd-size.active {
    border-color: #3a6a0a;
    background: rgba(58, 106, 10, .07);
    color: #3a6a0a
}

/* QTY + ADD */
.pd-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center
}

.pd-qty-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid rgba(11, 18, 32, .15);
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0
}

.pd-qty-btn {
    width: 36px;
    height: 44px;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #0b1a2e;
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center
}

.pd-qty-btn:hover {
    background: #f0f4f8
}

.pd-qty-val {
    width: 40px;
    text-align: center;
    font-size: .86rem;
    font-weight: 700;
    color: #0b1a2e;
    padding: 10px 0;
    border: none;
    outline: none;
    background: none;
    font-family: var(--fd);
}

.pd-add-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #0b1220;
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 12px 20px;
    border-radius: 9px;
    text-decoration: none;
    transition: background .18s
}

.pd-add-btn:not([disabled]):hover {
    background: #1a2a40;
    color: #fff;
}

.pd-add-btn.login {
    background: #3a6a0a;
    color: #fff
}

.pd-add-btn.login:hover {
    background: #4d8c0e
}

.pd-add-btn.disabled-btn {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.pd-add-btn svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0
}


/* ── DOWNLOAD CARDS GROUP ──────────────────────────────────── */
.pd-downloads {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.pd-wp {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1.5px solid rgba(58, 106, 10, .25);
    border-radius: 10px;
    padding: 11px 16px;
    text-decoration: none;
    transition: border-color .16s, background .16s;
    min-width: 0;
}

.pd-wp:hover {
    border-color: #3a6a0a;
    background: #f0f8e8;
}

.pd-wp-icon {
    width: 34px;
    height: 34px;
    background: rgba(58, 106, 10, .1);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pd-wp-icon svg {
    width: 16px;
    height: 16px;
    stroke: #3a6a0a;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pd-wp-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pd-wp-lbl {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #3a6a0a;
    white-space: nowrap;
}

.pd-wp-name {
    font-size: .76rem;
    font-weight: 700;
    color: #0b1a2e;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-wp.rack {
    border-color: rgba(0, 102, 204, .25);
}

.pd-wp.rack:hover {
    border-color: #0066cc;
    background: #f0f4ff;
}

.pd-wp.rack .pd-wp-icon {
    background: rgba(0, 102, 204, .09);
    border: 1px solid rgba(0, 102, 204, .2);
}

.pd-wp.rack .pd-wp-icon svg {
    stroke: #0066cc;
}

.pd-wp.rack .pd-wp-lbl {
    color: #0066cc;
}

/* TRUST BADGES */
.pd-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px
}

.pd-trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .7rem;
    font-weight: 600;
    color: rgba(11, 18, 32, .55)
}

.pd-trust-icon {
    width: 18px;
    height: 18px;
    stroke: #3a6a0a;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    flex-shrink: 0
}

/* SHARE */
.pd-share {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(11, 18, 32, .08)
}

.pd-share-lbl {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(11, 18, 32, .38)
}

.pd-share-btn {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: #f0f4f8;
    border: 1.5px solid rgba(11, 18, 32, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all .15s
}

.pd-share-btn:hover {
    background: #3a6a0a;
    border-color: #3a6a0a
}

.pd-share-btn:hover svg {
    stroke: #fff
}

.pd-share-btn svg {
    width: 14px;
    height: 14px;
    stroke: rgba(11, 18, 32, .55);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0
}

/* ── DESCRIPTION TABS ── */
.pd-tabs-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px 72px
}

.pd-tabs-nav {
    display: flex;
    border-bottom: 2px solid rgba(11, 18, 32, .09);
    gap: 0;
    margin-bottom: 36px
}

.pd-tab {
    padding: 12px 24px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: rgba(11, 18, 32, .45);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-family: var(--fd);
    transition: color .15s, border-color .15s;
    white-space: nowrap
}

.pd-tab:hover {
    color: #0b1a2e
}

.pd-tab.active {
    color: #3a6a0a;
    border-bottom-color: #3a6a0a
}

.pd-tab-panel {
    display: none
}

.pd-tab-panel.active {
    display: block
}

/* Description content */
.pd-desc {
    max-width: 820px;
    color: #4a6278;
}

.pd-desc h3 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 24px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px
}

.pd-desc h3:first-child {
    margin-top: 0
}

.pd-desc p {
    font-size: .88rem;
    color: #4a6278;
    line-height: 1.76;
    margin: 0 0 14px
}

.pd-desc ul {
    margin: 0 0 14px;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px
}

.pd-desc ul li {
    font-size: .86rem;
    color: #4a6278;
    line-height: 1.6;
    padding-left: 20px;
    position: relative
}

.pd-desc ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #abce3b
}

.pd-desc strong {
    color: #0b1a2e;
    font-weight: 700
}

.pd-desc em {
    font-style: italic
}

/* Strain cards */
.pd-strains {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 16px 0
}

.pd-strain {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 3px 10px rgba(11, 18, 32, .04)
}

.pd-strain-name {
    font-family: var(--fd, 'Lora', serif);
    font-size: .85rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 5px
}

.pd-strain-desc {
    font-size: .76rem;
    color: #4a6278;
    line-height: 1.5;
    margin: 0
}

.pd-strain-badge {
    display: inline-block;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #3a6a0a;
    background: rgba(58, 106, 10, .09);
    border: 1px solid rgba(58, 106, 10, .2);
    padding: 2px 8px;
    border-radius: 40px;
    margin-bottom: 7px
}

/* Benefits grid */
.pd-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0
}

.pd-benefit {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .07);
    border-radius: 12px;
    padding: 16px 16px;
    box-shadow: 0 3px 10px rgba(11, 18, 32, .04);
    text-align: center
}

.pd-benefit-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(58, 106, 10, .08);
    border: 1px solid rgba(58, 106, 10, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px
}

.pd-benefit-icon svg {
    width: 18px;
    height: 18px;
    stroke: #3a6a0a;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.pd-benefit-t {
    font-size: .78rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 4px
}

.pd-benefit-d {
    font-size: .7rem;
    color: #4a6278;
    line-height: 1.5;
    margin: 0
}

/* Supplement facts */
.pd-facts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
    margin-top: 12px
}

.pd-facts-table th {
    text-align: left;
    font-weight: 700;
    color: #0b1a2e;
    padding: 10px 12px;
    background: #f5f9fc;
    border: 1px solid rgba(11, 18, 32, .1);
    font-size: .75rem
}

.pd-facts-table td {
    padding: 9px 12px;
    border: 1px solid rgba(11, 18, 32, .07);
    color: #4a6278;
    vertical-align: top
}

.pd-facts-table tr:nth-child(even) td {
    background: #fafcfa
}

.pd-facts-note {
    font-size: .72rem;
    color: rgba(11, 18, 32, .4);
    line-height: 1.55;
    margin-top: 12px
}

/* RELATED / UPSELL */
.pd-related {
    background: #fff;
    border-top: 2px solid rgba(11, 18, 32, .06);
    padding: 56px 0
}

.pd-related-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px
}

.pd-related-eye {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #3a6a0a;
    margin-bottom: 9px
}

.pd-related-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: #0b1a2e !important;
    margin: 0 0 32px
}

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

.pd-rel-card {
    background: #f5f9fc;
    border: 1.5px solid rgba(11, 18, 32, .07);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    display: flex;
    flex-direction: column
}

.pd-rel-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(11, 18, 32, .1);
    border-color: rgba(58, 106, 10, .25)
}

.pd-rel-card-img {
    aspect-ratio: 1/1;
    background: #fff;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center
}

.pd-rel-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.pd-rel-card-body {
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(11, 18, 32, .06)
}

.pd-rel-card-name {
    font-family: var(--fd, 'Lora', serif);
    font-size: .84rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 5px;
    line-height: 1.25
}

.pd-rel-card-price {
    font-size: .78rem;
    font-weight: 700;
    color: #3a6a0a
}

/* ── IMAGE ZOOM ──────────────────────────────────────────────── */
.pd-main-img {
    cursor: zoom-in;
}

.pd-main-img.zoomed {
    cursor: zoom-out;
}

/* Zoom lens overlay — shows magnified region */
.pd-zoom-lens {
    position: absolute;
    border: 2px solid rgba(58, 106, 10, .6);
    background: rgba(58, 106, 10, .08);
    width: 120px;
    height: 120px;
    border-radius: 4px;
    pointer-events: none;
    display: none;
    z-index: 5;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .4);
}

.pd-main-img:hover .pd-zoom-lens {
    display: block;
}

/* Zoom result panel — appears to the right of gallery */
.pd-zoom-result {
    position: absolute;
    left: calc(100% + 16px);
    top: 0;
    width: 420px;
    height: 420px;
    border: 1.5px solid rgba(11, 18, 32, .1);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 40px rgba(11, 18, 32, .14);
    display: none;
    z-index: 100;
    pointer-events: none;
}

.pd-zoom-result img {
    position: absolute;
    max-width: none;
    width: auto;
    height: auto;
    display: block;
}

/* Lightbox */
.pd-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(2, 8, 16, .94);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
}

.pd-lightbox.on {
    opacity: 1;
    pointer-events: auto;
}

.pd-lightbox-img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .7);
    transform: scale(.95);
    transition: transform .28s cubic-bezier(.22, .68, 0, 1.1);
}

.pd-lightbox.on .pd-lightbox-img {
    transform: scale(1);
}

.pd-lightbox-x {
    position: absolute;
    top: 20px;
    right: 24px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(245, 243, 238, .7);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    border: none;
    transition: background .15s, color .15s;
}

.pd-lightbox-x:hover {
    background: rgba(255, 255, 255, .18);
    color: #f5f3ee;
}

.pd-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(245, 243, 238, .7);
    font-size: 1.4rem;
    cursor: pointer;
    border: none;
    transition: background .15s, color .15s;
}

.pd-lightbox-nav:hover {
    background: rgba(255, 255, 255, .2);
    color: #f5f3ee;
}

.pd-lightbox-prev {
    left: 20px;
}

.pd-lightbox-next {
    right: 20px;
}

.pd-lightbox-hint {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .68rem;
    color: rgba(245, 243, 238, .35);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    pointer-events: none;
}

/* Zoom icon badge on image */
.pd-zoom-icon {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 4;
    background: rgba(11, 18, 32, .55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 7px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .7);
    pointer-events: none;
    transition: opacity .15s;
}

.pd-main-img:hover .pd-zoom-icon {
    opacity: 0;
}

.pd-zoom-icon svg {
    width: 13px;
    height: 13px;
    stroke: rgba(245, 243, 238, .7);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
}

/* Cart page css */
/* HEADER ZONE */
.cart-header {
    background: #020810;
    margin-top: var(--nh, 70px);
    padding: 44px 70px 40px;
    position: relative;
    overflow: hidden;
    margin-bottom: 0px;
}

.cart-header::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 50% 80% at 85% 50%, rgba(171, 206, 59, .07) 0%, transparent 60%),
        radial-gradient(ellipse 35% 55% at 6% 80%, rgba(0, 100, 200, .05) 0%, transparent 55%);
}

.cart-header-in {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.cart-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 10px;
}

.cart-eyebrow-line {
    width: 24px;
    height: 1px;
    background: rgba(171, 206, 59, .5);
}

.cart-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.024em;
    color: #f5f3ee !important;
    margin: 0;
}

.cart-h1 em {
    font-style: normal;
    color: #abce3b;
}

.cart-header-r {
    flex-shrink: 0;
    text-align: right;
}

.cart-item-ct {
    font-family: var(--fd, 'Lora', serif);
    font-size: 2.2rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
    margin-bottom: 3px;
}

.cart-item-lbl {
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .3);
}

.cart-continue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .7rem;
    font-weight: 700;
    color: rgba(245, 243, 238, .45);
    text-decoration: none;
    transition: color .15s;
}

.cart-continue:hover {
    color: #abce3b;
}

.cart-continue svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.ai-bc-secure {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .63rem;
    font-weight: 700;
    color: rgba(11, 18, 32, .55);
}

.ai-bc-secure svg {
    width: 13px;
    height: 13px;
    stroke: #0b1220;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

/* MAIN LAYOUT */
.cart-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 70px 80px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
}

/* REVEAL */
.r-up {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s cubic-bezier(.22, .68, 0, 1.1), transform .45s cubic-bezier(.22, .68, 0, 1.1);
    transition-delay: var(--d, 0s);
}

.r-up.on {
    opacity: 1;
    transform: none;
}

.al-center {
    max-width: 350px;
    margin: 0 auto;
    padding: 32px 70px;
    display: flex;
}

/* ── CART TABLE ── */
.cart-table {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .07);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 3px 16px rgba(11, 18, 32, .06);
}

.cart-thead {
    background: #f5f9fc;
    border-bottom: 1.5px solid rgba(11, 18, 32, .08);
}

.cart-thead-row {
    display: grid;
    grid-template-columns: 1fr 120px 120px 100px;
    gap: 0;
    padding: 12px 22px;
}

.cart-th {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(11, 18, 32, .4);
}

.cart-th.right {
    text-align: right;
}

.cart-th.center {
    text-align: center;
}

/* Cart row */
.cart-row {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 0;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(11, 18, 32, .06);
    align-items: center;
    transition: background .15s;
}

.cart-row-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: space-between;
}

.cart-row:last-child {
    border-bottom: none;
}

.cart-row:hover {
    background: #fafcf8;
}

.cart-product {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cart-img {
    width: 68px;
    height: 68px;
    border-radius: 10px;
    border: 1.5px solid rgba(11, 18, 32, .08);
    overflow: hidden;
    background: #f5f9fc;
    flex-shrink: 0;
}

.cart-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    display: block;
}

.cart-info {
    min-width: 0;
}

.cart-pname {
    font-family: var(--fd, 'Lora', serif);
    font-size: .9rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 3px;
    line-height: 1.25;
    text-decoration: none;
    display: block;
}

.cart-pname:hover {
    color: #3a6a0a;
}

.cart-variant {
    font-size: .72rem;
    color: rgba(11, 18, 32, .4);
    margin: 0 0 7px;
}

.cart-remove {
    font-size: .68rem;
    font-weight: 700;
    color: #c0392b;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: var(--fd);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color .15s;
}

.cart-remove:hover {
    color: #922b21;
    text-decoration: underline;
}

.cart-remove svg {
    width: 11px;
    height: 11px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.cart-price {
    font-size: .88rem;
    font-weight: 700;
    color: #0b1a2e;
    text-align: right;
}

.cart-price-compare {
    font-size: .74rem;
    color: rgba(11, 18, 32, .35);
    text-decoration: line-through;
    display: block;
}

.cart-price-sale {
    color: #3a6a0a;
}

/* Qty stepper */
.cart-qty-cell {
    display: flex;
    justify-content: center;
}

.cart-qty {
    display: flex;
    align-items: center;
    border: 1.5px solid rgba(11, 18, 32, .14);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.cart-qty-btn {
    width: 30px;
    height: 34px;
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    color: #0b1a2e;
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cart-qty-btn:hover {
    background: #f0f4f8;
}

.cart-qty-val {
    width: 36px;
    text-align: center;
    font-size: .82rem;
    font-weight: 700;
    color: #0b1a2e;
    border: none;
    outline: none;
    background: none;
    font-family: var(--fd);
    -moz-appearance: textfield;
    padding: 5px 0;
}

.cart-qty-val::-webkit-outer-spin-button,
.cart-qty-val::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.cart-total {
    font-size: .92rem;
    font-weight: 700;
    color: #0b1a2e;
    text-align: right;
}

/* ── EMPTY STATE ── */
.cart-empty {
    display: none;
    text-align: center;
    padding: 60px 30px;
}

.cart-empty.show {
    display: block;
}

.cart-empty svg {
    width: 52px;
    height: 52px;
    stroke: rgba(11, 18, 32, .15);
    fill: none;
    margin-bottom: 16px;
}

.cart-empty h3 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.2rem;
    color: rgba(11, 18, 32, .4);
    margin: 0 0 8px;
}

.cart-empty p {
    font-size: .84rem;
    color: rgba(11, 18, 32, .3);
}

.cart-empty a {
    display: inline-block;
    margin-top: 16px;
    background: #3a6a0a;
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 8px;
    text-decoration: none;
}

/* ── ORDER SUMMARY ── */
.cart-summary {
    position: sticky;
    top: calc(var(--nh, 70px) + 44px + 20px);
}

.cart-summary-card {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .07);
    border-radius: 16px;
    padding: 24px 24px 28px;
    box-shadow: 0 3px 16px rgba(11, 18, 32, .06);
}

.cart-sum-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1.5px solid rgba(11, 18, 32, .08);
}

.cart-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cart-sum-lbl {
    font-size: .82rem;
    color: rgba(11, 18, 32, .55);
}

.cart-sum-val {
    font-size: .86rem;
    font-weight: 700;
    color: #0b1a2e;
}

.cart-sum-val.green {
    color: #3a6a0a;
}

.cart-sum-divider {
    height: 1px;
    background: rgba(11, 18, 32, .08);
    margin: 14px 0;
}

.cart-sum-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.cart-sum-total-lbl {
    font-size: .9rem;
    font-weight: 700;
    color: #0b1a2e;
}

.cart-sum-total-val {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: #0b1a2e;
}

.cart-sum-note {
    font-size: .72rem;
    color: rgba(11, 18, 32, .38);
    margin: 6px 0 20px;
}

/* Buttons */
.cart-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #3a6a0a;
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 14px 20px;
    border-radius: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: var(--fd);
    transition: background .18s, transform .18s;
    margin-bottom: 10px;
}

.cart-checkout-btn:hover {
    background: #4d8c0e;
    transform: translateY(-1px);
}

.cart-checkout-btn:not([disabled]):hover,
.cart-empty a:not([disabled]):hover {
    color: #fff;
}

.cart-checkout-btn svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cart-update-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    background: transparent;
    color: rgba(11, 18, 32, .55);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 11px 20px;
    border-radius: 10px;
    border: 1.5px solid rgba(11, 18, 32, .14);
    cursor: pointer;
    font-family: var(--fd);
    transition: border-color .15s, color .15s, background .15s;
    margin-bottom: 18px;
}

.cart-update-btn:hover {
    border-color: #3a6a0a;
    color: #3a6a0a;
    background: rgba(58, 106, 10, .04);
}

.cart-update-btn svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

/* Payment icons */
.cart-pay-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 16px;
}

.cart-pay-icon {
    height: 22px;
    background: #f5f9fc;
    border: 1px solid rgba(11, 18, 32, .1);
    border-radius: 4px;
    padding: 3px 7px;
    font-size: .56rem;
    font-weight: 800;
    color: rgba(11, 18, 32, .4);
    letter-spacing: .05em;
    display: flex;
    align-items: center;
}

/* Trust strip */
.cart-trust {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(11, 18, 32, .07);
    padding-top: 16px;
}

.cart-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    color: rgba(11, 18, 32, .5);
}

.cart-trust-item svg {
    width: 14px;
    height: 14px;
    stroke: #3a6a0a;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.dwl-doc {
    display: flex;
    background: #3a6a0a;
    align-items: center;
    min-height: 50px;
    border: 5px solid #fff !important;
    opacity: 1;
    max-width: max-content;
    padding: 10px 25px 11px 20px !important;
    border-radius: 9px;
    gap: 10px;
    color: #fff;
}

/* Sonic smart wave therapy page css */

.ep-sec {
    padding: 72px 0
}

.ep-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px
}

.ep-light {
    background: #f5f9fc
}

.ep-dark {
    background: #0b1220
}

.ep-mid {
    background: #f0f4f8
}

.ep-eye {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 9px
}

.ep-light .ep-eye,
.ep-mid .ep-eye {
    color: #3a6a0a
}

.ep-dark .ep-eye {
    color: #abce3b
}

.ss-wt-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.02em;
    margin: 0 0 14px
}

.ep-light .ss-wt-title,
.ep-mid .ss-wt-title {
    color: #0b1a2e;
}

.ep-dark .s-wt-title {
    color: #f5f3ee;
}

.ep-sub {
    font-size: .9rem;
    line-height: 1.74;
    margin: 0 0 40px;
    max-width: 700px
}

.ep-light .ep-sub,
.ep-mid .ep-sub {
    color: #4a6278
}

.ep-dark .ep-sub {
    color: rgba(245, 243, 238, .48)
}

/* HERO */
.ssw-hero {
    background: #020810;
    margin-top: var(--nh, 70px);
    position: relative;
    overflow: hidden
}

.ssw-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 80% at 85% 42%, rgba(171, 206, 59, .08) 0%, transparent 58%), radial-gradient(ellipse 38% 55% at 7% 75%, rgba(0, 120, 220, .06) 0%, transparent 55%);
    pointer-events: none
}

.ssw-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(171, 206, 59, .02) 1px, transparent 1px), linear-gradient(90deg, rgba(171, 206, 59, .02) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 65% 70% at 82% 50%, black 0%, transparent 65%);
    pointer-events: none
}

.ssw-hero-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 44px 70px 0;
    display: grid;
    grid-template-columns: 58% 42%;
    align-items: flex-end;
    gap: 40px;
    position: relative;
    z-index: 1
}

.ssw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 16px
}

.ssw-eyebrow-line {
    width: 28px;
    height: 1px;
    background: rgba(171, 206, 59, .5)
}

.ssw-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.028em;
    color: #f5f3ee !important;
    margin: 0 0 16px
}

.ssw-h1 em {
    font-style: normal;
    color: #abce3b
}

.ssw-lead {
    font-size: .92rem;
    color: rgba(245, 243, 238, .52);
    line-height: 1.74;
    margin: 0 0 26px;
    max-width: 520px
}

.ssw-hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 36px
}

.ssw-hero-img img {
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    filter: drop-shadow(0 -8px 28px rgba(171, 206, 59, .06))
}

/* STATS BAR */
.ssw-stats-bar {
    background: #0b1220;
    border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.ssw-stats-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px;
    display: flex;
    align-items: center
}

.ssw-stat {
    flex: 1;
    padding: 16px 20px;
    border-right: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    gap: 10px
}

.ssw-stat:last-child {
    border-right: none
}

.ssw-stat:first-child {
    padding-left: 0
}

.ssw-stat-n {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #abce3b;
    white-space: nowrap
}

.ssw-stat-l {
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .32)
}

/* HOW IT WORKS */
.ssw-how {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: center
}

.ssw-how-img img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(11, 18, 32, .1);
    display: block
}

.ssw-how-txt h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.6rem, 2.8vw, 2.3rem);
    font-weight: 700;
    color: #0b1a2e !important;
    margin: 0 0 14px;
    line-height: 1.1
}

.ssw-how-txt h2 em {
    font-style: normal;
    color: #3a6a0a
}

.ssw-txt-p {
    font-size: .88rem;
    color: #4a6278;
    line-height: 1.76;
    margin: 0 0 14px
}

.ssw-mech {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px
}

.ssw-mech-card {
    background: #f5f9fc;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 10px;
    padding: 14px 16px
}

.ssw-mech-t {
    font-size: .8rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 4px
}

.ssw-mech-d {
    font-size: .74rem;
    color: #4a6278;
    line-height: 1.5;
    margin: 0
}

/* 4 CATEGORY SECTIONS */
.ssw-cats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 40px
}

.ssw-cat {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 18px;
    padding: 26px 24px;
    box-shadow: 0 4px 18px rgba(11, 18, 32, .07);
    transition: transform .22s, box-shadow .22s
}

.ssw-cat:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(11, 18, 32, .12)
}

.ssw-cat-header {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1.5px solid rgba(11, 18, 32, .07)
}

.ssw-cat-icon {
    width: 46px;
    height: 46px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.ssw-cat-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.ssw-cat-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0
}

.ssw-cat-desc {
    font-size: .78rem;
    color: #4a6278;
    line-height: 1.58;
    margin: 0 0 14px
}

.ssw-cat-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0
}

.ssw-cat-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(11, 18, 32, .06);
    font-size: .81rem;
    color: #4a6278;
    line-height: 1.5
}

.ssw-cat-item:last-child {
    border-bottom: none;
    padding-bottom: 0
}

.ssw-cat-item strong {
    color: #0b1a2e;
    font-weight: 700;
    display: block;
    margin-bottom: 1px;
    font-size: .82rem
}

.ssw-cat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px
}

/* FEATURES IMAGE */
.ssw-features-img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(11, 18, 32, .12);
    display: block;
    margin: 0 auto
}

.ssw-faq-wrap {
    max-width: 860px;
    margin: 0 auto;
}

/* Hair Saliva Analysis page css */

/* HERO */
.hsa-hero {
    background: #020810;
    margin-top: var(--nh, 70px);
    position: relative;
    overflow: hidden
}

.hsa-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 90% at 88% 48%, rgba(171, 206, 59, .07) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 5% 78%, rgba(0, 120, 220, .06) 0%, transparent 55%);
    pointer-events: none
}

.hsa-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(171, 206, 59, .02) 1px, transparent 1px), linear-gradient(90deg, rgba(171, 206, 59, .02) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 60% 70% at 80% 50%, black 0%, transparent 65%);
    pointer-events: none
}

.hsa-hero-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 44px 70px 0;
    display: grid;
    grid-template-columns: 58% 42%;
    align-items: flex-end;
    gap: 40px;
    position: relative;
    z-index: 1
}

.hsa-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 16px
}

.hsa-eyebrow-line {
    width: 28px;
    height: 1px;
    background: rgba(171, 206, 59, .5)
}

.hsa-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2rem, 3.8vw, 3.1rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.028em;
    color: #f5f3ee !important;
    margin: 0 0 16px
}

.hsa-h1 em {
    font-style: normal;
    color: #abce3b
}

.hsa-lead {
    font-size: .92rem;
    color: rgba(245, 243, 238, .52);
    line-height: 1.74;
    margin: 0 0 28px;
    max-width: 520px
}

.hsa-hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 36px
}

.hsa-stat-strip {
    display: flex;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 22px
}

.hsa-stat {
    flex: 1;
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, .08)
}

.hsa-stat:last-child {
    border-right: none;
    padding-right: 0;
    padding-left: 20px
}

.hsa-stat:first-child {
    padding-left: 0
}

.hsa-stat-n {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.55rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
    margin-bottom: 3px
}

.hsa-stat-l {
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .3)
}

/* Hero image */
.hsa-hero-img {
    position: relative;
    overflow: hidden
}

.hsa-hero-img img {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    object-position: top;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    display: block
}

.hsa-hero-badge {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: #abce3b;
    color: #0b1220;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 7px 18px;
    border-radius: 40px;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(11, 18, 32, .25);
    z-index: 2
}

/* SECTION BASE */
.ep-sec {
    padding: 72px 0
}

.ep-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px
}

.ep-light {
    background: #f5f9fc
}

.ep-dark {
    background: #0b1220
}

.ep-mid {
    background: #f0f4f8
}

.ep-eye {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 9px
}

.ep-light .ep-eye,
.ep-mid .ep-eye {
    color: #3a6a0a
}

.ep-dark .ep-eye {
    color: #abce3b
}

.ep-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.02em;
}

.ep-light .ep-title,
.ep-mid .ep-title {
    color: #0b1a2e !important
}

.ep-dark .ep-title {
    color: #f5f3ee !important
}

.ep-sub {
    font-size: .9rem;
    line-height: 1.74;
    margin: 0 0 40px;
    max-width: 700px
}

.ep-light .ep-sub,
.ep-mid .ep-sub {
    color: #4a6278
}

.ep-dark .ep-sub {
    color: rgba(245, 243, 238, .48)
}

/* BENEFITS GRID */
.hsa-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

.hsa-ben {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    padding: 24px 22px;
    transition: border-color .2s, background .2s
}

.hsa-ben:hover {
    border-color: rgba(171, 206, 59, .22);
    background: rgba(255, 255, 255, .07)
}

.hsa-ben-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: rgba(171, 206, 59, .12);
    border: 1px solid rgba(171, 206, 59, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    flex-shrink: 0
}

.hsa-ben-icon svg {
    width: 22px;
    height: 22px;
    stroke: #abce3b;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

.hsa-ben-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: .96rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 7px
}

.hsa-ben-desc {
    font-size: .8rem;
    color: rgba(245, 243, 238, .48);
    line-height: 1.6;
    margin: 0
}

/* HOW IT WORKS — 2 col */
.hsa-how {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center
}

.hsa-how-img img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(11, 18, 32, .1)
}

.hsa-how-txt h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.6rem, 2.8vw, 2.3rem);
    font-weight: 700;
    color: #0b1a2e !important;
    margin: 0 0 14px;
    line-height: 1.1
}

.hsa-how-txt h2 em {
    font-style: normal;
    color: #3a6a0a
}

.hsa-how-p {
    font-size: .88rem;
    color: #4a6278;
    line-height: 1.76;
    margin: 0 0 16px
}

/* STEPS TIMELINE */
.hsa-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 44px;
    position: relative
}

.hsa-steps::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #abce3b, rgba(171, 206, 59, .12));
    pointer-events: none
}

.hsa-step {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 0 0 32px 0;
    position: relative
}

.hsa-step:last-child {
    padding-bottom: 0
}

.hsa-step-num {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #abce3b;
    color: #0b1220;
    font-size: .72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 4px rgba(171, 206, 59, .12)
}

.hsa-step-body {
    flex: 1;
    padding-top: 9px
}

.hsa-step-svg {
    width: 18px;
    height: 18px;
    stroke: #0b1220;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.hsa-step-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: .98rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 6px
}

.hsa-step-desc {
    font-size: .82rem;
    color: #4a6278;
    line-height: 1.62;
    margin: 0
}

/* 19 SYSTEMS GRID */
.hsa-systems {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 36px
}

.hsa-sys {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 9px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(11, 18, 32, .05);
    transition: border-color .18s
}

.hsa-sys:hover {
    border-color: rgba(58, 106, 10, .3)
}

.hsa-sys-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #abce3b;
    flex-shrink: 0
}

.hsa-sys-name {
    font-size: .78rem;
    font-weight: 600;
    color: #0b1a2e;
    line-height: 1.3
}

/* SAMPLE REPORT */
.hsa-report {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center
}

.hsa-report-img {
    position: relative
}

.hsa-report-img img {
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(11, 18, 32, .14);
    display: block
}

.hsa-report-txt h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.6rem, 2.8vw, 2.3rem);
    font-weight: 700;
    color: #0b1a2e !important;
    margin: 0 0 14px;
    line-height: 1.1
}

.hsa-report-txt h2 em {
    font-style: normal;
    color: #3a6a0a
}

.hsa-report-txt p {
    font-size: .88rem;
    color: #4a6278;
    line-height: 1.76;
    margin: 0 0 14px
}

.hsa-report-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0
}

.hsa-report-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: .84rem;
    color: #4a6278;
    line-height: 1.65;
    padding: 12px 0;
    border-bottom: 1px solid rgba(11, 18, 32, .07)
}

.hsa-report-list li::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #abce3b;
    flex-shrink: 0;
    margin-top: 7px
}

/* BANNER */
.hsa-banner {
    position: relative;
    overflow: hidden;
    min-height: 250px;
    display: flex;
    align-items: center
}

.hsa-banner-bg {
    position: absolute;
    inset: 0
}

.hsa-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.22) saturate(.4)
}

.hsa-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(11, 18, 32, .97) 0%, rgba(11, 18, 32, .7) 55%, rgba(11, 18, 32, .2) 100%)
}

.hsa-banner-in {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 52px 70px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 44px
}

.hsa-banner-eye {
    display: block;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 11px
}

.hsa-banner-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.022em;
    color: #f5f3ee !important;
    margin: 0 0 10px
}

.hsa-banner-h2 em {
    font-style: normal;
    color: #abce3b
}

.hsa-banner-p {
    font-size: .88rem;
    color: rgba(245, 243, 238, .45);
    line-height: 1.7;
    margin: 0;
    max-width: 440px
}

.hsa-banner-r {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    min-width: 200px
}

/* Contact us page css  */

/* HERO */
.ct-hero {
    background: #020810;
    margin-top: var(--nh, 70px);
    padding: 52px 70px 44px;
    position: relative;
    overflow: hidden
}

.ct-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 55% 80% at 85% 40%, rgba(171, 206, 59, .09) 0%, transparent 60%), radial-gradient(ellipse 35% 55% at 8% 75%, rgba(0, 100, 200, .07) 0%, transparent 55%)
}

.ct-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(171, 206, 59, .022) 1px, transparent 1px), linear-gradient(90deg, rgba(171, 206, 59, .022) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 70% 70% at 82% 50%, black 0%, transparent 65%)
}

.ct-hero-in {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px
}

.ct-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 14px
}

.ct-eyebrow-line {
    width: 26px;
    height: 1px;
    background: rgba(171, 206, 59, .5)
}

.ct-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.026em;
    color: #f5f3ee !important;
    margin: 0 0 12px
}

.ct-h1 em {
    font-style: normal;
    color: #abce3b
}

.ct-sub {
    font-size: .9rem;
    color: rgba(245, 243, 238, .46);
    line-height: 1.72;
    margin: 0 0 28px;
    max-width: 500px
}

.ct-hero-btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.ct-hero-r {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end
}

.ct-info-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    padding: 11px 16px;
    text-decoration: none;
    transition: border-color .18s, background .18s
}

.ct-info-pill:hover {
    border-color: rgba(171, 206, 59, .3);
    background: rgba(171, 206, 59, .05)
}

.ct-info-pill-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(171, 206, 59, .12);
    border: 1px solid rgba(171, 206, 59, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.ct-info-pill-icon svg {
    width: 16px;
    height: 16px;
    stroke: #abce3b;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.ct-info-pill-txt {
    display: flex;
    flex-direction: column
}

.ct-info-pill-lbl {
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .35)
}

.ct-info-pill-val {
    font-size: .82rem;
    font-weight: 700;
    color: #f5f3ee;
    white-space: nowrap
}

/* ── ZONE 1: Form + Contact Info (side by side, natural height) ── */
.ct-zone1 {
    max-width: 1100px;
    margin: 0 auto;
    padding: 52px 70px 0;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start
}

/* FORM CARD */
.ct-form-wrap {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 18px;
    padding: 36px 38px;
    box-shadow: 0 4px 24px rgba(11, 18, 32, .07)
}

.ct-form-eye {
    display: block;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #3a6a0a;
    margin-bottom: 8px
}

.ct-form-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.45rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 22px;
    line-height: 1.15
}

.ct-form-body {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.ct-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.ct-field {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.ct-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(11, 18, 32, .48);
    display: block
}

.ct-input,
.ct-select,
.ct-textarea {
    background: #f5f9fc;
    border: 1.5px solid rgba(11, 18, 32, .12);
    border-radius: 9px;
    padding: 11px 14px;
    font-size: .86rem;
    color: #0b1a2e;
    outline: none;
    font-family: inherit;
    transition: border-color .18s, box-shadow .18s;
    width: 100%;
    display: block;
    box-sizing: border-box
}

.ct-input:focus,
.ct-select:focus,
.ct-textarea:focus {
    border-color: #3a6a0a;
    box-shadow: 0 0 0 3px rgba(58, 106, 10, .08);
    background: #fff
}

.ct-input::placeholder,
.ct-textarea::placeholder {
    color: rgba(11, 18, 32, .3)
}

.ct-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230b1a2e' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
    cursor: pointer
}

.ct-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6
}

.ct-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #3a6a0a;
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 13px 28px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background .18s, transform .16s;
    margin-top: 4px;
    width: 100%
}

.ct-submit:hover {
    background: #4d8c0e;
    transform: translateY(-1px)
}

.ct-success {
    text-align: center;
    padding: 32px 20px;
    background: #f0f8e8;
    border: 1.5px solid rgba(58, 106, 10, .2);
    border-radius: 12px;
    margin: 12px 0 30px;
    position: relative;
}

.cl-ref {
    display: inline-flex;
    background-color: #97b738;
    height: 30px;
    width: 30px;
    color: #333;
    border-radius: 100px;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    position: absolute;
    top: -10px;
    right: -7px;
    cursor: pointer;
}

.ct-success.show {
    display: block
}

.ct-success svg {
    width: 42px;
    height: 42px;
    stroke: #3a6a0a;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    margin-bottom: 12px
}

.ct-success h4 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 7px
}

.ct-success p {
    font-size: .83rem;
    color: #4a6278;
    margin: 0;
    line-height: 1.6
}

/* CONTACT SIDEBAR — right of form */
.ct-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.ct-card {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 3px 14px rgba(11, 18, 32, .06)
}

.ct-card-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: .96rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 14px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(11, 18, 32, .07)
}

.ct-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 1px solid rgba(11, 18, 32, .05);
    transition: opacity .15s
}

.ct-contact-row:last-child {
    border-bottom: none;
    padding-bottom: 0
}

.ct-contact-row:hover {
    opacity: .75
}

.ct-contact-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(58, 106, 10, .09);
    border: 1px solid rgba(58, 106, 10, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px
}

.ct-contact-icon svg {
    width: 16px;
    height: 16px;
    stroke: #3a6a0a;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.ct-contact-txt {
    display: flex;
    flex-direction: column;
    gap: 1px
}

.ct-contact-lbl {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(11, 18, 32, .38)
}

.ct-contact-val {
    font-size: .84rem;
    font-weight: 700;
    color: #0b1a2e;
    line-height: 1.3
}

.ct-contact-sub {
    font-size: .72rem;
    color: rgba(11, 18, 32, .42);
    line-height: 1.45
}

/* Map in sidebar */
.ct-map-card {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(11, 18, 32, .06)
}

.ct-map-embed {
    width: 100%;
    height: 190px;
    border: none;
    display: block
}

.ct-map-footer {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.ct-map-addr {
    font-size: .75rem;
    color: rgba(11, 18, 32, .55);
    line-height: 1.5
}

.ct-map-addr strong {
    color: #0b1a2e;
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
    font-size: .78rem
}

.ct-map-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #3a6a0a;
    background: rgba(58, 106, 10, .08);
    border: 1px solid rgba(58, 106, 10, .18);
    border-radius: 7px;
    padding: 6px 12px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s
}

.ct-map-btn:hover {
    background: rgba(58, 106, 10, .15)
}

.ct-map-btn svg {
    width: 11px;
    height: 11px;
    stroke: #3a6a0a;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round
}

/* ── ZONE 2: Hours + Partnership (below, side by side) ── */
.ct-zone2 {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 70px 72px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start
}

/* HOURS */
.ct-hours-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid rgba(11, 18, 32, .06)
}

.ct-hours-row:last-child {
    border-bottom: none
}

.ct-hours-day {
    font-size: .82rem;
    color: rgba(11, 18, 32, .55);
    font-weight: 600
}

.ct-hours-time {
    font-size: .82rem;
    font-weight: 700;
    color: #0b1a2e
}

.ct-hours-time.closed {
    color: rgba(11, 18, 32, .32);
    font-weight: 500
}

.ct-today {
    background: rgba(58, 106, 10, .08);
    border-radius: 6px;
    padding: 2px 9px;
    color: #27500a
}

/* PARTNERSHIP DARK CARD */
.ct-partner {
    background: #0b1220;
    border-radius: 16px;
    padding: 28px 28px;
    border: 1px solid rgba(255, 255, 255, .07);
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.ct-partner-eye {
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #abce3b
}

.ct-partner-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0
}

.ct-partner-desc {
    font-size: .82rem;
    color: rgba(245, 243, 238, .45);
    line-height: 1.65;
    margin: 0
}

.ct-partner-types {
    display: flex;
    gap: 7px;
    flex-wrap: wrap
}

.ct-partner-tag {
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .09em;
    color: #abce3b;
    background: rgba(171, 206, 59, .1);
    border: 1px solid rgba(171, 206, 59, .25);
    padding: 4px 11px;
    border-radius: 40px
}

.ct-partner-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px
}

.ct-social {
    display: flex;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .07)
}

.ct-soc-btn {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background .15s
}

.ct-soc-btn:hover {
    background: rgba(255, 255, 255, .15)
}

.ct-soc-btn svg {
    width: 14px;
    height: 14px;
    stroke: rgba(245, 243, 238, .6);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round
}

/* FAQ section for SEO */
.ct-faq {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 70px 72px
}

.ct-faq-eye {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #3a6a0a;
    display: block;
    margin-bottom: 8px
}

.ct-faq-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: #0b1a2e !important;
    margin: 0 0 24px
}

.ct-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.ct-faq-card {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(11, 18, 32, .05)
}

.ct-faq-q {
    font-family: var(--fd, 'Lora', serif);
    font-size: .9rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 7px;
    line-height: 1.35
}

.ct-faq-a {
    font-size: .8rem;
    color: #4a6278;
    line-height: 1.62;
    margin: 0
}

/* May account page css */
.acct-top {
    background: #0b1220;
    margin-top: var(--nh, 70px);
    border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.acct-top-in {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 70px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.acct-top-txt {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .38)
}

.acct-top-logout {
    font-size: .72rem;
    font-weight: 700;
    color: #abce3b;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px
}

.acct-top-logout:not([disabled]):hover,
.acct-top-logout:not([disabled]):focus {
    color: #c8e855
}

.acct-top-logout svg {
    width: 14px;
    height: 14px;
    stroke: #abce3b;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round
}

.acct-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 44px 70px 80px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start
}

.acct-section-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.55rem;
    font-weight: 700;
    color: #0b1a2e;
    letter-spacing: -.01em;
    margin: 0 0 22px;
    display: flex;
    align-items: center;
    gap: 10px
}

.acct-section-title svg {
    width: 20px;
    height: 20px;
    stroke: #3a6a0a;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0
}

/* ORDER HISTORY TABLE */
.acct-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(11, 18, 32, .06)
}

.acct-table th {
    padding: 13px 18px;
    text-align: left;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #3a6a0a;
    background: #f5f9fc;
    border-bottom: 1.5px solid rgba(11, 18, 32, .08)
}

.acct-table td {
    padding: 14px 18px;
    font-size: .84rem;
    color: #4a6278;
    border-bottom: 1px solid rgba(11, 18, 32, .06)
}

.acct-table tr:last-child td {
    border-bottom: none
}

.acct-table tr:hover td {
    background: #fafcff
}

.acct-order-num {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(58, 106, 10, .1);
    border: 1px solid rgba(58, 106, 10, .25);
    border-radius: 6px;
    font-size: .74rem;
    font-weight: 700;
    color: #3a6a0a;
    text-decoration: none;
    transition: background .15s
}

.acct-order-num:hover {
    background: rgba(58, 106, 10, .18)
}

.acct-badge {
    display: inline-block;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 3px 9px;
    border-radius: 40px
}

.acct-badge.refunded {
    background: rgba(200, 60, 60, .1);
    color: #c03c3c
}

.acct-badge.voided {
    background: rgba(11, 18, 32, .08);
    color: rgba(11, 18, 32, .45)
}

.acct-badge.paid {
    background: rgba(58, 106, 10, .12);
    color: #3a6a0a
}

.acct-badge.fulfilled {
    background: rgba(58, 106, 10, .12);
    color: #3a6a0a
}

.acct-badge.unfulfilled {
    background: rgba(180, 130, 0, .1);
    color: #8a6200
}

.acct-badge.pending {
    background: rgba(180, 130, 0, .1);
    color: #8a6200
}

.acct-empty {
    padding: 36px 20px;
    text-align: center;
    font-size: .86rem;
    color: rgba(11, 18, 32, .38)
}

/* ACCOUNT DETAILS CARD */
.acct-details-card {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 3px 14px rgba(11, 18, 32, .06)
}

.acct-detail-name {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 4px
}

.acct-detail-addr {
    font-size: .82rem;
    color: #4a6278;
    line-height: 1.7;
    margin: 0 0 18px
}

.acct-detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: #3a6a0a;
    border-radius: 8px;
    padding: 9px 16px;
    text-decoration: none;
    transition: background .15s
}

.acct-detail-btn:not([disabled]):hover,
.acct-detail-btn:not([disabled]):focus {
    background: #4d8c0e;
    color: #fff;
}

/* Address page css */

.addr-top {
    background: #0b1220;
    margin-top: var(--nh, 70px);
    border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.addr-top-in {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 70px;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 6px
}

.addr-back {
    font-size: .72rem;
    font-weight: 700;
    color: #abce3b;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px
}

.addr-back:not([disabled]):hover {
    color: #c8e855
}

.addr-back svg {
    width: 14px;
    height: 14px;
    stroke: #abce3b;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round
}

.addr-main {
    max-width: 900px;
    margin: 0 auto;
    padding: 44px 70px 80px
}

.addr-page-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.7rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 24px;
    letter-spacing: -.02em
}

.addr-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #fff;
    background: #3a6a0a;
    border-radius: 9px;
    padding: 11px 20px;
    text-decoration: none;
    transition: background .15s;
    margin-bottom: 32px
}

.addr-add-btn:hover {
    background: #4d8c0e
}

.addr-add-btn svg {
    width: 15px;
    height: 15px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round
}

.addr-section-lbl {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #3a6a0a;
    margin: 0 0 12px;
    display: block
}

.addr-card {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 3px 14px rgba(11, 18, 32, .06);
    margin-bottom: 16px
}

.addr-card-body {
    font-size: .84rem;
    color: #4a6278;
    line-height: 1.72;
    margin: 0 0 16px
}

.addr-card-body strong {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    color: #0b1a2e;
    margin-bottom: 3px
}

.addr-card-actions {
    display: flex;
    gap: 8px
}

.addr-btn-edit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: #3a6a0a;
    border-radius: 7px;
    padding: 7px 14px;
    text-decoration: none;
    transition: background .15s;
    border: none;
    cursor: pointer;
    font-family: inherit
}

.addr-btn-edit:hover {
    background: #4d8c0e
}

.addr-btn-del {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #c03c3c;
    background: rgba(200, 60, 60, .08);
    border-radius: 7px;
    padding: 7px 14px;
    text-decoration: none;
    transition: background .15s;
    border: 1px solid rgba(200, 60, 60, .2);
    cursor: pointer;
    font-family: inherit
}

.addr-btn-del:hover {
    background: rgba(200, 60, 60, .15)
}

/* FORM */
.addr-form-card {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 16px;
    padding: 28px 28px;
    box-shadow: 0 4px 20px rgba(11, 18, 32, .07);
    margin-bottom: 28px
}

.addr-form-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(11, 18, 32, .07)
}

.addr-form {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.addr-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.addr-field {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.addr-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(11, 18, 32, .45);
    display: block
}

.addr-main .addr-input,
.addr-main .addr-select {
    background: #f5f9fc;
    border: 1.5px solid rgba(11, 18, 32, .12);
    border-radius: 9px;
    padding: 11px 14px;
    font-size: .86rem;
    color: #0b1a2e;
    outline: none;
    font-family: inherit;
    transition: border-color .18s, box-shadow .18s;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
    display: block
}

.addr-input:focus,
.addr-select:focus {
    border-color: #3a6a0a;
    box-shadow: 0 0 0 3px rgba(58, 106, 10, .08);
    background: #fff
}

.addr-input::placeholder {
    color: rgba(11, 18, 32, .3)
}

.addr-main .addr-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230b1a2e' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
    cursor: pointer
}

.addr-check-row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .82rem;
    color: rgba(11, 18, 32, .55);
    cursor: pointer
}

.addr-check-row input {
    width: 16px !important;
    height: 16px;
    accent-color: #3a6a0a;
    cursor: pointer;
    flex-shrink: 0;
    margin-bottom: 0;
}

.addr-main .addr-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #fff;
    background: #3a6a0a;
    border-radius: 9px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    margin-bottom: 0;
    font-family: inherit;
    transition: background .15s, transform .15s
}

.addr-submit-btn:hover {
    background: #4d8c0e;
    transform: translateY(-1px)
}

.addr-cancel {
    font-size: .78rem;
    color: rgba(11, 18, 32, .45);
    text-decoration: none;
    margin-left: 14px;
    border: none;
    background: none;
}

.addr-cancel:hover {
    color: #0b1a2e
}

.add-btn-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px
}

/* Account orders css */

.od-top {
    background: #0b1220;
    margin-top: var(--nh, 70px);
    border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.od-top-in {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 70px;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 6px
}

.od-back {
    font-size: .72rem;
    font-weight: 700;
    color: #abce3b;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px
}

.od-back:not([disabled]):hover {
    color: #c8e855
}

.od-back svg {
    width: 14px;
    height: 14px;
    stroke: #abce3b;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round
}

.od-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 44px 70px 80px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start
}

.od-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.7rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 8px;
    letter-spacing: -.02em
}

.od-date {
    font-size: .8rem;
    color: rgba(11, 18, 32, .45);
    margin: 0 0 28px
}

.od-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(11, 18, 32, .06);
    margin-bottom: 2px
}

.od-table th {
    padding: 13px 18px;
    text-align: left;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #3a6a0a;
    background: #f5f9fc;
    border-bottom: 1.5px solid rgba(11, 18, 32, .08) border-left: none;
    border-right: none;
}

.od-table td {
    padding: 14px 18px;
    font-size: .84rem;
    color: #4a6278;
    border-bottom: 1px solid rgba(11, 18, 32, .06) border-left: none;
    border-right: none;
}

.od-table tr:last-child td {
    border-bottom: none
}

.order-table__product a:not([disabled]) {
    color: #3a6a0a;
    text-decoration: none;
    border-bottom: none;
    font-weight: 600
}

.order-table__product a:not([disabled]):hover {
    text-decoration: underline
}

.od-totals {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(11, 18, 32, .06);
    margin-top: 10px
}

.od-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(11, 18, 32, .06);
    font-size: .84rem;
    color: #4a6278
}

.od-total-row:last-child {
    border-bottom: none;
    font-weight: 700;
    color: #0b1a2e;
    font-size: .92rem;
    padding: 14px 18px
}

.od-total-row:last-child span:last-child {
    color: #3a6a0a;
    font-family: var(--fd, 'Lora', serif);
    font-size: 1rem
}

.od-addr-card {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 3px 14px rgba(11, 18, 32, .06);
    margin-bottom: 16px
}

.od-addr-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(11, 18, 32, .07)
}

.od-addr-status {
    display: flex;
    gap: 6px;
    margin-bottom: 12px
}

.od-addr-body {
    font-size: .82rem;
    color: #4a6278;
    line-height: 1.7
}

.od-badge {
    display: inline-block;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 3px 9px;
    border-radius: 40px
}

.od-badge.refunded {
    background: rgba(200, 60, 60, .1);
    color: #c03c3c
}

.od-badge.unfulfilled {
    background: rgba(180, 130, 0, .1);
    color: #8a6200
}

.od-badge.paid {
    background: rgba(58, 106, 10, .12);
    color: #3a6a0a
}

.od-badge.fulfilled {
    background: rgba(58, 106, 10, .12);
    color: #3a6a0a
}

/* Acoustic Light Wave css */
/* HERO */
.alw-hero {
    background: #020810;
    margin-top: var(--nh, 70px);
    position: relative;
    overflow: hidden
}

.alw-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 80% at 85% 45%, rgba(171, 206, 59, .08) 0%, transparent 58%), radial-gradient(ellipse 38% 55% at 7% 75%, rgba(0, 120, 220, .06) 0%, transparent 55%);
    pointer-events: none
}

.alw-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(171, 206, 59, .02) 1px, transparent 1px), linear-gradient(90deg, rgba(171, 206, 59, .02) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 65% 70% at 82% 50%, black 0%, transparent 65%);
    pointer-events: none
}

.alw-hero-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 44px 70px 0;
    display: grid;
    grid-template-columns: 58% 42%;
    align-items: flex-end;
    gap: 40px;
    position: relative;
    z-index: 1
}

.alw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 16px
}

.alw-eyebrow-line {
    width: 28px;
    height: 1px;
    background: rgba(171, 206, 59, .5)
}

.alw-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.028em;
    color: #f5f3ee !important;
    margin: 0 0 16px
}

.alw-h1 em {
    font-style: normal;
    color: #abce3b
}

.alw-lead {
    font-size: .92rem;
    color: rgba(245, 243, 238, .52);
    line-height: 1.74;
    margin: 0 0 26px;
    max-width: 520px
}

.alw-hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 0;
    padding-bottom: 36px
}

.alw-hero-img img {
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    object-position: bottom;
    display: block;
    filter: drop-shadow(0 -10px 40px rgba(171, 206, 59, .06))
}

/* STATS BAR */
.alw-stats-bar {
    background: #0b1220;
    border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.alw-stats-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px;
    display: flex;
    align-items: center
}

.alw-stat {
    flex: 1;
    padding: 16px 20px;
    border-right: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    gap: 10px
}

.alw-stat:last-child {
    border-right: none
}

.alw-stat:first-child {
    padding-left: 0
}

.alw-stat-n {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: #abce3b;
    white-space: nowrap
}

.alw-stat-l {
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .32)
}

/* SECTION */
.ep-sec {
    padding: 72px 0
}

.ep-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px
}

.ep-light {
    background: #f5f9fc
}

.ep-dark {
    background: #0b1220
}

.ep-mid {
    background: #f0f4f8
}

.ep-eye {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 9px
}

.ep-light .ep-eye,
.ep-mid .ep-eye {
    color: #3a6a0a
}

.ep-dark .ep-eye {
    color: #abce3b
}

.ep-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.02em;
}

.ep-light .ep-title,
.ep-mid .ep-title {
    color: #0b1a2e !important
}

.ep-dark .ep-title {
    color: #f5f3ee !important
}

.ep-sub {
    font-size: .9rem;
    line-height: 1.74;
    margin: 0 0 40px;
    max-width: 700px
}

.ep-light .ep-sub,
.ep-mid .ep-sub {
    color: #4a6278
}

.ep-dark .ep-sub {
    color: rgba(245, 243, 238, .48)
}

/* WHAT IS / HOW WORKS — 2 col */
.alw-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center
}

.alw-2col-img img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(11, 18, 32, .1);
    display: block
}

.alw-2col-txt h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.6rem, 2.8vw, 2.3rem);
    font-weight: 700;
    color: #0b1a2e !important;
    margin: 0 0 14px;
    line-height: 1.1
}

.alw-2col-txt h2 em {
    font-style: normal;
    color: #3a6a0a
}

.alw-txt-p {
    font-size: .88rem;
    color: #4a6278;
    line-height: 1.76;
    margin: 0 0 14px
}

.alw-spec-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0
}

.alw-spec-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(11, 18, 32, .07);
    font-size: .84rem;
    color: #4a6278;
    line-height: 1.55
}

.alw-spec-item:last-child {
    border-bottom: none
}

.alw-spec-item strong {
    color: #0b1a2e;
    font-weight: 700;
    display: block;
    margin-bottom: 2px
}

.alw-spec-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #abce3b;
    flex-shrink: 0;
    margin-top: 6px
}

/* SPECS GRID */
.alw-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 40px
}

.alw-spec-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    padding: 24px 22px;
    transition: border-color .2s, background .2s
}

.alw-spec-card:hover {
    border-color: rgba(171, 206, 59, .22);
    background: rgba(255, 255, 255, .07)
}

.alw-spec-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: rgba(171, 206, 59, .12);
    border: 1px solid rgba(171, 206, 59, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px
}

.alw-spec-icon svg {
    width: 22px;
    height: 22px;
    stroke: #abce3b;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

.alw-spec-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: .96rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 5px
}

.alw-spec-desc {
    font-size: .8rem;
    color: rgba(245, 243, 238, .48);
    line-height: 1.6;
    margin: 0
}

/* BENEFITS — conditions */
.alw-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 40px
}

.alw-ben {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 14px;
    padding: 22px 20px;
    box-shadow: 0 3px 12px rgba(11, 18, 32, .06);
    transition: transform .22s, box-shadow .22s, border-color .22s
}

.alw-ben:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(11, 18, 32, .11);
    border-color: rgba(58, 106, 10, .25)
}

.alw-ben-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(58, 106, 10, .09);
    border: 1px solid rgba(58, 106, 10, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px
}

.alw-ben-icon svg {
    width: 20px;
    height: 20px;
    stroke: #3a6a0a;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.alw-ben-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: .94rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 6px
}

.alw-ben-desc {
    font-size: .78rem;
    color: #4a6278;
    line-height: 1.58;
    margin: 0
}

/* GALLERY */
.alw-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 40px
}

.alw-gallery-img {
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
    transition: transform .22s, box-shadow .22s
}

.alw-gallery-img:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 36px rgba(11, 18, 32, .16)
}

.alw-gallery-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .32s
}

.alw-gallery-img:hover img {
    transform: scale(1.06)
}

/* LIGHTBOX */
.alw-lb {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(2, 8, 16, .95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s
}

.alw-lb.on {
    opacity: 1;
    pointer-events: auto
}

.alw-lb-img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .7);
    transform: scale(.95);
    transition: transform .28s cubic-bezier(.22, .68, 0, 1.1)
}

.alw-lb.on .alw-lb-img {
    transform: scale(1)
}

.alw-lb-close {
    position: absolute;
    top: 18px;
    right: 22px;
    background: rgba(255, 255, 255, .09);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(245, 243, 238, .7);
    font-size: 1.5rem;
    cursor: pointer;
    transition: background .15s
}

.alw-lb-close:hover {
    background: rgba(255, 255, 255, .2)
}

.alw-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .09);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(245, 243, 238, .7);
    font-size: 1.4rem;
    cursor: pointer;
    transition: background .15s
}

.alw-lb-nav:hover {
    background: rgba(255, 255, 255, .2)
}

.alw-lb-prev {
    left: 20px
}

.alw-lb-next {
    right: 20px
}

/* BANNER */
.alw-banner {
    position: relative;
    overflow: hidden;
    min-height: 240px;
    display: flex;
    align-items: center
}

.alw-banner-bg {
    position: absolute;
    inset: 0
}

.alw-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.22) saturate(.4)
}

.alw-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(11, 18, 32, .97) 0%, rgba(11, 18, 32, .7) 55%, rgba(11, 18, 32, .2) 100%)
}

.alw-banner-in {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 52px 70px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 44px
}

.alw-banner-eye {
    display: block;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 11px
}

.alw-banner-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    font-weight: 700;
    line-height: 1.08;
    color: #f5f3ee !important;
    margin: 0 0 10px;
    letter-spacing: -.02em
}

.alw-banner-h2 em {
    font-style: normal;
    color: #abce3b
}

.alw-banner-p {
    font-size: .88rem;
    color: rgba(245, 243, 238, .45);
    line-height: 1.7;
    margin: 0;
    max-width: 440px
}

.alw-banner-r {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    min-width: 200px
}

/* QC Body Scanner css */

/* ── HERO ── */
.qc-hero {
    background: #020810;
    margin-top: var(--nh, 70px);
    padding: 0;
    position: relative;
    overflow: hidden;
    min-height: 520px;
    display: flex;
    align-items: stretch
}

.qc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 90% at 85% 50%, rgba(171, 206, 59, .07) 0%, transparent 60%), radial-gradient(ellipse 40% 60% at 5% 80%, rgba(0, 120, 220, .06) 0%, transparent 55%);
    pointer-events: none
}

.qc-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(171, 206, 59, .02) 1px, transparent 1px), linear-gradient(90deg, rgba(171, 206, 59, .02) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 60% 70% at 80% 50%, black 0%, transparent 65%);
    pointer-events: none
}

.qc-hero-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 70px;
    display: grid;
    grid-template-columns: 55% 45%;
    align-items: center;
    gap: 48px;
    position: relative;
    z-index: 1;
    width: 100%
}

.qc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 16px
}

.qc-eyebrow-line {
    width: 28px;
    height: 1px;
    background: rgba(171, 206, 59, .5)
}

.qc-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2.1rem, 3.8vw, 3.1rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.028em;
    color: #f5f3ee !important;
    margin: 0 0 18px
}

.qc-h1 em {
    font-style: normal;
    color: #abce3b
}

.qc-lead {
    font-size: .92rem;
    color: rgba(245, 243, 238, .52);
    line-height: 1.74;
    margin: 0 0 28px;
    max-width: 520px
}

.qc-hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 36px
}

/* Stats strip */
.qc-stats {
    display: flex;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 22px
}

.qc-stat {
    flex: 1;
    padding: 0 20px 0 0;
    border-right: 1px solid rgba(255, 255, 255, .08)
}

.qc-stat:last-child {
    border-right: none;
    padding-left: 20px
}

.qc-stat:first-child {
    padding-left: 0
}

.qc-stat-n {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: #abce3b;
    display: block;
    line-height: 1;
    margin-bottom: 3px
}

.qc-stat-l {
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .3)
}

/* Hero image */
.qc-hero-img {
    position: relative
}

.qc-hero-img img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    display: block
}

.qc-hero-badge {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #abce3b;
    color: #0b1220;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 40px;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(11, 18, 32, .25)
}

/* SECTION BASE */
.ep-sec {
    padding: 72px 0
}

.ep-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px
}

.ep-light {
    background: #f5f9fc
}

.ep-dark {
    background: #0b1220
}

.ep-mid {
    background: #f0f4f8
}

.ep-eye {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 9px
}

.ep-light .ep-eye {
    color: #3a6a0a
}

.ep-dark .ep-eye {
    color: #abce3b
}

.ep-mid .ep-eye {
    color: #3a6a0a
}

.ep-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.02em;
    /* margin: 0 0 14px */
}

.ep-light .ep-title,
.ep-mid .ep-title {
    color: #0b1a2e !important
}

.ep-dark .ep-title {
    color: #f5f3ee !important
}

.ep-sub {
    font-size: .9rem;
    line-height: 1.74;
    margin: 0 0 40px;
    max-width: 680px
}

.ep-light .ep-sub,
.ep-mid .ep-sub {
    color: #4a6278
}

.ep-dark .ep-sub {
    color: rgba(245, 243, 238, .48)
}

/* ── HOW IT WORKS — 2-col with device image ── */
.qc-how {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center
}

.qc-how-img img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(11, 18, 32, .1);
    display: block
}

.qc-how-txt {}

.qc-how-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.6rem, 2.8vw, 2.3rem);
    font-weight: 700;
    color: #0b1a2e !important;
    margin: 0 0 16px;
    line-height: 1.1
}

.qc-how-title em {
    font-style: normal;
    color: #3a6a0a
}

.qc-how-p {
    font-size: .88rem;
    color: #4a6278;
    line-height: 1.76;
    margin: 0 0 16px
}

.qc-how-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px
}

.qc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .68rem;
    font-weight: 700;
    color: #3a6a0a;
    background: rgba(58, 106, 10, .09);
    border: 1px solid rgba(58, 106, 10, .2);
    padding: 6px 13px;
    border-radius: 40px
}

.qc-badge svg {
    width: 13px;
    height: 13px;
    stroke: #3a6a0a;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0
}

/* ── FEATURES GRID ── */
.qc-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 40px
}

.qc-feat {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    padding: 24px 22px;
    transition: border-color .2s, background .2s
}

.qc-feat:hover {
    border-color: rgba(171, 206, 59, .22);
    background: rgba(255, 255, 255, .07)
}

.qc-feat-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: rgba(171, 206, 59, .12);
    border: 1px solid rgba(171, 206, 59, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px
}

.qc-feat-icon svg {
    width: 22px;
    height: 22px;
    stroke: #abce3b;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

.qc-feat-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: .96rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 7px
}

.qc-feat-desc {
    font-size: .8rem;
    color: rgba(245, 243, 238, .48);
    line-height: 1.6;
    margin: 0
}

/* ── 3 PRINCIPLES ── */
.qc-principles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 44px
}

.qc-principle {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(11, 18, 32, .07);
    transition: transform .22s, box-shadow .22s
}

.qc-principle:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(11, 18, 32, .12)
}

.qc-principle-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block
}

.qc-principle-body {
    padding: 20px 22px
}

.qc-principle-num {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #3a6a0a;
    display: block;
    margin-bottom: 6px
}

.qc-principle-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 8px;
    line-height: 1.25
}

.qc-principle-desc {
    font-size: .78rem;
    color: #4a6278;
    line-height: 1.6;
    margin: 0
}

/* ── HISTORY — scientists timeline ── */
.qc-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 44px
}

.qc-scientist {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .2s
}

.qc-scientist:hover {
    border-color: rgba(171, 206, 59, .25)
}

.qc-scientist-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    filter: brightness(.85) saturate(.9)
}

.qc-scientist-body {
    padding: 18px 20px
}

.qc-scientist-name {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 4px
}

.qc-scientist-role {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #abce3b;
    display: block;
    margin-bottom: 8px
}

.qc-scientist-desc {
    font-size: .78rem;
    color: rgba(245, 243, 238, .48);
    line-height: 1.6;
    margin: 0
}

/* ── FUNCTIONS LIST ── */
.qc-functions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
    margin-top: 8px
}

.qc-func-group {
    display: flex;
    flex-direction: column;
    gap: 0
}

.qc-func-label {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #3a6a0a;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid rgba(58, 106, 10, .18)
}

.qc-func-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(11, 18, 32, .06)
}

.qc-func-item:last-child {
    border-bottom: none
}

.qc-func-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #abce3b;
    flex-shrink: 0;
    margin-top: 5px
}

.qc-func-txt {
    display: flex;
    flex-direction: column;
    gap: 1px
}

.qc-func-name {
    font-size: .86rem;
    font-weight: 700;
    color: #0b1a2e
}

.qc-func-sub {
    font-size: .74rem;
    color: #4a6278;
    line-height: 1.5
}

.qc-func-badge {
    display: inline-block;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #f5f3ee;
    background: #888;
    border-radius: 4px;
    padding: 1px 7px;
    margin-left: 6px;
    vertical-align: middle
}

.qc-func-badge.dev {
    background: rgba(11, 18, 32, .3);
    color: rgba(245, 243, 238, .5)
}

/* ── SAMPLE REPORTS ── */
.qc-reports-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 28px
}

.qc-report-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid rgba(11, 18, 32, .08);
    background: #fff;
    box-shadow: 0 3px 12px rgba(11, 18, 32, .07);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    text-decoration: none;
    display: flex;
    flex-direction: column
}

.qc-report-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(11, 18, 32, .13)
}

.qc-report-card img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
    transition: transform .3s
}

.qc-report-card:hover img {
    transform: scale(1.04)
}

.qc-report-label {
    padding: 10px 13px;
    font-size: .72rem;
    font-weight: 700;
    color: #0b1a2e;
    border-top: 1px solid rgba(11, 18, 32, .07)
}

.qc-download-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap
}

/* ── LIGHTBOX ── */
.qc-lb {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(2, 8, 16, .95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s
}

.qc-lb.on {
    opacity: 1;
    pointer-events: auto
}

.qc-lb-img {
    max-width: 88vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .7);
    transform: scale(.95);
    transition: transform .28s cubic-bezier(.22, .68, 0, 1.1)
}

.qc-lb.on .qc-lb-img {
    transform: scale(1)
}

.qc-lb-close {
    position: absolute;
    top: 18px;
    right: 22px;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(245, 243, 238, .7);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border: none;
    transition: background .15s
}

.qc-lb-close:hover {
    background: rgba(255, 255, 255, .2)
}

.qc-lb-hint {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .3);
    pointer-events: none
}

/* ── VIDEO SECTION ── */
.qc-videos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 40px
}

.qc-vid-card {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(11, 18, 32, .07);
    transition: transform .22s, box-shadow .22s
}

.qc-vid-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(11, 18, 32, .13)
}

.qc-vid-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #0b1220
}

.qc-vid-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block
}

.qc-vid-body {
    padding: 16px 18px
}

.qc-vid-label {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #3a6a0a;
    display: block;
    margin-bottom: 5px
}

.qc-vid-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: .96rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0;
    line-height: 1.3
}

/* Privacy Policy css */
/* TOP HERO */
.legal-hero {
    background: #020810;
    margin-top: var(--nh, 70px);
    padding: 44px 70px 40px;
    position: relative;
    overflow: hidden
}

.legal-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 70% at 85% 50%, rgba(171, 206, 59, .07) 0%, transparent 55%);
    pointer-events: none
}

.legal-hero-in {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.legal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 13px
}

.legal-eyebrow-line {
    width: 24px;
    height: 1px;
    background: rgba(171, 206, 59, .5)
}

.legal-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.025em;
    color: #f5f3ee !important;
    margin: 0 0 14px
}

.legal-h1 em {
    font-style: normal;
    color: #abce3b
}

.legal-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap
}

.legal-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    color: rgba(245, 243, 238, .38);
    font-weight: 600
}

.legal-meta-item svg {
    width: 13px;
    height: 13px;
    stroke: rgba(245, 243, 238, .35);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0
}

/* BREADCRUMB */

.pp-bc .ai-bc-in {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 70px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.pp-bc .ai-bc-trail {
    display: flex;
    align-items: center;
    gap: 5px
}

.pp-bc .ai-bc-link {
    font-size: .65rem;
    font-weight: 700;
    color: rgba(11, 18, 32, .55);
    text-decoration: none
}

.pp-bc .ai-bc-link:hover {
    color: #0b1220
}

.pp-bc .ai-bc-sep {
    color: rgba(11, 18, 32, .3);
    font-size: .9rem
}

.pp-bc .ai-bc-cur {
    font-size: .65rem;
    font-weight: 800;
    color: #0b1220
}

.pp-bc .ai-bc-other {
    font-size: .65rem;
    font-weight: 700;
    color: #0b1220;
    background: rgba(11, 18, 32, .1);
    border-radius: 40px;
    padding: 5px 15px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px
}

.pp-bc .ai-bc-other:hover {
    background: rgba(11, 18, 32, .18)
}

/* LAYOUT */
.legal-main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 52px 70px 80px;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 52px;
    align-items: start
}

/* TABLE OF CONTENTS — sticky sidebar */
.legal-toc {
    position: sticky;
    top: calc(var(--nh, 70px) + 44px + 24px)
}

.legal-toc-title {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(11, 18, 32, .4);
    display: block;
    margin-bottom: 14px
}

.legal-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px
}

.legal-toc-item a {
    display: block;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: .76rem;
    font-weight: 600;
    color: rgba(11, 18, 32, .5);
    text-decoration: none;
    transition: background .14s, color .14s;
    border-left: 2px solid transparent
}

.legal-toc-item a:hover {
    background: #f0f4f8;
    color: #0b1a2e;
    border-left-color: #abce3b
}

.legal-toc-item a.active {
    background: #f0f4f8;
    color: #0b1a2e;
    border-left-color: #3a6a0a;
    font-weight: 700
}

.legal-toc-contact {
    margin-top: 20px;
    padding: 14px 14px;
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(11, 18, 32, .06)
}

.legal-toc-contact-lbl {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(11, 18, 32, .38);
    display: block;
    margin-bottom: 10px
}

.legal-toc-contact a {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: #3a6a0a;
    text-decoration: none;
    margin-bottom: 4px
}

.legal-toc-contact a:hover {
    text-decoration: underline
}

/* CONTENT */
.legal-content {
    min-width: 0
}

.legal-section {
    margin-bottom: 48px;
    scroll-margin-top: calc(var(--nh, 70px) + 44px + 32px)
}

.legal-section-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #abce3b;
    display: inline-block
}

.legal-section-body {
    font-size: .87rem;
    color: #4a6278;
    line-height: 1.8
}

.legal-section-body p {
    margin: 0 0 14px
}

.legal-section-body p:last-child {
    margin-bottom: 0
}

.legal-section-body strong {
    color: #0b1a2e;
    font-weight: 700
}

.legal-section-body ul,
.legal-section-body ol {
    margin: 10px 0 14px 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.legal-section-body li {
    line-height: 1.7
}

.legal-section-body a {
    color: #3a6a0a;
    font-weight: 600;
    text-decoration: none
}

.legal-section-body a:hover {
    text-decoration: underline
}

.legal-highlight {
    background: rgba(171, 206, 59, .1);
    border: 1px solid rgba(171, 206, 59, .25);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 16px 0;
    font-size: .84rem;
    color: #2a5000;
    line-height: 1.7
}

.legal-highlight strong {
    color: #1a3a00
}

.legal-subsection {
    margin: 20px 0 14px;
    font-family: var(--fd, 'Lora', serif);
    font-size: 1rem;
    font-weight: 700;
    color: #0b1a2e
}

/* CONTACT SECTION */
.legal-contact-box {
    background: #0b1220;
    border-radius: 14px;
    padding: 24px 26px;
    margin-top: 16px
}

.legal-contact-box p {
    color: rgba(245, 243, 238, .55);
    font-size: .84rem;
    margin: 0 0 14px;
    line-height: 1.7
}

.legal-contact-box a {
    color: #abce3b;
    font-weight: 700;
    text-decoration: none
}

.legal-contact-box a:not([disabled]):hover {
    text-decoration: underline;
    color: #abce3b;
}

.legal-contact-box address {
    font-style: normal;
    font-size: .82rem;
    color: rgba(245, 243, 238, .4);
    line-height: 1.8
}

/* Alive LED Bed css */
.r-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .52s cubic-bezier(.22, .68, 0, 1.1), transform .52s cubic-bezier(.22, .68, 0, 1.1);
    transition-delay: var(--d, 0s)
}

.r-up.on {
    opacity: 1;
    transform: none
}

.ep-sec {
    padding: 72px 0
}

.ep-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px
}

.ep-light {
    background: #f5f9fc
}

.ep-dark {
    background: #0b1220
}

.ep-mid {
    background: #f0f4f8
}

.ep-eye {
    display: block;
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 9px
}

.ep-light .ep-eye,
.ep-mid .ep-eye {
    color: #3a6a0a
}

.ep-dark .ep-eye {
    color: #abce3b
}

.ep-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.02em;
    /* margin: 0 0 14px */
}

.ep-light .ep-title,
.ep-mid .ep-title {
    color: #0b1a2e !important
}

.ep-dark .ep-title {
    color: #f5f3ee !important
}

.ep-sub {
    font-size: .9rem;
    line-height: 1.74;
    margin: 0 0 40px;
    max-width: 700px
}

.ep-light .ep-sub,
.ep-mid .ep-sub {
    color: #4a6278
}

.ep-dark .ep-sub {
    color: rgba(245, 243, 238, .48)
}

/* HERO */
.led-hero {
    background: #020810;
    margin-top: var(--nh, 70px);
    position: relative;
    overflow: hidden
}

.led-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 80% at 85% 40%, rgba(171, 206, 59, .09) 0%, transparent 58%), radial-gradient(ellipse 40% 60% at 5% 78%, rgba(200, 100, 0, .06) 0%, transparent 55%);
    pointer-events: none
}

.led-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(171, 206, 59, .02) 1px, transparent 1px), linear-gradient(90deg, rgba(171, 206, 59, .02) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 65% 70% at 82% 50%, black 0%, transparent 65%);
    pointer-events: none
}

.led-hero-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 44px 70px 0;
    display: grid;
    grid-template-columns: 58% 42%;
    align-items: flex-end;
    gap: 40px;
    position: relative;
    z-index: 1
}

.led-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 16px
}

.led-eyebrow-line {
    width: 28px;
    height: 1px;
    background: rgba(171, 206, 59, .5)
}

.led-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.028em;
    color: #f5f3ee !important;
    margin: 0 0 16px
}

.led-h1 em {
    font-style: normal;
    color: #abce3b
}

.led-lead {
    font-size: .92rem;
    color: rgba(245, 243, 238, .52);
    line-height: 1.74;
    margin: 0 0 26px;
    max-width: 520px
}

.led-hero-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 36px
}

.led-hero-img img {
    width: 100%;
    max-height: 310px;
    object-fit: cover;
    object-position: center top;
    display: block;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 30px rgba(171, 206, 59, .06)
}

.led-fin-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(171, 206, 59, .12);
    border: 1px solid rgba(171, 206, 59, .3);
    border-radius: 40px;
    padding: 5px 14px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 14px
}

/* STATS BAR */
.led-stats-bar {
    background: #0b1220;
    border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.led-stats-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px;
    display: flex;
    align-items: center
}

.led-stat {
    flex: 1;
    padding: 16px 20px;
    border-right: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    gap: 10px
}

.led-stat:last-child {
    border-right: none
}

.led-stat:first-child {
    padding-left: 0
}

.led-stat-n {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: #abce3b;
    white-space: nowrap
}

.led-stat-l {
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .32)
}

/* HOW IT WORKS — 2 col */
.led-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: center
}

.led-2col-img img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(11, 18, 32, .1);
    display: block
}

.led-2col-txt h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.6rem, 2.8vw, 2.3rem);
    font-weight: 700;
    color: #0b1a2e !important;
    margin: 0 0 14px;
    line-height: 1.1
}

.led-2col-txt h2 em {
    font-style: normal;
    color: #3a6a0a
}

.led-txt-p {
    font-size: .88rem;
    color: #4a6278;
    line-height: 1.76;
    margin: 0 0 14px
}

/* BENEFITS grid */
.led-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 40px
}

.led-ben {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 14px;
    padding: 20px 18px;
    box-shadow: 0 3px 12px rgba(11, 18, 32, .06);
    transition: transform .2s, box-shadow .2s, border-color .2s
}

.led-ben:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(11, 18, 32, .11);
    border-color: rgba(58, 106, 10, .22)
}

.led-ben-icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: rgba(58, 106, 10, .09);
    border: 1px solid rgba(58, 106, 10, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 11px
}

.led-ben-icon svg {
    width: 19px;
    height: 19px;
    stroke: #3a6a0a;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.led-ben-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: .92rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 5px
}

.led-ben-desc {
    font-size: .77rem;
    color: #4a6278;
    line-height: 1.55;
    margin: 0
}

/* NOGIER frequencies */
.led-nogier {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(11, 18, 32, .08)
}

.led-freq {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 20px 0;
    border-bottom: 1px solid rgba(11, 18, 32, .07)
}

.led-freq:last-child {
    border-bottom: none
}

.led-freq-hz {
    flex-shrink: 0;
    width: 90px
}

.led-freq-n {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.1rem;
    font-weight: 700;
    display: block;
    line-height: 1.1
}

.led-freq-sub {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    display: block;
    margin-top: 3px
}

.led-freq-body {
    flex: 1
}

.led-freq-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: .92rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 5px
}

.led-freq-desc {
    font-size: .8rem;
    color: #4a6278;
    line-height: 1.6;
    margin: 0
}

/* GALLERY — masonry-ish */
.led-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 40px
}

.led-gal-img {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s
}

.led-gal-img:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(11, 18, 32, .15)
}

.led-gal-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s
}

.led-gal-img:hover img {
    transform: scale(1.05)
}

/* BEFORE/AFTER */
.led-ba {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 40px
}

.led-ba-card {
    border-radius: 14px;
    overflow: hidden;
    position: relative
}

.led-ba-card img {
    width: 100%;
    display: block;
    aspect-ratio: 4/3;
    object-fit: cover
}

.led-ba-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(11, 18, 32, .85), transparent);
    padding: 16px 16px 12px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #f5f3ee
}

/* SPECS TABLE */
.led-specs-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    margin-top: 0;
    font-size: .84rem
}

.led-specs-table th {
    text-align: left;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .4);
    padding: 10px 14px;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.led-specs-table td {
    padding: 11px 14px;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: rgba(245, 243, 238, .7)
}

.led-specs-table td:first-child {
    color: rgba(245, 243, 238, .42);
    font-weight: 600;
    border-left: none;
    border-right: none;
    width: 180px
}

.led-specs-table tr:last-child td {
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.led-specs-table tr:hover td {
    background: rgba(255, 255, 255, .03)
}

/* LIGHTBOX */
.led-lb {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(2, 8, 16, .95);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s
}

.led-lb.on {
    opacity: 1;
    display: flex;
    pointer-events: auto
}

.led-lb-img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .7);
    transform: scale(.95);
    transition: transform .28s cubic-bezier(.22, .68, 0, 1.1)
}

.led-lb.on .led-lb-img {
    transform: scale(1)
}

.led-lb-close {
    position: absolute;
    top: 18px;
    right: 22px;
    background: rgba(255, 255, 255, .09);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(245, 243, 238, .7);
    font-size: 1.5rem;
    cursor: pointer;
    transition: background .15s
}

.led-lb-close:hover {
    background: rgba(255, 255, 255, .2)
}

.led-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .09);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(245, 243, 238, .7);
    font-size: 1.4rem;
    cursor: pointer;
    transition: background .15s
}

.led-lb-nav:hover {
    background: rgba(255, 255, 255, .2)
}

.led-lb-prev {
    left: 18px
}

.led-lb-next {
    right: 18px
}

.led-lb-hint {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .64rem;
    color: rgba(245, 243, 238, .28);
    letter-spacing: .1em;
    text-transform: uppercase;
    pointer-events: none
}

/* FAQ */
.led-faq-wrap {
    max-width: 860px;
    margin: 0 auto
}

/* BANNER */
.led-banner {
    position: relative;
    overflow: hidden;
    min-height: 240px;
    display: flex;
    align-items: center
}

.led-banner-bg {
    position: absolute;
    inset: 0
}

.led-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.22) saturate(.4)
}

.led-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(11, 18, 32, .97) 0%, rgba(11, 18, 32, .7) 55%, rgba(11, 18, 32, .2) 100%)
}

.led-banner-in {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 52px 70px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 44px
}

.led-banner-eye {
    display: block;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 11px
}

.led-banner-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    font-weight: 700;
    line-height: 1.08;
    color: #f5f3ee !important;
    margin: 0 0 10px;
    letter-spacing: -.02em
}

.led-banner-h2 em {
    font-style: normal;
    color: #abce3b
}

.led-banner-p {
    font-size: .88rem;
    color: rgba(245, 243, 238, .45);
    line-height: 1.7;
    margin: 0;
    max-width: 440px
}

.led-banner-r {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    min-width: 200px
}

/* Search page css */
.srch-topbar {
    background: #0b1220;
    margin-top: var(--nh, 70px);
    border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.srch-topbar-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 5px
}

.srch-bc-link {
    font-size: .68rem;
    font-weight: 700;
    color: rgba(245, 243, 238, .4);
    text-decoration: none
}

.srch-bc-link:hover {
    color: #abce3b
}

.srch-bc-sep {
    color: rgba(245, 243, 238, .2);
    margin: 0 3px
}

.srch-bc-cur {
    font-size: .68rem;
    font-weight: 700;
    color: #abce3b
}

/* HERO */
.srch-hero {
    background: #020810;
    padding: 52px 70px 0;
    position: relative;
    overflow: hidden
}

.srch-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 70% at 50% 100%, rgba(171, 206, 59, .07) 0%, transparent 60%);
    pointer-events: none
}

.srch-hero-in {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.srch-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 14px
}

.srch-eyebrow-line {
    width: 26px;
    height: 1px;
    background: rgba(171, 206, 59, .5)
}

.srch-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: #f5f3ee !important;
    margin: 0 0 28px;
    line-height: 1.05;
    letter-spacing: -.02em
}

.srch-title em {
    font-style: normal;
    color: #abce3b
}

/* SEARCH BOX */
.srch-box-wrap {
    position: relative;
    margin-bottom: 24px
}

.srch-input {
    width: 100%;
    padding: 18px 96px 18px 22px;
    background: rgba(255, 255, 255, .07);
    border: 1.5px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    font-size: 1.05rem;
    color: #f5f3ee;
    font-family: var(--fd, 'Lora', serif);
    outline: none;
    transition: border-color .18s, background .18s, box-shadow .18s;
    box-sizing: border-box
}

.srch-input::placeholder {
    color: rgba(245, 243, 238, .3);
    font-family: inherit
}

.srch-input:focus {
    border-color: rgba(171, 206, 59, .55);
    background: rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 4px rgba(171, 206, 59, .08)
}

.srch-box-actions {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px
}

.srch-clear-btn {
    background: none;
    border: none;
    color: rgba(245, 243, 238, .45);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    padding: 2px 6px;
    display: none
}

.srch-clear-btn.on {
    display: block
}

.srch-clear-btn:hover {
    color: #fff
}

.srch-search-btn {
    background: rgba(171, 206, 59, .18);
    border: 1px solid rgba(171, 206, 59, .3);
    border-radius: 8px;
    padding: 7px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background .15s
}

.srch-search-btn:hover {
    background: rgba(171, 206, 59, .28)
}

.srch-search-btn svg {
    width: 18px;
    height: 18px;
    stroke: #abce3b;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round
}

/* SUGGESTIONS */
.srch-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .1);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(11, 18, 32, .14);
    z-index: 200;
    overflow: hidden;
    display: none
}

.srch-suggest.on {
    display: block
}

.srch-sug-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    cursor: pointer;
    transition: background .12s;
    text-decoration: none;
    border-bottom: 1px solid rgba(11, 18, 32, .05)
}

.srch-sug-item:last-child {
    border-bottom: none
}

.srch-sug-item:hover {
    background: #f5f9fc
}

.srch-sug-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0
}

.srch-sug-name {
    font-size: .86rem;
    font-weight: 700;
    color: #0b1a2e
}

.srch-sug-cat {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(11, 18, 32, .38);
    margin-left: auto;
    white-space: nowrap;
    padding-left: 10px
}

/* POPULAR PILLS */
.srch-popular {
    padding-bottom: 32px
}

.srch-popular-lbl {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(245, 243, 238, .3);
    display: block;
    margin-bottom: 12px
}

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

.srch-pill {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 40px;
    padding: 6px 14px;
    font-size: .72rem;
    font-weight: 700;
    color: rgba(245, 243, 238, .6);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    font-family: inherit
}

.srch-pill:not([disabled]):hover {
    border-color: rgba(171, 206, 59, .4);
    color: #abce3b;
    background: rgba(171, 206, 59, .06)
}

/* FILTERS */
.srch-filters {
    background: #fff;
    border-bottom: 1.5px solid rgba(11, 18, 32, .08);
    position: sticky;
    top: 58px;
    z-index: 600
}

.srch-filters-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 54px;
    overflow-x: auto;
    scrollbar-width: none
}

.srch-filters-in::-webkit-scrollbar {
    display: none
}

.srch-fbtn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 40px;
    border: 1.5px solid rgba(11, 18, 32, .12);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: rgba(11, 18, 32, .55);
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
    background: #fff;
    font-family: inherit;
    flex-shrink: 0
}

.srch-fbtn:hover {
    border-color: rgba(11, 18, 32, .28);
    color: #0b1a2e
}

.srch-fbtn.active {
    background: #0b1a2e;
    border-color: #0b1a2e;
    color: #fff
}

.srch-fbtn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background .15s
}

.srch-fbtn.active .srch-fbtn-dot {
    background: #abce3b
}

.srch-sort-wrap {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 600;
    color: rgba(11, 18, 32, .5);
    flex-shrink: 0
}

.srch-sort-wrap select {
    border: none;
    background: none;
    font-size: .72rem;
    font-weight: 700;
    color: #0b1a2e;
    cursor: pointer;
    outline: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='none' stroke='black' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><polyline points='6 9 12 15 18 9'/></svg>");
    font-family: inherit;
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: center right 14px;
}

/* BODY */
.srch-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 70px 80px
}

.srch-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 8px
}

.srch-meta-txt {
    font-size: .84rem;
    color: #4a6278
}

.srch-meta-txt strong {
    color: #0b1a2e;
    font-weight: 700
}

.srch-meta-txt em {
    color: #3a6a0a;
    font-style: normal;
    font-weight: 700
}

mark {
    background: rgba(171, 206, 59, .28);
    color: #1e4000;
    border-radius: 3px;
    padding: 0 2px
}

/* GRID — mixed card/row layout */
.srch-grid {
    display: flex;
    flex-direction: column;
    gap: 12px
}

/* ── CARD: items WITH image — horizontal layout ── */
.srch-card {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(11, 18, 32, .06);
    transition: transform .2s, box-shadow .2s, border-color .2s;
    display: flex;
    flex-direction: row;
    text-decoration: none;
    color: inherit;
    align-items: stretch;
    min-height: 130px
}

.srch-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(11, 18, 32, .11);
    border-color: rgba(11, 18, 32, .14)
}

.srch-card-img-wrap {
    flex-shrink: 0;
    width: 180px;
    overflow: hidden;
    position: relative
}

.srch-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .28s
}

.srch-card:hover .srch-card-img {
    transform: scale(1.04)
}

/* ── NO-IMAGE card: compact row with coloured left bar ── */
.srch-card-noimg .srch-card-img-wrap {
    width: 6px;
    background: var(--tc, #3a6a0a)
}

.srch-card-noimg {
    min-height: unset
}

/* Card body — shared */
.srch-card-body {
    padding: 16px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0
}

.srch-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px
}

.srch-card-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 40px
}

.srch-card-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: .96rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 5px;
    line-height: 1.3
}

.srch-card-noimg .srch-card-title {
    font-size: .9rem
}

.srch-card-desc {
    font-size: .8rem;
    color: #4a6278;
    line-height: 1.6;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.srch-card-noimg .srch-card-desc {
    -webkit-line-clamp: 2;
    margin-bottom: 7px
}

.srch-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: gap .15s;
    margin-top: auto
}

.srch-card:hover .srch-card-cta {
    gap: 9px
}

/* Right arrow indicator */
.srch-card-arrow {
    flex-shrink: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(11, 18, 32, .18);
    transition: color .2s, transform .2s
}

.srch-card:hover .srch-card-arrow {
    color: rgba(11, 18, 32, .4);
    transform: translateX(3px)
}

.srch-card-noimg .srch-card-arrow {
    display: none
}

/* NO RESULTS */
.srch-noresult {
    text-align: center;
    padding: 60px 20px
}

.srch-noresult-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(11, 18, 32, .06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px
}

.srch-noresult-icon svg {
    width: 28px;
    height: 28px;
    stroke: rgba(11, 18, 32, .3);
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round
}

.srch-noresult h3 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 8px
}

.srch-noresult p {
    font-size: .86rem;
    color: #4a6278;
    margin: 0 0 24px
}

.srch-noresult-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center
}

.srch-noresult-pill {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .1);
    border-radius: 40px;
    padding: 7px 16px;
    font-size: .74rem;
    font-weight: 700;
    color: #0b1a2e;
    cursor: pointer;
    transition: border-color .15s;
    font-family: inherit
}

.srch-noresult-pill:hover {
    border-color: rgba(58, 106, 10, .4);
    color: #3a6a0a
}

/* PAGINATION */
.srch-page {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1.5px solid rgba(11, 18, 32, .08);
    flex-wrap: wrap
}

.srch-page-btn {
    min-width: 38px;
    height: 38px;
    border-radius: 9px;
    border: 1.5px solid rgba(11, 18, 32, .12);
    background: #fff;
    font-size: .8rem;
    font-weight: 700;
    color: rgba(11, 18, 32, .55);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    font-family: inherit;
    padding: 0 10px
}

.srch-page-btn:hover {
    border-color: rgba(11, 18, 32, .3);
    color: #0b1a2e;
    background: #f5f9fc
}

.srch-page-btn.active {
    background: #0b1a2e;
    border-color: #0b1a2e;
    color: #fff
}

.srch-page-btn.disabled {
    opacity: .3;
    cursor: not-allowed;
    pointer-events: none
}

.srch-page-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round
}

.srch-page-ellipsis {
    font-size: .8rem;
    color: rgba(11, 18, 32, .3);
    padding: 0 4px
}

.srch-page-info {
    font-size: .74rem;
    color: rgba(11, 18, 32, .4);
    font-weight: 600;
    margin-left: 8px
}

/* Blog artical css */
.bp-hero {
    background: #0b1220;
    margin-top: var(--nh, 70px);
    padding: 52px 70px 48px;
    position: relative;
    overflow: hidden
}

.bp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 80% at 85% 50%, rgba(171, 206, 59, .07) 0%, transparent 55%);
    pointer-events: none
}

.bp-hero-in {
    max-width: 860px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.bp-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 18px
}

.bp-cat {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #abce3b;
    background: rgba(171, 206, 59, .1);
    border: 1px solid rgba(171, 206, 59, .22);
    padding: 3px 10px;
    border-radius: 40px;
    text-decoration: none
}

.bp-cat:not([disabled]):hover {
    color: #abce3b;
    background: rgba(171, 206, 59, .18)
}

.bp-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.022em;
    color: #f5f3ee !important;
    margin: 0 0 18px
}

.bp-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap
}

.bp-author {
    display: flex;
    align-items: center;
    gap: 10px
}

.bp-author-av {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(171, 206, 59, .15);
    border: 1.5px solid rgba(171, 206, 59, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    color: #abce3b;
    flex-shrink: 0
}

.bp-author-name {
    font-size: .8rem;
    font-weight: 700;
    color: #f5f3ee
}

.bp-author-title {
    font-size: .68rem;
    color: rgba(245, 243, 238, .35);
    display: block;
    margin-top: 1px
}

.bp-meta-sep {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, .12)
}

.bp-meta-item {
    font-size: .74rem;
    color: rgba(245, 243, 238, .38);
    display: flex;
    align-items: center;
    gap: 5px
}

.bp-meta-item svg {
    width: 13px;
    height: 13px;
    stroke: rgba(245, 243, 238, .35);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    flex-shrink: 0
}

.bp-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 52px 70px 80px;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 60px;
    align-items: start
}

.bp-body {
    font-size: .93rem;
    color: #2e4055;
    line-height: 1.85;
    max-width: 720px
}

.bp-body p {
    color: #2e4055;
    margin: 0 0 20px
}

.bp-body p:last-child {
    margin-bottom: 0
}

.bp-body strong {
    color: #0b1a2e;
    font-weight: 700
}

.bp-body em {
    font-style: italic
}

.bp-body a {
    color: #3a6a0a;
    font-weight: 600;
    text-decoration: none
}

.bp-body a:hover {
    text-decoration: underline
}

.bp-body h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.28rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 36px 0 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid #abce3b;
    display: inline-block
}

.bp-body h3 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.02rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 28px 0 10px
}

.bp-body ol {
    margin: 10px 0 20px;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.bp-body ol li {
    font-size: .9rem;
    color: #2e4055;
    line-height: 1.7;
    padding-left: 4px
}

.bp-body ol li strong {
    color: #0b1a2e
}

.bp-body ul {
    margin: 10px 0 20px;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.bp-body ul li {
    font-size: .9rem;
    color: #2e4055;
    line-height: 1.7;
    padding-left: 20px;
    position: relative
}

.bp-body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #abce3b
}

.bp-body ul li strong {
    color: #0b1a2e
}

.bp-img {
    width: 100%;
    border-radius: 12px;
    margin: 28px 0;
    display: block;
    box-shadow: 0 4px 24px rgba(11, 18, 32, .1)
}

.bp-img-caption {
    font-size: .74rem;
    color: rgba(11, 18, 32, .38);
    text-align: center;
    margin: -18px 0 28px;
    font-style: italic
}

.bp-highlight {
    background: #f0f8e8;
    border-left: 3px solid #3a6a0a;
    border-radius: 0 10px 10px 0;
    padding: 16px 20px;
    margin: 24px 0;
    font-size: .88rem;
    color: #2a5000;
    line-height: 1.72
}

.bp-highlight strong {
    color: #1a3a00
}

.bp-ref-box {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 28px 0
}

.bp-ref-box-lbl {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(11, 18, 32, .38);
    display: block;
    margin-bottom: 12px
}

.bp-ref-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none
}

.bp-ref-list li {
    font-size: .8rem;
    color: #4a6278;
    line-height: 1.6;
    padding-left: 20px;
    position: relative
}

.bp-ref-list li::before {
    content: counter(ref);
    counter-increment: ref;
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: #3a6a0a;
    font-size: .78rem
}

.bp-ref-box ol {
    counter-reset: ref
}

.bp-disclaimer {
    background: #f5f9fc;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 10px;
    padding: 16px 18px;
    margin-top: 32px;
    font-size: .78rem;
    color: #4a6278;
    line-height: 1.65
}

.bp-disclaimer strong {
    color: #0b1a2e
}

.bp-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1.5px solid rgba(11, 18, 32, .08);
    flex-wrap: wrap
}

.bp-share-lbl {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(11, 18, 32, .38)
}

.bp-share-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .15s
}

.bp-share-btn:hover {
    opacity: .85
}

.bp-toc {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 28px
}

.bp-toc-lbl {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(11, 18, 32, .38);
    display: block;
    margin-bottom: 12px
}

.bp-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.bp-toc-list li a {
    font-size: .8rem;
    font-weight: 600;
    color: #3a6a0a;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px
}

.bp-toc-list li a::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #abce3b;
    flex-shrink: 0
}

.bp-toc-list li a:hover {
    color: #2a5000
}

.bp-sidebar {
    position: sticky;
    top: calc(var(--nh, 70px) + 44px + 24px);
    display: flex;
    flex-direction: column;
    gap: 24px
}

.bp-sidebar-card {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 14px;
    padding: 18px 18px 20px;
    box-shadow: 0 2px 10px rgba(11, 18, 32, .05)
}

.bp-sidebar-title {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(11, 18, 32, .4);
    display: block;
    margin-bottom: 14px
}

.bp-related-item {
    display: flex;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(11, 18, 32, .06);
    align-items: flex-start
}

.bp-related-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none
}

.bp-related-img {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f5f9fc
}

.bp-related-name {
    font-size: .78rem;
    font-weight: 700;
    color: #0b1a2e;
    line-height: 1.3;
    display: block
}

.bp-related-name:hover {
    color: #3a6a0a
}

.bp-cat-list {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.bp-cat-item {
    font-size: .78rem;
    font-weight: 600;
    color: #0b1a2e;
    text-decoration: none;
    padding: 7px 10px;
    border-radius: 7px;
    background: #f5f9fc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: capitalize;
    transition: background .14s
}

.bp-cat-item:hover {
    background: #e8f5d0;
    color: #3a6a0a
}

.bp-cta-card {
    background: #0b1220;
    border-radius: 14px;
    padding: 20px;
    text-align: center
}

.bp-cta-card h4 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 8px
}

.bp-cta-card p {
    font-size: .76rem;
    color: rgba(245, 243, 238, .45);
    line-height: 1.6;
    margin: 0 0 14px
}

.b-card {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 16px;
}

.b-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem
}

/* Hydro-sh page css */

.sh-hero {
    background: #0b1220;
    margin-top: var(--nh, 70px);
    padding: 52px 70px 0;
    position: relative;
    overflow: hidden
}

.sh-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 80% at 75% 50%, rgba(0, 150, 200, .08) 0%, transparent 55%);
    pointer-events: none
}

.sh-hero-in {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 58% 42%;
    gap: 40px;
    align-items: flex-end;
    position: relative;
    z-index: 1
}

.sh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 14px
}

.sh-eyebrow-line {
    width: 26px;
    height: 1px;
    background: rgba(171, 206, 59, .5)
}

.sh-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.022em;
    color: #f5f3ee !important;
    margin: 0 0 10px
}

.sh-h1 em {
    font-style: normal;
    color: #abce3b
}

.sh-sub {
    font-size: .93rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.68;
    margin: 0 0 22px;
    max-width: 520px
}

.sh-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 24px
}

.sh-tag {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #abce3b;
    background: rgba(171, 206, 59, .1);
    border: 1px solid rgba(171, 206, 59, .25);
    padding: 4px 12px;
    border-radius: 40px
}

.sh-hero-img {
    max-height: 340px;
    object-fit: contain;
    object-position: bottom;
    width: 100%;
    display: block
}

.sh-sec {
    padding: 60px 70px
}

.sh-sec-in {
    max-width: 1200px;
    margin: 0 auto
}

.sh-sec.dark {
    background: #060d18
}

.sh-sec.light {
    background: #f5f9fc
}

.sh-sec.white {
    background: #fff
}

.sh-eye {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #abce3b;
    display: block;
    margin-bottom: 10px
}

.sh-eye.dk {
    color: rgba(11, 18, 32, .4)
}

.sh-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.5rem, 2.3vw, 2rem);
    font-weight: 700;
    color: #f5f3ee !important;
    margin: 0 0 18px;
    line-height: 1.12
}

.sh-h2 em {
    font-style: normal;
    color: #abce3b
}

.sh-h2.dk {
    color: #0b1a2e !important
}

.sh-h2.dk em {
    color: #0077aa
}

.sh-body {
    font-size: .9rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.78;
    margin: 0 0 16px
}

.sh-body.dk {
    color: #4a6278
}

/* Gallery */
.sh-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 28px
}

.sh-gal-item {
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1/1;
    background: #fff;
    cursor: pointer;
    transition: transform .2s;
    border: 1.5px solid rgba(11, 18, 32, .08)
}

.sh-gal-item:hover {
    transform: translateY(-3px)
}

.sh-gal-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 8px
}

/* Lightbox */
.sh-lb {
    position: fixed;
    inset: 0;
    background: rgba(2, 8, 16, .95);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center
}

.sh-lb.on {
    display: flex
}

.sh-lb-img {
    max-width: 88vw;
    max-height: 86vh;
    object-fit: contain;
    border-radius: 10px
}

.sh-lb-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: rgba(255, 255, 255, .1);
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

.sh-lb-prev,
.sh-lb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .1);
    border: none;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s
}

.sh-lb-prev:hover,
.sh-lb-next:hover {
    background: rgba(255, 255, 255, .2)
}

.sh-lb-prev {
    left: 20px
}

.sh-lb-next {
    right: 20px
}

/* Features */
.sh-feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px
}

.sh-feat {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 12px;
    padding: 20px;
    border-top: 3px solid #0077aa
}

.sh-feat-title {
    font-size: .88rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 7px
}

.sh-feat-body {
    font-size: .8rem;
    color: #4a6278;
    line-height: 1.65;
    margin: 0
}

/* Stats */
.sh-stats {
    background: #060d18;
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.sh-stats-in {
    max-width: 1200px;
    margin: 0 auto;
    display: flex
}

.sh-stat {
    flex: 1;
    padding: 18px 20px;
    border-right: 1px solid rgba(255, 255, 255, .07);
    display: flex;
    align-items: center;
    gap: 12px
}

.sh-stat:last-child {
    border-right: none
}

.sh-stat-ico {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(0, 119, 170, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.sh-stat-ico svg {
    width: 18px;
    height: 18px;
    stroke: #44aadd;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round
}

.sh-stat-val {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: #f5f3ee;
    display: block;
    line-height: 1.1
}

.sh-stat-lbl {
    font-size: .64rem;
    color: rgba(245, 243, 238, .38);
    display: block;
    margin-top: 2px
}

.sh-cta {
    background: #0b1220;
    border-top: 1px solid rgba(171, 206, 59, .12);
    padding: 60px 70px;
    text-align: center
}

.sh-cta-in {
    max-width: 560px;
    margin: 0 auto
}

.sh-cta h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.7rem;
    font-weight: 700;
    color: #f5f3ee !important;
    margin: 0 0 12px
}

.sh-cta h2 em {
    font-style: normal;
    color: #abce3b
}

.sh-cta p {
    font-size: .88rem;
    color: rgba(245, 243, 238, .4);
    line-height: 1.72;
    margin: 0 0 26px
}

/* Team page css */
.team-hero {
    background: #0b1220;
    margin-top: var(--nh, 70px);
    padding: 60px 70px 56px;
    position: relative;
    overflow: hidden;
    text-align: center
}

.team-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(171, 206, 59, .08) 0%, transparent 55%);
    pointer-events: none
}

.team-hero-in {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

.team-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 16px
}

.team-eyebrow-line {
    width: 24px;
    height: 1px;
    background: rgba(171, 206, 59, .5)
}

.team-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.025em;
    color: #f5f3ee !important;
    margin: 0 0 14px
}

.team-h1 em {
    font-style: normal;
    color: #abce3b
}

.team-sub {
    font-size: .95rem;
    color: rgba(245, 243, 238, .45);
    line-height: 1.72;
    margin: 0
}

/* TEAM GRID — 3 col, 5 members: top row 3, bottom row 2 centred */
.team-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 70px 80px
}

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

/* CARD */
.tm-card {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(11, 18, 32, .07);
    transition: transform .22s, box-shadow .22s;
    display: flex;
    flex-direction: column
}

.tm-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(11, 18, 32, .13)
}

/* Photo area */
.tm-card-top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 22px 18px
}

.tm-photo-wrap {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative
}

.tm-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block
}

.tm-avatar-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .04em;
    opacity: 0
}

.tm-card-info {
    min-width: 0;
    flex: 1
}

.tm-name {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.02rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 3px;
    line-height: 1.2
}

.tm-role {
    font-size: .72rem;
    font-weight: 700;
    display: block;
    line-height: 1.3;
    margin-bottom: 2px
}

.tm-company {
    font-size: .67rem;
    color: rgba(11, 18, 32, .38);
    display: block;
    line-height: 1.3
}

/* Card body */
.tm-card-body {
    padding: 0 22px 22px;
    flex: 1;
    display: flex;
    flex-direction: column
}

.tm-divider {
    height: 1px;
    background: rgba(11, 18, 32, .07);
    margin-bottom: 16px
}

.tm-bio {
    font-size: .8rem;
    color: #4a6278;
    line-height: 1.72;
    margin: 0 0 14px;
    flex: 1
}

.tm-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto
}

.tm-tag {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(11, 18, 32, .45);
    background: #f5f9fc;
    border: 1px solid rgba(11, 18, 32, .1);
    padding: 3px 9px;
    border-radius: 40px
}

/* 5-card layout: last 2 centred */
.tm-card:nth-child(4) {
    grid-column: 1/2
}

.tm-card:nth-child(5) {
    grid-column: 2/3
}

/* VALUES */
.team-values {
    background: #0b1220;
    padding: 60px 70px
}

.team-values-in {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center
}

.team-values-eye {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #abce3b;
    display: block;
    margin-bottom: 10px
}

.team-values-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.9rem;
    font-weight: 700;
    color: #f5f3ee !important;
    margin: 0 0 12px
}

.team-values-h2 em {
    font-style: normal;
    color: #abce3b
}

.team-values-sub {
    font-size: .9rem;
    color: rgba(245, 243, 238, .4);
    line-height: 1.72;
    max-width: 580px;
    margin: 0 auto 36px
}

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

.team-val {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    padding: 22px 18px;
    text-align: left;
    transition: border-color .2s
}

.team-val:hover {
    border-color: rgba(171, 206, 59, .25)
}

.team-val-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(171, 206, 59, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px
}

.team-val-icon svg {
    width: 18px;
    height: 18px;
    stroke: #abce3b;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round
}

.team-val-title {
    font-size: .86rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 6px
}

.team-val-body {
    font-size: .76rem;
    color: rgba(245, 243, 238, .4);
    line-height: 1.6;
    margin: 0
}

/* CTA — fix invisible buttons */
.team-cta {
    background: #fff;
    border-top: 2px solid rgba(11, 18, 32, .06);
    padding: 64px 70px;
    text-align: center
}

.team-cta-in {
    max-width: 580px;
    margin: 0 auto
}

.team-cta h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.7rem;
    font-weight: 700;
    color: #0b1a2e !important;
    margin: 0 0 12px
}

.team-cta h2 em {
    font-style: normal;
    color: #3a6a0a
}

.team-cta p {
    font-size: .9rem;
    color: #4a6278;
    line-height: 1.72;
    margin: 0 0 28px
}

.team-cta-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap
}

/* Override btn-g for white bg context */
.team-cta .btn-g {
    background: #f5f9fc;
    color: #0b1a2e;
    border: 1.5px solid rgba(11, 18, 32, .15);
    padding: 12px 22px;
    border-radius: 9px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .15s, border-color .15s
}

.team-cta .btn-g:hover {
    background: #e8f5d0;
    border-color: #3a6a0a;
    color: #3a6a0a
}

/* Tyro screen page css */
/* HERO */
.tk-hero {
    background: #0b1220;
    margin-top: var(--nh, 70px);
    padding: 52px 70px 0;
    position: relative;
    overflow: hidden
}

.tk-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 80% at 80% 50%, rgba(0, 85, 170, .1) 0%, transparent 55%);
    pointer-events: none
}

.tk-hero-in {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 58% 42%;
    gap: 40px;
    align-items: flex-end;
    position: relative;
    z-index: 1
}

.tk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 14px
}

.tk-eyebrow-line {
    width: 26px;
    height: 1px;
    background: rgba(171, 206, 59, .5)
}

.tk-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.022em;
    color: #f5f3ee !important;
    margin: 0 0 10px
}

.tk-h1 em {
    font-style: normal;
    color: #abce3b
}

.tk-sub {
    font-size: .93rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.68;
    margin: 0 0 24px;
    max-width: 520px
}

.tk-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 28px
}

.tk-tag {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #abce3b;
    background: rgba(171, 206, 59, .1);
    border: 1px solid rgba(171, 206, 59, .25);
    padding: 4px 12px;
    border-radius: 40px
}

.tk-hero-img {
    max-height: 340px;
    object-fit: contain;
    object-position: bottom;
    width: 100%;
    display: block
}

/* STATS BAR */
.tk-stats {
    background: #060d18;
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.tk-stats-in {
    max-width: 1200px;
    margin: 0 auto;
    display: flex
}

.tk-stat {
    flex: 1;
    padding: 18px 20px;
    border-right: 1px solid rgba(255, 255, 255, .07);
    display: flex;
    align-items: center;
    gap: 12px
}

.tk-stat:last-child {
    border-right: none
}

.tk-stat-ico {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(0, 85, 170, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.tk-stat-ico svg {
    width: 18px;
    height: 18px;
    stroke: #5599dd;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round
}

.tk-stat-val {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #f5f3ee;
    display: block;
    line-height: 1.1
}

.tk-stat-lbl {
    font-size: .66rem;
    color: rgba(245, 243, 238, .38);
    display: block;
    margin-top: 2px;
    font-weight: 600
}

/* SECTIONS */
.tk-sec {
    padding: 60px 70px
}

.tk-sec-in {
    max-width: 1200px;
    margin: 0 auto
}

.tk-sec.dark {
    background: #060d18
}

.tk-sec.mid {
    background: #0f1a2e
}

.tk-sec.light {
    background: #f5f9fc
}

.tk-sec.white {
    background: #fff
}

.tk-eye {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #5599dd;
    display: block;
    margin-bottom: 10px
}

.tk-eye.lgt {
    color: rgba(11, 18, 32, .4)
}

.tk-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.5rem, 2.3vw, 2rem);
    font-weight: 700;
    color: #f5f3ee !important;
    margin: 0 0 18px;
    line-height: 1.12
}

.tk-h2 em {
    font-style: normal;
    color: #abce3b
}

.tk-h2.dk {
    color: #0b1a2e !important
}

.tk-h2.dk em {
    color: #0055aa
}

.tk-body {
    font-size: .9rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.78;
    margin: 0 0 16px
}

.tk-body.dk {
    color: #4a6278
}

/* WHY USE — 3 col cards */
.tk-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 28px
}

.tk-why {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .07);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 3px 12px rgba(11, 18, 32, .06);
    border-top: 3px solid #0055aa
}

.tk-why-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(0, 85, 170, .08);
    border: 1px solid rgba(0, 85, 170, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px
}

.tk-why-icon svg {
    width: 19px;
    height: 19px;
    stroke: #0055aa;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round
}

.tk-why-title {
    font-size: .9rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 7px
}

.tk-why-body {
    font-size: .8rem;
    color: #4a6278;
    line-height: 1.65;
    margin: 0
}

/* KIT IMAGES */
.tk-kit-imgs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 24px
}

.tk-kit-img {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3
}

.tk-kit-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

/* HOW TO USE — steps */
.tk-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 24px;
    max-width: 720px
}

.tk-step {
    display: flex;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.tk-step:last-child {
    border-bottom: none
}

.tk-step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 85, 170, .2);
    border: 1.5px solid rgba(0, 85, 170, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 800;
    color: #5599dd;
    flex-shrink: 0;
    margin-top: 2px
}

.tk-step-title {
    font-size: .88rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 4px
}

.tk-step-body {
    font-size: .8rem;
    color: rgba(245, 243, 238, .45);
    line-height: 1.65;
    margin: 0
}

/* RESULTS — colour guide */
.tk-results-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 24px
}

.tk-result {
    border-radius: 12px;
    padding: 18px 16px;
    border: 1.5px solid rgba(11, 18, 32, .08)
}

.tk-result-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-bottom: 10px;
    border: 2px solid rgba(0, 0, 0, .15)
}

.tk-result-label {
    font-size: .8rem;
    font-weight: 800;
    color: #0b1a2e;
    margin: 0 0 6px
}

.tk-result-meaning {
    font-size: .78rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 6px
}

.tk-result-action {
    font-size: .75rem;
    color: #4a6278;
    line-height: 1.55;
    margin: 0
}

/* RESULT IMAGES */
.tk-res-imgs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 20px
}

.tk-res-img {
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1/1
}

.tk-res-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #fff;
    padding: 8px
}

/* IMPORTANCE */
.tk-stats-importance {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px
}

.tk-imp-stat {
    background: rgba(0, 85, 170, .08);
    border: 1px solid rgba(0, 85, 170, .18);
    border-radius: 12px;
    padding: 20px;
    text-align: center
}

.tk-imp-num {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.8rem;
    font-weight: 700;
    color: #5599dd;
    display: block
}

.tk-imp-lbl {
    font-size: .76rem;
    color: rgba(245, 243, 238, .45);
    line-height: 1.5;
    display: block;
    margin-top: 5px
}

/* DISCLAIMER */
.tk-disclaimer {
    background: #fff8f0;
    border: 1.5px solid rgba(200, 80, 0, .15);
    border-left: 3px solid #b85c00;
    border-radius: 0 10px 10px 0;
    padding: 16px 20px;
    margin-top: 24px;
    font-size: .8rem;
    color: #5a3000;
    line-height: 1.7
}

.tk-disclaimer strong {
    color: #3a1a00
}

/* CTA */
.tk-cta {
    background: #0b1220;
    border-top: 1px solid rgba(171, 206, 59, .12);
    padding: 64px 70px;
    text-align: center
}

.tk-cta-in {
    max-width: 600px;
    margin: 0 auto
}

.tk-cta h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.8rem;
    font-weight: 700;
    color: #f5f3ee !important;
    margin: 0 0 12px
}

.tk-cta h2 em {
    font-style: normal;
    color: #abce3b
}

.tk-cta p {
    font-size: .9rem;
    color: rgba(245, 243, 238, .4);
    line-height: 1.72;
    margin: 0 0 28px
}

.tk-cta-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap
}

/* VIBEx Platinum Healing Bed css */
/* HERO */
.vbx-hero {
    margin-top: var(--nh, 70px);
    background: #0b1220;
    padding: 52px 70px 0;
    position: relative;
    overflow: hidden
}

.vbx-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(171, 206, 59, .06) 0%, transparent 60%);
    pointer-events: none
}

.vbx-hero-in {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 58% 42%;
    gap: 40px;
    align-items: flex-end;
    position: relative;
    z-index: 1
}

.vbx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 14px
}

.vbx-eyebrow-line {
    width: 26px;
    height: 1px;
    background: rgba(171, 206, 59, .5)
}

.vbx-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.025em;
    color: #f5f3ee !important;
    margin: 0 0 8px
}

.vbx-h1 em {
    font-style: normal;
    color: #abce3b
}

.vbx-sub {
    font-size: 1rem;
    color: rgba(245, 243, 238, .55);
    line-height: 1.6;
    margin: 0 0 28px;
    max-width: 520px
}

.vbx-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 36px
}

.vbx-hero-img {
    max-height: 360px;
    object-fit: contain;
    object-position: bottom;
    width: 100%;
    display: block
}

.vbx-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 0
}

.vbx-tag {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #abce3b;
    background: rgba(171, 206, 59, .1);
    border: 1px solid rgba(171, 206, 59, .25);
    padding: 4px 12px;
    border-radius: 40px
}

/* STATS BAR */
.vbx-stats {
    background: #060d18;
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.vbx-stats-in {
    max-width: 1200px;
    margin: 0 auto;
    display: flex
}

.vbx-stat {
    flex: 1;
    padding: 18px 22px;
    border-right: 1px solid rgba(255, 255, 255, .07);
    display: flex;
    align-items: center;
    gap: 12px
}

.vbx-stat:last-child {
    border-right: none
}

.vbx-stat-ico {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(171, 206, 59, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.vbx-stat-ico svg {
    width: 18px;
    height: 18px;
    stroke: #abce3b;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round
}

.vbx-stat-val {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #f5f3ee;
    display: block;
    line-height: 1.1
}

.vbx-stat-lbl {
    font-size: .66rem;
    color: rgba(245, 243, 238, .38);
    display: block;
    margin-top: 2px;
    font-weight: 600
}

/* CONTENT SECTIONS */
.vbx-sec {
    padding: 60px 70px
}

.vbx-sec-in {
    max-width: 1200px;
    margin: 0 auto
}

.vbx-sec.dark {
    background: #060d18
}

.vbx-sec.mid {
    background: #0f1a2e
}

.vbx-sec.light {
    background: #f5f9fc
}

.vbx-sec.white {
    background: #fff
}

.vbx-sec-eyebrow {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #abce3b;
    display: block;
    margin-bottom: 10px
}

.vbx-sec-eyebrow.dark-lbl {
    color: rgba(11, 18, 32, .45)
}

.vbx-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    font-weight: 700;
    color: #f5f3ee !important;
    margin: 0 0 20px;
    line-height: 1.1;
    letter-spacing: -.02em
}

.vbx-h2 em {
    font-style: normal;
    color: #abce3b
}

.vbx-h2.dark-h2 {
    color: #0b1a2e !important
}

.vbx-h2.dark-h2 em {
    color: #3a6a0a
}

.vbx-body {
    font-size: .9rem;
    color: rgba(245, 243, 238, .55);
    line-height: 1.78;
    margin: 0 0 16px
}

.vbx-body.dark-body {
    color: #4a6278
}

/* HOW IT WORKS — 2 col */
.vbx-how-grid {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 44px;
    align-items: flex-start;
    margin-top: 32px
}

.vbx-how-img {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .4);
    position: sticky;
    top: calc(var(--nh, 70px) + 44px + 24px)
}

.vbx-how-img img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    object-position: center top;
    display: block
}

.vbx-mech-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px
}

.vbx-mech {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 14px 16px
}

.vbx-mech-title {
    font-size: .84rem;
    font-weight: 700;
    color: #abce3b;
    margin: 0 0 6px
}

.vbx-mech-body {
    font-size: .8rem;
    color: rgba(245, 243, 238, .48);
    line-height: 1.65;
    margin: 0
}

/* FEATURES — 3 col */
.vbx-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px
}

.vbx-feat {
    background: #f5f9fc;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 14px;
    padding: 24px;
    transition: border-color .2s, background .2s
}

.vbx-feat:hover {
    border-color: rgba(58, 106, 10, .25);
    background: rgba(171, 206, 59, .07)
}

.vbx-feat-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    margin-bottom: 14px;
    display: block
}

.vbx-feat-title {
    font-size: .88rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 8px
}

.vbx-feat-body {
    font-size: .78rem;
    color: #4a6278;
    line-height: 1.65;
    margin: 0
}

.vbx-feat-body ul {
    margin: 8px 0 0;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.vbx-feat-body ul li {
    font-size: .76rem;
    color: #4a6278
}

/* ENHANCED TECH — 3 col cards */
.vbx-tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px
}

.vbx-tech {
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08)
}

.vbx-tech-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block
}

.vbx-tech-body {
    padding: 18px 20px
}

.vbx-tech-label {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #abce3b;
    display: block;
    margin-bottom: 6px
}

.vbx-tech-title {
    font-size: .9rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 8px
}

.vbx-tech-desc {
    font-size: .78rem;
    color: rgba(245, 243, 238, .45);
    line-height: 1.62;
    margin: 0
}

/* BRAINWAVES */
.vbx-waves {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 28px
}

.vbx-wave {
    border-radius: 12px;
    padding: 18px 14px;
    text-align: center;
    border: 1.5px solid rgba(11, 18, 32, .1);
    background: #fff
}

.vbx-wave-name {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #3a6a0a;
    display: block;
    margin-bottom: 8px
}

.vbx-wave-greek {
    font-size: 1.6rem;
    color: rgba(58, 106, 10, .15);
    display: block;
    margin-bottom: 4px
}

.vbx-wave-hz {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: rgba(11, 18, 32, .35);
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase
}

.vbx-wave-desc {
    font-size: .72rem;
    color: #4a6278;
    line-height: 1.55
}

/* BENEFITS — light bg */
.vbx-ben-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 28px
}

.vbx-ben {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .07);
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 3px 10px rgba(11, 18, 32, .05)
}

.vbx-ben-title {
    font-size: .84rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 7px
}

.vbx-ben-title::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #abce3b;
    flex-shrink: 0
}

.vbx-ben-body {
    font-size: .77rem;
    color: #4a6278;
    line-height: 1.6;
    margin: 0
}

/* CTA SECTION */
.vbx-cta {
    background: linear-gradient(135deg, #0f1a2e 0%, #0b1220 100%);
    border-top: 1px solid rgba(171, 206, 59, .15);
    padding: 72px 70px;
    text-align: center
}

.vbx-cta-in {
    max-width: 660px;
    margin: 0 auto
}

.vbx-cta h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 2rem;
    font-weight: 700;
    color: #f5f3ee !important;
    margin: 0 0 14px
}

.vbx-cta h2 em {
    font-style: normal;
    color: #abce3b
}

.vbx-cta p {
    font-size: .9rem;
    color: rgba(245, 243, 238, .45);
    line-height: 1.7;
    margin: 0 0 32px
}

.vbx-cta-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap
}

.vbx-note {
    font-size: .7rem;
    color: rgba(245, 243, 238, .25);
    margin-top: 16px
}

/* GALLERY */
.vbx-gallery-section {
    background: #f5f9fc;
    padding: 60px 70px
}

.vbx-gallery-section .vbx-sec-in {
    max-width: 1200px;
    margin: 0 auto
}

.vbx-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 28px
}

.vbx-gallery-item {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    cursor: pointer;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s, box-shadow .2s
}

.vbx-gallery-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(11, 18, 32, .12)
}

.vbx-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s
}

.vbx-gallery-item:hover img {
    transform: scale(1.04)
}

/* Lightbox */
.vbx-lb {
    position: fixed;
    inset: 0;
    background: rgba(2, 8, 16, .95);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center
}

.vbx-lb.on {
    display: flex
}

.vbx-lb-img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 10px
}

.vbx-lb-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: rgba(255, 255, 255, .1);
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

.vbx-lb-close:hover {
    background: rgba(255, 255, 255, .2)
}

.vbx-lb-prev,
.vbx-lb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .1);
    border: none;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s
}

.vbx-lb-prev:hover,
.vbx-lb-next:hover {
    background: rgba(255, 255, 255, .2)
}

.vbx-lb-prev {
    left: 20px
}

.vbx-lb-next {
    right: 20px
}

/* DEMO VIDEO */
.vbx-demo-section {
    background: #fff;
    padding: 60px 70px
}

.vbx-demo-section .vbx-sec-in {
    max-width: 1200px;
    margin: 0 auto
}

.vbx-demo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
    margin-top: 28px
}

.vbx-demo-video {
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #0b1220;
    position: relative;
    box-shadow: 0 12px 40px rgba(11, 18, 32, .15)
}

.vbx-demo-video iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block
}

.vbx-demo-content h3 {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 12px
}

.vbx-demo-content p {
    font-size: .88rem;
    color: #4a6278;
    line-height: 1.76;
    margin: 0 0 14px
}

.vbx-demo-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.vbx-demo-content ul li {
    font-size: .84rem;
    color: #4a6278;
    padding-left: 18px;
    position: relative
}

.vbx-demo-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #abce3b
}

/* Refire Ozone Steam Sauna css */
.rf-hero {
    background: #0b1220;
    margin-top: var(--nh, 70px);
    padding: 52px 70px 0;
    position: relative;
    overflow: hidden
}

.rf-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 70% at 80% 50%, rgba(0, 180, 160, .07) 0%, transparent 55%);
    pointer-events: none
}

.rf-hero-in {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 58% 42%;
    gap: 40px;
    align-items: flex-end;
    position: relative;
    z-index: 1
}

.rf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 14px
}

.rf-eyebrow-line {
    width: 26px;
    height: 1px;
    background: rgba(171, 206, 59, .5)
}

.rf-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    font-weight: 700;
    line-height: 1.08;
    color: #f5f3ee !important;
    margin: 0 0 10px
}

.rf-h1 em {
    font-style: normal;
    color: #abce3b
}

.rf-sub {
    font-size: .93rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.68;
    margin: 0 0 22px;
    max-width: 520px
}

.rf-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 24px
}

.rf-tag {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #abce3b;
    background: rgba(171, 206, 59, .1);
    border: 1px solid rgba(171, 206, 59, .25);
    padding: 4px 12px;
    border-radius: 40px
}

.rf-hero-img {
    max-height: 340px;
    object-fit: contain;
    object-position: bottom;
    width: 100%;
    display: block
}

.ai-bc {
    background: #abce3b;
    position: sticky;
    /* top: var(--nh, 70px); */
    z-index: 700;
    box-shadow: 0 2px 8px rgba(11, 18, 32, .12)
}

.ai-bc-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 5px
}

.ai-bc-link {
    font-size: .65rem;
    font-weight: 700;
    color: rgba(11, 18, 32, .55);
    text-decoration: none
}

.ai-bc-link:hover {
    color: #0b1220
}

.ai-bc-sep {
    color: rgba(11, 18, 32, .3)
}

.ai-bc-cur {
    font-size: .65rem;
    font-weight: 800;
    color: #0b1220
}

/* Stats */
.rf-stats {
    background: #060d18;
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.rf-stats-in {
    max-width: 1200px;
    margin: 0 auto;
    display: flex
}

.rf-stat {
    flex: 1;
    padding: 18px 20px;
    border-right: 1px solid rgba(255, 255, 255, .07);
    display: flex;
    align-items: center;
    gap: 12px
}

.rf-stat:last-child {
    border-right: none
}

.rf-stat-ico {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(0, 180, 150, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.rf-stat-ico svg {
    width: 18px;
    height: 18px;
    stroke: #00c8aa;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round
}

.rf-stat-val {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1rem;
    font-weight: 700;
    color: #f5f3ee;
    display: block;
    line-height: 1.1
}

.rf-stat-lbl {
    font-size: .64rem;
    color: rgba(245, 243, 238, .38);
    display: block;
    margin-top: 2px
}

/* Sections */
.rf-sec {
    padding: 60px 70px
}

.rf-sec-in {
    max-width: 1200px;
    margin: 0 auto
}

.rf-sec.dark {
    background: #060d18
}

.rf-sec.mid {
    background: #0f1a2e
}

.rf-sec.light {
    background: #f5f9fc
}

.rf-sec.white {
    background: #fff
}

.rf-eye {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #00c8aa;
    display: block;
    margin-bottom: 10px
}

.rf-eye.dk {
    color: rgba(11, 18, 32, .4)
}

.rf-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.5rem, 2.3vw, 2rem);
    font-weight: 700;
    color: #f5f3ee !important;
    margin: 0 0 18px;
    line-height: 1.12
}

.rf-h2 em {
    font-style: normal;
    color: #abce3b
}

.rf-h2.dk {
    color: #0b1a2e !important
}

.rf-h2.dk em {
    color: #007a66
}

.rf-body {
    font-size: .9rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.78;
    margin: 0 0 16px
}

.rf-body.dk {
    color: #4a6278
}

/* Modalities grid */
.rf-mod-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 24px
}

.rf-mod {
    background: rgba(0, 180, 150, .06);
    border: 1px solid rgba(0, 180, 150, .18);
    border-radius: 12px;
    padding: 18px;
    border-top: 2px solid #00c8aa
}

.rf-mod-title {
    font-size: .86rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 6px
}

.rf-mod-body {
    font-size: .77rem;
    color: #4a6278;
    line-height: 1.6;
    margin: 0
}

/* 2-col how it works */
.rf-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
    margin-top: 24px
}

.rf-img {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .3)
}

.rf-img img {
    width: 100%;
    display: block
}

/* Benefits */
.rf-ben-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 24px
}

.rf-ben {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .07);
    border-radius: 12px;
    padding: 18px;
    border-top: 2px solid #00c8aa
}

.rf-ben-title {
    font-size: .84rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 6px
}

.rf-ben-body {
    font-size: .77rem;
    color: #4a6278;
    line-height: 1.6;
    margin: 0
}

/* Hyper cube css */
/* HERO */
.hc-hero {
    margin-top: var(--nh, 70px);
    background: #020810;
    padding: 52px 70px 0;
    position: relative;
    overflow: hidden
}

.hc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(171, 206, 59, .07) 0%, transparent 60%);
    pointer-events: none
}

.hc-hero-in {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 58% 42%;
    gap: 40px;
    align-items: flex-end;
    position: relative;
    z-index: 1
}

.hc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #abce3b;
    margin-bottom: 14px
}

.hc-eyebrow-line {
    width: 26px;
    height: 1px;
    background: rgba(171, 206, 59, .5)
}

.hc-h1 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.025em;
    color: #f5f3ee !important;
    margin: 0 0 10px
}

.hc-h1 em {
    font-style: normal;
    color: #abce3b
}

.hc-sub {
    font-size: .96rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.65;
    margin: 0 0 24px;
    max-width: 520px
}

.hc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 28px
}

.hc-tag {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #abce3b;
    background: rgba(171, 206, 59, .1);
    border: 1px solid rgba(171, 206, 59, .25);
    padding: 4px 12px;
    border-radius: 40px
}

.hc-hero-img {
    max-height: 340px;
    object-fit: contain;
    object-position: bottom;
    width: 100%;
    display: block
}

/* STATS BAR */
.hc-stats {
    background: #060d18;
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.hc-stats-in {
    max-width: 1200px;
    margin: 0 auto;
    display: flex
}

.hc-stat {
    flex: 1;
    padding: 18px 20px;
    border-right: 1px solid rgba(255, 255, 255, .07);
    display: flex;
    align-items: center;
    gap: 12px
}

.hc-stat:last-child {
    border-right: none
}

.hc-stat-ico {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(171, 206, 59, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.hc-stat-ico svg {
    width: 18px;
    height: 18px;
    stroke: #abce3b;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round
}

.hc-stat-val {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #f5f3ee;
    display: block;
    line-height: 1.1
}

.hc-stat-lbl {
    font-size: .66rem;
    color: rgba(245, 243, 238, .38);
    display: block;
    margin-top: 2px;
    font-weight: 600
}

/* SECTIONS */
.hc-sec {
    padding: 64px 70px
}

.hc-sec-in {
    max-width: 1200px;
    margin: 0 auto
}

.hc-sec.dark {
    background: #060d18
}

.hc-sec.mid {
    background: #0f1a2e
}

.hc-sec.light {
    background: #f5f9fc
}

.hc-sec.white {
    background: #fff
}

.hc-eyebrow2 {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #abce3b;
    display: block;
    margin-bottom: 10px
}

.hc-eyebrow2.dk {
    color: rgba(11, 18, 32, .4)
}

.hc-h2 {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    font-weight: 700;
    color: #f5f3ee !important;
    margin: 0 0 18px;
    line-height: 1.1;
    letter-spacing: -.02em
}

.hc-h2 em {
    font-style: normal;
    color: #abce3b
}

.hc-h2.dk {
    color: #0b1a2e !important
}

.hc-h2.dk em {
    color: #3a6a0a
}

.hc-body {
    font-size: .9rem;
    color: rgba(245, 243, 238, .5);
    line-height: 1.78;
    margin: 0 0 16px
}

.hc-body.dk {
    color: #4a6278
}

/* HOW IT WORKS — 2 col */
.hc-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-top: 28px
}

.hc-2col-img {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .35)
}

.hc-2col-img img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block
}

/* SCIENCE CARDS */
.hc-sci-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px
}

.hc-sci {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    padding: 18px 20px
}

.hc-sci-title {
    font-size: .86rem;
    font-weight: 700;
    color: #abce3b;
    margin: 0 0 7px
}

.hc-sci-body {
    font-size: .8rem;
    color: rgba(245, 243, 238, .45);
    line-height: 1.65;
    margin: 0
}

/* FEATURES — 3 col */
.hc-feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 28px
}

.hc-feat {
    background: #fff;
    border: 1.5px solid rgba(11, 18, 32, .08);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 3px 12px rgba(11, 18, 32, .06);
    transition: transform .2s, box-shadow .2s
}

.hc-feat:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(11, 18, 32, .1)
}

.hc-feat-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(58, 106, 10, .08);
    border: 1px solid rgba(58, 106, 10, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px
}

.hc-feat-icon svg {
    width: 20px;
    height: 20px;
    stroke: #3a6a0a;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round
}

.hc-feat-title {
    font-size: .88rem;
    font-weight: 700;
    color: #0b1a2e;
    margin: 0 0 7px
}

.hc-feat-body {
    font-size: .79rem;
    color: #4a6278;
    line-height: 1.65;
    margin: 0
}

/* BENEFITS — 3 col */
.hc-ben-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 28px
}

.hc-ben {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    padding: 18px;
    border-top: 2px solid #abce3b
}

.hc-ben-title {
    font-size: .84rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 6px
}

.hc-ben-body {
    font-size: .77rem;
    color: rgba(245, 243, 238, .42);
    line-height: 1.6;
    margin: 0
}

/* REVENUE SECTION */
.hc-rev-box {
    background: #0b1220;
    border: 1.5px solid rgba(171, 206, 59, .2);
    border-radius: 16px;
    padding: 32px 20px;
    margin-top: 28px;
    display: flex;
    align-items: stretch;
    gap: 0
}

.hc-rev-stat {
    flex: 1;
    text-align: center;
    padding: 8px 20px
}

.hc-rev-num {
    font-size: 2rem;
    font-weight: 700;
    color: #abce3b;
    display: block
}

.hc-rev-lbl {
    font-size: .76rem;
    color: rgba(245, 243, 238, .45);
    display: block;
    margin-top: 4px;
    line-height: 1.5
}

.hc-rev-divider {
    width: 1px;
    background: rgba(255, 255, 255, .1);
    flex-shrink: 0;
    margin: 8px 0
}

.mute {
    display: none;
}

/* Ao scan page css */
/* ── CREDIT PANEL ── */
.ao-credit {
    background: linear-gradient(135deg, #051c09 0%, #0a2d10 100%);
    border: 1px solid rgba(171, 206, 59, .2);
    border-radius: 18px;
    padding: 40px 48px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 36px;
    align-items: center;
    max-width: 960px;
    margin: 0 auto
}

.ao-credit-badge {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #abce3b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 12px rgba(171, 206, 59, .12)
}

.ao-credit-badge span {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff
}

.ao-credit-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: #f5f3ee;
    margin: 0 0 10px
}

.ao-credit-p {
    font-size: .88rem;
    color: rgba(245, 243, 238, .6);
    line-height: 1.68;
    margin: 0 0 20px
}

.ao-credit-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

/* ── CHECKLIST ── */
.ao-checklist {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.ao-checklist li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: .9rem;
    color: #4a6278;
    line-height: 1.55
}

.ao-check {
    color: #3a6a0a;
    font-size: 1rem;
    flex-shrink: 0;
    font-weight: 700;
    margin-top: 1px
}

/* ── HOW IT WORKS — 2-col layout ── */
.qc-how {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center
}

.qc-how.rev {
    direction: rtl
}

.qc-how.rev>* {
    direction: ltr
}

.qc-how-img img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(11, 18, 32, .1);
    display: block;
    object-fit: cover;
    max-height: 420px
}

.qc-how-title {
    font-family: var(--fd, 'Lora', serif);
    font-size: clamp(1.6rem, 2.8vw, 2.3rem);
    font-weight: 700;
    margin: 0 0 16px;
    line-height: 1.1
}

.ep-light .qc-how-title,
.ep-mid .qc-how-title {
    color: #0b1a2e !important
}

.ep-dark .qc-how-title {
    color: #f5f3ee !important
}

.qc-how-title em {
    font-style: normal
}

.ep-light .qc-how-title em,
.ep-mid .qc-how-title em {
    color: #3a6a0a
}

.ep-dark .qc-how-title em {
    color: #abce3b
}

.qc-how-p {
    font-size: .88rem;
    color: #4a6278;
    line-height: 1.76;
    margin: 0 0 16px
}

.ep-dark .qc-how-p {
    color: rgba(245, 243, 238, .55)
}

.qc-how-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px
}

.qc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .68rem;
    font-weight: 700;
    color: #3a6a0a;
    background: rgba(58, 106, 10, .09);
    border: 1px solid rgba(58, 106, 10, .2);
    padding: 6px 13px;
    border-radius: 40px
}

.qc-badge svg {
    width: 13px;
    height: 13px;
    stroke: #3a6a0a;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0
}

/* ── DISCLAIMER ── */
.ao-disclaimer {
    background: #f0f5e8;
    border-left: 3px solid #3a6a0a;
    border-radius: 0 10px 10px 0;
    padding: 16px 22px;
    margin-top: 28px
}

.ao-disclaimer p {
    font-size: .78rem;
    color: #4a6278;
    line-height: 1.6;
    margin: 0
}

/* ── PRICING STRIP ── */
.ao-pricing {
    background: #060d18;
    padding: 28px 0
}

.ao-pricing-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap
}

.ao-pricing-items {
    display: flex;
    gap: 0
}

.ao-price-item {
    padding: 0 36px 0 0;
    margin-right: 36px;
    border-right: 1px solid rgba(255, 255, 255, .07)
}

.ao-price-item:last-child {
    border-right: none;
    padding-right: 0;
    margin-right: 0
}

.ao-price-val {
    font-family: var(--fd, 'Lora', serif);
    font-size: 1.9rem;
    font-weight: 700;
    color: #abce3b;
    line-height: 1
}

.ao-price-label {
    font-size: .68rem;
    color: rgba(245, 243, 238, .35);
    letter-spacing: .04em;
    margin-top: 4px
}

.ao-price-note {
    font-size: .62rem;
    color: rgba(171, 206, 59, .7);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 5px
}

.ao-price-note::before {
    content: '✓';
    font-weight: 700
}

.ao-pricing-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

/* ── FAQ icon fix: suppress shared CSS ::after, use only our SVG ── */
.faq-sec .faq-q::after,
.fn-faq-sec .faq-q::after,
.tc-sec .faq-q::after {
    content: '' !important;
    display: none !important;
}

.faq-sec .faq-q::before,
.fn-faq-sec .faq-q::before,
.tc-sec .faq-q::before {
    content: '' !important;
    display: none !important;
}

.faq-sec .faq-icon {
    display: flex !important;
}

a.dwl-doc:not([disabled]) {
    color: #fff;
}

.dwl-doc img {
    width: 25px;
}

.logreg {
    padding: 100px 10px 50px;
}


/* Responsive css */
/* ── Wide tablet / small desktop 900–1199px ── */
@media (max-width: 1199px) and (min-width: 900px) {
    .hero {
        height: 560px;
    }

    .hero-left {
        padding: calc(var(--nh) + 16px) 44px 44px 48px;
        width: 54%;
    }

    .h-slide-video {
        width: 66%;
        object-fit: cover !important;
        object-position: center top !important;
    }

    .hero-right::before {
        background: linear-gradient(90deg,
                rgba(3, 6, 9, 1.0) 0%,
                rgba(3, 6, 9, 0.95) 28%,
                rgba(3, 6, 9, 0.55) 46%,
                rgba(3, 6, 9, 0.12) 64%,
                transparent 78%);
    }
}

@media (max-width: 1100px) {

    /* Large tablet / small laptop: compress but keep desktop nav */
    #nav {
        padding: 0 20px;
        gap: 8px;
    }

    .nav-item>a,
    .nav-item>button {
        padding: 7px 8px;
        font-size: 0.74rem;
    }

    .btn-ng {
        display: none;
    }

    .btn-account .acct-label {
        display: none;
    }

    .btn-account {
        padding: 7px 10px;
        gap: 0;
    }

    .nav-search-wrap {
        max-width: 160px;
    }

    .ccapp-inner {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .eq-main {
        /* grid-template-columns: 1fr; */
        padding: 0 32px;
    }

    .eq-sm-grid {
        padding: 0 32px 60px;
    }

    .eq-card-wide {
        grid-column: span 1;
    }

    .eq-sm-grid {
        grid-template-columns: 1fr 1fr;
    }

    .supp-in,
    .about-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .f-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

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

    .stat-c {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
}

@media (max-width: 1024px) {

    .ep-title-inner,
    .ep-filter-inner,
    .ep-inner {
        padding: 0 36px;
    }

    .ep-title {
        padding: calc(var(--nh, 70px)+32px) 0 28px;
        position: relative;
    }

    .ep-cta {
        padding: 52px 36px;
    }

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

    .ep-grid .ep-card {
        height: 400px;
    }

    .faq-in {
        padding: 0 36px;
    }

    .dl-header {
        padding: 40px 36px 36px;
    }

    .dl-inner {
        padding: 32px 36px 60px;
    }

    .dl-cbar-in {
        padding: 0 36px;
    }

    .et-header {
        padding: 44px 36px 40px;
    }

    .et-main {
        padding: 44px 36px 68px;
    }

    .et-grid {
        gap: 18px;
    }

    .tc-in,
    .ai-bc-in,
    .hp-cta-in,
    .hw-cta-in,
    .az-cta-in {
        padding-left: 36px;
        padding-right: 36px;
    }

    .tch-l {
        padding: 36px 30px 36px 36px;
    }

    .hp-split {
        gap: 40px;
    }

    .hp-split-img {
        height: 300px;
    }

    .hp-fg,
    .hp-bg {
        grid-template-columns: 1fr 1fr;
    }

    .hp-sp-top {
        grid-template-columns: 1fr 1fr;
    }

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

    .faq-sec {
        padding: 60px 0
    }

    .testi-in {
        padding: 0 36px
    }

    .tch-l {
        padding: 36px 30px 36px 36px;
    }

    .az-split {
        gap: 40px;
    }

    .az-split-img {
        height: 300px;
    }

    .az-mg,
    .az-ag {
        grid-template-columns: 1fr 1fr;
    }

    .az-sp-top {
        grid-template-columns: 1fr 1fr;
    }

    .tch-l {
        padding: 36px 30px 36px 36px;
    }

    .hw-split,
    .hw-split {
        gap: 40px;
    }

    .hw-split-img {
        height: 300px;
    }

    .hw-fg,
    .hw-bg {
        grid-template-columns: 1fr 1fr;
    }

    .hw-sp-top {
        grid-template-columns: 1fr 1fr;
    }

    .hw-filters {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .faq-in {
        padding: 0 36px;
    }

    .tc-in,
    .ai-bc-in,
    .vp-cta-in {
        padding-left: 36px;
        padding-right: 36px;
    }

    .tch-l {
        padding: 36px 30px 36px 36px;
    }

    .vp-split {
        gap: 40px;
    }

    .vp-split-img {
        height: 300px;
    }

    .vp-fg {
        grid-template-columns: 1fr 1fr;
    }

    .vp-sp-top {
        grid-template-columns: 1fr 1fr;
    }

    .qcs-header {
        padding: 44px 36px 40px;
    }

    .qcs-header-in {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .qcs-header-vis {
        display: none;
    }

    .qcs-main {
        padding: 36px 36px 64px;
    }

    .pp-bc .ai-bc-in {
        padding: 0 36px;
    }

    .qcs-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .tc-in,
    .ai-bc-in,
    .tccta-in {
        padding-left: 36px;
        padding-right: 36px;
    }

    .tch-l {
        padding: 36px 30px 36px 36px;
    }

    .tcb-grid,
    .tct-grid {
        grid-template-columns: 1fr 1fr;
    }

    .tcbw-grid,
    .tcf-cols {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .tcm-row {
        gap: 48px;
    }

    .tcsp-top {
        grid-template-columns: 1fr 1fr;
    }

    .tcsp-cards {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .tc-in,
    .ai-bc-in {
        padding-left: 36px;
        padding-right: 36px;
    }

    .tch-l {
        padding: 36px 30px 36px 36px;
    }

    .q4-intro {
        gap: 40px;
    }

    .q4-dg {
        grid-template-columns: 1fr 1fr;
    }

    .q4-steps {
        grid-template-columns: 1fr 1fr;
    }

    .q4-banner-in {
        padding-left: 36px;
        padding-right: 36px;
    }

    .tc-in,
    .ai-bc-in {
        padding-left: 36px;
        padding-right: 36px;
    }

    .ora-hero-l {
        padding: 60px 40px 60px 36px;
    }

    .ora-about-grid,
    .ora-ben-grid {
        gap: 44px;
    }

    .ora-tech-panels {
        grid-template-columns: 1fr 1fr;
    }

    .ora-spec-tiles {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .pw-hero-in {
        padding: 52px 36px 0;
        gap: 28px
    }

    .tc-in,
    .ai-bc-in,
    .pw-faq-wrap {
        padding-left: 36px;
        padding-right: 36px
    }

    .pw-what {
        gap: 36px
    }

    .pw-biz {
        gap: 36px
    }

    .pw-types {
        grid-template-columns: 1fr 1fr;
        gap: 16px
    }

    .pw-benefits {
        grid-template-columns: 1fr 1fr;
        gap: 16px
    }

    .pw-banner-in {
        padding: 44px 36px
    }

    .fn-main,
    .ai-bc-in,
    .fn-faq-in,
    .fn-banner-in {
        padding-left: 36px;
        padding-right: 36px
    }

    .fn-hero {
        grid-template-columns: 58% 42%;
        min-height: auto
    }

    .fn-hero-l {
        padding: 44px 28px 44px 36px
    }

    .fn-hero-r {
        padding: 28px 20px 28px 12px
    }

    .fn-qr-card {
        max-width: 210px;
        padding: 18px 20px
    }

    .fn-qr-card img {
        width: 118px;
        height: 118px;
        margin-bottom: 12px
    }

    .fn-qr-title {
        font-size: .83rem
    }

    .fn-qr-sub {
        font-size: .68rem;
        margin-bottom: 12px
    }

    .fn-h1 {
        font-size: clamp(1.7rem, 3.2vw, 2.6rem)
    }

    .fn-sub {
        font-size: .86rem
    }

    .fn-hero-btns {
        flex-wrap: wrap;
        gap: 8px
    }

    .fn-dash-wrap {
        max-height: 360px
    }

    .fn-loan-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .fn-steps {
        grid-template-columns: repeat(3, 1fr)
    }

    .fn-banner-in {
        padding: 44px 36px
    }

    .bl-header {
        padding: 44px 36px 40px
    }

    .bl-ctrl-in,
    .bl-main,
    .ai-bc-in {
        padding-left: 36px;
        padding-right: 36px
    }

    .bl-sw {
        flex: 0 0 200px
    }

    .bl-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px
    }

    .col-header {
        padding: 44px 36px 40px
    }

    .col-ctrl-in,
    .col-main,
    .ai-bc-in {
        padding-left: 36px;
        padding-right: 36px
    }

    .col-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px
    }

    .col-sw {
        flex: 0 0 180px
    }

    .ei-header {
        padding: 44px 36px 40px
    }

    .ei-ctrl-in,
    .ei-main,
    .ai-bc-in {
        padding-left: 36px;
        padding-right: 36px
    }

    .ei-grid {
        grid-template-columns: 1fr 1fr
    }

    .ei-vid-grid {
        grid-template-columns: 1fr 1fr
    }

    .cl-header {
        padding: 44px 36px 40px;
    }

    .ai-bc-in,
    .cl-main {
        padding-left: 36px;
        padding-right: 36px;
    }

    .cl-featured {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .cl-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .pd-wrap {
        padding: 40px 36px 48px;
    }

    .pd-tabs-wrap {
        padding: 0 36px 52px;
    }

    .pd-grid {
        gap: 36px;
    }

    .ai-bc-in {
        padding: 0 36px;
    }

    .pd-related-in {
        padding: 0 36px;
    }

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

    .pd-zoom-result {
        display: none !important;
    }

    .cart-header {
        padding: 36px 36px 32px;
    }

    .ai-bc-in {
        padding: 0 36px;
    }

    /* Stack to single column on iPad — summary goes below cart */
    .cart-main {
        padding: 28px 36px 56px;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cart-summary {
        position: relative;
        top: auto;
    }

    /* Table columns tighten */
    .cart-thead-row,
    .cart-row {
        grid-template-columns: 1fr 100px 110px 90px;
    }

    .ssw-hero-in {
        padding: 40px 36px 0;
        gap: 28px
    }

    .ep-in,
    .ai-bc-in,
    .ssw-stats-in,
    .ssw-banner-in {
        padding-left: 36px;
        padding-right: 36px
    }

    .ssw-cats {
        grid-template-columns: 1fr 1fr;
        gap: 18px
    }

    .ssw-faq-wrap {
        padding: 0 36px;
    }

    .hsa-hero-in {
        padding: 36px 36px 0;
        gap: 28px
    }

    .ep-in,
    .ai-bc-in,
    .hsa-banner-in {
        padding-left: 36px;
        padding-right: 36px
    }

    .hsa-benefits {
        grid-template-columns: 1fr 1fr
    }

    .hsa-systems {
        grid-template-columns: repeat(3, 1fr)
    }

    .ct-hero {
        padding: 44px 36px 40px
    }

    .ai-bc-in {
        padding: 0 36px
    }

    .ct-zone1 {
        padding: 40px 36px 0;
        gap: 28px
    }

    .ct-zone2 {
        padding: 28px 36px 60px;
        gap: 20px
    }

    .ct-faq {
        padding: 0 36px 60px
    }

    .alw-hero-in {
        padding: 40px 36px 0;
        gap: 28px
    }

    .ep-in,
    .ai-bc-in,
    .alw-stats-in,
    .alw-banner-in {
        padding-left: 36px;
        padding-right: 36px
    }

    .alw-specs {
        grid-template-columns: 1fr 1fr
    }

    .alw-benefits {
        grid-template-columns: 1fr 1fr
    }

    .qc-hero-in {
        padding: 52px 36px;
        gap: 32px
    }

    .ep-in,
    .ai-bc-in,
    .qc-banner-in {
        padding-left: 36px;
        padding-right: 36px
    }

    .qc-features {
        grid-template-columns: 1fr 1fr
    }

    .qc-reports-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .legal-hero {
        padding: 40px 36px 36px
    }

    .ai-bc-in {
        padding: 0 36px
    }

    .legal-main {
        padding: 40px 36px 60px;
        gap: 36px;
        grid-template-columns: 190px 1fr
    }

    .led-hero-in {
        padding: 40px 36px 0;
        gap: 28px
    }

    .ep-in,
    .ai-bc-in,
    .led-stats-in,
    .led-banner-in {
        padding-left: 36px;
        padding-right: 36px
    }

    .led-benefits {
        grid-template-columns: 1fr 1fr
    }

    .led-gallery {
        grid-template-columns: 1fr 1fr 1fr
    }

    .srch-hero {
        padding: 44px 36px 0
    }

    .srch-body {
        padding: 28px 36px 60px
    }

    .srch-filters-in,
    .srch-topbar-in {
        padding: 0 36px
    }

    .bp-hero {
        padding: 40px 36px 36px
    }

    .ai-bc-in {
        padding: 0 36px
    }

    .bp-layout {
        padding: 40px 36px 60px;
        gap: 36px;
        grid-template-columns: 1fr 240px
    }

    .sh-hero,
    .sh-sec,
    .sh-cta {
        padding-left: 36px;
        padding-right: 36px
    }

    .sh-hero-in {
        grid-template-columns: 1fr
    }

    .sh-hero-img {
        display: none
    }

    .ai-bc-in {
        padding: 0 36px
    }

    .sh-stats-in {
        flex-wrap: wrap
    }

    .sh-stat {
        flex: 0 0 50%
    }

    .sh-feat-grid {
        grid-template-columns: 1fr 1fr
    }

    .sh-gallery {
        grid-template-columns: repeat(3, 1fr)
    }

    .team-hero,
    .team-section,
    .team-values,
    .team-cta {
        padding-left: 36px;
        padding-right: 36px
    }

    .ai-bc-in {
        padding: 0 36px
    }

    .team-grid {
        grid-template-columns: 1fr 1fr
    }

    .tm-card:nth-child(4),
    .tm-card:nth-child(5) {
        grid-column: auto
    }

    .team-vals-grid {
        grid-template-columns: 1fr 1fr
    }

    .tk-hero {
        padding: 40px 36px 0
    }

    .tk-hero-in {
        grid-template-columns: 1fr
    }

    .tk-hero-img {
        display: none
    }

    .tk-stats-in {
        flex-wrap: wrap
    }

    .tk-stat {
        flex: 0 0 50%
    }

    .tk-sec {
        padding: 48px 36px
    }

    .ai-bc-in {
        padding: 0 36px
    }

    .tk-why-grid {
        grid-template-columns: 1fr 1fr
    }

    .tk-results-grid {
        grid-template-columns: 1fr 1fr
    }

    .tk-stats-importance {
        grid-template-columns: 1fr 1fr 1fr
    }

    .tk-cta {
        padding: 52px 36px
    }

    .vbx-hero {
        padding: 40px 36px 0
    }

    .vbx-hero-in {
        grid-template-columns: 1fr
    }

    .vbx-hero-img {
        display: none
    }

    .vbx-stats-in {
        flex-wrap: wrap
    }

    .vbx-stat {
        flex: 0 0 50%
    }

    .vbx-sec {
        padding: 48px 36px
    }

    .ai-bc-in {
        padding: 0 36px
    }

    .vbx-features {
        grid-template-columns: 1fr 1fr
    }

    .vbx-tech-grid {
        grid-template-columns: 1fr 1fr
    }

    .vbx-how-grid {
        grid-template-columns: 1fr
    }

    .vbx-how-img {
        position: static
    }

    .vbx-how-img img {
        height: 260px
    }

    .vbx-waves {
        grid-template-columns: 1fr 1fr 1fr
    }

    .vbx-ben-grid {
        grid-template-columns: 1fr 1fr
    }

    .vbx-cta {
        padding: 48px 36px
    }

    .vbx-gallery-section,
    .vbx-demo-section {
        padding: 48px 36px
    }

    .vbx-demo-grid {
        grid-template-columns: 1fr
    }

    .rf-hero {
        padding: 40px 36px 0
    }

    .rf-hero-in {
        grid-template-columns: 1fr
    }

    .rf-hero-img {
        display: none
    }

    .rf-stats-in {
        flex-wrap: wrap
    }

    .rf-stat {
        flex: 0 0 50%
    }

    .rf-sec {
        padding: 48px 36px
    }

    .ai-bc-in {
        padding: 0 36px
    }

    .rf-mod-grid {
        grid-template-columns: 1fr 1fr
    }

    .rf-2col {
        grid-template-columns: 1fr
    }

    .rf-ben-grid {
        grid-template-columns: 1fr 1fr
    }

    .rf-cta {
        padding: 52px 36px
    }

    .hc-hero {
        padding: 40px 36px 0
    }

    .hc-hero-in {
        grid-template-columns: 1fr
    }

    .hc-hero-img {
        display: none
    }

    .hc-stats-in {
        flex-wrap: wrap
    }

    .hc-stat {
        flex: 0 0 50%
    }

    .hc-sec {
        padding: 48px 36px
    }

    .ai-bc-in {
        padding: 0 36px
    }

    .hc-2col {
        grid-template-columns: 1fr
    }

    .hc-feat-grid {
        grid-template-columns: 1fr 1fr
    }

    .hc-ben-grid {
        grid-template-columns: 1fr 1fr
    }

    .hc-rev-box {
        grid-template-columns: 1fr
    }

    .hc-cta {
        padding: 52px 36px
    }
}

@media (max-width: 900px) {

    /* Tablet portrait + large phone: switch to hamburger */
    :root {
        --nh: 64px;
    }

    #nav {
        padding: 0 20px;
        gap: 10px;
    }

    .nav-logo img {
        max-width: 130px;
    }

    .nav-center {
        display: none !important;
    }

    .nav-search-wrap {
        display: none !important;
    }

    .btn-ng {
        display: none !important;
    }

    .btn-account {
        display: none !important;
    }

    .btn-ccapp {
        display: none !important;
    }

    .nav-account-wrap {
        display: none !important;
    }

    .hbg {
        display: flex !important;
    }

    .nav-icon-btn.search-ico {
        display: flex !important;
    }

    /* ── MOBILE HERO: content-height only, bg image fills behind it ── */
    .hero {
        min-height: 0;
        height: auto;
        display: flex;
        align-items: stretch;
        position: relative;
    }

    .hero-left {
        position: relative;
        z-index: 4;
        width: 100%;
        min-height: 0;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: calc(var(--nh) + 36px) 22px 60px;
        background: linear-gradient(to bottom,
                rgba(3, 6, 9, 0.75) 0%,
                rgba(3, 6, 9, 0.60) 60%,
                rgba(3, 6, 9, 0.50) 100%);
    }

    .hero-right {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .hero-right::before {
        background: linear-gradient(180deg,
                rgba(3, 6, 9, 0.65) 0%,
                rgba(3, 6, 9, 0.30) 60%,
                transparent 100%);
    }

    /* Move counter/label inside flow — hide absolute ones on mobile */
    .hero-counter {
        display: none;
    }

    .h-slide-label {
        display: none;
    }

    .hero-scroll-cue {
        display: none;
    }

    /* Fix fixed-height text wrap */
    .hero-txt-wrap {
        height: auto !important;
        min-height: 0;
        position: relative;
    }

    .hero-slide-txt {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        opacity: 0;
        height: 0;
        overflow: hidden;
        transform: none !important;
        transition: opacity 0.4s ease, height 0.4s ease;
        pointer-events: none;
    }

    .hero-slide-txt.active {
        opacity: 1 !important;
        height: auto !important;
        pointer-events: auto;
    }

    /* Slide dots stay visible on right edge */
    .hero-dots {
        right: 10px;
    }

    .header-fixed {
        padding: 10px 20px
    }

    .tcsp-hero {
        grid-template-columns: 1fr;
    }

    .tcsp-img-panel {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
        padding: 24px;
    }

    .tcsp-img-panel img {
        max-width: 240px;
    }

    .tcsp-nums {
        padding: 28px 28px;
    }

    .tcsp-cards {
        grid-template-columns: 1fr;
    }

    .tcsp-card {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .tcsp-card:last-child {
        border-bottom: none;
    }

    .acct-main {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 32px 36px 60px
    }

    .acct-top-in {
        padding: 0 36px
    }

    .od-main {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 32px 36px 60px
    }

    .od-top-in {
        padding: 0 36px
    }
}

/* ── Tablet portrait / large phone landscape 600–899px ── */
@media (max-width: 899px) and (min-width: 600px) {
    .hero {
        height: 500px;
        align-items: stretch;
    }

    .hero-left {
        width: 54%;
        height: 100%;
        padding: calc(var(--nh) + 14px) 32px 36px 36px;
        justify-content: center;
        background: linear-gradient(105deg,
                rgba(3, 6, 9, 0.97) 0%,
                rgba(4, 8, 16, 0.88) 55%,
                transparent 100%);
    }

    .h-slide-video {
        width: 62%;
        object-fit: cover !important;
        object-position: center top !important;
    }

    .hero-right::before {
        background: linear-gradient(90deg,
                rgba(3, 6, 9, 1.0) 0%,
                rgba(3, 6, 9, 0.95) 26%,
                rgba(3, 6, 9, 0.52) 44%,
                rgba(3, 6, 9, 0.10) 62%,
                transparent 76%);
    }

    .hero-counter {
        display: none;
    }

    .h-slide-label {
        display: none;
    }

    .hero-scroll-cue {
        display: none;
    }

    .hero-txt-wrap {
        height: auto !important;
        min-height: 0;
        position: relative;
    }

    .hero-slide-txt {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        opacity: 0;
        height: 0;
        overflow: hidden;
        transform: none !important;
        transition: opacity 0.4s ease, height 0.4s ease;
        pointer-events: none;
    }

    .hero-slide-txt.active {
        opacity: 1 !important;
        height: auto !important;
        pointer-events: auto;
    }

    .hero-badge {
        font-size: 0.52rem;
        padding: 4px 11px;
        margin-bottom: 14px;
    }

    .hero h1,
    .hero h2 {
        font-size: 1.75rem;
        line-height: 1.08;
        margin-bottom: 15px;
    }

    .hero-sub {
        font-size: 0.82rem;
        line-height: 1.7;
        margin-bottom: 18px;
        max-width: 100%;
    }

    .hero-dots {
        right: 10px;
    }
}

@media(max-width:820px) {
    .fn-hero {
        grid-template-columns: 55% 45%
    }

    .fn-hero-l {
        padding: 36px 20px 36px 28px
    }

    .fn-hero-r {
        padding: 24px 16px 24px 8px
    }

    .fn-qr-card {
        max-width: 190px;
        padding: 16px 18px
    }

    .fn-qr-card img {
        width: 106px;
        height: 106px;
        margin-bottom: 10px
    }

    .fn-qr-title {
        font-size: .8rem
    }

    .fn-qr-sub {
        font-size: .65rem;
        margin-bottom: 10px;
        display: none
    }

    .fn-qr-badge {
        font-size: .58rem;
        padding: 4px 10px
    }

    .fn-h1 {
        font-size: 1.7rem
    }

    .fn-sub {
        font-size: .82rem;
        max-width: 100%
    }

    .fn-hero-btns a {
        font-size: .68rem;
        padding: 10px 14px
    }

    .fn-loan-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px
    }

    .fn-steps {
        grid-template-columns: 1fr
    }

    .fn-req-grid {
        grid-template-columns: 1fr
    }

    .fn-dash-wrap {
        max-height: 300px
    }

    .fn-banner-in {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 36px 28px
    }

    .fn-banner-r {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap
    }

    .fn-banner-r a {
        flex: 1 1 auto
    }

    .fn-banner-r img {
        display: none
    }

    .cart-header {
        padding: 30px 28px 26px;
    }

    .ai-bc-in {
        padding: 0 28px;
    }

    .cart-main {
        padding: 22px 28px 48px;
    }

    .cart-thead-row,
    .cart-row {
        grid-template-columns: 1fr 90px 100px 80px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .cart-img {
        width: 60px;
        height: 60px;
    }

    .cart-pname {
        font-size: .84rem;
    }

    .cart-sum-title {
        font-size: 1rem;
    }

    .ct-hero {
        padding: 30px 24px 26px
    }

    .ct-hero-in {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }

    .ct-hero-r {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap
    }

    .ai-bc-in,
    .ct-faq {
        padding-left: 24px;
        padding-right: 24px
    }

    .ai-bc-cta {
        display: none
    }

    .ct-zone1 {
        padding: 28px 24px 0;
        grid-template-columns: 1fr
    }

    .ct-zone2 {
        padding: 24px 24px 52px;
        grid-template-columns: 1fr
    }

    .ct-faq-grid {
        grid-template-columns: 1fr
    }

    .ct-row {
        grid-template-columns: 1fr
    }
}

@media (min-width: 769px) {

    /* nav icon btn: hide on desktop (search bar covers it), show on mobile */
    .nav-icon-btn.search-ico {
        display: none;
    }
}

@media (max-width: 768px) {

    /* Phone */
    :root {
        --nh: 60px;
    }

    #nav {
        padding: 0 16px;
        gap: 10px;
    }

    .nav-center {
        display: none !important;
    }

    .nav-search-wrap {
        display: none !important;
    }

    .btn-ng {
        display: none !important;
    }

    .btn-account {
        display: none !important;
    }

    .btn-ccapp {
        display: none !important;
    }

    .nav-account-wrap {
        display: none !important;
    }

    .hbg {
        display: flex !important;
    }

    .nav-icon-btn.search-ico {
        display: flex !important;
    }

    .hero {
        padding: 0;
    }

    .testi-sec {
        padding: 60px 20px;
    }

    .testi-text {
        font-size: 1.1rem;
    }

    .testi-author {
        flex-direction: column;
        text-align: center;
    }

    .testi-info {
        text-align: center;
    }

    .eq-main> :nth-child(n+4):nth-child(-n+7) {
        grid-column: span 4;
    }

    .testi-sec {
        padding: 60px 20px;
    }

    .testi-text {
        font-size: 1.1rem;
    }

    .testi-author {
        flex-direction: column;
        text-align: center;
    }

    .testi-info {
        text-align: center;
    }

    .ccapp-sec {
        padding-left: 22px;
        padding-right: 22px;
    }

    .ccapp-tiles {
        grid-template-columns: 1fr;
    }

    .ccapp-tile.featured {
        grid-column: span 1;
    }

    /* Mobile footer */
    footer {
        padding: 52px 22px 36px;
    }

    .f-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px 24px;
    }

    .f-col a {
        font-size: 0.88rem;
    }

    .f-col h3,
    .f-col h4 {
        font-size: 0.75rem;
    }

    .f-bot {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .f-legal {
        text-align: center;
    }

    .eq-main {
        padding: 0 18px 20px;
    }

    /* Nav handled above — just non-nav mobile rules here */
    .eq-hd {
        padding: 0 22px;
        flex-direction: column;
        align-items: flex-start;
        gap: 13px;
    }

    .supp-sec {
        padding-left: 22px;
        padding-right: 22px;
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .about-sec {
        padding-left: 22px;
        padding-right: 22px;
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .cta-sec {
        padding-left: 22px;
        padding-right: 22px;
    }

    footer {
        padding-left: 22px;
        padding-right: 22px;
    }

    .more-hd {
        padding-left: 22px;
        padding-right: 22px;
    }

    .hscroll {
        padding-left: 22px;
        padding-right: 22px;
    }

    .eq-sm-grid {
        grid-template-columns: 1fr;
    }

    .eq-card {
        height: 380px;
    }

    .supp-in {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .supp-vis {
        grid-template-columns: 1fr;
        height: auto;
    }

    .supp-tile:nth-child(1) {
        grid-row: span 1;
        height: 260px;
    }

    .supp-tile {
        height: 260px;
    }

    /* Mobile: always show label/sub, hide hover benefits overlay */
    .supp-tile .st-label {
        font-size: 1rem;
    }

    .supp-tile .st-sub {
        font-size: 0.72rem;
        display: block;
    }

    /* .supp-tile .st-benefits {
        display: none !important;
    } */

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

    .f-bot {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .f-legal {
        text-align: center;
    }

    .hero-scroll-cue {
        display: none;
    }

    /* FAQ mobile */
    section[style*="padding:90px 70px"] {
        padding: 60px 22px !important;
    }

    .stitle {
        font-size: 2rem;
    }

    /* CC App mobile */
    .ccapp-sec {
        padding: 70px 22px;
    }

    .ccapp-tiles {
        grid-template-columns: 1fr;
    }

    .ccapp-tile.featured {
        grid-column: span 1;
    }

    /* stats mobile */
    .stats {
        grid-template-columns: 1fr 1fr;
    }

    .stat-c {
        border-right: none !important;
        border-bottom: 1px solid #d4ede6;
        padding: 32px 20px;
    }

    /* more section mobile */
    .more-sec {
        padding: 60px 0;
    }

    .hc {
        width: 260px;
    }

    #faq-section {
        padding: 60px 22px !important;
    }

    #faq-section .stitle {
        color: #0f1e30 !important;
    }

    .via-header {
        padding: 40px 22px 0;
    }

    .via-info {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 18px 18px;
        gap: 16px;
    }

    .via-info-right {
        align-items: flex-start;
        width: 100%;
    }

    .via-learn-btn {
        width: 100%;
        justify-content: center;
    }

    .via-arrow {
        width: 38px;
        height: 38px;
    }

    .via-arrow.prev {
        left: 10px;
    }

    .via-arrow.next {
        right: 10px;
    }

    .via-dots {
        padding: 10px 0 28px;
    }

    .site-bc-in {
        padding: 0 20px;
    }

    .site-bc-cta {
        display: none;
    }

    .ep-title-deco {
        display: none;
    }

    .ai-bc-in {
        padding: 0 20px;
    }

    .ai-bc-cta {
        display: none;
    }

    .ep-title-inner,
    .ep-inner {
        padding: 0 20px;
    }

    .ep-filter-inner {
        padding: 0 12px;
    }

    .ep-cta {
        padding: 44px 20px;
    }

    .ep-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .ep-grid,
    .ep-grid-2 {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .ep-grid .ep-card,
    .ep-grid-2 .ep-card {
        height: 300px;
    }

    .ep-grid-1 .ep-card {
        height: 400px;
    }

    .ep-title {
        padding: calc(var(--nh, 70px) + 22px) 0 22px;
    }

    .faq-in {
        padding: 0 20px;
    }

    .faq-sec {
        padding: 52px 0;
    }

    .dl-header {
        padding: 32px 20px 28px;
    }

    .ai-bc-in {
        padding: 0 20px;
    }

    .dl-cbar-in {
        height: auto;
        padding: 10px 20px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .dl-sw {
        flex: 1 1 100%;
    }

    .dl-count-badge {
        margin-left: 0;
    }

    .dl-inner {
        padding: 24px 20px 52px;
    }

    .dl-feat-card {
        flex-wrap: wrap;
        gap: 16px;
    }

    .dl-feat-btn {
        width: 100%;
        justify-content: center;
    }

    .dl-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 10px;
    }

    .dl-card-img {
        height: 140px;
    }

    .faq-in {
        padding: 0 20px;
    }

    .faq-sec {
        padding: 52px 0;
    }

    .et-header {
        padding: 32px 20px 28px;
    }

    .ai-bc-in {
        padding: 0 20px;
    }

    .et-main {
        padding: 32px 20px 52px;
    }

    .ai-bc-cta {
        display: none;
    }

    .et-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .et-card-img-wrap {
        height: 200px;
    }

    .et-support {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 24px;
    }

    .et-support-btns {
        flex-wrap: wrap;
    }

    .et-header-stats {
        flex-wrap: wrap;
        gap: 20px;
    }

    .tch {
        grid-template-columns: 1fr;
        height: auto;
    }

    .tch-r {
        height: 52vw;
        min-height: 200px;
        max-height: 290px;
        order: -1;
    }

    .tch-l {
        padding: 22px 20px 28px;
    }

    .tch-h1 {
        font-size: 1.85rem;
    }

    .tch-btns {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ai-bc-in {
        padding: 0 20px;
    }

    .ai-bc-cta {
        display: none;
    }

    .tc-in,
    .hp-cta-in {
        padding-left: 20px;
        padding-right: 20px;
    }

    .tc-sec {
        padding: 52px 0;
    }

    .hp-cta-in {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .hp-split {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .hp-split-img {
        height: 50vw;
        min-height: 180px;
        max-height: 260px;
    }

    .hp-fg,
    .hp-bg {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .hp-stat-banner {
        grid-template-columns: 1fr;
    }

    .hp-sp-top {
        grid-template-columns: 1fr;
    }

    .hp-sp-img {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
        height: 40vw;
        min-height: 160px;
    }

    .hp-sp-nums {
        padding: 20px;
    }

    .hp-sp-sg {
        grid-template-columns: 1fr 1fr;
    }

    .hp-sp-rows {
        grid-template-columns: 1fr;
    }

    .hp-sp-row {
        border-right: none;
    }

    .hp-gm {
        height: 54vw;
        min-height: 190px;
    }

    .hp-gth {
        height: 80px;
    }

    .hp-cta-btns {
        flex-direction: column;
        align-items: center;
    }

    .testi-in {
        padding: 0 20px
    }

    .testi-sec {
        padding: 52px 0
    }

    .testi-grid {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .tch {
        grid-template-columns: 1fr;
        height: auto;
    }

    .tch-r {
        height: 52vw;
        min-height: 200px;
        max-height: 290px;
        order: -1;
    }

    .tch-l {
        padding: 22px 20px 28px;
    }

    .tch-h1 {
        font-size: 1.85rem;
    }

    .tch-btns {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ai-bc-in {
        padding: 0 20px;
    }

    .ai-bc-cta {
        display: none;
    }

    .tc-in,
    .az-cta-in {
        padding-left: 20px;
        padding-right: 20px;
    }

    .tc-sec {
        padding: 52px 0;
    }

    .az-cta-in {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .az-split {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .az-split-img {
        height: 50vw;
        min-height: 180px;
        max-height: 260px;
    }

    .az-mg {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .az-ag {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .az-sp-top {
        grid-template-columns: 1fr;
    }

    .az-sp-img {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
        height: 40vw;
        min-height: 160px;
    }

    .az-sp-nums {
        padding: 22px 20px;
    }

    .az-sp-sg {
        grid-template-columns: 1fr 1fr;
    }

    .az-sp-grid {
        grid-template-columns: 1fr;
    }

    .az-sp-row {
        border-right: none;
    }

    .az-cta-btns {
        flex-direction: column;
        align-items: center;
    }

    .tch {
        grid-template-columns: 1fr;
        height: auto;
    }

    .tch-r {
        height: 52vw;
        min-height: 200px;
        max-height: 290px;
        order: -1;
    }

    .tch-l {
        padding: 22px 20px 28px;
    }

    .tch-h1 {
        font-size: 1.85rem;
    }

    .tch-btns {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ai-bc-in {
        padding: 0 20px;
    }

    .ai-bc-cta {
        display: none;
    }

    .tc-in,
    .hw-cta-in {
        padding-left: 20px;
        padding-right: 20px;
    }

    .tc-sec {
        padding: 52px 0;
    }

    .hw-cta-in {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .hw-split {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .hw-hp-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hw-split-img {
        height: 50vw;
        min-height: 180px;
        max-height: 260px;
    }

    .hw-fg {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .hw-bg {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .hw-hp-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hw-filters {
        grid-template-columns: 1fr;
    }

    .hw-sp-top {
        grid-template-columns: 1fr;
    }

    .hw-sp-img {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
        height: 40vw;
        min-height: 160px;
    }

    .hw-sp-nums {
        padding: 20px;
    }

    .hw-sp-sg {
        grid-template-columns: 1fr 1fr;
    }

    .hw-sp-cards {
        grid-template-columns: 1fr;
    }

    .hw-sp-card {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .hw-sp-card:last-child {
        border-bottom: none;
    }

    .hw-gm {
        height: 54vw;
        min-height: 190px;
    }

    .hw-gth {
        height: 50px;
    }

    .hw-gs {
        grid-template-columns: repeat(5, 1fr);
        gap: 7px;
    }

    .hw-cta-btns {
        flex-direction: column;
        align-items: center;
    }

    .faq-in {
        padding: 0 20px;
    }

    .faq-sec {
        padding: 52px 0;
    }

    .tch {
        grid-template-columns: 1fr;
        height: auto;
    }

    .tch-r {
        height: 52vw;
        min-height: 200px;
        max-height: 290px;
        order: -1;
    }

    .tch-l {
        padding: 22px 20px 28px;
    }

    .tch-h1 {
        font-size: 1.85rem;
    }

    .tch-btns {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ai-bc-in {
        padding: 0 20px;
    }

    .ai-bc-cta {
        display: none;
    }

    .tc-in,
    .vp-cta-in {
        padding-left: 20px;
        padding-right: 20px;
    }

    .tc-sec {
        padding: 52px 0;
    }

    .vp-cta-in {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .vp-split {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .vp-split-img {
        height: 50vw;
        min-height: 180px;
        max-height: 260px;
    }

    .vp-fg {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .vp-sg {
        grid-template-columns: 1fr;
    }

    .vp-ms {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .vp-sp-top {
        grid-template-columns: 1fr;
    }

    .vp-sp-img {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
        height: 40vw;
        min-height: 160px;
    }

    .vp-sp-nums {
        padding: 20px;
    }

    .vp-sp-sg {
        grid-template-columns: 1fr 1fr;
    }

    .vp-sp-cards {
        grid-template-columns: 1fr;
    }

    .vp-sp-card {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .vp-sp-card:last-child {
        border-bottom: none;
    }

    .vp-gm {
        height: 54vw;
        min-height: 190px;
    }

    .vp-gth {
        height: 50px;
    }

    .vp-cta-btns {
        flex-direction: column;
        align-items: center;
    }

    .qcs-header {
        padding: 32px 20px 28px;
    }

    .ai-bc-in {
        padding: 0 20px;
    }

    .ai-bc-cta {
        display: none;
    }

    .qcs-main {
        padding: 28px 20px 52px;
    }

    .qcs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .qcs-sec-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .qcs-support {
        flex-direction: column;
        align-items: flex-start;
        padding: 26px 22px;
    }

    .qcs-support-btns {
        flex-wrap: wrap;
    }

    .qcs-stats {
        flex-wrap: wrap;
    }

    .qcs-stat {
        flex: 0 0 calc(50% - 10px);
        border-right: none;
        padding: 0 0 14px 0;
    }

    .tch {
        grid-template-columns: 1fr;
        height: auto;
    }

    .tch-r {
        height: 260px;
        order: -1;
    }

    .tch-l {
        padding: 22px 20px 30px;
    }

    .tch-h1 {
        font-size: 1.9rem;
    }

    .tch-btns {
        flex-wrap: wrap;
    }

    .ai-bc-in {
        padding: 0 20px;
    }

    .ai-bc-cta {
        display: none;
    }

    .tc-in,
    .tccta-in {
        padding-left: 20px;
        padding-right: 20px;
    }

    .tc-sec {
        padding: 60px 0;
    }

    .tccta-in {
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .tcw-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .tcm-row {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 40px 0;
    }

    .tcm-rev .tcm-img,
    .tcm-rev .tcm-body {
        order: unset;
    }

    .tcb-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

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

    .tcbw-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .tcf-cols {
        grid-template-columns: 1fr;
    }

    .tcsp-top {
        grid-template-columns: 1fr;
    }

    .tcsp-cards {
        grid-template-columns: 1fr;
    }

    .tcg-main {
        height: 54vw;
        min-height: 220px;
    }

    .tcg-strip {
        gap: 7px;
    }

    .tcg-th {
        height: 58px;
    }

    .tch {
        grid-template-columns: 1fr;
        height: auto;
    }

    .tch-r {
        height: 52vw;
        min-height: 200px;
        max-height: 280px;
        order: -1;
    }

    .tch-l {
        padding: 22px 20px 28px;
    }

    .tch-h1 {
        font-size: 1.85rem;
    }

    .tch-btns {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ai-bc-in {
        padding: 0 20px;
    }

    .ai-bc-cta {
        display: none;
    }

    .tc-in {
        padding-left: 20px;
        padding-right: 20px;
    }

    .tc-sec {
        padding: 52px 0;
    }

    .q4-intro {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .q4-intro-img {
        position: static;
    }

    .q4-steps {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .q4-dg {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .q4-db-stat {
        flex-wrap: wrap;
        gap: 18px;
        padding: 20px 22px;
    }

    .q4-dl-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 26px 24px;
    }

    .q4-banner-in {
        padding: 44px 20px;
    }

    .ora-hero {
        grid-template-columns: 1fr;
        height: auto;
    }

    .ora-hero-r {
        height: 50vw;
        min-height: 200px;
        max-height: 300px;
        order: -1;
        padding: 20px;
    }

    .ora-hero-l {
        padding: 28px 20px 36px;
    }

    .ora-h1 {
        font-size: 2.2rem;
    }

    .ora-hero-btns {
        flex-wrap: wrap;
        gap: 9px;
    }

    .ora-hero-stats {
        flex-wrap: wrap;
    }

    .ora-stat {
        flex: 0 0 33%;
        border-right: none;
        padding: 8px 0 0 0;
    }

    .ai-bc-in {
        padding: 0 20px;
    }

    .ai-bc-cta {
        display: none;
    }

    .tc-in,
    .ora-cta-in {
        padding-left: 20px;
        padding-right: 20px;
    }

    .tc-sec {
        padding: 60px 0;
    }

    .ora-tech {
        padding: 60px 0 80px;
    }

    .ora-about-grid,
    .ora-ben-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ora-about-img,
    .ora-ben-img {
        height: 50vw;
        min-height: 190px;
        max-height: 280px;
    }

    .ora-tech-panels {
        grid-template-columns: 1fr;
    }

    .ora-panel:last-child {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, .07);
    }

    .ora-use-grid {
        grid-template-columns: 1fr;
    }

    .ora-prec-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ora-spec-tiles {
        grid-template-columns: 1fr 1fr;
    }

    .ora-spec-tile:nth-child(2) {
        border-right: none;
    }

    .ora-spec-tile:nth-child(3) {
        border-top: 1px solid rgba(255, 255, 255, .07);
    }

    .ora-ben-list {
        grid-template-columns: 1fr;
    }

    .ora-cta-in {
        padding-top: 52px;
        padding-bottom: 52px;
    }

    .ora-chip {
        display: none;
    }

    .ora-gal-main {
        height: 54vw;
        min-height: 220px;
    }

    .ora-gth {
        height: 54px;
    }

    .ora-gal-strip {
        gap: 7px;
    }

    .pw-hero-in {
        grid-template-columns: 1fr;
        padding: 36px 20px 0;
        gap: 24px
    }

    .pw-hero-img {
        display: none
    }

    .tc-in,
    .ai-bc-in,
    .pw-faq-wrap {
        padding-left: 20px;
        padding-right: 20px
    }

    .ai-bc-cta {
        display: none
    }

    .tc-sec {
        padding: 52px 0
    }

    .pw-what {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .pw-types {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .pw-benefits {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .pw-biz {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .pw-biz-img {
        display: none
    }

    .pw-banner-in {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 36px 20px
    }

    .pw-banner-r {
        flex-direction: row;
        flex-wrap: wrap
    }

    .pw-hero-btns {
        flex-wrap: wrap;
        gap: 9px
    }

    .bl-header {
        padding: 32px 20px 28px
    }

    .bl-header-in {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }

    .bl-header-stats {
        flex-direction: row;
        align-items: flex-start
    }

    .bl-ctrl-in {
        height: 60px;
        padding: 0 20px
    }

    .bl-sw {
        flex: 0 0 150px;
        margin-right: 8px
    }

    .bl-count {
        display: none
    }

    .ai-bc-in {
        padding: 0 20px
    }

    .ai-bc-cta {
        display: none
    }

    .bl-main {
        padding: 28px 20px 52px
    }

    .bl-featured {
        grid-template-columns: 1fr
    }

    .bl-feat-img {
        min-height: 220px
    }

    .bl-feat-body {
        padding: 24px 22px
    }

    .bl-grid {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .bl-newsletter {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 28px 24px
    }

    .bl-nl-form {
        flex-direction: column
    }

    .bl-nl-input {
        width: 100%
    }

    .col-header {
        padding: 28px 20px 24px
    }

    .col-header-in {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }

    .col-header-r {
        text-align: left
    }

    .col-ctrl-in {
        height: auto;
        padding: 10px 20px;
        flex-wrap: wrap;
        overflow: visible;
        gap: 8px
    }

    .col-sw {
        flex: 1 1 auto;
        margin-right: 0
    }

    .col-filts-wrap {
        width: 100%;
        flex: none
    }

    .col-filts-wrap::before,
    .col-filts-wrap::after {
        display: none
    }

    .col-filts {
        overflow-x: scroll
    }

    .col-sort-wrap {
        flex: 0 0 auto
    }

    .col-sort-lbl {
        display: none
    }

    .col-count {
        margin-left: auto
    }

    .ai-bc-in {
        padding: 0 20px
    }

    .ai-bc-cta {
        display: none
    }

    .col-main {
        padding: 22px 20px 44px
    }

    .col-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px
    }

    .ei-header {
        padding: 28px 20px 24px
    }

    .ei-header-in {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }

    .ei-header-stats {
        flex-direction: row;
        gap: 16px
    }

    /* controls: 2-row layout on mobile */
    .ei-controls {
        position: relative
    }

    .ei-ctrl-in {
        height: auto;
        padding: 10px 20px 10px;
        flex-wrap: wrap;
        gap: 8px;
        overflow: visible;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    /* row 1: search full-width + count */
    .ei-sw {
        flex: none;
        width: 100%;
        margin-right: 0
    }

    .ei-search {
        font-size: .86rem;
        padding: 10px 32px 10px 36px
    }

    /* row 2: filter strip full-width */
    .ei-filts-wrap {
        width: 100%;
        flex: none;
        display: block;
        position: relative;
    }

    .ei-filts-wrap::before,
    .ei-filts-wrap::after {
        display: none
    }

    .ei-filts {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding: 4px 0 8px;
        scrollbar-width: none;
        cursor: grab;
    }

    .ei-filts::-webkit-scrollbar {
        display: none
    }

    .ei-filt {
        font-size: .7rem;
        padding: 6px 13px
    }

    /* count below filters */
    .ei-count {
        margin-left: auto;
        flex: none;
        font-size: .68rem;
    }

    /* breadcrumb */
    .ai-bc-in {
        padding: 0 20px
    }

    .ai-bc-cta {
        display: none
    }

    /* main */
    .ei-main {
        padding: 24px 20px 48px
    }

    .ei-grid {
        grid-template-columns: 1fr
    }

    .ei-vid-grid {
        grid-template-columns: 1fr
    }

    .ei-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 20px
    }

    .ei-cta-btns {
        flex-wrap: wrap
    }

    .cl-header {
        padding: 28px 20px 24px;
    }

    .cl-header-in {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .cl-header-stats {
        flex-direction: row;
        gap: 20px;
    }

    .ai-bc-in {
        padding: 0 20px;
    }

    .ai-bc-cta {
        display: none;
    }

    .cl-main {
        padding: 28px 20px 52px;
    }

    .cl-featured {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .cl-grid {
        grid-template-columns: 1fr 1fr;
        gap: 11px;
    }

    .cl-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 26px 22px;
    }

    .cl-cta-btns {
        flex-wrap: wrap;
    }

    /* Layout */
    .pd-wrap {
        padding: 24px 20px 36px;
    }

    .pd-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pd-gallery {
        position: relative;
        top: auto;
    }

    .pd-tabs-wrap {
        padding: 0 20px 40px;
    }

    .ai-bc-in {
        padding: 0 20px;
    }

    .ai-bc-back {
        display: none;
    }

    .pd-related-in {
        padding: 0 20px;
    }

    /* Tabs — scrollable strip */
    .pd-tabs-nav {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .pd-tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .pd-tab {
        padding: 11px 18px;
        font-size: .74rem;
        flex-shrink: 0;
    }

    /* Content grids */
    .pd-benefits {
        grid-template-columns: 1fr 1fr;
    }

    .pd-strains {
        grid-template-columns: 1fr;
    }

    .pd-related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Downloads side by side still fine, but ensure no overflow */
    .pd-downloads {
        flex-wrap: wrap;
    }

    .pd-wp {
        min-width: 0;
        flex: 1 1 calc(50% - 5px);
    }

    /* Trust badges — wrap cleanly */
    .pd-trust {
        gap: 8px;
    }

    .pd-trust-item {
        font-size: .68rem;
    }

    /* Price block */
    .pd-price {
        font-size: 1.6rem;
    }

    /* Supplement facts table — scrollable on small screens */
    .pd-facts-table {
        font-size: .74rem;
    }

    .pd-facts-table th,
    .pd-facts-table td {
        padding: 8px 10px;
    }

    .ssw-hero-in {
        grid-template-columns: 1fr;
        padding: 32px 20px 0
    }

    .ssw-hero-img {
        display: none
    }

    .ep-in,
    .ai-bc-in,
    .ssw-stats-in,
    .ssw-banner-in {
        padding-left: 20px;
        padding-right: 20px
    }

    .ai-bc-cta {
        display: none
    }

    .ep-sec {
        padding: 52px 0
    }

    .ssw-how {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .ssw-how-img {
        display: none
    }

    .ssw-mech {
        grid-template-columns: 1fr
    }

    .ssw-cats {
        grid-template-columns: 1fr
    }

    .ssw-stats-in {
        flex-wrap: wrap
    }

    .ssw-stat {
        flex: 1 1 40%;
        padding: 12px 14px
    }

    .ssw-faq-wrap {
        padding: 0 20px;
    }

    .hsa-hero-in {
        grid-template-columns: 1fr;
        padding: 28px 20px 0
    }

    .hsa-hero-img {
        display: none
    }

    .hsa-hero-img {
        display: none
    }

    .ep-in,
    .ai-bc-in,
    .hsa-banner-in {
        padding-left: 20px;
        padding-right: 20px
    }

    .ai-bc-cta {
        display: none
    }

    .ep-sec {
        padding: 52px 0
    }

    .hsa-benefits {
        grid-template-columns: 1fr
    }

    .hsa-how {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .hsa-how-img {
        display: none
    }

    .hsa-systems {
        grid-template-columns: 1fr 1fr
    }

    .hsa-report {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .hsa-report-img {
        display: none
    }

    .hsa-banner-in {
        grid-template-columns: 1fr;
        gap: 22px
    }

    .hsa-banner-r {
        flex-direction: row;
        flex-wrap: wrap
    }

    .addr-main {
        padding: 28px 20px 52px
    }

    .addr-top-in {
        padding: 0 20px
    }

    .addr-row {
        grid-template-columns: 1fr
    }

    .alw-hero-in {
        grid-template-columns: 1fr;
        padding: 32px 20px 0
    }

    .alw-hero-img {
        display: none
    }

    .ep-in,
    .ai-bc-in,
    .alw-stats-in,
    .alw-banner-in {
        padding-left: 20px;
        padding-right: 20px
    }

    .ai-bc-cta {
        display: none
    }

    .ep-sec {
        padding: 52px 0
    }

    .alw-2col {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .alw-2col-img {
        display: none
    }

    .alw-specs {
        grid-template-columns: 1fr
    }

    .alw-benefits {
        grid-template-columns: 1fr
    }

    .alw-gallery {
        grid-template-columns: 1fr 1fr
    }

    .alw-banner-in {
        grid-template-columns: 1fr;
        gap: 22px
    }

    .alw-banner-r {
        flex-direction: row;
        flex-wrap: wrap
    }

    .alw-stats-in {
        flex-wrap: wrap
    }

    .alw-stat {
        flex: 1 1 40%;
        padding: 12px 14px
    }

    .qc-hero-in {
        grid-template-columns: 1fr;
        padding: 36px 20px
    }

    .qc-hero-img {
        display: none
    }

    .ep-in,
    .ai-bc-in,
    .qc-banner-in {
        padding-left: 20px;
        padding-right: 20px
    }

    .ai-bc-cta {
        display: none
    }

    .ep-sec {
        padding: 52px 0
    }

    .qc-how {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .qc-how-img {
        display: none
    }

    .qc-features {
        grid-template-columns: 1fr
    }

    .qc-principles {
        grid-template-columns: 1fr
    }

    .qc-timeline {
        grid-template-columns: 1fr
    }

    .qc-functions {
        grid-template-columns: 1fr
    }

    .qc-reports-grid {
        grid-template-columns: 1fr 1fr
    }

    .qc-banner-in {
        grid-template-columns: 1fr;
        gap: 22px
    }

    .qc-banner-r {
        flex-direction: row;
        flex-wrap: wrap
    }

    .qc-videos-grid {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .legal-hero {
        padding: 32px 20px 28px
    }

    .ai-bc-in {
        padding: 0 20px
    }

    .legal-main {
        padding: 28px 20px 52px;
        grid-template-columns: 1fr
    }

    .legal-toc {
        display: none
    }

    .led-hero-in {
        grid-template-columns: 1fr;
        padding: 32px 20px 0
    }

    .led-hero-img {
        display: none
    }

    .ep-in,
    .ai-bc-in,
    .led-stats-in,
    .led-banner-in {
        padding-left: 20px;
        padding-right: 20px
    }

    .ai-bc-cta {
        display: none
    }

    .ep-sec {
        padding: 52px 0
    }

    .led-2col {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .led-2col-img {
        display: none
    }

    .led-benefits {
        grid-template-columns: 1fr 1fr
    }

    .led-gallery {
        grid-template-columns: 1fr 1fr
    }

    .led-ba {
        grid-template-columns: 1fr
    }

    .led-banner-in {
        grid-template-columns: 1fr;
        gap: 22px
    }

    .led-banner-r {
        flex-direction: row;
        flex-wrap: wrap
    }

    .led-stats-in {
        flex-wrap: wrap
    }

    .led-stat {
        flex: 1 1 40%;
        padding: 12px 14px
    }

    .srch-hero {
        padding: 32px 20px 0
    }

    .srch-body {
        padding: 22px 20px 52px
    }

    .srch-filters-in,
    .srch-topbar-in {
        padding: 0 20px
    }

    .srch-card-img-wrap {
        width: 120px
    }

    .bp-hero {
        padding: 32px 20px 28px
    }

    .ai-bc-in {
        padding: 0 20px
    }

    .bp-layout {
        padding: 28px 20px 52px;
        grid-template-columns: 1fr
    }

    .bp-sidebar {
        position: static
    }

    .sh-hero,
    .sh-sec,
    .sh-cta {
        padding-left: 20px;
        padding-right: 20px
    }

    .ai-bc-in {
        padding: 0 20px
    }

    .sh-feat-grid {
        grid-template-columns: 1fr
    }

    .sh-gallery {
        grid-template-columns: repeat(2, 1fr)
    }

    .team-hero,
    .team-section,
    .team-values,
    .team-cta {
        padding-left: 20px;
        padding-right: 20px
    }

    .ai-bc-in {
        padding: 0 20px
    }

    .team-grid {
        grid-template-columns: 1fr
    }

    .team-cta-btns {
        flex-direction: column;
        align-items: center
    }

    .tk-hero {
        padding: 28px 20px 0
    }

    .tk-sec {
        padding: 40px 20px
    }

    .ai-bc-in {
        padding: 0 20px
    }

    .tk-why-grid {
        grid-template-columns: 1fr
    }

    .tk-kit-imgs {
        grid-template-columns: 1fr 1fr
    }

    .tk-results-grid {
        grid-template-columns: 1fr 1fr
    }

    .tk-res-imgs {
        grid-template-columns: repeat(2, 1fr)
    }

    .tk-stats-importance {
        grid-template-columns: 1fr
    }

    .tk-cta {
        padding: 40px 20px
    }

    .vbx-hero {
        padding: 28px 20px 0
    }

    .vbx-sec {
        padding: 44px 20px
    }

    .ai-bc-in {
        padding: 0 20px
    }

    .vbx-features {
        grid-template-columns: 1fr
    }

    .vbx-tech-grid {
        grid-template-columns: 1fr
    }

    .vbx-waves {
        grid-template-columns: 1fr 1fr
    }

    .vbx-ben-grid {
        grid-template-columns: 1fr
    }

    .vbx-cta {
        padding: 44px 20px
    }

    .vbx-gallery-section,
    .vbx-demo-section {
        padding: 40px 20px
    }

    .vbx-gallery-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .rf-hero {
        padding: 28px 20px 0
    }

    .rf-sec {
        padding: 40px 20px
    }

    .ai-bc-in {
        padding: 0 20px
    }

    .rf-mod-grid {
        grid-template-columns: 1fr 1fr
    }

    .rf-ben-grid {
        grid-template-columns: 1fr
    }

    .rf-cta {
        padding: 40px 20px
    }

    .hc-hero {
        padding: 28px 20px 0
    }

    .hc-sec {
        padding: 40px 20px
    }

    .ai-bc-in {
        padding: 0 20px
    }

    .hc-feat-grid {
        grid-template-columns: 1fr
    }

    .hc-ben-grid {
        grid-template-columns: 1fr
    }

    .hc-sci-grid {
        grid-template-columns: 1fr
    }

    .hc-cta {
        padding: 44px 20px
    }

    .qc-features {
        grid-template-columns: 1fr
    }

    .ao-pricing-items {
        flex-direction: column;
        gap: 16px
    }

    .ao-pricing-in {
        padding-left: 20px;
        padding-right: 20px
    }

    .ao-price-item {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
        padding-bottom: 14px;
        margin-bottom: 0
    }

    .ao-price-item:last-child {
        border-bottom: none
    }

    .qc-banner-in {
        grid-template-columns: 1fr;
        gap: 22px
    }

    .qc-banner-r {
        flex-direction: row;
        flex-wrap: wrap
    }

    .ao-credit {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 30px 24px
    }

    .ao-credit-badge {
        margin: 0 auto
    }

    .ao-credit-btns {
        justify-content: center
    }
}

/* ── Mobile landscape / small tablet (≤640px) ── switch to single column hero ── */
@media(max-width:640px) {
    .fn-hero {
        grid-template-columns: 1fr;
        min-height: auto
    }

    .fn-hero-l {
        padding: 32px 20px 24px
    }

    .fn-hero-r {
        padding: 0 20px 28px;
        order: 2;
        /* QR appears BELOW text */
        justify-content: flex-start;
    }

    .fn-qr-card {
        max-width: 100%;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 18px;
        text-align: left;
    }

    .fn-qr-card img {
        width: 80px;
        height: 80px;
        margin: 0;
        flex-shrink: 0;
        border-radius: 8px
    }

    .fn-qr-title {
        font-size: .82rem;
        margin-bottom: 4px
    }

    .fn-qr-sub {
        font-size: .68rem;
        display: block;
        margin-bottom: 10px
    }

    .fn-h1 {
        font-size: 1.65rem
    }

    .fn-sub {
        font-size: .85rem
    }

    .ai-bc-in {
        padding: 0 20px
    }

    .ai-bc-cta {
        display: none
    }

    .fn-main {
        padding: 32px 20px 44px
    }

    .fn-hero-pills {
        gap: 6px
    }

    .fn-pill {
        font-size: .62rem;
        padding: 4px 10px
    }

    .fn-steps {
        grid-template-columns: 1fr
    }

    .fn-req-grid {
        grid-template-columns: 1fr
    }

    .fn-loan-grid {
        grid-template-columns: 1fr 1fr;
        gap: 11px
    }

    .fn-dl-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }

    .fn-dl-btn {
        margin-left: 0;
        width: 100%;
        justify-content: center
    }

    .fn-faq-in {
        padding: 0 20px
    }

    .fn-banner-in {
        padding: 32px 20px
    }

    .fn-banner-r {
        flex-direction: column
    }

    .fn-dash-wrap {
        max-height: 240px
    }

    .cart-header {
        padding: 24px 20px 20px;
    }

    .cart-header-in {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .cart-header-r {
        text-align: left;
    }

    .ai-bc-in {
        padding: 0 20px;
    }

    .cart-main {
        padding: 18px 20px 44px;
        gap: 18px;
    }

    /* Hide column headers on small screens */
    .cart-thead {
        display: none;
    }

    /* Each row: product full-width, then price/qty/total in a flex row below */
    .cart-row {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 16px 16px;
    }

    .cart-product {
        margin-bottom: 12px;
    }

    /* Price / qty / total in one row */
    .cart-price,
    .cart-qty-cell,
    .cart-total {
        display: inline-flex;
        align-items: center;
        text-align: left;
    }

    /* Inline row for price + qty + total */
    .cart-row {
        display: flex;
        flex-direction: column;
    }

    .cart-row-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-top: 10px;
        border-top: 1px solid rgba(11, 18, 32, .06);
    }

    .cart-price {
        font-size: .82rem;
    }

    .cart-total {
        font-size: .88rem;
        font-weight: 700;
    }

    .cart-img {
        width: 58px;
        height: 58px;
    }
}

@media (max-width: 600px) {
    .hscroll-arrow {
        display: none;
    }

    .hscroll {
        padding: 8px 20px 24px;
        gap: 12px;
    }

    .more-hd {
        padding: 0 20px;
    }

    /* Thumbnails smaller */
    .pd-thumb {
        width: 60px;
        height: 60px;
    }

    /* Downloads stack */
    .pd-downloads {
        flex-direction: column;
    }

    .pd-wp {
        flex: 1 1 100%;
    }

    /* Actions */
    .pd-actions {
        flex-wrap: wrap;
        gap: 9px;
    }

    .pd-add-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    /* Benefits */
    .pd-benefits {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Related */
    .pd-related {
        padding: 40px 0;
    }

    .pd-related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .pd-rel-card-img {
        padding: 10px;
    }

    .acct-main {
        padding: 24px 18px 52px
    }

    .acct-top-in {
        padding: 0 18px
    }

    .acct-table th,
    .acct-table td {
        padding: 10px 12px
    }

    .od-main {
        padding: 24px 18px 52px
    }

    .od-top-in {
        padding: 0 18px
    }

    .od-table th,
    .od-table td {
        padding: 10px 12px
    }
}

/* ── Phone 599px and below ── */
@media (max-width: 599px) {
    .hero {
        height: 480px;
        align-items: flex-end;
    }

    .hero-left {
        width: 100%;
        height: auto;
        padding: 0 20px 32px;
        background: none;
        justify-content: flex-end;
    }

    .h-slide-video {
        width: 100% !important;
        right: 0;
        left: 0;
        object-fit: cover !important;
        object-position: center top !important;
    }

    .hero-right {
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .hero-right::before {
        background: linear-gradient(180deg,
                rgba(3, 6, 9, 0.1) 0%,
                rgba(3, 6, 9, 0.25) 30%,
                rgba(3, 6, 9, 0.80) 60%,
                rgba(3, 6, 9, 0.97) 100%);
    }

    .hero-counter {
        display: none;
    }

    .h-slide-label {
        display: none;
    }

    .hero-scroll-cue {
        display: none;
    }

    .hero-txt-wrap {
        height: auto !important;
        min-height: 0;
        position: relative;
    }

    .hero-slide-txt {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        opacity: 0;
        height: 0;
        overflow: hidden;
        transform: none !important;
        transition: opacity 0.4s ease, height 0.4s ease;
        pointer-events: none;
    }

    .hero-slide-txt.active {
        opacity: 1 !important;
        height: auto !important;
        pointer-events: auto;
    }

    .hero-badge {
        font-size: 0.5rem;
        padding: 4px 10px;
        margin-bottom: 12px;
    }

    .hero h1,
    .hero h2 {
        font-size: 1.65rem;
        line-height: 1.08;
        margin-bottom: 10px;
    }

    .hero-sub {
        font-size: 0.78rem;
        line-height: 1.65;
        margin-bottom: 16px;
        max-width: 100%;
    }

    .hero-btns {
        gap: 10px;
    }

    .hero-dots {
        right: 10px;
    }
}

@media (max-width: 576px) {
    .eq-main {
        grid-template-columns: repeat(1, 1fr);
    }

    .eq-main> :nth-child(1),
    .eq-main> :nth-child(2) {
        grid-column: span 4;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ssw-hero-in {
        padding: 24px 18px 0
    }

    .ep-in {
        padding-left: 18px;
        padding-right: 18px
    }

    .ssw-mech {
        grid-template-columns: 1fr 1fr
    }

    .srch-hero {
        padding: 24px 18px 0
    }

    .srch-body {
        padding: 18px 18px 44px
    }

    .srch-filters-in,
    .srch-topbar-in {
        padding: 0 18px
    }

    .srch-card-img-wrap {
        width: 90px
    }

    .srch-card-noimg .srch-card-img-wrap {
        width: 6px
    }

    .hc-rev-box {
        flex-direction: column;
    }

    .hc-rev-divider {
        width: 100%;
        height: 1px;
    }

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

    .b-table {
        font-size: .70rem
    }
}

@media (max-width: 480px) {

    .hero h1,
    .hero .hero-slide-h {
        font-size: 2rem;
        line-height: 1.1;
    }

    .h-slide-label {
        display: none;
    }

    .hero-dots {
        right: 12px;
    }

    .hero-btns {
        flex-direction: column;
        gap: 10px;
    }

    .hero-btns .btn-p,
    .hero-btns .btn-g {
        width: 100%;
        text-align: center;
    }

    .f-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

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

    .cta-btns {
        flex-direction: column;
        align-items: center;
    }

    .hero-btns {
        flex-direction: column;
    }

    .hero-btns a {
        text-align: center;
    }

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

    .btn-ns {
        display: none;
    }

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

    .cta-btns {
        flex-direction: column;
        align-items: center;
    }

    .site-bc-trail {
        gap: 4px;
    }

    .site-bc-link,
    .site-bc-cur {
        font-size: .62rem;
    }

    .ep-grid,
    .ep-grid-2 {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ep-grid .ep-card,
    .ep-grid-2 .ep-card {
        height: 340px;
    }

    .dl-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .dl-card-img {
        height: 110px;
    }

    .et-card-img-wrap {
        height: 180px;
    }

    .tch-h1 {
        font-size: 1.7rem;
    }

    .tch-btns {
        flex-direction: column;
    }

    .tch-btns a {
        width: 100%;
        justify-content: center;
    }

    .hp-fg,
    .hp-bg {
        grid-template-columns: 1fr;
    }

    .hp-cta-btns {
        gap: 8px;
    }

    .tch-h1 {
        font-size: 1.7rem;
    }

    .tch-btns {
        flex-direction: column;
    }

    .tch-btns a {
        width: 100%;
        justify-content: center;
    }

    .az-mg,
    .az-ag {
        grid-template-columns: 1fr;
    }

    .az-cta-btns {
        gap: 8px;
    }

    .tch-h1 {
        font-size: 1.7rem;
    }

    .tch-btns {
        flex-direction: column;
    }

    .tch-btns a {
        width: 100%;
        justify-content: center;
    }

    .hw-fg,
    .hw-bg {
        grid-template-columns: 1fr;
    }

    .hw-gs {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .hw-gth {
        height: 56px;
    }

    .hw-cta-btns {
        gap: 8px;
    }

    .tch-h1 {
        font-size: 1.7rem;
    }

    .tch-btns {
        flex-direction: column;
    }

    .tch-btns a {
        width: 100%;
        justify-content: center;
    }

    .vp-fg {
        grid-template-columns: 1fr;
    }

    .vp-ms {
        grid-template-columns: 1fr;
    }

    .vp-gs {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .vp-gth {
        height: 56px;
    }

    .qcs-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .qcs-card-img {
        height: 120px;
    }

    .tch-h1 {
        font-size: 1.7rem;
    }

    .tch-btns {
        flex-direction: column;
    }

    .tch-btns a {
        justify-content: center;
    }

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

    .tcm-num {
        font-size: 2.2rem;
    }

    .tcsp-cards {
        grid-template-columns: 1fr;
    }

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

    .tcg-th {
        height: 62px;
    }

    .tch-h1 {
        font-size: 1.7rem;
    }

    .tch-btns {
        flex-direction: column;
    }

    .tch-btns a {
        width: 100%;
        justify-content: center;
    }

    .q4-steps {
        grid-template-columns: 1fr;
    }

    .q4-dg {
        grid-template-columns: 1fr;
    }

    .ora-h1 {
        font-size: 1.9rem;
    }

    .ora-hero-btns {
        flex-direction: column;
    }

    .ora-hero-btns a {
        width: 100%;
        justify-content: center;
    }

    .ora-prec-grid {
        grid-template-columns: 1fr;
    }

    .ora-spec-tiles {
        grid-template-columns: 1fr 1fr;
    }

    .ora-spec-rows {
        grid-template-columns: 1fr;
    }

    .ora-spec-row {
        border-right: none;
    }

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

    .ora-gth {
        height: 58px;
    }

    .pw-benefits {
        grid-template-columns: 1fr
    }

    .pw-hero-btns a {
        flex: 1 1 auto;
        justify-content: center;
        text-align: center
    }

    .fn-h1 {
        font-size: 1.5rem;
        line-height: 1.1
    }

    .fn-sub {
        font-size: .82rem
    }

    .fn-hero-btns {
        flex-direction: column;
        gap: 8px
    }

    .fn-hero-btns a {
        width: 100%;
        justify-content: center;
        text-align: center
    }

    .fn-hero-pills {
        gap: 5px
    }

    .fn-pill {
        font-size: .6rem;
        padding: 4px 9px
    }

    .fn-loan-grid {
        grid-template-columns: 1fr
    }

    .fn-loan-card {
        padding: 20px 18px
    }

    .fn-step {
        padding: 22px 18px
    }

    .fn-req-item {
        padding: 14px 13px
    }

    .fn-dl-block {
        padding: 16px 16px
    }

    .fn-banner-in {
        padding: 28px 16px
    }

    .fn-dash-wrap {
        max-height: 200px
    }

    .fn-qr-card img {
        width: 68px;
        height: 68px
    }

    .bl-grid {
        grid-template-columns: 1fr
    }

    .col-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
    }

    .col-card-desc {
        display: none
    }

    .col-card-body {
        padding: 11px 11px 13px;
        gap: 4px
    }

    .col-card-name {
        font-size: .82rem
    }

    .col-card-price {
        margin-top: 3px
    }

    .ei-filt {
        font-size: .66rem;
        padding: 5px 11px
    }

    .ei-vid-grid {
        grid-template-columns: 1fr
    }

    .cl-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .cl-card-desc {
        display: none;
    }

    .cl-feat-img-wrap {
        height: 160px;
    }

    .pd-wrap {
        padding: 20px 16px 32px;
    }

    .pd-tabs-wrap {
        padding: 0 16px 36px;
    }

    .ai-bc-in {
        padding: 0 16px;
    }

    .pd-related-in {
        padding: 0 16px;
    }

    .pd-title {
        font-size: 1.45rem;
        line-height: 1.12;
    }

    .pd-price {
        font-size: 1.4rem;
    }

    .pd-size {
        padding: 8px 14px;
        font-size: .78rem;
    }

    .pd-qty-wrap {
        flex: 0 0 auto;
    }

    .pd-add-btn {
        width: 100%;
        justify-content: center;
        flex: 1 1 100%;
    }

    .pd-tab {
        padding: 10px 14px;
        font-size: .7rem;
    }

    .pd-benefits {
        grid-template-columns: 1fr;
    }

    .pd-benefit {
        padding: 14px 14px;
    }

    .pd-related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* Supplement facts table horizontally scrollable */
    .pd-facts-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pd-facts-table {
        min-width: 480px;
    }

    /* Share buttons */
    .pd-share {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Trust badges — 2-per-row */
    .pd-trust {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .pd-trust-item {
        font-size: .66rem;
    }

    .cart-header {
        padding: 20px 16px 18px;
    }

    .cart-main {
        padding: 16px 16px 40px;
    }

    .cart-img {
        width: 52px;
        height: 52px;
    }

    .cart-pname {
        font-size: .8rem;
    }

    .cart-qty-btn {
        width: 26px;
        height: 30px;
    }

    .cart-qty-val {
        width: 30px;
        font-size: .78rem;
    }

    .cart-sum-total-val {
        font-size: 1.2rem;
    }

    .cart-checkout-btn {
        font-size: .76rem;
        padding: 13px 16px;
    }

    .ssw-faq-wrap {
        padding: 0 18px;
    }

    .hsa-hero-in {
        padding: 26px 18px
    }

    .ep-in {
        padding-left: 18px;
        padding-right: 18px
    }

    .hsa-systems {
        grid-template-columns: 1fr 1fr
    }

    .hsa-stat-strip {
        flex-wrap: wrap;
        gap: 12px
    }

    .ct-hero {
        padding: 22px 18px 20px
    }

    .ct-zone1 {
        padding: 20px 18px 0
    }

    .ct-zone2 {
        padding: 20px 18px 44px
    }

    .ct-faq {
        padding: 0 18px 44px
    }

    .ct-form-wrap {
        padding: 24px 20px
    }

    .addr-main {
        padding: 20px 18px 44px
    }

    .addr-top-in {
        padding: 0 18px
    }

    .od-table th,
    .od-table td {
        padding: 10px 8px;
    }

    .alw-hero-in {
        padding: 24px 18px 0
    }

    .ep-in {
        padding-left: 18px;
        padding-right: 18px
    }

    .alw-gallery {
        grid-template-columns: 1fr 1fr
    }

    .alw-benefits {
        grid-template-columns: 1fr
    }

    .qc-hero-in {
        padding: 26px 18px
    }

    .ep-in {
        padding-left: 18px;
        padding-right: 18px
    }

    .qc-reports-grid {
        grid-template-columns: 1fr 1fr
    }

    .legal-hero {
        padding: 24px 18px 22px
    }

    .pp-bc .ai-bc-in {
        padding: 0 16px
    }

    .legal-main {
        padding: 20px 18px 44px
    }

    .led-hero-in {
        padding: 24px 18px 0
    }

    .ep-in {
        padding-left: 18px;
        padding-right: 18px
    }

    .led-benefits {
        grid-template-columns: 1fr
    }

    .led-gallery {
        grid-template-columns: 1fr 1fr
    }

    .bp-hero {
        padding: 24px 18px 22px
    }

    .ai-bc-in {
        padding: 0 18px
    }

    .bp-layout {
        padding: 22px 18px 44px
    }

    .sh-stat {
        flex: 0 0 100%
    }

    .team-vals-grid {
        grid-template-columns: 1fr 1fr
    }

    .tk-stat {
        flex: 0 0 100%
    }

    .tk-results-grid {
        grid-template-columns: 1fr
    }

    .tk-kit-imgs {
        grid-template-columns: 1fr
    }

    .tk-cta-btns {
        flex-direction: column;
        align-items: center
    }

    .vbx-stat {
        flex: 0 0 100%
    }

    .vbx-waves {
        grid-template-columns: 1fr
    }

    .vbx-cta-btns {
        flex-direction: column;
        align-items: center
    }

    .vbx-gallery-grid {
        grid-template-columns: 1fr 1fr
    }

    .rf-stat {
        flex: 0 0 100%
    }

    .rf-mod-grid {
        grid-template-columns: 1fr
    }

    .rf-cta-btns {
        flex-direction: column;
        align-items: center
    }

    .hc-stat {
        flex: 0 0 100%
    }

    .hc-cta-btns {
        flex-direction: column;
        align-items: center
    }

}

/* ════ LANDSCAPE PHONE only (small height + narrow width) ════ */
@media (max-height: 450px) and (max-width: 900px) and (orientation: landscape) {
    #mob {
        padding: calc(var(--nh) + 8px) 20px 24px;
        column-count: 2;
        column-gap: 24px;
    }

    .mob-top-panel {
        column-span: all;
        gap: 6px;
        margin-bottom: 8px;
    }

    .mob-divider {
        column-span: all;
        margin: 8px 0;
    }

    .mob-sec {
        break-inside: avoid;
    }

    .mob-sec-t {
        font-size: 0.58rem;
        margin-bottom: 6px;
    }

    .mob-sec a {
        padding: 6px 0;
        font-size: 0.8rem;
    }
}

/* ════ TABLET DRAWER (900px+ uses hamburger — make drawer wider/nicer) ════ */
@media (min-width: 600px) and (max-width: 900px) {
    #mob {
        padding: calc(var(--nh) + 22px) 32px 48px;
    }

    .mob-top-panel {
        gap: 12px;
    }

    .mob-action-primary,
    .mob-action-sec {
        font-size: 0.8rem;
        padding: 12px 16px;
    }

    .mob-sec a {
        font-size: 0.95rem;
        padding: 12px 0;
    }

    .mob-sec-t {
        font-size: 0.7rem;
    }

    /* Two columns for nav links on tablet drawer */
    .mob-secs-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 32px;
    }
}

/* ── Very small phones (≤380px) ── */
@media(max-width:380px) {
    .fn-h1 {
        font-size: 1.35rem
    }

    .fn-hero-l,
    .fn-hero-r {
        padding-left: 16px;
        padding-right: 16px
    }

    .fn-qr-card {
        gap: 12px;
        padding: 13px 14px
    }

    .fn-qr-card img {
        width: 56px;
        height: 56px
    }

    .fn-main {
        padding: 24px 16px 36px
    }

    .fn-faq-in {
        padding: 0 16px
    }

    .acct-table th,
    .acct-table td,
    .od-table th,
    .od-table td {
        padding: 10px 5px;
    }
}

@media(max-width:360px) {
    .col-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .pd-wrap {
        padding: 16px 14px 28px;
    }

    .pd-tabs-wrap {
        padding: 0 14px 32px;
    }

    .pd-tab {
        padding: 9px 12px;
        font-size: .67rem;
    }

    .pd-title {
        font-size: 1.3rem;
    }

    .pd-thumb {
        width: 52px;
        height: 52px;
    }

    .pd-thumbs {
        gap: 7px;
    }
}