/* ═══════════════════════════════════════════
   BYLONIS COMPONENTS
═══════════════════════════════════════════ */

/* ── HIDE Fort theme header on ByLoniS pages ── */
.bylonis-home .top_panel,
.bylonis-page .top_panel {
    display: none !important;
}

.bylonis-theme .sc_layouts_title {
    display: none !important;
}

/* ── Force full-width on ByLoniS pages (override Fort layout) ── */
.bylonis-home .body_wrap,
.bylonis-home .page_wrap,
.bylonis-home .page_content_wrap,
.bylonis-home .content_wrap,
.bylonis-home .content,
.bylonis-page .body_wrap,
.bylonis-page .page_wrap,
.bylonis-page .page_content_wrap,
.bylonis-page .content_wrap,
.bylonis-page .content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}
.bylonis-home .sidebar,
.bylonis-page .sidebar {
    display: none !important;
}

/* ── CUSTOM NAV (BlueLand-style) ── */
.bl-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 0 0;
    background: rgba(2,6,8,0.8);
    backdrop-filter: blur(20px) saturate(1.2);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: all 0.3s ease;
}
.bl-nav.scrolled {
    background: rgba(2,6,8,0.95);
    box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}
.bl-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    gap: var(--space-xl);
}
.bl-nav__logo {
    display: flex;
    align-items: baseline;
    gap: 6px;
    text-decoration: none !important;
    flex-shrink: 0;
}
.bl-nav__logo-text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.bl-nav__logo-sub {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--signal-green);
    opacity: 0.8;
}
.bl-nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}
.bl-nav__links a {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none !important;
    transition: color 0.2s ease;
    white-space: nowrap;
}
.bl-nav__links a:hover {
    color: var(--text-primary);
}

/* Nav Dropdowns */
.bl-nav__dropdown {
    position: relative;
}
.bl-nav__dropdown-trigger {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none !important;
    transition: color 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.bl-nav__dropdown-trigger:hover {
    color: var(--text-primary);
}
.bl-nav__dropdown-trigger svg {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}
.bl-nav__dropdown:hover .bl-nav__dropdown-trigger svg {
    transform: rotate(180deg);
}
.bl-nav__dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background: rgba(10,14,18,0.97);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    transform: translateX(-50%) translateY(4px);
    z-index: 100;
}
.bl-nav__dropdown:hover .bl-nav__dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.bl-nav__dropdown-menu a {
    display: block;
    padding: 8px 14px;
    font-size: 13px !important;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}
.bl-nav__dropdown-menu a:hover {
    background: rgba(255,255,255,0.06);
}

.bl-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
}
.bl-btn--sm {
    padding: 9px 20px;
    font-size: 13px;
}
.bl-lang-switch--nav {
    display: flex;
    gap: 2px;
    margin-top: 0;
}
.bl-lang-switch--nav a {
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--text-tertiary);
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.bl-lang-switch--nav a.active {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
}
.bl-lang-switch--nav a:hover {
    color: var(--text-primary);
}

/* Mobile toggle */
.bl-nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.bl-nav__toggle span {
    width: 22px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 1px;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .bl-nav__links {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        flex-direction: column;
        background: rgba(2,6,8,0.95);
        backdrop-filter: blur(20px);
        padding: var(--space-lg);
        gap: var(--space-md);
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .bl-nav__links.open { display: flex; }
    .bl-nav__toggle { display: flex; }
    .bl-nav__actions .bl-btn { display: none; }
    .bl-nav__dropdown-trigger { color: var(--text-secondary); font-size: 14px; font-weight: 500; }
    .bl-nav__dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        backdrop-filter: none;
        border: none;
        border-radius: 0;
        padding: 4px 0 4px 16px;
        min-width: auto;
        display: none;
    }
    .bl-nav__dropdown.open .bl-nav__dropdown-menu { display: block; }
    .bl-nav__dropdown-menu a { padding: 6px 0; font-size: 13px !important; }
}

/* Hide Fort theme default footer on ByLoniS pages */
.bylonis-home .footer_copyright_wrap,
.bylonis-home .footer_widgets_wrap,
.bylonis-page .footer_copyright_wrap,
.bylonis-page .footer_widgets_wrap,
.bylonis-home .sidebar_widgets,
.bylonis-page .sidebar_widgets {
    display: none !important;
}

/* ── HERO ── */
.bl-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 64px; /* offset for fixed nav */
    padding: 140px 0 100px;
    background: var(--void);
}

/* Grid background */
.bl-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,212,160,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,212,160,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
}

/* Ambient glow */
.bl-hero__glow {
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    filter: blur(180px);
    opacity: 0.12;
    pointer-events: none;
}
.bl-hero__glow--green {
    background: var(--signal-green);
    top: -200px;
    right: -200px;
}
.bl-hero__glow--purple {
    background: var(--signal-purple);
    bottom: -300px;
    left: -200px;
    opacity: 0.08;
}

/* Scanning line */
.bl-hero__scanline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--signal-green), transparent);
    opacity: 0.3;
    animation: bl-scan 6s linear infinite;
}
@keyframes bl-scan {
    0% { top: 0; opacity: 0; }
    5% { opacity: 0.3; }
    95% { opacity: 0.3; }
    100% { top: 100%; opacity: 0; }
}

.bl-hero__content {
    position: relative;
    z-index: 2;
    max-width: 100%;
    text-align: left;
}

.bl-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: rgba(0,212,160,0.08);
    border: 1px solid rgba(0,212,160,0.15);
    border-radius: 100px;
    margin-bottom: var(--space-xl);
}
.bl-hero__eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--signal-green);
    box-shadow: 0 0 8px var(--signal-green);
    animation: bl-pulse-dot 2s infinite;
}

.bl-hero__title {
    font-family: 'Cal Sans', 'Lexend Deca', sans-serif;
    font-weight: 700;
    font-size: clamp(48px, 7.5vw, 96px);
    line-height: 1.1;
    letter-spacing: -0.05em;
    text-align: left;
    margin-bottom: var(--space-lg);
}

