:root{
    --bg:#101217;
    --bg2:#14161c;
    --bg3:#191b22;
    --bg4:#0c0f15;
    --page-backdrop:
        radial-gradient(900px 620px at 12% 8%, rgba(122,230,255,.20), transparent 64%),
        radial-gradient(860px 620px at 88% 6%, rgba(124,241,193,.12), transparent 62%),
        radial-gradient(900px 700px at 60% 85%, rgba(122,230,255,.08), transparent 68%),
        linear-gradient(180deg, var(--bg), var(--bg2) 55%, var(--bg3));
    --page-glow:
        radial-gradient(1200px 820px at 8% 85%, rgba(122,230,255,.12), transparent 70%),
        radial-gradient(1200px 820px at 92% 85%, rgba(124,241,193,.10), transparent 70%),
        radial-gradient(1400px 900px at 50% 20%, rgba(122,230,255,.08), transparent 70%);
    --page-glow-opacity:.8;
    --grid-line: rgba(255,255,255,.03);
    --grid-opacity: .04;
    --grid-blend: overlay;
    --nav-bg: rgba(7,10,18,.65);
    --nav-edge: rgba(122,230,255,.25);

    --card: rgba(255,255,255,.03);
    --card2: rgba(255,255,255,.045);
    --surface: rgba(7,10,18,.88);
    --surface2: rgba(255,255,255,.04);

    --line: rgba(255,255,255,.08);
    --line2: rgba(255,255,255,.12);

    --text:#e8eef6;
    --muted:#9aa4b2;

    --accent:#7ae6ff;
    --accent2:#7cf1c1;
    --accent3:#7ae6ff;
    --accent-danger:#ff4d4d;

    --shadow: 0 18px 48px rgba(0,0,0,.35);
    --radius: 18px;

    --ui-surface: linear-gradient(160deg, rgba(12,18,32,.9), rgba(18,26,44,.85));
    --ui-surface-strong: rgba(12,18,32,.7);
    --ui-surface-soft: rgba(10,16,28,.55);

    --btn-ghost-bg: rgba(255,255,255,.04);
    --btn-ghost-bg-hover: rgba(255,255,255,.08);
    --btn-ghost-border: var(--line2);

    --container-max: 1120px;
    --container-width: 92%;
    --section-pad: 52px;
    --main-pad-top: 36px;
    --main-pad-bottom: 70px;
    --base-font-size: 16px;
    --gap-1: 8px;
    --gap-2: 12px;
    --gap-3: 16px;
    --gap-4: 18px;
    --gap-5: 22px;
}
[data-theme="light"]{
    --bg:#f3f6fb;
    --bg2:#e9eff9;
    --bg3:#e2eaf7;
    --bg4:#ffffff;
    --page-backdrop:
        radial-gradient(900px 620px at 12% 8%, rgba(47,111,255,.14), transparent 64%),
        radial-gradient(860px 620px at 88% 6%, rgba(15,182,214,.10), transparent 62%),
        radial-gradient(900px 700px at 60% 85%, rgba(16,185,129,.10), transparent 68%),
        linear-gradient(180deg, var(--bg), var(--bg2) 55%, var(--bg3));
    --page-glow:
        radial-gradient(1200px 820px at 8% 85%, rgba(47,111,255,.08), transparent 70%),
        radial-gradient(1200px 820px at 92% 85%, rgba(15,182,214,.06), transparent 70%),
        radial-gradient(1400px 900px at 50% 20%, rgba(16,185,129,.05), transparent 70%);
    --page-glow-opacity:.52;
    --grid-line: rgba(18,45,84,.03);
    --grid-opacity: .14;
    --grid-blend: normal;
    --nav-bg: rgba(246,248,252,.8);
    --nav-edge: rgba(15,182,214,.18);

    --card: rgba(255,255,255,.78);
    --card2: rgba(255,255,255,.92);
    --surface: rgba(255,255,255,.90);
    --surface2: rgba(18,45,84,.06);

    --line: rgba(18,45,84,.14);
    --line2: rgba(18,45,84,.24);

    --text:#0f1b2d;
    --muted:#44566f;

    --accent:#2563eb;
    --accent2:#0ea5b7;
    --accent3:#0f9f6e;

    --shadow: 0 14px 34px rgba(18,45,84,.12);

    --ui-surface: linear-gradient(165deg, rgba(255,255,255,.96), rgba(239,245,255,.94));
    --ui-surface-strong: rgba(255,255,255,.90);
    --ui-surface-soft: rgba(243,247,255,.82);

    --btn-ghost-bg: rgba(18,45,84,.06);
    --btn-ghost-bg-hover: rgba(18,45,84,.11);
    --btn-ghost-border: rgba(18,45,84,.22);
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
html{
    scroll-behavior:smooth;
    background: var(--page-backdrop);
    background-color: var(--bg);
    overscroll-behavior-y: none;
}

body{
    margin:0;
    font-family: "Outfit", "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    color:var(--text);
    line-height: 1.6;
    font-size: var(--base-font-size);
    transition: background .4s ease, color .3s ease;
    position: relative;
    isolation: isolate;
    background: var(--page-backdrop);
    background-color: var(--bg);
    overscroll-behavior-y: none;
}

/* Grid pattern sutil */
body:before{
    content:"";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
            linear-gradient(var(--grid-line) 1px, transparent 1px),
            linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 120px 120px;
    opacity: var(--grid-opacity);
    mix-blend-mode: var(--grid-blend);
    z-index: 0;
}
body:after{
    content:"";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: var(--page-glow);
    opacity: var(--page-glow-opacity);
    animation: bg-drift 18s ease-in-out infinite alternate;
    z-index: 0;
}
body > .nav,
body > .main,
body > .footer{
    position: relative;
}
body > .nav{
    z-index: 9999;
}
body > .main,
body > .footer{
    z-index: 1;
}
@keyframes bg-drift{
    0%{transform: translateY(0) translateX(0)}
    100%{transform: translateY(-12px) translateX(10px)}
}

/* Layout */
.container{width:min(var(--container-max), var(--container-width)); margin:0 auto;}
.main{padding: var(--main-pad-top) 0 var(--main-pad-bottom);}
.section{padding: var(--section-pad) 0; position: relative;}
.section--fullbleed{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(4vw, 18px);
    padding-right: max(4vw, 18px);
}
.section h2{
    margin:0 0 12px;
    font-size: clamp(1.35rem, 1.2rem + .7vw, 1.75rem);
    letter-spacing: -.2px;
}
.small{color:var(--muted); font-size:.96rem; line-height: 1.65;}

/* Separador suave entre secciones */
.section + .section{ border-top: 1px solid rgba(255,255,255,.06); }
.section:before{
    content:"";
    position:absolute;
    left:0; right:0;
    top:-1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(110,231,255,.16), transparent);
    opacity:.45;
}

@media (max-width: 720px){
    :root{
        --container-width: 94%;
        --section-pad: 44px;
        --main-pad-top: 28px;
        --main-pad-bottom: 54px;
        --base-font-size: 15.5px;
        --gap-1: 7px;
        --gap-2: 10px;
        --gap-3: 14px;
        --gap-4: 16px;
        --gap-5: 20px;
    }
}
@media (max-width: 480px){
    :root{
        --container-width: 95%;
        --section-pad: 40px;
        --main-pad-top: 24px;
        --main-pad-bottom: 48px;
        --base-font-size: 15px;
        --gap-1: 6px;
        --gap-2: 9px;
        --gap-3: 12px;
        --gap-4: 14px;
        --gap-5: 18px;
    }
}
@media (min-width: 1200px){
    :root{
        --container-max: 1180px;
        --container-width: 90%;
    }
}
@media (min-width: 1440px){
    :root{
        --container-max: 1240px;
        --container-width: 88%;
        --section-pad: 58px;
        --main-pad-top: 40px;
        --main-pad-bottom: 78px;
        --base-font-size: 16.5px;
        --gap-1: 9px;
        --gap-2: 13px;
        --gap-3: 18px;
        --gap-4: 22px;
        --gap-5: 26px;
    }
}
@media (min-width: 1600px){
    :root{
        --container-max: 1320px;
        --section-pad: 62px;
        --main-pad-top: 44px;
        --main-pad-bottom: 84px;
        --base-font-size: 17px;
        --gap-1: 10px;
        --gap-2: 14px;
        --gap-3: 19px;
        --gap-4: 24px;
        --gap-5: 28px;
    }
}
@media (min-width: 1920px){
    :root{
        --container-max: 1480px;
        --section-pad: 68px;
        --main-pad-top: 48px;
        --main-pad-bottom: 90px;
        --base-font-size: 17.5px;
        --gap-1: 11px;
        --gap-2: 15px;
        --gap-3: 20px;
        --gap-4: 26px;
        --gap-5: 30px;
    }
}
@media (min-width: 2560px){
    :root{
        --container-max: 1680px;
        --section-pad: 76px;
        --main-pad-top: 56px;
        --main-pad-bottom: 100px;
        --base-font-size: 18px;
        --gap-1: 12px;
        --gap-2: 16px;
        --gap-3: 22px;
        --gap-4: 28px;
        --gap-5: 34px;
    }
}
@media (min-width: 3200px){
    :root{
        --container-max: 1840px;
        --section-pad: 84px;
        --main-pad-top: 60px;
        --main-pad-bottom: 110px;
        --base-font-size: 18.5px;
        --gap-1: 13px;
        --gap-2: 18px;
        --gap-3: 24px;
        --gap-4: 30px;
        --gap-5: 36px;
    }
}

/* Navbar */
.nav{
    position: sticky;
    top: 0;
    z-index: 9999;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: var(--nav-bg);
    border-bottom: 1px solid var(--line);
    transition: background .3s ease, border-color .3s ease;
    isolation: isolate;
}
.nav__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 14px 0;
}
.nav__brandrow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
}
.nav:after{
    content:"";
    position:absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--nav-edge), transparent);
    opacity: .6;
    pointer-events: none;
}

.brand{
    display:flex;
    align-items:center;
    text-decoration:none;
    color:inherit;
}
.brand__wordmark{
    height: 44px;
    width: auto;
    display:block;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.25));
}

