/* 
   CollabSpace Shared Styles 
*/

/* 
  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 2px 6px rgba(11, 18, 32, .04), 0 18px 44px rgba(11, 18, 32, .08);
    --shadow2: 0 1px 3px rgba(11, 18, 32, .04), 0 10px 26px rgba(11, 18, 32, .06);

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

    --headerRadius: 18px;

    /* Header band styling */
    --headerBg: rgba(255, 255, 255, .985);
    --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, .985);
    --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: #05070D;
    --bg2: #0A1120;
    --bg3: #0F1B2E;

    --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 2px 6px rgba(0, 0, 0, .28), 0 18px 44px rgba(0, 0, 0, .34);
    --shadow2: 0 1px 3px rgba(0, 0, 0, .24), 0 10px 26px rgba(0, 0, 0, .28);

    --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, .985);
    --headerStroke: rgba(255, 255, 255, .14);
    --headerShadow: 0 18px 60px rgba(0, 0, 0, .55);
    --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;
}

/* Content stacking context */
.wrap {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 22px 64px;
}

/* 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(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    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.995);
    backdrop-filter: blur(46px) saturate(1.4);
    -webkit-backdrop-filter: blur(40px) saturate(1.4);
    border: 1px solid var(--headerStroke);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
    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.995);
    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;
    /* links sit together at the right-hand end of the bar */
    justify-content: flex-end;
    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);
}


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

.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 color-mix(in srgb, var(--cta) 60%, transparent);
    background: var(--cta);
    color: #FFFFFF;
    box-shadow: 0 6px 16px rgba(29, 170, 194, .24);
}

.btn.primary:hover {
    filter: brightness(1.06);
    box-shadow: 0 10px 22px rgba(29, 170, 194, .30);
}

.btn:active {
    transform: translateY(0) scale(.98);
}

.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);
}




/* 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;
    }

}

/* 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.99);
    backdrop-filter: blur(34px);
    -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.99);
}

.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;
    }

}

/* 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
    }


    .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;
    justify-content: space-between;
    align-items: center;
}

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

.footer-left p {
    display: inline-block;
    margin: 0;
    color: var(--muted);
}

.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-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }


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

/* --- Scroll Animations (Apple-like) --- */
/* --- Scroll Animations (Apple-like) --- */
/* The parent container fades in */
/* Hidden states are opt-in: they only apply when scroll-animations.js
   has loaded (html.anim-ready). Without JS, content is always visible. */
html.anim-ready .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;
}

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

/* Staggered Items (Children) */
html.anim-ready .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;
}

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

/* Pop In Animation for Numbers/Stats */
html.anim-ready .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 */
}

html.anim-ready .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 {
        /* Was a flat 36px, which a long word ("Transformation.") overflows on a
           320px screen. This clamp still resolves to exactly 36px at 768px, so
           nothing changes at the width this rule was written for. */
        font-size: clamp(26px, 7.5vw, 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; }
}

/* ============================================================
   2026 POLISH PASS — global refinements + suite card system
   ============================================================ */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(29, 170, 194, .25);
}

a, button {
    -webkit-tap-highlight-color: transparent;
}

.btn:focus-visible,
a:focus-visible {
    outline: 2px solid var(--cta);
    outline-offset: 2px;
}

/* Pill badge — theme-aware (replaces old inline styles) */
.pill-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--cta) 26%, transparent);
    background: color-mix(in srgb, var(--cta) 9%, transparent);
    color: var(--cta);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .8px;
}

.pill-badge.purple {
    border-color: rgba(139, 92, 246, .26);
    background: rgba(139, 92, 246, .09);
    color: #8b5cf6;
}

/* Suite sections (Business / Home) */
.suite-section {
    scroll-margin-top: 120px;
}

.suite-head {
    text-align: center;
    margin-bottom: 44px;
}

.suite-head .pill-badge {
    margin-bottom: 20px;
}

.suite-head h2 {
    font-size: clamp(30px, 3.4vw, 40px);
    font-weight: 800;
    letter-spacing: -1px;
    margin: 0 0 14px;
}

.suite-head p {
    max-width: 620px;
    margin: 0 auto;
    font-size: 17px;
    color: var(--muted);
    line-height: 1.6;
}

.suite-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto 96px;
}

@media (max-width: 900px) {
    .suite-grid {
        grid-template-columns: 1fr;
    }
}

.suite-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    padding: 40px;
    background: var(--bg3);
    border: 1px solid var(--stroke);
    border-radius: 20px;
    box-shadow: var(--shadow2);
    scroll-margin-top: 120px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.suite-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--cta) 40%, var(--stroke));
    box-shadow: var(--shadow);
}

