/* ═══════════════════════════════════
   NAVJIVAN ELECTRONICS — v2 Redesign
   Sphinx HQ-Inspired Design System
   ═══════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
    /* Colors */
    --color--white: #F8F7F2;
    --color--white-200: #F0EFE8;
    --color--black: #0D0D0D;
    --color--text: #1A1A1A;
    --color--text-light: rgba(26, 26, 26, 0.55);
    --color--accent: #00B8A9;
    --color--accent-glow: rgba(0, 184, 169, 0.2);
    --color--gold: #E8A838;
    --color--red: #E85D4A;

    /* Typography */
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans: 'Inter', -apple-system, sans-serif;
    --font-mono: 'Space Mono', 'Courier New', monospace;

    /* Spacing */
    --padding--container: 2.5em;
    --section-pad: clamp(80px, 10vw, 160px);
    --radius: 0.75em;
    --radius-pill: 100px;

    /* Motion */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ── RESET & BASE ── */
html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*,
*:before,
*:after {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

::selection {
    background: var(--color--black);
    color: var(--color--white);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

body {
    font-family: var(--font-sans);
    background: var(--color--white);
    color: var(--color--text);
    cursor: none;
    overflow-x: hidden;
    line-height: 1.7;
}

/* ── Custom Cursor ── */
.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background: var(--color--accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease, opacity 0.3s;
}

.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(0, 184, 169, 0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, opacity 0.3s;
}

.cursor-dot.is--hover {
    transform: translate(-50%, -50%) scale(2.5);
    background: rgba(0, 184, 169, 0.6);
}

.cursor-ring.is--hover {
    width: 50px;
    height: 50px;
    border-color: rgba(0, 184, 169, 0.15);
}

.cursor-dot.is--hidden,
.cursor-ring.is--hidden {
    opacity: 0;
}

/* Hide custom cursor on touch and small devices */
@media (max-width: 991px),
(hover: none) {

    .cursor-dot,
    .cursor-ring {
        display: none;
    }

    body {
        cursor: auto;
    }
}

/* Ensure all interactive elements also hide native cursor */
a,
button,
input,
textarea,
select,
[role="button"],
.process__item--header,
.faq__item--question {
    cursor: none;
}



/* Sphinx vw scaling — 1rem = ~1.11vw on a 1440 base */
@media only screen and (min-width: 992px) {
    body {
        font-size: 1.1111111111vw;
    }
}

@media only screen and (min-width: 2560px) {
    body {
        font-size: 28.44px;
    }
}

@media only screen and (max-width: 991px) {
    body {
        font-size: 1rem;
    }

    :root {
        --padding--container: 1.5em;
    }
}

/* ── CONTAINER (Sphinx pattern) ── */
.c {
    padding-left: var(--padding--container);
    padding-right: var(--padding--container);
    max-width: 90em;
    margin: 0 auto;
}

/* Section base */
.s {
    position: relative;
    padding-top: var(--section-pad);
    padding-bottom: var(--section-pad);
}

.s.is--dark {
    background: var(--color--black);
    color: #fff;
}

.s.is--cream {
    background: var(--color--white-200);
}

/* ── TYPOGRAPHY (Sphinx-style classes) ── */
.text-huge {
    font-family: var(--font-serif);
    font-size: clamp(2.5em, 5vw, 4.5em);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.2em, 4.5vw, 4em);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.8em, 3.5vw, 3em);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.h3 {
    font-family: var(--font-serif);
    font-size: clamp(1.4em, 2.5vw, 2.2em);
    font-weight: 400;
    line-height: 1.2;
}

.h4 {
    font-family: var(--font-serif);
    font-size: clamp(1.2em, 2vw, 1.8em);
    font-weight: 400;
    line-height: 1.3;
}

.text-xlarge {
    font-size: 1.35em;
    line-height: 1.5;
}

.text-large {
    font-size: 1.15em;
    line-height: 1.6;
}

.text-regular {
    font-size: 1em;
    line-height: 1.7;
}

.text-small {
    font-size: 0.875em;
    line-height: 1.6;
}

.text-xsmall {
    font-size: 0.75em;
    line-height: 1.5;
}

.is--mono {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.is--serif {
    font-family: var(--font-serif);
}

.is--light,
.is--opacity-50 {
    opacity: 0.5;
}

.is--regular {
    font-weight: 400;
}

.is--white {
    color: #fff;
}

p {
    text-wrap: pretty;
}

/* ── EYEBROW LABEL (Sphinx pattern) ── */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 1em;
    border: 1px solid rgba(26, 26, 26, 0.15);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 0.7em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 1.5em;
}

.eyebrow.is--dark {
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

/* ── BUTTONS (Sphinx style) ── */
.btn-wrap {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
}

.btn-wrap.is--main-btn .btn-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.85em 1.2em 0.85em 1.6em;
    background: var(--color--black);
    color: #fff;
    border-radius: var(--radius-pill);
    transition: all 0.4s var(--ease);
}

.btn-wrap.is--main-btn:hover .btn-inner {
    background: var(--color--accent);
    color: var(--color--black);
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: all 0.4s var(--ease);
}

.btn-wrap:hover .btn-icon {
    background: var(--color--accent);
    color: var(--color--black);
}

.btn-svg {
    display: flex;
    width: 0.625em;
    height: 0.625em;
}

.btn-inner p {
    font-family: var(--font-mono);
    font-size: 0.8em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
}

/* Ghost button */
.btn-wrap.is--ghost .btn-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.85em 1.6em;
    background: transparent;
    color: var(--color--text);
    border: 1px solid rgba(26, 26, 26, 0.15);
    border-radius: var(--radius-pill);
    transition: all 0.4s var(--ease);
}

.btn-wrap.is--ghost:hover .btn-inner {
    border-color: var(--color--accent);
    color: var(--color--accent);
}

/* ── INFINITY WINDOW PRELOADER ── */
.preloader-infinity {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    /* Let GSAP handle interaction, don't block real DOM behind the mask */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

#infinity-svg {
    position: absolute;
    width: 100vw;
    height: 100vh;
    /* We use scale logic in JS, so transform-origin must be precise */
    transform-origin: center center;
    will-change: transform;
}