/* ── Animated gradient title (cycling colors) ── */
.bl-grad {
    position: relative;
    display: block;
}

/* ::before = solid white text layer (background text) */
.bl-grad::before {
    content: attr(data-content);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
}

/* Gradient text on top */
.bl-grad__text {
    position: relative;
    z-index: 1;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Line 1 gradient: emerald → cyan */
.bl-grad__text--1 {
    background-image: linear-gradient(to right, #00D47E, #00F0FF);
}

/* Line 2 gradient: cyan → emerald */
.bl-grad__text--2 {
    background-image: linear-gradient(to right, #00F0FF, #00D47E);
}

/* Foreground (gradient layer) keyframes */
@keyframes bl-grad-fg-1 {
    0%, 16.667%, 100%   { opacity: 1; }
    33.333%, 83.333%    { opacity: 0; }
}
@keyframes bl-grad-fg-2 {
    0%, 100%            { opacity: 0; }
    33.333%, 50%        { opacity: 1; }
    16.667%, 66.667%    { opacity: 0; }
}

/* Background (solid white layer) keyframes */
@keyframes bl-grad-bg-1 {
    0%, 16.667%, 100%   { opacity: 0; }
    25%, 91.667%        { opacity: 1; }
}
@keyframes bl-grad-bg-2 {
    0%, 100%            { opacity: 1; }
    33.333%, 50%        { opacity: 0; }
    25%, 58.333%        { opacity: 1; }
}

.bl-grad__text--1     { animation: bl-grad-fg-1 8s infinite; }
.bl-grad__text--2     { animation: bl-grad-fg-2 8s infinite; }
.bl-grad--1::before   { animation: bl-grad-bg-1 8s infinite; }
.bl-grad--2::before   { animation: bl-grad-bg-2 8s infinite; }

@media (prefers-reduced-motion: reduce) {
    .bl-grad__text, .bl-grad::before { animation: none !important; }
    .bl-grad__text { opacity: 1 !important; }
    .bl-grad::before { opacity: 0 !important; }
}

/* GSAP line-split spans */
.bl-hero__line {
    display: block;
    will-change: transform, opacity, filter;
}

.bl-hero__description {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 19px;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 640px;
    margin-bottom: var(--space-xl);
}

.bl-hero__actions {
    margin-bottom: var(--space-2xl);
}

.bl-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ── PROBLEM SECTION ── */
.bl-problem { border-top: var(--border-subtle); }

/* Two-panel comparison */
.bl-problem__panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}
.bl-problem__panel {
    border-radius: 16px;
    padding: var(--space-xl);
    position: relative;
    overflow: hidden;
}
.bl-problem__panel--saas {
    background: rgba(255,77,77,0.03);
    border: 1px solid rgba(255,77,77,0.12);
}
.bl-problem__panel--bylonis {
    background: rgba(0,212,160,0.03);
    border: 1px solid rgba(0,212,160,0.15);
}
.bl-problem__panel--bylonis::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--signal-green), var(--signal-purple));
}

/* Panel badge */
.bl-problem__panel-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(255,77,77,0.1);
    color: var(--signal-red);
    margin-bottom: var(--space-lg);
}
.bl-problem__panel-badge--green {
    background: rgba(0,212,160,0.12);
    color: var(--signal-green);
}

/* Cost chart */
.bl-problem__chart {
    height: 80px;
    margin-bottom: var(--space-md);
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    overflow: hidden;
}
.bl-problem__chart-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Invoice rows */
.bl-problem__invoice { margin-bottom: var(--space-md); }
.bl-problem__inv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-family: var(--font-mono);
    font-size: 13px;
}
.bl-problem__inv-month {
    color: var(--text-tertiary);
    font-size: 12px;
}
.bl-problem__inv-amount {
    font-weight: 600;
    color: var(--text-primary);
}
.bl-problem__inv-row--warn .bl-problem__inv-amount { color: var(--signal-amber); }
.bl-problem__inv-row--danger .bl-problem__inv-amount { color: var(--signal-red); font-size: 14px; }
.bl-problem__inv-row--critical { background: rgba(255,77,77,0.04); }
.bl-problem__inv-row--critical .bl-problem__inv-amount { color: var(--signal-red); font-size: 15px; font-weight: 700; }
.bl-problem__inv-row--stable .bl-problem__inv-amount { color: var(--signal-green); }

/* Alert / Stable badges */
.bl-problem__inv-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-lg);
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(255,77,77,0.08);
    border: 1px solid rgba(255,77,77,0.12);
    color: var(--signal-red);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
}
.bl-problem__inv-stable {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-lg);
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(0,212,160,0.06);
    border: 1px solid rgba(0,212,160,0.12);
    color: var(--signal-green);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
}

/* Pain / benefit points */
.bl-problem__points {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bl-problem__point {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 1.4;
}
.bl-problem__point--bad { color: var(--text-tertiary); }
.bl-problem__point--bad svg { color: rgba(255,77,77,0.5); flex-shrink: 0; }
.bl-problem__point--good { color: var(--text-primary); }
.bl-problem__point--good svg { color: var(--signal-green); flex-shrink: 0; }

/* Solution callout */
.bl-problem__solution {
    margin-top: var(--space-xl);
    padding: var(--space-xl);
    background: rgba(0,212,160,0.04);
    border: var(--border-glow-green);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}
.bl-problem__solution-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(0,212,160,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--signal-green);
}
.bl-problem__solution-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 6px;
}
.bl-problem__solution-desc { font-size: 15px; color: var(--text-secondary); }

/* ── DEPLOYMENT MODEL CARDS ── */
.bl-deploy__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}

.bl-deploy-card {
    padding: var(--space-xl) var(--space-lg);
    background: var(--light-surface);
    border: 1px solid var(--light-border);
    border-radius: 12px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.bl-deploy-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--signal-green);
    opacity: 0;
    transition: opacity 0.3s;
}
.bl-deploy-card:nth-child(2)::before { background: var(--signal-purple); }
.bl-deploy-card:nth-child(3)::before { background: #76B900; }
.bl-deploy-card:nth-child(4)::before { background: var(--signal-amber); }
.bl-deploy-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}
.bl-deploy-card:hover::before { opacity: 1; }

