/* ==========================================================================
   SPDLAB.hu — sections.css
   Section-specific styles: nav, hero, positioning, problem, products,
   trust, community, CTA, footer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   GLOBAL NAV / HEADER
   -------------------------------------------------------------------------- */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    height: var(--nav-height);
    display: flex;
    align-items: center;
    transition:
        background-color var(--duration-slow) var(--ease-out-quart),
        border-color var(--duration-slow) var(--ease-out-quart),
        box-shadow var(--duration-slow) var(--ease-out-quart);
    /* Start transparent — JS adds .is-scrolled */
    background-color: transparent;
    border-bottom: 1px solid transparent;
}

/* Scrolled state — added by JS */
.site-header.is-scrolled {
    background-color: rgba(10, 10, 10, 0.88);
    border-bottom: 1px solid var(--color-border-subtle);
    box-shadow: 0 1px 32px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--container-xl);
    margin-inline: auto;
    padding-inline: var(--container-padding-x);
}

@media (min-width: 768px) {
    .site-header__inner {
        padding-inline: var(--container-padding-x-md);
    }
}

@media (min-width: 1024px) {
    .site-header__inner {
        padding-inline: var(--container-padding-x-lg);
    }
}

/* Nav links row */
.site-nav {
    display: none;
    align-items: center;
    gap: var(--space-8);
}

@media (min-width: 768px) {
    .site-nav {
        display: flex;
    }
}

/* Nav actions (CTA + burger) */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* Mobile menu toggle */
.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    padding: 4px;
}

.nav-toggle__bar {
    width: 100%;
    height: 1.5px;
    background-color: var(--color-text-secondary);
    border-radius: var(--radius-full);
    transition: var(--transition-all);
    transform-origin: center;
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nav-toggle.is-open .nav-toggle__bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

@media (min-width: 768px) {
    .nav-toggle {
        display: none;
    }
}

/* Mobile menu panel */
.mobile-menu {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg);
    z-index: calc(var(--z-sticky) - 1);
    padding: var(--space-8) var(--container-padding-x);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition:
        transform var(--duration-normal) var(--ease-out-quart),
        opacity var(--duration-normal) var(--ease-out-quart);
    border-top: var(--border-subtle);
}

.mobile-menu.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu__link {
    font-size: var(--text-lg);
    font-weight: var(--fw-medium);
    color: var(--color-text-secondary);
    padding: var(--space-3) 0;
    border-bottom: var(--border-subtle);
    transition: color var(--duration-fast) var(--ease-out-quart);
}

.mobile-menu__link:hover {
    color: var(--color-text-primary);
}

.mobile-menu__cta {
    margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   HERO SECTION
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(var(--nav-height) + var(--space-16));
    padding-bottom: var(--space-20);
    overflow: hidden;
}

/* Background radial glow */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: var(--z-below);
    background: var(--gradient-hero);
    pointer-events: none;
}

/* Subtle grid overlay */
.hero__grid {
    position: absolute;
    inset: 0;
    z-index: var(--z-below);
    background-image: radial-gradient(
        circle,
        var(--color-border) 1px,
        transparent 1px
    );
    background-size: 40px 40px;
    opacity: 0.5;
    mask-image: radial-gradient(
        ellipse 70% 60% at 50% 30%,
        black 20%,
        transparent 80%
    );
    -webkit-mask-image: radial-gradient(
        ellipse 70% 60% at 50% 30%,
        black 20%,
        transparent 80%
    );
    pointer-events: none;
}

.hero__inner {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-8);
}

/* Eyebrow badge */
.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-4);
    background-color: var(--color-accent-dim);
    border: 1px solid var(--color-accent-muted);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-accent);
}

.hero__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-accent);
    animation: pulse-dot 2s ease-in-out infinite;
}

.hero__heading {
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tightest);
    line-height: var(--lh-tight);
    color: var(--color-text-primary);
    max-width: 14ch;
    margin-inline: auto;
}