.infinity-text {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 8px;
    /* Based on the 0-100 viewBox */
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

/* ── HEADER / NAVBAR (Glassmorphism Floating Pill) ── */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 1em 0;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Compact mode: Sphinx-style width shrink — pill narrows to compact centered capsule */
.navbar.nav--compact {
    padding: 0.4em 0;
}

.navbar.nav--compact .navbar__inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0.45em 1.5em;
    border-radius: 50px;
    background: rgba(13, 13, 13, 0.7);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.navbar.nav--compact .navbar__link {
    font-size: 0.55em;
    gap: 1.5em;
}

.navbar.nav--compact .navbar__menu {
    gap: 1.4em;
}

.navbar.nav--compact .navbar__logo {
    font-size: 0.6em;
    letter-spacing: 0.3em;
}

.navbar.nav--compact .navbar__cta {
    transform: scale(0.8);
}

/* Light mode compact — white narrow pill */
.navbar.nav--light.nav--compact .navbar__inner,
.navbar.scrolled.nav--light.nav--compact .navbar__inner {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(26, 26, 26, 0.06);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

/* Light mode: adapts when over light/cream sections — must override .scrolled */
.navbar.nav--light .navbar__inner,
.navbar.scrolled.nav--light .navbar__inner {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(26, 26, 26, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.navbar.nav--light .navbar__logo,
.navbar.scrolled.nav--light .navbar__logo {
    color: #1a1a1a;
}

.navbar.nav--light .navbar__link,
.navbar.scrolled.nav--light .navbar__link {
    color: rgba(26, 26, 26, 0.7);
}

.navbar.nav--light .navbar__link:hover,
.navbar.scrolled.nav--light .navbar__link:hover {
    color: #1a1a1a;
}

.navbar.nav--light .navbar__m-btn span,
.navbar.scrolled.nav--light .navbar__m-btn span {
    background: #1a1a1a;
}

.navbar.nav--light .navbar__cta .btn-inner,
.navbar.scrolled.nav--light .navbar__cta .btn-inner {
    background: var(--color--text);
    color: #fff;
}

.navbar.nav--light .navbar__cta .btn-inner p,
.navbar.scrolled.nav--light .navbar__cta .btn-inner p {
    color: #fff;
}

.navbar.nav--light .navbar__cta .btn-svg svg path,
.navbar.scrolled.nav--light .navbar__cta .btn-svg svg path {
    stroke: #fff;
}

/* The floating inner pill */
.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    margin: 0 auto;
    padding: 0.7em 1.8em;
    border-radius: 60px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* On scroll — keeps same subtle glass pill as initial state */
.navbar.scrolled .navbar__inner {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

/* On dark sections — same subtle format, no change needed */
.navbar.scrolled:not(.nav--light) .navbar__inner {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Logo */
.navbar__logo {
    font-family: var(--font-mono);
    font-size: 0.7em;
    letter-spacing: 0.4em;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    transition: all 0.4s;
    position: relative;
}

.navbar__logo::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--color--accent), transparent);
    opacity: 0.4;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.navbar__logo:hover::after {
    transform: scaleX(1);
}

.navbar.scrolled .navbar__logo {
    color: #fff;
}

/* Navigation links */
.navbar__menu {
    display: flex;
    align-items: center;
    gap: 2em;
}

.navbar__link {
    font-family: var(--font-mono);
    font-size: 0.65em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    padding: 0.3em 0;
}

/* Glowing dot indicator on hover instead of flat underline */
.navbar__link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color--accent);
    box-shadow: 0 0 8px var(--color--accent);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.navbar__link:hover {
    color: #fff;
}

.navbar__link:hover::after {
    transform: translateX(-50%) scale(1);
}

.navbar.scrolled .navbar__link {
    color: rgba(255, 255, 255, 0.5);
}

.navbar.scrolled .navbar__link:hover {
    color: #fff;
}

/* CTA button in navbar */
.navbar__cta {
    transition: all 0.4s;
}

.navbar.scrolled .navbar__cta .btn-inner {
    background: var(--color--accent);
    color: var(--color--black);
}

/* Mobile menu button */
.navbar__m-btn {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    padding: 0.5em;
    background: none;
    border: none;
}

.navbar__m-btn span {
    display: block;
    width: 1.2em;
    height: 1.5px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s;
}

.navbar.scrolled .navbar__m-btn span {
    background: #fff;
}

@media (max-width: 991px) {

    .navbar__menu,
    .navbar__cta {
        display: none;
    }

    .navbar__m-btn {
        display: flex;
    }

    .navbar__inner {
        border-radius: 40px;
        padding: 0.6em 1.4em;
    }
}

/* \u2500\u2500 MOBILE MENU (Glassmorphism Fullscreen) \u2500\u2500 */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(13, 13, 13, 0.92);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.8em;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu a {
    font-family: var(--font-serif);
    font-size: 2em;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}

.mobile-menu a:hover {
    color: #fff;
    transform: translateX(8px);
}

.mobile-menu a::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color--accent);
    box-shadow: 0 0 12px var(--color--accent);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-menu a:hover::before {
    transform: translateY(-50%) scale(1);
}

.mobile-menu__footer {
    position: absolute;
    bottom: 3em;
    display: flex;
    gap: 2em;
}

.mobile-menu__footer a {
    font-family: var(--font-mono);
    font-size: 0.75em;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.35);
}

.mobile-menu__footer a:hover {
    color: var(--color--accent);
}

.mobile-menu__close {
    position: absolute;
    top: 1.5em;
    right: 1.5em;
    font-family: var(--font-mono);
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding: 0.5em 1.2em;
    cursor: pointer;
    letter-spacing: 0.1em;
    transition: all 0.3s;
}

.mobile-menu__close:hover {
    border-color: var(--color--accent);
    color: var(--color--accent);
}

/* ── HERO ── */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(13, 13, 13, 0.85) 0%,
            rgba(13, 13, 13, 0.5) 50%,
            rgba(0, 184, 169, 0.1) 100%);
}

.hero__content {
    position: relative;
    z-index: 2;
    max-width: 38em;
}

.hero__content .text-xlarge {
    color: var(--color--accent);
    font-family: var(--font-mono);
    font-size: 0.85em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 1em;
}

.hero__content .h1 {
    color: #fff;
    margin-bottom: 0.5em;
}

.hero__content .text-small {
    color: rgba(255, 255, 255, 0.55);
    max-width: 28em;
    margin-bottom: 2.5em;
}

.hero__btns {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
}

.hero__scroll-cue {
    position: absolute;
    bottom: 2.5em;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75em;
    z-index: 2;
}

.hero__scroll-cue span {
    font-family: var(--font-mono);
    font-size: 0.65em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

.hero__scroll-cue .scroll-line {
    width: 1px;
    height: 3em;
    background: linear-gradient(to bottom, var(--color--accent), transparent);
    animation: scrollPulse 2s ease infinite;
}

@keyframes scrollPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scaleY(0.6);
    }

    50% {
        opacity: 1;
        transform: scaleY(1);
    }
}

@media (max-width: 767px) {
    .hero__content {
        padding: 0 1em;
    }

    .hero__scroll-cue {
        display: none;
    }
}

/* ── STATS BAR ── */
.stats-bar {
    position: relative;
    padding: 3.5em 0;
    background: var(--color--bg);
    border-top: 1px solid rgba(26, 26, 26, 0.06);
    border-bottom: 1px solid rgba(26, 26, 26, 0.06);
    overflow: hidden;
}

/* Subtle accent glow line at top */
.stats-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 184, 169, 0.2), transparent);
}

.stats-bar__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.stats-bar__block {
    text-align: center;
    padding: 2em 1.5em;
    position: relative;
    transition: all 0.35s ease;
}

.stats-bar__block:hover {
    background: rgba(0, 184, 169, 0.03);
}

/* Vertical divider between blocks */
.stats-bar__block:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(26, 26, 26, 0.08);
}

/* Icon circle */
.stats-bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    border: 1px solid rgba(0, 184, 169, 0.2);
    background: rgba(0, 184, 169, 0.04);
    color: var(--color--accent);
    font-size: 0.85em;
    margin-bottom: 1em;
    transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.stats-bar__icon i {
    font-weight: 900;
}

.stats-bar__block:hover .stats-bar__icon {
    background: rgba(0, 184, 169, 0.1);
    border-color: rgba(0, 184, 169, 0.35);
    transform: translateY(-2px);
}

