/* ============================================================
   Oknus.com home — particle scene layout (assets/js/home-scene.js)
   html.okp-live    WebGL scene running: sections go transparent
   html.okp-static  no scene: CSS backdrop + text wordmark instead
   html.okp-motion  motion allowed: fade-up reveals + screenshot tilt
   ============================================================ */

.okp-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s ease;
}
html.okp-live .okp-canvas { opacity: 1; }
html.okp-static .okp-canvas { display: none; }

body.ok-home-shell .ok-home { position: relative; z-index: 1; }

/* Let the scene show through: the page keeps one deep backdrop behind the canvas. */
html body.ok-home-shell {
    background:
        radial-gradient(60% 50% at 50% 32%, rgba(32, 231, 168, .07), transparent 70%),
        radial-gradient(50% 40% at 80% 80%, rgba(79, 215, 255, .05), transparent 70%),
        #05070b fixed;
}
html.okp-live body.ok-home-shell .ok-home,
html.okp-live body.ok-home-shell .okx-hero,
html.okp-static body.ok-home-shell .okx-hero {
    background: transparent !important;
}
html.okp-live body.ok-home-shell .ok-home {
    background-image:
        linear-gradient(rgba(79, 215, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 215, 255, .025) 1px, transparent 1px) !important;
    background-size: 34px 34px, 34px 34px !important;
}

/* ---------- Hero: the particle wordmark fills the upper half ---------- */
.okx-hero.okp-hero {
    min-height: 100vh;
    min-height: 100svh;
    align-items: flex-end;
    padding: 0 0 clamp(2.5rem, 7vh, 5rem);
    overflow: visible;
}
.okp-hero .okx-hero-inner { text-align: center; }
.okp-hero .okx-copy {
    max-width: 46rem;
    margin: 0 auto;
}
.okp-hero .okx-eyebrow { justify-content: center; }
.okp-hero .okx-title {
    font-size: clamp(1.5rem, 3.2vw, 2.5rem);
    line-height: 1.12;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 .45em;
}
.okp-hero .okx-title span { display: inline; }
.okp-hero .okx-lead { margin-left: auto; margin-right: auto; max-width: 40rem; }
.okp-hero .okx-actions,
.okp-hero .okx-stats { justify-content: center; }
.okp-hero .okx-scroll-hint { left: 50%; transform: translateX(-50%); }