.bl-deploy-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}
.bl-deploy-card:nth-child(1) .bl-deploy-card__icon { background: rgba(0,212,160,0.1); color: #00A880; }
.bl-deploy-card:nth-child(2) .bl-deploy-card__icon { background: rgba(124,106,255,0.1); color: var(--signal-purple); }
.bl-deploy-card:nth-child(3) .bl-deploy-card__icon { background: rgba(118,185,0,0.1); color: #76B900; }
.bl-deploy-card:nth-child(4) .bl-deploy-card__icon { background: rgba(245,166,35,0.1); color: var(--signal-amber); }

.bl-deploy-card__tag {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--light-text-secondary);
    letter-spacing: 0.12em;
    margin-bottom: var(--space-sm);
}
.bl-deploy-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--light-text);
    margin-bottom: var(--space-md);
    line-height: 1.25;
}
.bl-deploy-card__desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--light-text-secondary);
    flex: 1;
}
.bl-deploy-card__highlight {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--light-border);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: #00A880;
}
.bl-deploy-card:nth-child(2) .bl-deploy-card__highlight { color: var(--signal-purple); }
.bl-deploy-card:nth-child(3) .bl-deploy-card__highlight { color: #76B900; }
.bl-deploy-card:nth-child(4) .bl-deploy-card__highlight { color: var(--signal-amber); }
.bl-deploy-card__highlight svg { flex-shrink: 0; }

/* ── ARCHITECTURE ── */
.bl-arch__frame {
    margin-top: var(--space-2xl);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    padding: var(--space-xl);
}
.bl-arch__placeholder {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--deep) 0%, var(--surface) 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.bl-arch__placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,212,160,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,212,160,0.06) 1px, transparent 1px);
    background-size: 40px 40px;
}
.bl-arch__flow {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: var(--space-xl);
}
.bl-arch__node {
    padding: 14px 22px;
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    min-width: 140px;
}
.bl-arch__node--source { background: rgba(124,106,255,0.12); border: 1px solid rgba(124,106,255,0.25); color: #A99AFF; }
.bl-arch__node--agent { background: rgba(245,166,35,0.1); border: 1px solid rgba(245,166,35,0.2); color: var(--signal-amber); }
.bl-arch__node--core { background: rgba(0,212,160,0.1); border: 1px solid rgba(0,212,160,0.25); color: var(--signal-green); padding: 20px 28px; }
.bl-arch__node--output { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.bl-arch__connector { color: var(--text-tertiary); font-size: 18px; }
.bl-arch__outputs { display: flex; flex-direction: column; gap: 10px; }

/* ── ARCHITECTURE FLOW (numbered, BlueLand-style) ── */
.bl-arch-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
    position: relative;
}
.bl-arch-flow::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, var(--signal-green), var(--signal-purple), var(--signal-amber), var(--signal-green));
    opacity: 0.3;
}
.bl-arch-step {
    text-align: center;
    position: relative;
    z-index: 1;
}
.bl-arch-step__num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--void);
    background: var(--signal-green);
    box-shadow: 0 0 30px rgba(0,212,160,0.25);
}
.bl-arch-step:nth-child(2) .bl-arch-step__num { background: var(--signal-purple); box-shadow: 0 0 30px rgba(124,106,255,0.25); color: #fff; }
.bl-arch-step:nth-child(3) .bl-arch-step__num { background: var(--signal-amber); box-shadow: 0 0 30px rgba(245,166,35,0.25); }
.bl-arch-step:nth-child(4) .bl-arch-step__num { background: var(--signal-green); box-shadow: 0 0 30px rgba(0,212,160,0.25); }
.bl-arch-step__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 6px;
}
.bl-arch-step__desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* Architecture component badges */
.bl-arch-badges {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-xl);
    flex-wrap: wrap;
}
.bl-arch-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-secondary);
}

/* ── COMPARISON (BlueLand-style) ── */
.bl-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}
.bl-compare__col {
    border-radius: 16px;
    padding: var(--space-xl);
    position: relative;
    overflow: hidden;
}
.bl-compare__col--legacy {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
}
.bl-compare__col--bylonis {
    background: rgba(0,212,160,0.04);
    border: 1px solid rgba(0,212,160,0.15);
}
.bl-compare__col--bylonis::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--signal-green), var(--signal-purple));
}
.bl-compare__header {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bl-compare__badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}
.bl-compare__badge--legacy {
    background: rgba(255,255,255,0.06);
    color: var(--text-tertiary);
}
.bl-compare__badge--bylonis {
    background: rgba(0,212,160,0.15);
    color: var(--signal-green);
}
.bl-compare__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
}
.bl-compare__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.bl-compare__item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
}
.bl-compare__item--legacy svg {
    color: var(--text-tertiary);
    flex-shrink: 0;
    opacity: 0.5;
}
.bl-compare__item--legacy {
    color: var(--text-tertiary);
}
.bl-compare__item--bylonis svg {
    color: var(--signal-green);
    flex-shrink: 0;
}
.bl-compare__item--bylonis {
    color: var(--text-primary);
}
.bl-compare__ai-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    background: rgba(124,106,255,0.2);
    color: var(--signal-purple);
    margin-left: 4px;
}

@media (max-width: 768px) {
    .bl-compare { grid-template-columns: 1fr; }
    .bl-arch-flow { grid-template-columns: repeat(2, 1fr); }
    .bl-arch-flow::before { display: none; }
}

