/* ============================================================
   Oknus.com — Interactive AI Dark Night Homepage Hero
   Visual Match Pass: layout/mood aligned to
   docs/reference/oknus-hero-concept-v1.png
   Scope: loaded ONLY on the public home page (via $extraHead).
   All selectors are namespaced `.okx-*` so other pages are safe.
   ============================================================ */

.ok-home-shell {
    --okx-bg: #030a12;
    --okx-bg-2: #04101a;
    --okx-bg-3: #060a0e;
    --okx-neon: #29f3af;
    --okx-cyan: #49d9ff;
    --okx-text: #effff8;
    --okx-muted: #99afa8;
    --okx-line: rgba(73, 217, 255, .10);
    --okx-panel: rgba(7, 18, 24, .55);
    --okx-panel-border: rgba(73, 217, 255, .22);
    --okx-display: "Chakra Petch", "Kanit", system-ui, sans-serif;
    --okx-title-font: "Inter", "Kanit", system-ui, sans-serif;
    --okx-ease: cubic-bezier(.22, 1, .36, 1);
    /* octagon tile shape (matches reference hologram tiles) */
    --okx-oct: polygon(28% 0%, 72% 0%, 100% 28%, 100% 72%, 72% 100%, 28% 100%, 0% 72%, 0% 28%);
}

/* ---------- Hero shell ---------- */
.okx-hero {
    position: relative;
    isolation: isolate;
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
    padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(4rem, 6vw, 5.25rem);
    color: var(--okx-text);
    background:
        radial-gradient(90% 75% at 80% 28%, rgba(73, 217, 255, .10), transparent 56%),
        radial-gradient(70% 60% at 6% 20%, rgba(41, 243, 175, .07), transparent 52%),
        linear-gradient(180deg, var(--okx-bg-2) 0%, var(--okx-bg) 55%, var(--okx-bg-3) 100%);
    overflow: hidden;
}

/* text layer sits ABOVE the cinematic visual; pointer-events pass
   through empty areas so the hologram buttons stay clickable */
.okx-hero-inner {
    position: relative;
    z-index: 4;
    width: min(1220px, calc(100% - 2.5rem));
    margin: 0 auto;
    pointer-events: none;
}

.okx-copy {
    max-width: min(26rem, 34vw);
    pointer-events: auto;
}

/* ---------- Background FX layers ---------- */
.okx-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.okx-bg-grid {
    position: absolute;
    inset: -2px;
    background-image:
        linear-gradient(var(--okx-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--okx-line) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(120% 100% at 40% 0%, #000 25%, transparent 76%);
    mask-image: radial-gradient(120% 100% at 40% 0%, #000 25%, transparent 76%);
    animation: okx-grid-drift 26s linear infinite;
}

.okx-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    opacity: .5;
    animation: okx-breathe 10s var(--okx-ease) infinite;
}

.okx-bg-glow.is-1 {
    width: 38rem;
    height: 38rem;
    left: -10rem;
    top: 0;
    background: radial-gradient(circle, rgba(41, 243, 175, .22), transparent 66%);
}

.okx-bg-glow.is-2 {
    width: 36rem;
    height: 36rem;
    right: -8rem;
    bottom: -8rem;
    background: radial-gradient(circle, rgba(73, 217, 255, .22), transparent 66%);
    animation-delay: -5s;
}

.okx-bg-beam {
    position: absolute;
    top: -20%;
    left: 56%;
    width: 44%;
    height: 150%;
    background: linear-gradient(100deg, transparent, rgba(73, 217, 255, .06) 45%, transparent 60%);
    transform: rotate(8deg);
    animation: okx-beam 12s ease-in-out infinite;
}

.okx-bg-scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(0, 0, 0, .15) 3px 4px);
    opacity: .3;
    mix-blend-mode: overlay;
}

.okx-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* ---------- Left column: copy (real HTML for SEO) ---------- */
.okx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--okx-display);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--okx-neon);
}

.okx-eyebrow .okx-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--okx-neon);
    box-shadow: 0 0 10px var(--okx-neon);
    animation: okx-pulse 2.2s ease-in-out infinite;
}

.okx-title {
    font-family: var(--okx-title-font);
    line-height: 1.06;
    letter-spacing: -.015em;
    margin: 1.1rem 0 1.1rem;
    font-size: clamp(2.2rem, 3.2vw, 2.95rem);
    text-transform: uppercase;
    font-weight: 800;
}