.hero__subheading {
    font-size: clamp(var(--text-md), 2.5vw, var(--text-xl));
    font-weight: var(--fw-light);
    line-height: var(--lh-relaxed);
    color: var(--color-text-secondary);
    max-width: 52ch;
    margin-inline: auto;
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    justify-content: center;
}

/* Pipeline demo below CTA */
.hero__pipeline-label {
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-3);
}

.hero__pipeline-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

/* Stats row */
.hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    justify-content: center;
    padding-top: var(--space-8);
    border-top: var(--border-subtle);
    width: 100%;
}

.hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.hero__stat-value {
    font-size: var(--text-2xl);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    color: var(--color-text-primary);
}

.hero__stat-label {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
}

/* --------------------------------------------------------------------------
   POSITIONING SECTION
   -------------------------------------------------------------------------- */

.positioning {
    background-color: var(--color-bg-subtle);
    border-top: var(--border-subtle);
    border-bottom: var(--border-subtle);
}

.positioning__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    align-items: center;
    text-align: center;
}

.positioning__tagline {
    font-size: clamp(var(--text-xl), 3.5vw, var(--text-3xl));
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-snug);
    color: var(--color-text-primary);
    max-width: 24ch;
    margin-inline: auto;
}

.positioning__pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    width: 100%;
    max-width: var(--container-lg);
}

@media (min-width: 640px) {
    .positioning__pillars {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .positioning__pillars {
        grid-template-columns: repeat(4, 1fr);
    }
}

.pillar {
    padding: var(--space-6);
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    text-align: left;
    transition: var(--transition-all);
}

.pillar:hover {
    background-color: var(--color-surface-raised);
    border-color: var(--color-graphite);
    transform: translateY(-2px);
}

.pillar__number {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--color-accent);
    letter-spacing: var(--ls-widest);
}

.pillar__title {
    font-size: var(--text-md);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    color: var(--color-text-primary);
}

.pillar__body {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--lh-relaxed);
}

/* --------------------------------------------------------------------------
   PROBLEM / SOLUTION SECTION
   -------------------------------------------------------------------------- */

.problem {
    background-color: var(--color-bg);
}

.problem__layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

@media (min-width: 1024px) {
    .problem__layout {
        flex-direction: row;
        align-items: center;
        gap: var(--space-20);
    }
}

.problem__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.problem__heading {
    font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tighter);
    line-height: var(--lh-snug);
}

.problem__lead {
    font-size: var(--text-md);
    color: var(--color-text-secondary);
    line-height: var(--lh-relaxed);
    max-width: 48ch;
}

.problem__visual {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* "Before / After" comparison cards */
.compare-card {
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-xl);
    border: var(--border-default);
}

.compare-card--before {
    background-color: rgba(239, 68, 68, 0.04);
    border-color: rgba(239, 68, 68, 0.12);
}

.compare-card--after {
    background-color: var(--color-accent-dim);
    border-color: var(--color-accent-muted);
}

.compare-card__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    margin-bottom: var(--space-3);
}

.compare-card--before .compare-card__label {
    color: #f87171;
}

.compare-card--after .compare-card__label {
    color: var(--color-accent);
}

.compare-card__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.compare-card__item {
    font-size: var(--text-sm);
    line-height: var(--lh-relaxed);
}

.compare-card--before .compare-card__item {
    color: var(--color-text-tertiary);
}

.compare-card--after .compare-card__item {
    color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   PRODUCTS SECTION
   -------------------------------------------------------------------------- */

.products {
    background-color: var(--color-bg-subtle);
}

.products__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 768px) {
    .products__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .products__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.product-card {
    position: relative;
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--card-radius);
    padding: var(--card-padding-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: var(--transition-all);
    overflow: hidden;
}

.product-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid transparent;
    background: linear-gradient(
            135deg,
            var(--color-accent-muted) 0%,
            transparent 60%
        )
        border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out-quart);
    pointer-events: none;
}