/* Static fallback wordmark (only when the scene is not running). */
.okp-wordmark {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 16vh;
    text-align: center;
    font: 700 clamp(4rem, 17vw, 13rem)/1 "Chakra Petch", "Bai Jamjuree", sans-serif;
    letter-spacing: .04em;
    background: linear-gradient(120deg, #20e7a8, #4fd7ff 60%, #e9fffb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 40px rgba(32, 231, 168, .25));
    pointer-events: none;
}
html.okp-static .okp-wordmark { display: block; }

/* ---------- Work sections ---------- */
.okp-work {
    position: relative;
    padding: 46vh 0 clamp(4rem, 9vw, 7.5rem);
    scroll-margin-top: 80px;
    color: var(--ok-home-text, #f5f7fb);
}
.okp-work-inner {
    width: min(1180px, calc(100% - 2.5rem));
    margin: 0 auto;
}
.okp-work-head {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto clamp(2rem, 4vw, 3.25rem);
}
.okp-kicker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font: 600 .78rem/1 "Chakra Petch", ui-monospace, monospace;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #20e7a8;
    margin-bottom: 1rem;
}
.okp-kicker::before {
    content: "";
    width: 26px;
    height: 1px;
    background: currentColor;
    opacity: .7;
}
.okp-work-title {
    font-size: clamp(1.9rem, 4.4vw, 3.4rem);
    font-weight: 700;
    line-height: 1.16;
    margin: 0 0 1rem;
    color: #f5f7fb;
}
.okp-work-title em {
    font-style: normal;
    background: linear-gradient(120deg, #20e7a8, #4fd7ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.okp-work-sub {
    color: #a6afbd;
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.75;
    margin: 0;
}

.okp-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, .9fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: center;
}
.okp-feature.is-flip { grid-template-columns: minmax(0, .9fr) minmax(0, 1.45fr); }
.okp-feature.is-flip > :is(.okp-frame, .okp-frame-wrap) { order: 2; }

.okp-frame {
    --okp-p: 1;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #0b1014;
    border: 1px solid rgba(79, 215, 255, .2);
    box-shadow:
        0 40px 120px rgba(0, 0, 0, .6),
        0 0 90px rgba(32, 231, 168, .1);
    transform-origin: 50% 100%;
    transform:
        perspective(1400px)
        rotateX(calc((1 - var(--okp-p)) * 24deg))
        translateY(calc((1 - var(--okp-p)) * 70px))
        scale(calc(.92 + .08 * var(--okp-p)));
    will-change: transform;
}
.okp-frame-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    background: rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font: 500 .74rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
    color: #8b95a4;
}
.okp-frame-bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2a313b;
}
.okp-frame-bar span { margin-left: .6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.okp-frame img {
    display: block;
    width: 100%;
    height: auto;
}

.okp-panel {
    background: rgba(9, 14, 19, .66);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 16px;
    padding: clamp(1.25rem, 2.4vw, 1.9rem);
}
.okp-panel h3 {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 700;
    margin: 0 0 .65rem;
    color: #f5f7fb;
}
.okp-panel p {
    color: #a6afbd;
    line-height: 1.75;
    margin: 0 0 1.1rem;
}
.okp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0 0 1.35rem;
    padding: 0;
    list-style: none;
}
.okp-tags li {
    font: 500 .76rem/1 "Chakra Petch", ui-monospace, monospace;
    letter-spacing: .04em;
    padding: .45rem .7rem;
    border-radius: 999px;
    color: #9ff5d9;
    background: rgba(32, 231, 168, .08);
    border: 1px solid rgba(32, 231, 168, .22);
}
.okp-panel .okx-cta { pointer-events: auto; }