/* ── CAPABILITY CARDS ── */
.bl-cap__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}
.bl-cap-card {
    padding: var(--space-xl);
    background: rgba(255,255,255,0.02);
    border: var(--border-subtle);
    border-radius: 12px;
    transition: all 0.3s ease;
}
.bl-cap-card:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.bl-cap-card__header { display: flex; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-md); }
.bl-cap-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--signal-green-dim);
    color: var(--signal-green);
}
.bl-cap-card:nth-child(2) .bl-cap-card__icon { background: var(--signal-purple-dim); color: var(--signal-purple); }
.bl-cap-card:nth-child(3) .bl-cap-card__icon { background: rgba(245,166,35,0.15); color: var(--signal-amber); }
.bl-cap-card:nth-child(4) .bl-cap-card__icon { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.bl-cap-card__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.bl-cap-card__desc { font-size: 14px; color: var(--text-secondary); line-height: 1.65; }

/* ── PRICING TABLE ── */
.bl-pricing__wrap {
    margin-top: var(--space-2xl);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--light-border);
    background: var(--light-surface);
}
.bl-pricing__table { width: 100%; border-collapse: collapse; }
.bl-pricing__table thead { background: #EEF1F5; }
.bl-pricing__table th {
    padding: 16px var(--space-lg);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #556B7F;
    text-align: left;
    border-bottom: 1px solid var(--light-border);
}
.bl-pricing__table td {
    padding: 22px var(--space-lg);
    font-size: 15px;
    color: #0C1E30 !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--light-border) !important;
    vertical-align: top;
}
.bl-pricing__table tr:last-child td { border-bottom: none; }
.bl-pricing__table tbody tr { background: #FFFFFF !important; }
.bl-pricing__table tbody tr:hover { background: #F7F9FB !important; }
.bl-unit-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 10px; color: #0C1E30; }
.bl-unit-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.bl-unit-dot--site { background: #00A880; }
.bl-unit-dot--host { background: #7C6AFF; }
.bl-unit-dot--app { background: #F5A623; }
.bl-td-desc { color: #556B7F; }

.bl-pricing__principle {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background: var(--light-surface);
    border: 1px solid var(--light-border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}
.bl-pricing__principle-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(0,212,160,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #00A880;
}
.bl-pricing__principle-text { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: #0C1E30; }
.bl-pricing__principle-sub { font-size: 14px; color: #556B7F; margin-top: 4px; font-weight: 400; }

/* ── INDUSTRY CARDS ── */
.bl-industries__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}
.bl-industry-card {
    padding: var(--space-xl) var(--space-lg);
    background: rgba(255,255,255,0.03);
    border: var(--border-subtle);
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
}
.bl-industry-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(0,212,160,0.15);
    transform: translateY(-4px);
}
.bl-industry-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
    background: rgba(0,212,160,0.06);
    color: var(--signal-green);
}
.bl-industry-card:nth-child(2) .bl-industry-card__icon { background: rgba(124,106,255,0.08); color: var(--signal-purple); }
.bl-industry-card:nth-child(3) .bl-industry-card__icon { background: rgba(245,166,35,0.08); color: var(--signal-amber); }
.bl-industry-card:nth-child(4) .bl-industry-card__icon { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.bl-industry-card__title { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.bl-industry-card__desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* ── FINAL CTA ── */
.bl-final-cta { text-align: center; background: var(--deep); border-top: var(--border-subtle); }
.bl-final-cta__title { font-size: clamp(28px, 4vw, 44px); margin-bottom: var(--space-lg); }

.bl-steps { display: flex; justify-content: center; gap: var(--space-xl); margin: var(--space-2xl) 0; flex-wrap: wrap; }
.bl-step { display: flex; align-items: flex-start; gap: var(--space-md); text-align: left; max-width: 260px; }
.bl-step__number {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--signal-green-dim); border: 1px solid rgba(0,212,160,0.2);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--signal-green);
}
.bl-step__title { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.bl-step__desc { font-size: 13px; color: var(--text-secondary); }

/* ── FAQ ── */
.bl-faq__list {
    max-width: 780px;
    margin: var(--space-2xl) auto 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.bl-faq__item {
    border-bottom: 1px solid var(--light-border);
}
.bl-faq__item:first-child {
    border-top: 1px solid var(--light-border);
}
.bl-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--light-text);
    transition: color 0.2s;
}
.bl-faq__question::-webkit-details-marker { display: none; }
.bl-faq__question:hover { color: #00A880; }
.bl-faq__chevron {
    flex-shrink: 0;
    color: var(--light-text-secondary);
    transition: transform 0.3s ease;
}
.bl-faq__item[open] .bl-faq__chevron {
    transform: rotate(180deg);
}
.bl-faq__answer {
    padding: 0 0 var(--space-lg) 0;
}
.bl-faq__answer p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--light-text-secondary);
    margin: 0;
}

/* ── BLOG TEASER ── */
.bl-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}
.bl-blog-card {
    padding: var(--space-xl);
    background: rgba(255,255,255,0.03);
    border: var(--border-subtle);
    border-radius: 12px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}
.bl-blog-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(0,212,160,0.15);
    transform: translateY(-4px);
}
.bl-blog-card__tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--signal-green);
    background: rgba(0,212,160,0.1);
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: var(--space-md);
    align-self: flex-start;
}
.bl-blog-card:nth-child(2) .bl-blog-card__tag { color: var(--signal-purple); background: rgba(124,106,255,0.12); }
.bl-blog-card:nth-child(3) .bl-blog-card__tag { color: var(--signal-amber); background: rgba(245,166,35,0.1); }
.bl-blog-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.35;
    margin-bottom: var(--space-md);
}
.bl-blog-card__desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    flex: 1;
}
.bl-blog-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-lg);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--signal-green);
    text-decoration: none;
    transition: gap 0.2s ease;
}
.bl-blog-card__cta:hover { gap: 10px; }