.okx-title span {
    display: block;
}

.okx-title .okx-title-soft {
    font-weight: 300;
    color: #d6e6e1;
    letter-spacing: .01em;
}

.okx-neon {
    background: linear-gradient(92deg, var(--okx-neon), #35e8c8 55%, var(--okx-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 18px rgba(41, 243, 175, .38));
}

.okx-lead {
    color: #a9c0b8;
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.95;
    margin: 0 0 2.2rem;
}

.okx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.25rem;
}

.okx-cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--okx-display);
    font-weight: 600;
    font-size: .95rem;
    padding: .82rem 1.45rem;
    border-radius: 10px;
    text-decoration: none;
    transition: transform .25s var(--okx-ease), box-shadow .25s var(--okx-ease), background .25s, border-color .25s;
    will-change: transform;
}

.okx-cta-primary {
    color: #dcfff2;
    background: linear-gradient(165deg, rgba(41, 243, 175, .18), rgba(41, 243, 175, .05));
    border: 1px solid rgba(41, 243, 175, .6);
    box-shadow: 0 0 22px rgba(41, 243, 175, .18), inset 0 0 14px rgba(41, 243, 175, .05);
}

.okx-cta-primary:hover {
    transform: translateY(-3px);
    color: #ecfff8;
    background: linear-gradient(165deg, rgba(41, 243, 175, .3), rgba(41, 243, 175, .1));
    box-shadow: 0 8px 34px rgba(41, 243, 175, .32), inset 0 0 18px rgba(41, 243, 175, .1);
}

.okx-cta-ghost {
    color: var(--okx-text);
    background: rgba(7, 18, 24, .45);
    border: 1px solid rgba(153, 175, 168, .32);
    backdrop-filter: blur(6px);
}

.okx-cta-ghost:hover {
    transform: translateY(-3px);
    border-color: var(--okx-cyan);
    box-shadow: 0 8px 26px rgba(73, 217, 255, .18);
}

.okx-cta:focus-visible,
.okx-scroll-hint:focus-visible {
    outline: 2px solid var(--okx-cyan);
    outline-offset: 3px;
    border-radius: 10px;
}

/* stats — 12+ Projects / 4+ Industries / 24/7 Automation / AI-Native Developer */
.okx-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.1rem clamp(1.3rem, 2.2vw, 2rem);
}

.okx-stat {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.okx-stat-num {
    font-family: var(--okx-display);
    font-weight: 700;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    color: var(--okx-text);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.okx-stat-num .okx-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--okx-neon);
    box-shadow: 0 0 10px var(--okx-neon);
    animation: okx-pulse 2.2s ease-in-out infinite;
}

.okx-stat span {
    font-size: .8rem;
    color: var(--okx-muted);
}

/* desktop: stats row may run wider than the copy column (like the
   reference, where it stretches under the hologram cluster) */
@media (min-width: 992px) {
    .okx-stats {
        min-width: max-content;
        gap: clamp(1.1rem, 2.2vw, 2rem);
    }
}

/* scroll hint — bottom-left like the reference */
.okx-scroll-hint {
    position: absolute;
    left: 0;
    bottom: -2.8rem;
    z-index: 3;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--okx-muted);
    font-family: var(--okx-display);
    font-size: .68rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    text-decoration: none;
}

.okx-scroll-hint .bi {
    font-size: 1rem;
    color: var(--okx-neon);
    animation: okx-bounce 1.9s ease-in-out infinite;
}

.okx-scroll-hint::after {
    content: "";
    width: 3.2rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(73, 217, 255, .6), transparent);
}

/* ---------- Cinematic hero visual — full-height layer on the right ---------- */
/* --okx-avh: rendered height of the person layer — 75–90% of the hero
   per spec (86% default), width-capped so it never collides with copy. */
.okx-hero {
    --okx-avh: min(94%, 82vw);
}

.okx-stage {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 63vw;
    z-index: 3;
    pointer-events: none;
    will-change: transform;
}

