/**
 * Infinite Grid landing — recreates the shadway / 21st.dev "Infinite Grid"
 * component as pure CSS + vanilla JS (no React, no framer-motion).
 *
 * Hero stack (bottom to top):
 *   1. Solid dark background (oklch deep navy)
 *   2. Decorative blur orbs (orange / primary / blue radial gradients)
 *   3. Base SVG grid pattern @ 5% opacity, animated translate (0.5px/frame)
 *   4. Masked SVG grid pattern @ 40% opacity, revealed by a 300px radial
 *      gradient mask following the cursor (--mx / --my CSS vars)
 *   5. Hero copy on top
 */

.lg-root {
    --lg-radius: 0.75rem;
    --lg-bg: oklch(0.13 0.02 256);          /* deep ink */
    --lg-bg-elev: oklch(0.18 0.02 256);
    --lg-fg: oklch(0.985 0 0);
    --lg-fg-dim: oklch(0.76 0.01 256);
    --lg-fg-muted: oklch(0.56 0.02 256);
    --lg-border: oklch(1 0 0 / 8%);
    --lg-border-strong: oklch(1 0 0 / 14%);
    --lg-primary: oklch(0.72 0.18 200);     /* cyan accent */
    --lg-primary-fg: oklch(0.13 0.02 256);
    --lg-grid: oklch(1 0 0);                /* white grid lines */
    --lg-grid-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M40 0H0V40' fill='none' stroke='white' stroke-width='1' stroke-opacity='1'/></svg>");
    --lg-orb-orange-color: oklch(0.72 0.18 50);
    --lg-orb-blue-color:   oklch(0.55 0.20 260);

    background: var(--lg-bg);
    color: var(--lg-fg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Light theme override — toggled via :root[data-lg-theme="light"] set by JS
   before paint, so there's no dark-flash on light-mode reloads. */
:root[data-lg-theme="light"] .lg-root {
    --lg-bg: oklch(0.985 0.005 256);
    --lg-bg-elev: oklch(0.97 0.005 256);
    --lg-fg: oklch(0.145 0.02 256);
    --lg-fg-dim: oklch(0.42 0.02 256);
    --lg-fg-muted: oklch(0.56 0.02 256);
    --lg-border: oklch(0.13 0.02 256 / 10%);
    --lg-border-strong: oklch(0.13 0.02 256 / 18%);
    --lg-primary: oklch(0.55 0.20 240);
    --lg-primary-fg: oklch(0.985 0 0);
    --lg-grid: oklch(0.145 0.02 256);
    --lg-grid-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M40 0H0V40' fill='none' stroke='%231a1d2e' stroke-width='1' stroke-opacity='1'/></svg>");
}
.lg-root,
.lg-root *,
.lg-root *::before,
.lg-root *::after { box-sizing: border-box; }
.lg-root a { color: inherit; text-decoration: none; }
.lg-root button { font-family: inherit; cursor: pointer; }
.lg-root ul, .lg-root ol { list-style: none; padding: 0; margin: 0; }
.lg-root img { max-width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------- Container */
.lg-container { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }

/* ---------------------------------------------------------------- Buttons */
.lg-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0 1.25rem;
    height: 2.75rem;
    border: 1px solid transparent;
    transition: background-color .2s, color .2s, border-color .2s, transform .15s;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.lg-btn:focus-visible { outline: 2px solid var(--lg-primary); outline-offset: 2px; }
.lg-btn--primary { background: var(--lg-primary); color: var(--lg-primary-fg); }
.lg-btn--primary:hover { background: color-mix(in oklch, var(--lg-primary) 88%, white); transform: translateY(-1px); }
.lg-btn--ghost {
    background: oklch(1 0 0 / 6%);
    color: var(--lg-fg);
    border-color: var(--lg-border-strong);
}
.lg-btn--ghost:hover { background: oklch(1 0 0 / 12%); }
.lg-btn__icon { width: 1rem; height: 1rem; flex: none; }

/* ---------------------------------------------------------------- Top nav */
.lg-nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 30;
    padding: 1rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem;
    pointer-events: none;
}
.lg-nav__brand,
.lg-nav__menu,
.lg-nav__actions { pointer-events: auto; }

/* Center anchor menu — visible on tablet/desktop, hidden on small phones (where
   the hamburger drawer takes over). */
.lg-nav__menu {
    display: none;
    align-items: center;
    gap: 0.125rem;
    padding: 0.25rem;
    border-radius: 0.625rem;
    background: oklch(1 0 0 / 4%);
    border: 1px solid var(--lg-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
@media (min-width: 900px) { .lg-nav__menu { display: inline-flex; } }
:root[data-lg-theme="light"] .lg-root .lg-nav__menu { background: oklch(1 0 0 / 60%); }
.lg-nav__menu a {
    display: inline-flex; align-items: center;
    height: 2.25rem; padding: 0 0.875rem;
    border-radius: 0.5rem;
    color: var(--lg-fg-dim);
    font-size: 0.8125rem; font-weight: 500;
    transition: background .15s, color .15s;
}
.lg-nav__menu a:hover { background: oklch(1 0 0 / 8%); color: var(--lg-fg); }
:root[data-lg-theme="light"] .lg-root .lg-nav__menu a:hover { background: oklch(0.13 0.02 256 / 6%); }

/* Hamburger button — visible on small screens, hides the menu+CTAs into a drawer */
.lg-nav__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem;
    background: transparent;
    border: 0;
    border-radius: 0.5rem;
    color: var(--lg-fg-dim);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.lg-nav__burger:hover { background: oklch(1 0 0 / 8%); color: var(--lg-fg); }
:root[data-lg-theme="light"] .lg-root .lg-nav__burger:hover { background: oklch(0.13 0.02 256 / 6%); }
.lg-nav__burger svg { width: 1.125rem; height: 1.125rem; }
.lg-nav__burger .icon-x { display: none; }
@media (min-width: 900px) { .lg-nav__burger { display: none; } }

/* Mobile drawer — slides down from the nav when burger is open */
.lg-nav__drawer {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem); left: 1rem; right: 1rem;
    padding: 0.75rem;
    background: oklch(0.15 0.02 256);
    border: 1px solid var(--lg-border-strong);
    border-radius: 0.875rem;
    box-shadow: 0 20px 50px rgba(0,0,0,.5);
    flex-direction: column;
    gap: 0.25rem;
    z-index: 35;
}
:root[data-lg-theme="light"] .lg-root .lg-nav__drawer {
    background: oklch(1 0 0);
    box-shadow: 0 20px 50px oklch(0.13 0.02 256 / 18%);
}
.lg-nav[data-menu-open="true"] .lg-nav__drawer { display: flex; }
.lg-nav[data-menu-open="true"] .lg-nav__burger .icon-menu { display: none; }
.lg-nav[data-menu-open="true"] .lg-nav__burger .icon-x { display: inline-block; }
.lg-nav__drawer a {
    display: block;
    padding: 0.75rem 0.875rem;
    border-radius: 0.5rem;
    color: var(--lg-fg-dim);
    font-size: 0.9375rem; font-weight: 500;
    transition: background .15s, color .15s;
}
.lg-nav__drawer a:hover { background: oklch(1 0 0 / 6%); color: var(--lg-fg); }
:root[data-lg-theme="light"] .lg-root .lg-nav__drawer a:hover { background: oklch(0.13 0.02 256 / 5%); color: var(--lg-fg); }
.lg-nav__drawer-divider {
    height: 1px;
    background: var(--lg-border);
    margin: 0.375rem 0.25rem;
}
.lg-nav__drawer-login {
    margin-top: 0.25rem;
    padding: 0.875rem 0.875rem !important;
    background: var(--lg-primary);
    color: var(--lg-primary-fg) !important;
    text-align: center;
    font-weight: 600 !important;
}
.lg-nav__drawer-login:hover { background: color-mix(in oklch, var(--lg-primary) 90%, white); color: var(--lg-primary-fg) !important; }
.lg-nav__brand {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--lg-fg);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    padding: 0.375rem 0.625rem 0.375rem 0.375rem;
    border-radius: 0.625rem;
    background: oklch(1 0 0 / 4%);
    border: 1px solid var(--lg-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
:root[data-lg-theme="light"] .lg-root .lg-nav__brand { background: oklch(1 0 0 / 60%); }
.lg-nav__brand-mark {
    width: 1.5rem; height: 1.5rem;
    border-radius: 0.375rem;
    background: linear-gradient(135deg, #22d3ee 0%, #6366f1 100%);
    display: inline-flex; align-items: center; justify-content: center;
    color: oklch(0.13 0.02 256);
    font-weight: 800;
    font-size: 0.8125rem;
}
.lg-nav__actions {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    padding: 0.25rem;
    border-radius: 0.625rem;
    background: oklch(1 0 0 / 4%);
    border: 1px solid var(--lg-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
:root[data-lg-theme="light"] .lg-root .lg-nav__actions { background: oklch(1 0 0 / 60%); }

/* Icon-only buttons (theme + lang) and pill login inside the nav */
.lg-icon-btn {
    width: 2.25rem; height: 2.25rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 0.5rem;
    color: var(--lg-fg-dim);
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none;
    position: relative;
}
.lg-icon-btn:hover { background: oklch(1 0 0 / 8%); color: var(--lg-fg); }
:root[data-lg-theme="light"] .lg-root .lg-icon-btn:hover { background: oklch(0.13 0.02 256 / 6%); }
.lg-icon-btn svg { width: 1.05rem; height: 1.05rem; }
.lg-nav__login {
    display: inline-flex; align-items: center;
    height: 2.25rem; padding: 0 0.875rem;
    font-size: 0.8125rem; font-weight: 600;
    color: var(--lg-fg);
    background: oklch(1 0 0 / 8%);
    border-radius: 0.5rem;
    text-decoration: none;
    border: 1px solid var(--lg-border);
    transition: background .15s, color .15s;
}
.lg-nav__login:hover { background: oklch(1 0 0 / 14%); }
:root[data-lg-theme="light"] .lg-root .lg-nav__login { background: oklch(0.13 0.02 256 / 6%); color: var(--lg-fg); border-color: var(--lg-border-strong); }
:root[data-lg-theme="light"] .lg-root .lg-nav__login:hover { background: oklch(0.13 0.02 256 / 10%); }

/* Theme toggle — show only the active icon */
.lg-icon-btn--theme .icon-sun { display: none; }
:root[data-lg-theme="light"] .lg-root .lg-icon-btn--theme .icon-moon { display: none; }
:root[data-lg-theme="light"] .lg-root .lg-icon-btn--theme .icon-sun  { display: inline-block; }

/* Lang dropdown — scoped to nav (no fixed positioning conflict) */
.lg-lang { position: relative; }
.lg-lang > summary { list-style: none; cursor: pointer; }
.lg-lang > summary::-webkit-details-marker { display: none; }
.lg-lang > summary::marker { display: none; content: ''; }
.lg-lang__btn {
    display: inline-flex; align-items: center; gap: 0.25rem;
    height: 2.25rem; padding: 0 0.625rem;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--lg-fg-dim);
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
    transition: background .15s, color .15s;
}
.lg-lang__btn:hover { background: oklch(1 0 0 / 8%); color: var(--lg-fg); }
:root[data-lg-theme="light"] .lg-root .lg-lang__btn:hover { background: oklch(0.13 0.02 256 / 6%); }
.lg-lang[open] > .lg-lang__btn { background: oklch(1 0 0 / 8%); color: var(--lg-fg); }
.lg-lang__btn svg { width: 0.95rem; height: 0.95rem; flex: none; }
.lg-lang__pop {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 11rem;
    background: var(--lg-bg-elev);
    border: 1px solid var(--lg-border-strong);
    border-radius: 0.625rem;
    padding: 0.25rem;
    display: flex; flex-direction: column; gap: 1px;
    box-shadow: 0 14px 40px rgba(0,0,0,.4);
    z-index: 70;
}
:root[data-lg-theme="light"] .lg-root .lg-lang__pop {
    background: oklch(1 0 0);
    border-color: var(--lg-border-strong);
    box-shadow: 0 14px 40px rgba(15,23,42,.16);
}
.lg-lang__item {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.4375rem;
    color: var(--lg-fg-dim);
    text-decoration: none;
    font-size: 0.8125rem; font-weight: 500;
    transition: background .12s;
}
.lg-lang__item:hover { background: oklch(1 0 0 / 6%); color: var(--lg-fg); }
:root[data-lg-theme="light"] .lg-root .lg-lang__item:hover { background: oklch(0.13 0.02 256 / 5%); }
.lg-lang__item.is-active {
    background: oklch(from var(--lg-primary) l c h / 12%);
    color: var(--lg-primary);
    font-weight: 600;
}
.lg-lang__item .check { width: 0.875rem; height: 0.875rem; margin-left: auto; color: var(--lg-primary); }
.lg-lang__item:not(.is-active) .check { display: none; }
.lg-lang__flag { font-size: 1rem; line-height: 1; }

/* ---------------------------------------------------------------- Hero (the showcase) */
.lg-hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    --mx: 50%;
    --my: 50%;
}

/* Layer: deco blur orbs (orange / primary / blue) */
.lg-hero__orbs {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.lg-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    will-change: transform;
}
.lg-hero__orb--orange {
    top: -10%; left: -8%;
    width: 32rem; height: 32rem;
    background: radial-gradient(circle, oklch(0.72 0.18 50) 0%, transparent 60%);
    animation: lg-orb-a 22s ease-in-out infinite;
}
.lg-hero__orb--primary {
    bottom: -15%; right: -10%;
    width: 36rem; height: 36rem;
    background: radial-gradient(circle, var(--lg-primary) 0%, transparent 60%);
    animation: lg-orb-b 28s ease-in-out infinite;
}
.lg-hero__orb--blue {
    top: 30%; left: 55%;
    width: 28rem; height: 28rem;
    background: radial-gradient(circle, oklch(0.55 0.20 260) 0%, transparent 60%);
    opacity: 0.3;
    animation: lg-orb-c 24s ease-in-out infinite;
}
@keyframes lg-orb-a {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(40px, 30px); }
}
@keyframes lg-orb-b {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-50px, -30px); }
}
@keyframes lg-orb-c {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(20px, -40px); }
}

/* Layer: base grid @ 5% opacity */
.lg-hero__grid-base,
.lg-hero__grid-mask {
    position: absolute; inset: 0;
    pointer-events: none;
    background-image: var(--lg-grid-svg);
    background-repeat: repeat;
    background-size: 40px 40px;
    /* Scrolled by JS via background-position */
}
.lg-hero__grid-base { z-index: 2; opacity: 0.05; }
:root[data-lg-theme="light"] .lg-root .lg-hero__grid-base { opacity: 0.08; }
.lg-hero__grid-mask {
    z-index: 3;
    opacity: 0.4;
    -webkit-mask-image: radial-gradient(300px circle at var(--mx) var(--my), black 0%, transparent 100%);
            mask-image: radial-gradient(300px circle at var(--mx) var(--my), black 0%, transparent 100%);
}
:root[data-lg-theme="light"] .lg-root .lg-hero__grid-mask { opacity: 0.55; }
:root[data-lg-theme="light"] .lg-root .lg-hero__orb { opacity: 0.18; }
:root[data-lg-theme="light"] .lg-root .lg-hero__orb--orange { opacity: 0.22; }

/* Layer: subtle vignette so corners fade to ink */
.lg-hero__vignette {
    position: absolute; inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 0%, transparent 50%, var(--lg-bg) 100%);
}