.links{display:flex; gap: var(--gap-3); flex-wrap:wrap; align-items:center; position: relative;}
.links a{
    color: var(--muted);
    text-decoration:none;
    padding: 8px 10px;
    border-radius: 10px;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.nav-dropdown{
    position: relative;
    display: block;
}
.nav-dropdown summary{
    list-style: none;
    cursor: pointer;
    color: var(--muted);
    padding: 8px 10px;
    border-radius: 10px;
    display:flex;
    align-items:center;
    gap: 8px;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.nav-dropdown summary::-webkit-details-marker{
    display:none;
}
.nav-dropdown summary::after{
    content:"▾";
    font-size: .75em;
    color: var(--muted);
}
.nav-dropdown summary:hover{
    color: var(--text);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}
.nav-dropdown[open] summary{
    color: var(--text);
    border: 1px solid rgba(110,231,255,.25);
    background: rgba(110,231,255,.08);
}
.nav-dropdown__panel{
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 10000;
    min-width: 240px;
    padding: 10px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(5,10,18,.35);
    display: grid;
    gap: 4px;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.nav-dropdown[open] .nav-dropdown__panel{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.nav-dropdown__panel a{
    color: var(--muted);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 10px;
}
.nav-dropdown__panel a:hover{
    color: var(--text);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}
.links a:hover{
    color: var(--text);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}
.links a.active{
    color: var(--text);
    border: 1px solid rgba(110,231,255,.25);
    background: rgba(110,231,255,.08);
}
.nav-toggle{
    display:none;
    width: 42px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.03);
    cursor: pointer;
    padding: 8px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap: 5px;
}
.nav-toggle span{
    display:block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--text);
    transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle.is-open span:nth-child(1){transform: translateY(7px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity: 0;}
.nav-toggle.is-open span:nth-child(3){transform: translateY(-7px) rotate(-45deg);}

/* Buttons */
.hero__cta{display:flex; gap: var(--gap-3); row-gap: var(--gap-2); flex-wrap:wrap; margin-top: 18px;}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: var(--gap-2);
    border-radius: 14px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    text-decoration:none;
    color:inherit;
    font-weight: 700;
    transition: transform .18s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn--primary{
    background: rgba(79,140,255,.20);
    border-color: rgba(79,140,255,.35);
}
.btn--primary:hover{
    background: rgba(79,140,255,.30);
    box-shadow: 0 10px 24px rgba(79,140,255,.18);
    transform: translateY(-1px);
}
.btn--ghost{
    background: var(--btn-ghost-bg);
    border-color: var(--btn-ghost-border);
}
.btn--ghost:hover{
    border-color: var(--line2);
    background: var(--btn-ghost-bg-hover);
    transform: translateY(-1px);
}
.btn--sm{padding: 9px 12px; border-radius: 12px; font-weight: 650;}

/* Cards / Grid */
.grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-3);
}
@media (max-width: 960px){ .grid{grid-template-columns: 1fr;} }

.card{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.card--soft{background: var(--card2);}
.card__top{display:flex; align-items:flex-start; justify-content:space-between; gap: var(--gap-3);}
.card h3{margin:0 0 6px; font-size:1.12rem; letter-spacing: -.1px;}
.card p{margin:0; color: var(--muted); line-height: 1.6;}
.card:hover{border-color: rgba(255,255,255,.14);}

.plan-card{
    display:flex;
    flex-direction:column;
    min-height: 100%;
}
.plan-card .hero__cta{
    margin-top: auto;
}

/* Lists */
.list{margin: 12px 0 0; padding-left: 18px; color: var(--muted);}
.list li{margin: 6px 0;}

/* Pills / Badges */
.pill{
    display:inline-flex;
    border:1px solid var(--line);
    color: var(--muted);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: .86rem;
    line-height: 1.1;
}
.pill-row{
    display:flex;
    flex-wrap:wrap;
    gap: var(--gap-1);
    margin-top: 10px;
}
.badge{
    display:inline-flex;
    align-items:center;
    gap: var(--gap-1);
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.1;
}
.card > .badge{margin-top:0; margin-bottom:6px;}
.badge--top{
    display:inline-flex;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,77,77,.35);
    background: rgba(255,77,77,.10);
    color: var(--accent-danger);
    font-weight: 700;
}
.soft-line{
    height:1px;
    margin: 14px 0;
    background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    border-radius: 999px;
}

/* ===== Home hero2 ===== */
.hero2{
    position: relative;
    padding: 44px 0 26px;
}
.hero2__bg{
    position:absolute;
    inset: 0;
    border-radius: 22px;
    background:
            radial-gradient(820px 460px at 15% 15%, rgba(90,161,255,.22), transparent 60%),
            radial-gradient(740px 420px at 85% 25%, rgba(122,230,255,.10), transparent 55%),
            linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: var(--shadow);
    z-index: 0;
}
.hero2__orb{
    position:absolute;
    width: 320px;
    height: 320px;
    right: 8%;
    top: -40px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(122,230,255,.25), transparent 60%);
    filter: blur(2px);
    opacity: .7;
    z-index: 0;
    animation: orb-float 10s ease-in-out infinite alternate;
}
.hero2__gridlines{
    position:absolute;
    inset: 10px;
    border-radius: 18px;
    background-image:
            linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 90px 90px;
    opacity: .2;
    z-index: 0;
    mask: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
@keyframes orb-float{
    from{transform: translateY(0) translateX(0)}
    to{transform: translateY(18px) translateX(-12px)}
}
.hero2__grid{
    position: relative;
    z-index: 1;
    display:grid;
    grid-template-columns: 1.35fr .85fr;
    gap: var(--gap-4);
    padding: 22px;
}
@media (max-width: 960px){ .hero2__grid{grid-template-columns:1fr;} }

.hero2__left{ max-width: 72ch; }
.hero2__title{
    margin: 12px 0 12px;
    font-size: clamp(36px, 4.6vw, 60px);
    line-height: 1.02;
}
.hero2__lead{
    margin: 0 0 12px;
    color: var(--muted);
    max-width: 78ch;
    font-size: 1.06rem;
    line-height: 1.7;
}
.hero2__title{
    letter-spacing: -.3px;
    text-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.hero2__mini{ margin-top: 14px; display:flex; flex-wrap:wrap; gap: var(--gap-1); }
.hero2__right{ display:flex; flex-direction:column; gap: var(--gap-3); }
.hero2__callout{ border-color: rgba(79,140,255,.25); }

.hero2__proof{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-2);
    margin: 16px 0 10px;
}
.proof-item{
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    border-radius: 14px;
    padding: 12px;
}
.proof-title{
    font-size: 1.25rem;
    font-weight: 750;
    letter-spacing: .2px;
    color: var(--accent-danger);
}
.hero2__timeline{
    margin-top: 16px;
    display:flex;
    gap: var(--gap-2);
    flex-wrap:wrap;
}
.timeline-item{
    display:flex;
    gap: var(--gap-2);
    align-items:flex-start;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}
.timeline-dot{
    width:10px;height:10px;border-radius:999px;margin-top:6px;
    background: rgba(110,231,255,.55);
    box-shadow: 0 0 0 6px rgba(110,231,255,.08);
    flex:0 0 auto;
}

.micro{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    color: var(--muted);
    font-size: .88rem;
}

.hero-metrics .metric{
    display:flex;
    flex-direction:column;
    gap: 8px;
    margin: 12px 0;
}
.metric__label{ color: var(--muted); font-size: .9rem; }
.metric__bar{
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}
.metric__bar span{
    display:block;
    height: 100%;
    background: linear-gradient(90deg, rgba(90,161,255,.45), rgba(122,230,255,.65));
}
.hero-stack .stack-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 2px;
}
.stack-chip{
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    text-align:center;
    font-size: .88rem;
    color: var(--muted);
}
@media (max-width: 960px){
    .hero2__proof{grid-template-columns: 1fr;}
    .hero-stack .stack-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}

.theme-toggle{
    appearance: none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border: 1px solid var(--line);
    padding: 7px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    color: var(--muted);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.theme-toggle:hover{
    border-color: var(--line2);
    color: var(--text);
}
.theme-dot{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--accent2);
    box-shadow: 0 0 0 4px rgba(122,230,255,.12);
}

/* ===== Programador hero ===== */
.hero{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 22px;
    align-items: start;
    padding: 36px 0 10px;
}
.hero--split{
    position: relative;
}
.hero__title{
    margin: 12px 0 10px;
    font-size: clamp(32px, 4.2vw, 56px);
    line-height: 1.05;
}
.hero__lead{
    margin: 0 0 12px;
    color: var(--muted);
    max-width: 82ch;
    font-size: 1.04rem;
    line-height: 1.7;
}
.hero-panel{
    display:flex;
    flex-direction:column;
    gap: 14px;
}
.stack-block{
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}
.stack-title{
    margin: 0 0 10px;
    font-size: 1rem;
    color: var(--muted);
    letter-spacing: .4px;
    text-transform: uppercase;
}
.stack-pills{
    display:flex;
    flex-wrap:wrap;
    gap: var(--gap-1);
}
@media (max-width: 960px){
    .hero{ grid-template-columns: 1fr; }
}

/* ===== Split sections ===== */
.split{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-4);
    align-items: center;
    margin-top: var(--gap-4);
}
.split__text{ max-width: 72ch; }
.split--reverse{ direction: rtl; }
.split--reverse > *{ direction: ltr; }

@media (max-width: 960px){
    .split{ grid-template-columns:1fr; }
    .split--reverse{ direction: ltr; }
}

.split__media .mock{
    height: 280px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background:
            radial-gradient(520px 320px at 20% 20%, rgba(90,161,255,.18), transparent 55%),
            linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.mock-svg{
    width: 100%;
    height: 280px;
    display:block;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.02);
    box-shadow: var(--shadow);
}

/* ===== Feature cards ===== */
.feature-card{position: relative;}
.feature-card__head{
    display:flex;
    align-items:center;
    gap: var(--gap-2);
    margin-bottom: 6px;
}
.feature__icon{
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight: 700;
    color: var(--accent2);
    border: 1px solid rgba(110,231,255,.25);
    background: rgba(110,231,255,.08);
    flex: 0 0 auto;
}

/* ===== Alternate section ===== */
.section--alt{
    padding: 60px 0;
}
.panel{
    padding: 22px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.08);
    background:
            radial-gradient(820px 420px at 20% 20%, rgba(90,161,255,.14), transparent 60%),
            linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
    box-shadow: var(--shadow);
}

.content-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: var(--gap-2);
    flex-wrap:wrap;
    margin-bottom:14px;
}
.content-tags{
    display:flex;
    gap: var(--gap-1);
    flex-wrap:wrap;
}
.content-grid .content-card{
    position: relative;
    overflow: hidden;
}
.content-grid .content-card:before{
    content:"";
    position:absolute;
    inset: 0;
    background: radial-gradient(480px 240px at 20% 0%, rgba(122,230,255,.12), transparent 60%);
    opacity: .6;
    pointer-events:none;
}
.content-grid .content-card > *{
    position: relative;
    z-index: 1;
}

/* ===== Capability module ===== */
.cap-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-3);
}
@media (max-width: 960px){ .cap-grid{grid-template-columns: 1fr;} }
.cap-card{
    padding: 18px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.03);
    box-shadow: var(--shadow);
    transition: transform .2s ease, border-color .2s ease;
}
.cap-card:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.16);}
.cap-title{margin: 0 0 6px; font-size: 1.05rem;}
.cap-meta{color: var(--muted); font-size: .92rem; line-height: 1.6;}

.cap-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap: var(--gap-3);
    margin-bottom: 16px;
    flex-wrap:wrap;
}
.cap-tags{display:flex; gap: var(--gap-1); flex-wrap:wrap;}
.cap-grid--wide{grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px;}
.cap-grid--compact{grid-template-columns: repeat(4, minmax(0, 1fr));}
.cap-card--hero{
    position: relative;
    overflow: hidden;
    background:
            radial-gradient(520px 260px at 20% 0%, rgba(90,161,255,.18), transparent 60%),
            rgba(255,255,255,.03);
}
.cap-chip{
    display:inline-flex;
    align-items:center;
    gap: var(--gap-1);
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(110,231,255,.25);
    background: rgba(110,231,255,.08);
    color: var(--accent2);
    font-size: .82rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.cap-chip--muted{
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: var(--muted);
    font-weight: 600;
}
.cap-foot{
    display:flex;
    gap: var(--gap-1);
    flex-wrap:wrap;
    margin-top: 10px;
}
@media (max-width: 960px){
    .cap-grid--wide{grid-template-columns: 1fr;}
    .cap-grid--compact{grid-template-columns: 1fr;}
}

/* ===== Experience module ===== */
.experience{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: var(--gap-4);
    align-items: start;
}
@media (max-width: 960px){ .experience{grid-template-columns:1fr;} }
.exp-list{
    display:flex;
    flex-wrap:wrap;
    gap: var(--gap-1);
}
.exp-pill{
    display:inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: .86rem;
    background: rgba(255,255,255,.02);
}

.experience--new{
    grid-template-columns: 1.2fr .8fr;
}
.experience--single{
    grid-template-columns: 1fr;
}
.exp-card{
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background:
            radial-gradient(520px 260px at 20% 0%, rgba(124,241,193,.12), transparent 60%),
            rgba(255,255,255,.03);
    box-shadow: var(--shadow);
}
.exp-cases{
    margin: 14px 0 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-2);
}
.exp-case{
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}
.exp-case h3{
    margin: 0 0 6px;
    font-size: .98rem;
}
.exp-kicker{
    display:inline-flex;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,77,77,.35);
    background: rgba(255,77,77,.10);
    color: var(--accent-danger);
    font-size: .82rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.exp-proof{
    margin-top: 16px;
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-2);
}
.exp-proof__item{
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}
.exp-proof__title{
    font-size: 1.2rem;
    font-weight: 750;
    color: var(--accent-danger);
}
.exp-actions .exp-action-list{
    display:flex;
    flex-direction:column;
    gap: var(--gap-2);
    margin-top: 8px;
}
.exp-action{
    display:flex;
    gap: var(--gap-2);
    align-items:flex-start;
    padding: 10px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
}
.exp-action__dot{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-top: 6px;
    background: rgba(124,241,193,.65);
    box-shadow: 0 0 0 6px rgba(124,241,193,.12);
    flex: 0 0 auto;
}
@media (max-width: 960px){
    .experience--new{grid-template-columns:1fr;}
    .exp-proof{grid-template-columns:1fr;}
    .exp-cases{grid-template-columns:1fr;}
}

.cred-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: var(--gap-2);
    flex-wrap:wrap;
    margin-bottom: 14px;
}
.cred-tags{display:flex; gap: var(--gap-1); flex-wrap:wrap;}
.cred-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-3);
}
.cred-card{position: relative; overflow: hidden;}
.cred-card:before{
    content:"";
    position:absolute;
    inset: 0;
    background: radial-gradient(420px 220px at 10% 0%, rgba(124,241,193,.10), transparent 60%);
    opacity: .6;
    pointer-events:none;
}
.cred-card > *{position: relative; z-index: 1;}
.cred-steps{
    display:flex;
    flex-direction:column;
    gap: var(--gap-2);
    margin-top: 10px;
}
.cred-step{
    display:flex;
    gap: var(--gap-2);
    align-items:center;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
}
.cred-dot{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(110,231,255,.65);
    box-shadow: 0 0 0 6px rgba(110,231,255,.10);
    flex: 0 0 auto;
}
.cred-stack{
    display:flex;
    gap: var(--gap-1);
    flex-wrap:wrap;
    margin-top: 12px;
}
@media (max-width: 960px){
    .cred-grid{grid-template-columns: 1fr;}
}