/* ---- Layer 1: CSS-built AI Studio backdrop (no image asset) ---- */
.okx-studio {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.okx-screen {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: 1rem 1.1rem;
    border-radius: 10px;
    border: 1px solid rgba(73, 217, 255, .18);
    background: linear-gradient(165deg, rgba(9, 24, 30, .55), rgba(4, 12, 16, .35));
    box-shadow: inset 0 0 30px rgba(73, 217, 255, .06), 0 0 40px rgba(73, 217, 255, .05);
    backdrop-filter: blur(3px);
    font-family: var(--okx-display);
    letter-spacing: .22em;
}

.okx-screen span {
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 700;
    color: rgba(174, 243, 255, .75);
    text-shadow: 0 0 18px rgba(73, 217, 255, .5);
}

.okx-screen em {
    font-style: normal;
    font-size: clamp(.5rem, .6vw, .62rem);
    color: rgba(153, 175, 168, .75);
}

.okx-screen i {
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(41, 243, 175, .5), rgba(73, 217, 255, .12));
}

.okx-screen i:nth-child(4) { width: 82%; }
.okx-screen i:nth-child(5) { width: 58%; }
.okx-screen i:nth-child(6) { width: 70%; }

.okx-screen.is-a {
    right: 1%;
    top: 11%;
    width: clamp(11rem, 17vw, 16rem);
}

/* tucked partially BEHIND the person's lower torso for depth */
.okx-screen.is-b {
    right: 26%;
    bottom: 8%;
    width: clamp(9rem, 13vw, 13rem);
    opacity: .5;
}

.okx-hero.okx-anim .okx-screen span {
    animation: okx-pulse 4.5s ease-in-out infinite;
}

.okx-floor {
    position: absolute;
    right: 0;
    bottom: -4%;
    width: 74%;
    height: 24%;
    background: radial-gradient(50% 50% at 55% 50%, rgba(41, 243, 175, .16), rgba(73, 217, 255, .06) 55%, transparent 75%);
    filter: blur(14px);
}

/* ---- Layer 2: person (transparent PNG/WebP — object-fit:contain,
        nothing is ever cropped). Ring/FX/buttons live inside so they
        track the hand at every viewport size. ---- */
.okx-avatarwrap {
    position: absolute;
    right: .5vw;
    bottom: 0;
    height: var(--okx-avh);
    aspect-ratio: 1201 / 1600;
    z-index: 2;
    will-change: transform;
}

.okx-hero.okx-anim .okx-avatarwrap {
    animation: okx-stage-bob 9s ease-in-out infinite;
}