/* Numbers */
.stats-bar__num {
    font-family: var(--font-serif);
    font-size: clamp(2.2em, 3.5vw, 3.5em);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color--text);
    margin-bottom: 0.15em;
}

.stats-bar__plus {
    color: var(--color--accent);
    font-weight: 400;
}

/* Labels */
.stats-bar__label {
    font-family: var(--font-mono);
    font-size: 0.6em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color--text-light);
}

@media (max-width: 767px) {
    .stats-bar__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .stats-bar__block::after {
        display: none;
    }

    .stats-bar__block {
        padding: 1.5em 1em;
        border-bottom: 1px solid rgba(26, 26, 26, 0.06);
    }
}

/* ═══ SOLUTION — Immersive Pinned ═══ */
.soln { background: #FAFAF8; }

/* ── Hero Headline ── */
.soln__hero {
    padding: clamp(80px, 10vw, 140px) 0 clamp(40px, 5vw, 60px);
    max-width: 38em;
}

.soln__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.4em 1.1em 0.4em 0.8em;
    border: 1px solid rgba(0,184,169,0.25);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.65em;
    letter-spacing: 0.15em;
    color: var(--color--accent);
    margin-bottom: 2em;
    background: rgba(0,184,169,0.04);
}

.soln__badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color--accent);
    box-shadow: 0 0 8px rgba(0,184,169,0.4);
    animation: badgeBlink 1.5s ease-in-out infinite;
}

.soln__headline {
    font-family: var(--font-serif);
    font-size: clamp(2.2em, 4vw, 3.8em);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color--text);
    margin-bottom: 0.8em;
}

.soln__headline-accent {
    color: var(--color--accent);
    font-style: italic;
    position: relative;
}
.soln__headline-accent::after {
    content: '';
    position: absolute;
    bottom: 0.05em; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, var(--color--accent), transparent);
    opacity: 0.4;
}

.soln__lead {
    font-size: 1em;
    color: var(--color--text-light);
    line-height: 1.7;
    max-width: 28em;
    margin-bottom: 2.5em;
}

/* HUD Data */
.soln__hud-data {
    display: flex; flex-direction: column; gap: 0;
    border-left: 2px solid rgba(0,184,169,0.15);
    padding-left: 1.5em;
}
.soln__hud-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.7em 0;
    border-bottom: 1px solid rgba(26,26,26,0.05);
}
.soln__hud-row:last-child { border-bottom: none; }
.soln__hud-label {
    font-family: var(--font-mono); font-size: 0.6em;
    letter-spacing: 0.12em; color: var(--color--text-light);
}
.soln__hud-val {
    font-family: var(--font-mono); font-size: 0.7em;
    letter-spacing: 0.1em; font-weight: 700; color: var(--color--text);
}
.soln__hud-val--good {
    color: var(--color--accent);
}

/* ── Pinned slides ── */
.soln__pin {
    position: relative; width: 100%; height: 100vh; overflow: hidden;
    display: flex; align-items: center;
    padding: 3em clamp(2em, 5vw, 5em) 3.5em clamp(4em, 8vw, 10em);
}

/* Hero — persistent left side */
.soln__hero {
    position: relative; z-index: 5;
    width: 50%; max-width: 28em;
    flex-shrink: 0;
    padding-right: clamp(2em, 3vw, 3em);
}

/* Slides — right side, stacked */
.soln__slide {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 48%;
    display: flex; align-items: center; justify-content: flex-start;
    opacity: 0; pointer-events: none;
    transition: opacity 0.5s ease;
}
.soln__slide.is--active { opacity: 1; pointer-events: all; }

/* Slide content */
.soln__slide-content {
    max-width: 26em; position: relative; z-index: 2;
    padding: 2em 2em 2em 2.5em;
    background: rgba(250,250,248,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 0 12px 12px 0;
}
/* Animated vertical separator line */
.soln__slide-content::after {
    content: '';
    position: absolute; left: 0; top: 1.5em; bottom: 1.5em;
    width: 2px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(0,184,169,0.25) 20%,
        rgba(0,184,169,0.4) 50%,
        rgba(0,184,169,0.25) 80%,
        transparent
    );
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.6s cubic-bezier(0.22,1,0.36,1) 0.1s;
    box-shadow: 0 0 6px rgba(0,184,169,0.15);
}
.soln__slide.is--active .soln__slide-content::after {
    transform: scaleY(1);
}
/* Top accent dot on the line */
.soln__slide-content::before {
    content: '';
    position: absolute; top: 1.5em; left: -3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color--accent);
    box-shadow: 0 0 8px rgba(0,184,169,0.3);
    opacity: 0;
    transition: opacity 0.4s ease 0.3s;
    z-index: 1;
}
.soln__slide.is--active .soln__slide-content::before {
    opacity: 1;
}

/* Ambient glow blobs */
.soln__glow {
    position: absolute; border-radius: 50%;
    filter: blur(100px); pointer-events: none; z-index: 0;
}
.soln__glow--1 {
    width: 400px; height: 400px;
    background: rgba(0,184,169,0.06);
    top: 10%; right: 15%;
    animation: solnFloat 8s ease-in-out infinite;
}
.soln__glow--2 {
    width: 300px; height: 300px;
    background: rgba(0,184,169,0.04);
    bottom: 15%; left: 40%;
    animation: solnFloat 10s ease-in-out infinite reverse;
}
@keyframes solnFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(20px, -15px); }
}

/* Dot grid pattern */
.soln__dotgrid {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(26,26,26,0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.6;
}

/* Scroll hint */
.soln__scroll-hint {
    position: absolute; bottom: 2em; right: 48%;
    transform: translateX(50%); z-index: 10;
    display: flex; flex-direction: column; align-items: center; gap: 0.5em;
}
.soln__scroll-hint span {
    font-family: var(--font-mono); font-size: 0.45em;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--color--text-light); opacity: 0.5;
}
.soln__scroll-line {
    width: 1px; height: 28px;
    background: linear-gradient(to bottom, var(--color--accent), transparent);
    animation: solnScrollPulse 2s ease-in-out infinite;
}
@keyframes solnScrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50% { opacity: 0.8; transform: scaleY(1.3); }
}

/* Feature checklist */
.soln__features {
    list-style: none; padding: 0; margin: 0 0 1.3em 0;
    display: flex; flex-direction: column; gap: 0.55em;
}
.soln__features li {
    display: flex; align-items: center; gap: 0.6em;
    font-size: 0.78em; line-height: 1.5;
    color: var(--color--text-light);
}
.soln__features i {
    color: var(--color--accent); font-size: 0.6em;
    width: 1.6em; height: 1.6em;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(0,184,169,0.08);
    flex-shrink: 0;
}

.soln__progress {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: rgba(26,26,26,0.04); z-index: 10;
}
.soln__progress-fill {
    height: 100%; width: 0%;
    background: var(--color--accent);
    transition: width 0.1s linear;
}

