/* 
   CollabSpace Shared Styles 
   Extracted from plaayground4.1.html
*/

/* 
  Theme approach:
  - Default is LIGHT (Apple-like).
  - Dark theme applied when html[data-theme="dark"] exists.
  - We also respect user's OS setting via prefers-color-scheme.
  - JS optionally overrides based on local time, unless user manually chooses.
*/

:root {
    /* Shared (both themes) */
    --radius: 18px;
    --radius2: 14px;
    --shadow: 0 22px 70px rgba(0, 0, 0, .10);
    --shadow2: 0 12px 32px rgba(0, 0, 0, .08);

    --cta: #1DAAC2;
    /* teal (updated) */
    --ctaBlue: #1daac2;
    /* unified teal */

    --headerRadius: 18px;

    /* Header band styling */
    --headerBg: rgba(255, 255, 255, .70);
    --headerStroke: rgba(11, 18, 32, .10);
    --headerShadow: 0 18px 55px rgba(0, 0, 0, .10);

    /* Logo filters */
    --logoFilter: none;
}

/* LIGHT THEME (default) */
:root {
    --bg1: #F6F8FC;
    --bg2: #EEF3FF;
    --bg3: #FFFFFF;

    --text: #0B1220;
    --muted: rgba(11, 18, 32, .68);

    --glass: rgba(255, 255, 255, .74);
    --glass2: rgba(255, 255, 255, .86);
    --stroke: rgba(11, 18, 32, .10);

    --btnBg: rgba(255, 255, 255, .70);
    --btnStroke: rgba(11, 18, 32, .14);
    --btnHover: rgba(255, 255, 255, .92);

    --navLink: rgba(11, 18, 32, .74);
    --navLinkHoverBg: rgba(11, 18, 32, .06);
    --navLinkHover: rgba(11, 18, 32, .92);

    --dashTopBg: rgba(255, 255, 255, .62);
    --dashBodyBg: rgba(255, 255, 255, .62);

    --panelBg: rgba(255, 255, 255, .70);
    --panelStroke: rgba(11, 18, 32, .10);

    --softCardBg: rgba(255, 255, 255, .70);
    --softCardStroke: rgba(11, 18, 32, .10);

    --dot: rgba(11, 18, 32, .20);

    --headerBg: rgba(255, 255, 255, .78);
    --headerStroke: rgba(11, 18, 32, .10);
    --headerShadow: 0 18px 55px rgba(0, 0, 0, .10);
    --logoFilter: none;
}

/* DARK THEME (activated by html[data-theme="dark"]) */
html[data-theme="dark"] {
    --bg1: #070B14;
    --bg2: #0B1F3A;
    --bg3: #123B6D;

    --text: #F2F6FF;
    --muted: rgba(242, 246, 255, .78);

    --glass: rgba(255, 255, 255, .07);
    --glass2: rgba(255, 255, 255, .09);
    --stroke: rgba(255, 255, 255, .13);

    --shadow: 0 18px 60px rgba(0, 0, 0, .38);
    --shadow2: 0 10px 28px rgba(0, 0, 0, .30);

    --btnBg: rgba(255, 255, 255, .06);
    --btnStroke: rgba(255, 255, 255, .20);
    --btnHover: rgba(255, 255, 255, .09);

    --navLink: rgba(233, 238, 252, .85);
    --navLinkHoverBg: rgba(255, 255, 255, .07);
    --navLinkHover: rgba(255, 255, 255, .95);

    --dashTopBg: rgba(10, 16, 32, .35);
    --dashBodyBg: rgba(255, 255, 255, .07);

    --panelBg: rgba(255, 255, 255, .08);
    --panelStroke: rgba(255, 255, 255, .14);

    --softCardBg: rgba(255, 255, 255, .08);
    --softCardStroke: rgba(255, 255, 255, .14);

    --dot: rgba(255, 255, 255, .30);

    --headerBg: rgba(10, 16, 32, .42);
    --headerStroke: rgba(255, 255, 255, .14);
    --headerShadow: 0 18px 60px rgba(0, 0, 0, .40);
    --logoFilter: none;
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--text);

    background:
        radial-gradient(1200px 700px at 12% 20%, rgba(29, 170, 194, .22), transparent 55%),
        radial-gradient(900px 600px at 82% 32%, rgba(29, 170, 194, .14), transparent 55%),
        radial-gradient(900px 700px at 50% 90%, rgba(11, 18, 32, .06), transparent 55%),
        linear-gradient(135deg, var(--bg1), var(--bg2) 45%, var(--bg3));

    min-height: 100vh;
    overflow-x: hidden;
}

/* Background network pattern */
.bg-net {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* Covers the "first half" / viewport only */
    pointer-events: none;
    opacity: .4;
    mix-blend-mode: normal;
    z-index: 0;
    overflow: hidden;
}

/* Ensure content is above canvas */
.wrap {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 22px 64px;
}

html[data-theme="dark"] .bg-net {
    opacity: .4;
}

/* Full-width, sectioned header band */
.headerBand {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: sticky;
    top: 0;
    z-index: 50;
    height: 78px;
    display: flex;
    align-items: center;
    background: var(--headerBg);
    border-bottom: 1px solid var(--headerStroke);
    box-shadow: var(--headerShadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: visible;
}

.headerInner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 22px;
}

/* Text-based StratiVeritas logo */
.brandText {
    display: none;
}

.headerLogo {
    display: none;
}

.logoLink {
    display: flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    text-decoration: none;
    margin-left: 10px;
    gap: 0;
}

.brandStrati {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.3px;
    line-height: 1;
}

.brandVeritas {
    font-size: 22px;
    font-weight: 700;
    color: var(--ctaBlue);
    letter-spacing: -0.3px;
    line-height: 1;
}

@media (max-width: 980px) {
    .brandStrati, .brandVeritas {
        font-size: 19px;
    }
}

