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

:root {
    --p: #a078ff;
    --pb: #c4a8ff;
    --pd: rgba(160, 120, 255, 0.15);
    --border-p: rgba(160, 120, 255, 0.25);
    --fg: #f0eee8;
    --fgm: rgba(240, 238, 232, 0.5);
    --fgd: rgba(240, 238, 232, 0.25);
    --b: rgba(255, 255, 255, 0.07);
		--s: #e8b86d;
		--sb: #f0cc9a;
		--sd: rgba(232, 184, 109, 0.15);
		--border-s: rgba(232, 184, 109, 0.25);
}

html {
    scroll-behavior: smooth
}

/* Every section on the home page sets its own explicit background —
   #top-hero is intentionally dark and declares that itself; everything
   else lives inside #zr-home, which declares its own white background —
   so nothing on this page actually depends on body itself being dark.
   Leaving it dark only meant anything outside #zr-home's box (like the
   sitewide footer template, rendered after it in the DOM) sat on an
   unstyled black background instead of white. */
body {
    background: #ffffff;
    color: var(--fg);
    font-family: 'Inter', system-ui, sans-serif;
    overflow-x: hidden;
}

#cglow {
    position: fixed;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    background: radial-gradient(circle, rgba(160, 120, 255, 0.07) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: left .08s, top .08s
}

#cdot {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(180, 140, 255, 0.95);
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: left .02s, top .02s;
    box-shadow: 0 0 10px rgba(160, 120, 255, 0.7)
}

#top-hero {
    position: relative;
    min-height: 74vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    background: #0a0a12 url('images/background.png') center/cover no-repeat;
    padding: 76px 24px 40px
}

#top-hero .vid-frame {
    /* No longer painted at all — #case-rotate-canvas now covers the
       whole hero directly (so the mist can drift across the full
       section) and draws the case at a fixed size, centered, in JS.
       This div is kept only as an invisible flex spacer so the badge
       and shop button keep the same vertical gap they always had
       around where the case renders. */
    position: static;
    pointer-events: none;
    background: none;
    border: none;
    box-shadow: none;
    height: 450px;
    width: 450px
}

#st-title {
    /* Centered on the hero regardless of where the badge/case/button flex
       stack lands — sits behind the case (z-index 1 vs. 2) and in front
       of the background image, per the example reference. Staggered
       across two lines: "Kagami" sits on the top line ending at dead
       center, "Wireless" sits one line down starting at dead center —
       the case sits in the seam between the two, over both lines. */
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 1;
    box-sizing: border-box;
    padding: 0 clamp(20px, 5vw, 64px);
    color: #fff;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
    /* Sized off the longer word ("Wireless") so it always clears the
       section's padding rather than running off-screen — the vw factor
       here is deliberately smaller than a naive full-width headline
       would use, since each word only gets half the line to fill. */
    font-size: clamp(40px, 12vw, 170px);
    white-space: nowrap;
    pointer-events: none
}

#st-title-l {
    display: block;
    width: 50%;
    text-align: right;
    padding-right: .12em
}

#st-title-r {
    display: block;
    width: 50%;
    margin-left: 50%;
    text-align: left;
    padding-left: .12em
}

#st-badge {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(160, 120, 255, 0.22);
    border: 1px solid rgba(160, 120, 255, 0.6);
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 11px;
    letter-spacing: .12em;
    color: #fff;
    text-transform: uppercase;
    margin-top: 16px;
    margin-bottom: -8px;
    box-shadow: 0 0 16px rgba(160, 120, 255, 0.25)
}


@keyframes blink {
    0%, 100% { opacity: 1 }
    50% { opacity: .2 }
}

#st-shop {
    position: relative;
    z-index: 3;
    display: inline-block;
    margin-top: 0;
    padding: 14px 40px;
    border-radius: 28px;
    background: #a078ff;
    border: 1px solid rgba(160, 120, 255, 0.8);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .08em;
    cursor: pointer;
    transition: background .2s, box-shadow .2s, transform .2s;
    box-shadow: 0 0 32px rgba(160, 120, 255, 0.45)
}

/* hover-only: avoid stuck hover state on touch */
@media (hover: hover) and (pointer: fine) {
    #st-shop:hover {
        background: #b890ff;
        box-shadow: 0 0 48px rgba(160, 120, 255, 0.65);
        transform: translateY(-2px)
    }
}


@keyframes bob {
    0%, 100% { transform: translateX(-50%) translateY(0) }
    50% { transform: translateX(-50%) translateY(6px) }
}


.sec-label {
    font-size: clamp(11px, 1vw, 12px);
    letter-spacing: .16em;
    color: rgba(160, 120, 255, .9);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 14px
}

.sec-title {
    font-size: clamp(36px, 5vw, 58px);
    font-weight: 300;
    text-align: center;
    letter-spacing: -.02em;
    margin-bottom: 12px
}

.sec-sub {
    font-size: clamp(15px, 1.4vw, 18px);
    color: var(--fgm);
    text-align: center;
    max-width: 520px;
    margin: 0 auto 64px;
    line-height: 1.7
}

#rotating-sec {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
    align-items: center;
    padding: 120px 64px
}

.vid-frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(160, 120, 255, 0.2);
    background: #0c0c18;
    box-shadow: 0 0 80px rgba(160, 120, 255, 0.08), 0 40px 80px rgba(0,0,0,0.4);
    aspect-ratio: 16 / 9;
    height: auto
}

.vid-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block
}

#case-rotate-canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
    cursor: ew-resize
}

.vid-inner-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 30%, rgba(160, 120, 255, 0.05) 0%, transparent 60%);
    pointer-events: none
}

.feature-list {
    display: flex;
    flex-direction: column
}

