/* ============================================================
   LOHKI — Public / Marketing Site CSS  v2
   Redesigned: dark precision aesthetic, neon lime accent,
   Space Grotesk + Manrope type system.
   ============================================================ */

/* ── Prevent horizontal overflow ───────────────────────────── */
/* Note: overflow-x on body breaks position:sticky — keep only on html */
html { overflow-x: hidden; }

/* ── Custom scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar             { width: 4px; }
::-webkit-scrollbar-track       { background: #0e0e0e; }
::-webkit-scrollbar-thumb       { background: #caff6f; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #b3ef55; }
html { scrollbar-width: thin; scrollbar-color: #caff6f transparent; }

/* ── Dark theme variable overrides ─────────────────────────── */
body.public-theme {
    /* Brand overrides for marketing site */
    --clr-green:        #caff6f;
    --clr-green-dark:   #b3ef55;
    --clr-green-on:     #0e1f00;   /* dark text on lime bg */
    --clr-green-glow:   rgba(202, 255, 111, 0.12);
    --clr-green-subtle: rgba(202, 255, 111, 0.06);
    --clr-green-border: rgba(202, 255, 111, 0.18);

    /* Surface stack */
    --color-bg:       #0e0e0e;
    --color-surface:  #111111;
    --color-elevated: #181818;
    --color-border:   #252525;
    --color-ink:      #f0f0f0;
    --color-muted:    #999999;

    /* Shadows tinted lime */
    --shadow-card:   0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.35);
    --shadow-raised: 0 4px 12px rgba(0,0,0,0.45), 0 12px 40px rgba(0,0,0,0.4);
    --shadow-green:  0 4px 24px rgba(202,255,111,0.2);

    background: var(--color-bg);
    color:      var(--color-ink);
}

/* Noise texture on body */
body.public-theme::before {
    content:  '';
    position: fixed;
    inset:    0;
    pointer-events: none;
    z-index:  0;
    opacity:  0.022;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size:   128px 128px;
}
body.public-theme > * { position: relative; z-index: 1; }
body.public-theme > .pub-nav            { position: sticky; top: 0; z-index: 100; }
body.public-theme > .mobile-nav-overlay { position: fixed;  z-index: 200; }
body.public-theme > .whatsapp-float     { position: fixed;  z-index: 150; }
body.public-theme > #snake-wrap         { position: absolute; z-index: 10; }
/* About page prism — injected as direct body child so position:fixed works (same pattern as .mobile-nav-overlay) */
body.public-theme > .ab-prism-fixed {
    position:       fixed;
    inset:          0;
    z-index:        0;
    pointer-events: none;
    user-select:    none;
    overflow:       hidden;
}

/* ── Navigation ─────────────────────────────────────────────── */
.pub-nav {
    position:        sticky;
    top:             0;
    z-index:         100;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 var(--sp-8);
    height:          64px;
    background:      rgba(14, 14, 14, 0.75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom:   1px solid rgba(202, 255, 111, 0.06);
}

.pub-nav-logo {
    display:         flex;
    align-items:     center;
    gap:             var(--sp-3);
    text-decoration: none;
    position:        relative;
    overflow:        visible;
}
.pub-nav-logo-mark {
    width:         28px;
    height:        28px;
    border-radius: 4px;
    background:    var(--clr-green);
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
}
.pub-nav-logo-mark svg { width: 16px; height: 16px; }
.pub-nav-logo-text {
    font-family:    var(--font-display);
    font-size:      2rem;
    font-weight:    700;
    color:          var(--color-ink);
    letter-spacing: -0.04em;
    line-height:    1;
}
.pub-nav-logo-text > span { color: var(--clr-green); }
.pub-nav-logo-text .lc         { color: var(--color-ink); }
.pub-nav-logo-text .lc.lc-accent { color: var(--clr-green); }

.pub-nav-links {
    display:     flex;
    align-items: center;
    gap:         var(--sp-6);
    list-style:  none;
}
.pub-nav-links a {
    font-family:    var(--font-display);
    font-size:      0.8125rem;
    font-weight:    500;
    color:          var(--color-muted);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition:     color 0.18s var(--ease-out);
}
.pub-nav-links a:hover  { color: var(--color-ink); }
.pub-nav-links a:focus-visible { outline: 2px solid var(--clr-green); outline-offset: 3px; border-radius: 3px; }

/* ── Nav flyout (hover menus) ───────────────────────────────── */
.nav-flyout-item {
    position:   relative;
    list-style: none;
}
/* Trigger link — arrow chevron inline */
.nav-flyout-trigger {
    display:     inline-flex;
    align-items: center;
    gap:         4px;
    cursor:      pointer;
}
.nav-flyout-trigger svg {
    width:      10px;
    height:     10px;
    flex-shrink: 0;
    transition:  transform 0.2s var(--ease-out);
}
.nav-flyout-item.open .nav-flyout-trigger svg,
.nav-flyout-item:focus-within .nav-flyout-trigger svg {
    transform: rotate(180deg);
}

/* Panel — triggered by JS .open class */
.nav-flyout-panel {
    position:       absolute;
    top:            calc(100% + 4px);
    left:           50%;
    transform:      translateX(-50%) translateY(-8px);
    background:     #141414;
    border:         1px solid var(--color-border);
    border-radius:  12px;
    padding:        var(--sp-3);
    min-width:      230px;
    box-shadow:     0 16px 56px rgba(0,0,0,0.7), 0 0 0 1px rgba(202,255,111,0.06);
    opacity:        0;
    pointer-events: none;
    transition:     opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
    z-index:        200;
}
/* Invisible hit-area bridge that fills the gap between trigger and panel */
.nav-flyout-item::before {
    content:  '';
    position: absolute;
    bottom:   -8px;
    left:     0;
    right:    0;
    height:   8px;
    z-index:  201;
}
.nav-flyout-item.open .nav-flyout-panel,
.nav-flyout-item:focus-within .nav-flyout-panel {
    opacity:        1;
    pointer-events: auto;
    transform:      translateX(-50%) translateY(0);
}

/* Individual flyout link rows */
.nav-flyout-link {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--sp-3);
    padding:       0.5rem 0.625rem;
    border-radius: 8px;
    text-decoration: none;
    transition:    background 0.15s var(--ease-out);
}
.nav-flyout-link:hover { background: rgba(202,255,111,0.05); }

.nav-flyout-link-icon {
    width:           32px;
    height:          32px;
    border-radius:   7px;
    background:      rgba(202,255,111,0.07);
    border:          1px solid rgba(202,255,111,0.12);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    color:           var(--clr-green);
    transition:      background 0.15s, border-color 0.15s;
}
.nav-flyout-link-icon svg { width: 14px; height: 14px; }
.nav-flyout-link:hover .nav-flyout-link-icon {
    background:   rgba(202,255,111,0.13);
    border-color: rgba(202,255,111,0.25);
}

.nav-flyout-link-title {
    display:     block;
    font-family: var(--font-display);
    font-size:   0.8125rem;
    font-weight: 600;
    color:       var(--color-ink);
    line-height: 1.3;
    transition:  color 0.15s;
}
.nav-flyout-link:hover .nav-flyout-link-title { color: var(--clr-green); }

.nav-flyout-link-sub {
    display:     block;
    font-family: var(--font-body);
    font-size:   0.7375rem;
    color:       var(--color-muted);
    line-height: 1.4;
    margin-top:  1px;
}

.btn-nav {
    padding:       0.45rem 1.125rem;
    background:    var(--clr-green);
    color:         var(--clr-green-on) !important;
    font-family:   var(--font-display) !important;
    font-size:     0.8125rem;
    font-weight:   700;
    border-radius: 6px;
    text-decoration: none !important;
    transition:    background 0.18s, transform 0.12s var(--ease-spring), box-shadow 0.18s;
    box-shadow:    0 2px 12px rgba(202,255,111,0.25);
    letter-spacing: 0.01em;
}
.btn-nav:hover  { background: var(--clr-green-dark) !important; box-shadow: 0 4px 20px rgba(202,255,111,0.35); }
.btn-nav:active { transform: scale(0.97); }
.btn-nav:focus-visible { outline: 2px solid var(--clr-green); outline-offset: 3px; }

/* ── Main ───────────────────────────────────────────────────── */
.pub-main { min-height: calc(100vh - 64px); }

/* ── Logo letter-reveal animation ──────────────────────────── */
.ll {
    display:    inline-block;
    overflow:   hidden;
    line-height: 1.1;
    vertical-align: bottom;
}
.lc {
    display:    inline-block;
    color:      var(--color-ink);
    transform:  translateY(105%);
    animation:  lc-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.lc-accent { color: var(--clr-green); }

.ll:nth-child(1) .lc { animation-delay: 0.05s; }
.ll:nth-child(2) .lc { animation-delay: 0.13s; }
.ll:nth-child(3) .lc { animation-delay: 0.21s; }
.ll:nth-child(4) .lc { animation-delay: 0.29s; }
.ll:nth-child(5) .lc { animation-delay: 0.37s; }

@keyframes lc-rise { to { transform: translateY(0); } }

.logo-underline {
    position:         absolute;
    bottom:           -4px;
    left:             0;
    width:            100%;
    height:           2px;
    background:       var(--clr-green);
    border-radius:    1px;
    transform:        scaleX(0);
    transform-origin: center;
    transition:       transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events:   none;
}

/* ── Above-fold container ───────────────────────────────────── */
.above-fold {
    display:        flex;
    flex-direction: column;
    min-height:     calc(100vh  - 64px);
    min-height:     calc(100dvh - 64px);
}
.above-fold > .hero { flex: 1; min-height: 0; }

/* ── Flash messages ─────────────────────────────────────────── */
.pub-main > .flash { max-width: 1200px; margin: var(--sp-4) auto; }

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
    position:    relative;
    overflow:    clip; /* clip stops scrollbar but allows sticky children to still work */
    padding:     var(--sp-16) var(--sp-8);
    display:     flex;
    align-items: center;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cpolygon points='35,3 67,35 35,67 3,35' fill='none' stroke='%23caff6f' stroke-opacity='0.04' stroke-width='0.6'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 65% 75% at 75% 50%, rgba(202,255,111,0.13) 0%, rgba(202,255,111,0.04) 35%, transparent 70%);
}

.hero-logo-watermark {
    position:  absolute;
    top:       50%;
    right:     4%;
    transform: translateY(-50%);
    width:     480px;
    height:    auto;
    opacity:   0.04;
    pointer-events: none;
    user-select: none;
    filter:    saturate(0) brightness(5);
    z-index:   0;
}

.hero-inner {
    position:  relative;
    max-width: 1400px;
    width:     100%;
    margin:    0 auto;
    display:   grid;
    grid-template-columns: minmax(480px, 1fr) 1fr;
    gap:       var(--sp-10);
    align-items: center;
    z-index:   1;
}

.hero-eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--sp-2);
    padding:        0.3125rem 0.875rem;
    background:     var(--clr-green-subtle);
    border:         1px solid var(--clr-green-border);
    border-radius:  var(--r-pill);
    font-family:    var(--font-display);
    font-size:      0.6875rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--clr-green);
    margin-bottom:  var(--sp-6);
}
.hero-eyebrow-dot {
    width:        5px;
    height:       5px;
    border-radius: 50%;
    background:   var(--clr-green);
    animation:    pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.65); }
}

.hero-heading {
    font-family:    var(--font-display);
    font-size:      clamp(3.5rem, 6.5vw, 6.5rem);
    font-weight:    700;
    line-height:    1.0;
    letter-spacing: -0.045em;
    color:          var(--color-ink);
    margin-bottom:  var(--sp-6);
}
.hero-heading .accent {
    color: var(--clr-green);
    text-shadow: 0 0 30px rgba(202,255,111,0.25);
}

.hero-body {
    font-family:   var(--font-body);
    font-size:     1.0625rem;
    color:         var(--color-muted);
    line-height:   1.75;
    margin-bottom: var(--sp-8);
    max-width:     500px;
}

.hero-actions {
    display:     flex;
    gap:         var(--sp-4);
    align-items: center;
    flex-wrap:   wrap;
}

.btn-hero {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--sp-2);
    padding:         0.875rem 1.875rem;
    background:      var(--clr-green);
    color:           var(--clr-green-on);
    font-family:     var(--font-display);
    font-size:       0.9375rem;
    font-weight:     700;
    border-radius:   8px;
    text-decoration: none;
    box-shadow:      0 4px 24px rgba(202,255,111,0.25);
    transition:      background 0.18s, box-shadow 0.18s, transform 0.12s var(--ease-spring);
    letter-spacing:  0.01em;
}
.btn-hero:hover  { background: var(--clr-green-dark); box-shadow: 0 6px 32px rgba(202,255,111,0.35); }
.btn-hero:active { transform: scale(0.97); }
.btn-hero:focus-visible { outline: 2px solid var(--clr-green); outline-offset: 3px; }

.btn-outline {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--sp-2);
    padding:         0.875rem 1.875rem;
    background:      transparent;
    color:           var(--color-muted);
    font-family:     var(--font-display);
    font-size:       0.9375rem;
    font-weight:     600;
    border-radius:   8px;
    text-decoration: none;
    border:          1px solid var(--color-border);
    transition:      border-color 0.18s, color 0.18s, background 0.18s, transform 0.12s var(--ease-spring);
    letter-spacing:  0.01em;
}
.btn-outline:hover  { border-color: rgba(202,255,111,0.3); color: var(--clr-green); background: var(--clr-green-subtle); }
.btn-outline:active { transform: scale(0.97); }
.btn-outline:focus-visible { outline: 2px solid var(--clr-green); outline-offset: 3px; }