/* ===== Product Page Header (CollabSpace) ===== */
.productPageNav {
    padding: 80px 22px 40px;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

.productPageLogo {
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -1.5px;
    margin-bottom: 40px;
}
.productPageLogo span:first-child { color: var(--text); }
.productPageLogo span:last-child { color: var(--ctaBlue); }

.productPageBoxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.productBox {
    background: var(--cardBg);
    border: 1px solid var(--cardStroke);
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    font-size: 18px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

html[data-theme="dark"] .productBox {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.productBox:hover {
    transform: translateY(-4px);
    border-color: var(--ctaBlue);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

html[data-theme="dark"] .productBox:hover {
    box-shadow: 0 12px 24px rgba(0,0,0,0.4);
}

.productBox.active {
    background: var(--ctaBlue);
    color: #fff;
    border-color: var(--ctaBlue);
}

@media (max-width: 768px) {
    .productPageBoxes {
        grid-template-columns: 1fr;
    }
    .productPageLogo {
        font-size: 42px;
    }
    .productPageNav {
        padding: 40px 22px 20px;
    }
}

/* ===== Products Mega Dropdown ===== */
.navItem {
    position: relative;
}

.navItem.hasDropdown {
    position: relative;
}

.productsDropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 520px;
    padding: 28px 32px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(40px) saturate(1.4);
    -webkit-backdrop-filter: blur(40px) saturate(1.4);
    border: 1px solid var(--headerStroke);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

html[data-theme="dark"] .productsDropdown {
    background: rgba(10, 16, 32, 0.92);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.navItem.hasDropdown:hover .productsDropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Invisible bridge so hover doesn't break between navTop and dropdown */
.navItem.hasDropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
}

.dropdownSection {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dropdownSectionTitle {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--stroke);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdownSectionTitle .comingSoonBadge {
    font-size: 10px;
    padding: 2px 8px;
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.dropdownLink {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--navLink);
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    transition: background 0.15s ease, color 0.15s ease;
}

.dropdownLink:hover {
    background: var(--navLinkHoverBg);
    color: var(--navLinkHover);
}

.dropdownLink.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* Chevron on Products nav item */
.navTop .navChevron {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}

.navItem.hasDropdown:hover .navTop .navChevron {
    transform: rotate(180deg);
}

/* Mobile Products Accordion */
.mobileProductsToggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--navLink);
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.mobileProductsToggle:hover {
    background: var(--navLinkHoverBg);
    color: var(--navLinkHover);
}

.mobileProductsToggle .mobileChevron {
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
}

.mobileProductsToggle.open .mobileChevron {
    transform: rotate(180deg);
}

.mobileProductsPanel {
    display: none;
    padding: 0 8px 8px;
}

.mobileProductsPanel.open {
    display: block;
}

.mobileProductSection {
    margin-bottom: 8px;
}

.mobileProductSectionTitle {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 14px 4px;
}

.mobileProductLink {
    display: block;
    padding: 8px 14px 8px 24px;
    text-decoration: none;
    color: var(--navLink);
    font-size: 15px;
    font-weight: 500;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.mobileProductLink:hover {
    background: var(--navLinkHoverBg);
}

/* Hide dropdown on mobile */
@media (max-width: 768px) {
    .productsDropdown {
        display: none !important;
    }
}

@media (max-width: 520px) {
    .brandStrati, .brandVeritas {
        font-size: 17px;
    }
}

/* Top nav */
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0;
    width: 100%;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.brand img {
    max-height: 100%;
}

.logo {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(29, 170, 194, .95), rgba(29, 170, 194, .92));
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    display: grid;
    place-items: center;
}

html[data-theme="dark"] .logo {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.logo svg {
    opacity: .95
}

.brand span {
    font-size: 20px
}

.navlinks {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: center;
    flex: 1;
    position: relative;
}

.navTop {
    text-decoration: none;
    color: var(--navLink);
    font-size: 14px;
    padding: 10px 10px;
    border-radius: 12px;
    transition: .15s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 650;
}

.navTop:hover {
    background: var(--navLinkHoverBg);
    color: var(--navLinkHover);
}

.navcta {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Ensure right side (CTAs + logo) always stays visible and aligned */
.navRight {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Debug-friendly logo hitbox so we can see it even if the image fails */
.logoLink {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* no extra box/padding */
    border: none;
    /* remove box */
    background: transparent;
    border-radius: 0;
    text-decoration: none;
    margin-left: 10px;
}

/* Apple-like hover submenu (COMPACT + CENTERED) */
.navItem {
    position: relative;
}



/* Mobile: keep current behavior (navlinks hidden) */

.btn {
    border: 1px solid var(--btnStroke);
    background: var(--btnBg);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: .15s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.btn:hover {
    transform: translateY(-1px);
    background: var(--btnHover);
}

.btn.primary {
    border: 1px solid rgba(29, 170, 194, .32);
    background: linear-gradient(180deg, rgba(29, 170, 194, .96), rgba(21, 136, 158, .92));
    color: #FFFFFF;
    box-shadow: 0 14px 28px rgba(29, 170, 194, .14);
}

.btn.primary:hover {
    filter: brightness(1.02)
}

.btn.ghost {
    background: rgba(255, 255, 255, .40);
    border: 1px solid rgba(11, 18, 32, .14);
}

html[data-theme="dark"] .btn.ghost {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .22);
}



/* Theme toggle button: small + clean */
.btn.toggle {
    min-width: 0;
    padding: 10px 12px;
    gap: 8px;
}

.btn.toggle svg {
    width: 16px;
    height: 16px;
    opacity: .9;
}

/* Hero */
.hero {
    padding: 44px 0 10px;
    text-align: center;
}

.hero h1 {
    margin: 18px auto 14px;
    font-size: clamp(30px, 4.2vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.6px;
    max-width: 980px;
}

.hero p {
    margin: 0 auto;
    max-width: 820px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--muted);
}

.hero p em {
    font-style: italic;
    color: color-mix(in srgb, var(--text) 90%, transparent);
}

/* Main showcase */
.showcase {
    margin-top: 34px;
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1.6fr 1.1fr;
    gap: 16px;
    align-items: center;
    padding: 0 8px;
}

.card {
    background: var(--glass);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: var(--shadow2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.bubble {
    padding: 14px 14px 12px;
    border-radius: 16px;
    background: var(--softCardBg);
    border: 1px solid var(--softCardStroke);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .10);
    max-width: 320px;
    margin: 10px auto;
    text-align: left;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

html[data-theme="dark"] .bubble {
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}

.bubble .tag {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 13px;
}

.pill {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(11, 18, 32, .06);
    border: 1px solid rgba(11, 18, 32, .10);
}

html[data-theme="dark"] .pill {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .16);
}

.bubble .meta {
    font-size: 13px;
    color: color-mix(in srgb, var(--text) 78%, transparent);
    line-height: 1.35;
}

.bubble .meta small {
    display: block;
    margin-top: 8px;
    color: color-mix(in srgb, var(--text) 62%, transparent);
}

.left-col,
.right-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}

/* Center dashboard */
.dashboard {
    padding: 0;
    overflow: hidden;
    border-radius: 22px;
    box-shadow: var(--shadow);
    transform: translateZ(0);
}

.dash-top {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--dashTopBg);
    border-bottom: 1px solid var(--stroke);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.dash-top .dots {
    display: flex;
    gap: 8px;
    align-items: center;
    opacity: .85;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--dot);
}

.dash-top .title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: .2px;
}

.dash-top .title .mini {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(29, 170, 194, .95), rgba(29, 170, 194, .90));
    display: grid;
    place-items: center;
}

.dash-body {
    padding: 14px;
    background: var(--dashBodyBg);
}

.grid {
    display: grid;
    grid-template-columns: 1.4fr .9fr;
    gap: 12px;
}

.panel {
    background: var(--panelBg);
    border: 1px solid var(--panelStroke);
    border-radius: 16px;
    padding: 12px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.panel h4 {
    margin: 0 0 8px;
    font-size: 12px;
    letter-spacing: .3px;
    color: color-mix(in srgb, var(--text) 64%, transparent);
    font-weight: 800;
    text-transform: uppercase;
}

.minirow {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(11, 18, 32, .10), rgba(11, 18, 32, .03));
    border: 1px solid rgba(11, 18, 32, .10);
}

html[data-theme="dark"] .avatar {
    background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .10));
    border: 1px solid rgba(255, 255, 255, .18);
}

.bar {
    flex: 1;
    height: 10px;
    border-radius: 999px;
    background: rgba(11, 18, 32, .06);
    border: 1px solid rgba(11, 18, 32, .08);
    overflow: hidden;
}

html[data-theme="dark"] .bar {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .10);
}

.bar>span {
    display: block;
    height: 100%;
    width: 68%;
    background: linear-gradient(90deg, rgba(29, 170, 194, .95), rgba(29, 170, 194, .86));
    border-radius: 999px;
}

.bar.alt>span {
    width: 46%;
    background: linear-gradient(90deg, rgba(255, 193, 102, .92), rgba(29, 170, 194, .72))
}

.chart {
    width: 100%;
    height: 90px;
    border-radius: 14px;
    border: 1px solid rgba(11, 18, 32, .08);
    background: rgba(255, 255, 255, .58);
    display: grid;
    place-items: center;
    overflow: hidden;
}

html[data-theme="dark"] .chart {
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(10, 16, 32, .24);
}

.chart svg {
    width: 100%;
    height: 100%
}

.network {
    height: 140px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    border: 1px solid rgba(11, 18, 32, .08);
    background: rgba(255, 255, 255, .56);
    overflow: hidden;
}

html[data-theme="dark"] .network {
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(10, 16, 32, .22);
}

.network svg {
    width: 100%;
    height: 100%
}

/* Bottom CTAs */
.ctaRow {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* Feature icons row */
.features {
    margin: 22px auto 0;
    padding: 10px 12px;
    max-width: 1100px;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--text) 62%, transparent);
}