.okx-avatar {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    border: 0;
    box-shadow: none;
    background: transparent;
    filter: drop-shadow(0 26px 60px rgba(0, 0, 0, .55)) drop-shadow(0 0 70px rgba(73, 217, 255, .14)) saturate(1.04) brightness(1.03) contrast(1.02);
    -webkit-mask-image: linear-gradient(180deg, #000 82%, rgba(0, 0, 0, .3) 100%);
    mask-image: linear-gradient(180deg, #000 82%, rgba(0, 0, 0, .3) 100%);
}

/* ambient atmosphere behind the person: edges dissolve into studio haze
   instead of reading as a cut-out pasted on the background */
.okx-avatarwrap::before {
    content: "";
    position: absolute;
    inset: -6% -14% -2%;
    z-index: -2;
    background:
        radial-gradient(52% 46% at 56% 40%, rgba(73, 217, 255, .12), transparent 72%),
        radial-gradient(60% 34% at 50% 92%, rgba(41, 243, 175, .12), transparent 74%);
    filter: blur(10px);
}

/* ---- Layer 3: hand light FX (pure CSS, separate from the photo) ---- */
.okx-handfx {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.okx-handfx i { position: absolute; }

/* beam sits BEHIND the person (z:-1): it shows through the PNG's
   transparent zone above the palm and is naturally occluded by the body */
.okx-hand-beam {
    left: 31.5%;
    top: 30%;
    height: 39.5%;
    width: 12.5%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent 0, rgba(73, 217, 255, .13) 45%, rgba(41, 243, 175, .26) 100%);
    clip-path: polygon(22% 0, 78% 0, 62% 100%, 38% 100%);
    filter: blur(7px);
    mix-blend-mode: screen;
    z-index: -1;
}

.okx-hand-glow {
    left: 31.5%;
    top: 69.5%;
    width: 30%;
    aspect-ratio: 2.1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(205, 250, 255, .7), rgba(41, 243, 175, .26) 55%, transparent 78%);
    filter: blur(5px);
    mix-blend-mode: screen;
    z-index: 1;
}

.okx-hero.okx-anim .okx-hand-glow {
    animation: okx-pulse 3.2s ease-in-out infinite;
}

.okx-orbit {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* connection lines (palm -> tiles), % of stage */
.okx-links {
    position: absolute;
    inset: 0;
    filter: drop-shadow(0 0 4px rgba(73, 217, 255, .55));
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 1;
}

.okx-links line {
    stroke: url(#okxLineGrad);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 5 7;
    opacity: .68;
    animation: okx-dash 3.4s linear infinite;
}

/* palm ring overlay — sits on the baked light fountain */
.okx-emitter {
    position: absolute;
    left: 31.5%;
    top: 69.5%;
    width: 31%;
    aspect-ratio: 1;
    /* scaleY flattens the rings into a floor-disc under the palm */
    transform: translate(-50%, -50%) scaleY(.42);
    z-index: 2;
    opacity: .92;
}

.okx-emitter i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.okx-ring-1 {
    border: 1.5px solid rgba(140, 240, 255, .6);
    box-shadow: 0 0 34px rgba(73, 217, 255, .4), inset 0 0 24px rgba(73, 217, 255, .2);
    animation: okx-spin 16s linear infinite;
    background: conic-gradient(from 0deg, transparent 0 76%, rgba(150, 242, 255, .8) 88%, transparent 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}

.okx-ring-2 {
    inset: 18%;
    border: 1px dashed rgba(73, 217, 255, .55);
    animation: okx-spin 10s linear infinite reverse;
}

.okx-ring-core {
    inset: 36%;
    background: radial-gradient(circle, rgba(190, 250, 255, .65), rgba(73, 217, 255, 0) 72%);
    animation: okx-pulse 3s ease-in-out infinite;
    transform-origin: center;
}

/* ---------- Hologram buttons (octagon tiles over the baked art) ---------- */
.okx-holo-btn {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    width: 20%;
    aspect-ratio: 1;
    z-index: 4;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto; /* stage layer is pointer-events:none */
}

/* soft dark halo behind each tile: reads as depth shadow and fully
   swallows the baked tile art (incl. its labels, which are wider than
   the octagon's bottom edge and would otherwise ghost through) */
.okx-holo-btn::before {
    content: "";
    position: absolute;
    inset: -16%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(4, 13, 18, .95), rgba(4, 13, 18, .55) 58%, transparent 80%);
    z-index: -1;
}

.okx-holo-inner {
    display: block;
    width: 100%;
    height: 100%;
    clip-path: var(--okx-oct);
    padding: 1.5px;
    background: linear-gradient(155deg, rgba(150, 240, 255, .85), rgba(73, 217, 255, .35) 45%, rgba(41, 243, 175, .6));
    filter: drop-shadow(0 0 12px rgba(73, 217, 255, .3));
    transition: transform .28s var(--okx-ease), filter .28s;
    animation: okx-tile-glow 4.5s ease-in-out infinite;
    animation-delay: calc(var(--i) * -.9s);
}

.okx-holo-glass {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7%;
    width: 100%;
    height: 100%;
    clip-path: var(--okx-oct);
    background: linear-gradient(165deg, rgba(10, 25, 32, .95), rgba(4, 13, 18, .9));
}

.okx-holo-btn .bi {
    font-size: clamp(1.1rem, 2.2vw, 2.1rem);
    line-height: 1;
    color: #aef3ff;
    text-shadow: 0 0 14px rgba(73, 217, 255, .7);
}

.okx-holo-label {
    font-family: var(--okx-display);
    font-weight: 600;
    font-size: clamp(.62rem, 1vw, .9rem);
    letter-spacing: .02em;
    color: var(--okx-text);
    white-space: nowrap;
}

.okx-holo-btn:hover .okx-holo-inner,
.okx-holo-btn:focus-visible .okx-holo-inner {
    transform: scale(1.09);
    filter: drop-shadow(0 0 22px rgba(73, 217, 255, .6));
    animation-play-state: paused;
}

.okx-holo-btn:focus-visible {
    outline: 2px solid var(--okx-cyan);
    outline-offset: 4px;
}

/* ============================================================
   Opening sequence — entrance is GATED behind `.okx-anim`
   (added by JS only when motion is allowed). Without it every
   element stays fully visible. Class names unchanged from P1.
   ============================================================ */
.okx-hero.okx-anim .okx-reveal {
    opacity: 0;
    transform: translateY(18px);
}

.okx-hero.okx-anim.okx-in .okx-reveal {
    animation: okx-rise .8s var(--okx-ease) forwards;
    animation-delay: var(--d, 0s);
}

.okx-hero.okx-anim .okx-holo-btn {
    opacity: 0;
}

.okx-hero.okx-anim.okx-in .okx-holo-btn {
    animation: okx-pop .7s var(--okx-ease) forwards;
    animation-delay: calc(1.5s + var(--i) * .16s);
}

.okx-hero.okx-anim .okx-stage-fx {
    opacity: 0;
}

.okx-hero.okx-anim.okx-in .okx-stage-fx {
    animation: okx-fade 1s ease forwards;
    animation-delay: .9s;
}

/* Safety net: JS adds `.okx-settled` after the sequence so the
   final visible state is guaranteed even if an entrance animation
   never composites. */
.okx-hero.okx-settled .okx-reveal { opacity: 1; transform: none; }
.okx-hero.okx-settled .okx-stage-fx { opacity: 1; }
.okx-hero.okx-settled .okx-holo-btn { opacity: 1; }

/* ---------- Keyframes ---------- */
@keyframes okx-rise {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes okx-fade {
    to { opacity: 1; }
}

@keyframes okx-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
    70% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* mobile pop: no translate offset (buttons are static in a grid) */
@keyframes okx-pop-flat {
    0% { opacity: 0; transform: scale(.85); }
    70% { opacity: 1; transform: scale(1.04); }
    100% { opacity: 1; transform: none; }
}

@keyframes okx-tile-glow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(73, 217, 255, .22)); }
    50% { filter: drop-shadow(0 0 18px rgba(73, 217, 255, .45)); }
}

@keyframes okx-stage-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes okx-spin {
    to { transform: rotate(360deg); }
}

@keyframes okx-pulse {
    0%, 100% { opacity: .55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

@keyframes okx-grid-drift {
    to { background-position: 44px 44px; }
}

@keyframes okx-breathe {
    0%, 100% { opacity: .4; transform: scale(1); }
    50% { opacity: .62; transform: scale(1.07); }
}

@keyframes okx-beam {
    0%, 100% { opacity: .3; transform: translateX(0) rotate(8deg); }
    50% { opacity: .65; transform: translateX(-8%) rotate(8deg); }
}

@keyframes okx-dash {
    to { stroke-dashoffset: -48; }
}

@keyframes okx-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1199.98px) {
    .okx-title { font-size: clamp(2.1rem, 3.5vw, 3rem); }

    .okx-hero { --okx-avh: min(92%, 78vw); }

    .okx-stage { width: 56vw; }

    .okx-avatarwrap { right: .5vw; }

    .okx-copy { max-width: min(23rem, 36vw); }
}

/* ---- Stacked (tablet): avatar block on top, buttons stay overlaid
       around the hand (aspect-ratio wrapper keeps them aligned) ---- */
@media (max-width: 991.98px) {
    .okx-hero {
        flex-direction: column;
        align-items: stretch;
        padding-top: 1.5rem;
        min-height: auto;
    }

    .okx-stage {
        position: relative;
        inset: auto;
        width: 100%;
        pointer-events: auto;
    }

    .okx-avatarwrap {
        position: relative;
        right: auto;
        bottom: auto;
        height: auto;
        width: min(56vw, 23rem);
        margin: 0 auto;
    }

    .okx-screen.is-a { right: 2%; top: 4%; }
    .okx-screen.is-b { right: 60%; bottom: 6%; }

    .okx-floor {
        right: 13%;
        width: 74%;
        bottom: -2%;
    }

    .okx-hero-inner { margin-top: 1rem; }

    .okx-copy { max-width: 36rem; }

    .okx-scroll-hint { display: none; }
}

@media (max-width: 767.98px) {
    .okx-hero { padding-top: 1rem; }

    .okx-stage {
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
    }

    /* wrapper dissolves: avatar + button grid become flow blocks */
    .okx-avatarwrap { display: contents; }

    .okx-avatar {
        width: min(66vw, 19rem);
        height: auto;
        margin: 0 auto;
    }

    .okx-handfx { display: none; }

    .okx-screen { display: none; }

    .okx-floor { display: none; }

    .okx-links,
    .okx-emitter { display: none; }

    .okx-hero-inner { margin-top: .25rem; }

    /* buttons: switch from overlay to a tappable flow grid below the avatar */
    .okx-orbit {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .7rem;
        width: min(100%, 34rem);
        margin: 0 auto;
        padding: 0 1.25rem;
    }

    .okx-holo-btn {
        position: static;
        transform: none;
        width: auto;
        aspect-ratio: auto;
    }

    .okx-holo-btn::before { display: none; }

    .okx-holo-btn:last-child { grid-column: 1 / -1; }

    .okx-holo-inner {
        clip-path: none;
        border-radius: 12px;
        border: 1px solid var(--okx-panel-border);
        background: linear-gradient(165deg, rgba(10, 25, 32, .92), rgba(4, 13, 18, .85));
        padding: 0;
        animation: none;
        filter: none;
    }

    .okx-holo-glass {
        clip-path: none;
        flex-direction: row;
        gap: .6rem;
        padding: .85rem 1rem;
        background: none;
        justify-content: center;
    }

    .okx-holo-btn .bi { font-size: 1.15rem; }
    .okx-holo-label { font-size: .9rem; }

    /* entrance without the desktop translate offset */
    .okx-hero.okx-anim .okx-holo-btn {
        transform: scale(.85);
    }

    .okx-hero.okx-anim.okx-in .okx-holo-btn {
        animation: okx-pop-flat .6s var(--okx-ease) forwards;
        animation-delay: calc(1.2s + var(--i) * .1s);
    }
}

@media (max-width: 420px) {
    .okx-orbit { grid-template-columns: 1fr; }
    .okx-actions .okx-cta { flex: 1 1 auto; justify-content: center; }
    .okx-stats { gap: 1rem 1.4rem; }
}

/* ============================================================
   Reduced motion — kill all ambient/entry motion, show final state
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .okx-hero *,
    .okx-hero *::before,
    .okx-hero *::after {
        animation: none !important;
        transition: none !important;
    }

    /* Safety net: if `.okx-anim` is ever present under reduced motion,
       keep everything visible. */
    .okx-hero .okx-reveal,
    .okx-hero .okx-holo-btn,
    .okx-hero .okx-stage-fx {
        opacity: 1 !important;
    }

    .okx-particles { display: none !important; }
}

/* ============================================================
   Core Services / capability targets (#ai … #real-estate)
   Scroll destinations for the hero hologram buttons.
   ============================================================ */
.okx-caps {
    position: relative;
    z-index: 3;
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    scroll-margin-top: 90px;
}

.okx-caps-inner {
    width: min(1180px, calc(100% - 2.5rem));
    margin: 0 auto;
}

.okx-caps-head {
    text-align: center;
    max-width: 44rem;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.okx-caps-kicker {
    font-family: var(--okx-display);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--okx-cyan);
}

.okx-caps-title {
    font-family: var(--okx-display);
    font-weight: 700;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    color: var(--okx-text);
    margin: .6rem 0 .8rem;
}

.okx-caps-sub {
    color: var(--okx-muted);
    line-height: 1.7;
    margin: 0;
}

.okx-caps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.1rem;
}