/* ===== Lab module ===== */
.lab{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-3);
}
.lab--many{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 960px){ .lab{grid-template-columns:1fr;} }
.lab-card{
    position: relative;
    overflow: hidden;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.03);
    box-shadow: var(--shadow);
}
.lab-card:before{
    content:"";
    position:absolute;
    inset: 0;
    background: radial-gradient(600px 300px at 20% 10%, rgba(90,161,255,.18), transparent 60%);
    opacity:.6;
    transition: opacity .3s ease;
}
.lab-card:hover:before{opacity:.9;}
.lab-title{margin: 0 0 6px; font-size: 1.05rem;}
.lab-demo{
    margin-top: 12px;
    height: 120px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.1);
    background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    position: relative;
    overflow: hidden;
    padding: 12px;
    display:flex;
    flex-direction:column;
    gap: 8px;
}
.lab-demo:after{
    content:"";
    position:absolute;
    inset: -40%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.15), transparent);
    transform: translateX(-30%);
    animation: sweep 4s ease-in-out infinite;
}
@keyframes sweep{
    0%{transform: translateX(-40%)}
    60%{transform: translateX(40%)}
    100%{transform: translateX(60%)}
}
.lab-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: var(--gap-2);
    flex-wrap:wrap;
    margin-bottom: 16px;
}
.lab-tags{display:flex; gap: var(--gap-1); flex-wrap:wrap;}
.lab-kicker{
    display:inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(110,231,255,.25);
    background: rgba(110,231,255,.08);
    color: var(--accent2);
    font-size: .82rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.lab-card--focus{border-color: rgba(124,241,193,.20);}
.lab-card--glow{border-color: rgba(110,231,255,.24);}
.lab-card--depth{border-color: rgba(79,140,255,.22);}
.lab-card--table{border-color: rgba(255,200,100,.24);}
.lab-card--history{border-color: rgba(124,241,193,.22);}
.lab-card--invoice{border-color: rgba(110,231,255,.22);}
.lab-demo--focus{
    background:
            radial-gradient(240px 120px at 20% 10%, rgba(124,241,193,.20), transparent 60%),
            linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.lab-demo--glow:after{
    background: linear-gradient(120deg, transparent, rgba(122,230,255,.18), transparent);
}
.lab-demo--depth{
    background:
            radial-gradient(200px 120px at 80% 20%, rgba(79,140,255,.20), transparent 60%),
            linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.lab-demo > *{position: relative; z-index: 1;}

.demo-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    font-size: .75rem;
    color: var(--muted);
    background: rgba(255,255,255,.03);
}
.demo-chip--ok{border-color: rgba(124,241,193,.3); color: var(--accent3); background: rgba(124,241,193,.08);}
.demo-chip--warn{border-color: rgba(255,200,100,.3); color: #ffd27a; background: rgba(255,200,100,.08);}
.demo-chip--primary{border-color: rgba(110,231,255,.3); color: var(--accent2); background: rgba(110,231,255,.08);}
.demo-chip--muted{opacity:.7;}
.demo-card{
    margin-top: auto;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}
.demo-row{display:flex; gap: 8px; align-items:flex-start;}
.demo-dot{
    width: 8px; height: 8px; border-radius: 999px; margin-top: 6px;
    background: rgba(110,231,255,.7);
    box-shadow: 0 0 0 5px rgba(110,231,255,.12);
    flex:0 0 auto;
}
.demo-dot--ok{background: rgba(124,241,193,.7); box-shadow: 0 0 0 5px rgba(124,241,193,.12);}
.demo-dot--warn{background: rgba(255,200,100,.7); box-shadow: 0 0 0 5px rgba(255,200,100,.12);}
.demo-progress{
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
    margin-top: 8px;
}
.demo-progress span{
    display:block;
    height: 100%;
    background: linear-gradient(90deg, rgba(124,241,193,.55), rgba(110,231,255,.65));
}
.demo-progress--loop span{
    width: 45%;
    animation: progress-loop 2.6s ease-in-out infinite;
}
@keyframes progress-loop{
    0%{transform: translateX(-40%);}
    60%{transform: translateX(120%);}
    100%{transform: translateX(120%);}
}
.demo-timeline{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.demo-step{
    display:flex;
    gap: 8px;
    align-items:flex-start;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    font-size: .78rem;
}
.demo-step span{
    width: 8px; height: 8px; border-radius: 999px; margin-top: 5px;
    background: rgba(255,255,255,.22);
    flex:0 0 auto;
}
.demo-step.done span{
    background: rgba(124,241,193,.7);
    box-shadow: 0 0 0 5px rgba(124,241,193,.12);
}
.demo-step.active span{
    background: rgba(110,231,255,.7);
    box-shadow: 0 0 0 5px rgba(110,231,255,.12);
}
.demo-kpis{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.demo-kpi{
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}
.demo-kpi__value{font-size: 1.05rem; font-weight: 750;}
.demo-kpi__value--warn{color: #ffd27a;}
.demo-alert{
    display:flex;
    gap: 8px;
    align-items:flex-start;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}
.demo-bars{
    display:grid;
    gap: 6px;
}
.demo-bar{
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}
.demo-bar span{
    display:block;
    height:100%;
    background: linear-gradient(90deg, rgba(79,140,255,.55), rgba(122,230,255,.65));
}
@media (max-width: 960px){
    .demo-timeline{grid-template-columns: 1fr 1fr;}
}

.demo-table{
    display:grid;
    gap: 6px;
    font-size: .78rem;
}
.demo-table .demo-row{
    display:grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}
.demo-table .demo-row--head{
    color: var(--muted);
    font-weight: 600;
    background: rgba(255,255,255,.03);
}
.tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    font-size: .72rem;
}
.tag--ok{border-color: rgba(124,241,193,.3); color: var(--accent3); background: rgba(124,241,193,.08);}
.tag--warn{border-color: rgba(255,200,100,.3); color: #ffd27a; background: rgba(255,200,100,.08);}
.tag--muted{opacity:.7;}

.demo-history{
    display:grid;
    gap: 8px;
}
.demo-event{
    display:flex;
    gap: 8px;
    align-items:flex-start;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}

.demo-invoice{
    display:grid;
    gap: 6px;
    font-size: .8rem;
}
.demo-invoice__row{
    display:flex;
    justify-content:space-between;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}
.demo-invoice__total{
    font-weight: 700;
    border-color: rgba(110,231,255,.25);
}

.lab-page .section{padding: 46px 0;}

.ui-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: var(--gap-2);
    flex-wrap:wrap;
    margin-bottom: 14px;
}
.ui-tags{display:flex; gap: var(--gap-1); flex-wrap:wrap;}
.ui-grid{
    display:grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--gap-5);
}
@media (max-width: 960px){ .ui-grid{grid-template-columns:1fr;} }
.ui-main{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-3);
}
@media (max-width: 960px){ .ui-main{grid-template-columns:1fr;} }
.ui-main .ui-card{min-height: 220px;}
.ui-legend{
    grid-column: 1 / -1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: var(--gap-2);
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: var(--ui-surface-soft);
}
.ui-legend__tags{display:flex; gap: var(--gap-1); flex-wrap:wrap;}
.ui-side{
    display:grid;
    gap: var(--gap-3);
    align-content:start;
}
.ui-card--compact{
    min-height: 0;
}
.ui-side .ui-card{
    padding-top: 16px;
}
.ui-side .ui-card .ui-kicker{font-size: .72rem;}
.ui-side .ui-card .small{font-size: .78rem;}
.ui-side .ui-card .ui-demo{padding: 10px;}
.ui-card{
    display:flex;
    flex-direction:column;
    gap: var(--gap-2);
    min-height: 210px;
}
.ui-kicker{
    display:inline-flex;
    align-self:flex-start;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: var(--muted);
    font-size: .8rem;
}
.ui-demo{
    margin-top: auto;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: var(--ui-surface);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.ui-hint{
    margin-top: 8px;
    font-size: .75rem;
    color: var(--muted);
}
.ui-demo--actions{position: relative;}
.ui-demo--actions{overflow: visible;}
.lab-page .ui-demo--actions .btn--ghost{
    color: var(--text);
    border-color: var(--btn-ghost-border);
    background: var(--btn-ghost-bg);
}
.lab-page .ui-demo--actions .btn--ghost:hover{
    background: var(--btn-ghost-bg-hover);
}
.lab-page .ui-demo--actions .btn--primary{
    color: #041322;
    border-color: rgba(110,231,255,.35);
    background: linear-gradient(135deg, rgba(110,231,255,.95), rgba(124,241,193,.85));
}
.lab-page .ui-demo--actions .btn--primary:hover{
    filter: brightness(1.02);
}
.lab-page .ui-demo--actions .btn--ghost.btn--sm{
    font-weight: 600;
}

.ui-demo--glass{
    display:flex;
    gap: 8px;
    flex-wrap:wrap;
}
.glass-chip{
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    color: var(--text);
    font-size: .8rem;
    backdrop-filter: blur(6px);
    position: relative;
    overflow: hidden;
}
.glass-chip:after{
    content:"";
    position:absolute;
    inset: -40% 60% 40% -40%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent);
    animation: glass-sheen 3.6s ease-in-out infinite;
}
@keyframes glass-sheen{
    0%,40%{transform: translateX(-40%);}
    70%,100%{transform: translateX(120%);}
}

.ui-demo--ring{
    display:flex;
    align-items:center;
    gap: 12px;
}
.progress-ring{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: conic-gradient(rgba(124,241,193,.9) 0deg, rgba(124,241,193,.9) 260deg, rgba(255,255,255,.08) 260deg);
    display:flex;
    align-items:center;
    justify-content:center;
    position: relative;
    animation: ring-rotate 6s linear infinite;
}
.progress-ring:before{
    content:"";
    position:absolute;
    inset: 6px;
    border-radius: 50%;
    background: rgba(8,16,31,.8);
    border: 1px solid rgba(255,255,255,.08);
}
.progress-ring span{
    position: relative;
    font-size: .8rem;
    font-weight: 700;
}
@keyframes ring-rotate{
    0%,60%{transform: rotate(0deg);}
    100%{transform: rotate(20deg);}
}
.ui-demo--actions{
    display:flex;
    gap: 10px;
    flex-wrap:wrap;
    align-items:center;
}

.ui-demo--stagger{display:grid; gap: 8px;}
.stagger-line{
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    animation: stagger-rise 2.6s ease-in-out infinite;
}
.stagger-line:nth-child(2){animation-delay:.2s;}
.stagger-line:nth-child(3){animation-delay:.4s;}
@keyframes stagger-rise{
    0%,20%{opacity:.35; transform: translateY(6px);}
    50%,80%{opacity:1; transform: translateY(0);}
    100%{opacity:.4; transform: translateY(-4px);}
}

.ui-demo--loading{display:grid; gap: 8px;}
.skeleton-line{
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    position: relative;
    overflow: hidden;
}
.skeleton-line.short{width: 60%;}
.skeleton-line:after{
    content:"";
    position:absolute;
    inset:-50%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.2), transparent);
    animation: shimmer 2.6s ease-in-out infinite;
}
.mini-progress{
    height: 6px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    overflow:hidden;
}
.mini-progress span{
    display:block;
    height: 100%;
    width: 33%;
    background: linear-gradient(90deg, rgba(124,241,193,.55), rgba(110,231,255,.65));
    transition: width .25s ease;
}

.ui-demo--flow{display:grid; gap: 10px;}
.mini-steps{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
.mini-step{
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    font-size: .82rem;
    text-align:center;
}
.mini-step.active{
    border-color: rgba(124,241,193,.3);
    background: rgba(124,241,193,.08);
    color: var(--accent3);
}
.ui-accordion{display:grid; gap: 6px;}
.ui-acc-toggle{
    width: 100%;
    text-align:left;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
}
.ui-acc-panel{
    display:none;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    font-size: .82rem;
}
.ui-acc-panel.open{display:block;}

.ui-demo--policy{display:grid; gap: 8px;}
.policy-row{
    display:grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items:center;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: var(--ui-surface-strong);
}
.policy-pill{
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    font-size: .78rem;
    color: var(--muted);
}
.policy-pill--hi{
    border-color: rgba(255,200,100,.35);
    color: #ffd27a;
    background: rgba(255,200,100,.08);
}
.policy-state{
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(124,241,193,.3);
    color: var(--accent3);
    background: rgba(124,241,193,.08);
    font-size: .78rem;
}
.policy-state--warn{
    border-color: rgba(255,200,100,.3);
    color: #ffd27a;
    background: rgba(255,200,100,.08);
}

.ui-demo--matrix{display:grid; gap: 8px;}
.perm-matrix{
    display:grid;
    gap: 6px;
    font-size: .8rem;
}
.perm-head,
.perm-row{
    display:grid;
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
    gap: 6px;
    align-items:center;
}
.perm-head{
    color: var(--muted);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.perm-row{
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: var(--ui-surface-strong);
}
.perm-cell{
    padding: 4px 6px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.08);
    background: var(--ui-surface-strong);
    color: var(--muted);
    font-family: inherit;
    cursor: pointer;
}
.perm-cell.is-on{
    border-color: rgba(124,241,193,.3);
    background: rgba(124,241,193,.12);
    color: var(--accent3);
    font-weight: 700;
}

.ui-demo--activity{display:grid; gap: 10px;}
.activity-filters{
    display:flex;
    gap: 6px;
    flex-wrap:wrap;
}
.activity-pill{
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    color: var(--muted);
    font-size: .78rem;
    font-family: inherit;
    cursor: pointer;
}
.activity-pill.active{
    border-color: rgba(110,231,255,.35);
    color: var(--text);
    background: rgba(110,231,255,.12);
}
.activity-list{
    display:grid;
    gap: 8px;
}
.activity-item{
    display:flex;
    gap: 8px;
    align-items:flex-start;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: var(--ui-surface-strong);
}

.ui-demo--diff{display:grid; gap: 8px;}
.diff-row{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    align-items:center;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    font-size: .82rem;
}
.diff-label{color: var(--muted);}
.diff-old{
    text-decoration: line-through;
    color: #ffb2b2;
    background: rgba(255,120,120,.12);
    padding: 4px 6px;
    border-radius: 8px;
}
.diff-new{
    color: var(--accent3);
    background: rgba(124,241,193,.12);
    padding: 4px 6px;
    border-radius: 8px;
    font-weight: 600;
}

.ui-command{
    position: fixed;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, 92%);
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: var(--surface);
    box-shadow: var(--shadow);
    display:none;
    z-index: 60;
}
.ui-command.open{display:grid; gap: 10px;}
.ui-command__head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 10px;
}
.ui-command__input{
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: var(--text);
    font-family: inherit;
}
.ui-command__list{
    display:grid;
    gap: 6px;
}
.ui-command__item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(8,14,26,.6);
}
.ui-command__kbd{
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    font-size: .75rem;
}

.ui-tooltip{
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: var(--text);
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.ui-tooltip__content{
    position:absolute;
    left: 50%;
    top: -8px;
    transform: translate(-50%, -100%);
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.12);
    background: var(--surface);
    font-size: .78rem;
    opacity: 0;
    pointer-events:none;
    transition: opacity .15s ease, transform .15s ease;
    white-space: nowrap;
}
.ui-tooltip:hover .ui-tooltip__content,
.ui-tooltip:focus .ui-tooltip__content{
    opacity: 1;
    transform: translate(-50%, -110%);
}

.ui-overlay{
    position: fixed;
    inset: 0;
    background: rgba(6,10,18,.55);
    display:none;
    align-items:center;
    justify-content:center;
    z-index: 40;
    padding: 20px;
    backdrop-filter: blur(6px);
}
.ui-overlay.open{display:flex;}
.ui-modal{
    width: min(420px, 92%);
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: var(--surface);
    box-shadow: var(--shadow);
    display:none;
}
.ui-modal.open{display:block;}

.ui-sheet{
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background: var(--surface);
    box-shadow: var(--shadow);
    transform: translateY(140%);
    transition: transform .25s ease;
    z-index: 40;
}
.ui-sheet.open{transform: translateY(0);}
.ui-sheet__handle{
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    margin: 0 auto 10px;
}
.ui-sheet__head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 10px;
    margin-bottom: 10px;
}
.ui-sheet__fields{
    display:grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px){ .ui-sheet__fields{grid-template-columns:1fr;} }

.ui-context-menu{
    position: fixed;
    display:none;
    flex-direction:column;
    gap: 6px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: var(--surface);
    box-shadow: var(--shadow);
    z-index: 50;
}
.ui-context-menu.open{display:flex;}
.ui-context-item{
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
    color: var(--text);
    font-size: .85rem;
    font-family: inherit;
    cursor: pointer;
    text-align:left;
}

.ui-dropdown{
    position:absolute;
    top: 46px;
    left: 0;
    min-width: 240px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: var(--surface);
    box-shadow: var(--shadow);
    display:none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    z-index: 30;
}
.ui-dropdown.open{display:grid;}
.ui-dropdown__col{
    display:grid;
    gap: 6px;
    font-size: .85rem;
}
.ui-dropdown__col span{
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(8,14,26,.6);
}

.ui-toast{
    position: fixed;
    right: 18px;
    bottom: 18px;
    display:flex;
    gap: 8px;
    align-items:flex-start;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: var(--surface);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    z-index: 60;
}
.ui-toast.show{
    opacity: 1;
    transform: translateY(0);
}