.feat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1px;
}

.ico {
    width: 22px;
    height: 22px;
    border-radius: 10px;
    border: 1px solid rgba(11, 18, 32, .10);
    background: rgba(255, 255, 255, .62);
    display: grid;
    place-items: center;
}

html[data-theme="dark"] .ico {
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
}

.ico svg {
    opacity: .88
}

/* Tablet / Compact Mode (1024px and down) */
@media (max-width: 1024px) {
    .nav {
        gap: 10px;
    }

    .navlinks {
        gap: 4px;
    }

    .navTop {
        padding: 8px 8px;
        font-size: 13px;
    }

    /* Hide "Theme" text, show icon only */
    .btn.toggle {
        font-size: 0;
        padding: 10px;
        gap: 0;
        min-width: 0;
    }

    .btn.toggle svg {
        margin: 0;
    }
}

/* Mobile Mode (768px and down) - Hide Nav Links */
@media (max-width: 768px) {
    .navlinks {
        display: none;
    }
}

/* Burger button — hidden by default, shown via media query below */
.burgerBtn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 10px;
    margin-left: 4px;
    flex-shrink: 0;
}

.burgerBtn span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform-origin: center;
}

.nav-open .burgerBtn span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-open .burgerBtn span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nav-open .burgerBtn span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu panel — hidden by default, shown via media query below */
.mobileMenu {
    display: none;
    position: fixed;
    top: 78px;
    left: 0;
    right: 0;
    z-index: 49;
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-bottom: 1px solid var(--headerStroke);
    box-shadow: 0 12px 32px rgba(0,0,0,.08);
    padding: 12px 20px 20px;
    flex-direction: column;
    gap: 2px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.nav-open .mobileMenu {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

html[data-theme="dark"] .mobileMenu {
    background: rgba(10, 16, 32, 0.52);
}

.mobileNavLink {
    display: block;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--navLink);
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    transition: background 0.15s ease, color 0.15s ease;
}

.mobileNavLink:hover {
    background: var(--navLinkHoverBg);
    color: var(--navLinkHover);
}

.mobileMenuCta {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--stroke);
}

.mobileMenuCta .btn {
    flex: 1;
    justify-content: center;
    min-width: 0;
}

/* Show burger + mobile menu, hide top-nav CTAs on mobile */
@media (max-width: 768px) {
    .burgerBtn {
        display: flex;
    }

    .mobileMenu {
        display: flex;
    }

    .navcta .btn:not(.toggle) {
        display: none;
    }
}

/* Original Layout Breakpoint (Showcase grid, etc) */
@media (max-width: 980px) {
    .showcase {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .left-col,
    .right-col {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center
    }

    .bubble {
        max-width: 520px
    }

    .dashboard {
        max-width: 760px;
        margin: 0 auto
    }
}

@media (max-width: 520px) {
    .btn {
        min-width: 0
    }

    .navcta .btn {
        padding: 10px 12px
    }

    .hero {
        padding-top: 22px
    }

    .grid {
        grid-template-columns: 1fr
    }

    .features {
        gap: 12px
    }
}

/* Small accessibility improvement */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important
    }
}

/* --- Narrative Animation Styles --- */
.ns-narrative-wrap {
    margin: 0;
    padding: 60px 20px;
    background: transparent;
    color: #eaf0ff;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: flex;
    justify-content: center;
}