.okp-clients {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: clamp(1.25rem, 3vw, 2rem);
}
.okp-client {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.okp-client-mark {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font: 700 1rem/1 "Chakra Petch", sans-serif;
    color: #05070b;
    background: linear-gradient(135deg, #20e7a8, #4fd7ff);
}
.okp-client h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.okp-client p { margin: 0; font-size: .95rem; }

/* ---------- Existing sections on the scene: lighter, glassy panels ---------- */
html.okp-live .ok-home .ok-tech-section { background: rgba(5, 9, 13, .35); }
html.okp-live .ok-home :is(.ok-service-card, .ok-work-card, .okx-cap-card) {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.ok-home .ok-section,
.ok-home .okx-caps { position: relative; }
.ok-home [data-okp-shape]:not(.okx-hero):not(.okp-work):not(.okp-contact) { padding-top: clamp(8rem, 26vh, 16rem); }

/* ---------- Reveal on scroll ---------- */
html.okp-motion [data-okp-reveal] {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--okp-d, 0s);
}
html.okp-motion [data-okp-reveal].is-in {
    opacity: 1;
    transform: none;
}

@media (max-width: 991.98px) {
    .okp-feature,
    .okp-feature.is-flip { grid-template-columns: 1fr; }
    .okp-feature.is-flip > :is(.okp-frame, .okp-frame-wrap) { order: 0; }
    .okp-clients { grid-template-columns: 1fr; }
    .okp-work { padding-top: 40vh; }
}

@media (max-width: 767.98px) {
    /* Phones: wordmark near the top, copy starts below it. */
    .okx-hero.okp-hero {
        min-height: 0;
        align-items: flex-start;
        padding-top: 32vh;
        padding-top: 32svh;
    }
    .okp-wordmark { top: 11vh; }
    .okp-hero .okx-stats { gap: .9rem 1.4rem; }
    .okp-work { padding-top: 36vh; }
    .okp-frame { border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .okp-frame { transform: none; }
    .okp-canvas { transition: none; }
}

/* ============================================================
   Depth + detail layer
   ============================================================ */

/* Slow nebula behind the particles. */
.okp-nebula {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.okp-nebula i {
    position: absolute;
    width: 60vmax;
    height: 60vmax;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .5;
    will-change: transform;
}
.okp-nebula i:nth-child(1) { left: -12vmax; top: -18vmax; background: radial-gradient(circle, rgba(32, 231, 168, .16), transparent 65%); animation: okp-drift-a 38s ease-in-out infinite alternate; }
.okp-nebula i:nth-child(2) { right: -18vmax; top: 18vh; background: radial-gradient(circle, rgba(79, 215, 255, .13), transparent 65%); animation: okp-drift-b 46s ease-in-out infinite alternate; }
.okp-nebula i:nth-child(3) { left: 20vw; bottom: -30vmax; background: radial-gradient(circle, rgba(120, 90, 255, .08), transparent 65%); animation: okp-drift-a 54s ease-in-out infinite alternate-reverse; }
@keyframes okp-drift-a { to { transform: translate3d(14vw, 10vh, 0) scale(1.15); } }
@keyframes okp-drift-b { to { transform: translate3d(-12vw, -8vh, 0) scale(.9); } }

/* Hero HUD: four quiet corner labels. */
.okp-hud {
    position: absolute;
    inset: 84px clamp(1rem, 3vw, 2.5rem) 1.25rem;
    pointer-events: none;
    font: 500 .68rem/1 "Chakra Petch", ui-monospace, monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(166, 175, 189, .55);
}
.okp-hud span { position: absolute; display: inline-flex; align-items: center; gap: .5em; }
.okp-hud em { font-style: normal; color: #20e7a8; }
.okp-hud b { font-weight: 600; color: rgba(233, 255, 251, .75); }
.okp-hud .is-tl { left: 0; top: 0; }
.okp-hud .is-tr { right: 0; top: 0; }
.okp-hud .is-bl { left: 0; bottom: 0; }
.okp-hud .is-br { right: 0; bottom: 0; }
.okp-hud .is-tr i {
    width: 6px; height: 6px; border-radius: 50%;
    background: #20e7a8; box-shadow: 0 0 10px #20e7a8;
    animation: okp-blink 2.4s ease-in-out infinite;
}
.okp-hud span::before {
    content: "";
    width: 10px; height: 10px;
    border: 1px solid rgba(32, 231, 168, .4);
    border-width: 1px 0 0 1px;
    margin-right: .4em;
}
.okp-hud .is-tr::before, .okp-hud .is-br::before { order: 9; margin: 0 0 0 .4em; border-width: 1px 1px 0 0; }
.okp-hud .is-bl::before { border-width: 0 0 1px 1px; }
.okp-hud .is-br::before { border-width: 0 1px 1px 0; }
html.okp-static .okp-hud .is-bl { display: none; }
@keyframes okp-blink { 50% { opacity: .25; } }

/* ---------- Dust-in (home-motion.js) ---------- */
html.okp-motion [data-okp-dust]:not(.is-in):not(.is-dusting) { opacity: 0; }

/* Headings arrive word by word. */
html.okp-motion .okp-words .okp-w {
    display: inline-block;
    opacity: 0;
    filter: blur(10px);
    transform: translateY(.35em);
    transition: opacity .8s ease, filter .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i) * 55ms);
}
html.okp-motion .okp-words.is-in .okp-w { opacity: 1; filter: none; transform: none; }
/* gradient-text parents: each word paints its own copy of the gradient */
.okp-words :is(em, .okx-neon) .okp-w {
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Pointer light on cards ---------- */
.okp-spot { position: relative; overflow: hidden; }
.okp-spot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(32, 231, 168, .14), transparent 60%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.okp-spot:hover::after { opacity: 1; }
.ok-home .ok-tech-card { transition: transform .25s ease, border-color .18s ease, background .18s ease; transform-style: preserve-3d; }

/* Icons: a scanning ring on hover. */
.ok-home :is(.okx-cap-icon, .ok-icon-box, .ok-work-icon) { position: relative; }
.ok-home :is(.okx-cap-icon, .ok-icon-box, .ok-work-icon)::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--okp-a, 0deg), transparent 0 70%, #20e7a8 85%, #4fd7ff 95%, transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .3s ease;
    animation: okp-spin 2.2s linear infinite;
    pointer-events: none;
}
.ok-home :is(.okx-cap-card, .ok-service-card, .ok-work-card):hover :is(.okx-cap-icon, .ok-icon-box, .ok-work-icon)::before { opacity: 1; }
@property --okp-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes okp-spin { to { --okp-a: 360deg; } }

/* Tech logos arrive in a ripple. */
html.okp-motion .ok-tech-grid .ok-tech-card { opacity: 0; transform: translateY(18px) scale(.96); }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1), border-color .18s ease, background .18s ease;
}
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(1) { transition-delay: 0.04s, 0.04s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(2) { transition-delay: 0.07s, 0.07s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(3) { transition-delay: 0.10s, 0.10s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(4) { transition-delay: 0.14s, 0.14s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(5) { transition-delay: 0.17s, 0.17s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(6) { transition-delay: 0.21s, 0.21s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(7) { transition-delay: 0.24s, 0.24s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(8) { transition-delay: 0.28s, 0.28s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(9) { transition-delay: 0.32s, 0.32s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(10) { transition-delay: 0.35s, 0.35s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(11) { transition-delay: 0.39s, 0.39s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(12) { transition-delay: 0.42s, 0.42s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(13) { transition-delay: 0.46s, 0.46s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(14) { transition-delay: 0.49s, 0.49s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(15) { transition-delay: 0.53s, 0.53s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(16) { transition-delay: 0.56s, 0.56s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(17) { transition-delay: 0.59s, 0.59s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(18) { transition-delay: 0.63s, 0.63s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(19) { transition-delay: 0.67s, 0.67s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(20) { transition-delay: 0.70s, 0.70s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(21) { transition-delay: 0.73s, 0.73s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(22) { transition-delay: 0.77s, 0.77s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(23) { transition-delay: 0.81s, 0.81s, 0s, 0s; }
html.okp-motion .ok-tech-grid.is-in .ok-tech-card:nth-child(24) { transition-delay: 0.84s, 0.84s, 0s, 0s; }

/* Workflow: a line runs through the four steps, badges light up in turn. */
.ok-home .ok-work-grid { position: relative; }
.ok-home .ok-work-grid::before {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    top: 2.15rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, #20e7a8 15%, #4fd7ff 85%, transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.6s cubic-bezier(.2, .7, .2, 1) .3s;
    opacity: .6;
    pointer-events: none;
}
.ok-home .ok-work-grid.is-in::before { transform: scaleX(1); }
html.okp-motion .ok-work-grid .ok-step-badge { transition: box-shadow .5s ease, color .5s ease; }
html.okp-motion .ok-work-grid.is-in .ok-work-card:nth-child(1) .ok-step-badge { animation: okp-badge 1s ease .5s both; }
html.okp-motion .ok-work-grid.is-in .ok-work-card:nth-child(2) .ok-step-badge { animation: okp-badge 1s ease .85s both; }
html.okp-motion .ok-work-grid.is-in .ok-work-card:nth-child(3) .ok-step-badge { animation: okp-badge 1s ease 1.2s both; }
html.okp-motion .ok-work-grid.is-in .ok-work-card:nth-child(4) .ok-step-badge { animation: okp-badge 1s ease 1.55s both; }
@keyframes okp-badge { 40% { box-shadow: 0 0 0 6px rgba(32, 231, 168, .18), 0 0 24px rgba(32, 231, 168, .5); color: #e9fffb; } }
@media (max-width: 991.98px) { .ok-home .ok-work-grid::before { display: none; } }

/* ---------- Work screenshots: scan line + floating data chips ---------- */
.okp-frame-wrap { position: relative; }
.okp-frame { position: relative; }
.okp-frame::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -90px;
    height: 90px;
    background: linear-gradient(180deg, transparent, rgba(32, 231, 168, .1) 70%, rgba(79, 215, 255, .35) 99%, transparent);
    animation: okp-scan 6.5s cubic-bezier(.5, 0, .5, 1) 1.2s infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}
@keyframes okp-scan {
    0% { top: -90px; opacity: 0; }
    8% { opacity: 1; }
    45% { top: 100%; opacity: 1; }
    52%, 100% { top: 100%; opacity: 0; }
}

.okp-chip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem .85rem;
    border-radius: 12px;
    background: rgba(8, 13, 18, .78);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(32, 231, 168, .25);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 24px rgba(32, 231, 168, .08);
    font: 500 .82rem/1.2 "Kanit", sans-serif;
    color: #dbe7ef;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(14px) scale(.96);
    transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
}
.okp-chip b { font: 700 1.05rem/1 "Chakra Petch", sans-serif; color: #20e7a8; margin-right: .15rem; }
.okp-chip .bi { color: #20e7a8; font-size: 1rem; }
.okp-chip.is-a { top: 12%; left: -1.25rem; }
.okp-chip.is-b { bottom: 14%; right: -1.25rem; }
.okp-chip.is-c { bottom: -1.1rem; left: 14%; }
.okp-frame-wrap.is-in .okp-chip { opacity: 1; transform: none; animation: okp-float 6s ease-in-out infinite; }
.okp-frame-wrap.is-in .okp-chip.is-a { transition-delay: .2s; animation-delay: 1s; }
.okp-frame-wrap.is-in .okp-chip.is-b { transition-delay: .45s; animation-delay: 2.4s; }
.okp-frame-wrap.is-in .okp-chip.is-c { transition-delay: .7s; animation-delay: 3.6s; }
@keyframes okp-float { 50% { translate: 0 -6px; } }
html:not(.okp-motion) .okp-chip { opacity: 1; transform: none; }

.okp-spark { width: 64px; height: 20px; overflow: visible; }
.okp-spark path {
    fill: none;
    stroke: #20e7a8;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(32, 231, 168, .6));
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
}
.okp-frame-wrap.is-in .okp-spark path { transition: stroke-dashoffset 1.8s cubic-bezier(.4, 0, .2, 1) .8s; stroke-dashoffset: 0; }
html:not(.okp-motion) .okp-spark path { stroke-dashoffset: 0; }

.okp-pulse {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #20e7a8;
}
.okp-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid #20e7a8;
    animation: okp-ping 1.8s ease-out infinite;
}
@keyframes okp-ping { to { transform: scale(3); opacity: 0; } }

.okp-typing {
    display: inline-block;
    overflow: hidden;
    border-right: 2px solid #20e7a8;
    padding-right: 2px;
    max-width: 0;
    animation: okp-caret 1s steps(1) infinite;
}
.okp-frame-wrap.is-in .okp-typing { max-width: 14em; transition: max-width 2s steps(22, end) .9s; }
html:not(.okp-motion) .okp-typing { max-width: none; }

@media (max-width: 767.98px) {
    .okp-hud { display: none; }
    .okp-chip { font-size: .74rem; padding: .45rem .65rem; }
    .okp-chip.is-a { left: .5rem; top: -1rem; }
    .okp-chip.is-b { right: .5rem; bottom: -1rem; }
    .okp-chip.is-c { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .okp-nebula i, .okp-frame::after, .okp-chip, .okp-pulse::after, .okp-hud i { animation: none !important; }
}

/* ---------- Contact: the last scene ---------- */
.okp-contact {
    position: relative;
    padding: 46vh 0 clamp(5rem, 10vw, 8rem);
    scroll-margin-top: 80px;
}
.okp-ideas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .55rem;
    max-width: 52rem;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    padding: 0;
    list-style: none;
}
.okp-ideas li {
    padding: .5rem .95rem;
    border-radius: 999px;
    font: 500 .9rem/1 "Kanit", sans-serif;
    color: #c9d1dc;
    background: rgba(12, 17, 23, .55);
    border: 1px solid rgba(148, 163, 184, .16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
html.okp-motion .okp-ideas li { opacity: 0; transform: translateY(10px); }
html.okp-motion .okp-ideas.is-in li { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.okp-ideas.is-in li:nth-child(2) { transition-delay: .06s; }
.okp-ideas.is-in li:nth-child(3) { transition-delay: .12s; }
.okp-ideas.is-in li:nth-child(4) { transition-delay: .18s; }
.okp-ideas.is-in li:nth-child(5) { transition-delay: .24s; }
.okp-ideas.is-in li:nth-child(6) { transition-delay: .3s; }
.okp-ideas.is-in li:nth-child(7) { transition-delay: .36s; }

.okp-channels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 62rem;
    margin: 0 auto;
}
.okp-channel {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    text-decoration: none;
    color: #f5f7fb;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s ease;
}
.okp-channel:hover { color: #f5f7fb; transform: translateY(-4px); border-color: rgba(32, 231, 168, .45); }
.okp-channel-icon {
    width: 44px;
    height: 44px;
    margin-bottom: .6rem;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    color: #20e7a8;
    background: rgba(32, 231, 168, .08);
    border: 1px solid rgba(32, 231, 168, .25);
}
.okp-channel-label {
    font: 600 .72rem/1 "Chakra Petch", ui-monospace, monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8b95a4;
}
.okp-channel strong { font: 600 1.2rem/1.3 "Kanit", sans-serif; }
.okp-channel small { color: #a6afbd; font-size: .88rem; }
.okp-channel.is-primary {
    background: linear-gradient(140deg, rgba(32, 231, 168, .16), rgba(79, 215, 255, .08)), rgba(9, 14, 19, .7);
    border-color: rgba(32, 231, 168, .4);
}
@media (max-width: 767.98px) {
    .okp-channels { grid-template-columns: 1fr; }
    .okp-contact { padding-top: 36vh; }
}
/* ---------- Web-design gallery ---------- */
.okp-webdesign { padding-bottom: clamp(3rem, 6vw, 5rem); }
.okp-gallery { position: relative; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.okp-gallery-track {
    display: flex;
    gap: clamp(1rem, 2.4vw, 2rem);
    padding: 1rem max(1.25rem, calc((100vw - 1180px) / 2)) 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.okp-gallery-track::-webkit-scrollbar { display: none; }
.okp-design {
    --okp-focus: 1;
    flex: 0 0 min(84vw, 760px);
    scroll-snap-align: center;
    transform: scale(calc(.9 + .1 * var(--okp-focus)));
    opacity: calc(.45 + .55 * var(--okp-focus));
    transition: opacity .2s linear;
}
.okp-design-frame {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #0b1014;
    border: 1px solid rgba(79, 215, 255, .18);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 60px rgba(32, 231, 168, calc(.12 * var(--okp-focus)));
}
.okp-design-frame img { display: block; width: 100%; height: auto; }
.okp-design-meta { padding: 1.1rem .25rem 0; }
.okp-design-type {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font: 600 .74rem/1 "Chakra Petch", ui-monospace, monospace;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #20e7a8;
}
.okp-design-type b {
    font-weight: 600;
    letter-spacing: .06em;
    padding: .3rem .55rem;
    border-radius: 999px;
    color: #04110d;
    background: linear-gradient(120deg, #20e7a8, #4fd7ff);
}
.okp-design-meta h3 { margin: .55rem 0 .3rem; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; color: #f5f7fb; }
.okp-design-meta p { margin: 0; color: #a6afbd; }
.okp-gallery-progress { display: none; }

/* Desktop with motion: the track is pinned and slides sideways as you scroll. */
html.okp-hscroll .okp-gallery-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
html.okp-hscroll .okp-gallery-track {
    overflow: visible;
    scroll-snap-type: none;
    will-change: transform;
    padding-top: 4.5rem;
}
html.okp-hscroll .okp-design { flex-basis: min(58vw, 820px); }
html.okp-hscroll .okp-gallery-progress {
    display: block;
    width: min(1180px, calc(100% - 2.5rem));
    height: 2px;
    margin: .5rem auto 0;
    background: rgba(148, 163, 184, .14);
    border-radius: 2px;
    overflow: hidden;
}
.okp-gallery-progress i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #20e7a8, #4fd7ff);
    transform: scaleX(0);
    transform-origin: left;
}

.okp-promises {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}
.okp-promises li { display: flex; flex-direction: column; gap: .4rem; }
.okp-promises .bi {
    font-size: 1.35rem;
    color: #20e7a8;
    margin-bottom: .35rem;
}
.okp-promises strong { color: #f5f7fb; font-size: 1.05rem; }
.okp-promises span { color: #a6afbd; font-size: .92rem; line-height: 1.6; }
.okp-note { text-align: center; color: #8b95a4; font-size: .82rem; margin: 0; }
@media (max-width: 991.98px) { .okp-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .okp-promises { grid-template-columns: 1fr; } }/* .ok-home clips overflow with overflow:hidden, which would stop the gallery
   from pinning; clip keeps the clipping without making a scroll container. */
html.okp-hscroll body.ok-home-shell .ok-home { overflow: visible; overflow-x: clip; }

.okp-feature-gap { margin-top: clamp(3rem, 7vw, 6rem); }

/* ---------- Hero comet: one post into Oknus, out to every channel ---------- */
.okp-comet {
    position: relative;
    width: min(760px, 100%);
    height: 150px;
    margin: 0 auto clamp(.75rem, 2vh, 1.5rem);
    pointer-events: none;
}
.okp-comet canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.okp-comet-hub,
.okp-comet-ch {
    position: absolute;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
}
.okp-comet-hub {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    font: 700 .62rem/1 "Chakra Petch", sans-serif;
    letter-spacing: .14em;
    color: #e9fffb;
    background: radial-gradient(circle, rgba(32, 231, 168, .22), rgba(5, 7, 11, .85) 70%);
    border: 1px solid rgba(32, 231, 168, .45);
    box-shadow: 0 0 24px rgba(32, 231, 168, .25);
}
.okp-comet-hub i {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid #20e7a8;
    opacity: 0;
}
.okp-comet-hub.is-hit i { animation: okp-hub-ring .9s ease-out; }
.okp-comet-hub.is-hit { animation: okp-hub-flash .9s ease-out; }
@keyframes okp-hub-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.4); } }
@keyframes okp-hub-flash { 20% { box-shadow: 0 0 46px rgba(32, 231, 168, .7); } }
.okp-comet-ch {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: .9rem;
    color: #8b95a4;
    background: rgba(9, 13, 18, .8);
    border: 1px solid rgba(148, 163, 184, .18);
    transition: color .3s ease, border-color .3s ease, box-shadow .4s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.okp-comet-ch.is-lit {
    color: #e9fffb;
    border-color: rgba(32, 231, 168, .6);
    box-shadow: 0 0 18px rgba(32, 231, 168, .45);
    transform: translate(-50%, -50%) scale(1.12);
}
.okp-comet-label {
    position: absolute;
    font: 600 .66rem/1 "Chakra Petch", ui-monospace, monospace;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(166, 175, 189, .7);
}
.okp-comet-label.is-in { left: 0; top: 8%; }
.okp-comet-label.is-out { right: 0; top: -2%; }
@media (max-width: 767.98px) {
    .okp-comet { height: 118px; }
    .okp-comet-hub { width: 48px; height: 48px; font-size: .5rem; }
    .okp-comet-ch { width: 24px; height: 24px; font-size: .72rem; border-radius: 7px; }
    .okp-comet-label { display: none; }
}
/* LCP: the hero title and lead paint at once instead of fading in. */
.okx-hero.okp-hero.okx-anim :is(.okx-title, .okx-lead) { opacity: 1; transform: none; animation: none; }