.anim-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: 12px;
    flex-wrap:wrap;
    margin-bottom: 14px;
}
.anim-tags{display:flex; gap: 8px; flex-wrap:wrap;}
.anim-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 960px){ .anim-grid{grid-template-columns:1fr;} }
.anim-card{
    display:flex;
    flex-direction:column;
    gap: 10px;
    min-height: 190px;
}
.lab-tech{
    display:flex;
    flex-wrap:wrap;
    gap: 6px;
    margin-top: 6px;
}
.lab-tech code{
    font-family: "Space Grotesk", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: .72rem;
    padding: 3px 7px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.12);
    color: var(--muted);
    background: rgba(255,255,255,.03);
}
.lab-tech--wide{
    margin-top: 12px;
}
.anim-demo{
    margin-top: auto;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    position: relative;
    overflow: hidden;
}
.anim-demo--theme{
    display:flex;
    align-items:center;
    gap: 12px;
}
.theme-toggle-demo{
    width: 48px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    position: relative;
}
.theme-toggle-demo span{
    position: absolute;
    top: 3px; left: 3px;
    width: 20px; height: 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(110,231,255,.9), rgba(124,241,193,.9));
    animation: toggle-swap 3.4s ease-in-out infinite;
}
.theme-preview{
    flex: 1 1 auto;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(8,16,31,.9), rgba(246,248,252,.6));
    border: 1px solid rgba(255,255,255,.08);
    position: relative;
    overflow: hidden;
}
.theme-preview:after{
    content:"";
    position:absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.1), transparent 60%);
    animation: theme-wipe 3.4s ease-in-out infinite;
}
@keyframes toggle-swap{
    0%,30%{transform: translateX(0);}
    60%,100%{transform: translateX(22px);}
}
@keyframes theme-wipe{
    0%,30%{transform: translateX(-40%);}
    60%,100%{transform: translateX(40%);}
}
.anim-demo--shimmer .shimmer-line{
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    position: relative;
    overflow: hidden;
    margin-bottom: 8px;
}
.anim-demo--shimmer .shimmer-line.short{width: 60%;}
.anim-demo--shimmer .shimmer-line:after{
    content:"";
    position:absolute;
    inset: -50%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.2), transparent);
    animation: shimmer 2.6s ease-in-out infinite;
}
@keyframes shimmer{
    0%{transform: translateX(-30%);}
    60%{transform: translateX(30%);}
    100%{transform: translateX(40%);}
}
.anim-demo--button .btn{
    transition: transform .15s ease, box-shadow .2s ease;
}
.anim-demo--button .btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(79,140,255,.25);
}
.notify{
    display:flex;
    gap: 10px;
    align-items:flex-start;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    animation: notify-slide 4s ease-in-out infinite;
}
@keyframes notify-slide{
    0%,25%{opacity:0; transform: translateX(-10px);}
    45%,80%{opacity:1; transform: translateX(0);}
    100%{opacity:.2; transform: translateX(10px);}
}
.anim-demo--pulse{
    display:flex;
    gap: 10px;
    align-items:center;
}
.pulse-dot{
    width: 10px; height: 10px; border-radius: 999px;
    background: rgba(110,231,255,.7);
    box-shadow: 0 0 0 6px rgba(110,231,255,.12);
    animation: pulse 1.4s ease-in-out infinite;
}
.pulse-dot:nth-child(2){animation-delay:.2s;}
.pulse-dot:nth-child(3){animation-delay:.4s;}
@keyframes pulse{
    0%,100%{transform: scale(.7); opacity:.6;}
    50%{transform: scale(1); opacity:1;}
}

.anim-demo--tabs .tabs{
    display:flex;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding-bottom: 6px;
}
.anim-demo--tabs .tab{
    font-size: .85rem;
    color: var(--muted);
    padding: 4px 6px;
    position: relative;
    background: transparent;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}
.anim-demo--tabs .tab.active{
    color: var(--text);
}
.anim-demo--tabs .tab.active:after{
    content:"";
    position:absolute;
    left: 0; right: 0; bottom: -7px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(110,231,255,.6), rgba(124,241,193,.6));
    animation: tab-slide 3s ease-in-out infinite;
}
.anim-demo--tabs .tab-content{
    margin-top: 10px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: var(--ui-surface-strong);
}
@keyframes tab-slide{
    0%,30%{transform: scaleX(.6);}
    60%,100%{transform: scaleX(1);}
}

.anim-demo--toast .toast{
    display:flex;
    gap: 10px;
    align-items:flex-start;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    position: relative;
    overflow: hidden;
    animation: toast-pop 3.4s ease-in-out infinite;
}
.anim-demo--toast .toast-bar{
    position:absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(110,231,255,.7), rgba(124,241,193,.7));
    transform-origin: left;
    animation: toast-bar 3.4s linear infinite;
}
@keyframes toast-pop{
    0%,20%{opacity:0; transform: translateY(8px);}
    35%,80%{opacity:1; transform: translateY(0);}
    100%{opacity:.2; transform: translateY(-4px);}
}
@keyframes toast-bar{
    0%{transform: scaleX(1);}
    100%{transform: scaleX(0);}
}

.anim-demo--drag{
    height: 80px;
    display:flex;
    align-items:center;
    gap: 10px;
    position: relative;
}
.drag-card{
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    animation: drag-move 3.2s ease-in-out infinite;
}
.drag-shadow{
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(0,0,0,.25);
    filter: blur(6px);
    position: absolute;
    left: 8px; bottom: 8px;
    animation: drag-shadow 3.2s ease-in-out infinite;
}
@keyframes drag-move{
    0%,30%{transform: translateX(0);}
    60%,100%{transform: translateX(40px);}
}
@keyframes drag-shadow{
    0%,30%{opacity:.2;}
    60%,100%{opacity:.4;}
}

.anim-demo--switch{
    display:flex;
    align-items:center;
    gap: 12px;
}
.switch{
    width: 44px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    position: relative;
}
.switch span{
    position:absolute;
    top: 3px; left: 3px;
    width: 18px; height: 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.6);
    animation: switch-toggle 3s ease-in-out infinite;
}
@keyframes switch-toggle{
    0%,35%{transform: translateX(0); background: rgba(255,255,255,.5);}
    60%,100%{transform: translateX(20px); background: rgba(124,241,193,.8);}
}

.cases-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: var(--gap-2);
    flex-wrap:wrap;
    margin-bottom: 14px;
}
.cases-tags{display:flex; gap: var(--gap-1); flex-wrap:wrap;}
.cases-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-3);
}
@media (max-width: 960px){ .cases-grid{grid-template-columns:1fr;} }
.case-card{position: relative; overflow: hidden;}
.case-card:before{
    content:"";
    position:absolute;
    inset: 0;
    background: radial-gradient(420px 220px at 10% 0%, rgba(90,161,255,.10), transparent 60%);
    opacity: .6;
    pointer-events:none;
}
.case-card > *{position: relative; z-index: 1;}
.case-kicker{
    display:inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: var(--muted);
    font-size: .8rem;
    margin-bottom: 8px;
}
.case-demo{
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    display:grid;
    gap: var(--gap-1);
}
.case-row{
    display:grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--gap-1);
    font-size: .8rem;
}
.case-chip{
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    color: var(--muted);
    background: rgba(255,255,255,.03);
    text-align:center;
}
.case-input{
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}
.case-check{
    display:flex;
    gap: var(--gap-1);
    align-items:center;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    font-size: .8rem;
}
.case-check span{
    width: 10px; height: 10px; border-radius: 4px;
    border: 1px solid rgba(110,231,255,.3);
    background: rgba(110,231,255,.12);
}
.case-total{
    display:flex;
    justify-content:space-between;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(110,231,255,.25);
    background: rgba(110,231,255,.08);
}
.case-status{
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(124,241,193,.3);
    background: rgba(124,241,193,.08);
    color: var(--accent3);
    font-size: .8rem;
}
.case-toast{
    display:flex;
    gap: var(--gap-1);
    align-items:flex-start;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}

.patterns-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-3);
}
@media (max-width: 960px){ .patterns-grid{grid-template-columns:1fr;} }
.pattern-card{min-height: 170px; display:flex; flex-direction:column; gap: var(--gap-2);}
.pattern-demo{margin-top: auto;}

.advanced-card{
    position: relative;
    overflow: hidden;
    min-height: 260px;
}
.advanced-bg{
    position:absolute;
    inset:0;
    background:
        radial-gradient(520px 260px at 18% 20%, rgba(110,231,255,.20), transparent 60%),
        radial-gradient(520px 260px at 82% 80%, rgba(124,241,193,.18), transparent 60%),
        linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
}
.advanced-gridline{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity:.25;
}
.advanced-content{
    position: relative;
    z-index: 1;
    display:grid;
    gap: var(--gap-3);
}
.advanced-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: var(--gap-3);
    flex-wrap: wrap;
}
.advanced-kpi{
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    min-width: 120px;
}
.advanced-kpi strong{
    display:block;
    font-size: 1.4rem;
    line-height: 1;
}
.advanced-kpi span{
    font-size: .78rem;
    color: var(--muted);
}
.advanced-bars{
    display:grid;
    gap: var(--gap-2);
}
.advanced-bar{
    height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    overflow: hidden;
}
.advanced-bar span{
    display:block;
    height:100%;
    width: var(--w);
    background: linear-gradient(90deg, rgba(110,231,255,.72), rgba(124,241,193,.76));
    box-shadow: 0 0 18px rgba(110,231,255,.28);
    animation: advanced-flow 3.6s ease-in-out infinite;
}
@keyframes advanced-flow{
    0%,100%{filter: saturate(.85);}
    50%{filter: saturate(1.25);}
}
.dropdown{
    margin-top: 10px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: var(--surface);
    display:none;
}
.dropdown.open{display:grid; gap:6px;}
.dropdown-item{
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
    font-size: .85rem;
}

.lab-overlay{
    position: fixed;
    inset: 0;
    background: rgba(6,10,18,.55);
    display:none;
    align-items:center;
    justify-content:center;
    z-index: 40;
    padding: 20px;
    backdrop-filter: blur(6px);
}
.lab-overlay.open{display:flex;}
.lab-modal{
    width: min(420px, 92%);
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: var(--surface);
    box-shadow: var(--shadow);
    display:none;
}
.lab-modal.open{display:block;}
.lab-drawer{
    position: fixed;
    right: 16px;
    top: 80px;
    width: min(360px, 92%);
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: var(--surface);
    box-shadow: var(--shadow);
    display:none;
}
.lab-drawer.open{display:block;}
.drawer-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 10px;
    margin-bottom: 10px;
}
.drawer-fields{
    display:grid;
    gap: 10px;
    margin-top: 10px;
}
.drawer-input{
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}
.status-pill{
    display:inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(110,231,255,.25);
    background: rgba(110,231,255,.10);
    color: var(--accent2);
    font-size: .82rem;
    margin: 8px 0;
}
.status-pill--ok{
    border-color: rgba(124,241,193,.3);
    background: rgba(124,241,193,.08);
    color: var(--accent3);
}

.live-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-3);
}
@media (max-width: 960px){ .live-grid{grid-template-columns:1fr;} }
.live-card{min-height: 190px;}
.live-demo{
    margin-top: 10px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    display:grid;
    gap: var(--gap-2);
}
.hidden{display:none;}
.live-toast{
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
}
.live-toast.show{
    opacity: 1;
    transform: translateY(0);
}

.kanban-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-3);
}
@media (max-width: 960px){ .kanban-grid{grid-template-columns:1fr;} }
.kanban-col{
    display:flex;
    flex-direction:column;
    gap: var(--gap-2);
    min-height: 200px;
}
.kanban-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: var(--gap-1);
}
.kanban-card{
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    font-size: .86rem;
}
.kanban-card--drag{
    position: relative;
    animation: kanban-drag 3.2s ease-in-out infinite;
}
@keyframes kanban-drag{
    0%,30%{transform: translateX(0);}
    60%,100%{transform: translateX(10px) translateY(-4px);}
}

.wizard{
    margin-top: 16px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}
.wizard-head{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-2);
}
.wizard-step{
    display:flex;
    gap: var(--gap-1);
    align-items:flex-start;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
}
.wizard-step span{
    width: 24px; height: 24px; border-radius: 8px;
    display:inline-flex; align-items:center; justify-content:center;
    border: 1px solid rgba(110,231,255,.25);
    background: rgba(110,231,255,.10);
    color: var(--accent2);
    font-weight: 700;
    flex: 0 0 auto;
}
.wizard-step.active{
    border-color: rgba(124,241,193,.25);
}
.wizard-step.active span{
    border-color: rgba(124,241,193,.35);
    background: rgba(124,241,193,.12);
    color: var(--accent3);
}
.wizard-body{
    margin-top: 12px;
    display:grid;
    gap: var(--gap-2);
}
.wizard-progress{
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}
.wizard-progress span{
    display:block;
    height: 100%;
    width: 35%;
    background: linear-gradient(90deg, rgba(124,241,193,.55), rgba(110,231,255,.65));
    transition: transform .3s ease;
}
.wizard-fields{
    display:grid;
    gap: var(--gap-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wizard-actions{
    display:flex;
    gap: var(--gap-2);
    justify-content:flex-end;
}
@media (max-width: 960px){
    .wizard-head{grid-template-columns:1fr;}
    .wizard-fields{grid-template-columns:1fr;}
    .wizard-actions{justify-content:flex-start;}
}

.commerce-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-3);
}
@media (max-width: 960px){ .commerce-grid{grid-template-columns:1fr;} }
.commerce-card{min-height: 200px; display:flex; flex-direction:column; gap: var(--gap-2);}
.commerce-demo{
    margin-top: auto;
    display:grid;
    gap: var(--gap-2);
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: var(--surface2);
}
.product-thumb{
    height: 80px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(200px 120px at 20% 20%, rgba(110,231,255,.18), transparent 60%),
        linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.product-meta{display:flex; justify-content:space-between; align-items:center; gap: var(--gap-2);}
.product-tags{display:flex; gap: var(--gap-1); flex-wrap:wrap;}
.cart-row{
    display:flex;
    justify-content:space-between;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    font-size: .85rem;
}
.cart-total{
    border-color: rgba(110,231,255,.25);
    background: rgba(110,231,255,.08);
    font-weight: 700;
}
.cart-coupon{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.checkout-step{
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    font-size: .82rem;
}
.checkout-step.active{
    border-color: rgba(124,241,193,.3);
    background: rgba(124,241,193,.08);
    color: var(--accent3);
}
.checkout-pay{display:flex; gap: var(--gap-1); flex-wrap:wrap;}

.forms-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-3);
}
@media (max-width: 960px){ .forms-grid{grid-template-columns:1fr;} }
.form-card{min-height: 240px;}
.form-demo{
    margin-top: 10px;
    display:grid;
    gap: var(--gap-2);
}
.form-field{
    display:grid;
    gap: var(--gap-1);
}
.form-field input{
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: var(--surface2);
    color: var(--text);
    font-family: inherit;
}
.form-field input::placeholder{color: var(--muted);}
.form-hint{color: var(--muted); font-size: .78rem;}
.form-actions{display:flex; gap: var(--gap-2); flex-wrap:wrap;}
.form-status{
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(124,241,193,.3);
    background: rgba(124,241,193,.08);
    color: var(--accent3);
    font-size: .85rem;
}
.form-demo .is-valid{border-color: rgba(124,241,193,.5);}
.form-demo .is-invalid{border-color: rgba(255,200,100,.5);}