/* ── FOOTER ── */
.bl-footer {
    background: var(--void);
    border-top: var(--border-subtle);
    padding: var(--space-3xl) 0 var(--space-xl);
}
.bl-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-2xl); margin-bottom: var(--space-2xl); }
.bl-footer__grid--6col { grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; gap: var(--space-xl); }
.bl-footer__brand-desc { font-size: 14px; color: var(--text-tertiary); line-height: 1.7; margin-top: var(--space-md); max-width: 300px; }
.bl-footer__col-title { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--space-lg); }
.bl-footer__links { list-style: none; padding: 0; margin: 0; }
.bl-footer__links li { margin-bottom: 12px; }
.bl-footer__links a { font-size: 14px; color: var(--text-secondary); text-decoration: none; transition: color 0.2s; }
.bl-footer__links a:hover { color: var(--signal-green); }
.bl-footer__bottom { border-top: var(--border-subtle); padding-top: var(--space-lg); display: flex; justify-content: space-between; align-items: center; }
.bl-footer__copy { font-size: 13px; color: var(--text-tertiary); }
.bl-footer__location { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-tertiary); }

/* Language switcher */
.bl-lang-switch { display: flex; gap: 4px; align-items: center; }
.bl-lang-switch a {
    padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600;
    text-decoration: none; color: var(--text-tertiary); transition: all 0.2s;
    border: 1px solid transparent;
}
.bl-lang-switch a:hover { color: var(--text-primary); }
.bl-lang-switch a.active { color: var(--signal-green); border-color: rgba(0,212,160,0.3); background: rgba(0,212,160,0.08); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
    .bl-deploy__grid { grid-template-columns: repeat(2, 1fr); }
    .bl-cap__grid { grid-template-columns: 1fr; }
    .bl-industries__grid { grid-template-columns: repeat(2, 1fr); }
    .bl-blog__grid { grid-template-columns: 1fr; }
    .bl-footer__grid, .bl-footer__grid--6col { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
    .bl-footer__brand { grid-column: 1 / -1; }
    .bl-problem__panels { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .bl-hero { padding: 120px 0 80px; min-height: auto; }
    .bl-hero__title { font-size: clamp(32px, 8vw, 48px); }
    .bl-deploy__grid { grid-template-columns: 1fr; }
    .bl-industries__grid { grid-template-columns: 1fr; }
    .bl-blog__grid { grid-template-columns: 1fr; }
    .bl-steps { flex-direction: column; align-items: center; }
    .bl-step { max-width: 100%; }
    .bl-footer__grid, .bl-footer__grid--6col { grid-template-columns: 1fr 1fr; }
    .bl-footer__brand { grid-column: 1 / -1; }
    .bl-footer__bottom { flex-direction: column; gap: var(--space-md); text-align: center; }
    .bl-pricing__wrap { overflow-x: auto; }
    .bl-arch__flow { flex-direction: column; }
    .bl-arch__connector { transform: rotate(90deg); }
    .bl-faq__question { font-size: 15px; }
}

/**
 * Bylonis New Sections — Appended to components.css
 * Feature Cards Grid, CSS Mockup Graphics, OTel Benefits,
 * Pricing Trust, Enterprise, Stats, Responsive
 */

/* ==========================================================================
   1. FEATURE CARDS GRID (.bl-features)
   SigNoz-style 2-column grid with dashed borders
   ========================================================================== */

.bl-features {
    position: relative;
}

.bl-features__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.bl-features__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: var(--space-2xl);
    border: 1px dashed rgba(255, 255, 255, 0.08);
}

.bl-feature-card {
    padding: var(--space-xl);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    transition: background-color 0.3s ease;
}

.bl-feature-card:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.bl-feature-card__content {
    margin-bottom: var(--space-lg);
}

.bl-feature-card__label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--signal-green);
    margin-bottom: var(--space-sm);
}

.bl-feature-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.3;
}

.bl-feature-card__desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.bl-feature-card__graphic {
    min-height: 200px;
    position: relative;
}

.bl-feature-card:nth-child(2) .bl-feature-card__label {
    color: var(--signal-purple);
}

.bl-feature-card:nth-child(3) .bl-feature-card__label {
    color: var(--signal-amber);
}

.bl-feature-card:nth-child(4) .bl-feature-card__label {
    color: var(--signal-green);
}

.bl-feature-card:nth-child(5) .bl-feature-card__label {
    color: var(--signal-purple);
}

.bl-feature-card:nth-child(6) .bl-feature-card__label {
    color: var(--signal-amber);
}


/* ==========================================================================
   2. CSS MOCKUP GRAPHICS (.bl-mock)
   CSS-only product UI mockups
   ========================================================================== */

/* ── Base Classes ── */

.bl-mock {
    position: relative;
    min-height: 220px;
    background: rgba(4, 10, 18, 0.6);
    border-radius: 12px;
    overflow: hidden;
    font-family: var(--font-mono);
}