/* Dots nav */
.soln__dots {
    position: absolute; right: clamp(1.5em, 3vw, 3em); top: 50%;
    transform: translateY(-50%); z-index: 10;
    display: flex; flex-direction: column; gap: 1.2em;
}
.soln__dot {
    width: 2.4em; height: 2.4em; border-radius: 50%;
    border: 1px solid rgba(26,26,26,0.1); background: transparent;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.soln__dot span {
    font-family: var(--font-mono); font-size: 0.45em;
    letter-spacing: 0.05em; font-weight: 700;
    color: rgba(26,26,26,0.3); transition: color 0.4s ease;
}
.soln__dot.is--active {
    border-color: var(--color--accent);
    background: rgba(0,184,169,0.06);
}
.soln__dot.is--active span { color: var(--color--accent); }

/* Inner element transitions — staggered entrance */
.soln__slide .soln__heading,
.soln__slide .soln__desc,
.soln__slide .soln__features,
.soln__slide .soln__tags,
.soln__slide .soln__metric,
.soln__slide .soln__bg-num {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.soln__slide.is--active .soln__heading  { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.soln__slide.is--active .soln__desc     { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.soln__slide.is--active .soln__features { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.soln__slide.is--active .soln__tags     { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.soln__slide.is--active .soln__metric   { opacity: 1; transform: translateY(0); transition-delay: 0.28s; }
.soln__slide.is--active .soln__bg-num   { opacity: 1; transform: translateY(-50%) scale(1); transition-delay: 0s; }

.soln__slide .soln__bg-num { transform: translateY(-50%) scale(0.92); opacity: 0; }

/* Background number */
.soln__bg-num {
    position: absolute;
    left: 50%; top: 50%; transform: translateY(-50%);
    font-family: var(--font-serif); font-size: clamp(10em, 20vw, 18em);
    font-weight: 400; line-height: 1; letter-spacing: -0.05em;
    color: rgba(26,26,26,0.025);
    pointer-events: none; user-select: none;
}

/* Slide typography */
.soln__heading {
    font-family: var(--font-serif);
    font-size: clamp(1.6em, 2.6vw, 2.4em);
    font-weight: 400; line-height: 1.08; letter-spacing: -0.03em;
    margin-bottom: 0.45em;
    position: relative;
    padding-bottom: 0.45em;
}
.soln__heading::after {
    content: '';
    position: absolute; bottom: 0; left: 0;
    width: 2.5em; height: 2px;
    background: linear-gradient(90deg, var(--color--accent), transparent);
    opacity: 0.5;
    transition: width 0.5s ease;
}
.soln__slide.is--active .soln__heading::after { width: 4em; }

.soln__desc {
    font-size: 0.85em; line-height: 1.7;
    color: var(--color--text-light); margin-bottom: 1em;
    max-width: 24em;
}

/* Separator line */
.soln__desc::after {
    content: '';
    display: block;
    width: 100%; height: 1px;
    background: linear-gradient(90deg, rgba(0,184,169,0.1), transparent 70%);
    margin-top: 1em;
}

.soln__tags { display: flex; flex-wrap: wrap; gap: 0.4em; margin-bottom: 1.5em; }
.soln__tag {
    font-family: var(--font-mono); font-size: 0.5em;
    letter-spacing: 0.06em; padding: 0.4em 0.85em;
    border: 1px solid rgba(0,184,169,0.15); border-radius: var(--radius-pill);
    color: var(--color--accent); background: rgba(0,184,169,0.03);
    transition: all 0.3s ease;
}
.soln__tag:hover {
    background: rgba(0,184,169,0.08);
    border-color: rgba(0,184,169,0.3);
    transform: translateY(-1px);
}

/* Metric stat card */
.soln__metric {
    margin-top: 0.5em;
}
.soln__metric-top {
    display: flex; align-items: baseline; gap: 0.3em;
    margin-bottom: 0.6em;
}
.soln__metric-val {
    font-family: var(--font-serif);
    font-size: clamp(2.2em, 3.5vw, 3em);
    font-weight: 400; line-height: 1; letter-spacing: -0.04em;
    color: var(--color--text);
}
.soln__metric-unit {
    font-family: var(--font-mono);
    font-size: 0.55em; font-weight: 700; letter-spacing: 0.12em;
    color: var(--color--accent);
    text-transform: uppercase;
}

/* Animated horizontal bar */
.soln__metric-bar {
    position: relative;
    width: 100%; height: 4px;
    background: rgba(26,26,26,0.05);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.6em;
}
.soln__metric-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color--accent), rgba(0,184,169,0.6));
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.22,1,0.36,1) 0.3s;
    box-shadow: 0 0 8px rgba(0,184,169,0.25);
    position: relative;
}
/* Shine sweep */
.soln__metric-fill::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.4) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: none;
}
.soln__slide.is--active .soln__metric-fill {
    width: var(--fill);
}
.soln__slide.is--active .soln__metric-fill::after {
    animation: metricSweep 1.2s ease 0.8s 1 forwards;
}
@keyframes metricSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.soln__metric-label {
    font-family: var(--font-mono);
    font-size: 0.42em; letter-spacing: 0.1em;
    color: var(--color--text-light);
    text-transform: uppercase;
}

/* Responsive */
@media (max-width: 991px) {
    .soln__pin { flex-direction: column; padding: 2em 1.5em; }
    .soln__hero { width: 100%; max-width: 100%; margin-bottom: 1em; }
    .soln__headline { font-size: 1.8em; }
    .soln__lead { display: none; }
    .soln__hud-data { display: none; }
    .soln__slide { width: 100%; position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 55%; }
    .soln__dots { display: none; }
    .soln__bg-num { font-size: 8em; }
    .soln__metric-val { font-size: 1.8em; }
}

/* ── PROBLEM SECTION — "Holographic Diagnostic HUD" ── */
.prob {
    position: relative;
    padding: clamp(100px, 12vw, 180px) 0 0;
    overflow: hidden;
    background: #050508;
    color: #fff;
}

/* Three.js full-scene canvas */
.prob__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* CRT/Scanline noise overlay */
.prob__noise {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 255, 200, 0.008) 2px,
            rgba(0, 255, 200, 0.008) 4px);
    mix-blend-mode: screen;
}

/* Floating ambient blobs */
.prob__ambient {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
}

.prob__ambient--1 {
    width: 600px;
    height: 600px;
    top: -15%;
    left: -10%;
    background: radial-gradient(circle, rgba(0, 184, 169, 0.1), transparent 70%);
    animation: ambFloat 14s ease-in-out infinite;
}

.prob__ambient--2 {
    width: 400px;
    height: 400px;
    bottom: 5%;
    right: -5%;
    background: radial-gradient(circle, rgba(232, 93, 74, 0.06), transparent 70%);
    animation: ambFloat 18s ease-in-out infinite reverse;
}

@keyframes ambFloat {

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

    33% {
        transform: translate(40px, -30px);
    }

    66% {
        transform: translate(-25px, 20px);
    }
}

/* ═══ LAYOUT ═══ */
.prob__layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 4em;
    align-items: start;
}

/* ═══ LEFT — Headline Block ═══ */
.prob__left {
    position: sticky;
    top: 8em;
    padding-top: 2em;
}

.prob__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.4em 1.1em 0.4em 0.8em;
    border: 1px solid rgba(232, 93, 74, 0.3);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.65em;
    letter-spacing: 0.15em;
    color: var(--color--red);
    margin-bottom: 2em;
    background: rgba(232, 93, 74, 0.05);
}

.prob__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color--red);
    box-shadow: 0 0 8px var(--color--red);
    animation: badgeBlink 1.5s ease-in-out infinite;
}