.ns-narrative-card {
    width: 100%;
    max-width: 1000px;
    /* Modern Finance Gradient: Deep Slate/Navy */
    background: linear-gradient(145deg, #070B14 0%, #0B1F3A 100%);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.6);
    position: relative;
    backdrop-filter: blur(12px);
}

.ns-narrative-header {
    padding: 30px;
    text-align: center;
    position: relative;
    z-index: 10;
}

.ns-narrative-kicker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #94a3b8;
    margin-bottom: 8px;
}

.ns-narrative-title {
    font-size: 28px;
    margin: 0 0 16px 0;
    background: linear-gradient(to right, #ffffff, #cbd5e1);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: opacity 0.5s ease;
    /* Smooth fade */
    opacity: 1;
}

.ns-narrative-title.fade-out {
    opacity: 0;
}

.ns-narrative-status {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    font-size: 13px;
    color: #94a3b8;
    transition: all 0.3s ease;
}

.ns-narrative-status.is-active {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

.ns-narrative-status.is-chaos {
    color: #f87171;
    /* Soft Red */
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.15);
    animation: nsStatusPulse 2s infinite;
}

@keyframes nsStatusPulse {
    0% {
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.1);
    }

    50% {
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
        border-color: rgba(239, 68, 68, 0.4);
    }

    100% {
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.1);
    }
}

.ns-stage {
    position: relative;
    height: 500px;
    width: 100%;
    background: transparent;
    /* Let card bg show */
    overflow: hidden;
    border-radius: 0 0 24px 24px;
}

canvas#nsCanvas {
    display: block;
    width: 100%;
    height: 100%;
}

.ns-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* The "NoSilo" Hub */
.ns-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    /* Nicer Premium Midnight Blue - Won't clash with turquoise */
    background: linear-gradient(135deg, #123B6D, #0B1F3A);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: 0 0 40px rgba(30, 58, 138, 0.4);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
    overflow: visible;
    /* Allow logo to extend out */
}

.ns-hub.is-visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.ns-hub-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
    /* 4x larger (was ~60px previously) */
    height: auto;
    max-width: none;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
    /* Add contrast for text */
}

.ns-hub-pulse {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    border: 2px solid rgba(59, 130, 246, 0.2);
    animation: nsPulse 2s infinite;
    z-index: -1;
}

@keyframes nsPulse {
    0% {
        transform: scale(0.8);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* Controls */
.ns-controls {
    padding: 16px;
    display: flex;
    justify-content: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
}

.ns-replay-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.ns-replay-btn:hover {
    border-color: #e2e8f0;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
}

/* Responsive Text overlay elements */
.ns-label {
    position: absolute;
    top: 0;
    left: 0;
    /* Transform handles position for GPU speed */
    will-change: transform;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    transition: background 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
    cursor: default;
}

/* Chaos State Styles */
.ns-label.chaos {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    backdrop-filter: blur(4px);
}

/* Connected State Styles */
.ns-label.connected {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.5);
    color: #f1f5f9;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
    backdrop-filter: blur(4px);
}

.ns-label-sub {
    display: block;
    font-size: 9px;
    font-weight: 400;
    opacity: 0.7;
    margin-top: 2px;
}

.ns-badge {
    position: absolute;
    top: -24px;
    /* Move above the node */
    left: 50%;
    transform: translateX(-50%) scale(0);
    /* Center and hide */
    padding: 4px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    z-index: 10;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, width 0.4s ease, max-width 0.4s ease;
    overflow: hidden;
    max-width: 200px;
    /* Expanded state */
}

.ns-badge.collapsed {
    width: 20px;
    height: 20px;
    max-width: 20px;
    /* Override transition */
    padding: 0;
    border-radius: 50%;
    justify-content: center;
}

.ns-badge.success {
    background: #3b82f6;
    /* Blue instead of green */
    color: white;
}



.ns-badge.warn {
    background: #ef4444;
    /* Red */
    color: white;
}

.ns-badge.ok {
    background: #10b981;
    /* Green */
    color: white;
    transform: scale(1.1);
}

/* Callout Bubbles for Value Props */
.ns-pop-tag {
    position: absolute;
    padding: 6px 10px;
    background: rgba(30, 58, 138, 0.9);
    /* Blue background */
    border: 1px solid rgba(96, 165, 250, 0.5);
    border-radius: 6px;
    color: #bfdbfe;
    font-size: 11px;
    font-weight: 600;
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px) translateX(-50%);
    transition: opacity 0.4s ease, transform 0.4s ease;
    white-space: nowrap;
    z-index: 6;
}

.ns-pop-tag.visible {
    opacity: 1;
    transform: translateY(-35px) translateX(-50%);
    /* Pop up above node */
}

/* NEW SECTIONS CSS */
.section-padding {
    padding: 100px 0;
    position: relative;
}

.bg-alt {
    background: var(--bg2);
    border-top: 1px solid var(--stroke);
    border-bottom: 1px solid var(--stroke);
}