.suite-card::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--cardGlow, rgba(29, 170, 194, .10)) 0%, transparent 62%);
    pointer-events: none;
}

.suite-card.glow-teal   { --cardGlow: rgba(29, 170, 194, .12); }
.suite-card.glow-purple { --cardGlow: rgba(139, 92, 246, .12); }
.suite-card.glow-green  { --cardGlow: rgba(16, 185, 129, .11); }

.suite-card.glow-purple:hover { border-color: color-mix(in srgb, #8b5cf6 40%, var(--stroke)); }
.suite-card.glow-green:hover  { border-color: color-mix(in srgb, #10b981 40%, var(--stroke)); }

.suite-card h3 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.4px;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.suite-card p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 28px;
    flex: 1;
}

.suite-card .btn {
    align-self: flex-start;
}

.tag-soon {
    font-size: 11px;
    padding: 4px 10px;
    background: rgba(139, 92, 246, .16);
    color: #8b5cf6;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Gradient headline accent */
.grad-text {
    background: linear-gradient(135deg, var(--cta), #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Contact page enquiry card */
.enquiry-card {
    max-width: 720px;
    margin: 0 auto;
    padding: 44px;
    background: var(--bg3);
    border: 1px solid var(--stroke);
    border-radius: 20px;
    box-shadow: var(--shadow2);
    text-align: left;
}

.form-note {
    font-size: 13px;
    color: var(--muted);
    margin-top: 14px;
    text-align: center;
}

.form-status {
    display: none;
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
}

.form-status.ok {
    display: block;
    background: rgba(16, 185, 129, .12);
    border: 1px solid rgba(16, 185, 129, .30);
    color: #10b981;
}

.form-status.err {
    display: block;
    background: rgba(239, 68, 68, .10);
    border: 1px solid rgba(239, 68, 68, .28);
    color: #ef4444;
}

@media (max-width: 640px) {
    .enquiry-card {
        padding: 28px 22px;
    }
    .form-two-col {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   COOKIE CONSENT  (consent.js)
   ============================================================ */
.svConsent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 9000;
    padding: 16px;
    display: flex;
    justify-content: center;
    animation: svConsentIn .32s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes svConsentIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.svConsent__box {
    width: min(1120px, 100%);
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    background: var(--glass2);
    border: 1px solid var(--stroke);
    border-radius: 18px;
    padding: 20px 24px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}

.svConsent__text { flex: 1 1 420px; min-width: 0; }

.svConsent__title {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 6px;
    letter-spacing: -.2px;
    color: var(--text);
}

.svConsent__body {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}

.svConsent__body a { color: var(--ctaBlue); text-decoration: underline; text-underline-offset: 2px; }

.svConsent__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Equal prominence: reject must never look weaker than accept */
.svConsent__actions .btn {
    min-width: 118px;
    justify-content: center;
    font-size: 14px;
    padding: 11px 18px;
}

/* --- preferences panel --- */
.svConsent--panel {
    inset: 0;
    align-items: center;
    padding: 20px;
}

.svConsent__scrim {
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 16, .6);
    backdrop-filter: blur(3px);
}

.svConsent__box--panel {
    position: relative;
    display: block;
    width: min(620px, 100%);
    max-height: min(86vh, 760px);
    overflow-y: auto;
    padding: 30px;
}

.svConsent__box--panel .svConsent__title { font-size: 22px; margin-bottom: 10px; }
.svConsent__box--panel .svConsent__body  { margin-bottom: 24px; }

.svConsent__cat {
    border: 1px solid var(--stroke);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 12px;
    background: var(--glass);
}

.svConsent__catHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}

.svConsent__catHead strong { font-size: 15px; color: var(--text); }

.svConsent__cat p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
}

.svConsent__always {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--ctaBlue);
    background: rgba(29, 170, 194, .12);
    border: 1px solid rgba(29, 170, 194, .25);
    border-radius: 999px;
    padding: 4px 10px;
}

.svConsent__box--panel .svConsent__actions {
    margin-top: 22px;
    justify-content: flex-end;
}

/* accessible switch */
.svToggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.svToggle input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.svToggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.svToggle__track {
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 16%, transparent);
    border: 1px solid var(--stroke);
    position: relative;
    transition: background .2s ease;
    flex-shrink: 0;
}

.svToggle__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}

.svToggle input:checked + .svToggle__track { background: var(--ctaBlue); border-color: var(--ctaBlue); }
.svToggle input:checked + .svToggle__track::after { transform: translateX(18px); }
.svToggle input:focus-visible + .svToggle__track { outline: 2px solid var(--ctaBlue); outline-offset: 3px; }

html.sv-consent-open, html.sv-consent-open body { overflow: hidden; }

@media (max-width: 720px) {
    .svConsent__box { padding: 18px; gap: 16px; }
    .svConsent__actions { width: 100%; }
    /* full width and identical size, so no option is visually favoured */
    .svConsent__actions .btn { flex: 1 1 100%; width: 100%; }
    .svConsent__box--panel { padding: 22px; }
}

/* ============================================================
   PRODUCT AVAILABILITY BADGES
   ============================================================ */
.availBadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    padding: 4px 10px;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 10px;
    white-space: nowrap;
}

.availBadge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.availBadge--live {
    color: var(--ctaBlue);
    background: rgba(29, 170, 194, .10);
    border: 1px solid rgba(29, 170, 194, .26);
}

.availBadge--dev {
    color: var(--muted);
    background: rgba(11, 18, 32, .045);
    border: 1px solid rgba(11, 18, 32, .12);
}

html[data-theme="dark"] .availBadge--dev {
    color: var(--muted);
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
}

.availNote {
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
    margin: -4px 0 16px;
    padding-left: 12px;
    border-left: 2px solid rgba(245, 158, 11, .35);
}

.suite-card h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

/* ============================================================
   LEGAL / PROSE PAGES
   ============================================================ */
.legal-wrap { max-width: 820px; margin: 0 auto; padding: 90px 22px 40px; }

.legal-wrap h1 {
    font-size: clamp(34px, 5vw, 48px);
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin: 0 0 14px;
}

.legal-meta {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 10px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--stroke);
}