.okx-cap-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: 1.6rem;
    border-radius: 16px;
    background: linear-gradient(165deg, rgba(10, 24, 30, .7), rgba(5, 13, 17, .55));
    border: 1px solid var(--okx-panel-border);
    scroll-margin-top: 92px;
    transition: transform .3s var(--okx-ease), border-color .3s, box-shadow .3s;
}

.okx-cap-card:hover,
.okx-cap-card:focus-within {
    transform: translateY(-6px);
    border-color: var(--okx-neon);
    box-shadow: 0 18px 44px rgba(41, 243, 175, .16);
}

.okx-cap-card:target {
    border-color: var(--okx-neon);
    box-shadow: 0 0 0 1px var(--okx-neon), 0 18px 44px rgba(41, 243, 175, .22);
}

.okx-cap-icon {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(73, 217, 255, .1);
    border: 1px solid var(--okx-panel-border);
}

.okx-cap-icon .bi {
    font-size: 1.4rem;
    color: var(--okx-neon);
}

.okx-cap-card h3 {
    font-family: var(--okx-display);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--okx-text);
    margin: 0;
}

.okx-cap-card p {
    color: var(--okx-muted);
    font-size: .92rem;
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

.okx-cap-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--okx-cyan);
    text-decoration: none;
    transition: gap .25s var(--okx-ease);
}

.okx-cap-link:hover { gap: .7rem; }

.okx-cap-link:focus-visible {
    outline: 2px solid var(--okx-cyan);
    outline-offset: 3px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .okx-caps *,
    .okx-caps *::before,
    .okx-caps *::after {
        transition: none !important;
        animation: none !important;
    }
}