/* Layer: copy */
.lg-hero__copy {
    position: relative;
    z-index: 5;
    max-width: 48rem;
    padding: 0 1.5rem;
    text-align: center;
}
.lg-hero__pill {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    background: oklch(1 0 0 / 6%);
    border: 1px solid var(--lg-border);
    font-size: 0.8125rem;
    color: var(--lg-fg-dim);
    margin-bottom: 1.75rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.lg-hero__pill-dot {
    width: 0.5rem; height: 0.5rem;
    border-radius: 999px;
    background: var(--lg-primary);
    box-shadow: 0 0 8px var(--lg-primary);
    animation: lg-pulse 2s ease-in-out infinite;
}
@keyframes lg-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.3); }
}

.lg-hero__h1 {
    font-size: clamp(2.5rem, 6.5vw, 5rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 0 0 1.5rem;
    color: var(--lg-fg);
    text-wrap: balance;
}
.lg-hero__h1-grad {
    background: linear-gradient(135deg, oklch(0.78 0.16 200) 0%, oklch(0.72 0.18 280) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.lg-hero__lead {
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    color: var(--lg-fg-dim);
    line-height: 1.5;
    max-width: 36rem;
    margin: 0 auto 2.5rem;
}
.lg-hero__cta {
    display: inline-flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 24rem;
}
@media (min-width: 640px) {
    .lg-hero__cta { flex-direction: row; max-width: none; justify-content: center; }
}

.lg-hero__scroll {
    position: absolute;
    bottom: 2rem; left: 50%; transform: translateX(-50%);
    z-index: 5;
    color: var(--lg-fg-muted);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem;
    animation: lg-bob 2.4s ease-in-out infinite;
}
.lg-hero__scroll svg { width: 1rem; height: 1rem; }
@keyframes lg-bob {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.6; }
    50%      { transform: translate(-50%, 6px); opacity: 1; }
}

/* ---------------------------------------------------------------- Section after the fold */
.lg-section {
    padding: 6rem 0;
    position: relative;
    border-top: 1px solid var(--lg-border);
    background:
        linear-gradient(180deg, var(--lg-bg) 0%, oklch(0.16 0.02 256) 100%);
}
:root[data-lg-theme="light"] .lg-root .lg-section {
    background: linear-gradient(180deg, var(--lg-bg) 0%, oklch(0.97 0.005 256) 100%);
}
.lg-section__head {
    text-align: center;
    max-width: 36rem;
    margin: 0 auto 4rem;
}
.lg-eyebrow {
    display: inline-block;
    font-size: 0.8125rem;
    color: var(--lg-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-weight: 600;
}
.lg-h2 {
    font-size: clamp(1.875rem, 3.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 0 1rem;
}
.lg-section__lead {
    color: var(--lg-fg-dim);
    font-size: 1.0625rem;
}

/* Features grid */
.lg-grid-features {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) { .lg-grid-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lg-grid-features { grid-template-columns: repeat(3, 1fr); } }

.lg-feature {
    position: relative;
    padding: 1.5rem;
    background: oklch(1 0 0 / 3%);
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius);
    transition: background .2s, border-color .2s, transform .2s;
    overflow: hidden;
}
:root[data-lg-theme="light"] .lg-root .lg-feature {
    background: oklch(1 0 0);
    box-shadow: 0 1px 2px oklch(0.13 0.02 256 / 5%);
}
.lg-feature::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, oklch(1 0 0 / 4%) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}
.lg-feature:hover {
    background: oklch(1 0 0 / 5%);
    border-color: var(--lg-border-strong);
    transform: translateY(-2px);
}
:root[data-lg-theme="light"] .lg-root .lg-feature:hover {
    background: oklch(1 0 0);
    box-shadow: 0 10px 25px -10px oklch(0.13 0.02 256 / 12%);
}
.lg-feature:hover::before { opacity: 1; }
.lg-feature__icon {
    width: 2.5rem; height: 2.5rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, oklch(0.72 0.18 200 / 20%), oklch(0.72 0.18 280 / 20%));
    border: 1px solid var(--lg-border-strong);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}
.lg-feature__icon svg { width: 1.25rem; height: 1.25rem; color: var(--lg-primary); }
.lg-feature h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--lg-fg);
    position: relative;
    z-index: 1;
}
.lg-feature p {
    color: var(--lg-fg-dim);
    margin: 0;
    font-size: 0.9375rem;
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------------- Pain section (3-up red-toned cards) */
.lg-pain {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin-bottom: 3rem;
}
@media (min-width: 768px) { .lg-pain { grid-template-columns: repeat(3, 1fr); } }
.lg-pain__card {
    padding: 1.5rem;
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius);
    background: oklch(1 0 0 / 3%);
    position: relative;
}
:root[data-lg-theme="light"] .lg-root .lg-pain__card { background: oklch(1 0 0); }
.lg-pain__card::before {
    content: '';
    position: absolute;
    top: 0; left: 1.5rem; right: 1.5rem;
    height: 2px;
    background: linear-gradient(90deg, oklch(0.72 0.18 30 / 0%), oklch(0.72 0.18 30 / 60%), oklch(0.72 0.18 30 / 0%));
}
.lg-pain__card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--lg-fg);
}
.lg-pain__card p {
    margin: 0;
    color: var(--lg-fg-dim);
    font-size: 0.9375rem;
}
.lg-pain__quote {
    color: oklch(0.72 0.18 30);
    font-weight: 600;
    font-style: italic;
}