.product-card:hover {
    background-color: var(--color-surface-raised);
    border-color: var(--color-graphite);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.product-card:hover::after {
    opacity: 1;
}

.product-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background-color: var(--color-accent-dim);
    color: var(--color-accent);
    border: var(--border-accent);
    flex-shrink: 0;
}

.product-card__icon svg {
    width: 24px;
    height: 24px;
}

.product-card__category {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--color-accent);
}

.product-card__title {
    font-size: var(--text-xl);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-snug);
    color: var(--color-text-primary);
}

.product-card__description {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--lh-relaxed);
    flex: 1;
}

.product-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: var(--border-subtle);
}

/* --------------------------------------------------------------------------
   TRUST SIGNALS SECTION
   -------------------------------------------------------------------------- */

.trust {
    background-color: var(--color-bg);
    border-top: var(--border-subtle);
}

.trust__logos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    align-items: center;
    margin-block: var(--space-12);
}

@media (min-width: 640px) {
    .trust__logos {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .trust__logos {
        grid-template-columns: repeat(6, 1fr);
    }
}

.trust__signals {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 640px) {
    .trust__signals {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .trust__signals {
        grid-template-columns: repeat(4, 1fr);
    }
}

.trust-signal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-6);
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-xl);
}

.trust-signal__icon {
    color: var(--color-accent);
}

.trust-signal__icon svg {
    width: 24px;
    height: 24px;
}

.trust-signal__title {
    font-size: var(--text-md);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
}

.trust-signal__body {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--lh-relaxed);
}

/* Stats banner */
.trust__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-1);
    border: var(--border-default);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background-color: var(--color-border-subtle);
    margin-top: var(--space-12);
}

@media (min-width: 768px) {
    .trust__stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.trust__stat-item {
    padding: var(--space-8) var(--space-6);
    background-color: var(--color-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
}

.trust__stat-value {
    font-size: var(--text-3xl);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    color: var(--color-text-primary);
}

.trust__stat-value--accent {
    color: var(--color-accent);
}

.trust__stat-label {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   COMMUNITY / OPEN SOURCE SECTION
   -------------------------------------------------------------------------- */

.community {
    background-color: var(--color-bg-subtle);
    border-top: var(--border-subtle);
    border-bottom: var(--border-subtle);
}

.community__layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

@media (min-width: 1024px) {
    .community__layout {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-20);
    }
}

.community__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.community__heading {
    font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tighter);
    line-height: var(--lh-snug);
}

.community__body {
    font-size: var(--text-md);
    color: var(--color-text-secondary);
    line-height: var(--lh-relaxed);
    max-width: 46ch;
}

.community__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.community__metrics {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.community-metric {
    padding: var(--space-6);
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.community-metric__value {
    font-size: var(--text-2xl);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tight);
    color: var(--color-accent);
}

.community-metric__label {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   CTA SECTION
   -------------------------------------------------------------------------- */

.cta-section {
    background-color: var(--color-bg);
    position: relative;
    overflow: hidden;
}

/* Large ambient glow behind CTA */
.cta-section__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 212, 170, 0.07) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: var(--z-below);
}

.cta-section__inner {
    position: relative;
    z-index: var(--z-base);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
}

.cta-section__heading {
    font-size: clamp(2rem, 5vw, 3.75rem);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-tightest);
    line-height: var(--lh-tight);
    max-width: 20ch;
}

.cta-section__subtext {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 46ch;
    line-height: var(--lh-relaxed);
}

.cta-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    justify-content: center;
}

.cta-section__note {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    letter-spacing: var(--ls-wide);
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
    background-color: var(--color-bg);
    border-top: var(--border-default);
    padding-block: var(--space-16) var(--space-8);
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

/* Footer top: logo + nav columns */
.site-footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
}

@media (min-width: 768px) {
    .site-footer__top {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: var(--space-8);
    }
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.footer-brand__tagline {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--lh-relaxed);
    max-width: 30ch;
}

.footer-brand__socials {
    display: flex;
    gap: var(--space-3);
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    border: var(--border-default);
    color: var(--color-text-tertiary);
    transition: var(--transition-all);
}