.fi {
    padding: 20px 0;
    border-bottom: .5px solid var(--b);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: padding-left .2s;
    cursor: default
}

.fi:hover {
    padding-left: 8px
}

.fi-ic {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    background: rgba(160, 120, 255, 0.1);
    border: 1px solid var(--border-p);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px
}

.fi-t {
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 600;
    color: var(--fg);
    margin-bottom: 5px
}

.fi-b {
    font-size: clamp(13px, 1.2vw, 16px);
    color: var(--fgm);
    line-height: 1.6
}

/* ── FLIP CARDS with images ── */
.flip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 14px;
    row-gap: 80px;
    padding-bottom: 20px;
    perspective: 2000px;
    perspective-origin: 50% 50%
}

.fcard {
    height: 100%;
    cursor: pointer;
    position: relative;
    z-index: 1
}

.fcard:hover {
    z-index: 10
}

.fcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .65s cubic-bezier(.4, 0, .2, 1)
}

/* hover-only flip trigger — touch devices use the JS .fcard.flipped class instead */
@media (hover: hover) and (pointer: fine) {
    .fcard:hover .fcard-inner {
        transform: rotateY(180deg)
    }
}

/* Tap-to-flip. Deliberately NOT wrapped in a media query: .flipped is only ever
   added by index.js, which already gates on input capability. This rule used to
   live inside the max-width:768px block, so tablets (769-1024px) had no flip
   trigger at all — the hover rule above excludes them for being touch, and this
   rule excluded them for being too wide. */
.fcard.flipped .fcard-inner {
    transform: rotateY(180deg)
}

.ffront,
.fback {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    border: .5px solid var(--b);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden
}

.ffront {
    background: rgba(14, 14, 24, 0.95);
    display: flex;
    flex-direction: column;
    position: relative
}

.ffront-top {
    padding: 20px 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.fnum {
    font-size: clamp(28px, 2.8vw, 42px);
    font-weight: 200;
    color: rgba(160, 120, 255, .22);
    line-height: 1
}


.fcard-img {
    flex: 1;
    overflow: hidden;
    position: relative;
    margin: 10px 0
}

.fcard-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease
}

.fcard:hover .fcard-img img {
    transform: scale(1.04)
}

.ffront-bottom {
    padding: 12px 20px 16px
}

.ftitle {
    font-size: clamp(17px, 1.8vw, 21px);
    font-weight: 500;
    color: var(--fg);
    margin-bottom: 2px
}

.fhint {
    font-size: clamp(13px, 1.2vw, 15px);
    color: var(--fgd);
    letter-spacing: .06em
}

.fback {
    background: rgba(160, 120, 255, 0.07);
    border-color: var(--border-p);
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px;
    -webkit-transform: rotateY(180deg)
}

.fb-tag {
    font-size: clamp(16px, 1.5vw, 19px);
    letter-spacing: .12em;
    color: var(--pb);
    text-transform: uppercase;
    margin-bottom: 10px
}

.fb-body {
    font-size: clamp(16px, 1.6vw, 20px);
    color: rgba(240, 238, 232, .65);
    line-height: 1.5
}

.fb-stat {
    margin-top: 14px;
    font-size: clamp(28px, 2.8vw, 40px);
    font-weight: 700;
    color: var(--zh-accent)
}

.fb-stat span {
    font-size: clamp(16px, 1.4vw, 19px);
    color: var(--fgm);
    font-weight: 400
}

.decon-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
    padding: 100px 64px
}

.decon-vid {
    position: relative;
    aspect-ratio: 16 / 9;
    height: auto
}

.decon-vid video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 24px;
    display: block;
    background: #0c0c18;
    box-shadow: 0 0 80px rgba(160, 120, 255, 0.08), 0 40px 80px rgba(0,0,0,0.4)
}

.decon-border {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    border: 1px solid rgba(160, 120, 255, 0.2);
    pointer-events: none
}


#compare-sec {
    padding: 100px 48px;
    background: linear-gradient(180deg, transparent, rgba(160, 120, 255, 0.025), transparent)
}

.cwrap {
    overflow-x: auto
}

.ctable {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(14px, 1.15vw, 15px)
}

.ctable th {
    padding: 14px 20px;
    text-align: left;
    font-size: clamp(12px, 0.95vw, 13px);
    letter-spacing: .12em;
    font-weight: 500;
    color: var(--fgd);
    text-transform: uppercase;
    border-bottom: .5px solid var(--b)
}

.ctable th.hl {
    color: var(--pb)
}

.ctable td {
    padding: 15px 20px;
    border-bottom: .5px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
    color: var(--fgm)
}

.ctable tr:last-child td {
    border-bottom: none
}

.ctable td:first-child {
    color: var(--fgd);
    font-size: clamp(12px, 1vw, 13px);
    letter-spacing: .04em
}

.ctable thead th:nth-child(2) {
    background: rgba(160, 120, 255, 0.07)
}

.ctable tbody td:nth-child(2) {
    background: rgba(160, 120, 255, 0.04);
    color: var(--fg);
    font-weight: 500
}

.ctable tbody td:nth-child(2).good {
    color: var(--pb)
}

#cta-sec {
    padding: 100px 64px;
    position: relative;
    overflow: hidden;
    text-align: left
}

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

.cta-left {
    display: flex;
    flex-direction: column
}

.cta-left .sec-label {
    text-align: left;
    margin-bottom: 10px
}

.cta-left .sec-sub {
    max-width: none
}

.cta-right {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    height: 480px;
    border: 1px solid rgba(160, 120, 255, 0.2);
    box-shadow: 0 0 80px rgba(160, 120, 255, 0.08), 0 40px 80px rgba(0,0,0,0.4)
}