.legal-toc {
    background: var(--glass);
    border: 1px solid var(--stroke);
    border-radius: 16px;
    padding: 22px 26px;
    margin: 30px 0 44px;
}

.legal-toc h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin: 0 0 12px; font-weight: 800; }
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 30px; }
.legal-toc li { margin-bottom: 7px; font-size: 14.5px; break-inside: avoid; }
.legal-toc a { color: var(--text); text-decoration: none; }
.legal-toc a:hover { color: var(--ctaBlue); text-decoration: underline; }

@media (max-width: 640px) { .legal-toc ol { columns: 1; } }

.legal-body h2 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.4px;
    margin: 48px 0 14px;
    scroll-margin-top: 110px;
}

.legal-body h3 { font-size: 17px; font-weight: 700; margin: 28px 0 10px; }

.legal-body p,
.legal-body li {
    font-size: 16px;
    line-height: 1.75;
    color: var(--muted);
}

.legal-body p { margin: 0 0 16px; }
.legal-body ul, .legal-body ol { margin: 0 0 18px; padding-left: 24px; }
.legal-body li { margin-bottom: 9px; }
.legal-body strong { color: var(--text); font-weight: 700; }
.legal-body a { color: var(--ctaBlue); text-decoration: underline; text-underline-offset: 2px; }

.legal-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 26px;
    font-size: 14.5px;
    display: block;
    overflow-x: auto;
}

.legal-body th, .legal-body td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--stroke);
    vertical-align: top;
    color: var(--muted);
    line-height: 1.55;
    min-width: 130px;
}

.legal-body th { color: var(--text); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }
.legal-body tbody tr:last-child td { border-bottom: none; }

.legal-callout {
    background: var(--glass);
    border: 1px solid var(--stroke);
    border-left: 3px solid var(--ctaBlue);
    border-radius: 12px;
    padding: 18px 22px;
    margin: 0 0 26px;
}

.legal-callout p:last-child { margin-bottom: 0; }

/* ============================================================
   FOOTER — expanded with legal disclosures
   ============================================================ */
.footer-cols {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 40px;
    padding: 56px 0 40px;
}

.footer-col h4 {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text);
    margin: 0 0 16px;
}

.footer-col a,
.footer-col button.footer-linkBtn {
    display: block;
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: 10px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.footer-col a:hover,
.footer-col button.footer-linkBtn:hover { color: var(--ctaBlue); }

.footer-brandCol .footer-logo { font-size: 19px; font-weight: 800; letter-spacing: -.5px; display: block; margin-bottom: 12px; }
.footer-brandCol p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0 0 14px; max-width: 320px; }
.footer-brandCol a { color: var(--ctaBlue); text-decoration: none; font-size: 14px; }
.footer-brandCol a:hover { text-decoration: underline; }

.footer-legal {
    border-top: 1px solid var(--stroke);
    padding: 24px 0 40px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--muted);
}

.footer-legal p { margin: 0 0 4px; }
.footer-legal .footer-copy { margin-top: 12px; }

@media (max-width: 900px) {
    .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
    .footer-brandCol { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
    .footer-cols { grid-template-columns: 1fr; gap: 28px; padding: 40px 0 28px; }
}

/* consent checkbox on the enquiry form */
.form-consent {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 4px 0 20px;
}

.form-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: var(--ctaBlue);
    cursor: pointer;
}