@keyframes badgeBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }
}

.prob__headline {
    font-family: var(--font-serif);
    font-size: clamp(2.2em, 4vw, 3.8em);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 0.8em;
}

.prob__headline-accent {
    color: var(--color--accent);
    font-style: italic;
    position: relative;
}

.prob__headline-accent::after {
    content: '';
    position: absolute;
    bottom: 0.05em;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--color--accent), transparent);
    opacity: 0.5;
}

.prob__lead {
    font-size: 1em;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.7;
    max-width: 22em;
    margin-bottom: 3em;
}

/* HUD Data Readouts */
.prob__hud-data {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 1px solid rgba(0, 184, 169, 0.15);
    padding-left: 1.5em;
}

.prob__hud-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8em 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.prob__hud-row:last-child {
    border-bottom: none;
}

.prob__hud-label {
    font-family: var(--font-mono);
    font-size: 0.65em;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.3);
}

.prob__hud-val {
    font-family: var(--font-mono);
    font-size: 0.7em;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
}

.prob__hud-val--warn {
    color: var(--color--gold);
    text-shadow: 0 0 8px rgba(232, 168, 56, 0.3);
}

.prob__hud-val--danger {
    color: var(--color--red);
    text-shadow: 0 0 8px rgba(232, 93, 74, 0.3);
}

/* ═══ RIGHT — Holographic Panels ═══ */
.prob__panels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5em;
    perspective: 1200px;
}

/* Individual panel */
.prob__panel {
    position: relative;
    padding: 2em 1.8em 1.6em;
    border-radius: 2px;
    border: 1px solid rgba(0, 184, 169, 0.1);
    background: linear-gradient(160deg, rgba(0, 184, 169, 0.04) 0%, rgba(5, 5, 8, 0.9) 40%, rgba(5, 5, 8, 0.95) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
    will-change: transform;
    cursor: default;
}

/* Staggered depth offset for visual interest */
.prob__panel[data-prob="0"] {
    transform: translateZ(0) translateY(0);
}

.prob__panel[data-prob="1"] {
    transform: translateZ(0) translateY(1.5em);
}

.prob__panel[data-prob="2"] {
    transform: translateZ(0) translateY(-0.5em);
}

.prob__panel[data-prob="3"] {
    transform: translateZ(0) translateY(1em);
}

/* Scanline overlay on each panel */
.prob__panel-scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 3px,
            rgba(0, 184, 169, 0.015) 3px,
            rgba(0, 184, 169, 0.015) 6px);
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.prob__panel:hover .prob__panel-scanline {
    opacity: 1;
}

/* ═══ HUD Corner Brackets ═══ */
.prob__panel-corners {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.prob__panel-corners span {
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: rgba(0, 184, 169, 0.2);
    border-style: solid;
    border-width: 0;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.prob__panel-corners span:nth-child(1) {
    top: -1px;
    left: -1px;
    border-top-width: 1px;
    border-left-width: 1px;
}

.prob__panel-corners span:nth-child(2) {
    top: -1px;
    right: -1px;
    border-top-width: 1px;
    border-right-width: 1px;
}

.prob__panel-corners span:nth-child(3) {
    bottom: -1px;
    left: -1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
}

.prob__panel-corners span:nth-child(4) {
    bottom: -1px;
    right: -1px;
    border-bottom-width: 1px;
    border-right-width: 1px;
}

/* On hover: corners expand and glow */
.prob__panel:hover .prob__panel-corners span {
    width: 24px;
    height: 24px;
    border-color: rgba(0, 184, 169, 0.6);
    filter: drop-shadow(0 0 4px rgba(0, 184, 169, 0.3));
}

/* ═══ Panel Hover ═══ */
.prob__panel:hover {
    border-color: rgba(0, 184, 169, 0.25);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(0, 184, 169, 0.04),
        inset 0 1px 0 rgba(0, 184, 169, 0.08);
}

/* ═══ Panel Content ═══ */
.prob__panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5em;
}

.prob__panel-idx {
    font-family: var(--font-mono);
    font-size: 0.65em;
    color: rgba(255, 255, 255, 0.15);
    letter-spacing: 0.15em;
    font-weight: 700;
}

.prob__panel-status {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--font-mono);
    font-size: 0.55em;
    letter-spacing: 0.12em;
    font-weight: 700;
}

.prob__panel-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    animation: statusBlink 1.2s ease-in-out infinite;
}

.prob__panel-dot--red {
    background: var(--color--red);
    box-shadow: 0 0 6px var(--color--red);
    color: var(--color--red);
}

.prob__panel-dot--amber {
    background: var(--color--gold);
    box-shadow: 0 0 6px var(--color--gold);
    color: var(--color--gold);
}

/* Status text inherits color from dot */
.prob__panel-dot--red+.prob__panel-status,
.prob__panel-dot--red~* {
    color: inherit;
}

.prob__panel-status:has(.prob__panel-dot--red) {
    color: var(--color--red);
}

.prob__panel-status:has(.prob__panel-dot--amber) {
    color: var(--color--gold);
}

@keyframes statusBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* Icon */
.prob__panel-icon {
    font-size: 1.6em;
    color: var(--color--accent);
    margin-bottom: 0.6em;
    opacity: 0.7;
    transition: all 0.4s ease;
    transform: translateZ(15px);
}

.prob__panel:hover .prob__panel-icon {
    opacity: 1;
    transform: translateZ(25px) scale(1.1);
    filter: drop-shadow(0 0 12px rgba(0, 184, 169, 0.3));
}

/* Title */
.prob__panel-title {
    font-family: var(--font-sans);
    font-size: 1.35em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.2;
    margin-bottom: 0.6em;
    transform: translateZ(10px);
}

/* Description */
.prob__panel-desc {
    font-size: 0.82em;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 1.5em;
    transform: translateZ(5px);
    transition: color 0.4s ease;
}

.prob__panel:hover .prob__panel-desc {
    color: rgba(255, 255, 255, 0.55);
}

/* ═══ Severity Bar ═══ */
.prob__panel-bar {
    position: relative;
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: visible;
}

.prob__panel-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--color--accent), var(--color--red));
    box-shadow: 0 0 8px rgba(0, 184, 169, 0.3);
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.prob__panel-bar-fill.is--filled {
    width: var(--bar-width, 0%);
}

.prob__panel-bar-label {
    position: absolute;
    top: -1.6em;
    right: 0;
    font-family: var(--font-mono);
    font-size: 0.55em;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.2);
    font-weight: 700;
}

/* ═══ Bottom Ticker ═══ */
.prob__ticker {
    position: relative;
    z-index: 2;
    margin-top: 5em;
    overflow: hidden;
    border-top: 1px solid rgba(0, 184, 169, 0.08);
    border-bottom: 1px solid rgba(0, 184, 169, 0.08);
    background: rgba(0, 184, 169, 0.02);
    padding: 0.8em 0;
}

.prob__ticker-inner {
    display: flex;
    gap: 4em;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 0.65em;
    letter-spacing: 0.12em;
    color: rgba(0, 184, 169, 0.5);
    font-weight: 700;
    animation: tickerScroll 30s linear infinite;
}

.prob__ticker-inner span {
    flex-shrink: 0;
}