.filter-demo{
    margin-top: 10px;
    display:grid;
    gap: var(--gap-2);
}
.filter-chips{display:flex; gap: var(--gap-1); flex-wrap:wrap;}
.filter-chip{
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    font-size: .82rem;
    color: var(--muted);
}
.filter-chip.active{
    border-color: rgba(110,231,255,.3);
    background: rgba(110,231,255,.08);
    color: var(--accent2);
}
.range-bar{
    height: 6px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.06);
    overflow: hidden;
}
.range-bar span{
    display:block;
    height: 100%;
    width: 60%;
    background: linear-gradient(90deg, rgba(79,140,255,.6), rgba(122,230,255,.6));
}

.search-demo{
    margin-top: 10px;
    display:grid;
    gap: 8px;
}
.search-input{
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: var(--surface2);
    color: var(--muted);
    font-size: .85rem;
}
.search-suggest{
    display:grid;
    gap: 6px;
}
.suggest-item{
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    font-size: .85rem;
}
.suggest-item.active{
    border-color: rgba(124,241,193,.3);
    background: rgba(124,241,193,.08);
    color: var(--accent3);
}
.lab-exp{
    margin-top: 16px;
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.lab-exp__item{
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}
.lab-exp__title{
    font-weight: 700;
    margin-bottom: 4px;
}
@media (max-width: 960px){
    .lab-exp{grid-template-columns:1fr;}
}

/* ===== Subtle reveal ===== */
.reveal{
    opacity: 0;
    transform: translateY(14px);
    animation: reveal-up .7s ease forwards;
}
.reveal--delay-1{animation-delay:.08s}
.reveal--delay-2{animation-delay:.16s}
.reveal--delay-3{animation-delay:.24s}
@keyframes reveal-up{
    to{opacity:1; transform: translateY(0)}
}
.mock--2{
    background:
            radial-gradient(500px 300px at 70% 30%, rgba(110,231,255,.12), transparent 55%),
            linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}
.mock--3{
    background:
            radial-gradient(500px 300px at 40% 70%, rgba(79,140,255,.12), transparent 55%),
            linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}

/* Simulación “preview” sin imágenes */
.split__media .mock:before{
    content:"";
    position:absolute; inset: 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.split__media .mock:after{
    content:"";
    position:absolute;
    left: 26px; top: 34px;
    width: 62%;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    box-shadow:
            0 18px 0 rgba(255,255,255,.08),
            0 36px 0 rgba(255,255,255,.06),
            0 54px 0 rgba(255,255,255,.05),
            0 82px 0 rgba(79,140,255,.22);
    opacity: .9;
}

/* Infra block */
.infra{
    display:flex;
    justify-content:space-between;
    gap: var(--gap-3);
    align-items:center;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background:
            radial-gradient(520px 260px at 20% 0%, rgba(90,161,255,.16), transparent 60%),
            rgba(255,255,255,.03);
    box-shadow: var(--shadow);
}
@media (max-width: 960px){ .infra{ flex-direction:column; align-items:flex-start; } }
.infra__text{max-width: 72ch;}
.infra__meta{
    display:flex;
    flex-wrap:wrap;
    gap: var(--gap-1);
}
.infra__cta{
    display:flex;
    flex-direction:column;
    gap: var(--gap-2);
    align-items:flex-end;
}
.infra__card{
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    text-align:right;
}
.infra__kpi{
    font-size: 1.35rem;
    font-weight: 750;
    margin: 4px 0;
}
@media (max-width: 960px){
    .infra__cta{align-items:flex-start;}
    .infra__card{text-align:left; width:100%;}
}

/* Portfolio images */
.portfolio__img{
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.02);
}
.portfolio__img img{
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    filter: saturate(1.05) contrast(1.02);
}
@media (max-width: 960px){ .portfolio__img img{ height: 180px; } }
.portfolio-case{
    display:flex;
    flex-direction:column;
    min-height: 100%;
    gap: var(--gap-1);
}
.portfolio-case h3{
    margin: 2px 0 4px;
}
.portfolio-case .small{
    line-height: 1.7;
}
.portfolio-case .pill-row{
    margin-top: 14px;
}
.portfolio-case .card__footer{
    padding-top: 6px;
    margin-top: auto;
}

/* Articles */
.article{ max-width: 82ch; }
.article h1{ margin: 0 0 10px; font-size: clamp(30px, 3.8vw, 46px); letter-spacing: -.2px; }
.article h2{ margin: 22px 0 10px; font-size: 1.2rem; letter-spacing: -.1px; }
.article p{ color: var(--muted); line-height: 1.75; }
.kbd{
    display:inline-flex; padding: 2px 8px; border-radius: 8px;
    border:1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text);
    font-size: .9rem;
}

/* Footer */
.footer{
    margin-top: 26px;
    border-top: 1px solid var(--line);
    padding: 22px 0 14px;
    color: var(--muted);
    font-size: .86rem;
    position: relative;
    background:
        radial-gradient(700px 280px at 12% 0%, rgba(90,161,255,.12), transparent 65%),
        radial-gradient(700px 280px at 88% 0%, rgba(122,230,255,.08), transparent 65%),
        linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.01));
}
.footer:before{
    content:"";
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(110,231,255,.24), transparent);
    pointer-events:none;
}
.footer__inner{
    display:grid;
    grid-template-columns: 1.4fr .9fr .9fr auto;
    gap: var(--gap-4);
    align-items:start;
}
.footer a{
    color: var(--muted);
    text-decoration:none;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.footer a:hover{
    color:var(--text);
}
.footer__title{
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text);
    margin-bottom: 8px;
    opacity: .9;
}
.footer__brand{
    max-width: 62ch;
    display:grid;
    gap: var(--gap-1);
}
.footer__wordmark{
    height: 40px;
    width: auto;
    display:block;
    opacity: .9;
}
.logo--light{display:none;}
.brand__wordmark.logo--light,
.footer__wordmark.logo--light{display:none;}
[data-theme="light"] .logo--dark{display:none;}
[data-theme="light"] .brand__wordmark.logo--light,
[data-theme="light"] .footer__wordmark.logo--light{display:block;}
.footer__brand strong{
    font-size: .92rem;
    letter-spacing: .2px;
}
.footer__meta{
    display:flex;
    flex-wrap:wrap;
    gap: var(--gap-1);
}
.footer__meta span{
    display:inline-flex;
    align-items:center;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    font-size: .76rem;
    color: var(--muted);
}
.footer__links{
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--gap-1);
}
.footer__links a{
    display:inline-flex;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: .88rem;
}
.footer__links a:hover{
    border-color: var(--line);
    background: rgba(255,255,255,.04);
}
.footer__cta{
    display:flex;
    flex-direction:column;
    gap: var(--gap-1);
    align-items:flex-start;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.02);
}
.footer__cta small{color: var(--muted);}
.footer__legal{
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    text-align: center;
    color: var(--muted);
    font-size: .78rem;
}
[data-theme="light"] .footer{
    background:
        radial-gradient(700px 280px at 12% 0%, rgba(47,111,255,.10), transparent 65%),
        radial-gradient(700px 280px at 88% 0%, rgba(15,182,214,.08), transparent 65%),
        linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
}
[data-theme="light"] .footer:before{
    background: linear-gradient(90deg, transparent, rgba(15,182,214,.24), transparent);
}
[data-theme="light"] .footer__meta span{
    border-color: rgba(18,45,84,.16);
    background: rgba(18,45,84,.05);
}
[data-theme="light"] .footer__links a:hover{
    border-color: rgba(18,45,84,.18);
    background: rgba(18,45,84,.06);
}
[data-theme="light"] .footer__cta{
    border-color: rgba(18,45,84,.16);
    background: rgba(255,255,255,.72);
}
@media (max-width: 960px){
    .footer__inner{grid-template-columns: 1fr 1fr;}
}
@media (max-width: 720px){
    .footer__inner{grid-template-columns: 1fr;}
}

/* ===== Page hero (banner estilo Workflow) ===== */
.page-hero{
    position: relative;
    margin-top: 18px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: var(--shadow);
}
.page-hero__bg{
    position:absolute; inset:0;
    background:
            radial-gradient(920px 540px at 25% 35%, rgba(90,161,255,.24), transparent 60%),
            radial-gradient(820px 520px at 85% 40%, rgba(122,230,255,.10), transparent 55%),
            linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.page-hero__inner{
    position: relative;
    padding: 28px 22px;
}
.page-hero__title{
    margin: 10px 0 6px;
    font-size: clamp(34px, 4.5vw, 62px);
    line-height: 1.02;
}
.page-hero__lead{
    margin: 0;
    color: var(--muted);
    max-width: 72ch;
}

/* ===== Workflow grid ===== */
.wf-head{ margin-bottom: 18px; }

.wf-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-3);
    align-items: stretch;
}
@media (max-width: 960px){
    .wf-grid{ grid-template-columns: 1fr; }
}
.wf-col{
    height: 100%;
    display: flex;
    flex-direction: column;
}

.checklist{
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    display:flex;
    flex-direction:column;
    gap: var(--gap-2);
}
.checklist li{
    display:flex;
    gap: var(--gap-2);
    padding: 10px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
}
.check{
    display:inline-block;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border-radius: 8px;
    border: 1px solid rgba(110,231,255,.25);
    background: rgba(110,231,255,.10);
    position: relative;
    flex: 0 0 auto;
}
.check:after{
    content:"";
    position:absolute;
    left: 6px; top: 7px;
    width: 8px; height: 4px;
    border-left: 2px solid rgba(230,237,243,.95);
    border-bottom: 2px solid rgba(230,237,243,.95);
    transform: rotate(-45deg);
}

/* ===== Cards con contenido real (menos vacías) ===== */
.card__kpi{
    display:flex; gap: var(--gap-2); align-items:flex-start;
}
.kpi-dot{
    display:inline-block;
    width:10px;height:10px;border-radius:999px;margin-top:7px;
    background: rgba(110,231,255,.55);
    box-shadow: 0 0 0 6px rgba(110,231,255,.08);
    flex:0 0 auto;
}

.card__footer{
    margin-top: 14px;
    display:flex; gap: var(--gap-2); flex-wrap:wrap;
    align-items:center;
}
.card__meta{
    color: var(--muted);
    font-size: .9rem;
    margin-top: 8px;
}

/* ===== Bloque "Quick actions" mejorado ===== */
.quick{
    display:grid;
    grid-template-columns: 1.6fr .7fr .7fr;
    gap: var(--gap-3);
}
.quick--two{
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 960px){ .quick{ grid-template-columns: 1fr; } }

/* ===== Etapas con bullets ===== */
.steps .card{
    display:flex; flex-direction:column;
    min-height: 150px;
}
.steps .list{ margin-top: 10px; }
.steps .small{ line-height: 1.6; }

/* Artículos: evitar cards vacías + botón alineado abajo */
.article-card{ display:flex; flex-direction:column; min-height: 190px; }
.article-top h3{ margin: 10px 0 6px; }
.article-top .small{ margin: 0; line-height: 1.65; }

.readtime{
    display:flex;
    flex-wrap:wrap;
    gap: 8px;
    margin-top: 12px;
    color: var(--muted);
    font-size: .9rem;
}

.article-foot{
    margin-top: auto;
    padding-top: 14px;
}

@media (prefers-reduced-motion: reduce){
    *{scroll-behavior:auto}
    .btn,.card,.links a{transition:none}
    .reveal{animation:none; opacity:1; transform:none;}
    body:after{animation:none}
    .lab-demo:after{animation:none}
}

/* ===== Global hardening: responsive + theme ===== */

@media (max-width: 960px){
    .nav__inner{
        display:block;
    }
    .nav__brandrow{
        width: 100%;
    }
    .nav-toggle{
        display:inline-flex;
    }
    .links{
        width: 100%;
        display:none;
        margin-top: 10px;
        flex-direction:column;
        align-items:stretch;
        gap: 8px;
        padding: 10px;
        border-radius: 14px;
        border: 1px solid var(--line);
        background: var(--surface);
    }
    .links.is-open{
        display:flex;
    }
    .links a,
    .links .btn,
    .links .theme-toggle{
        width: 100%;
        justify-content:flex-start;
    }
    .nav-dropdown{
        width: 100%;
    }
    .nav-dropdown summary{
        width: 100%;
        justify-content: space-between;
    }
    .nav-dropdown__panel{
        position: static;
        min-width: auto;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        box-shadow: none;
        padding: 8px;
        border-radius: 12px;
    }
    .nav-dropdown:not([open]) .nav-dropdown__panel{
        display: none;
    }
}
@media (min-width: 961px){
    .nav-dropdown__panel{
        position: absolute;
        display: grid;
    }
}

@media (max-width: 768px){
    .main{padding: 24px 0 52px;}
    .section{padding: 38px 0;}
    .section--alt{padding: 42px 0;}
    .hero2{padding: 30px 0 18px;}
    .hero2__grid{padding: 16px;}
    .hero2__title{font-size: clamp(30px, 8.8vw, 42px);}
    .hero__title{font-size: clamp(28px, 8vw, 40px);}
    .page-hero__inner{padding: 22px 16px;}
    .page-hero__title{font-size: clamp(30px, 9vw, 42px);}
    .split__media .mock,
    .mock-svg{height: 220px;}
    .card{padding: 16px;}
    .hero__cta .btn{
        width: 100%;
        justify-content: center;
    }
    .links .btn{width: auto;}
}