.footer-social:hover {
    background-color: var(--color-surface-raised);
    color: var(--color-text-primary);
    border-color: var(--color-graphite);
}

.footer-social svg {
    width: 16px;
    height: 16px;
}

/* Footer nav column */
.footer-nav-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.footer-nav-col__heading {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--color-text-primary);
}

.footer-nav-col__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    list-style: none;
}

.footer-nav-col__link {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    transition: color var(--duration-fast) var(--ease-out-quart);
}

.footer-nav-col__link:hover {
    color: var(--color-text-primary);
}

/* Footer bottom bar */
.site-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-top: var(--space-6);
    border-top: var(--border-subtle);
    align-items: flex-start;
}

@media (min-width: 640px) {
    .site-footer__bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.site-footer__copyright {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
}

.site-footer__legal {
    display: flex;
    gap: var(--space-6);
}

.site-footer__legal a {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    transition: color var(--duration-fast) var(--ease-out-quart);
}

.site-footer__legal a:hover {
    color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   INFRA GRAPH — hero pipeline SVG visualization
   -------------------------------------------------------------------------- */

.infra-graph {
    width: 100%;
    max-width: 780px;
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    overflow: hidden;
}

.infra-graph__svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Active node glows on hover or with .is-active */
.infra-node rect:first-child {
    transition:
        stroke var(--duration-normal) var(--ease-out-quart),
        fill-opacity var(--duration-normal) var(--ease-out-quart);
}

/* Progress bar strip below the SVG */
.infra-graph__progress {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--border-subtle);
}

.infra-graph__track {
    flex: 1;
    height: 3px;
    background-color: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.infra-graph__fill {
    height: 100%;
    width: 28%;
    background-color: var(--color-accent);
    border-radius: var(--radius-full);
    position: relative;
    transition: width 700ms var(--ease-out-expo);
}

.infra-graph__fill::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent);
}

.infra-graph__status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    font-family: var(--font-mono);
    letter-spacing: 0.01em;
}

/* JS-driven active node highlighting */
.infra-node--active rect:first-child {
    stroke: var(--color-accent) !important;
    fill: rgba(0, 212, 170, 0.08) !important;
}

/* Brighten inner icon strokes when node is active */
.infra-node--active line,
.infra-node--active path,
.infra-node--active circle:not(:first-child),
.infra-node--active polyline {
    stroke: var(--color-accent) !important;
    stroke-opacity: 0.9 !important;
}

.infra-node--active circle[fill="#00d4aa"],
.infra-node--active circle[fill="#555"],
.infra-node--active circle[r="2"] {
    fill: var(--color-accent) !important;
    fill-opacity: 1 !important;
}

.infra-node--active text {
    fill: var(--color-accent) !important;
}

/* Transition for all infra-node inner elements */
.infra-node line,
.infra-node path,
.infra-node circle,
.infra-node text {
    transition:
        stroke 400ms var(--ease-out-quart),
        fill 400ms var(--ease-out-quart);
}

/* Mobile: reduce svg complexity by making it scrollable */
@media (max-width: 640px) {
    .infra-graph {
        padding: var(--space-4);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .infra-graph__svg {
        min-width: 640px;
    }
}

/* --------------------------------------------------------------------------
   SECTION RULE — decorative divider between hero and body
   -------------------------------------------------------------------------- */

.section-rule {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-inline: var(--container-padding-x);
    max-width: var(--container-xl);
    margin-inline: auto;
}

.section-rule__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--color-border) 40%,
        var(--color-border) 60%,
        transparent
    );
}

.section-rule__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-border);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   TICKER — horizontally scrolling trust logos strip
   -------------------------------------------------------------------------- */

.ticker {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding-block: var(--space-6);
    /* Fade masks on left/right edges */
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}

.ticker__inner {
    display: flex;
    gap: var(--space-4);
    width: max-content;
    animation: ticker-scroll var(--ticker-duration, 30s) linear infinite;
}

/* Pause on hover */
.ticker:hover .ticker__inner {
    animation-play-state: paused;
}