.bl-mock__panel {
    position: absolute;
    background: rgba(8, 20, 32, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.bl-mock__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bl-mock__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.bl-mock__dot--r {
    background: #FF5F56;
}

.bl-mock__dot--y {
    background: #FFBD2E;
}

.bl-mock__dot--g {
    background: #27C93F;
}

.bl-mock__bar-title {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-left: 8px;
    font-weight: 500;
    letter-spacing: 0.04em;
}


/* ── Mock A: Unified Platform (.bl-mock--unified) ── */

.bl-mock--unified {
    min-height: 280px;
}

.bl-mock--unified .bl-mock__panel--logs {
    top: 8%;
    left: 4%;
    width: 54%;
    height: 60%;
    z-index: 2;
}

.bl-mock--unified .bl-mock__panel--traces {
    top: 4%;
    right: 4%;
    width: 46%;
    height: 48%;
    z-index: 1;
}

.bl-mock--unified .bl-mock__panel--chart {
    bottom: 4%;
    left: 20%;
    right: 4%;
    height: 42%;
    z-index: 3;
}

/* Log rows */
.bl-mock__log-row {
    display: flex;
    gap: 8px;
    padding: 5px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 10px;
    align-items: center;
}

.bl-mock__log-row:last-child {
    border-bottom: none;
}

.bl-mock__ts {
    color: var(--text-tertiary);
    min-width: 50px;
    flex-shrink: 0;
}

.bl-mock__sev {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bl-mock__sev--info {
    background: rgba(0, 212, 160, 0.15);
    color: #00D4A0;
}

.bl-mock__sev--warn {
    background: rgba(245, 166, 35, 0.15);
    color: #F5A623;
}

.bl-mock__sev--err {
    background: rgba(255, 77, 77, 0.15);
    color: #FF4D4D;
}

.bl-mock__msg {
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* Trace rows */
.bl-mock__trace-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
}

.bl-mock__trace-label {
    font-size: 9px;
    color: var(--text-tertiary);
    min-width: 55px;
    flex-shrink: 0;
}

.bl-mock__trace-bar {
    height: 6px;
    border-radius: 3px;
    opacity: 0.7;
    background: var(--signal-green);
}

.bl-mock__trace-row:nth-child(3) .bl-mock__trace-bar {
    background: var(--signal-purple);
}

.bl-mock__trace-row:nth-child(4) .bl-mock__trace-bar {
    background: var(--signal-amber);
}

.bl-mock__trace-dur {
    font-size: 9px;
    color: var(--text-tertiary);
    min-width: 40px;
    flex-shrink: 0;
    text-align: right;
}

/* Chart */
.bl-mock__chart-svg {
    width: 100%;
    height: calc(100% - 28px);
    display: block;
}

.bl-mock__chart-svg path.chart-line {
    stroke: var(--signal-green);
    fill: none;
    stroke-width: 2;
}

.bl-mock__chart-svg path.chart-area {
    fill: rgba(0, 212, 160, 0.08);
    stroke: none;
}


/* ── Mock B: Log Table (.bl-mock--logs) ── */

.bl-mock--logs {
    min-height: 240px;
}

.bl-mock--logs .bl-mock__panel--main {
    position: absolute;
    inset: 6%;
}

.bl-mock__log-header {
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    align-items: center;
}

.bl-mock__log-header span:first-child {
    min-width: 65px;
    flex-shrink: 0;
}

.bl-mock__log-header span:nth-child(2) {
    min-width: 56px;
    flex-shrink: 0;
}

.bl-mock__log-header span:nth-child(3) {
    flex: 1;
}


/* ── Mock C: Query Builder (.bl-mock--query) ── */

.bl-mock--query {
    min-height: 240px;
}

.bl-mock--query .bl-mock__panel--main {
    position: absolute;
    inset: 6%;
}

.bl-mock__tabs {
    display: flex;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bl-mock__tab {
    padding: 8px 14px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary);
    border-bottom: 2px solid transparent;
    cursor: default;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    font-family: var(--font-mono);
}

.bl-mock__tab--active {
    color: var(--signal-green);
    border-bottom-color: var(--signal-green);
    background: rgba(0, 212, 160, 0.05);
}

.bl-mock__code {
    padding: 12px;
    font-size: 11px;
    line-height: 1.7;
    white-space: pre;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    overflow: hidden;
}

.bl-mock__code .kw {
    color: #C678DD;
}

.bl-mock__code .fn {
    color: #61AFEF;
}

.bl-mock__code .str {
    color: #98C379;
}

.bl-mock__code .num {
    color: #D19A66;
}

.bl-mock__code .cm {
    color: #5C6370;
    font-style: italic;
}


/* ── Mock D: Correlation (.bl-mock--correlation) ── */

.bl-mock--correlation {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
    min-height: 220px;
}

.bl-mock--correlation .bl-mock__panel {
    position: relative;
    flex: 1;
    background: rgba(8, 20, 32, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.bl-mock__corr-arrow {
    flex-shrink: 0;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--signal-green);
    font-size: 16px;
    opacity: 0.6;
}

.bl-mock__metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px;
    font-size: 10px;
    color: var(--text-secondary);
}

.bl-mock__metric-label {
    display: flex;
    align-items: center;
}

.bl-mock__metric-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    display: inline-block;
    flex-shrink: 0;
}

.bl-mock__metric-dot--p99 {
    background: var(--signal-red);
}

.bl-mock__metric-dot--p90 {
    background: var(--signal-purple);
}

.bl-mock__metric-dot--p50 {
    background: var(--signal-amber);
}

.bl-mock__metric-value {
    font-family: var(--font-mono);
    color: var(--text-primary);
    font-size: 10px;
}

.bl-mock__trace-detail {
    padding: 6px 10px;
    font-size: 10px;
}

.bl-mock__trace-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    color: var(--text-tertiary);
}

.bl-mock__trace-detail-row span:first-child {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bl-mock__trace-detail-row span:last-child {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 10px;
}

.bl-mock__mini-log {
    padding: 4px 10px;
    font-size: 9px;
    color: var(--text-tertiary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    display: flex;
    gap: 6px;
    align-items: center;
}

.bl-mock__mini-log:last-child {
    border-bottom: none;
}

.bl-mock__mini-log-sev {
    padding: 0 4px;
    border-radius: 2px;
    font-size: 8px;
    font-weight: 700;
    flex-shrink: 0;
}


/* ── Mock E: Deploy Nodes (.bl-mock--deploy) ── */

.bl-mock--deploy {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    padding: 20px;
    align-content: center;
    min-height: 220px;
}

.bl-mock__node {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
}

.bl-mock__node--green {
    background: rgba(0, 212, 160, 0.2);
    border-color: rgba(0, 212, 160, 0.3);
    box-shadow: 0 0 8px rgba(0, 212, 160, 0.15);
}

.bl-mock__node--purple {
    background: rgba(124, 106, 255, 0.2);
    border-color: rgba(124, 106, 255, 0.3);
    box-shadow: 0 0 8px rgba(124, 106, 255, 0.15);
}

.bl-mock__node--amber {
    background: rgba(245, 166, 35, 0.2);
    border-color: rgba(245, 166, 35, 0.3);
    box-shadow: 0 0 8px rgba(245, 166, 35, 0.15);
}


/* ── Mock F: OTel Isometric (.bl-mock--otel) ── */

.bl-mock--otel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 20px;
    min-height: 220px;
}

.bl-mock__iso-block {
    padding: 16px 24px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    min-width: 160px;
}

.bl-mock__iso-block--top {
    background: rgba(0, 212, 160, 0.1);
    border: 1px solid rgba(0, 212, 160, 0.25);
    color: var(--signal-green);
    box-shadow: 0 4px 24px rgba(0, 212, 160, 0.15);
}

.bl-mock__iso-block--bottom {
    background: rgba(124, 106, 255, 0.08);
    border: 1px solid rgba(124, 106, 255, 0.2);
    color: var(--signal-purple);
}

.bl-mock__iso-conn {
    width: 2px;
    height: 24px;
    background: repeating-linear-gradient(
        to bottom,
        var(--text-tertiary) 0 4px,
        transparent 4px 8px
    );
    margin: 0 auto;
    flex-shrink: 0;
}


/* ==========================================================================
   3. OPENTELEMETRY BENEFITS (.bl-otel)
   4 benefit cards in 2x2 grid + checklist
   ========================================================================== */

.bl-otel {
    position: relative;
}

.bl-otel__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.bl-otel__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}

.bl-otel__card {
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.02);
    border: var(--border-subtle);
    border-radius: 12px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.bl-otel__card:hover {
    background: rgba(255, 255, 255, 0.035);
}

.bl-otel__card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    background: var(--signal-green-dim);
    color: var(--signal-green);
    font-size: 18px;
}