@keyframes tickerScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 991px) {
    .prob__layout {
        grid-template-columns: 1fr;
        gap: 3em;
    }

    .prob__left {
        position: relative;
        top: 0;
    }

    .prob__panels {
        grid-template-columns: repeat(2, 1fr);
    }

    .prob__panel[data-prob="0"],
    .prob__panel[data-prob="1"],
    .prob__panel[data-prob="2"],
    .prob__panel[data-prob="3"] {
        transform: none;
    }
}

@media (max-width: 600px) {
    .prob {
        padding-top: 80px;
    }

    .prob__panels {
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .prob__panel {
        padding: 1.5em 1.3em 1.3em;
    }

    .prob__headline {
        font-size: 1.8em;
    }

    .prob__hud-data {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(0, 184, 169, 0.1);
        padding-top: 1em;
    }

    .prob__ambient {
        display: none;
    }

    .prob__noise {
        display: none;
    }
}


/* ── SERVICES GRID (Sphinx use-case grid) ── */
.services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.06);
}

.services__item {
    padding: 2.5em 2em;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s var(--ease);
}

.services__item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(0, 184, 169, 0.2);
}

.services__item--title {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin-bottom: 1em;
}

.services__item--icon {
    width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color--accent);
    font-size: 1.2em;
}

.services__item--title .text-small {
    color: rgba(255, 255, 255, 0.9);
}

.services__item .text-small:last-child {
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 991px) {
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .services__grid {
        grid-template-columns: 1fr;
    }
}

/* ── PROCESS / HOW IT WORKS (Sphinx accordion) ── */
.process__w {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4em;
    align-items: start;
}

.process__content {
    max-width: 32em;
    margin-bottom: 1.5em;
}

.process__accordion {
    display: flex;
    flex-direction: column;
}

.process__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    overflow: hidden;
    padding: 0.3em 0;
}

.process__item--header {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 1em 0;
    transition: color 0.3s;
}

.process__item--header:hover {
    color: var(--color--accent);
}

.process__item--num {
    font-family: var(--font-mono);
    font-size: 0.7em;
    letter-spacing: 0.1em;
    opacity: 0.4;
    min-width: 2em;
}

.process__item--title {
    font-family: var(--font-serif);
    font-size: 1.3em;
    flex: 1;
}

.process__item--body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s var(--ease);
    padding-left: 3em;
}

.process__item.active .process__item--body {
    max-height: 6em;
}

.process__item--body p {
    padding-bottom: 1em;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85em;
}

.process__item--line {
    height: 2px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    position: relative;
}

.process__item--line-fill {
    width: 0%;
    height: 100%;
    background: var(--color--accent);
    transition: none;
}

.process__item.active .process__item--line-fill {
    width: 100%;
    transition: width var(--process-duration, 4s) linear;
}

.process__left {
    display: flex;
    flex-direction: column;
}

.process__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    position: relative;
}

/* ── Orbital Visualization ── */
.orbit-viz {
    position: relative;
    width: 20em;
    height: 20em;
}

/* Ambient glow */
.orbit-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16em;
    height: 16em;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(0, 184, 169, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
    }
}

/* Orbit rings */
.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.06);
}

.orbit-ring--1 {
    width: 14em;
    height: 14em;
    transform: translate(-50%, -50%);
    animation: spinRing 20s linear infinite;
}

.orbit-ring--2 {
    width: 18em;
    height: 18em;
    transform: translate(-50%, -50%);
    animation: spinRing 30s linear infinite reverse;
    border-color: rgba(0, 184, 169, 0.08);
}

.orbit-ring--3 {
    width: 22em;
    height: 22em;
    transform: translate(-50%, -50%);
    animation: spinRing 40s linear infinite;
    border-color: rgba(232, 168, 56, 0.06);
}

@keyframes spinRing {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Floating particles */
.orbit-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color--accent);
}

.op-1 {
    top: 0;
    left: 50%;
    animation: orbitFloat1 8s linear infinite;
}

.op-2 {
    top: 50%;
    right: -0.5em;
    animation: orbitFloat2 10s linear infinite;
}

.op-3 {
    bottom: 1em;
    left: 2em;
    animation: orbitFloat3 12s linear infinite;
}

.op-4 {
    top: 2em;
    right: 2em;
    background: var(--color--gold);
    animation: orbitFloat1 9s linear infinite reverse;
}

.op-5 {
    bottom: 0;
    left: 50%;
    background: var(--color--gold);
    animation: orbitFloat2 11s linear infinite reverse;
}

.op-6 {
    top: 50%;
    left: -0.5em;
    animation: orbitFloat3 7s linear infinite;
}

@keyframes orbitFloat1 {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.4;
    }

    25% {
        transform: translateY(-8px) scale(1.5);
        opacity: 1;
    }

    50% {
        transform: translateY(0) scale(1);
        opacity: 0.4;
    }

    75% {
        transform: translateY(8px) scale(0.5);
        opacity: 0.2;
    }
}

@keyframes orbitFloat2 {

    0%,
    100% {
        transform: translateX(0) scale(1);
        opacity: 0.3;
    }

    50% {
        transform: translateX(-6px) scale(1.8);
        opacity: 1;
    }
}

@keyframes orbitFloat3 {

    0%,
    100% {
        transform: translate(0, 0) scale(0.8);
        opacity: 0.2;
    }

    33% {
        transform: translate(4px, -4px) scale(1.5);
        opacity: 0.8;
    }

    66% {
        transform: translate(-4px, 4px) scale(1);
        opacity: 0.5;
    }
}

/* SVG progress ring */
.orbit-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14em;
    height: 14em;
    transform: translate(-50%, -50%) rotate(-90deg);
}

.orbit-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 2;
}