.cta-right video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.cta-vid-border {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    border: 1px solid rgba(160, 120, 255, 0.2);
    pointer-events: none
}

.cnote {
    margin-top: 18px;
    font-size: clamp(11px, 0.9vw, 13px);
    color: var(--fgd);
    text-align: center;
    letter-spacing: .04em
}

#ks-sec {
    padding: 80px 64px
}

.ks-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center
}

.ks-img-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: .5px solid var(--b)
}

.ks-img-wrap img {
    width: 100%;
    display: block;
    border-radius: 20px
}

.ks-funded-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 6px 14px;
    border-radius: 20px;
    text-transform: uppercase
}


.ks-stats {
    display: flex;
    flex-direction: column
}

.ks-stat-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 22px 0;
    border-bottom: .5px solid var(--b)
}

.ks-stat-row:first-child {
    padding-top: 0
}

.ks-stat-row:last-child {
    border-bottom: none
}

.ks-num {
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 200;
    color: var(--fg);
    line-height: 1;
    white-space: nowrap
}

.ks-num .unit {
    font-size: clamp(14px, 1.3vw, 18px);
    color: var(--p);
    font-weight: 400
}

.ks-desc-main {
    font-size: clamp(14px, 1.2vw, 16px);
    color: var(--fg);
    font-weight: 500;
    margin-bottom: 2px
}

.ks-desc-sub {
    font-size: clamp(11px, 0.95vw, 13px);
    color: var(--fgd);
    letter-spacing: .04em
}

.ks-quote {
    margin-top: 32px;
    padding: 20px 24px;
    background: rgba(160, 120, 255, 0.05);
    border: .5px solid rgba(160, 120, 255, 0.18);
    border-left: 2px solid var(--p);
    border-radius: 0 12px 12px 0
}

.ks-quote p {
    font-size: clamp(13px, 1.1vw, 15px);
    color: var(--fgm);
    line-height: 1.7;
    font-style: italic
}

.ks-quote cite {
    display: block;
    margin-top: 10px;
    font-size: clamp(10px, 0.9vw, 12px);
    color: var(--pb);
    letter-spacing: .08em;
    font-style: normal;
    text-transform: uppercase
}

#media-sec {
    padding: 100px 0 80px;
    position: relative
}

#media-sec .sec-pad {
    padding: 0 48px
}

#vc-wrap {
    position: relative;
    width: 100%;
    height: 540px;
    overflow: hidden;
    background: #08080f;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 48px;
    cursor: grab;
    user-select: none
}

#vc-wrap:active {
    cursor: grabbing
}

#vc-wrap:focus {
    outline: none
}

#vc-track {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible
}

/* hover-only: avoid stuck hover state on touch */
@media (hover: hover) and (pointer: fine) {
	.vc-btn:hover{
		background:var(--p);
	}
}

.vc-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 340px;
    height: 440px;
    margin-left: -170px;
    margin-top: -220px;
    border-radius: 24px;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    cursor: pointer;
    will-change: transform, opacity;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .4s ease, border-color .4s ease
}

.vc-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    display: block
}

.vc-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 8, 15, 0.1) 0%, rgba(8, 8, 15, 0.9) 100%)
}

.vc-card-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 28px 24px;
    text-align: center;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none
}

.vc-card.active .vc-card-content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto
}

.vc-outlet {
    font-size: 10px;
    letter-spacing: .18em;
    color: var(--pb);
    text-transform: uppercase;
    margin-bottom: 8px
}

.vc-headline {
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: 500;
    color: var(--fg);
    margin-bottom: 10px;
    line-height: 1.2;
    letter-spacing: -.01em
}

.vc-text {
    font-size: clamp(12px, 1vw, 14px);
    color: rgba(240, 238, 232, 0.6);
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.vc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #08080f;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background .2s
}

#vc-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 28px
}

.vc-dot {
    height: 7px;
    border-radius: 999px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: rgba(160, 120, 255, 0.28);
    transition: width .4s cubic-bezier(.4, 0, .2, 1), background .4s
}

.vc-dot.active {
    background: var(--p);
    width: 20px
}

.vc-dot:not(.active) {
    width: 7px
}

#cta-sec {
    padding: 120px 48px;
    text-align: center;
    position: relative;
    overflow: hidden
}


.compare-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 48px 48px 80px;
    background: linear-gradient(180deg, transparent, rgba(160, 120, 255, 0.025), transparent)
}

.compare-cta-sub {
    font-size: clamp(15px, 3.2vw, 26px);
    letter-spacing: .1em;
    color: var(--sb);
    text-transform: uppercase;
    text-align: center;
    padding: 0 16px
}

.compare-cta .btn-p {
    padding: 16px 48px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .06em
}

@media (hover: hover) and (pointer: fine) {
    .compare-cta .btn-p:hover {
        background: var(--p);
        color: #fff;
        border-color: var(--p);
        transform: translateY(-2px)
    }
	
    .btn-p:hover {
        background: var(--p);
        color: #fff;
        border-color: var(--p);
        transform: translateY(-2px)
    }
}

@keyframes pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1) }
    50% { transform: translate(-50%, -50%) scale(1.12) }
}

.cta-price {
    font-size: clamp(52px, 6vw, 80px);
    font-weight: 200;
    line-height: 1;
    margin: 20px 0 4px;
    text-align: left
}

.cta-price sup {
    font-size: 22px;
    vertical-align: super;
    color: var(--fgm);
    font-weight: 400
}

.cta-psub {
    font-size: clamp(11px, 0.9vw, 13px);
    letter-spacing: .12em;
    color: var(--fgd);
    text-transform: uppercase;
    margin-bottom: 36px;
    text-align: left
}