.form-consent label { font-size: 13.5px; line-height: 1.6; color: var(--muted); cursor: pointer; }
.form-consent a { color: var(--ctaBlue); text-decoration: underline; text-underline-offset: 2px; }

.sv-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* "Soon" marker inside the products dropdown */
/* Availability note in the products menu. Deliberately quiet: the product
   name is what's being read, the status is a footnote after it. Held on one
   line so the list keeps its vertical rhythm. */
.ddSoon {
    display: inline;
    margin-left: 7px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    vertical-align: baseline;
    opacity: .7;
}

.dropdownLink,
.mobileProductLink {
    white-space: nowrap;
}

html[data-theme="dark"] .ddSoon { color: var(--muted); }


/* ============================================================
   ACCESSIBILITY FIXES
   ============================================================ */

/* WCAG 2.1.1 (Level A) — the products dropdown was hover-only, so a keyboard
   user could not reach any of the 13 product links. :focus-within opens it on
   keyboard focus exactly as :hover does for a mouse. */
.navItem.hasDropdown:focus-within .productsDropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* WCAG 2.4.1 (Level A) — skip past the header, nav and 13-link dropdown */
.skipLink {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 12px 20px;
    background: var(--ctaBlue);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    border-radius: 0 0 10px 0;
    text-decoration: none;
    z-index: 10000;
}

.skipLink:focus {
    left: 0;
    outline: 3px solid #fff;
    outline-offset: -6px;
}

/* WCAG 2.4.7 — make the form focus ring unmistakable rather than a faint glow */
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form select:focus-visible {
    outline: 2px solid var(--ctaBlue);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(29, 170, 194, .35);
}

/* WCAG 2.3.3 — the previous rule killed transitions but left 9 infinite
   animations running. This stops all of them, including on pseudo-elements. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* WCAG 1.4.3 — white text on the brand teal (#1daac2) measures 2.77:1, below the
   4.5:1 required. Rather than change the brand colour, the primary button uses a
   very dark teal text on the same background: 6.0:1. Brand intact, AA met. */
.btn.primary,
.btn.primary:hover,
.btn.primary:active,
.btn.primary:visited {
    color: #04222a;
}

.btn.primary svg { stroke: #04222a; }

.skipLink {
    background: #04222a;
    color: #ffffff;
}

/* ============================================================
   DARK APPEARANCE — driven by the visitor's browser / OS setting.
   GENERATED: mirrors the html[data-theme="dark"] rules above, which
   are kept for old browsers without prefers-color-scheme support.
   Edit the rules ABOVE, never this block — it is rebuilt from them.
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root {
    --bg1: #05070D;
    --bg2: #0A1120;
    --bg3: #0F1B2E;

    --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 2px 6px rgba(0, 0, 0, .28), 0 18px 44px rgba(0, 0, 0, .34);
    --shadow2: 0 1px 3px rgba(0, 0, 0, .24), 0 10px 26px rgba(0, 0, 0, .28);

    --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, .985);
    --headerStroke: rgba(255, 255, 255, .14);
    --headerShadow: 0 18px 60px rgba(0, 0, 0, .55);
    --logoFilter: none;
    }

    .productBox {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    .productBox:hover {
    box-shadow: 0 12px 24px rgba(0,0,0,0.4);
    }

    .productsDropdown {
    background: rgba(10, 16, 32, 0.995);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    }

    .logo {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    }

    .btn.ghost {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .22);
    }

    .bubble {
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
    }

    .pill {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .16);
    }

    .avatar {
    background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .10));
    border: 1px solid rgba(255, 255, 255, .18);
    }

    .bar {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .10);
    }

    .chart {
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(10, 16, 32, .24);
    }

    .network {
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(10, 16, 32, .22);
    }

    .ico {
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
    }

    .mobileMenu {
    background: rgba(10, 16, 32, 0.99);
    }

    .problem-band {
    background: rgba(255, 255, 255, 0.02);
    }

    .contact-form input, .contact-form select, .contact-form textarea {
    background: rgba(0, 0, 0, 0.2);
    /* Deeper blend for dark mode */
    }

    .striking-card {
    background: rgba(255, 255, 255, 0.04);
    }

    .striking-card:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    }

    .enterprise-contact-form input, .enterprise-contact-form select {
    background: rgba(0, 0, 0, 0.2);
    }

    .product-card {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    .product-card:hover {
    box-shadow: 0 16px 32px rgba(0,0,0,0.4);
    }

    .availBadge--dev {
    color: var(--muted);
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    }

    .ddSoon { color: var(--muted);
    }
}