/* ---------------------------------------------------------------- Workflow 4-step */
.lg-workflow {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    counter-reset: lg-step;
}
@media (min-width: 768px) { .lg-workflow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .lg-workflow { grid-template-columns: repeat(4, 1fr); } }
.lg-step {
    position: relative;
    padding: 2.25rem 1.5rem 1.5rem;
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius);
    background: oklch(1 0 0 / 3%);
    counter-increment: lg-step;
    overflow: hidden;
    transition: border-color .25s, transform .25s;
}
:root[data-lg-theme="light"] .lg-root .lg-step {
    background: oklch(1 0 0);
    box-shadow: 0 1px 2px oklch(0.13 0.02 256 / 5%);
}
.lg-step:hover { transform: translateY(-2px); border-color: var(--lg-border-strong); }
.lg-step::before {
    content: counter(lg-step, decimal-leading-zero);
    position: absolute;
    top: 1rem; right: 1.25rem;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    color: var(--lg-primary);
    opacity: 0.18;
    font-family: 'Inter', monospace;
    letter-spacing: -0.05em;
}
.lg-step__icon {
    width: 2.25rem; height: 2.25rem;
    border-radius: 0.5rem;
    background: oklch(from var(--lg-primary) l c h / 12%);
    color: var(--lg-primary);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 0.875rem;
}
.lg-step__icon svg { width: 1.125rem; height: 1.125rem; }
.lg-step h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--lg-fg);
}
.lg-step p {
    margin: 0;
    color: var(--lg-fg-dim);
    font-size: 0.875rem;
    line-height: 1.55;
}