.btn-row {
    display: flex;
    gap: 12px;
    justify-content: center
}

button {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none
}

.btn-p {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(160, 120, 255, 0.14);
    border: .5px solid rgba(160, 120, 255, 0.4);
    color: var(--pb);
    padding: 14px 40px;
    border-radius: 28px;
    font-size: 14px;
    cursor: pointer;
    letter-spacing: .04em;
    transition: background .2s ease-out, color .2s ease-out, border-color .2s ease-out, transform .2s ease-out
}

/* .btn-p:hover moved into the @media (hover:hover) and (pointer:fine) block above
   so touch devices don't get stuck in a "hovered" state */


@media (hover: hover) and (pointer: fine) {
    
}

section {
    padding: 100px 48px
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s cubic-bezier(0.23, 1, 0.32, 1), transform .5s cubic-bezier(0.23, 1, 0.32, 1)
}

.reveal.vis {
    opacity: 1;
    transform: none
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        transform: none;
        transition: opacity .3s ease
    }
}

/* ── GOOGLE REVIEWS SECTION ── */
#reviews-sec {
    padding: 100px 48px;
    position: relative
}

.gr-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 56px
}

.gr-google-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fgm);
    letter-spacing: .06em
}

.gr-google-logo svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0
}

.gr-rating-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: .5px solid var(--b);
    border-radius: 999px
}

.gr-score {
    font-size: 22px;
    font-weight: 200;
    color: var(--fg)
}

.gr-stars-row {
    display: flex;
    gap: 2px
}

.gr-star {
    color: #fbbc05;
    font-size: 14px;
    line-height: 1
}

.gr-count {
    font-size: 12px;
    color: var(--fgd);
    letter-spacing: .04em
}

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

.gr-card {
    background: rgba(14, 14, 24, 0.9);
    border: .5px solid var(--b);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), border-color .3s ease-out;
    position: relative;
    overflow: hidden
}

.gr-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 0%, rgba(160, 120, 255, 0.04) 0%, transparent 60%);
    pointer-events: none
}

@media (hover: hover) and (pointer: fine) {
    .gr-card:hover {
        border-color: rgba(160, 120, 255, 0.35);
        transform: translateY(-4px);
        box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 32px rgba(160, 120, 255, 0.08)
    }
}

.gr-card-top {
    display: flex;
    align-items: center;
    gap: 12px
}

.gr-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--b);
    background: rgba(160, 120, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--pb)
}

.gr-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.gr-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--fg);
    margin-bottom: 2px
}

.gr-meta {
    font-size: 11px;
    color: var(--fgd);
    letter-spacing: .04em
}

.gr-stars {
    display: flex;
    gap: 2px;
    margin-top: 2px
}

.gr-stars .gr-star {
    font-size: 12px
}

.gr-body {
    font-size: clamp(13px, 1.1vw, 15px);
    color: var(--fgm);
    line-height: 1.65;
    flex: 1
}

.gr-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: .5px solid var(--b)
}

.gr-verified {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: var(--fgd);
    letter-spacing: .06em
}

.gr-verified-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4ade80
}

.gr-img-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(160, 120, 255, 0.06);
    border: .5px dashed rgba(160, 120, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fgd);
    font-size: 11px;
    letter-spacing: .08em
}

.gr-img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px
}

.gr-cta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 48px;
    gap: 12px
}

.gr-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 28px;
    border-radius: 999px;
    border: .5px solid rgba(160, 120, 255, 0.3);
    background: rgba(160, 120, 255, 0.07);
    color: var(--pb);
    font-size: 13px;
    letter-spacing: .06em;
    text-decoration: none;
    transition: background .2s ease-out, border-color .2s ease-out
}

@media (hover: hover) and (pointer: fine) {
    .gr-link:hover {
        background: rgba(160, 120, 255, 0.14);
        border-color: rgba(160, 120, 255, 0.5)
    }
		.btn-p:hover {
        background: var(--p);
        color: #fff;
        border-color: var(--p)
    }
}