.hero-link {
    font-family:    var(--font-display);
    font-size:      0.9375rem;
    font-weight:    500;
    color:          var(--color-muted);
    text-decoration: none;
    transition:     color 0.18s;
}
.hero-link:hover { color: var(--clr-green); }
.hero-link:focus-visible { outline: 2px solid var(--clr-green); outline-offset: 3px; border-radius: 3px; }

/* Hero visual — geometric prism */
.hero-visual {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    overflow:        visible;
}

/* Canvas-based 3D gem renderer — 2× buffer displayed at 1× size */
#gem-canvas {
    position:       absolute;
    inset:          0;
    width:          812px;
    height:         812px;
    z-index:        1;
    pointer-events: none;
    display:        block;
}

/* Filled prism face */
.hero-prism-face {
    position:  absolute;
    inset:     16px;   /* matches outer ring inset */
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background:
        linear-gradient(135deg, rgba(202,255,111,0.08) 0%, transparent 48%),
        linear-gradient(315deg, rgba(0,0,0,0.28) 0%, transparent 48%),
        #0a140a;
    overflow:  hidden;
    z-index:   1;
}

/* Prism / diamond geometric element */
.hero-prism-wrap {
    position:         relative;
    width:            812px;
    height:           812px;
    flex-shrink:      0;
    animation:        prism-float 5.5s ease-in-out infinite;
    perspective:        1200px;
    perspective-origin: 50% 30%;
}
.hero-prism-glow {
    position:      absolute;
    inset:         -150px;
    background:    rgba(202, 255, 111, 0.18);
    filter:        blur(160px);
    border-radius: 50%;
    pointer-events: none;
    animation:     prism-glow-pulse 5.5s ease-in-out infinite;
}
.hero-prism-ring {
    position:  absolute;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    z-index:   2;
}
.hero-prism-ring--outer {
    inset:      16px;
    border:     1.5px solid rgba(202, 255, 111, 0.45);
    animation:  prism-spin 60s linear infinite;
}
.hero-prism-ring--middle {
    inset:      106px;
    border:     1.5px solid rgba(202, 255, 111, 0.65);
    animation:  prism-spin 45s linear infinite reverse;
}
/* Centre element — transparent so the canvas gem shows through.
   Kept only for the holo-powered box-shadow burst animation. */
.hero-prism-center {
    position:        absolute;
    inset:           220px;
    z-index:         3;
    background:      transparent;
    border:          1px solid rgba(202, 255, 111, 0.0);
    clip-path:       polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    pointer-events:  none;
}
.hero-prism-icon { display: none; }

/* Orbiting particles */
.prism-particle {
    position:      absolute;
    top:           50%;
    left:          50%;
    width:         var(--orb-size, 6px);
    height:        var(--orb-size, 6px);
    margin-top:    calc(var(--orb-size, 6px) / -2);
    margin-left:   calc(var(--orb-size, 6px) / -2);
    border-radius: 50%;
    background:    var(--clr-green);
    box-shadow:    0 0 10px 3px rgba(202, 255, 111, 0.55);
    animation:     orbit-dot var(--orb-speed, 12s) linear infinite;
    will-change:   transform;
}
@keyframes orbit-dot {
    from { transform: rotate(0deg)   translateX(var(--orb-r, 240px)); }
    to   { transform: rotate(360deg) translateX(var(--orb-r, 240px)); }
}

@keyframes prism-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes prism-float {
    0%, 100% { transform: translateY(190px); }
    50%       { transform: translateY(162px); }
}
@keyframes prism-glow-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%       { opacity: 0.55; transform: scale(0.86); }
}

/* ── Holographic projection display ─────────────────────────── */

/* Container — anchored so bottom sits 240px from top of prism wrap
   (20px below the top point of the inner diamond at inset:220px).
   Grows upward via scaleY from bottom-center origin. */
.holo-display {
    position:         absolute;
    left:             50%;
    bottom:           calc(100% - 240px);
    transform:        translateX(-50%) scaleY(0);
    transform-origin: bottom center;
    opacity:          0;
    z-index:          10;
    pointer-events:   none;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    width:            300px;
}

/* Emerge: power-on flash → scale up from diamond */
@keyframes holo-emerge {
    0%   { opacity: 0; transform: translateX(-50%) scaleY(0.03); filter: brightness(6); }
    12%  { opacity: 1; filter: brightness(3); }
    30%  { filter: brightness(1.4); }
    55%  { filter: brightness(1); }
    100% { opacity: 1; transform: translateX(-50%) scaleY(1); filter: brightness(1); }
}
.holo-display.holo-rising {
    animation: holo-emerge 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Holographic screen — scaled up via transform, anchored at bottom
   so it grows upward from the beam connection point.
   scale(1.75) makes it visually ~525px × 315px — larger than the gem. */
.holo-screen {
    width:            300px;
    height:           180px;
    background:       rgba(3, 10, 3, 0.96);
    border:           1px solid rgba(202,255,111,0.5);
    border-radius:    6px;
    overflow:         hidden;
    position:         relative;
    flex-shrink:      0;
    transform:        perspective(900px) rotateX(-7deg) scale(1.75);
    transform-origin: bottom center;
    box-shadow:
        0 0 0 1px rgba(202,255,111,0.08),
        0 0 40px rgba(202,255,111,0.28),
        0 0 110px rgba(202,255,111,0.10),
        inset 0 0 60px rgba(202,255,111,0.05);
}

/* Scrolling scanlines — translated pseudo-element is GPU-composited */
.holo-scanlines {
    position: absolute; inset: 0;
    overflow: hidden;
    z-index: 5; pointer-events: none;
}
.holo-scanlines::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -90px; bottom: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px, transparent 2px,
        rgba(202,255,111,0.022) 2px, rgba(202,255,111,0.022) 3px
    );
    animation: scanline-scroll 14s linear infinite;
    will-change: transform;
}
@keyframes scanline-scroll {
    from { transform: translateY(0); }
    to   { transform: translateY(90px); }
}

/* HUD corner brackets */
.holo-corner {
    position: absolute; width: 10px; height: 10px;
    border-color: rgba(202,255,111,0.72); border-style: solid; z-index: 12;
}
.holo-corner--tl { top: 3px; left: 3px;   border-width: 1.5px 0 0 1.5px; }
.holo-corner--tr { top: 3px; right: 3px;  border-width: 1.5px 1.5px 0 0; }
.holo-corner--bl { bottom: 3px; left: 3px;  border-width: 0 0 1.5px 1.5px; }
.holo-corner--br { bottom: 3px; right: 3px; border-width: 0 1.5px 1.5px 0; }

/* UI content wrapper */
.holo-ui { padding: 7px 9px 5px; position: relative; z-index: 1; }

/* Nav row */
.holo-nav-bar {
    display: flex; align-items: center; gap: 5px;
    margin-bottom: 4px; padding-bottom: 4px;
    border-bottom: 1px solid rgba(202,255,111,0.08);
}
.holo-logo-mark {
    width: 22px; height: 9px;
    background: rgba(202,255,111,0.75); border-radius: 2px; flex-shrink: 0;
}
.holo-spacer { flex: 1; }
.holo-link-bar { height: 2.5px; background: rgba(202,255,111,0.28); border-radius: 1px; flex-shrink: 0; }
.holo-nav-cta { width: 28px; height: 9px; background: rgba(202,255,111,0.42); border-radius: 2px; flex-shrink: 0; }
.holo-divider { height: 1px; background: rgba(202,255,111,0.08); margin-bottom: 5px; }

/* Hero text bars */
.holo-hero-area { margin-bottom: 5px; }
.holo-eyebrow { width: 42px; height: 4px; background: rgba(202,255,111,0.22); border-radius: 3px; margin-bottom: 4px; }
.holo-h1 {
    height: 7px; background: rgba(202,255,111,0.82);
    border-radius: 2px; margin-bottom: 3px;
    display: flex; align-items: center;
}
.holo-h1--dim { background: rgba(202,255,111,0.42); }
.holo-p      { height: 3px; background: rgba(202,255,111,0.18); border-radius: 1px; margin-bottom: 2px; }

/* Blinking text cursor at end of top heading bar */
.holo-text-cursor {
    width: 1.5px; height: 100%; background: rgba(202,255,111,0.9);
    margin-left: auto; opacity: 0; flex-shrink: 0;
}
.holo-display.holo-alive .holo-text-cursor { animation: text-blink 1.1s step-end infinite; }
@keyframes text-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* CTA buttons row */
.holo-actions-row { display: flex; gap: 5px; margin-top: 5px; }
.holo-btn-a { width: 44px; height: 11px; background: rgba(202,255,111,0.55); border-radius: 2px; }
.holo-btn-b { width: 34px; height: 11px; border: 1px solid rgba(202,255,111,0.28); border-radius: 2px; }

/* Mini card row */
.holo-cards-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.holo-mini-card {
    padding: 4px 5px;
    background: rgba(202,255,111,0.03);
    border: 1px solid rgba(202,255,111,0.1);
    border-radius: 3px;
    transition: background 0.5s ease, border-color 0.5s ease;
}
.holo-mini-card.holo-card-active { background: rgba(202,255,111,0.09); border-color: rgba(202,255,111,0.44); }
.holo-card-icon { width: 7px; height: 7px; background: rgba(202,255,111,0.55); border-radius: 1px; margin-bottom: 3px; }
.holo-card-bar  { height: 2.5px; background: rgba(202,255,111,0.18); border-radius: 1px; margin-bottom: 2px; }

/* Status bar at screen bottom */
.holo-statusbar {
    position: absolute; bottom: 0; left: 0; right: 0; height: 13px;
    background: rgba(202,255,111,0.04); border-top: 1px solid rgba(202,255,111,0.09);
    display: flex; align-items: center; padding: 0 8px; gap: 4px; z-index: 6;
}
.holo-status-dot {
    width: 4px; height: 4px; background: rgba(202,255,111,0.75);
    border-radius: 50%; flex-shrink: 0; animation: pulse-dot 1.6s ease-in-out infinite;
}
.holo-status-bar-text { height: 2px; width: 28px; background: rgba(202,255,111,0.18); border-radius: 1px; }

/* Roaming cursor dot — uses transform instead of left/top for GPU compositing */
.holo-cursor {
    position: absolute; width: 5px; height: 5px;
    background: rgba(202,255,111,0.95); border-radius: 50%;
    box-shadow: 0 0 6px 2px rgba(202,255,111,0.5);
    z-index: 9; pointer-events: none;
    left: 0; top: 0; opacity: 0;
    will-change: transform;
    transition: opacity 0.5s ease,
                transform 1.6s cubic-bezier(0.4,0,0.2,1);
}
.holo-display.holo-alive .holo-cursor { opacity: 1; }

/* Light beam connecting screen to diamond */
.holo-beam {
    width: 2px; height: 40px; flex-shrink: 0;
    background: linear-gradient(to top, rgba(202,255,111,0.85) 0%, rgba(202,255,111,0.3) 65%, transparent 100%);
    box-shadow: 0 0 10px rgba(202,255,111,0.4), 0 0 24px rgba(202,255,111,0.15);
    animation: beam-pulse 2.4s ease-in-out infinite;
}
@keyframes beam-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* Alive: screen breathes + occasional flicker */
.holo-display.holo-alive .holo-screen {
    animation: holo-breathe 4.5s ease-in-out infinite, holo-flicker 11s ease-in-out infinite;
}
@keyframes holo-breathe {
    0%, 100% { box-shadow: 0 0 0 1px rgba(202,255,111,0.08), 0 0 30px rgba(202,255,111,0.20), 0 0 80px rgba(202,255,111,0.07),  inset 0 0 60px rgba(202,255,111,0.05); }
    50%       { box-shadow: 0 0 0 1px rgba(202,255,111,0.08), 0 0 55px rgba(202,255,111,0.38), 0 0 110px rgba(202,255,111,0.13), inset 0 0 60px rgba(202,255,111,0.05); }
}
@keyframes holo-flicker {
    0%, 86%, 90%, 93%, 100% { opacity: 1; }
    87%  { opacity: 0.82; }
    88%  { opacity: 1;    }
    91%  { opacity: 0.88; }
    92%  { opacity: 1;    }
}

/* Ring lock-in flash when they snap to pointing-up position */
@keyframes ring-lock-flash {
    0%   { filter: brightness(1);   border-color: rgba(202,255,111,0.45); }
    30%  { filter: brightness(2.0); border-color: rgba(202,255,111,1);    }
    100% { filter: brightness(1);   border-color: rgba(202,255,111,0.35); }
}
.hero-prism-ring.ring-locked {
    animation: ring-lock-flash 0.45s ease-out forwards !important;
}
/* Slight stagger on middle ring */
.hero-prism-ring--middle.ring-locked { animation-delay: 0.06s !important; }

/* Centre diamond power-up burst — outer glow only (element is transparent) */
@keyframes center-burst {
    0%   { box-shadow: 0 0 60px  rgba(202,255,111,0.30); }
    42%  { box-shadow: 0 0 160px rgba(202,255,111,0.90); border-color: rgba(202,255,111,0.6); }
    100% { box-shadow: 0 0 100px rgba(202,255,111,0.50); }
}
.hero-prism-center.holo-powered { animation: center-burst 0.75s ease-out forwards; }