/* ---------------------------------------------------------------- Personas (3-up "for who") */
.lg-personas {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) { .lg-personas { grid-template-columns: repeat(3, 1fr); } }
.lg-persona {
    padding: 2rem 1.5rem;
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius);
    background: linear-gradient(180deg, oklch(1 0 0 / 4%), oklch(1 0 0 / 1%));
    transition: border-color .25s, transform .25s;
}
:root[data-lg-theme="light"] .lg-root .lg-persona {
    background: linear-gradient(180deg, oklch(1 0 0), oklch(0.985 0.005 256));
    box-shadow: 0 1px 3px oklch(0.13 0.02 256 / 6%);
}
.lg-persona:hover { border-color: var(--lg-border-strong); transform: translateY(-2px); }
.lg-persona__tag {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: oklch(from var(--lg-primary) l c h / 15%);
    color: var(--lg-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.lg-persona h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.625rem;
    color: var(--lg-fg);
}
.lg-persona p {
    margin: 0;
    color: var(--lg-fg-dim);
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* ---------------------------------------------------------------- Compare list (Why us) */
.lg-compare {
    max-width: 44rem;
    margin: 0 auto;
    display: flex; flex-direction: column;
    gap: 0.625rem;
}
.lg-compare__row {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem;
    background: oklch(1 0 0 / 3%);
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius);
    transition: border-color .2s, background .2s;
}
:root[data-lg-theme="light"] .lg-root .lg-compare__row { background: oklch(1 0 0); box-shadow: 0 1px 2px oklch(0.13 0.02 256 / 4%); }
.lg-compare__row:hover { border-color: var(--lg-border-strong); }
.lg-compare__check {
    width: 1.5rem; height: 1.5rem;
    flex: none;
    border-radius: 50%;
    background: oklch(0.65 0.20 145 / 18%);
    color: oklch(0.65 0.20 145);
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.lg-compare__check svg { width: 0.875rem; height: 0.875rem; }
.lg-compare__row strong {
    color: var(--lg-fg);
    font-weight: 600;
    margin-right: 0.25rem;
}
.lg-compare__row span { color: var(--lg-fg-dim); font-size: 0.9375rem; line-height: 1.55; }

/* ---------------------------------------------------------------- Final CTA */
.lg-final {
    padding: 6rem 1.5rem;
    text-align: center;
    border-top: 1px solid var(--lg-border);
    background: oklch(0.13 0.02 256);
}
:root[data-lg-theme="light"] .lg-root .lg-final { background: oklch(0.985 0.005 256); }
.lg-final h2 {
    font-size: clamp(1.875rem, 3.5vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0 0 1.25rem;
}
.lg-final p {
    color: var(--lg-fg-dim);
    font-size: 1.0625rem;
    max-width: 32rem;
    margin: 0 auto 2.5rem;
}
.lg-final__cta {
    display: inline-flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---------------------------------------------------------------- Footer */
.lg-footer {
    border-top: 1px solid var(--lg-border);
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--lg-fg-muted);
    font-size: 0.8125rem;
    background: var(--lg-bg);
}

/* ---------------------------------------------------------------- Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .lg-root *,
    .lg-root *::before,
    .lg-root *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------------------------------------------------------------- Locale switcher reuse */
.lg-root .public-lang { position: fixed; top: 18px; right: 18px; z-index: 60; }
.lg-root .lang-menu__btn { color: var(--lg-fg); }
.lg-root .lang-menu__btn:hover { background: oklch(1 0 0 / 8%); color: var(--lg-fg); }
.lg-root .lang-menu__pop {
    background: oklch(0.18 0.02 256);
    border-color: var(--lg-border-strong);
    color: var(--lg-fg);
}
.lg-root .lang-menu__item { color: var(--lg-fg-dim); }
.lg-root .lang-menu__item:hover { background: oklch(1 0 0 / 6%); color: var(--lg-fg); }
.lg-root .lang-menu__item.is-active { background: oklch(0.72 0.18 200 / 15%); color: var(--lg-primary); }