[data-theme="light"] .section + .section{
    border-top: 1px solid rgba(10,18,35,.08);
}
[data-theme="light"] .section:before{
    background: linear-gradient(90deg, transparent, rgba(15,182,214,.18), transparent);
}
[data-theme="light"] .card:hover{
    border-color: rgba(10,18,35,.22);
}
[data-theme="light"] .badge--top{
    border-color: rgba(15,182,214,.32);
    background: rgba(15,182,214,.10);
}
[data-theme="light"] .micro{
    border-color: rgba(10,18,35,.14);
    background: rgba(10,18,35,.03);
}
[data-theme="light"] .hero2__bg,
[data-theme="light"] .panel,
[data-theme="light"] .exp-card{
    border-color: rgba(10,18,35,.14);
}
[data-theme="light"] .proof-item,
[data-theme="light"] .timeline-item,
[data-theme="light"] .exp-case,
[data-theme="light"] .exp-proof__item,
[data-theme="light"] .exp-action,
[data-theme="light"] .ui-demo,
[data-theme="light"] .demo-card,
[data-theme="light"] .demo-table .demo-row,
[data-theme="light"] .demo-invoice__row,
[data-theme="light"] .policy-row,
[data-theme="light"] .perm-row,
[data-theme="light"] .activity-item,
[data-theme="light"] .diff-row,
[data-theme="light"] .ui-command__item,
[data-theme="light"] .ui-dropdown__col span,
[data-theme="light"] .ui-context-item,
[data-theme="light"] .drawer-input,
[data-theme="light"] .case-demo,
[data-theme="light"] .case-check,
[data-theme="light"] .case-input{
    border-color: rgba(10,18,35,.14);
    background: rgba(10,18,35,.04);
}
[data-theme="light"] .ui-overlay,
[data-theme="light"] .lab-overlay{
    background: rgba(10,18,35,.24);
}
[data-theme="light"] .ui-modal,
[data-theme="light"] .ui-sheet,
[data-theme="light"] .ui-command,
[data-theme="light"] .ui-context-menu,
[data-theme="light"] .ui-dropdown,
[data-theme="light"] .lab-modal,
[data-theme="light"] .lab-drawer{
    border-color: rgba(10,18,35,.2);
    background: rgba(255,255,255,.94);
}
[data-theme="light"] .theme-toggle,
[data-theme="light"] .links a:hover{
    border-color: rgba(18,45,84,.22);
    background: rgba(18,45,84,.08);
}
[data-theme="light"] .nav-dropdown summary:hover,
[data-theme="light"] .nav-dropdown__panel a:hover{
    border-color: rgba(18,45,84,.22);
    background: rgba(18,45,84,.08);
}
[data-theme="light"] .nav-dropdown__panel{
    border-color: rgba(18,45,84,.22);
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 40px rgba(10,18,35,.15);
}
[data-theme="light"] .nav-toggle{
    border-color: rgba(18,45,84,.22);
    background: rgba(18,45,84,.05);
}

/* ===== Lab UI light palette ===== */
[data-theme="light"] .lab-page .page-hero__bg{
    border-color: rgba(14,165,183,.30);
    background:
            radial-gradient(520px 260px at 14% 8%, rgba(14,165,183,.22), transparent 62%),
            radial-gradient(520px 260px at 88% 12%, rgba(37,99,235,.20), transparent 62%),
            linear-gradient(170deg, rgba(255,255,255,.98), rgba(233,242,255,.94));
}
[data-theme="light"] .lab-page .card{
    border-color: rgba(18,45,84,.18);
    background: linear-gradient(165deg, rgba(255,255,255,.96), rgba(241,247,255,.90));
}
[data-theme="light"] .lab-page .card.card--soft{
    background: linear-gradient(165deg, rgba(238,248,255,.95), rgba(255,255,255,.92));
}
[data-theme="light"] .lab-page .anim-demo{
    border-color: rgba(18,45,84,.18);
    background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(236,245,255,.90));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
[data-theme="light"] .lab-page .ui-demo{
    border-color: rgba(18,45,84,.20);
    background: linear-gradient(165deg, rgba(255,255,255,.97), rgba(232,243,255,.92));
}
[data-theme="light"] .lab-page .pill{
    border-color: rgba(14,165,183,.34);
    background: rgba(14,165,183,.12);
    color: #0d4760;
}
[data-theme="light"] .lab-page .ui-kicker,
[data-theme="light"] .lab-page .case-kicker{
    border-color: rgba(37,99,235,.25);
    background: rgba(37,99,235,.10);
    color: #1e40af;
}
[data-theme="light"] .lab-page .lab-tech code{
    border-color: rgba(14,165,183,.26);
    background: rgba(14,165,183,.10);
    color: #0f4a60;
}
[data-theme="light"] .lab-page .theme-toggle-demo,
[data-theme="light"] .lab-page .switch{
    border-color: rgba(18,45,84,.22);
    background: rgba(18,45,84,.06);
}
[data-theme="light"] .lab-page .theme-preview{
    border-color: rgba(37,99,235,.26);
    background: linear-gradient(90deg, rgba(15,23,42,.82), rgba(248,250,255,.98));
}
[data-theme="light"] .lab-page .glass-chip{
    border-color: rgba(14,165,183,.28);
    background: rgba(255,255,255,.80);
    color: #0f1b2d;
}
[data-theme="light"] .lab-page .progress-ring{
    background: conic-gradient(rgba(14,165,183,.90) 0deg, rgba(14,165,183,.90) 260deg, rgba(18,45,84,.16) 260deg);
}
[data-theme="light"] .lab-page .progress-ring:before{
    background: rgba(255,255,255,.96);
    border-color: rgba(18,45,84,.16);
}
[data-theme="light"] .lab-page .anim-demo--shimmer .shimmer-line,
[data-theme="light"] .lab-page .skeleton-line,
[data-theme="light"] .lab-page .stagger-line{
    background: rgba(18,45,84,.14);
}
[data-theme="light"] .lab-page .anim-demo--shimmer .shimmer-line:after,
[data-theme="light"] .lab-page .skeleton-line:after{
    background: linear-gradient(120deg, transparent, rgba(14,165,183,.28), transparent);
}
[data-theme="light"] .lab-page .anim-demo--tabs .tabs{
    border-bottom-color: rgba(18,45,84,.18);
}
[data-theme="light"] .lab-page .anim-demo--tabs .tab-content{
    border-color: rgba(18,45,84,.18);
    background: rgba(255,255,255,.86);
}
[data-theme="light"] .lab-page .mini-step,
[data-theme="light"] .lab-page .ui-acc-toggle,
[data-theme="light"] .lab-page .ui-acc-panel,
[data-theme="light"] .lab-page .activity-pill,
[data-theme="light"] .lab-page .perm-cell{
    border-color: rgba(18,45,84,.16);
    background: rgba(255,255,255,.84);
}
[data-theme="light"] .lab-page .activity-pill.active{
    border-color: rgba(37,99,235,.32);
    background: rgba(37,99,235,.12);
    color: #1e3a8a;
}
[data-theme="light"] .lab-page .anim-demo--toast .toast,
[data-theme="light"] .lab-page .notify,
[data-theme="light"] .lab-page .case-toast{
    border-color: rgba(18,45,84,.18);
    background: rgba(255,255,255,.90);
}
[data-theme="light"] .lab-page .drag-card,
[data-theme="light"] .lab-page .case-input,
[data-theme="light"] .lab-page .case-check,
[data-theme="light"] .lab-page .case-demo{
    border-color: rgba(18,45,84,.16);
    background: rgba(255,255,255,.88);
}
[data-theme="light"] .lab-page .advanced-card{
    border-color: rgba(18,45,84,.20);
    background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(230,242,255,.92));
}
[data-theme="light"] .lab-page .advanced-bg{
    background:
            radial-gradient(520px 260px at 18% 20%, rgba(14,165,183,.18), transparent 60%),
            radial-gradient(520px 260px at 82% 80%, rgba(37,99,235,.16), transparent 60%),
            linear-gradient(145deg, rgba(255,255,255,.94), rgba(227,240,255,.72));
}
[data-theme="light"] .lab-page .advanced-gridline{
    background-image:
            linear-gradient(rgba(18,45,84,.08) 1px, transparent 1px),
            linear-gradient(90deg, rgba(18,45,84,.08) 1px, transparent 1px);
    opacity:.5;
}
[data-theme="light"] .lab-page .advanced-kpi,
[data-theme="light"] .lab-page .advanced-bar{
    border-color: rgba(18,45,84,.18);
    background: rgba(255,255,255,.88);
}
[data-theme="light"] .lab-page .infra{
    border-color: rgba(18,45,84,.20);
    background:
            radial-gradient(520px 260px at 20% 0%, rgba(14,165,183,.18), transparent 62%),
            radial-gradient(520px 260px at 88% 100%, rgba(37,99,235,.12), transparent 62%),
            linear-gradient(165deg, rgba(255,255,255,.98), rgba(233,244,255,.92));
}
[data-theme="light"] .lab-page .infra small{
    color: #36506e;
}

/* ===== Muestras ===== */
.muestras-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-3);
}
.muestra-card{
    display:flex;
    flex-direction:column;
    min-height: 100%;
    gap: var(--gap-2);
}
.muestra-card > .badge{
    margin-bottom: 2px;
}
.muestra-card h3{
    margin: 2px 0 4px;
}
.muestra-card .small{
    line-height: 1.7;
}
.muestra-card .card__footer{
    margin-top: auto;
    padding-top: 8px;
}
.muestra-thumb{
    margin: 4px 0 12px;
    height: 170px;
    border-radius: 14px;
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    padding: 10px;
    display:grid;
    gap: var(--gap-2);
}
.muestra-chip{
    align-self:start;
    justify-self:start;
    display:inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.10);
    font-size: .72rem;
    font-weight: 700;
}
.muestra-line{
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
}
.muestra-line.short{width: 66%;}
.muestra-mini-grid{
    margin-top: auto;
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-1);
}
.muestra-mini-grid span,
.muestra-kpis span,
.muestra-products span{
    display:block;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.12);
}
.muestra-mini-grid span{height: 48px;}

.muestra-thumb--landing{
    background:
        radial-gradient(320px 180px at 10% 0%, rgba(112,97,255,.4), transparent 60%),
        radial-gradient(320px 180px at 90% 10%, rgba(13,205,255,.3), transparent 60%),
        linear-gradient(160deg, #151a40, #1a2257);
}
.muestra-thumb--dashboard{
    background:
        radial-gradient(320px 180px at 10% 0%, rgba(57,130,255,.35), transparent 60%),
        linear-gradient(160deg, #10172d, #172243);
}
.muestra-side{
    position:absolute;
    left: 10px;
    top: 42px;
    width: 46px;
    height: calc(100% - 56px);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.10);
}
.muestra-kpis{
    margin-left: 58px;
    margin-top: 2px;
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap-1);
}
.muestra-kpis span{height: 22px;}
.muestra-table{
    margin-left: 58px;
    margin-top: auto;
    height: 58px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.10);
}

.muestra-thumb--shop{
    background:
        radial-gradient(320px 180px at 10% 0%, rgba(255,162,73,.38), transparent 60%),
        radial-gradient(320px 180px at 90% 0%, rgba(255,90,148,.32), transparent 60%),
        linear-gradient(160deg, #2a1712, #3a2019);
}
.muestra-banner{
    height: 54px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.10);
}
.muestra-products{
    margin-top: auto;
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-1);
}
.muestra-products span{height: 42px;}
.demo-surface{
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
    background:
        radial-gradient(620px 320px at 20% 0%, rgba(90,161,255,.18), transparent 60%),
        rgba(255,255,255,.03);
    box-shadow: var(--shadow);
}
.demo-brand-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: var(--gap-2);
    flex-wrap:wrap;
    margin-bottom: 12px;
}
.demo-landing-hero{
    display:grid;
    grid-template-columns: 1.25fr .75fr;
    gap: var(--gap-3);
    align-items:start;
}
.demo-form-card{
    display:grid;
    gap: var(--gap-1);
}
.demo-form-field{
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.02);
    color: var(--muted);
    font-size: .92rem;
}
.demo-landing__proof{
    margin: 14px 0;
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-2);
}
.demo-faq-item{
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,.08);
}
.demo-faq-item:first-of-type{
    border-top: 0;
}
.demo-dashboard-layout{
    display:grid;
    grid-template-columns: .55fr 1.45fr;
    gap: var(--gap-3);
}
.demo-sidebar{
    display:flex;
    flex-direction:column;
    gap: var(--gap-1);
    min-height: 100%;
}
.demo-side-link{
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    color: var(--muted);
    font-size: .9rem;
}
.demo-side-link.active{
    border-color: rgba(110,231,255,.28);
    color: var(--text);
    background: rgba(110,231,255,.10);
}
.demo-dashboard-main{
    display:grid;
    gap: var(--gap-2);
}
.demo-dashboard-widgets{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap: var(--gap-2);
}
.demo-kpi-grid{
    margin-top: 12px;
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap-2);
}
.demo-kpi-card{
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255,255,255,.02);
    padding: 10px;
}
.demo-kpi-card strong{
    display:block;
    margin-top: 2px;
    font-size: 1.2rem;
}
.demo-table-card{
    margin-top: 12px;
}
.demo-shop-hero{
    margin-top: 12px;
    display:grid;
    grid-template-columns: 1.25fr .75fr;
    gap: var(--gap-2);
    align-items:start;
}
.demo-products-grid{
    margin-top: 12px;
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-2);
}
.demo-product{
    display:flex;
    flex-direction:column;
    gap: var(--gap-2);
}
.demo-product__img{
    height: 130px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background:
        radial-gradient(220px 120px at 20% 20%, rgba(124,241,193,.18), transparent 60%),
        rgba(255,255,255,.03);
}
.demo-cart{
    margin-top: 12px;
}

@media (max-width: 960px){
    .muestras-grid{grid-template-columns: 1fr;}
    .demo-landing-hero{grid-template-columns: 1fr;}
    .demo-dashboard-layout{grid-template-columns: 1fr;}
    .demo-dashboard-widgets{grid-template-columns: 1fr;}
    .demo-shop-hero{grid-template-columns: 1fr;}
    .demo-landing__proof{grid-template-columns: 1fr;}
    .demo-kpi-grid{grid-template-columns: 1fr 1fr;}
    .demo-products-grid{grid-template-columns: 1fr;}
}
@media (max-width: 640px){
    .demo-kpi-grid{grid-template-columns: 1fr;}
}