/* ── MOBILE  ≤ 768px ── */
@media (max-width: 768px) {
	 #reviews-sec { padding: 60px 20px }
    .gr-grid { grid-template-columns: 1fr; gap: 12px }

    /* stack logo above the rating pill so the stars + count never overflow / mis-wrap */
    .gr-header {
        flex-direction: column;
        gap: 14px;
        margin-bottom: 40px;
    }
    .gr-rating-summary {
        flex-shrink: 0;
        justify-content: center;
    }
    .gr-stars-row {
        flex-shrink: 0;
        white-space: nowrap;
    }
  /* 4 stat items as a clean 2x2 grid so they never collide or wrap unevenly */
  

  

  

  

  #top-hero {
    min-height: 46vh;
    padding: 92px 20px 44px;
  }

  #top-hero .vid-frame {
    height: 300px;
    width: 300px;
  }

  #st-title {
    padding: 0 16px;
    font-size: clamp(28px, 11vw, 70px);
  }

  #rotating-sec {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 20px;
  }

  .vid-frame {
    height: auto;
  }

  section {
    padding: 60px 20px;
  }

  .sec-title {
    font-size: clamp(28px, 8vw, 40px);
  }

  .sec-sub {
    font-size: 15px;
    margin-bottom: 40px;
  }

  .flip-grid {
    grid-template-columns: 1fr;
    row-gap: 20px;
    perspective: 1200px;
  }

  .fcard {
    height: 100%;
  }

  /* Disable hover flip on mobile — tap via JS instead */
  .fcard:hover .fcard-inner {
    transform: none;
  }

  .fcard-inner {
    transition: transform .65s cubic-bezier(.4, 0, .2, 1);
  }

  /* NOTE: do not set .ffront{position:absolute} here. .fcard is height:100% with an
     auto-sized grid row, so the in-flow front face is what gives the row its height.
     Making it absolute takes the last in-flow child out, the row computes to 0px and
     the cards collapse to nothing. Verified on the live page. */

  

  .decon-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 20px;
  }

  .decon-layout > div:first-child {
    order: 2;
  }

  .decon-vid {
    order: 1;
    height: auto;
  }

  #compare-sec {
    padding: 60px 16px;
  }

  .ctable {
    font-size: 13px;
    min-width: 540px;
  }

  .ctable th,
  .ctable td {
    padding: 11px 12px;
  }

  .ks-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  #ks-sec {
    padding: 60px 20px;
  }

  .ks-num {
    font-size: 28px;
  }

  .ks-img-wrap img {
    max-height: 240px;
    object-fit: cover;
  }

  #media-sec {
    padding: 60px 0 40px;
  }

  #media-sec .sec-pad {
    padding: 0 20px;
  }

  #vc-wrap {
    height: 420px;
  }

  .vc-card {
    width: 280px;
    height: 360px;
    margin-left: -140px;
    margin-top: -180px;
  }

  #cta-sec {
    padding: 80px 20px;
  }

  .cta-price {
    font-size: 52px;
  }
	
	 #cta-sec { padding: 60px 20px }

    .cta-grid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .cta-right { height: 280px }

    #cta-sec .btn-row { justify-content: center }
    #cta-sec .sec-title,
    #cta-sec .sec-sub { text-align: center !important }
    #cta-sec .sec-label { text-align: center }
    .cta-price { text-align: center }
    .cta-psub { text-align: center }

  .btn-row {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .btn-p {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }

}


/* ── TABLET  769px – 1024px ── */
@media (min-width: 769px) and (max-width: 1024px) {

  /* base 96px gap is too wide near 769px — tighten so 4 stats stay on one row / clean 2x2 */
  

  #rotating-sec {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 80px 32px;
  }

  #top-hero {
    padding: 120px 32px 60px;
  }

  .vid-frame {
    height: auto;
  }

  #top-hero .vid-frame {
    width: 400px;
  }

  .flip-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }

  .fcard {
    height: 100%;
  }

  /* NOTE: same as the mobile block — .ffront must stay in flow (position:relative)
     or this height:100% card collapses to a 0px grid row. */

  .decon-layout {
    gap: 40px;
    padding: 60px 32px;
  }

  .decon-vid {
    height: auto;
  }

  #ks-sec {
    padding: 60px 32px;
  }

  .ks-layout {
    gap: 40px;
  }

  section {
    padding: 80px 32px;
  }

  #compare-sec {
    padding: 80px 32px;
  }
	
	.gr-grid { grid-template-columns: repeat(2, 1fr) }

	#cta-sec { padding: 80px 32px }
    .cta-grid { gap: 40px }
    .cta-right { height: 380px }
}


/* ── SMALL PHONES 320px – 430px (extra tightening on top of the ≤768 block) ── */
@media (max-width: 430px) {
  #st-badge {
    font-size: 12px;
    padding: 6px 12px;
    margin-bottom: 16px;
  }

  #st-title {
    padding: 0 12px;
    font-size: clamp(24px, 11vw, 70px);
  }

  #top-hero .vid-frame {
    height: 180px;
    width: 180px;
  }

  /* keep the 2x2 stat grid tight and centered on very small screens */
  

  

  

  

  .sec-title {
    font-size: clamp(26px, 9vw, 34px);
  }

  .ctable {
    min-width: 480px;
  }

  .cta-price {
    font-size: 42px;
  }

  .compare-cta-sub {
    font-size: clamp(14px, 4.2vw, 18px);
  }

  .compare-cta .btn-p {
    padding: 14px 32px;
    font-size: 15px;
  }

  #vc-wrap {
    height: 380px;
  }

  .vc-card {
    width: 250px;
    height: 320px;
    margin-left: -125px;
    margin-top: -160px;
  }
}


/* ── SMALL DESKTOP / DEAD ZONE 1025px – 1280px ── */
@media (min-width: 1025px) and (max-width: 1280px) {
  /* 96px base gap is too wide right above the tablet breakpoint — tighten */
  

  section {
    padding: 90px 40px;
  }

  #rotating-sec {
    padding: 100px 40px;
    gap: 56px;
  }

  #top-hero {
    padding: 140px 40px 70px;
    gap: 56px;
  }

  .decon-layout {
    padding: 90px 40px;
    gap: 56px;
  }

  #ks-sec {
    padding: 70px 40px;
  }

  .ks-layout {
    gap: 56px;
  }

  #compare-sec {
    padding: 90px 40px;
  }

  #cta-sec {
    padding: 100px 40px;
  }

  .cta-grid {
    gap: 56px;
  }
}


/* ════════════════════════════════════════════════════════════════
   ZEREST HOME — white minimalist redesign, index.html ONLY.
   Everything below targets #zr-home (the wrapper now around all of
   index.html's markup) or IDs/classes that exist exclusively on the
   homepage (verified via grep — none of them appear in contact.html,
   manual.html, privacy.html, refund.html, shipping.html, terms.html).
   The shared bare-tag rules above (:root, body, nav, footer, .btn-p,
   .reveal, .sec-label, .sec-title, .sec-sub, section padding)
   are left untouched so every other page keeps rendering exactly as
   it did before this pass. (.btn-g itself was removed in a later pass
   — unused sitewide, superseded by .btn-g-home.)
   ════════════════════════════════════════════════════════════════ */