/* Browser mockup (kept for other pages if needed) */
.hero-browser {
    width:         100%;
    max-width:     480px;
    background:    var(--color-elevated);
    border-radius: 14px;
    border:        1px solid var(--color-border);
    overflow:      hidden;
    box-shadow:    0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(202,255,111,0.06);
    transform:     perspective(1000px) rotateY(-4deg) rotateX(3deg);
    transition:    transform 0.6s var(--ease-out);
}
.hero-browser:hover { transform: perspective(1000px) rotateY(-1.5deg) rotateX(1deg); }
.hero-browser-bar {
    height:      40px;
    background:  var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display:     flex;
    align-items: center;
    gap:         var(--sp-2);
    padding:     0 var(--sp-4);
}
.hero-browser-dot {
    width: 9px; height: 9px; border-radius: 50%;
}
.hero-browser-dot:nth-child(1) { background: #FF5F57; }
.hero-browser-dot:nth-child(2) { background: #FEBC2E; }
.hero-browser-dot:nth-child(3) { background: #28C840; }
.hero-browser-url {
    flex:          1;
    height:        22px;
    background:    #0a0a0a;
    border-radius: 4px;
    margin-left:   var(--sp-3);
    display:       flex;
    align-items:   center;
    padding:       0 var(--sp-3);
    gap:           var(--sp-2);
    font-family:   var(--font-body);
    font-size:     0.6875rem;
    color:         var(--color-muted);
    border:        1px solid var(--color-border);
}
.hero-browser-url-lock { color: var(--clr-green); font-size: 0.6rem; }
.hero-browser-body { padding: var(--sp-5); }
.hero-browser-hero-bar {
    height:        72px;
    background:    linear-gradient(135deg, rgba(202,255,111,0.1) 0%, rgba(202,255,111,0.04) 100%);
    border-radius: 8px;
    margin-bottom: var(--sp-4);
    border:        1px solid rgba(202,255,111,0.12);
    display:       flex;
    align-items:   center;
    justify-content: center;
}
.hero-browser-hero-bar span {
    font-family:    var(--font-display);
    font-size:      0.8125rem;
    font-weight:    700;
    color:          var(--clr-green);
    letter-spacing: -0.01em;
}
.hero-browser-row {
    display:       flex;
    gap:           var(--sp-3);
    margin-bottom: var(--sp-3);
}
.hero-browser-block {
    border-radius: 4px;
    background:    var(--color-border);
    opacity:       0.5;
}

/* ── Stats ticker ───────────────────────────────────────────── */
.stats-strip {
    background:    #0a0a0a;
    border-top:    1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding:       var(--sp-3) 0;
    overflow:      hidden;
}
.stats-ticker-track {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.stats-ticker-reel {
    display:     flex;
    align-items: center;
    gap:         0;
    width:       max-content;
    animation:   ticker-scroll 40s linear infinite;
}
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.stats-ticker-reel:hover { animation-play-state: paused; }
.stat-tick {
    white-space:  nowrap;
    font-family:  var(--font-body);
    font-size:    0.75rem;
    color:        var(--color-muted);
    padding:      0 var(--sp-6);
    letter-spacing: 0.02em;
}
.stat-tick strong {
    color:        var(--clr-green);
    font-weight:  700;
    margin-right: var(--sp-1);
}
.stat-tick-sep {
    color:     rgba(202,255,111,0.25);
    font-size: 0.45rem;
    flex-shrink: 0;
}
/* Legacy grid stats */
.stats-strip-inner {
    max-width:  1200px;
    margin:     0 auto;
    display:    grid;
    grid-template-columns: repeat(4, 1fr);
    gap:        var(--sp-8);
    text-align: center;
}
.stat-item-value {
    font-family:    var(--font-display);
    font-size:      1.5rem;
    font-weight:    700;
    color:          var(--clr-green);
    letter-spacing: -0.03em;
    line-height:    1;
    margin-bottom:  var(--sp-1);
}
.stat-item-label {
    font-family:   var(--font-body);
    font-size:     0.75rem;
    font-weight:   600;
    color:         var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Shared section typography ──────────────────────────────── */
.section-label {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--sp-2);
    padding:        0.25rem 0.75rem;
    border:         1px solid var(--clr-green-border);
    background:     var(--clr-green-subtle);
    border-radius:  var(--r-pill);
    font-family:    var(--font-display);
    font-size:      0.6875rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--clr-green);
    margin-bottom:  var(--sp-5);
}
.section-label::before { display: none; }

.section-heading {
    font-family:    var(--font-display);
    font-size:      clamp(1.875rem, 3vw, 2.75rem);
    font-weight:    700;
    letter-spacing: -0.04em;
    color:          var(--color-ink);
    margin-bottom:  var(--sp-4);
    max-width:      600px;
    line-height:    1.1;
}
.section-heading-muted { color: #444; }

.section-sub {
    font-family:   var(--font-body);
    font-size:     1rem;
    color:         var(--color-muted);
    line-height:   1.75;
    margin-bottom: var(--sp-12);
    max-width:     520px;
}

/* ── Who We Serve ───────────────────────────────────────────── */
.serve-section {
    padding:    var(--sp-20) var(--sp-8);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    position:   relative;
    overflow:   hidden;
}
.serve-section::before {
    content:  '';
    position: absolute;
    top:      0;
    left:     0;
    right:    0;
    bottom:   0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpolygon points='30,3 57,30 30,57 3,30' fill='none' stroke='%23caff6f' stroke-opacity='0.04' stroke-width='0.5'/%3E%3C/svg%3E");
    pointer-events: none;
}
.serve-inner {
    max-width: 1200px;
    margin:    0 auto;
    position:  relative;
    z-index:   1;
}
.serve-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:     var(--sp-6);
    margin-top: var(--sp-10);
}
.serve-card {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: 12px;
    padding:       var(--sp-8);
    position:      relative;
    overflow:      hidden;
    transition:    border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
    display:       flex;
    flex-direction: column;
}
.serve-card::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     1px;
    background: linear-gradient(90deg, transparent, var(--clr-green), transparent);
    transform:  scaleX(0);
    transition: transform 0.35s var(--ease-out);
}
.serve-card:hover { border-color: var(--clr-green-border); box-shadow: 0 8px 48px var(--clr-green-glow); transform: translateY(-2px); }
.serve-card:hover::before { transform: scaleX(1); }
.serve-card-icon {
    width:         36px;
    height:        36px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin-bottom: var(--sp-5);
    flex-shrink:   0;
    color:         var(--clr-green);
}
.serve-card-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.serve-card-label {
    font-family:    var(--font-display);
    font-size:      0.6875rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--clr-green);
    margin-bottom:  var(--sp-2);
}
.serve-card-title {
    font-family:    var(--font-display);
    font-size:      1.375rem;
    font-weight:    700;
    letter-spacing: -0.03em;
    color:          var(--color-ink);
    margin-bottom:  var(--sp-3);
    line-height:    1.2;
}
.serve-card-body {
    font-family:   var(--font-body);
    font-size:     0.9rem;
    color:         var(--color-muted);
    line-height:   1.75;
    margin-bottom: var(--sp-6);
}
.serve-card-uses {
    list-style: none;
    display:    flex;
    flex-direction: column;
    gap:        var(--sp-2);
    margin-bottom: var(--sp-8);
    flex:       1;
}
.serve-card-uses li {
    display:     flex;
    align-items: flex-start;
    gap:         var(--sp-2);
    font-family: var(--font-body);
    font-size:   0.8125rem;
    color:       var(--color-muted);
    line-height: 1.55;
}
.serve-card-uses li::before {
    content:     '✓';
    color:       var(--clr-green);
    font-weight: 700;
    flex-shrink: 0;
    font-size:   0.6875rem;
    margin-top:  3px;
}
.serve-card-cta {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--sp-2);
    padding:         0.5625rem 1.125rem;
    border:          1px solid var(--color-border);
    border-radius:   6px;
    font-family:     var(--font-display);
    font-size:       0.8125rem;
    font-weight:     600;
    color:           var(--color-muted);
    text-decoration: none;
    background:      transparent;
    transition:      background 0.18s, border-color 0.18s, color 0.18s;
    align-self:      flex-start;
}
.serve-card:hover .serve-card-cta { border-color: var(--clr-green-border); color: var(--clr-green); background: var(--clr-green-subtle); }
.serve-card-cta:focus-visible { outline: 2px solid var(--clr-green); outline-offset: 3px; }

/* ── Features / Bento section ───────────────────────────────── */
.features {
    padding:    var(--sp-20) var(--sp-8);
    position:   relative;
    overflow:   hidden;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}
.features-inner {
    max-width: 1200px;
    margin:    0 auto;
    display:   grid;
    grid-template-columns: 1fr 1.4fr;
    gap:       var(--sp-16);
    align-items: start;
}
.features-header { }
.features-header .section-heading {
    font-size:   clamp(2.25rem, 3.5vw, 3.5rem);
    line-height: 1.05;
    max-width:   400px;
}
.features-header .section-sub { margin-bottom: 0; }

.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:     1.25rem;
}
/* Bento stagger: second card shifts down */
.features-grid .feature-card:nth-child(2) {
    margin-top: 2.5rem;
}
/* Third card spans full width */
.features-grid .feature-card:nth-child(3) {
    grid-column: 1 / -1;
    margin-top:  0;
    display:     flex;
    align-items: center;
    gap:         var(--sp-8);
}
.features-grid .feature-card:nth-child(3) .feature-icon  { flex-shrink: 0; }
.features-grid .feature-card:nth-child(3) .feature-title { margin-bottom: var(--sp-2); }
.features-grid .feature-card:nth-child(3) .feature-body  { flex: 1; margin-bottom: 0; }

.feature-card {
    padding:       var(--sp-7);
    background:    #131313;
    border:        1px solid rgba(255,255,255,0.055);
    border-radius: 14px;
    transition:    border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
    position:      relative;
    overflow:      hidden;
}
.feature-card:hover {
    border-color: rgba(202,255,111,0.18);
    box-shadow:   0 4px 40px rgba(202,255,111,0.07);
    transform:    translateY(-2px);
}
.feature-icon {
    width:         36px;
    height:        36px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin-bottom: var(--sp-5);
    flex-shrink:   0;
    color:         var(--clr-green);
}
.feature-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.feature-title {
    font-family:    var(--font-display);
    font-size:      1.0625rem;
    font-weight:    700;
    color:          var(--color-ink);
    margin-bottom:  var(--sp-3);
    letter-spacing: -0.025em;
}
.feature-body {
    font-family: var(--font-body);
    font-size:   0.875rem;
    color:       var(--color-muted);
    line-height: 1.75;
}