[data-theme="light"] .demo-surface,
[data-theme="light"] .demo-kpi-card,
[data-theme="light"] .demo-product__img{
    border-color: rgba(10,18,35,.14);
    background:
        radial-gradient(620px 320px at 20% 0%, rgba(47,111,255,.10), transparent 60%),
        rgba(10,18,35,.03);
}
[data-theme="light"] .demo-form-field,
[data-theme="light"] .demo-side-link{
    border-color: rgba(10,18,35,.14);
    background: rgba(10,18,35,.03);
}
[data-theme="light"] .demo-side-link.active{
    border-color: rgba(15,182,214,.28);
    background: rgba(15,182,214,.10);
}
[data-theme="light"] .demo-faq-item{
    border-top-color: rgba(10,18,35,.12);
}
[data-theme="light"] .muestra-thumb{
    border-color: rgba(10,18,35,.14);
}
[data-theme="light"] .muestra-chip{
    border-color: rgba(18,45,84,.2);
    background: rgba(255,255,255,.78);
    color: #193150;
}
[data-theme="light"] .muestra-line{
    background: rgba(18,45,84,.16);
}
[data-theme="light"] .muestra-mini-grid span,
[data-theme="light"] .muestra-kpis span,
[data-theme="light"] .muestra-products span{
    border-color: rgba(18,45,84,.18);
    background: rgba(255,255,255,.66);
}
[data-theme="light"] .muestra-thumb--landing{
    background:
        radial-gradient(320px 180px at 10% 0%, rgba(77,102,255,.18), transparent 60%),
        radial-gradient(320px 180px at 90% 10%, rgba(15,182,214,.12), transparent 60%),
        linear-gradient(160deg, #eef3ff, #e6edff);
}
[data-theme="light"] .muestra-thumb--dashboard{
    background:
        radial-gradient(320px 180px at 10% 0%, rgba(47,111,255,.16), transparent 60%),
        linear-gradient(160deg, #edf3ff, #e6eeff);
}
[data-theme="light"] .muestra-side,
[data-theme="light"] .muestra-table,
[data-theme="light"] .muestra-banner{
    border-color: rgba(18,45,84,.18);
    background: rgba(255,255,255,.66);
}
[data-theme="light"] .muestra-thumb--shop{
    background:
        radial-gradient(320px 180px at 10% 0%, rgba(255,162,73,.18), transparent 60%),
        radial-gradient(320px 180px at 90% 0%, rgba(255,90,148,.12), transparent 60%),
        linear-gradient(160deg, #fff4ee, #ffede4);
}

/* ===== Inmersive demo scenes ===== */
.main--immersive{
    padding: 0;
}
.demo-scene{
    min-height: 100dvh;
    width: 100%;
    margin: 0;
    height: auto;
}
.demo-scene:before,
.demo-scene:after{
    display: none;
}
.scene{
    min-height: 100dvh;
    padding: 18px 0;
}
.scene-container{
    width: min(1220px, 100%);
    margin: 0 auto;
    display:grid;
    gap: 16px;
    padding: 0 18px 18px;
}
.scene-kicker{
    display:inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .8rem;
    border: 1px solid rgba(255,255,255,.22);
    color: rgba(255,255,255,.88);
    background: rgba(255,255,255,.08);
}
.scene-brand{
    display:flex;
    flex-direction:column;
    gap: 2px;
    text-decoration:none;
    color:inherit;
}
.scene-brand span{font-weight: 800; letter-spacing: .3px;}
.scene-brand small{color: var(--muted); font-size: .78rem;}
.scene-links{
    display:flex;
    flex-wrap:wrap;
    gap: var(--gap-1);
}
.scene-links a{
    text-decoration:none;
    color: inherit;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    font-size: .86rem;
}
.scene-card{
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    padding: 14px;
}
.scene-card h3{margin:0 0 8px;}
.scene-cta{
    display:flex;
    gap: var(--gap-2);
    flex-wrap:wrap;
    margin-top: 14px;
}
.scene-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,.22);
    color: inherit;
}
.scene-btn--primary{
    background: rgba(255,255,255,.20);
}
.scene-btn--ghost{
    background: rgba(255,255,255,.06);
}
.scene-grid{
    display:grid;
    gap: var(--gap-2);
}
.scene-grid--3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.demo-scene--landing{
    background:
        radial-gradient(720px 380px at 15% 8%, rgba(112,97,255,.35), transparent 55%),
        radial-gradient(780px 420px at 85% 10%, rgba(13,205,255,.24), transparent 56%),
        linear-gradient(180deg, #0d1022, #13173a 50%, #171b46);
    color: #ecf1ff;
}
.demo-scene--landing .scene-kicker{
    border-color: rgba(160,145,255,.35);
    background: rgba(160,145,255,.16);
}
.demo-scene--landing .scene-btn--primary{
    background: linear-gradient(135deg, rgba(120,109,255,.58), rgba(24,203,255,.52));
    border-color: rgba(172,220,255,.42);
    color: #f6fbff;
}
.demo-scene--landing .scene-btn--ghost{
    border-color: rgba(153,198,255,.3);
    background: rgba(57,102,190,.16);
}
.demo-scene--landing .scene-card{
    border-color: rgba(153,133,255,.28);
    background: rgba(120,109,255,.11);
}
.demo-scene--landing .scene-links a{
    border-color: rgba(145,188,255,.28);
    background: rgba(24,203,255,.12);
}
.demo-scene--landing .scene-metrics article{
    border-color: rgba(153,133,255,.28);
    background: rgba(120,109,255,.12);
}
.scene-nav{
    width: min(1220px, 100%);
    margin: 0 auto 14px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(8,11,28,.55);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: var(--gap-2);
    flex-wrap:wrap;
}
.landing-hero{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap: var(--gap-3);
    align-items:start;
}
.landing-hero .scene-card{
    display:grid;
    gap: var(--gap-2);
}
.landing-hero h1{
    margin: 10px 0;
    font-size: clamp(30px, 4.8vw, 64px);
    line-height: 1.02;
}
.landing-hero p{margin:0; color: rgba(236,241,255,.82); max-width: 70ch;}
.scene-metrics{
    margin-top: 16px;
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-2);
}
.scene-metrics article{
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    padding: 10px;
    background: rgba(255,255,255,.05);
}
.scene-metrics strong{display:block; font-size: 1.2rem;}
.scene-metrics span{font-size: .82rem; color: rgba(236,241,255,.8);}
.scene-field{
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.04);
    color: rgba(236,241,255,.8);
    font-size: .9rem;
}
.scene-field + .scene-field{
    margin-top: 2px;
}
.scene-faq-row{
    display:grid;
    grid-template-columns: .75fr 1.25fr;
    gap: var(--gap-2);
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,.12);
}
.scene-faq-row:first-of-type{border-top: 0;}
.scene-faq-row span{color: rgba(236,241,255,.82);}