/* The WP page template wraps every page's content in #primary/#main
   (100px vertical + 48px horizontal padding) and .wp-block-columns
   (a 66.66%-width flex column, ~20px horizontal padding) — leftover
   Gutenberg block structure from how these pages were originally
   authored in the block editor, meant for ordinary readable text
   content. It boxes in every zerest page's full-bleed design (leaking
   the dark body background down both sides, doubling up each page's
   own top padding on top of #primary/#main's own, and — since the
   column only ever fills 66.66% of the row instead of 100% — pushing
   the whole page left instead of centering it).
   home.css is only ever enqueued on pages that contain one of the
   zerest_* shortcodes (see functions.php), so it's safe to reset this
   unconditionally here rather than needing a per-page opt-in — every
   page that loads this stylesheet is a zerest page, not an ordinary
   WP content page that might have a real multi-column layout. */
#primary,
#main,
.wp-block-columns {
    padding: 0;
}

.wp-block-columns {
    display: block;
}

.wp-block-columns > .wp-block-column {
    /* Overriding an inline style="flex-basis:66.66%" left on the column
       from the original Gutenberg block — a plain class rule can't beat
       an inline style regardless of specificity, only !important can. */
    flex-basis: auto !important;
    width: 100% !important;
}

@font-face {
    font-family: 'Outfit';
    src: url('fonts/outfit.woff2') format('woff2');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

#zr-home {
    --zh-bg: #ffffff;
    --zh-bg-soft: #f4f5f7;
    --zh-ink: #12141a;
    --zh-ink-mid: rgba(18, 20, 26, .62);
    --zh-ink-soft: rgba(18, 20, 26, .42);
    --zh-ink-faint: rgba(18, 20, 26, .16);
    --zh-line: rgba(18, 20, 26, .10);
    --zh-accent: #2c3ef0;
    --zh-accent-hover: #212fc7;
    --zh-accent-soft: rgba(44, 62, 240, .07);
    --zh-accent-soft2: rgba(44, 62, 240, .13);
    --zh-accent-border: rgba(44, 62, 240, .28);
    --zh-r-md: 16px;

    background: var(--zh-bg);
    color: var(--zh-ink);
    font-family: 'Outfit', system-ui, sans-serif;
    min-height: 100vh;
    isolation: isolate;
}

#zr-home * { font-family: inherit }

/* hero — full-bleed image background, kept dark regardless of the light
   theme elsewhere on the page so the white title and drop-shadowed case
   stay legible against it (see the example reference this was built from) */
#case-rotate-canvas { filter: drop-shadow(0 30px 70px rgba(0, 0, 0, .5)) }

#st-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 12px;
    letter-spacing: .08em;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: -8px;
    box-shadow: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px)
}

#st-shop {
    background: var(--zh-accent);
    border: 1px solid var(--zh-accent);
    color: #fff;
    box-shadow: 0 16px 40px rgba(44, 62, 240, .28)
}
/* !important needed — Seedlet's generic button:not(.has-background):hover
   rule otherwise outranks this on specificity (see .ncta:hover in
   header-content.php for the full explanation). */
@media (hover: hover) and (pointer: fine) {
    #st-shop:hover { background: var(--zh-accent-hover) !important; box-shadow: 0 20px 48px rgba(44, 62, 240, .4); color: #fff !important; }
}

/* quick specs strip (replaces the old overlaid #scrub-stats) */
#quickspecs-sec { padding: 56px 48px; border-bottom: 1px solid var(--zh-line) }
.qs-row { display: flex; justify-content: center; gap: 96px; max-width: 1400px; margin: 0 auto }
.qs { text-align: center }
.qs-val { font-size: clamp(28px, 3vw, 40px); font-weight: 600; line-height: 1; color: var(--zh-ink) }
.qs-val b { font-size: clamp(14px, 1.4vw, 18px); color: var(--zh-accent); font-weight: 600 }
.qs-lbl { font-size: 12px; letter-spacing: .1em; color: var(--zh-ink-mid); text-transform: uppercase; margin-top: 8px }

/* home-only heading variants (kept separate from the shared .sec-label/.sec-title/.sec-sub used by other pages) */
.sec-label-home {
    font-size: 12px;
    letter-spacing: .16em;
    color: var(--zh-accent);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 14px
}
.sec-title-home {
    font-size: clamp(32px, 4.2vw, 48px);
    font-weight: 600;
    text-align: center;
    letter-spacing: -.02em;
    margin-bottom: 12px;
    color: var(--zh-ink)
}
.sec-sub-home {
    font-size: clamp(15px, 1.4vw, 18px);
    color: var(--zh-ink-mid);
    text-align: center;
    max-width: 520px;
    margin: 0 auto 64px;
    line-height: 1.7
}

/* rotating / built-to-stay */
#rotating-sec { background: var(--zh-bg) }
.vid-frame { border: 1px solid var(--zh-line); background: var(--zh-bg-soft); box-shadow: 0 30px 70px rgba(18, 20, 26, .10) }
.vid-inner-glow { background: none }

.fi { border-bottom: 1px solid var(--zh-line) }
.fi-ic { background: var(--zh-accent-soft); border: 1px solid var(--zh-accent-border); color: var(--zh-accent) }
.fi-ic svg { width: 20px; height: 20px; fill: currentColor }
.fi-t { color: var(--zh-ink) }
.fi-b { color: var(--zh-ink-mid) }