/* ── Why Lohki — split section ──────────────────────────────── */
.why-lohki {
    padding:    var(--sp-20) var(--sp-8);
    background: var(--color-bg);
    overflow:   hidden;
}
.why-lohki-inner {
    max-width: 1200px;
    margin:    0 auto;
    display:   grid;
    grid-template-columns: 1fr 1fr;
    gap:       var(--sp-16);
    align-items: center;
}
.why-lohki-visual {
    position: relative;
}
.why-lohki-img {
    width:   100%;
    height:  auto;
    display: block;
}
.why-lohki-badge {
    display:        inline-flex;
    margin-top:     var(--sp-4);
    display:        inline-flex;
    align-items:    center;
    gap:            var(--sp-2);
    padding:        0.5rem 1rem;
    background:     rgba(14,14,14,0.85);
    backdrop-filter: blur(8px);
    border:         1px solid var(--clr-green-border);
    border-radius:  var(--r-pill);
    font-family:    var(--font-display);
    font-size:      0.6875rem;
    font-weight:    700;
    color:          var(--clr-green);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.why-lohki-badge-dot {
    width:        5px;
    height:       5px;
    border-radius: 50%;
    background:   var(--clr-green);
    animation:    pulse-dot 2s ease-in-out infinite;
}
.why-lohki-frame {
    display: none;
}
.why-lohki-text { }
.why-lohki-list {
    list-style:    none;
    display:       flex;
    flex-direction: column;
    gap:           var(--sp-6);
    margin-top:    var(--sp-2);
}
.why-lohki-item {
    display:     flex;
    align-items: flex-start;
    gap:         var(--sp-4);
}
.why-lohki-dot {
    width:            20px;
    height:           20px;
    border-radius:    50%;
    background:       var(--clr-green-subtle);
    border:           1px solid var(--clr-green-border);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    margin-top:       3px;
}
.why-lohki-dot::after {
    content:      '';
    width:        6px;
    height:       6px;
    border-radius: 50%;
    background:   var(--clr-green);
}
.why-lohki-item-title {
    font-family:   var(--font-display);
    font-size:     1rem;
    font-weight:   700;
    color:         var(--color-ink);
    margin-bottom: var(--sp-1);
    letter-spacing: -0.02em;
}
.why-lohki-item-body {
    font-family: var(--font-body);
    font-size:   0.875rem;
    color:       var(--color-muted);
    line-height: 1.7;
}

/* ── How it works ───────────────────────────────────────────── */
.how-it-works {
    padding:    var(--sp-20) var(--sp-8);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}
.how-it-works-inner {
    max-width: 1200px;
    margin:    0 auto;
}
.steps-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1px;
    margin-top:            var(--sp-10);
    background:            var(--color-border);
    border-radius:         12px;
    overflow:              hidden;
    border:                1px solid var(--color-border);
}
.step-item {
    text-align:  left;
    position:    relative;
    background:  var(--color-elevated);
    padding:     var(--sp-8);
    transition:  background 0.3s var(--ease-out);
}
.step-item:hover { background: #1e1e1e; }
.step-num {
    width:           38px;
    height:          38px;
    border-radius:   8px;
    background:      var(--clr-green-subtle);
    border:          1px solid var(--clr-green-border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 0 var(--sp-5) 0;
    font-family:     var(--font-display);
    font-size:       0.9375rem;
    font-weight:     700;
    color:           var(--clr-green);
    transition:      background 0.25s, border-color 0.25s, color 0.25s;
}
.step-item:hover .step-num { background: var(--clr-green); border-color: var(--clr-green); color: var(--clr-green-on); }
.step-title {
    font-family:   var(--font-display);
    font-size:     0.9375rem;
    font-weight:   700;
    color:         var(--color-ink);
    margin-bottom: var(--sp-2);
    letter-spacing: -0.02em;
}
.step-body {
    font-family: var(--font-body);
    font-size:   0.8125rem;
    color:       var(--color-muted);
    line-height: 1.7;
}

/* ── Pricing section (home preview) ───────────────────────── */
.pricing-preview { padding: var(--sp-20) var(--sp-8); }
.pricing-preview-inner { max-width: 1200px; margin: 0 auto; }

/* Full pricing page */
.pricing-section {
    padding: var(--sp-20) var(--sp-8);
    background: var(--color-bg);
}
.pricing-section-inner { max-width: 1160px; margin: 0 auto; }
.pricing-header { text-align: center; margin-bottom: var(--sp-12); }
.pricing-header .section-label  { justify-content: center; }
.pricing-header .section-heading { max-width: none; text-align: center; margin: 0 auto var(--sp-4); }
.pricing-header .section-sub     { max-width: 500px; text-align: center; margin: 0 auto; }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:     var(--sp-6);
    margin-bottom: var(--sp-12);
}
.pricing-card {
    background:     var(--color-surface);
    border:         1px solid var(--color-border);
    border-radius:  14px;
    padding:        var(--sp-8);
    padding-top:    calc(var(--sp-8) + 1rem);
    position:       relative;
    display:        flex;
    flex-direction: column;
    transition:     border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-out);
}
.pricing-card:hover { border-color: var(--clr-green-border); box-shadow: 0 8px 48px var(--clr-green-glow); transform: translateY(-3px); }
.pricing-card.featured { border-color: rgba(202,255,111,0.35); box-shadow: 0 4px 32px var(--clr-green-glow); }
.pricing-badge {
    position:       absolute;
    top:            0;
    left:           50%;
    transform:      translate(-50%, -50%);
    display:        inline-flex;
    align-items:    center;
    gap:            var(--sp-1);
    padding:        0.3rem 1rem;
    background:     var(--clr-green);
    color:          var(--clr-green-on);
    font-family:    var(--font-display);
    font-size:      0.625rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius:  var(--r-pill);
    white-space:    nowrap;
    box-shadow:     0 2px 14px rgba(202,255,111,0.3);
}
.plan-name  { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--color-ink); margin-bottom: var(--sp-2); letter-spacing: -0.02em; }
.plan-price { font-family: var(--font-display); font-size: 2.75rem; font-weight: 700; color: var(--clr-green); letter-spacing: -0.04em; line-height: 1; margin-bottom: var(--sp-1); }
.plan-price sup { font-size: 1.125rem; vertical-align: top; margin-top: 0.5rem; }
.plan-price-note { font-family: var(--font-body); font-size: 0.875rem; color: var(--color-muted); margin-bottom: var(--sp-6); }
.plan-divider { height: 1px; background: var(--color-border); margin: var(--sp-6) 0; }
.plan-features { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.plan-features li {
    display:     flex;
    align-items: flex-start;
    gap:         var(--sp-3);
    font-family: var(--font-body);
    font-size:   0.9rem;
    color:       var(--color-muted);
    line-height: 1.5;
}
.plan-features li::before { content: '✓'; color: var(--clr-green); font-weight: 700; font-size: 0.75rem; flex-shrink: 0; margin-top: 3px; }
.btn-plan {
    display:         block;
    width:           100%;
    padding:         0.875rem;
    text-align:      center;
    text-decoration: none;
    font-family:     var(--font-display);
    font-size:       0.9rem;
    font-weight:     700;
    white-space:     nowrap;
    border-radius:   8px;
    transition:      background 0.18s, transform 0.12s var(--ease-spring), box-shadow 0.18s;
    margin-top:      auto;
    letter-spacing:  0.01em;
}
.btn-plan:active { transform: scale(0.98); }
.btn-plan:focus-visible { outline: 2px solid var(--clr-green); outline-offset: 3px; }
.btn-plan-primary { background: var(--clr-green); color: var(--clr-green-on); box-shadow: 0 4px 20px rgba(202,255,111,0.2); }
.btn-plan-primary:hover { background: var(--clr-green-dark); box-shadow: 0 6px 28px rgba(202,255,111,0.3); }
.btn-plan-secondary { background: var(--color-elevated); color: var(--color-ink); border: 1px solid var(--color-border); }
.btn-plan-secondary:hover { background: #202020; border-color: rgba(202,255,111,0.2); }

.custom-cta-card {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: 14px;
    padding:       var(--sp-8);
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    gap:           var(--sp-8);
    flex-wrap:     wrap;
}
.custom-cta-text h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; margin-bottom: var(--sp-2); letter-spacing: -0.02em; }
.custom-cta-text p  { font-family: var(--font-body); font-size: 0.9rem; color: var(--color-muted); max-width: 500px; }

/* Plan hosting badge */
.plan-hosting-badge {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--sp-1);
    padding:         0.15rem 0.5rem;
    background:      transparent;
    border:          1px solid var(--color-border);
    border-radius:   var(--r-pill);
    font-family:     var(--font-display);
    font-size:       0.625rem;
    font-weight:     600;
    color:           var(--color-muted);
    text-transform:  uppercase;
    letter-spacing:  0.06em;
    margin-bottom:   var(--sp-3);
}

/* ── Portfolio section ──────────────────────────────────────── */
/* Hidden until content is ready — also hides testimonials below */
.portfolio-section,
.testimonials-section { display: none; }

.portfolio-section {
    padding:    var(--sp-20) var(--sp-8);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    overflow:   hidden;
}
.portfolio-inner { max-width: 1200px; margin: 0 auto; }
.portfolio-placeholder {
    margin-top:    var(--sp-10);
    background:    var(--color-surface);
    border:        1px dashed rgba(202,255,111,0.15);
    border-radius: 14px;
    padding:       var(--sp-16) var(--sp-8);
    text-align:    center;
    position:      relative;
    overflow:      hidden;
}
.portfolio-placeholder::before {
    content:    '';
    position:   absolute;
    top:        50%;
    left:       50%;
    transform:  translate(-50%, -50%);
    width:      500px;
    height:     300px;
    background: radial-gradient(ellipse, rgba(202,255,111,0.05) 0%, transparent 65%);
    pointer-events: none;
}
.portfolio-coming-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--sp-2);
    padding:        0.35rem 1rem;
    background:     var(--clr-green-subtle);
    border:         1px solid var(--clr-green-border);
    border-radius:  var(--r-pill);
    font-family:    var(--font-display);
    font-size:      0.6875rem;
    font-weight:    700;
    color:          var(--clr-green);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom:  var(--sp-5);
}
.portfolio-coming-badge::before {
    content:       '';
    width:         5px;
    height:        5px;
    border-radius: 50%;
    background:    var(--clr-green);
    animation:     pulse-dot 2s ease-in-out infinite;
}
.portfolio-placeholder h3 {
    font-family:    var(--font-display);
    font-size:      1.625rem;
    font-weight:    700;
    letter-spacing: -0.03em;
    color:          var(--color-ink);
    margin-bottom:  var(--sp-3);
}
.portfolio-placeholder p { font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-muted); max-width: 440px; margin: 0 auto; line-height: 1.75; }

/* ── Testimonials section ───────────────────────────────────── */
.testimonials-section {
    padding:    var(--sp-20) var(--sp-8);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}
.testimonials-inner { max-width: 1200px; margin: 0 auto; }
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:     var(--sp-5);
    margin-top: var(--sp-10);
}
.testimonial-card {
    background:    var(--color-bg);
    border:        1px solid var(--color-border);
    border-radius: 12px;
    padding:       var(--sp-6);
    position:      relative;
}
.testimonial-stars { display: flex; gap: 2px; margin-bottom: var(--sp-4); color: #F59E0B; font-size: 0.8125rem; }
.testimonial-quote { font-family: var(--font-body); font-size: 0.9rem; color: var(--color-muted); line-height: 1.75; margin-bottom: var(--sp-6); font-style: italic; }
.testimonial-quote::before { content: '"'; color: var(--clr-green); font-size: 1.75rem; line-height: 0; vertical-align: -0.4rem; margin-right: 2px; font-style: normal; }
.testimonial-author { display: flex; align-items: center; gap: var(--sp-3); }
.testimonial-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--clr-green); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; color: var(--clr-green-on); flex-shrink: 0; }
.testimonial-name { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; color: var(--color-ink); }
.testimonial-role { font-family: var(--font-body); font-size: 0.75rem; color: var(--color-muted); }
.testimonials-coming {
    grid-column: 1 / -1;
    background:    var(--color-bg);
    border:        1px dashed rgba(202,255,111,0.12);
    border-radius: 12px;
    padding:       var(--sp-10);
    text-align:    center;
}
.testimonials-coming p { font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-muted); font-style: italic; }
.testimonials-coming strong { color: var(--clr-green); font-style: normal; }

/* ── CTA section — lime block ───────────────────────────────── */
.cta-section {
    padding:    var(--sp-16) var(--sp-8);
    background: var(--color-bg);
}
.cta-inner-block {
    background:    var(--clr-green);
    border-radius: 20px;
    padding:       var(--sp-16) var(--sp-12);
    position:      relative;
    overflow:      hidden;
    max-width:     1200px;
    margin:        0 auto;
}
.cta-inner-block::before {
    content:   '';
    position:  absolute;
    top:       -60px;
    right:     -60px;
    width:     340px;
    height:    340px;
    background: rgba(0,0,0,0.08);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    transform: rotate(20deg);
    transition: transform 1.2s var(--ease-out);
}
.cta-inner-block:hover::before { transform: rotate(65deg); }
.cta-inner-block::after {
    content:   '';
    position:  absolute;
    bottom:    -80px;
    left:      -40px;
    width:     220px;
    height:    220px;
    background: rgba(0,0,0,0.05);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.cta-content {
    position:  relative;
    z-index:   1;
    max-width: 640px;
}
.cta-heading {
    font-family:    var(--font-display);
    font-size:      clamp(2.25rem, 4vw, 3.5rem);
    font-weight:    700;
    letter-spacing: -0.04em;
    color:          var(--clr-green-on);
    margin-bottom:  var(--sp-4);
    line-height:    1.05;
}
.cta-body {
    font-family:   var(--font-body);
    font-size:     1.0625rem;
    color:         rgba(14,31,0,0.7);
    line-height:   1.7;
    margin-bottom: var(--sp-8);
}
.btn-cta {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--sp-2);
    padding:         0.9375rem 2rem;
    background:      var(--clr-green-on);
    color:           var(--clr-green);
    font-family:     var(--font-display);
    font-size:       1rem;
    font-weight:     700;
    border-radius:   8px;
    text-decoration: none;
    transition:      background 0.18s, transform 0.12s var(--ease-spring);
    letter-spacing:  0.01em;
}
.btn-cta:hover  { background: #1a2e00; transform: scale(1.02); }
.btn-cta:active { transform: scale(0.98); }
.btn-cta:focus-visible { outline: 2px solid var(--clr-green-on); outline-offset: 3px; }

/* Legacy centred CTA (other pages) */
.cta-section.text-center-cta {
    padding:    var(--sp-20) var(--sp-8);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    position:   relative;
    overflow:   hidden;
    text-align: center;
}
.cta-section.text-center-cta::before {
    content:   '';
    position:  absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 400px;
    background: radial-gradient(ellipse, rgba(202,255,111,0.07) 0%, transparent 65%);
    pointer-events: none;
}
.cta-inner { position: relative; max-width: 640px; margin: 0 auto; z-index: 1; }
.cta-section.text-center-cta .cta-heading { color: var(--color-ink); }
.cta-section.text-center-cta .cta-body    { color: var(--color-muted); }

/* ── About page ─────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
   ABOUT PAGE — reference: lohki_about_us
   ══════════════════════════════════════════════════════════════ */

/* Prism watermark is rendered via body::after in about.php <style> tag
   (body has no transform so position:fixed is guaranteed viewport-locked) */

/* ── Shared layout ───────────────────────────────────────────── */
.ab-wrap {
    max-width: 1200px;
    margin:    0 auto;
    padding:   0 var(--sp-8);
}
.ab-accent { color: #caff6f; }

/* ── Hero ────────────────────────────────────────────────────── */
.ab-hero {
    position:   relative;
    z-index:    2;
    background: transparent;
    padding:    calc(var(--sp-16) + 64px) 0 var(--sp-20);
}
.ab-hero-grid {
    display:               grid;
    grid-template-columns: 8fr 4fr;
    gap:                   var(--sp-12);
    align-items:           flex-end;
    margin-bottom:         var(--sp-12);
}
.ab-label {
    display:        inline-block;
    padding:        0.25rem 0.875rem;
    border:         1px solid rgba(202,255,111,0.3);
    border-radius:  var(--r-pill);
    font-family:    var(--font-display);
    font-size:      0.6875rem;
    font-weight:    600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          #caff6f;
    margin-bottom:  var(--sp-8);
}
.ab-hero-h1 {
    font-family:    var(--font-display);
    font-size:      clamp(2.5rem, 5vw, 4.75rem);
    font-weight:    700;
    letter-spacing: -0.04em;
    line-height:    1.0;
    color:          #fff;
}
.ab-hero-tagline {
    font-family:   var(--font-body);
    font-size:     1.125rem;
    color:         rgba(255,255,255,0.6);
    line-height:   1.6;
    margin-top:    var(--sp-6);
    font-weight:   400;
}
.ab-hero-body {
    font-family:  var(--font-body);
    font-size:    1.0625rem;
    color:        rgba(255,255,255,0.5);
    line-height:  1.75;
    padding-bottom: var(--sp-4);
}

/* ── Narrative / Raven ───────────────────────────────────────── */
.ab-narrative {
    position:   relative;
    z-index:    2;
    background: transparent;
    padding:    var(--sp-20) 0 var(--sp-20);
}
.ab-narrative-grid {
    display:               grid;
    grid-template-columns: 6fr 5fr;
    gap:                   var(--sp-16);
    align-items:           center;
}

/* Raven image */
.ab-raven-col { position: relative; }
.ab-raven-frame {
    position:      relative;
    aspect-ratio:  4/5;
    overflow:      hidden;
    border-radius: 4px;
    background:    #111311;
}
.ab-raven-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    opacity:    0.7;
    transition: transform 0.7s var(--ease-out), opacity 0.7s var(--ease-out);
}
.ab-raven-frame:hover .ab-raven-img {
    transform: scale(1.05);
    opacity:   0.85;
}
.ab-raven-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, #080908 0%, rgba(8,9,8,0.4) 50%, transparent 100%);
}
.ab-raven-caption {
    position: absolute;
    bottom:   var(--sp-8);
    left:     var(--sp-8);
}
.ab-raven-num {
    display:        block;
    font-family:    var(--font-display);
    font-size:      3.5rem;
    font-weight:    700;
    letter-spacing: -0.04em;
    color:          #caff6f;
    line-height:    1;
}
.ab-raven-sub {
    font-family:    var(--font-display);
    font-size:      1.125rem;
    font-weight:    700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color:          #fff;
    margin-top:     var(--sp-2);
}