.bl-otel__card:nth-child(2) .bl-otel__card-icon {
    background: var(--signal-purple-dim);
    color: var(--signal-purple);
}

.bl-otel__card:nth-child(3) .bl-otel__card-icon {
    background: rgba(245, 166, 35, 0.2);
    color: var(--signal-amber);
}

.bl-otel__card:nth-child(4) .bl-otel__card-icon {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.bl-otel__card-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.3;
}

.bl-otel__card-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* OTel Checklist */
.bl-otel__checklist {
    margin-top: var(--space-2xl);
    padding: var(--space-xl);
    background: rgba(0, 212, 160, 0.03);
    border: 1px solid rgba(0, 212, 160, 0.1);
    border-radius: 12px;
}

.bl-otel__checklist-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.bl-otel__check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.bl-otel__check-item svg {
    flex-shrink: 0;
    color: var(--signal-green);
    width: 18px;
    height: 18px;
}

.bl-otel__check-item + .bl-otel__check-item {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}


/* ==========================================================================
   4. PRICING TRUST CARDS (.bl-pricing-trust)
   4 trust indicators in a row (light theme section)
   ========================================================================== */

.bl-pricing-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.bl-pricing-trust__card {
    padding: var(--space-lg);
    background: var(--light-surface);
    border: 1px solid var(--light-border);
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bl-pricing-trust__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.bl-pricing-trust__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 auto var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 168, 128, 0.1);
    color: #00A880;
    font-size: 18px;
}

.bl-pricing-trust__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--light-text);
    margin-bottom: 4px;
    line-height: 1.3;
}

.bl-pricing-trust__desc {
    font-size: 13px;
    color: var(--light-text-secondary);
    line-height: 1.5;
    margin: 0;
}


/* ==========================================================================
   5. ENTERPRISE SECTION (.bl-enterprise)
   Feature list + enterprise graphic
   ========================================================================== */

.bl-enterprise {
    position: relative;
}

.bl-enterprise__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.bl-enterprise__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
    margin-top: var(--space-2xl);
}

.bl-enterprise__features {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.bl-enterprise__feat {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.bl-enterprise__feat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--signal-green-dim);
    color: var(--signal-green);
    font-size: 18px;
}

.bl-enterprise__feat:nth-child(2) .bl-enterprise__feat-icon {
    background: var(--signal-purple-dim);
    color: var(--signal-purple);
}

.bl-enterprise__feat:nth-child(3) .bl-enterprise__feat-icon {
    background: rgba(245, 166, 35, 0.2);
    color: var(--signal-amber);
}

.bl-enterprise__feat:nth-child(4) .bl-enterprise__feat-icon {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.bl-enterprise__feat-content {
    flex: 1;
}

.bl-enterprise__feat-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 4px;
    line-height: 1.3;
}

.bl-enterprise__feat-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Enterprise graphic - connection diagram */
.bl-mock--enterprise {
    position: relative;
    min-height: 320px;
    background: rgba(4, 10, 18, 0.6);
    border-radius: 12px;
    overflow: hidden;
}

.bl-mock__ent-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.bl-mock__ent-svg line {
    stroke: rgba(0, 212, 160, 0.2);
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
}

.bl-mock__ent-svg line.line-purple {
    stroke: rgba(124, 106, 255, 0.2);
}

.bl-mock__ent-svg line.line-amber {
    stroke: rgba(245, 166, 35, 0.2);
}

.bl-mock__ent-svg line.line-subtle {
    stroke: rgba(255, 255, 255, 0.08);
}

.bl-mock__ent-node {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bl-mock__ent-node--sso {
    background: rgba(0, 212, 160, 0.1);
    border: 1px solid rgba(0, 212, 160, 0.25);
    color: var(--signal-green);
    top: 15%;
    left: 20%;
}

.bl-mock__ent-node--rbac {
    background: rgba(124, 106, 255, 0.1);
    border: 1px solid rgba(124, 106, 255, 0.25);
    color: var(--signal-purple);
    top: 15%;
    right: 20%;
}

.bl-mock__ent-node--api {
    background: rgba(245, 166, 35, 0.1);
    border: 1px solid rgba(245, 166, 35, 0.25);
    color: var(--signal-amber);
    bottom: 25%;
    left: 20%;
}

.bl-mock__ent-node--audit {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    bottom: 25%;
    right: 20%;
}

.bl-mock__ent-node--center {
    background: rgba(0, 212, 160, 0.15);
    border: 2px solid rgba(0, 212, 160, 0.3);
    color: var(--signal-green);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    font-size: 10px;
    box-shadow: 0 0 24px rgba(0, 212, 160, 0.15);
}

.bl-mock__ent-line {
    position: absolute;
    background: rgba(0, 212, 160, 0.15);
    height: 2px;
    z-index: 1;
    transform-origin: 0 50%;
}

.bl-mock__ent-line--purple {
    background: rgba(124, 106, 255, 0.15);
}

.bl-mock__ent-line--amber {
    background: rgba(245, 166, 35, 0.15);
}

.bl-mock__ent-line--subtle {
    background: rgba(255, 255, 255, 0.06);
}


/* ==========================================================================
   6. STATS SECTION (.bl-stats)
   4 big numbers in a row
   ========================================================================== */

.bl-stats {
    position: relative;
}

.bl-stats__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.bl-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}