/* features / flip cards */
#features-sec { background: var(--zh-bg-soft) }
.ffront { background: #fff; border: 1px solid var(--zh-line) }
.fnum { color: var(--zh-ink-faint) }
.ftitle { color: var(--zh-ink) }
.fhint { color: var(--zh-ink-soft) }
.fback { background: var(--zh-accent-soft); border-color: var(--zh-accent-border) }
.fb-tag { color: var(--zh-accent) }
.fb-body { color: var(--zh-ink-mid) }
.fb-stat { color: var(--zh-accent); font-weight: 700 }
.fb-stat span { color: var(--zh-ink-soft) }

/* spec grid (deconstruct) — replaces the bordered spec-rows list */
#deconstruct-sec { background: var(--zh-bg) }
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px }
.spc {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--zh-line);
    border-radius: var(--zh-r-md);
    background: var(--zh-bg-soft)
}
.spc-k { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--zh-ink-soft) }
.spc-v { font-size: clamp(16px, 1.6vw, 18px); font-weight: 600; color: var(--zh-ink) }
.spc-v.ac { color: var(--zh-accent) }

/* Driver / Battery / Bluetooth read as key specs (blue accent); the
   4-Mic ENC Array entry stays neutral ink. Markup order in
   #deconstruct-sec .spec-grid is: 1 Driver, 2 Weight, 3 Battery,
   4 Microphones (4-mic ENC array), 5 Water resistance, 6 Bluetooth,
   7 Ear tips, 8 Colors — Driver/Bluetooth already carry .spc-v.ac in
   the HTML, Battery does not, and Microphones incorrectly does, so
   fix both here without touching the markup. */
.spec-grid .spc:nth-child(1) .spc-k,
.spec-grid .spc:nth-child(3) .spc-k,
.spec-grid .spc:nth-child(6) .spc-k { color: var(--zh-accent) }
.spec-grid .spc:nth-child(3) .spc-v { color: var(--zh-accent) }
.spec-grid .spc:nth-child(4) .spc-v.ac { color: var(--zh-ink) }
.decon-vid video { border: none; box-shadow: 0 30px 70px rgba(18, 20, 26, .10); background: var(--zh-bg-soft) }
.decon-border { border: 1px solid var(--zh-line) }

/* curved 3D panoramic hero slider (lifestyle / model shots) */
#gallery-sec { background: var(--zh-bg) }
#panorama-wrap {
    position: relative;
    height: 440px;
    max-width: 1160px;
    margin: 56px auto 0;
    perspective: 1800px;
    overflow: hidden;
    cursor: grab
}
#panorama-wrap::before,
#panorama-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16%;
    z-index: 50;
    pointer-events: none
}
#panorama-wrap::before { left: 0; background: linear-gradient(90deg, var(--zh-bg), transparent) }
#panorama-wrap::after  { right: 0; background: linear-gradient(270deg, var(--zh-bg), transparent) }

#panorama-track {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d
}
.panorama-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 420px;
    height: 260px;
    margin: -130px 0 0 -210px;
    border-radius: var(--zh-r-lg);
    overflow: hidden;
    border: 1px solid var(--zh-line);
    background: var(--zh-bg-soft);
    box-shadow: 0 30px 70px rgba(18, 20, 26, .16);
    cursor: pointer;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform
}
.panorama-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none
}
.panorama-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 20%, var(--zh-accent-soft2), transparent 60%), var(--zh-bg-soft)
}
.panorama-placeholder span {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--zh-ink-faint)
}
#panorama-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 28px
}
.panorama-dot {
    height: 7px;
    border-radius: 999px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: var(--zh-accent-soft2);
    transition: width .4s cubic-bezier(.4, 0, .2, 1), background .4s
}
.panorama-dot.active { background: var(--zh-accent); width: 20px }
.panorama-dot:not(.active) { width: 7px }

@media (max-width: 768px) {
    #panorama-wrap { height: 300px; margin-top: 40px }
    .panorama-card { width: 280px; height: 184px; margin: -92px 0 0 -140px; border-radius: var(--zh-r-md) }
}

/* compare table */
#compare-sec { background: var(--zh-bg-soft) }
.ctable th { color: var(--zh-ink-soft); border-bottom: 1px solid var(--zh-line) }
.ctable th.hl { color: var(--zh-accent) }
.ctable td { color: var(--zh-ink-mid); border-bottom: 1px solid var(--zh-line) }
.ctable td:first-child { color: var(--zh-ink-soft) }
.ctable thead th:nth-child(2) { background: var(--zh-accent-soft) }
.ctable tbody td:nth-child(2) { background: var(--zh-accent-soft); color: var(--zh-ink) }
.ctable tbody td:nth-child(2).good { color: var(--zh-accent) }
.cnote { color: var(--zh-ink-soft) }

.compare-cta { background: var(--zh-bg) }
.compare-cta-sub { color: var(--zh-ink) }
.btn-p-home {
    -webkit-appearance: none;
    appearance: none;
    background: var(--zh-accent);
    border: 1px solid var(--zh-accent);
    color: #fff;
    padding: 16px 48px;
    border-radius: 999px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform .2s, background .2s
}
/* !important needed for the compare-cta instance of this button, which
   (unlike the final-CTA one) doesn't carry has-background, so it's
   otherwise caught by Seedlet's button:not(.has-background):hover rule. */