/* Narrative text */
.ab-narrative-h2 {
    font-family:    var(--font-display);
    font-size:      clamp(2rem, 3.5vw, 3rem);
    font-weight:    700;
    letter-spacing: -0.04em;
    line-height:    1.1;
    color:          #fff;
    margin-bottom:  var(--sp-8);
}
.ab-narrative-body {
    display:        flex;
    flex-direction: column;
    gap:            var(--sp-5);
    margin-bottom:  var(--sp-10);
}
.ab-narrative-body p {
    font-size:   1.0625rem;
    color:       rgba(255,255,255,0.5);
    line-height: 1.75;
}
.ab-narrative-rule {
    display:     flex;
    align-items: center;
    gap:         var(--sp-4);
}
.ab-narrative-line {
    width:      3rem;
    height:     1px;
    background: rgba(202,255,111,0.35);
}
.ab-narrative-tag {
    font-family:    var(--font-display);
    font-size:      0.6875rem;
    font-weight:    600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color:          #caff6f;
}

/* ── Core Values ─────────────────────────────────────────────── */
.ab-values {
    position:   relative;
    z-index:    2;
    background: transparent;
    padding:    var(--sp-20) 0 calc(var(--sp-20) + 3rem);
}
.ab-values-head {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-end;
    margin-bottom:   var(--sp-16);
    gap:             var(--sp-8);
}
.ab-values-h2 {
    font-family:    var(--font-display);
    font-size:      clamp(3rem, 5vw, 4.5rem);
    font-weight:    700;
    letter-spacing: -0.04em;
    color:          #fff;
    line-height:    1;
}
.ab-values-sub {
    font-family:    var(--font-display);
    font-size:      0.75rem;
    font-weight:    500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.35);
    max-width:      260px;
    text-align:     right;
    line-height:    1.6;
}
.ab-values-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--sp-5);
    align-items:           start;
}
.ab-value-card {
    background:    #222222;
    padding:       var(--sp-10);
    display:       flex;
    flex-direction: column;
    justify-content: space-between;
    min-height:    400px;
    transition:    background 0.3s var(--ease-out);
    border-radius: 2px;
}
.ab-value-card:hover { background: #2a2c2a; }
.ab-value-card:hover .ab-value-title { color: #caff6f; }
.ab-value-card--offset { transform: translateY(3rem); }
.ab-value-icon {
    width:  36px;
    height: 36px;
    color:  #caff6f;
    flex-shrink: 0;
}
.ab-value-icon svg { width: 100%; height: 100%; }
.ab-value-bottom { margin-top: auto; }
.ab-value-title {
    font-family:    var(--font-display);
    font-size:      1.25rem;
    font-weight:    700;
    letter-spacing: -0.025em;
    color:          #fff;
    margin-bottom:  var(--sp-4);
    transition:     color 0.3s var(--ease-out);
}
.ab-value-body {
    font-family: var(--font-body);
    font-size:   0.875rem;
    color:       rgba(255,255,255,0.45);
    line-height: 1.75;
}

/* ── CTA ─────────────────────────────────────────────────────── */
.ab-cta-section {
    position:   relative;
    z-index:    2;
    background: transparent;
    padding:    var(--sp-20) 0 var(--sp-20);
}
.ab-cta-inner {
    position:      relative;
    background:    #000;
    border-radius: 4px;
    padding:       var(--sp-20) var(--sp-16);
    text-align:    center;
    overflow:      hidden;
}
.ab-cta-blob {
    position:      absolute;
    width:         256px;
    height:        256px;
    border-radius: 50%;
    filter:        blur(100px);
    pointer-events: none;
}
.ab-cta-blob--tr {
    top:    -6rem;
    right:  -6rem;
    background: rgba(202,255,111,0.2);
}
.ab-cta-blob--bl {
    bottom: -6rem;
    left:   -6rem;
    background: rgba(202,255,111,0.1);
}
.ab-cta-h2 {
    font-family:    var(--font-display);
    font-size:      clamp(2.5rem, 5vw, 4rem);
    font-weight:    700;
    letter-spacing: -0.04em;
    color:          #fff;
    line-height:    1.05;
    margin-bottom:  var(--sp-6);
    position:       relative;
    z-index:        1;
}
.ab-cta-italic { font-style: italic; }
.ab-cta-body {
    font-size:  1.0625rem;
    color:      rgba(255,255,255,0.5);
    line-height: 1.75;
    max-width:  480px;
    margin:     0 auto var(--sp-10);
    position:   relative;
    z-index:    1;
}
.ab-cta-actions {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             var(--sp-5);
    flex-wrap:       wrap;
    position:        relative;
    z-index:         1;
}
.ab-cta-ghost {
    display:         inline-flex;
    align-items:     center;
    font-family:     var(--font-body);
    font-size:       1rem;
    font-weight:     600;
    color:           rgba(255,255,255,0.55);
    text-decoration: none;
    transition:      color 0.18s var(--ease-out);
}
.ab-cta-ghost:hover { color: #fff; }

/* ── About page responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
    .ab-values-grid { grid-template-columns: repeat(2, 1fr); }
    .ab-value-card--offset { transform: none; }
}
@media (max-width: 768px) {
    .ab-hero-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
    .ab-hero-h1   { font-size: clamp(2.5rem, 9vw, 4rem); }
    .ab-narrative-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
    .ab-raven-frame { aspect-ratio: 3/2; }
    .ab-values-head { flex-direction: column; align-items: flex-start; }
    .ab-values-sub  { text-align: left; }
    .ab-values-grid { grid-template-columns: 1fr; }
    .ab-cta-inner   { padding: var(--sp-12) var(--sp-6); }
    .ab-wrap        { padding: 0 var(--sp-5); }
}

/* ── Contact page ───────────────────────────────────────────── */
.contact-wrap {
    max-width: 1200px;
    margin:    0 auto;
    padding:   var(--sp-20) var(--sp-8);
    display:   grid;
    grid-template-columns: 1fr 1fr;
    gap:       var(--sp-16);
    align-items: start;
}
.contact-info-heading {
    font-family:    var(--font-display);
    font-size:      clamp(2rem, 3.5vw, 2.75rem);
    font-weight:    700;
    letter-spacing: -0.04em;
    margin-bottom:  var(--sp-4);
}
.contact-info-body { font-family: var(--font-body); font-size: 1.0625rem; color: var(--color-muted); line-height: 1.75; margin-bottom: var(--sp-8); }
.contact-detail {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--sp-4);
    padding:       var(--sp-4) 0;
    border-bottom: 1px solid var(--color-border);
}
.contact-detail:last-child { border-bottom: none; }
.contact-detail-icon {
    width:         38px;
    height:        38px;
    background:    var(--clr-green-subtle);
    border:        1px solid var(--clr-green-border);
    border-radius: 8px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
}
.contact-detail-icon svg { width: 16px; height: 16px; stroke: var(--clr-green); fill: none; stroke-width: 2; }
.contact-detail-label { font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); margin-bottom: var(--sp-1); }
.contact-detail-value { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; color: var(--color-ink); }
.contact-detail-value a { text-decoration: none; color: var(--clr-green); transition: opacity 0.18s; }
.contact-detail-value a:hover { opacity: 0.75; }

.contact-form-card {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: 14px;
    padding:       var(--sp-8);
    box-shadow:    var(--shadow-raised);
}
.contact-form-title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: var(--sp-1); }
.contact-form-sub   { font-family: var(--font-body); font-size: 0.875rem; color: var(--color-muted); margin-bottom: var(--sp-6); }

/* ── Auth pages ─────────────────────────────────────────────── */
.auth-wrap {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         var(--sp-12) var(--sp-5);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpolygon points='36,3 69,36 36,69 3,36' fill='none' stroke='%23caff6f' stroke-opacity='0.05' stroke-width='0.5'/%3E%3C/svg%3E"),
        radial-gradient(ellipse at 70% 20%, rgba(202,255,111,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(202,255,111,0.04) 0%, transparent 45%);
}
.auth-card {
    width:         100%;
    max-width:     460px;
    background:    var(--color-surface);
    border-radius: 14px;
    border:        1px solid var(--color-border);
    padding:       var(--sp-10);
    box-shadow:    var(--shadow-float);
}
.auth-logo {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--sp-3);
    margin-bottom:   var(--sp-8);
}
.auth-logo-mark {
    width:         32px;
    height:        32px;
    background:    var(--clr-green);
    border-radius: 6px;
    display:       flex;
    align-items:   center;
    justify-content: center;
}
.auth-logo-mark svg { width: 18px; height: 18px; }
.auth-logo-text { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; color: var(--color-ink); }
.auth-logo-text span { color: var(--clr-green); }
.auth-divider { height: 1px; background: var(--color-border); margin-bottom: var(--sp-8); }
.auth-heading { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: var(--sp-1); }
.auth-sub { font-family: var(--font-body); font-size: 0.875rem; color: var(--color-muted); margin-bottom: var(--sp-6); }
.auth-sub a { color: var(--clr-green); text-decoration: none; font-weight: 600; }
.auth-sub a:hover { opacity: 0.8; }

.btn-submit {
    width:         100%;
    padding:       0.8125rem;
    background:    var(--clr-green);
    color:         var(--clr-green-on);
    font-family:   var(--font-display);
    font-size:     0.9375rem;
    font-weight:   700;
    border:        none;
    border-radius: 8px;
    cursor:        pointer;
    box-shadow:    0 4px 20px rgba(202,255,111,0.2);
    transition:    background 0.18s, box-shadow 0.18s, transform 0.12s var(--ease-spring);
    margin-top:    var(--sp-2);
    outline:       none;
}
.btn-submit:hover  { background: var(--clr-green-dark); box-shadow: 0 4px 24px rgba(202,255,111,0.3); }
.btn-submit:active { transform: scale(0.98); }
.btn-submit:focus-visible { outline: 2px solid var(--clr-green); outline-offset: 3px; }
.terms-note { font-family: var(--font-body); font-size: 0.8rem; color: var(--color-muted); text-align: center; margin-top: var(--sp-4); line-height: 1.55; }

/* Google OAuth button */
.btn-google {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.75rem;
    width:           100%;
    padding:         0.75rem 1.25rem;
    background:      #1a1a1a;
    color:           var(--color-ink);
    font-family:     var(--font-display);
    font-size:       0.9rem;
    font-weight:     600;
    border:          1px solid var(--color-border);
    border-radius:   8px;
    text-decoration: none;
    cursor:          pointer;
    transition:      background 0.15s, border-color 0.15s;
    margin-bottom:   var(--sp-4);
}
.btn-google:hover { background: #202020; border-color: rgba(202,255,111,0.2); }
.btn-google svg { width: 18px; height: 18px; flex-shrink: 0; }

.auth-or {
    display:     flex;
    align-items: center;
    gap:         var(--sp-3);
    margin-bottom: var(--sp-4);
    color:       var(--color-muted);
    font-family: var(--font-body);
    font-size:   0.8125rem;
}
.auth-or::before,
.auth-or::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }

/* Dark form inputs */
body.public-theme .form-input,
body.public-theme .form-select,
body.public-theme .form-textarea {
    background:   var(--color-elevated);
    border-color: var(--color-border);
    color:        var(--color-ink);
    font-family:  var(--font-body);
    border-radius: 8px;
}
body.public-theme .form-input::placeholder,
body.public-theme .form-textarea::placeholder { color: var(--color-muted); }
body.public-theme .form-input:focus,
body.public-theme .form-select:focus,
body.public-theme .form-textarea:focus {
    border-color: var(--clr-green);
    box-shadow:   0 0 0 3px var(--clr-green-glow);
    background:   #1c1c1c;
}

/* ── Footer ─────────────────────────────────────────────────── */
.pub-footer {
    border-top:  1px solid var(--color-border);
    background:  linear-gradient(to bottom, #0a0a0a, #070707);
    padding-top: var(--sp-16);
}
.pub-footer-inner {
    max-width: 1200px;
    margin:    0 auto;
    padding:   0 var(--sp-8) var(--sp-12);
    display:   grid;
    grid-template-columns: 2fr 3fr;
    gap:       var(--sp-16);
}
.pub-footer-brand { display: flex; flex-direction: column; gap: var(--sp-4); }
.pub-footer-logo { text-decoration: none; display: inline-block; }
.pub-footer-logo-img { width: 140px; height: auto; display: block; opacity: 0.9; }
.pub-footer-tagline {
    font-family: var(--font-body);
    font-size:   0.875rem;
    color:       var(--color-muted);
    line-height: 1.65;
    margin:      0;
}
.pub-footer-contact {
    font-family:  var(--font-body);
    font-size:    0.875rem;
    color:        var(--color-muted);
    font-style:   normal;
    line-height:  1.75;
}
.pub-footer-contact a { color: var(--clr-green); text-decoration: none; }
.pub-footer-contact a:hover { opacity: 0.8; }

.pub-footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.pub-footer-col { display: flex; flex-direction: column; }
.pub-footer-col-title {
    font-family:    var(--font-display);
    font-size:      0.6875rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--clr-green);
    margin-bottom:  var(--sp-4);
}
.pub-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.pub-footer-col ul a {
    font-family:    var(--font-body);
    font-size:      0.875rem;
    color:          var(--color-muted);
    text-decoration: none;
    font-weight:    400;
    transition:     color 0.18s;
}
.pub-footer-col ul a:hover { color: var(--color-ink); }

.pub-footer-bottom {
    border-top:     1px solid var(--color-border);
    padding:        var(--sp-5) var(--sp-8);
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    font-family:    var(--font-body);
    font-size:      0.8125rem;
    color:          var(--color-muted);
}
.pub-footer-bottom-links { display: flex; gap: var(--sp-6); padding-right: 70px; }
.pub-footer-bottom-links a { color: var(--color-muted); text-decoration: none; font-family: var(--font-body); }
.pub-footer-bottom-links a:hover { color: var(--color-ink); }

/* ── Mobile nav ─────────────────────────────────────────────── */
.nav-hamburger {
    display:         none;
    flex-direction:  column;
    justify-content: center;
    gap:             5px;
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         var(--sp-2);
    border-radius:   6px;
    transition:      background 0.18s;
}
.nav-hamburger:hover { background: var(--color-surface); }
.nav-hamburger:focus-visible { outline: 2px solid var(--clr-green); outline-offset: 2px; }
.nav-hamburger span {
    display:       block;
    width:         20px;
    height:        1.5px;
    background:    var(--color-ink);
    border-radius: 1px;
    transition:    transform 0.2s var(--ease-out), opacity 0.2s;
}

.mobile-nav-overlay {
    position:   fixed;
    inset:      0;
    z-index:    200;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity:    0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease-out);
}
.mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-nav-drawer {
    position:  absolute;
    top:       0;
    right:     0;
    bottom:    0;
    width:     min(320px, 88vw);
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    display:   flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s var(--ease-spring);
}
.mobile-nav-overlay.open .mobile-nav-drawer { transform: translateX(0); }
.mobile-nav-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         var(--sp-5) var(--sp-6);
    border-bottom:   1px solid var(--color-border);
}
.nav-close {
    background:    none;
    border:        none;
    cursor:        pointer;
    color:         var(--color-muted);
    padding:       var(--sp-2);
    border-radius: 6px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    color 0.18s, background 0.18s;
}
.nav-close svg { width: 20px; height: 20px; }
.nav-close:hover { color: var(--color-ink); background: var(--color-elevated); }
.nav-close:focus-visible { outline: 2px solid var(--clr-green); outline-offset: 2px; }

.mobile-nav-links {
    list-style: none;
    padding:    var(--sp-5);
    display:    flex;
    flex-direction: column;
    gap:        2px;
    flex:       1;
    overflow-y: auto;
}
.mobile-nav-links a {
    display:      block;
    padding:      0.625rem var(--sp-4);
    font-family:  var(--font-display);
    font-size:    0.9rem;
    font-weight:  500;
    color:        var(--color-muted);
    text-decoration: none;
    border-radius: 6px;
    transition:   color 0.18s, background 0.18s;
}
.mobile-nav-links a:hover { color: var(--color-ink); background: rgba(255,255,255,0.05); }
.mobile-nav-divider { height: 1px; background: var(--color-border); margin: var(--sp-2) 0; }
.mobile-nav-cta {
    background:  var(--clr-green) !important;
    color:       var(--clr-green-on) !important;
    font-weight: 700 !important;
    text-align:  center;
    margin-top:  var(--sp-2);
}
.mobile-nav-portal { color: var(--clr-green) !important; }

/* ── WhatsApp float ─────────────────────────────────────────── */
.whatsapp-float {
    position:        fixed;
    bottom:          var(--sp-6);
    right:           var(--sp-6);
    z-index:         150;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0.875rem;
    background:      #25D366;
    color:           #fff;
    text-decoration: none;
    border-radius:   50%;
    box-shadow:      0 4px 20px rgba(37,211,102,0.4);
    transition:      transform 0.2s var(--ease-spring), box-shadow 0.2s;
}
.whatsapp-float svg { width: 22px; height: 22px; }
.whatsapp-float:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 28px rgba(37,211,102,0.5); }
.whatsapp-float:active { transform: scale(0.97); }
.whatsapp-float:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 50%; }

/* ── Pricing tabs ───────────────────────────────────────────── */
.pricing-tabs-wrap { margin-bottom: var(--sp-10); }
.pricing-tabs {
    display:         flex;
    gap:             var(--sp-2);
    background:      var(--color-surface);
    border:          1px solid var(--color-border);
    border-radius:   12px;
    padding:         var(--sp-2);
    width:           fit-content;
    margin:          0 auto var(--sp-2);
    flex-wrap:       wrap;
    justify-content: center;
}
.pricing-tab-btn {
    padding:       0.5rem 1.375rem;
    border-radius: 8px;
    border:        none;
    background:    transparent;
    color:         var(--color-muted);
    font-family:   var(--font-display);
    font-size:     0.875rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    background 0.2s, color 0.2s;
    white-space:   nowrap;
}
.pricing-tab-btn:hover { color: var(--color-ink); }
.pricing-tab-btn.active { background: var(--clr-green); color: var(--clr-green-on); box-shadow: 0 2px 12px rgba(202,255,111,0.25); }
.pricing-tab-btn:focus-visible { outline: 2px solid var(--clr-green); outline-offset: 2px; border-radius: 8px; }
.pricing-tabs-hint { text-align: center; font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-muted); }
.pricing-tab-panel { display: none; }
.pricing-tab-panel.active { display: block; }
.pricing-plans-grid { display: grid; gap: var(--sp-6); margin-top: var(--sp-5); margin-bottom: var(--sp-10); }
.pricing-plans-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.pricing-plans-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.pricing-card.quote-card {
    border-color: var(--color-border);
    background:   var(--color-bg);
    text-align:   center;
    padding:      calc(var(--sp-8) + 1rem) var(--sp-8) var(--sp-8);
}
.quote-card .plan-price { font-size: 1.375rem; color: var(--color-muted); letter-spacing: 0; }
.quote-card .plan-desc { font-family: var(--font-body); font-size: 0.9rem; color: var(--color-muted); line-height: 1.7; max-width: 320px; margin: 0 auto var(--sp-6); }
.quote-card .plan-examples { list-style: none; text-align: left; display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.quote-card .plan-examples li { font-family: var(--font-body); font-size: 0.875rem; color: var(--color-muted); padding-left: var(--sp-5); position: relative; line-height: 1.5; }
.quote-card .plan-examples li::before { content: '→'; position: absolute; left: 0; color: var(--clr-green); }

/* ── FAQ section ────────────────────────────────────────────── */
.faq-section {
    padding:    var(--sp-20) var(--sp-8);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    overflow:   hidden;
}
.faq-inner { max-width: 800px; margin: 0 auto; }
.faq-inner .section-heading { text-align: center; max-width: none; margin-bottom: var(--sp-2); }
.faq-inner .section-label   { justify-content: center; }
.faq-inner .section-sub     { text-align: center; max-width: none; }

.faq-group { margin-top: var(--sp-10); }
.faq-group-title {
    font-family:    var(--font-display);
    font-size:      0.6875rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--clr-green);
    margin-bottom:  var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom:  1px solid var(--color-border);
}
.faq-item { border-bottom: 1px solid var(--color-border); overflow: hidden; }
.faq-question {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         var(--sp-5) 0;
    cursor:          pointer;
    background:      none;
    border:          none;
    width:           100%;
    text-align:      left;
    color:           var(--color-ink);
    font-family:     var(--font-body);
    font-size:       0.9375rem;
    font-weight:     500;
    gap:             var(--sp-4);
    transition:      color 0.18s;
}
.faq-question:hover { color: var(--clr-green); }
.faq-question:focus-visible { outline: 2px solid var(--clr-green); outline-offset: 2px; border-radius: 3px; }
.faq-icon {
    width:         22px;
    height:        22px;
    border:        1px solid var(--color-border);
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    transition:    background 0.2s, border-color 0.2s, transform 0.3s var(--ease-spring);
    color:         var(--color-muted);
}
.faq-icon svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; }
.faq-item.open .faq-icon { background: var(--clr-green); border-color: var(--clr-green); color: var(--clr-green-on); transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease-out); }
.faq-answer-inner { padding: 0 0 var(--sp-5); font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-muted); line-height: 1.75; }
.faq-item.open .faq-answer { max-height: 300px; }

/* ── CMS sections ───────────────────────────────────────────── */
.cms-teaser {
    padding:    var(--sp-20) var(--sp-8);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    position:   relative;
    overflow:   hidden;
}
.cms-teaser::before {
    content:   '';
    position:  absolute;
    top:       -100px;
    right:     -100px;
    width:     400px;
    height:    400px;
    background: radial-gradient(circle, rgba(202,255,111,0.05) 0%, transparent 65%);
    pointer-events: none;
}
.cms-teaser-inner {
    max-width: 1200px;
    margin:    0 auto;
    display:   grid;
    grid-template-columns: 1fr 1fr;
    gap:       var(--sp-16);
    align-items: center;
    position:  relative;
    z-index:   1;
}
.cms-teaser-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--sp-2);
    padding:        0.35rem 1rem;
    background:     var(--clr-green-subtle);
    border:         1px solid var(--clr-green-border);
    border-radius:  var(--r-pill);
    font-family:    var(--font-display);
    font-size:      0.6875rem;
    font-weight:    700;
    color:          var(--clr-green);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom:  var(--sp-5);
}
.cms-teaser-heading {
    font-family:    var(--font-display);
    font-size:      clamp(1.75rem, 3vw, 2.5rem);
    font-weight:    700;
    letter-spacing: -0.04em;
    color:          var(--color-ink);
    margin-bottom:  var(--sp-4);
}
.cms-teaser-body {
    font-family:   var(--font-body);
    font-size:     1rem;
    color:         var(--color-muted);
    line-height:   1.75;
    margin-bottom: var(--sp-6);
}
.cms-features-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-8); }
.cms-features-list li { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-body); font-size: 0.9rem; color: var(--color-muted); }
.cms-features-list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--clr-green); flex-shrink: 0; }
.cms-notify-form { display: flex; gap: var(--sp-3); max-width: 400px; flex-wrap: wrap; }
.cms-notify-input {
    flex:          1;
    min-width:     160px;
    padding:       0.75rem 1rem;
    background:    var(--color-bg);
    border:        1px solid var(--color-border);
    border-radius: 8px;
    color:         var(--color-ink);
    font-family:   var(--font-body);
    font-size:     0.875rem;
    outline:       none;
    transition:    border-color 0.18s;
}
.cms-notify-input::placeholder { color: var(--color-muted); }
.cms-notify-input:focus { border-color: var(--clr-green); box-shadow: 0 0 0 3px var(--clr-green-glow); }
.cms-notify-btn {
    padding:       0.75rem 1.25rem;
    background:    var(--clr-green);
    color:         var(--clr-green-on);
    border:        none;
    border-radius: 8px;
    font-family:   var(--font-display);
    font-size:     0.875rem;
    font-weight:   700;
    cursor:        pointer;
    transition:    background 0.18s, transform 0.12s var(--ease-spring);
    white-space:   nowrap;
}
.cms-notify-btn:hover { background: var(--clr-green-dark); }
.cms-notify-btn:active { transform: scale(0.97); }
.cms-notify-btn:focus-visible { outline: 2px solid var(--clr-green); outline-offset: 3px; }