.bl-stat {
    text-align: center;
    padding: var(--space-xl);
    position: relative;
}

.bl-stat + .bl-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.bl-stat__number {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--signal-green), #00F5C0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-sm);
}

.bl-stat__label {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.bl-stat__desc {
    font-size: 14px;
    color: var(--text-tertiary);
    margin-top: 6px;
    line-height: 1.5;
}


/* ==========================================================================
   7. RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 1024px) {
    .bl-features__grid {
        grid-template-columns: 1fr;
    }

    .bl-otel__grid {
        grid-template-columns: 1fr;
    }

    .bl-pricing-trust {
        grid-template-columns: repeat(2, 1fr);
    }

    .bl-enterprise__grid {
        grid-template-columns: 1fr;
    }

    .bl-enterprise__graphic {
        order: -1;
    }

    .bl-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bl-stat:nth-child(3) {
        border-left: none;
    }

    .bl-mock--unified {
        min-height: 240px;
    }

    .bl-mock--enterprise {
        min-height: 260px;
    }
}

@media (max-width: 768px) {
    .bl-pricing-trust {
        grid-template-columns: 1fr;
    }

    .bl-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bl-mock--correlation {
        flex-direction: column;
    }

    .bl-mock--correlation .bl-mock__panel {
        min-height: 120px;
    }

    .bl-mock__corr-arrow {
        width: auto;
        height: 20px;
        transform: rotate(90deg);
    }

    .bl-mock--deploy {
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
        padding: 14px;
    }

    .bl-mock--unified .bl-mock__panel--logs,
    .bl-mock--unified .bl-mock__panel--traces,
    .bl-mock--unified .bl-mock__panel--chart {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: 100px;
        margin-bottom: 8px;
    }

    .bl-mock--unified {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px;
        min-height: auto;
    }

    .bl-stat + .bl-stat {
        border-left: none;
    }

    .bl-stat:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.06);
    }

    .bl-feature-card__graphic {
        min-height: 160px;
    }

    .bl-mock__iso-block {
        min-width: 120px;
        padding: 12px 16px;
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .bl-stats__grid {
        grid-template-columns: 1fr;
    }

    .bl-stat + .bl-stat {
        border-left: none;
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .bl-mock--deploy {
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
        padding: 10px;
    }

    .bl-mock--enterprise {
        min-height: 220px;
    }

    .bl-mock__ent-node {
        width: 44px;
        height: 44px;
        font-size: 7px;
    }

    .bl-mock__ent-node--center {
        width: 52px;
        height: 52px;
        font-size: 8px;
    }
}


/* ═══════════════════════════════════════════
   SECTION AMBIENT BACKGROUNDS
   Hero-style grid + glow variations
═══════════════════════════════════════════ */

.bl-section--dark,
.bl-section--deep,
.bl-final-cta {
    position: relative;
    overflow: hidden;
}

/* Grid overlay */
.bl-section--dark::before,
.bl-section--deep::before,
.bl-final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,212,160,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,212,160,0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 10%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 10%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Ambient glow */
.bl-section--dark::after,
.bl-section--deep::after,
.bl-final-cta::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
    background: var(--signal-green);
    top: -200px;
    right: -200px;
}

/* Content above backgrounds */
.bl-section--dark > .bl-container,
.bl-section--deep > .bl-container,
.bl-final-cta > .bl-container {
    position: relative;
    z-index: 1;
}

/* ── Per-section glow variations ── */

/* Features: purple glow bottom-left */
.bl-features::after {
    background: var(--signal-purple);
    top: auto;
    bottom: -200px;
    right: auto;
    left: -200px;
    opacity: 0.05;
}

/* Problem: red-tinted grid + red glow */
.bl-problem::before {
    background-image:
        linear-gradient(rgba(255,77,77,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,77,77,0.02) 1px, transparent 1px);
}
.bl-problem::after {
    background: var(--signal-red);
    opacity: 0.04;
}

/* OTel: green glow left side */
#otel::after {
    right: auto;
    left: -200px;
}

/* Architecture: purple glow bottom */
#plataforma::after {
    background: var(--signal-purple);
    top: auto;
    bottom: -200px;
}

/* Comparison: purple glow top-left */
#comparativa::after {
    background: var(--signal-purple);
    right: auto;
    left: -200px;
    opacity: 0.04;
}

/* Capabilities: amber glow */
#capacidades::after {
    background: var(--signal-amber);
    opacity: 0.05;
}

/* Industries: purple glow bottom-right */
#industrias::after {
    background: var(--signal-purple);
    top: auto;
    bottom: -200px;
    opacity: 0.05;
}

/* Enterprise: purple glow center */
#enterprise::after {
    background: var(--signal-purple);
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    opacity: 0.04;
}

/* Blog: green glow bottom-left */
#recursos::after {
    top: auto;
    bottom: -200px;
    right: auto;
    left: -200px;
    opacity: 0.05;
}

/* Stats: green glow center-top, stronger */
#estadisticas::after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    opacity: 0.08;
}

/* Final CTA: strongest treatment */
#demo.bl-final-cta::before {
    background-image:
        linear-gradient(rgba(0,212,160,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,212,160,0.04) 1px, transparent 1px);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 70%);
}
#demo.bl-final-cta::after {
    width: 800px;
    height: 800px;
    opacity: 0.1;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
}