.bg-dark {
    background: #0B1220;
    color: white;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Typography */
h2 {
    font-size: 42px;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

h3 {
    font-size: 28px;
    color: var(--text);
    margin-bottom: 16px;
}

p {
    line-height: 1.6;
    color: var(--muted);
}

/* Platform specific extras */
.problem-band {
    background: rgba(11, 18, 32, 0.03);
    border-top: 1px solid var(--stroke);
    border-bottom: 1px solid var(--stroke);
    padding: 80px 0;
    margin-bottom: 80px;
}

[data-theme="dark"] .problem-band {
    background: rgba(255, 255, 255, 0.02);
}

.problem-lead {
    font-size: 26px;
    font-weight: 500;
    max-width: 900px;
    margin: 0 auto 60px;
    text-align: center;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

.stat-big {
    display: block;
    font-size: 64px;
    font-weight: 700;
    color: var(--ctaBlue);
    line-height: 1;
    margin-bottom: 16px;
}

.leading-text {
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
}

.features-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.curve-box {
    background: var(--glass);
    border: 1px solid var(--stroke);
    border-radius: 24px;
    overflow: hidden;
    backdrop-filter: blur(12px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.curve-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.box-img {
    height: 180px;
    background: var(--bg2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--stroke);
}

.img-placeholder {
    color: var(--muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
}

.box-content {
    padding: 32px;
}

.box-content h4 {
    margin: 0 0 12px 0;
    font-size: 18px;
    color: var(--text);
}

.box-content p {
    font-size: 15px;
    margin: 0;
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 40px;
}

.module-card h5 {
    color: var(--ctaBlue);
    margin: 0 0 12px 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.outcomes-row {
    text-align: center;
    max-width: 800px;
    margin: 60px auto 0;
}

.outcomes-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    text-align: left;
}

.outcomes-list li {
    padding-left: 24px;
    position: relative;
    color: var(--text);
    font-weight: 500;
}

.outcomes-list li::before {
    content: "•";
    color: var(--ctaBlue);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* How It Works */
.core-narrative-banner {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 80px;
    padding: 40px;
    background: linear-gradient(135deg, var(--bg2), var(--bg1));
    border-radius: 24px;
    border: 1px solid var(--stroke);
}

.core-narrative-banner h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.5;
    font-weight: 500;
}

.timeline-wrap {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    position: relative;
}

.step-item {
    text-align: center;
    position: relative;
    padding-top: 20px;
}

.step-num {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: var(--btnBg);
    border: 1px solid var(--stroke);
    font-weight: 700;
    color: var(--ctaBlue);
    margin-bottom: 16px;
    z-index: 2;
    position: relative;
}

.step-item::before {
    content: "";
    position: absolute;
    top: 40px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--stroke);
    z-index: 1;
}

.step-item:first-child::before {
    display: none;
}

.step-item h4 {
    font-size: 16px;
    line-height: 1.4;
    color: var(--text);
}

/* Partners */
.stakeholder-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 800px;
    margin: 60px auto;
}

.stakeholder-card {
    background: var(--glass);
    padding: 40px;
    border-radius: 24px;
    border: 1px solid var(--stroke);
}

.pilot-cta-box {
    margin-top: 60px;
    font-size: 18px;
    color: var(--muted);
}

.pilot-cta-box a {
    color: var(--ctaBlue);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border 0.2s;
}

.pilot-cta-box a:hover {
    border-bottom-color: currentColor;
}

/* Resources */
.resources-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 80px;
}

.resource-card {
    background: var(--glass);
    border: 1px solid var(--stroke);
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.resource-card.highlight {
    background: linear-gradient(135deg, rgba(58, 123, 255, 0.05), transparent);
    border-color: rgba(58, 123, 255, 0.2);
}

.resource-card .tag {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ctaBlue);
    font-weight: 700;
    margin-bottom: 16px;
}

.factsheet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.fact-item {
    background: var(--bg2);
    padding: 24px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid var(--stroke);
}

.fact-big {
    display: block;
    font-size: 42px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

/* Company */
.mission-box {
    max-width: 800px;
    margin: 0 auto 80px;
}

.what-we-build {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px;
    background: var(--glass);
    border-radius: 24px;
    border: 1px solid var(--stroke);
}

/* Contact */
.contact-container {
    max-width: 600px;
    margin: 0 auto;
}

.contact-header {
    text-align: center;
    margin-bottom: 40px;
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
    /* Subtle blend instead of blurry card */
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    transition: border 0.2s, box-shadow 0.2s, background 0.2s;
}

html[data-theme="dark"] .contact-form input,
html[data-theme="dark"] .contact-form select,
html[data-theme="dark"] .contact-form textarea {
    background: rgba(0, 0, 0, 0.2);
    /* Deeper blend for dark mode */
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--ctaBlue);
    box-shadow: 0 0 0 3px rgba(58, 123, 255, 0.1);
}

.form-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.full-width {
    width: 100%;
    justify-content: center;
}

/* Pilot / Try */
.pilot-bullets {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 30px 0 40px;
    font-size: 18px;
    font-weight: 500;
    opacity: 0.9;
    flex-wrap: wrap;
}

.pilot-bullets .sep {
    opacity: 0.4;
}

.btn.large {
    padding: 16px 32px;
    font-size: 18px;
    border-radius: 100px;
}

/* Mobile */
@media (max-width: 768px) {

    .stats-grid,
    .features-row,
    .modules-grid,
    .timeline-wrap,
    .stakeholder-grid,
    .resources-grid,
    .factsheet-grid,
    .form-two-col {
        grid-template-columns: 1fr !important;
    }

    .step-item::before {
        display: none;
    }

    .timeline-wrap {
        gap: 40px;
    }

    h2 {
        font-size: 32px;
    }

    .fact-big {
        font-size: 36px;
    }
}

/* Footer CSS */
.site-footer {
    padding: 40px 0;
    border-top: 1px solid var(--stroke);
    background: var(--bg1);
    font-size: 14px;
    margin-top: 0;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--stroke);
}

.footer-bottom {
    text-align: center;
}

.footer-bottom p {
    font-size: 11px;
    color: var(--muted);
    opacity: 0.6;
    line-height: 1.7;
    margin: 0;
}

.footer-bottom a {
    color: inherit;
    text-decoration: underline;
    opacity: 0.9;
}

.footer-logo {
    font-weight: 700;
    color: var(--text);
}

.footer-right a {
    color: var(--muted);
    text-decoration: none;
    margin-left: 24px;
    transition: color 0.2s;
}

.footer-right a:hover {
    color: var(--ctaBlue);
}

/* Mobile - Footer */
@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .footer-right a {
        margin: 0 10px;
    }
}

/* --- Scroll Animations (Apple-like) --- */
/* --- Scroll Animations (Apple-like) --- */
/* The parent container fades in */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 2.5s cubic-bezier(0.16, 1, 0.3, 1), transform 2.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Items (Children) */
.stagger-item {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
    transition: opacity 2.5s cubic-bezier(0.12, 1, 0.2, 1), transform 2.5s cubic-bezier(0.12, 1, 0.2, 1), filter 2.5s cubic-bezier(0.12, 1, 0.2, 1);
    will-change: opacity, transform, filter;
}

.stagger-item.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Pop In Animation for Numbers/Stats */
.pop-in {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Bounce effect */
}

.pop-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Delays if using manual classes */
.reveal-on-scroll.delay-1 {
    transition-delay: 0.1s;
}

.reveal-on-scroll.delay-2 {
    transition-delay: 0.2s;
}

.reveal-on-scroll.delay-3 {
    transition-delay: 0.3s;
}

/* Contact Section - Visual Separation */
#contact {
    background: linear-gradient(to bottom, rgba(7, 11, 20, 0) 0%, #070B14 15%, #0B1F3A 100%);
    /* Fade from transparent into Dark slate/gray */
    color: #f3f4f6;
    /* Light text */
    position: relative;
    overflow: hidden;
    padding-top: 120px;
    /* Extra padding to account for the fade */
}

#contact h2,
#contact p {
    color: #f3f4f6;
}