.cms-teaser-visual { position: relative; display: flex; align-items: center; justify-content: center; }
.cms-mockup {
    width:         100%;
    max-width:     400px;
    background:    var(--color-bg);
    border:        1px solid var(--color-border);
    border-radius: 14px;
    overflow:      hidden;
    box-shadow:    0 24px 64px rgba(0,0,0,0.4);
}
.cms-mockup-bar { background: var(--color-elevated); border-bottom: 1px solid var(--color-border); padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); }
.cms-mockup-dots { display: flex; gap: 5px; }
.cms-mockup-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border); }
.cms-mockup-title { font-family: var(--font-display); font-size: 0.6875rem; color: var(--color-muted); font-weight: 500; }
.cms-mockup-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.cms-mockup-row { display: flex; align-items: center; gap: var(--sp-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: var(--sp-3) var(--sp-4); }
.cms-mockup-icon { width: 18px; height: 18px; background: var(--clr-green-subtle); border-radius: 4px; flex-shrink: 0; }
.cms-mockup-lines { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cms-mockup-line { height: 5px; background: var(--color-border); border-radius: 2px; }
.cms-mockup-line.short { width: 55%; }
.cms-mockup-stat { padding: var(--sp-3) var(--sp-4); background: var(--clr-green-subtle); border: 1px solid var(--clr-green-border); border-radius: 8px; font-family: var(--font-display); font-size: 0.75rem; color: var(--clr-green); font-weight: 700; text-align: center; }

.cms-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; }
.cms-pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); max-width: 800px; margin: 0 auto; }
.cms-feature-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; }

/* ══════════════════════════════════════════════════════════════
   CMS / Website Management — Feature page
   ══════════════════════════════════════════════════════════════ */

/* ── Layout shell ────────────────────────────────────────────── */
.cms-page-wrap {
    max-width: 1200px;
    margin:    0 auto;
    padding:   0 var(--sp-8);
}

/* ── Hero ─────────────────────────────────────────────────────── */
.cms-hero-section {
    background: #080908;
    padding:    calc(var(--sp-10) + 64px) 0 var(--sp-20);
}
.cms-hero-section .cms-hero-grid {
    display:               grid;
    grid-template-columns: 7fr 5fr;
    gap:                   var(--sp-16);
    align-items:           center;
}
.cms-hero-text .section-label {
    background: rgba(202,255,111,0.08);
    border-color: rgba(202,255,111,0.22);
    color: #caff6f;
}
.cms-hero-h1 {
    font-family:    var(--font-display);
    font-size:      clamp(2.25rem, 4vw, 3.5rem);
    font-weight:    700;
    letter-spacing: -0.04em;
    line-height:    1.08;
    color:          #fff;
    margin-bottom:  var(--sp-5);
}
.cms-hero-h1 .accent { color: #caff6f; }
.cms-hero-body {
    font-size:     1.0625rem;
    color:         rgba(255,255,255,0.55);
    line-height:   1.75;
    margin-bottom: var(--sp-8);
    max-width:     520px;
}
.cms-hero-actions {
    display:     flex;
    align-items: center;
    gap:         var(--sp-5);
    flex-wrap:   wrap;
}
.cms-text-link {
    font-size:       0.9375rem;
    font-weight:     600;
    color:           rgba(255,255,255,0.5);
    text-decoration: none;
    transition:      color 0.18s var(--ease-out);
}
.cms-text-link:hover { color: #fff; }

/* Hero visual */
.cms-hero-visual {
    position: relative;
    display:  flex;
    align-items: center;
    justify-content: center;
}
.cms-hero-glow {
    position:      absolute;
    inset:         -20px;
    background:    radial-gradient(ellipse at 50% 50%, rgba(202,255,111,0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index:       0;
}
.cms-hero-panel {
    position:      relative;
    z-index:       1;
    border-radius: var(--r-xl);
    overflow:      hidden;
    border:        1px solid rgba(255,255,255,0.08);
    box-shadow:    0 0 0 1px rgba(202,255,111,0.06),
                   0 24px 64px rgba(0,0,0,0.5);
    width:         100%;
}
.cms-hero-img {
    width:   100%;
    height:  auto;
    display: block;
}

/* ── Bento feature grid ───────────────────────────────────────── */
.cms-bento-section {
    background: #080908;
    padding:    0 0 var(--sp-20);
}
.cms-bento-grid {
    display:               grid;
    grid-template-columns: repeat(12, 1fr);
    gap:                   var(--sp-4);
}

/* Card base */
.cms-card {
    background:    rgba(255,255,255,0.03);
    border:        1px solid rgba(255,255,255,0.07);
    border-radius: var(--r-xl);
    padding:       var(--sp-8);
    transition:    border-color 0.22s var(--ease-out),
                   background   0.22s var(--ease-out);
}
.cms-card:hover {
    border-color: rgba(202,255,111,0.18);
    background:   rgba(255,255,255,0.045);
}
.cms-card--lg  { grid-column: span 8; }
.cms-card--sm  { grid-column: span 4; }
.cms-card--sm .cms-card-icon { margin-bottom: var(--sp-4); }
.cms-card--row {
    grid-column:  span 12;
    background:   linear-gradient(120deg, rgba(202,255,111,0.06) 0%, rgba(202,255,111,0.02) 40%, rgba(255,255,255,0.02) 100%);
    border-color: rgba(202,255,111,0.14);
    border-left:  3px solid rgba(202,255,111,0.45);
}
.cms-card--row:hover {
    border-color: rgba(202,255,111,0.28);
    border-left-color: rgba(202,255,111,0.7);
}

.cms-card-head { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-8); }
.cms-card-icon {
    width:         40px;
    height:        40px;
    background:    rgba(202,255,111,0.08);
    border:        1px solid rgba(202,255,111,0.18);
    border-radius: var(--r-md);
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
}
.cms-card-icon svg {
    width:  18px;
    height: 18px;
    stroke: #caff6f;
    fill:   none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cms-card-title {
    font-family:    var(--font-display);
    font-size:      1.375rem;
    font-weight:    700;
    letter-spacing: -0.03em;
    color:          #fff;
    line-height:    1.2;
}
.cms-card-title--sm { font-size: 1.125rem; }
.cms-card-body {
    font-size:   0.9375rem;
    color:       rgba(255,255,255,0.48);
    line-height: 1.7;
    max-width:   480px;
}

/* Card UI decorations (large card) */
.cms-card-ui { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: auto; }
.cms-card-ui-row { display: flex; gap: var(--sp-2); }
.cms-ui-btn {
    width:         36px;
    height:        36px;
    background:    rgba(202,255,111,0.08);
    border:        1px solid rgba(202,255,111,0.18);
    border-radius: var(--r-sm);
    display:       flex;
    align-items:   center;
    justify-content: center;
}
.cms-ui-btn--dim {
    background:  rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}
.cms-ui-btn svg {
    width:        14px;
    height:       14px;
    stroke:       #caff6f;
    fill:         none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cms-ui-btn--dim svg { stroke: rgba(255,255,255,0.3); }
.cms-ui-bar-wrap {
    height:        6px;
    background:    rgba(255,255,255,0.06);
    border-radius: var(--r-pill);
    overflow:      hidden;
}
.cms-ui-bar-wrap--dim .cms-ui-bar { background: rgba(255,255,255,0.18); }
.cms-ui-bar {
    height:        100%;
    background:    linear-gradient(90deg, #caff6f, rgba(202,255,111,0.6));
    border-radius: var(--r-pill);
}

/* Inline editor mock (large bento card) */
.cms-editor-mock {
    margin-top:    var(--sp-6);
    display:       flex;
    flex-direction: column;
    gap:           var(--sp-2);
}
.cms-editor-row { display: flex; align-items: center; }
.cms-editor-field-label {
    font-size:      0.6875rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.3);
    margin-bottom:  var(--sp-1);
}
.cms-editor-field {
    background:    rgba(255,255,255,0.05);
    border:        1px solid rgba(202,255,111,0.25);
    border-radius: var(--r-sm);
    padding:       0.5rem 0.75rem;
    font-size:     0.875rem;
    color:         rgba(255,255,255,0.85);
    font-family:   var(--font-body);
    display:       flex;
    align-items:   center;
    gap:           1px;
    min-height:    36px;
}
.cms-editor-field--dim {
    border-color:   rgba(255,255,255,0.08);
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--sp-2);
    padding:        0.625rem 0.75rem;
}
.cms-editor-cursor {
    display:          inline-block;
    width:            2px;
    height:           1em;
    background:       #caff6f;
    border-radius:    1px;
    vertical-align:   text-bottom;
    animation:        cms-cursor-blink 1.1s step-end infinite;
    flex-shrink:      0;
}
@keyframes cms-cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}
.cms-editor-ghost-line {
    height:        5px;
    background:    rgba(255,255,255,0.12);
    border-radius: var(--r-pill);
    width:         100%;
}
.cms-editor-ghost-line--short { width: 60%; }
.cms-editor-actions {
    display:     flex;
    align-items: center;
    gap:         var(--sp-4);
    margin-top:  var(--sp-4);
}
.cms-editor-publish-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--sp-2);
    background:    #caff6f;
    color:         #0a0c0a;
    font-size:     0.8125rem;
    font-weight:   700;
    padding:       0.4rem 0.875rem;
    border-radius: var(--r-pill);
    cursor:        default;
}
.cms-editor-publish-btn svg {
    width:        12px;
    height:       12px;
    stroke:       #0a0c0a;
    fill:         none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cms-editor-discard {
    font-size:  0.8125rem;
    color:      rgba(255,255,255,0.3);
    cursor:     default;
}

/* Lighthouse score widget (small card) */
.cms-score-widget { margin-top: var(--sp-6); }
.cms-score-label {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       0.8125rem;
    color:           rgba(255,255,255,0.45);
    margin-bottom:   var(--sp-2);
}
.cms-score-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size:   0.875rem;
    color:       #caff6f;
}
.cms-score-bar-wrap {
    height:        8px;
    background:    rgba(255,255,255,0.06);
    border-radius: var(--r-pill);
    overflow:      hidden;
}
.cms-score-bar {
    height:        100%;
    background:    linear-gradient(90deg, #caff6f, #a3d63a);
    border-radius: var(--r-pill);
    box-shadow:    0 0 12px rgba(202,255,111,0.4);
}

/* Lighthouse tab widget (small card) */
.cms-lh-widget { margin-top: var(--sp-6); }
.cms-lh-tabs {
    display:       flex;
    gap:           var(--sp-1);
    background:    rgba(255,255,255,0.04);
    border:        1px solid rgba(255,255,255,0.07);
    border-radius: var(--r-pill);
    padding:       3px;
    margin-bottom: var(--sp-5);
    width:         fit-content;
}
.cms-lh-tab {
    font-family:   var(--font-body);
    font-size:     0.75rem;
    font-weight:   600;
    color:         rgba(255,255,255,0.4);
    background:    transparent;
    border:        none;
    border-radius: var(--r-pill);
    padding:       0.3rem 0.875rem;
    cursor:        pointer;
    transition:    color 0.18s var(--ease-out), background 0.18s var(--ease-out);
}
.cms-lh-tab--active {
    background: rgba(202,255,111,0.12);
    color:      #caff6f;
}
.cms-lh-scores { display: flex; flex-direction: column; gap: var(--sp-3); }
.cms-lh-row { display: flex; flex-direction: column; gap: var(--sp-1); }
.cms-lh-meta {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}
.cms-lh-name {
    font-size:  0.8rem;
    color:      rgba(255,255,255,0.5);
    font-weight: 500;
}
.cms-lh-val {
    font-family: var(--font-display);
    font-size:   0.8125rem;
    font-weight: 700;
    color:       #caff6f;
}
.cms-lh-bar-wrap {
    height:        5px;
    background:    rgba(255,255,255,0.06);
    border-radius: var(--r-pill);
    overflow:      hidden;
}
.cms-lh-bar {
    height:        100%;
    background:    linear-gradient(90deg, #caff6f, #a3d63a);
    border-radius: var(--r-pill);
    box-shadow:    0 0 8px rgba(202,255,111,0.35);
}

/* Analytics row card */
.cms-analytics-inner {
    display:     flex;
    gap:         var(--sp-12);
    align-items: center;
}
.cms-analytics-text { flex: 1; min-width: 0; }
.cms-analytics-title {
    font-family:    var(--font-display);
    font-size:      1.625rem;
    font-weight:    700;
    letter-spacing: -0.03em;
    color:          #fff;
    line-height:    1.2;
    margin-bottom:  var(--sp-3);
}
.cms-analytics-bullets {
    list-style: none;
    padding:    0;
    margin:     var(--sp-5) 0 0;
    display:    flex;
    flex-direction: column;
    gap:        var(--sp-2);
}
.cms-analytics-bullets li {
    font-size:   0.875rem;
    color:       rgba(255,255,255,0.5);
    display:     flex;
    align-items: center;
    gap:         var(--sp-2);
}
.cms-analytics-bullets li::before {
    content:       '';
    width:         5px;
    height:        5px;
    border-radius: 50%;
    background:    #caff6f;
    flex-shrink:   0;
}
.cms-chart-wrap {
    display:     flex;
    align-items: flex-end;
    gap:         var(--sp-2);
    height:      120px;
    flex-shrink: 0;
}
.cms-bar {
    width:         28px;
    background:    rgba(202,255,111,0.18);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    transition:    background 0.22s;
}
.cms-bar--peak {
    background: #caff6f;
    position:   relative;
}
.cms-bar-tooltip {
    position:      absolute;
    top:           -32px;
    left:          50%;
    transform:     translateX(-50%);
    background:    rgba(202,255,111,0.12);
    border:        1px solid rgba(202,255,111,0.3);
    border-radius: var(--r-sm);
    font-size:     0.6875rem;
    font-weight:   600;
    color:         #caff6f;
    white-space:   nowrap;
    padding:       2px 8px;
}

/* ── Pricing ──────────────────────────────────────────────────── */
.cms-pricing-section {
    background: #080908;
    padding:    var(--sp-20) 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.cms-pricing-wrap {
    max-width: 760px;
    margin:    0 auto;
    padding:   0 var(--sp-8);
    text-align: center;
}
.cms-specs-head { text-align: center; margin-bottom: var(--sp-12); }
.cms-specs-h2 {
    font-family:    var(--font-display);
    font-size:      clamp(1.75rem, 3vw, 2.5rem);
    font-weight:    700;
    letter-spacing: -0.04em;
    color:          #fff;
    margin-bottom:  var(--sp-4);
}
.cms-accent-line {
    width:         48px;
    height:        3px;
    background:    #caff6f;
    border-radius: var(--r-pill);
    margin:        0 auto;
    box-shadow:    0 0 12px rgba(202,255,111,0.5);
}
.cms-pricing-card {
    background:    rgba(255,255,255,0.03);
    border:        1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-xl);
    padding:       var(--sp-10);
    margin-bottom: var(--sp-8);
}
.cms-pricing-badge {
    display:       inline-block;
    background:    rgba(202,255,111,0.08);
    border:        1px solid rgba(202,255,111,0.2);
    border-radius: var(--r-pill);
    font-size:     0.75rem;
    font-weight:   600;
    letter-spacing: 0.04em;
    color:         #caff6f;
    padding:       0.25rem 0.875rem;
    margin-bottom: var(--sp-6);
}
.cms-pricing-amount {
    font-family:    var(--font-display);
    font-size:      3rem;
    font-weight:    700;
    letter-spacing: -0.04em;
    color:          #fff;
}
.cms-pricing-period {
    font-size:   1rem;
    color:       rgba(255,255,255,0.4);
    font-weight: 500;
}
.cms-pricing-desc {
    font-size:   0.9375rem;
    color:       rgba(255,255,255,0.45);
    line-height: 1.7;
    max-width:   500px;
    margin:      0 auto var(--sp-8);
}
.cms-pricing-actions {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             var(--sp-4);
    flex-wrap:       wrap;
}
.cms-cta-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--sp-2);
    background:      #caff6f;
    color:           #0a0c0a;
    font-family:     var(--font-body);
    font-size:       1rem;
    font-weight:     700;
    padding:         var(--sp-4) var(--sp-8);
    border-radius:   var(--r-pill);
    text-decoration: none;
    transition:      background 0.18s var(--ease-out),
                     transform  0.12s var(--ease-spring),
                     box-shadow 0.18s var(--ease-out);
    box-shadow:      0 4px 20px rgba(202,255,111,0.3);
}
.cms-cta-btn:hover  { background: #b8ef5a; box-shadow: 0 6px 28px rgba(202,255,111,0.45); }
.cms-cta-btn:active { transform: scale(0.97); }
.cms-cta-btn:focus-visible { outline: 2px solid #caff6f; outline-offset: 3px; }
.cms-outline-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--sp-2);
    background:      transparent;
    color:           rgba(255,255,255,0.6);
    font-family:     var(--font-body);
    font-size:       0.9375rem;
    font-weight:     600;
    padding:         var(--sp-4) var(--sp-6);
    border-radius:   var(--r-pill);
    border:          1px solid rgba(255,255,255,0.15);
    text-decoration: none;
    transition:      color 0.18s var(--ease-out),
                     border-color 0.18s var(--ease-out);
}
.cms-outline-btn:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.cms-feature-list-v2 {
    text-align: left;
    max-width:  360px;
    margin:     0 auto;
}
.cms-feature-list-v2-label {
    font-size:      0.6875rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.3);
    margin-bottom:  var(--sp-4);
}
.cms-feature-list-v2 ul {
    list-style: none;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        var(--sp-3);
}
.cms-feature-list-v2 li {
    font-size:   0.9375rem;
    color:       rgba(255,255,255,0.6);
    display:     flex;
    align-items: center;
    gap:         var(--sp-3);
}
.cms-feature-list-v2 li::before {
    content:       '';
    width:         18px;
    height:        18px;
    background:    rgba(202,255,111,0.1);
    border:        1px solid rgba(202,255,111,0.25);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%23caff6f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink:   0;
}