.demo-scene--dashboard{
    background:
        radial-gradient(760px 420px at 10% -5%, rgba(57,130,255,.18), transparent 60%),
        linear-gradient(180deg, #0a0f1d, #0d1325 52%, #111933);
    color: #e8efff;
}
.demo-scene--dashboard .scene-kicker{
    border-color: rgba(114,196,255,.35);
    background: rgba(114,196,255,.14);
}
.demo-scene--dashboard .scene-btn--primary{
    background: linear-gradient(135deg, rgba(54,143,255,.58), rgba(70,225,255,.46));
    border-color: rgba(134,224,255,.4);
    color: #f2fbff;
}
.demo-scene--dashboard .scene-btn--ghost{
    border-color: rgba(132,196,255,.28);
    background: rgba(47,111,255,.12);
}
.demo-scene--dashboard .dash-side,
.demo-scene--dashboard .dash-main{
    border-color: rgba(105,184,255,.26);
    background: rgba(47,111,255,.10);
}
.demo-scene--dashboard .dash-kpis article{
    border-color: rgba(105,184,255,.28);
    background: rgba(70,225,255,.12);
}
.demo-scene--dashboard .dash-table > div{
    border-color: rgba(105,184,255,.24);
    background: rgba(47,111,255,.11);
}
.dash-shell{
    width: min(1320px, 98%);
    margin: 0 auto;
    min-height: calc(100dvh - 36px);
    display:grid;
    grid-template-columns: 260px 1fr;
    gap: var(--gap-3);
}
.dash-side{
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    padding: 14px;
    display:flex;
    flex-direction:column;
    gap: var(--gap-2);
}
.dash-brand{font-size: 1.1rem; font-weight: 800;}
.dash-sub{font-size: .82rem; color: rgba(232,239,255,.7);}
.dash-menu{
    display:flex;
    flex-direction:column;
    gap: var(--gap-1);
}
.dash-menu a{
    text-decoration:none;
    color: rgba(232,239,255,.78);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,.02);
}
.dash-menu a.active{
    color: #fff;
    border-color: rgba(114,196,255,.34);
    background: rgba(114,196,255,.15);
}
.dash-main{
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    padding: 14px;
    display:grid;
    gap: var(--gap-2);
}
.dash-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap: var(--gap-2);
    flex-wrap:wrap;
    width: 100%;
}
.dash-head h1{
    margin: 8px 0 0;
    font-size: clamp(28px, 3.8vw, 46px);
}
.dash-tags{
    display:flex;
    gap: var(--gap-1);
    flex-wrap:wrap;
    max-width: 100%;
}
.dash-tags span{
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    font-size: .82rem;
}
.dash-kpis{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap-2);
}
.dash-kpis article{
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    padding: 10px;
}
.dash-kpis small{color: rgba(232,239,255,.75);}
.dash-kpis strong{display:block; margin-top: 2px; font-size: 1.25rem;}
.dash-grid{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap: var(--gap-2);
}
.dash-table{
    display:grid;
    gap: var(--gap-1);
    font-size: .85rem;
}
.dash-table > div{
    display:grid;
    grid-template-columns: .8fr .8fr .8fr;
    gap: var(--gap-1);
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
}
.dash-table > .head{
    color: rgba(232,239,255,.7);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .75rem;
}
.dash-table .ok{color:#a7ffd5;}
.dash-table .warn{color:#ffdba2;}
.dash-events{
    display:grid;
    gap: var(--gap-2);
}
.dash-events > div{
    display:flex;
    gap: var(--gap-1);
    align-items:flex-start;
}
.dash-events p{
    margin: 0;
    display:grid;
    gap: 2px;
}
.dash-events small{color: rgba(232,239,255,.72);}
.dot{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-top: 7px;
    background: #89d9ff;
}
.dot.ok{background:#a7ffd5;}
.dot.warn{background:#ffdba2;}

.demo-scene--shop{
    background:
        radial-gradient(720px 380px at 10% 6%, rgba(255,162,73,.22), transparent 60%),
        radial-gradient(720px 380px at 90% 8%, rgba(255,90,148,.18), transparent 60%),
        linear-gradient(180deg, #1c120f, #251713 50%, #321e17);
    color: #ffece1;
}
.demo-scene--shop .scene-kicker{
    border-color: rgba(255,186,122,.38);
    background: rgba(255,186,122,.16);
}
.demo-scene--shop .scene-btn--primary{
    background: linear-gradient(135deg, rgba(255,152,74,.58), rgba(255,95,148,.44));
    border-color: rgba(255,201,160,.42);
    color: #fff7f3;
}
.demo-scene--shop .scene-btn--ghost{
    border-color: rgba(255,189,146,.3);
    background: rgba(255,160,108,.12);
}
.demo-scene--shop .scene-card,
.demo-scene--shop .shop-product{
    border-color: rgba(255,179,131,.3);
    background: rgba(255,140,72,.11);
}
.demo-scene--shop .scene-links a,
.demo-scene--shop .shop-filters button{
    border-color: rgba(255,185,139,.28);
    background: rgba(255,116,131,.12);
}
.shop-nav{
    width: min(1220px, 96%);
    margin: 0 auto 14px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(45,24,18,.55);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: var(--gap-2);
    flex-wrap:wrap;
}
.shop-hero{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap: var(--gap-2);
    align-items: stretch;
}
.shop-hero h1{
    margin: 10px 0;
    font-size: clamp(30px, 4.8vw, 60px);
    line-height: 1.02;
}
.shop-hero p{margin:0; color: rgba(255,236,225,.82);}
.shop-hero-media{
    min-height: 280px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    background:
        radial-gradient(280px 140px at 20% 20%, rgba(255,217,166,.36), transparent 60%),
        radial-gradient(280px 140px at 82% 80%, rgba(255,129,178,.26), transparent 60%),
        linear-gradient(140deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
}
.shop-filters{
    display:flex;
    flex-wrap:wrap;
    gap: var(--gap-1);
    align-items:center;
}
.shop-filters span{color: rgba(255,236,225,.8); font-size: .9rem;}
.shop-filters button{
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(255,255,255,.06);
    color: inherit;
    font-family: inherit;
}
.shop-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-2);
}
.shop-product{
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    padding: 12px;
    display:grid;
    gap: var(--gap-1);
}
.shop-product .img{
    height: 156px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.16);
    background:
        radial-gradient(220px 100px at 16% 20%, rgba(255,223,175,.35), transparent 60%),
        radial-gradient(220px 100px at 85% 84%, rgba(255,130,176,.26), transparent 60%),
        rgba(255,255,255,.05);
}
.shop-product h3{margin:0;}
.shop-product p{margin:0; color: rgba(255,236,225,.78);}
.shop-product div{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: var(--gap-1);
}
.shop-product button{
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 10px;
    padding: 6px 9px;
    background: rgba(255,255,255,.08);
    color: inherit;
    font-family: inherit;
    font-weight: 700;
}
.shop-bottom{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-2);
}
.shop-bottom p{margin:0 0 6px; color: rgba(255,236,225,.82);}
.shop-bottom hr{
    border: 0;
    border-top: 1px solid rgba(255,255,255,.16);
    margin: 8px 0;
}
.shop-bottom ul{
    margin:0;
    padding-left: 18px;
}

@media (max-width: 960px){
    .scene{padding: 12px;}
    .scene-grid--3{grid-template-columns: 1fr;}
    .landing-hero{grid-template-columns: 1fr;}
    .scene-metrics{grid-template-columns: 1fr;}
    .scene-faq-row{grid-template-columns: 1fr;}
    .dash-shell{grid-template-columns: 1fr;}
    .dash-kpis{grid-template-columns: 1fr 1fr;}
    .dash-grid{grid-template-columns: 1fr;}
    .shop-hero{grid-template-columns: 1fr;}
    .shop-grid{grid-template-columns: 1fr;}
    .shop-bottom{grid-template-columns: 1fr;}
}
@media (max-width: 640px){
    .dash-kpis{grid-template-columns: 1fr;}
}

[data-theme="light"] .scene-nav,
[data-theme="light"] .shop-nav,
[data-theme="light"] .scene-card,
[data-theme="light"] .dash-side,
[data-theme="light"] .dash-main,
[data-theme="light"] .dash-kpis article,
[data-theme="light"] .dash-table > div,
[data-theme="light"] .shop-product{
    border-color: rgba(10,18,35,.16);
    background: rgba(255,255,255,.74);
}
[data-theme="light"] .scene-kicker{
    border-color: rgba(10,18,35,.18);
    color: #1d2d4d;
    background: rgba(255,255,255,.72);
}
[data-theme="light"] .scene-brand small,
[data-theme="light"] .dash-sub{
    color: #5a6c88;
}
[data-theme="light"] .scene-brand span,
[data-theme="light"] .dash-brand{
    color: #132746;
}
[data-theme="light"] .scene-links a,
[data-theme="light"] .dash-tags span,
[data-theme="light"] .shop-filters button{
    border-color: rgba(10,18,35,.18);
    background: rgba(255,255,255,.72);
    color: #223654;
}
[data-theme="light"] .scene-links a:hover,
[data-theme="light"] .shop-filters button:hover{
    background: rgba(37,99,235,.12);
    border-color: rgba(37,99,235,.26);
    color: #163561;
}
[data-theme="light"] .scene-btn{
    border-color: rgba(10,18,35,.18);
    color: #1f3250;
}
[data-theme="light"] .scene-btn--primary{
    background: rgba(37,99,235,.20);
    color: #10315a;
}
[data-theme="light"] .scene-btn--ghost{
    background: rgba(10,18,35,.05);
    color: #1f3250;
}
[data-theme="light"] .scene-metrics article,
[data-theme="light"] .scene-field,
[data-theme="light"] .dash-menu a,
[data-theme="light"] .shop-hero-media,
[data-theme="light"] .shop-product .img{
    border-color: rgba(10,18,35,.16);
    background: rgba(255,255,255,.68);
}
[data-theme="light"] .shop-hero-media{
    background:
        radial-gradient(320px 160px at 18% 20%, rgba(251,146,60,.18), transparent 62%),
        radial-gradient(320px 160px at 86% 80%, rgba(236,72,153,.16), transparent 62%),
        linear-gradient(140deg, rgba(255,255,255,.82), rgba(255,245,238,.78));
}
[data-theme="light"] .shop-product .img{
    background:
        radial-gradient(240px 120px at 18% 22%, rgba(251,146,60,.20), transparent 62%),
        radial-gradient(240px 120px at 86% 78%, rgba(236,72,153,.16), transparent 62%),
        rgba(255,255,255,.72);
}
[data-theme="light"] .scene-field{
    color: #48607e;
}
[data-theme="light"] .demo-form-field,
[data-theme="light"] .drawer-input,
[data-theme="light"] .case-input,
[data-theme="light"] .ui-command__input{
    color: #48607e;
}
[data-theme="light"] .ui-command__input::placeholder{
    color: #6b7d98;
    opacity: 1;
}
[data-theme="light"] .dash-menu a{
    color: #2c3b59;
}
[data-theme="light"] .dash-menu a:hover{
    border-color: rgba(37,99,235,.28);
    background: rgba(37,99,235,.10);
    color: #163561;
}
[data-theme="light"] .dash-menu a.active{
    color: #0f1f3e;
    border-color: rgba(15,182,214,.35);
    background: rgba(15,182,214,.14);
}
[data-theme="light"] .landing-hero p,
[data-theme="light"] .shop-hero p{
    color: #465c7a;
}
[data-theme="light"] .landing-hero h1,
[data-theme="light"] .dash-head h1,
[data-theme="light"] .shop-hero h1{
    color: #102844;
}
[data-theme="light"] .dash-table > .head{
    color: #5b6b85;
}
[data-theme="light"] .dash-events small,
[data-theme="light"] .scene-metrics span,
[data-theme="light"] .scene-faq-row span,
[data-theme="light"] .shop-product p{
    color: #4f5f7c;
}
[data-theme="light"] .demo-scene--dashboard .dash-kpis small{
    color: #4c5a72;
}
[data-theme="light"] .scene-faq-row{
    border-top-color: rgba(10,18,35,.12);
}
[data-theme="light"] .scene-faq-row strong{
    color: #122b4a;
}
[data-theme="light"] .shop-filters span{
    color: #3f5572;
}
[data-theme="light"] .shop-product h3,
[data-theme="light"] .shop-bottom h3{
    color: #162f4f;
}
[data-theme="light"] .shop-product button{
    border-color: rgba(18,45,84,.22);
    background: rgba(18,45,84,.06);
    color: #1d3658;
}
[data-theme="light"] .shop-product button:hover{
    border-color: rgba(37,99,235,.28);
    background: rgba(37,99,235,.12);
    color: #14345f;
}
[data-theme="light"] .shop-bottom p{
    color: #4c617e;
}
[data-theme="light"] .dash-table .ok{color:#1c8d60;}
[data-theme="light"] .dash-table .warn{color:#a06916;}

/* ===== Common resolution tuning ===== */
@media (max-width: 1440px){
    .hero2__title{font-size: clamp(34px, 4.2vw, 56px);}
}

@media (max-width: 1280px){
    .hero2__grid{padding: 18px;}
    .page-hero__title{font-size: clamp(32px, 4.4vw, 54px);}
}

@media (max-width: 1024px){
    .card{padding: 16px;}
    .hero__lead{font-size: 1rem;}
    .hero2__lead{font-size: 1rem;}
    .dash-head h1{font-size: clamp(26px, 4.6vw, 40px);}
    .shop-hero h1,
    .landing-hero h1{font-size: clamp(28px, 5.4vw, 46px);}
}

@media (max-width: 820px){
    .hero__cta{gap: var(--gap-2); row-gap: var(--gap-2);}
    .btn{padding: 10px 12px;}
    .proof-title{font-size: 1.12rem;}
    .dash-shell{width:min(980px, 99%);}
}

@media (max-width: 768px){
    .hero2__title{font-size: clamp(28px, 8.4vw, 40px);}
    .page-hero__lead{font-size: .98rem;}
    .muestra-thumb{height: 156px;}
}

@media (max-width: 480px){
    .card{padding: 14px;}
    .badge,.pill{font-size: .8rem;}
    .hero__title,
    .page-hero__title{letter-spacing: -.2px;}
    .hero__cta .btn{
        width: 100%;
        min-height: 42px;
    }
    .scene{padding: 10px;}
    .scene-links{width: 100%;}
    .scene-links a{
        text-align:center;
        flex: 1 1 calc(50% - 8px);
    }
    .dash-table > div{
        grid-template-columns: .9fr .9fr .9fr;
        font-size: .8rem;
    }
}

@media (max-width: 390px){
    .hero2__grid{padding: 12px;}
    .hero__title{font-size: clamp(24px, 8.6vw, 34px);}
    .page-hero__title{font-size: clamp(24px, 9.2vw, 34px);}
    .muestra-thumb{height: 144px; padding: 8px;}
    .muestra-chip{font-size: .68rem; padding: 3px 7px;}
    .scene-btn{width: 100%;}
}

/* ===== High-contrast scene palettes (forced) ===== */
/* Landing: electric violet + cyan */
.demo-scene--landing{
    background:
        radial-gradient(860px 420px at 8% 6%, rgba(168,85,247,.48), transparent 58%),
        radial-gradient(840px 420px at 92% 10%, rgba(6,182,212,.38), transparent 58%),
        linear-gradient(180deg, #170a2e, #23134a 52%, #2f1a66);
}
.demo-scene--landing .scene-nav,
.demo-scene--landing .scene-card{background: rgba(82,38,143,.24); border-color: rgba(181,127,255,.48);}
.demo-scene--landing .scene-links a{background: rgba(34,211,238,.20); border-color: rgba(103,232,249,.46);}
.demo-scene--landing .scene-btn--primary{background: linear-gradient(135deg, rgba(192,132,252,.75), rgba(34,211,238,.68));}
.demo-scene--landing .scene-btn--ghost{background: rgba(139,92,246,.22);}

/* Dashboard: cyber blue + lime */
.demo-scene--dashboard{
    background:
        radial-gradient(860px 420px at 10% 0%, rgba(14,116,255,.40), transparent 60%),
        radial-gradient(860px 420px at 90% 8%, rgba(132,255,0,.24), transparent 58%),
        linear-gradient(180deg, #091426, #0d1f3a 52%, #14305b);
}
.demo-scene--dashboard .dash-side,
.demo-scene--dashboard .dash-main{background: rgba(16,58,122,.24); border-color: rgba(96,165,250,.48);}
.demo-scene--dashboard .dash-kpis article{background: rgba(132,255,0,.12); border-color: rgba(190,242,100,.42);}
.demo-scene--dashboard .dash-menu a.active{background: rgba(132,255,0,.20); border-color: rgba(190,242,100,.50); color: #f4ffe1;}
.demo-scene--dashboard .scene-btn--primary{background: linear-gradient(135deg, rgba(56,189,248,.74), rgba(132,255,0,.58));}

/* Shop: sunset orange + fuchsia */
.demo-scene--shop{
    background:
        radial-gradient(900px 460px at 8% 0%, rgba(251,146,60,.44), transparent 60%),
        radial-gradient(860px 420px at 92% 6%, rgba(236,72,153,.34), transparent 58%),
        linear-gradient(180deg, #2c120b, #3b1a10 50%, #4b1d18);
}
.demo-scene--shop .shop-nav,
.demo-scene--shop .scene-card,
.demo-scene--shop .shop-product{background: rgba(146,56,25,.24); border-color: rgba(253,186,116,.44);}
.demo-scene--shop .scene-links a,
.demo-scene--shop .shop-filters button{background: rgba(236,72,153,.18); border-color: rgba(244,114,182,.44);}
.demo-scene--shop .scene-btn--primary{background: linear-gradient(135deg, rgba(251,146,60,.74), rgba(236,72,153,.62));}
.demo-scene--shop .scene-btn--ghost{background: rgba(251,146,60,.20);}

/* Light mode versions with equally distinct personalities */
[data-theme="light"] .demo-scene--landing{
    background:
        radial-gradient(900px 460px at 10% 6%, rgba(99,102,241,.26), transparent 58%),
        radial-gradient(860px 440px at 90% 12%, rgba(14,165,233,.22), transparent 58%),
        linear-gradient(180deg, #f0f4ff, #e8efff 52%, #e1eaff);
    color: #1a2550;
}
[data-theme="light"] .demo-scene--landing .scene-nav,
[data-theme="light"] .demo-scene--landing .scene-card{background: rgba(99,102,241,.10); border-color: rgba(99,102,241,.30); box-shadow: 0 12px 30px rgba(79,70,229,.08);}
[data-theme="light"] .demo-scene--landing .scene-links a{background: rgba(14,165,233,.14); border-color: rgba(14,165,233,.34); color: #1f3b5f;}
[data-theme="light"] .demo-scene--landing .scene-btn--primary{background: linear-gradient(135deg, rgba(99,102,241,.40), rgba(14,165,233,.30)); border-color: rgba(59,130,246,.40); color: #1d2a55;}

[data-theme="light"] .demo-scene--dashboard{
    background:
        radial-gradient(900px 460px at 12% 4%, rgba(37,99,235,.20), transparent 60%),
        radial-gradient(880px 440px at 88% 10%, rgba(132,255,0,.18), transparent 58%),
        linear-gradient(180deg, #edf6ff, #e6efff 52%, #dbe9ff);
    color: #172a49;
}
[data-theme="light"] .demo-scene--dashboard .dash-side,
[data-theme="light"] .demo-scene--dashboard .dash-main{background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.30); box-shadow: 0 12px 30px rgba(37,99,235,.08);}
[data-theme="light"] .demo-scene--dashboard .dash-side{background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.30); box-shadow: 0 12px 30px rgba(37,99,235,.08);}
[data-theme="light"] .demo-scene--dashboard .dash-kpis article{background: rgba(132,255,0,.14); border-color: rgba(101,163,13,.34);}
[data-theme="light"] .demo-scene--dashboard .dash-menu a.active{background: rgba(132,255,0,.18); border-color: rgba(101,163,13,.38); color: #243a08;}
[data-theme="light"] .demo-scene--dashboard .scene-btn--primary{background: linear-gradient(135deg, rgba(37,99,235,.32), rgba(132,255,0,.26)); border-color: rgba(37,99,235,.36); color: #143055;}

[data-theme="light"] .demo-scene--shop{
    background:
        radial-gradient(920px 460px at 10% 0%, rgba(251,146,60,.26), transparent 60%),
        radial-gradient(880px 420px at 90% 8%, rgba(236,72,153,.22), transparent 58%),
        linear-gradient(180deg, #fff2eb, #ffe9de 50%, #ffdfd1);
    color: #3c1f18;
}
[data-theme="light"] .demo-scene--shop .shop-nav,
[data-theme="light"] .demo-scene--shop .scene-card,
[data-theme="light"] .demo-scene--shop .shop-product{background: rgba(251,146,60,.12); border-color: rgba(234,88,12,.32); box-shadow: 0 12px 30px rgba(234,88,12,.08);}
[data-theme="light"] .demo-scene--shop .scene-links a,
[data-theme="light"] .demo-scene--shop .shop-filters button{background: rgba(236,72,153,.14); border-color: rgba(219,39,119,.32); color: #5b1f2a;}
[data-theme="light"] .demo-scene--shop .scene-btn--primary{background: linear-gradient(135deg, rgba(251,146,60,.34), rgba(236,72,153,.28)); border-color: rgba(249,115,22,.36); color: #4e241d;}

@media (min-width: 1600px){
    .scene-nav{width: min(1480px, 94%);}
    .scene-container{width: min(1480px, 94%);}
    .dash-shell{width: min(1480px, 94%);}
    .landing-hero h1{font-size: clamp(34px, 3.6vw, 70px);}
    .scene-card, .dash-main, .dash-side{border-radius: 18px;}
}

/* Utilities */
.u-m0{margin:0}
.u-mt-8{margin-top:8px}
.u-mt-6{margin-top:6px}
.u-mt-10{margin-top:10px}
.u-mt-12{margin-top:12px}
.u-mt-14{margin-top:14px}
.u-mt-16{margin-top:16px}
.u-mt-18{margin-top:18px}
.u-mb-6{margin-bottom:6px}
.u-mb-8{margin-bottom:8px}
.u-mb-10{margin-bottom:10px}
.u-mb-12{margin-bottom:12px}
.u-mb-14{margin-bottom:14px}
.u-mb-16{margin-bottom:16px}
.u-max-80ch{max-width:80ch}
.u-max-82ch{max-width:82ch}
.u-flex-between-end{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:12px;
    flex-wrap:wrap;
}
.u-flex-center-gap{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}