#contact .contact-form label {
    color: #d1d5db;
}

#contact .contact-form input,
#contact .contact-form select,
#contact .contact-form textarea {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

#contact .contact-form input:focus,
#contact .contact-form select:focus,
#contact .contact-form textarea:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--ctaBlue);
}

#contact .pilot-bullets {
    color: #9ca3af;
}

/* --- Feature Box Animations --- */

/* 1. Mock Checklist (High Contrast, Clean) */
.mock-checklist {
    width: 120px;
    height: 80px;
    background: #fff;
    /* Stark white card */
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateX(-10px);
    animation: slideCheck 8s infinite ease-out;
}

.chk-box {
    width: 12px;
    height: 12px;
    border: 2px solid #e5e7eb;
    border-radius: 3px;
    position: relative;
    transition: all 0.3s;
}

/* Blue Checkmark state */
.check-item.checked .chk-box {
    background: var(--ctaBlue);
    border-color: var(--ctaBlue);
}

.check-item.checked .chk-box::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 3px;
    width: 3px;
    height: 6px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.chk-line {
    height: 4px;
    background: #d1d5db;
    /* Light grey text line */
    border-radius: 2px;
    width: 70%;
}

.i1 {
    animation-delay: 0s;
}

.i2 {
    animation-delay: 2.5s;
}

.i3 {
    animation-delay: 5s;
}

@keyframes slideCheck {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }

    10% {
        opacity: 1;
        transform: translateX(0);
    }

    30% {
        opacity: 1;
    }

    /* Wait */
    35% {
        /* Turn Green */
    }

    100% {
        opacity: 1;
    }
}

/* Add a class to handle the checked state animation via CSS keyframes is tricky without JS or complex keyframes. 
   Simplifying: The animation will simulate the "appearance" but color change needs keyframes on the box itself.
*/
.chk-box {
    animation: boxCheck 8s infinite;
}

.i1 .chk-box {
    animation-delay: 0s;
}

.i2 .chk-box {
    animation-delay: 2.5s;
}

.i3 .chk-box {
    animation-delay: 5s;
}

@keyframes boxCheck {

    0%,
    20% {
        background: transparent;
        border-color: #e5e7eb;
    }

    25% {
        background: var(--ctaBlue);
        border-color: var(--ctaBlue);
        transform: scale(1.1);
    }

    30% {
        transform: scale(1);
    }

    90% {
        opacity: 1;
    }

    95% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* 2. Mock Chart (Unchanged, User Liked) */
.mock-chart {
    width: 120px;
    height: 80px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    padding-bottom: 10px;
}

.chart-bar {
    width: 12px;
    background: linear-gradient(to top, rgba(29, 170, 194, 0.4), var(--ctaBlue));
    border-radius: 2px 2px 0 0;
    animation: growBar 3s infinite ease-in-out;
    transform-origin: bottom;
}

.bar-1 {
    height: 30%;
    animation-delay: 0s;
}

.bar-2 {
    height: 50%;
    animation-delay: 0.2s;
}

.bar-3 {
    height: 80%;
    animation-delay: 0.4s;
}

.bar-4 {
    height: 60%;
    animation-delay: 0.6s;
}

@keyframes growBar {

    0%,
    100% {
        transform: scaleY(1);
        opacity: 0.8;
    }

    50% {
        transform: scaleY(1.2);
        opacity: 1;
        filter: brightness(1.2);
    }
}

/* 3. Mock Hub (Central Aggregation) */
.mock-hub {
    width: 120px;
    height: 80px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hub-core {
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
    animation: pulseCore 2s infinite ease-in-out;
}

.hub-sat {
    width: 8px;
    height: 8px;
    background: var(--ctaBlue);
    border-radius: 50%;
    position: absolute;
    z-index: 5;
}

/* Satellite Positions (Relative to center 60x40) */
.s1 {
    top: 15px;
    left: 20px;
}

/* Top Left */
.s2 {
    top: 65px;
    left: 20px;
}

/* Bottom Left */
.s3 {
    top: 40px;
    left: 100px;
}

/* Middle Right */

.hub-line {
    position: absolute;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    transform-origin: 0 50%;
    z-index: 1;
}

/* 
   Center is (60, 40)
   s1(20, 15) -> Center: dx=40, dy=25. Dist=~47. Angle=~32deg
   s2(20, 65) -> Center: dx=40, dy=-25. Dist=~47. Angle=~-32deg
   s3(100, 40) -> Center: dx=-40, dy=0. Dist=40. Angle=180deg
*/
.hl1 {
    top: 19px;
    left: 24px;
    width: 44px;
    transform: rotate(32deg);
}

.hl2 {
    top: 65px;
    left: 24px;
    width: 44px;
    transform: rotate(-32deg);
}

.hl3 {
    top: 44px;
    left: 64px;
    width: 40px;
    transform: rotate(180deg);
}

.hub-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 50%;
    z-index: 8;
    opacity: 0;
    animation: flowIn 2s infinite ease-in;
}

.hp1 {
    top: 18px;
    left: 23px;
    animation-name: flowIn1;
    animation-delay: 0s;
}

.hp2 {
    top: 66px;
    left: 23px;
    animation-name: flowIn2;
    animation-delay: 0.6s;
}

.hp3 {
    top: 42px;
    left: 100px;
    animation-name: flowIn3;
    animation-delay: 1.2s;
}

/* Inward Flow Keyframes */
@keyframes flowIn1 {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }

    100% {
        transform: translate(36px, 20px);
        opacity: 0;
    }

    /* Matches vector to center */
}

@keyframes flowIn2 {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }

    100% {
        transform: translate(36px, -20px);
        opacity: 0;
    }
}

@keyframes flowIn3 {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }

    100% {
        transform: translate(-36px, 0);
        opacity: 0;
    }
}

@keyframes pulseCore {
    0% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
    }

    50% {
        transform: scale(1.2);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
    }
}

/* --- Outcomes Grid --- */
.outcomes-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.outcome-card {
    background: var(--glass);
    border: 1px solid var(--stroke);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.outcome-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow2);
    border-color: rgba(29, 170, 194, 0.3);
}