@media (hover: hover) and (pointer: fine) {
    .btn-p-home:hover { background: var(--zh-accent-hover) !important; color: #fff !important; transform: translateY(-2px) }
}

/* kickstarter */
#ks-sec { background: var(--zh-bg) }
.ks-img-wrap { border: 1px solid var(--zh-line) }

.ks-stat-row { border-bottom: 1px solid var(--zh-line) }
.ks-num { color: var(--zh-ink) }
.ks-num .unit { color: var(--zh-accent) }
.ks-desc-main { color: var(--zh-ink) }
.ks-desc-sub { color: var(--zh-ink-soft) }
.ks-quote { background: var(--zh-accent-soft); border: 1px solid var(--zh-accent-border); border-left: 2px solid var(--zh-accent) }
.ks-quote p { color: var(--zh-ink-mid); font-style: normal }
.ks-quote cite { color: var(--zh-accent) }

/* press carousel */
#media-sec { background: var(--zh-bg-soft) }
#vc-wrap { background: var(--zh-bg-soft) }
.vc-card { border-color: rgba(18, 20, 26, .10) }
.vc-card-overlay { background: linear-gradient(180deg, rgba(18, 20, 26, 0) 0%, rgba(18, 20, 26, .82) 100%) }
.vc-outlet { color: var(--zh-accent) }
.vc-headline { color: #fff }
.vc-text { color: rgba(255, 255, 255, .75) }
.vc-btn { background: #fff; color: var(--zh-ink) }
@media (hover: hover) and (pointer: fine) {
    .vc-btn:hover { background: var(--zh-accent); color: #fff }
}
.vc-dot { background: var(--zh-accent-soft2) }
.vc-dot.active { background: var(--zh-accent) }

/* reviews */
#reviews-sec { background: var(--zh-bg) }
.gr-google-logo { color: var(--zh-ink-mid) }
.gr-rating-summary { background: var(--zh-bg-soft); border: 1px solid var(--zh-line) }
.gr-score { color: var(--zh-ink) }
.gr-count { color: var(--zh-ink-soft) }
.gr-card { background: #fff; border: 1px solid var(--zh-line) }
.gr-card::before { display: none }
@media (hover: hover) and (pointer: fine) {
    .gr-card:hover { border-color: var(--zh-accent-border); transform: translateY(-4px); box-shadow: 0 20px 50px rgba(18, 20, 26, .10) }
}
.gr-avatar { background: var(--zh-accent-soft); border: 1px solid var(--zh-line); color: var(--zh-accent) }
.gr-name { color: var(--zh-ink) }
.gr-meta { color: var(--zh-ink-soft) }
.gr-body { color: var(--zh-ink-mid) }
.gr-footer { border-top: 1px solid var(--zh-line) }
.gr-verified { color: var(--zh-ink-soft) }
.gr-link { border: 1px solid var(--zh-accent-border); background: var(--zh-accent-soft); color: var(--zh-accent) }
@media (hover: hover) and (pointer: fine) {
    .gr-link:hover { background: var(--zh-accent-soft2); border-color: var(--zh-accent) }
}

/* final CTA */
#cta-sec { background: var(--zh-bg-soft) }

.cta-price { color: var(--zh-ink) }
.cta-price sup { color: var(--zh-ink-soft) }
.cta-psub { color: var(--zh-ink-soft) }
.cta-right { border: 1px solid var(--zh-line); box-shadow: 0 30px 70px rgba(18, 20, 26, .10) }
.cta-vid-border { border: 1px solid var(--zh-line) }
.btn-g-home {
    background: transparent;
    border: 1px solid var(--zh-line);
    color: var(--zh-ink-mid);
    padding: 14px 40px;
    border-radius: 999px;
    font-size: 14px;
    cursor: pointer;
    letter-spacing: .02em;
    transition: border-color .2s ease, color .2s ease;
    -webkit-appearance: none;
    appearance: none
}
@media (hover: hover) and (pointer: fine) {
    .btn-g-home:hover { border-color: var(--zh-accent); color: var(--zh-ink) }
}

/* keep fixed-nav from covering the top of anchor-jumped sections */
#features-sec, #deconstruct-sec, #compare-sec, #media-sec { scroll-margin-top: 84px }

/* mobile */
@media (max-width: 768px) {
    .qs-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 28px; max-width: 420px; margin: 0 auto }
    #quickspecs-sec { padding: 40px 20px }
    .spec-grid { grid-template-columns: 1fr }
    .sec-title-home { font-size: clamp(28px, 8vw, 40px) }
    .sec-sub-home { font-size: 15px; margin-bottom: 40px }
}


/* ── SHORT / LANDSCAPE VIEWPORTS — keep hero badge, H1 and bottom stats from colliding ── */
@media (max-height: 600px) {
  #st-badge {
    padding: 5px 12px;
    font-size: 10px;
    margin-bottom: 10px;
  }

  #st-title {
    font-size: clamp(26px, 9vw, 70px);
  }

  #top-hero .vid-frame {
    height: 260px;
    width: 260px;
  }

  #st-shop {
    margin-top: 12px;
    padding: 8px 26px;
    font-size: 12px;
  }
  
}

/* ── UNIFORM 10% LEFT/RIGHT PADDING — every home section except the hero.
   Scoped to min-width:769px only — mobile (≤768px) keeps its original,
   already-tightened per-breakpoint padding (e.g. `section{padding:60px 20px}`)
   as-is, per explicit request. Desktop/tablet/small-desktop all pick this
   up since it's placed after those breakpoints' own rules and !important.
   Top/bottom padding for each section is untouched. #media-sec's own
   horizontal padding is zeroed since .sec-pad already carries the
   section's l/r padding for its heading/subhead; #vc-wrap inherits the
   section's new 10% via its own l/r margin below so the carousel stays
   inset to match. ── */
@media (min-width: 769px) {
    #quickspecs-sec,
    #rotating-sec,
    #features-sec,
    .decon-layout,
    #gallery-sec,
    #compare-sec,
    .compare-cta,
    #ks-sec,
    #reviews-sec,
    #cta-sec {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }

    #media-sec {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #media-sec .sec-pad {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }
    #media-sec #vc-wrap,
    #media-sec #vc-dots {
        margin-left: 10% !important;
        margin-right: 10% !important;
        width: auto !important;
    }
}