/* ── How it works ─────────────────────────────────────────────── */
.cms-specs-section {
    background: #080908;
    padding:    var(--sp-20) 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.cms-specs-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   0;
}
.cms-spec-item {
    padding:      var(--sp-8) var(--sp-8) var(--sp-8) 0;
    border-right: 1px solid rgba(255,255,255,0.08);
    padding-right: var(--sp-8);
}
.cms-spec-item:first-child { padding-left: 0; }
.cms-spec-item:last-child  { border-right: none; padding-right: 0; }
.cms-spec-item:not(:first-child) { padding-left: var(--sp-8); }
.cms-spec-item-title {
    font-family:    var(--font-display);
    font-size:      1.0625rem;
    font-weight:    700;
    letter-spacing: -0.02em;
    color:          #caff6f;
    margin-bottom:  var(--sp-3);
}
.cms-spec-item-body {
    font-size:   0.9rem;
    color:       rgba(255,255,255,0.45);
    line-height: 1.7;
}

/* ── CTA ──────────────────────────────────────────────────────── */
.cms-cta-section {
    background: #080908;
    padding:    var(--sp-20) 0 calc(var(--sp-20) + var(--sp-8));
}
.cms-cta-inner {
    position:      relative;
    background:    #0e110e;
    border:        1px solid rgba(202,255,111,0.18);
    border-radius: var(--r-xl);
    padding:       var(--sp-16) var(--sp-12);
    text-align:    center;
    overflow:      hidden;
    animation:     cms-cta-border-pulse 4s ease-in-out infinite;
}
@keyframes cms-cta-border-pulse {
    0%, 100% { border-color: rgba(202,255,111,0.18); box-shadow: 0 0 0 rgba(202,255,111,0); }
    50%       { border-color: rgba(202,255,111,0.42); box-shadow: 0 0 40px rgba(202,255,111,0.07); }
}
.cms-cta-inner::before {
    content:    '';
    position:   absolute;
    top:        0;
    bottom:     0;
    left:       -120px;
    width:      120px;
    background: linear-gradient(90deg, transparent, rgba(202,255,111,0.06), transparent);
    transform:  skewX(-12deg);
    animation:  cms-cta-sweep 5s ease-in-out infinite;
    animation-delay: 1s;
    pointer-events: none;
}
@keyframes cms-cta-sweep {
    0%   { left: -20%; }
    100% { left: 120%; }
}
.cms-cta-content {
    position: relative;
    z-index:  1;
}
.cms-cta-h2 {
    font-family:    var(--font-display);
    font-size:      clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight:    700;
    letter-spacing: -0.04em;
    color:          #fff;
    margin-bottom:  var(--sp-4);
    line-height:    1.1;
}
.cms-cta-body {
    font-size:     1rem;
    color:         rgba(255,255,255,0.5);
    line-height:   1.7;
    max-width:     480px;
    margin:        0 auto var(--sp-8);
}
.cms-cta-actions {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             var(--sp-5);
    flex-wrap:       wrap;
}

/* ── CMS page responsive ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .cms-card--lg  { grid-column: span 12; }
    .cms-card--sm  { grid-column: span 12; }
    .cms-specs-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .cms-hero-section .cms-hero-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
    .cms-hero-visual { display: none; }
    .cms-bento-grid { grid-template-columns: 1fr; }
    .cms-card--lg, .cms-card--sm, .cms-card--row { grid-column: span 1; }
    .cms-analytics-inner { flex-direction: column; gap: var(--sp-8); }
    .cms-chart-wrap { width: 100%; justify-content: space-around; }
    .cms-specs-grid { grid-template-columns: 1fr; }
    .cms-pricing-wrap { padding: 0 var(--sp-5); }
    .cms-page-wrap { padding: 0 var(--sp-5); }
    .cms-cta-inner { padding: var(--sp-10) var(--sp-6); }
}

/* ── Scroll-reveal ──────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }
.reveal-d5 { transition-delay: 0.40s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Scroll snake ───────────────────────────────────────────── */
#snake-wrap { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 9; }
#snake-svg  { position: absolute; top: 0; left: 0; overflow: visible; }
.snake-tongue-g {
    animation:        snake-tongue-flick 3s ease-in-out infinite;
    transform-box:    fill-box;
    transform-origin: left center;
}
@keyframes snake-tongue-flick {
    0%, 55%, 100% { transform: scaleX(1); opacity: 1; }
    28%, 30%      { transform: scaleX(0); opacity: 0; }
}
@media (max-width: 1349px) { #snake-wrap { display: none; } }
@media (prefers-reduced-motion: reduce) { #snake-wrap { display: none; } }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .features-inner { grid-template-columns: 1fr; gap: var(--sp-10); }
    .features-header { position: static; }
    .features-header .section-sub { margin-bottom: var(--sp-4); }
    .features-grid .feature-card:nth-child(even) { margin-top: 0; }
    .features-grid .feature-card:last-child { grid-column: auto; display: block; }
    .why-lohki-inner { grid-template-columns: 1fr; gap: var(--sp-10); }
    .why-lohki-visual { order: -1; }
}

@media (max-width: 1024px) {
    .steps-grid      { grid-template-columns: repeat(2, 1fr); }
    .serve-grid      { grid-template-columns: 1fr 1fr; }
    .cms-teaser-inner { grid-template-columns: 1fr; gap: var(--sp-10); }
    .cms-teaser-visual { display: none; }
    .pub-footer-inner { grid-template-columns: 1fr; gap: var(--sp-10); }
    .pub-footer-nav   { grid-template-columns: repeat(3, 1fr); }
    .pricing-plans-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .pub-nav { padding: 0 var(--sp-5); }
    .pub-nav-links { display: none; }
    .nav-hamburger { display: flex; }
    .hero-inner { grid-template-columns: 1fr; gap: var(--sp-10); }
    .hero-visual { display: none; }
    .hero { padding: var(--sp-12) var(--sp-5) var(--sp-10); }
    .features { padding: var(--sp-12) var(--sp-5); }
    .features-grid { grid-template-columns: 1fr; }
    .how-it-works { padding: var(--sp-12) var(--sp-5); }
    .steps-grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
    .pricing-plans-grid.cols-2,
    .pricing-plans-grid.cols-3 { grid-template-columns: 1fr; }
    .contact-wrap { grid-template-columns: 1fr; gap: var(--sp-8); padding: var(--sp-12) var(--sp-5); }
    /* old about classes — now replaced by ab-* (kept for safety) */
    .about-hero-inner { padding: var(--sp-12) var(--sp-5) var(--sp-10); }
    .serve-section { padding: var(--sp-12) var(--sp-5); }
    .serve-grid { grid-template-columns: 1fr; }
    .portfolio-section { padding: var(--sp-12) var(--sp-5); }
    .testimonials-section { padding: var(--sp-12) var(--sp-5); }
    .testimonials-grid { grid-template-columns: 1fr; }
    .faq-section { padding: var(--sp-12) var(--sp-5); }
    .cms-teaser { padding: var(--sp-12) var(--sp-5); }
    .cta-section { padding: var(--sp-5); }
    .cta-inner-block { padding: var(--sp-10) var(--sp-6); border-radius: 14px; }
    .why-lohki { padding: var(--sp-12) var(--sp-5); }
    .pricing-section { padding: var(--sp-12) var(--sp-5); }
    .custom-cta-card { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
    .pricing-tabs { gap: var(--sp-1); }
    .pricing-tab-btn { padding: 0.5rem 1rem; font-size: 0.8125rem; }
    .pub-footer-inner { padding: 0 var(--sp-5) var(--sp-10); }
    .pub-footer-bottom { padding: var(--sp-5); flex-direction: column; gap: var(--sp-3); text-align: center; }
    .cms-hero-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
    .cms-hero-mockup { display: none; }
    .cms-pricing-grid { grid-template-columns: 1fr; }
    .about-stats { grid-template-columns: repeat(3, 1fr); }
    .stats-strip-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .about-stats { grid-template-columns: 1fr; }
    .pub-footer-nav { grid-template-columns: 1fr 1fr; }
    .pricing-tabs { width: 100%; border-radius: 8px; }
    .pricing-tab-btn { flex: 1; text-align: center; }
    .cms-feature-list { grid-template-columns: 1fr; }
}