.orbit-fill {
    fill: none;
    stroke: var(--color--accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 553;
    stroke-dashoffset: 553;
    transition: stroke-dashoffset 4s linear;
    filter: drop-shadow(0 0 6px rgba(0, 184, 169, 0.4));
}

/* Center icon hub */
.orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5em;
    height: 5em;
    background: rgba(0, 184, 169, 0.08);
    border: 1px solid rgba(0, 184, 169, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 30px rgba(0, 184, 169, 0.1);
}

.orbit-icon {
    position: absolute;
    font-size: 1.5em;
    color: var(--color--accent);
    opacity: 0;
    transform: scale(0.5) rotate(-30deg);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.orbit-icon.is--active {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.orbit-step-label {
    position: absolute;
    bottom: -0.5em;
    font-family: var(--font-mono);
    font-size: 0.5em;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.3);
    white-space: nowrap;
}

.orbit-step-num {
    color: var(--color--accent);
}

/* Floating info chips */
.orbit-chips {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

.orbit-chips.is--active {
    opacity: 1;
}

.orbit-chip {
    position: absolute;
    padding: 0.4em 0.8em;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2em;
    font-family: var(--font-mono);
    font-size: 0.6em;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.orbit-chip i {
    color: var(--color--accent);
    font-size: 0.9em;
}

.chip-top {
    top: -0.5em;
    left: 50%;
    transform: translateX(-50%);
}

.chip-right {
    top: 50%;
    right: -2em;
    transform: translateY(-50%);
}

.chip-bottom {
    bottom: -0.5em;
    left: 50%;
    transform: translateX(-50%);
}

.chip-left {
    top: 50%;
    left: -2em;
    transform: translateY(-50%);
}

/* Chip entrance stagger */
.orbit-chips.is--active .chip-top {
    animation: chipIn 0.5s 0.05s both;
}

.orbit-chips.is--active .chip-right {
    animation: chipIn 0.5s 0.15s both;
}

.orbit-chips.is--active .chip-bottom {
    animation: chipIn 0.5s 0.25s both;
}

.orbit-chips.is--active .chip-left {
    animation: chipIn 0.5s 0.35s both;
}

@keyframes chipIn {
    from {
        opacity: 0;
        transform: translateY(-50%) scale(0.7);
    }

    to {
        opacity: 1;
    }
}

.chip-top {
    animation-name: chipInTop !important;
}

@keyframes chipInTop {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.7);
    }

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

.chip-bottom {
    animation-name: chipInBottom !important;
}

@keyframes chipInBottom {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.7);
    }

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

/* Step title */
.orbit-titles {
    position: absolute;
    bottom: -2.5em;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
}

.orbit-title {
    position: absolute;
    width: 100%;
    left: 0;
    font-family: var(--font-mono);
    font-size: 0.7em;
    letter-spacing: 0.1em;
    color: var(--color--accent);
    opacity: 0;
    transition: opacity 0.4s;
}

.orbit-title.is--active {
    opacity: 0.7;
}

@media (max-width: 991px) {
    .process__w {
        grid-template-columns: 1fr;
    }

    .orbit-viz {
        width: 16em;
        height: 16em;
        margin: 2em auto;
    }
}

/* ── TESTIMONIALS (Sphinx stories) ── */
.testimonials__w {
    position: relative;
}

.testimonials__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 3em;
    flex-wrap: wrap;
    gap: 1em;
}

.testimonials__slider {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
    gap: 1.5em;
}

.testimonials__slide {
    background: var(--color--white);
    border: 1px solid rgba(26, 26, 26, 0.06);
    border-radius: var(--radius);
    padding: 2.5em 2em;
    transition: box-shadow 0.4s;
}

.testimonials__slide:hover {
    box-shadow: 0 1.25em 2em rgba(0, 0, 0, 0.08);
}

.testimonials__slide--header {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: 1.5em;
}

.testimonials__slide--pic {
    width: 3em;
    height: 3em;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color--white-200);
}

.testimonials__slide--client .text-small:last-child {
    opacity: 0.5;
}

.testimonials__slide .text-large {
    font-family: var(--font-serif);
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 1.5em;
}

.testimonials__data {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    padding-top: 1.5em;
    border-top: 1px solid rgba(26, 26, 26, 0.06);
}

.testimonials__data--item .text-huge {
    font-size: 2em;
    color: var(--color--accent);
}

/* ── BRANDS / PARTNERS (Marquee + Grid) ── */
.partners__w {
    text-align: center;
}

/* ── INFINITE MARQUEE ── */
.marquee {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    padding: 2em 0;
}

.marquee__track {
    display: flex;
    width: max-content;
    animation: marqueeScroll 30s linear infinite;
}

.marquee__track:hover {
    animation-play-state: paused;
}

.marquee__list {
    display: flex;
    align-items: center;
    gap: 4em;
    padding-right: 4em;
    flex-shrink: 0;
}

.marquee__item {
    flex-shrink: 0;
    width: 8em;
    height: 4em;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(100%) opacity(0.4);
    transition: filter 0.4s var(--ease), transform 0.4s var(--ease);
}

.marquee__item:hover {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.15);
}

.marquee__item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Static grid for mobile fallback */
.partners__grid {
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 2em;
    padding: 2em 0;
}

.partners__grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    filter: grayscale(100%) opacity(0.4);
    transition: filter 0.4s;
}

.partners__grid-item:hover {
    filter: grayscale(0%) opacity(1);
}

.partners__grid-item img {
    max-width: 6em;
    max-height: 3em;
    object-fit: contain;
}

@media (max-width: 767px) {
    .marquee {
        display: none;
    }

    .partners__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 479px) {
    .partners__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── FAQ ACCORDION ── */
.faq__w {
    max-width: 48em;
    margin: 0 auto;
}

.faq__header {
    text-align: center;
    margin-bottom: 3em;
}

.faq__item {
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}

.faq__item--question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5em 0;
    cursor: pointer;
    font-family: var(--font-serif);
    font-size: 1.15em;
    transition: color 0.3s;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    color: inherit;
}

.faq__item--question:hover {
    color: var(--color--accent);
}

.faq__item--icon {
    font-size: 1.2em;
    transition: transform 0.3s;
    flex-shrink: 0;
    margin-left: 1em;
}

.faq__item.active .faq__item--icon {
    transform: rotate(45deg);
}

.faq__item--answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s var(--ease);
}

.faq__item.active .faq__item--answer {
    max-height: 15em;
}

.faq__item--answer p {
    padding-bottom: 1.5em;
    color: var(--color--text-light);
    line-height: 1.8;
}

/* ── TIPS GRID ── */
.tips__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5em;
}

.tips__card {
    padding: 2em;
    background: var(--color--white);
    border: 1px solid rgba(26, 26, 26, 0.06);
    border-radius: var(--radius);
    transition: all 0.4s var(--ease);
}

.tips__card:hover {
    box-shadow: 0 1em 2.5em rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.tips__card--icon {
    width: 2.5em;
    height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color--accent-glow);
    border-radius: 50%;
    margin-bottom: 1.2em;
    color: var(--color--accent);
    font-size: 1.1em;
}

.tips__card h3 {
    font-family: var(--font-serif);
    font-size: 1.1em;
    margin-bottom: 0.5em;
}

.tips__card p {
    color: var(--color--text-light);
    font-size: 0.85em;
}

@media (max-width: 991px) {
    .tips__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .tips__grid {
        grid-template-columns: 1fr;
    }
}

/* ── CTA / PRE-FOOTER (Sphinx prefooter) ── */
.prefooter {
    position: relative;
    overflow: hidden;
}

.prefooter__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.prefooter__bg canvas {
    width: 100%;
    height: 100%;
}

.prefooter__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3em;
    align-items: center;
}

.prefooter__content .h3 {
    margin-bottom: 0.5em;
}

.prefooter__content .text-small {
    opacity: 0.7;
}

.prefooter__actions {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
}

.prefooter__card {
    flex: 1;
    min-width: 12em;
    padding: 2em;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    text-align: center;
    color: #fff;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75em;
}

.prefooter__card:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--color--accent);
    transform: translateY(-2px);
}

.prefooter__card i {
    font-size: 1.5em;
    color: var(--color--accent);
}

.prefooter__card .text-regular {
    font-family: var(--font-mono);
    font-size: 0.75em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
}

@media (max-width: 991px) {
    .prefooter__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .prefooter__actions {
        justify-content: center;
    }
}

/* ── FOOTER (Sphinx footer) ── */
.footer {
    background: var(--color--black);
    color: rgba(255, 255, 255, 0.7);
    padding: 5em 0 2em;
}

.footer__inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4em;
    padding-bottom: 3em;
}