.outcome-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(29, 170, 194, 0.1), rgba(29, 170, 194, 0.05));
    border: 1px solid rgba(29, 170, 194, 0.15);
    display: grid;
    place-items: center;
    color: var(--ctaBlue);
}

.outcome-text h4 {
    margin: 0 0 6px 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}

.outcome-text p {
    margin: 0;
    font-size: 15px;
    color: var(--muted);
    line-height: 1.5;
}

/* Mobile Outcomes */
@media (max-width: 768px) {
    .outcomes-container {
        grid-template-columns: 1fr;
    }
}

/* --- New Platform Outcomes (Striking Cards) --- */
.outcomes-striking {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin: 0 auto;
    max-width: 1200px;
}

.striking-card {
    flex: 1 1 250px;
    min-width: 250px;
    max-width: 280px;
    background: var(--glass);
    border: 1px solid var(--stroke);
    border-radius: 20px;
    padding: 32px 24px;
    position: relative;
    box-shadow: var(--shadow2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

html[data-theme="dark"] .striking-card {
    background: rgba(255, 255, 255, 0.04);
}

.striking-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    opacity: 0.15;
    transition: all 0.5s ease;
    z-index: 0;
    pointer-events: none;
}

.striking-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}

html[data-theme="dark"] .striking-card:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.striking-card:hover::before {
    opacity: 0.4;
    transform: scale(1.5);
}

.striking-card.teal::before {
    background: radial-gradient(circle, rgba(29, 170, 194, 1) 0%, transparent 70%);
}

.striking-card.purple::before {
    background: radial-gradient(circle, rgba(139, 92, 246, 1) 0%, transparent 70%);
}

.striking-card.red::before {
    background: radial-gradient(circle, rgba(239, 68, 68, 1) 0%, transparent 70%);
}

.striking-card.green::before {
    background: radial-gradient(circle, rgba(16, 185, 129, 1) 0%, transparent 70%);
}

.striking-card>* {
    z-index: 1;
}

.striking-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: transform 0.3s ease;
}

.striking-card:hover .striking-icon {
    transform: scale(1.1);
}

.striking-card.teal .striking-icon {
    background: rgba(29, 170, 194, 0.15);
    color: #1daac2;
}

.striking-card.purple .striking-icon {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.striking-card.red .striking-icon {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.striking-card.green .striking-icon {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.striking-card h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.striking-card p {
    color: var(--muted);
    font-size: 15px;
    margin: 0;
    line-height: 1.6;
}

/* Staggered Vertical Alignment for Desktop Removed for a straight professional line */
@media (max-width: 1100px) {
    .outcomes-striking {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .striking-card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Pipeline Mobile Additions */
@media (max-width: 768px) {
    .pipeline-line {
        left: 24px !important;
        transform: none !important;
    }

    .pipeline-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding-left: 60px;
    }

    .pipeline-row>div:nth-child(2) {
        position: absolute;
        left: 0;
        top: 0;
    }

    .pipeline-row>div:first-child,
    .pipeline-row>div:last-child {
        padding: 0 !important;
        text-align: left !important;
        width: 100%;
    }

    .pipeline-row>div:first-child {
        margin-bottom: 24px;
    }
}

/* --- Apple-style Float Reveal --- */
.reveal-on-scroll.float-in-left {
    transform: translate(-150px, 30px);
}

.reveal-on-scroll.float-in-right {
    transform: translate(150px, 30px);
}

.reveal-on-scroll.is-visible.float-in-left,
.reveal-on-scroll.is-visible.float-in-right {
    transform: translate(0, 0);
}

/* ENTERPRISE CTA MODULE & INTEGRATED FOOTER */
.enterprise-cta-wrapper {
    position: relative;
    padding-top: 120px;
    background: transparent;
    overflow: hidden;
}

.cta-bg-glow {
    position: absolute;
    top: 30%;
    left: 50%;
    width: 1000px;
    height: 1000px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(29, 170, 194, 0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.enterprise-cta-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    background: transparent;
    padding: 20px 0;
    margin-bottom: 40px;
}

.cta-heading {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -1px;
    background: linear-gradient(135deg, var(--text), var(--ctaBlue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cta-subheading {
    font-size: 20px;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 40px;
    max-width: 90%;
}

.cta-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cta-benefits-list li {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: rgba(29, 170, 194, 0.1);
    color: var(--ctaBlue);
}

.enterprise-contact-form {
    background: transparent;
    border-radius: 24px;
    padding: 0;
}

.enterprise-contact-form .form-row {
    margin-bottom: 20px;
}

.enterprise-contact-form .form-group {
    display: flex;
    flex-direction: column;
}

.enterprise-contact-form label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--muted);
}

.enterprise-contact-form input,
.enterprise-contact-form select {
    width: 100%;
    padding: 16px 20px;
    border-radius: 16px;
    border: 1px solid var(--stroke);
    background: rgba(11, 18, 32, 0.05);
    color: var(--text);
    font-size: 16px;
    transition: all 0.2s ease;
}

html[data-theme="dark"] .enterprise-contact-form input,
html[data-theme="dark"] .enterprise-contact-form select {
    background: rgba(0, 0, 0, 0.2);
}

.enterprise-contact-form input:focus,
.enterprise-contact-form select:focus {
    outline: none;
    border-color: var(--ctaBlue);
    box-shadow: 0 0 0 3px rgba(58, 123, 255, 0.1);
}

.huge-btn {
    width: 100%;
    padding: 20px;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(29, 170, 194, 0.2);
    cursor: pointer;
    border: none;
    color: #fff;
    background: var(--ctaBlue);
}

.integrated-footer {
    border-top: none;
    padding: 40px 0 40px;
    background: transparent;
}

@media (max-width: 992px) {
    .enterprise-cta-card {
        grid-template-columns: 1fr;
        padding: 40px;
        gap: 40px;
    }

    .cta-heading {
        font-size: 40px;
    }
}

/* ============================================================
   INNER PAGE MOBILE — applies to platform, how-it-works,
   partners, company, contact on small screens.
   Desktop is unaffected (all rules inside max-width: 768px).
   ============================================================ */
@media (max-width: 768px) {

    /* --- Shared hero headlines --- */
    .platform-section h1,
    #how h1,
    #company h1,
    #partners-hero h1 {
        font-size: 36px !important;
        line-height: 1.15 !important;
    }

    /* Remove manual <br> line breaks inside hero headlines on mobile */
    .platform-section h1 br,
    #partners-hero h1 br {
        display: none;
    }

    /* Subheadings / section h2 */
    .platform-section h2,
    #how h2,
    #how h3,
    #company h2,
    #partners-hero ~ section h2,
    #partners-hero ~ section h3,
    #partner-benefits h2,
    #partner-benefits h3 {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }

    /* Body copy on inner pages */
    .platform-section p,
    #how p,
    #company p,
    #partners-hero p,
    #partner-categories p,
    #partner-benefits p {
        font-size: 16px !important;
    }

    /* --- Platform: bento 2-col → 1-col --- */
    .bento-grid {
        grid-template-columns: 1fr !important;
    }

    .bento-card {
        padding: 28px !important;
    }

    /* Shrink the massive 84px stat number */
    .bento-card h3 {
        font-size: 56px !important;
    }

    /* --- Platform: pillar rows → stacked column --- */
    .pillar-row {
        flex-direction: column !important;
        gap: 32px !important;
        margin-bottom: 60px !important;
    }

    /* Reverse rows were row-reverse; on mobile all become column */
    .pillar-row[style*="row-reverse"] {
        flex-direction: column !important;
    }

    .pillar-text {
        max-width: 100% !important;
    }

    /* Hide the placeholder visual boxes — they're just empty mockup placeholders */
    .pillar-visual {
        display: none !important;
    }

    /* Platform pillars section spacing */
    .platform-pillars {
        margin-top: 40px !important;
    }

    /* --- How It Works: pipeline --- */
    /* Move the vertical line to the left edge */
    .pipeline-line-bg,
    .pipeline-line-fill {
        left: 20px !important;
        transform: none !important;
    }

    .pipeline-container {
        padding-left: 0 !important;
        padding-bottom: 60px !important;
    }

    /* Stack each phase row vertically, text above visual */
    .pipeline-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding-left: 56px !important;
        margin-bottom: 60px !important;
        gap: 24px !important;
    }

    /* Both normal and row-reversed rows go column */
    .pipeline-row[style*="row-reverse"] {
        flex-direction: column !important;
    }

    /* The centre node: pin to the left edge inside padding */
    .pipeline-row > div:nth-child(2) {
        position: absolute !important;
        left: 0 !important;
        top: 4px !important;
    }

    /* Text panes: reset padding/alignment for both left and right variants */
    .pipeline-row > div:first-child,
    .pipeline-row > div:last-child {
        padding: 0 !important;
        text-align: left !important;
        width: 100% !important;
        flex: unset !important;
    }

    /* --- Partners: alternating benefit rows → stacked --- */
    #partner-benefits [style*="display: flex"][style*="gap: 60px"] {
        flex-direction: column !important;
        gap: 32px !important;
    }

    /* Row-reversed benefit rows same treatment */
    #partner-benefits [style*="flex-direction: row-reverse"] {
        flex-direction: column !important;
    }

    /* Remove fixed min-height on benefit visual boxes */
    #partner-benefits [style*="min-height: 250px"] {
        min-height: 0 !important;
    }

    /* --- Enterprise CTA section at bottom of each page --- */
    .enterprise-cta-wrapper {
        padding-top: 60px;
    }

    .enterprise-cta-card {
        padding: 24px !important;
        gap: 32px !important;
    }

    .cta-heading {
        font-size: 32px !important;
    }

    .cta-subheading {
        font-size: 16px !important;
        max-width: 100% !important;
    }

    .cta-benefits-list {
        gap: 14px !important;
    }

    .cta-benefits-list li {
        font-size: 15px !important;
    }

    /* --- Footer --- */
    .footer-content {
        flex-direction: column !important;
        gap: 20px !important;
        text-align: center !important;
    }

    .footer-right {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px 20px !important;
    }
}
/* ===== Our Products Section ===== */
.products-section {
    padding: 100px 22px;
    max-width: 1200px;
    margin: 0 auto;
}
.products-header {
    text-align: center;
    margin-bottom: 60px;
}
.products-header h2 {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 16px;
    color: var(--text);
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}
.product-card {
    background: var(--cardBg);
    border: 1px solid var(--cardStroke);
    border-radius: 20px;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.product-card:hover {
    transform: translateY(-4px);
    border-color: var(--ctaBlue);
    box-shadow: 0 16px 32px rgba(0,0,0,0.06);
}
html[data-theme="dark"] .product-card {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
html[data-theme="dark"] .product-card:hover {
    box-shadow: 0 16px 32px rgba(0,0,0,0.4);
}
.product-card.disabled {
    pointer-events: none;
    opacity: 0.8;
}
.product-card-logo {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 24px;
}
.product-card-logo span:first-child { color: var(--text); }
.product-card-logo span:last-child { color: var(--ctaBlue); }
.product-card p {
    color: var(--muted);
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 32px;
}
.product-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
}
.product-feature-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
}
.product-feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231db2c4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
    background-size: contain;
}
.product-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    color: var(--ctaBlue);
}
@media (max-width: 900px) {
    .products-grid { grid-template-columns: 1fr; }
}

/* Hero Hub Animations */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.08); opacity: 0.8; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Signal Mesh — hero AI signal-processing visualization */
.signal-mesh {
  position: relative;
  width: 320px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.signal-mesh canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.signal-mesh__core {
  position: relative;
  z-index: 2;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(29, 170, 194, 0.28), rgba(10, 130, 152, 0.28));
  border: 1px solid rgba(29, 170, 194, 0.30);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 0 28px rgba(29, 170, 194, 0.28),
    inset 0 0 20px rgba(29, 170, 194, 0.10);
  animation: meshCorePulse 5s ease-in-out infinite;
}
.sv-logo {
  width: 78px;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
}
@keyframes meshCorePulse {
  0%, 100% {
    box-shadow:
      0 0 28px rgba(29, 170, 194, 0.28),
      inset 0 0 20px rgba(29, 170, 194, 0.10);
  }
  50% {
    box-shadow:
      0 0 46px rgba(29, 170, 194, 0.50),
      inset 0 0 28px rgba(29, 170, 194, 0.20);
  }
}
@media (prefers-reduced-motion: reduce) {
  .signal-mesh__core { animation: none; }
}
@media (max-width: 480px) {
  .signal-mesh { width: 280px; height: 280px; }
  .signal-mesh canvas { width: 280px; height: 280px; }
}