.footer__left {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.footer__logo-text {
    font-family: var(--font-mono);
    font-size: 0.8em;
    letter-spacing: 0.4em;
    color: #fff;
    font-weight: 700;
}

.footer__left .text-small {
    color: rgba(255, 255, 255, 0.5);
    max-width: 24em;
}

.footer__contact {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.footer__contact a {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-mono);
    font-size: 0.75em;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.3s;
}

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

.footer__right {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
}

.footer__links h4 {
    font-family: var(--font-sans);
    font-size: 0.9em;
    color: #fff;
    margin-bottom: 1em;
}

.footer__links ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.footer__links a {
    font-family: var(--font-mono);
    font-size: 0.7em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.3s;
}

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

.footer__dots {
    margin: 0 auto 2em;
    height: 2px;
    overflow: hidden;
}

.footer__dots svg {
    width: 100%;
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2em;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
    gap: 1em;
}

.footer__bottom .text-small {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8em;
}

.footer__socials {
    display: flex;
    gap: 1.5em;
}

.footer__socials a {
    color: rgba(255, 255, 255, 0.3);
    transition: color 0.3s;
    font-size: 1em;
}

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

@media (max-width: 991px) {
    .footer__inner {
        grid-template-columns: 1fr;
    }

    .footer__right {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .footer__right {
        grid-template-columns: 1fr;
    }
}

/* ── 3D CANVAS (preserved) ── */
.section-3d-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ── GRADIENT CANVAS (Sphinx wave gradient) ── */
.gradient-canvas-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.gr-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.noise-overlay {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    background-size: 128px;
    z-index: 1;
    pointer-events: none;
}

/* ── REVEAL ANIMATIONS ── */
[data-reveal] {
    opacity: 0;
    transform: translateY(2em);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ── SHADOW UTILITY (Sphinx pattern) ── */
[shadow] {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.4s;
}

[shadow]:hover {
    box-shadow: 0 1em 2em rgba(0, 0, 0, 0.08);
}

/* ── STATS ROW (small inline stats) ── */
.stats-row {
    padding: 3em 0;
    border-top: 1px solid rgba(26, 26, 26, 0.06);
}

.stats-row__inner {
    display: flex;
    justify-content: center;
    gap: 4em;
    flex-wrap: wrap;
}

.stats-row__item {
    text-align: center;
}

.stats-row__item .text-huge {
    font-size: 2.5em;
    color: var(--color--accent);
}

/* ── GALLERY / IMAGE ROWS ── */
.gallery__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5em;
    margin-bottom: 1.5em;
}

.gallery__img {
    border-radius: var(--radius);
    overflow: hidden;
    height: 20em;
}

.gallery__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

.gallery__img:hover img {
    transform: scale(1.03);
}

.gallery__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2em;
}

@media (max-width: 767px) {
    .gallery__row {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════
   ENHANCED ANIMATIONS & EFFECTS
   ═══════════════════════════════════ */

/* ── SERVICE CARD HOVER GLOW ── */
.services__item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    opacity: 0;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(0, 184, 169, 0.1) 0%, transparent 60%);
    transition: opacity 0.4s;
    pointer-events: none;
}

.services__item {
    position: relative;
}

.services__item:hover::before {
    opacity: 1;
}

/* ── TESTIMONIAL CARD 3D TILT ── */
.testimonials__slide {
    transition: box-shadow 0.4s, transform 0.4s var(--ease);
    transform-style: preserve-3d;
    perspective: 800px;
}

.testimonials__slide:hover {
    transform: translateY(-4px) rotateX(2deg);
    box-shadow: 0 1.5em 3em rgba(0, 0, 0, 0.1);
}

/* ── TIP CARD 3D ENTRANCE ── */
.tips__card {
    transform-style: preserve-3d;
    perspective: 600px;
}

.tips__card:hover {
    transform: translateY(-4px) rotateY(-2deg) scale(1.02);
}

.tips__card:hover .tips__card--icon {
    transform: scale(1.1) rotate(5deg);
    background: var(--color--accent);
    color: #fff;
}

.tips__card--icon {
    transition: all 0.4s var(--ease-spring);
}



/* ── WORKFLOW NODE HOVER ── */
.wf-node:hover {
    border-color: var(--color--accent);
    transform: translateX(8px);
}

.wf-node.is--danger:hover {
    border-color: var(--color--accent);
    transform: translateX(8px);
}

.wf-node {
    transition: all 0.3s var(--ease);
}

/* ── PROCESS ITEM ACTIVE GLOW ── */
.process__item.active .process__item--header {
    color: var(--color--accent);
}

.process__item--header {
    transition: color 0.3s;
}

.process__item.active .process__item--num {
    opacity: 1;
    color: var(--color--accent);
}

/* ── STATS NUM ACCENT ── */
.stats-bar__num {
    background: linear-gradient(135deg, var(--color--text) 0%, var(--color--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── SCROLL CUE GLOW ── */
.hero__scroll-cue .scroll-line {
    box-shadow: 0 0 8px var(--color--accent-glow);
}

/* ── BUTTON MICRO-ANIMATION ── */
.btn-wrap.is--main-btn .btn-inner {
    transition: all 0.4s var(--ease), transform 0.3s;
}

.btn-wrap.is--main-btn:active .btn-inner {
    transform: scale(0.97);
}

.btn-svg svg {
    transition: transform 0.3s;
}

.btn-wrap:hover .btn-svg svg {
    transform: translateX(2px) translateY(-2px);
}

/* ── EYEBROW ICON DOT ── */
.eyebrow::before {
    content: '';
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: var(--color--accent);
    flex-shrink: 0;
}

.eyebrow.is--dark::before {
    background: var(--color--accent);
}



/* ── FAQ ICON ROTATION ── */
.faq__item--icon {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 1.5em;
    line-height: 1;
    transition: transform 0.4s var(--ease), color 0.3s;
}

.faq__item.active .faq__item--icon {
    transform: rotate(45deg);
    color: var(--color--accent);
}

/* ── PREFOOTER CARD SPARKLE ── */
.prefooter__card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, transparent, var(--color--accent), transparent);
    opacity: 0;
    transition: opacity 0.4s;
    z-index: -1;
}

.prefooter__card {
    position: relative;
    overflow: hidden;
}

.prefooter__card:hover::before {
    opacity: 0.3;
}

/* ── SECTION DIVIDER LINES ── */
.s::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--padding--container);
    right: var(--padding--container);
    height: 0;
}

/* ── FLOATING ANIMATION (for decorative elements) ── */
@keyframes float {

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

    33% {
        transform: translateY(-8px) rotate(1deg);
    }

    66% {
        transform: translateY(4px) rotate(-1deg);
    }
}

/* ── GRADIENT TEXT ── */
.gradient-text {
    background: linear-gradient(135deg, var(--color--accent) 0%, var(--color--gold) 50%, var(--color--accent) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 4s ease-in-out infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }

    100% {
        background-position: 0% center;
    }
}

/* ── SMOOTH SECTION ENTER (parallax feel) ── */
.soln,
.s {
    will-change: transform;
}

/* ── FOOTER LINK HOVER ── */
.footer__links a {
    position: relative;
}

.footer__links a::after {
    content: '→';
    opacity: 0;
    margin-left: 0;
    transition: all 0.3s;
}

.footer__links a:hover::after {
    opacity: 1;
    margin-left: 0.3em;
}

/* ── PRINT / ACCESSIBILITY ── */
@media print {

    .preloader,
    .navbar,
    .mobile-menu,
    .section-3d-canvas,
    .gradient-canvas-wrap {
        display: none !important;
    }
}