/*
Theme Name: VYRE Cloud Theme 26
Version: 1.0
Text Domain: vyre-theme-26
*/

/* Waiting list page styles */
.waiting-list {
    padding: clamp(40px, 6vw, 80px) 0;
}

.waiting-list__inner {
    max-width: min(98vw, 1400px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 6vw, 44px);
}

.waiting-list__lead {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.waiting-list__eyebrow {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(21, 130, 247, 0.12);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.waiting-list__lead h1 {
    margin: 0;
    font-size: clamp(2.3rem, 4vw, 2.9rem);
    color: var(--fg);
}

.waiting-list__lead p {
    margin: 0;
    font-size: 1.1rem;
    color: var(--nav-link-hover);
}

body.dark-mode .waiting-list__eyebrow {
    background: rgba(124, 143, 255, 0.22);
    color: #d6dcff;
}

body.dark-mode .waiting-list__lead p {
    color: rgba(244, 246, 255, 0.78);
}

.waiting-list__content {
    max-width: 1100px;
    margin: 0 auto;
    background: #fff;
    padding: clamp(32px, 4vw, 44px);
    border-radius: 20px;
    box-shadow: 0 24px 72px rgba(14, 24, 52, 0.12);
}

body.dark-mode .waiting-list__content {
    background: rgba(11, 15, 30, 0.78);
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.54);
    backdrop-filter: blur(12px);
}


.waiting-list__content h2 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: clamp(2rem, 3vw, 2.4rem);
    color: var(--fg);
}

.waiting-list__content p {
    margin-bottom: 20px;
    color: var(--nav-link-hover);
    font-size: 1.05rem;
}

body.dark-mode .waiting-list__content p {
    color: rgba(244, 246, 255, 0.82);
}

.waiting-list__benefits {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.waiting-list__benefits li {
    position: relative;
    padding-left: 26px;
    color: var(--nav-link-hover);
}

.waiting-list__benefits li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.waiting-list__embed {
    margin-bottom: 20px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(8, 16, 40, 0.06);
    box-shadow: inset 0 0 0 1px rgba(8, 16, 40, 0.08);
}

body.dark-mode .waiting-list__embed {
    background: rgba(244, 246, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(244, 246, 255, 0.14);
}

.waiting-list__embed iframe {
    width: 100%;
    min-height: 1800px;
    border: none;
}

.waiting-list__privacy {
    font-size: 0.95rem;
    color: rgba(8, 16, 40, 0.62);
    margin-bottom: 8px;
}

body.dark-mode .waiting-list__privacy {
    color: rgba(244, 246, 255, 0.68);
}

.waiting-list__privacy a {
    color: var(--primary);
    font-weight: 600;
}

.waiting-list__privacy--email {
    margin-top: -4px;
}

.waiting-list__alt-cta {
    font-size: 0.95rem;
    color: var(--nav-link);
}

.waiting-list__alt-cta a {
    color: var(--primary);
    font-weight: 600;
}

@media (max-width: 640px) {
    .waiting-list {
        padding: clamp(32px, 10vw, 60px) 0;
    }

    .waiting-list__lead {
        gap: 12px;
    }

    .waiting-list__content {
        padding: clamp(24px, 8vw, 36px);
        border-radius: 18px;
    }
}

/* VYRE Core page styles */
.vyre-core-hero {
    padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 10vw, 120px);
    background: radial-gradient(circle at 12% 18%, rgba(21, 130, 247, 0.18), transparent 46%),
        radial-gradient(circle at 88% 12%, rgba(119, 58, 220, 0.16), transparent 50%),
        linear-gradient(180deg, rgba(244, 246, 255, 0.85) 0%, rgba(236, 240, 255, 0.95) 100%);
}

.vyre-core-hero__inner {
    max-width: min(92vw, 1240px);
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 52px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
    align-items: center;
    gap: clamp(36px, 6vw, 72px);
}

.vyre-core-hero__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.vyre-core-hero__highlights {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.vyre-core-hero__highlights li {
    position: relative;
    padding-left: 28px;
    color: var(--nav-link-hover);
}

.vyre-core-hero__highlights li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.vyre-core-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.vyre-core-hero__media {
    width: 100%;
    padding-bottom: 70%;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(21, 130, 247, 0.16), rgba(119, 58, 220, 0.16));
    box-shadow: 0 32px 68px rgba(15, 35, 70, 0.18);
    position: relative;
    overflow: hidden;
}

.vyre-core-hero__media::after {
    content: '';
    position: absolute;
    inset: 14%;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(20px);
}

body.dark-mode .vyre-core-hero {
    background: radial-gradient(circle at 12% 18%, rgba(117, 140, 255, 0.22), transparent 42%),
        radial-gradient(circle at 88% 12%, rgba(151, 97, 255, 0.18), transparent 48%),
        linear-gradient(180deg, rgba(15, 18, 36, 0.95) 0%, rgba(8, 10, 22, 0.96) 100%);
}

body.dark-mode .vyre-core-hero__eyebrow {
    background: rgba(117, 140, 255, 0.18);
    color: #d6dbff;
}

body.dark-mode .vyre-core-hero p,
body.dark-mode .vyre-core-hero__highlights li {
    color: rgba(244, 246, 255, 0.82);
}

.vyre-core-path__inner,
.vyre-core-overview__inner,
.vyre-core-pillars__inner,
.vyre-core-roles__inner,
.vyre-core-strategy__inner,
.vyre-core-roadmap__inner,
.vyre-core-cta__inner {
    max-width: min(92vw, 1180px);
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 52px);
}

.vyre-core-path,
.vyre-core-overview,
.vyre-core-pillars,
.vyre-core-roles,
.vyre-core-strategy,
.vyre-core-roadmap,
.vyre-core-cta {
    padding: clamp(64px, 14vw, 118px) 0;
}

.vyre-core-cta {
    padding: clamp(46px, 12vw, 86px) 0 clamp(26px, 7vw, 48px);
}

.vyre-core-path + .vyre-core-overview {
    padding-top: clamp(48px, 10vw, 96px);
}

.vyre-core-path {
    --core-path-card-max: min(1120px, 95vw);
    --core-path-card-padding: clamp(28px, 4vw, 38px);
    --core-path-first-card-height: clamp(360px, 32vw, 460px);
    --core-path-line-start: var(--core-path-card-padding);
    --core-path-line-end: clamp(36px, 6vw, 64px);
    --core-path-node-offset: calc(var(--core-path-card-padding) + clamp(42px, 3.8vw, 58px));
    background: linear-gradient(180deg, rgba(12, 22, 48, 0.03) 0%, rgba(255, 255, 255, 0) 90%);
}

body.dark-mode .vyre-core-path {
    background: linear-gradient(180deg, rgba(12, 18, 42, 0.75) 0%, rgba(4, 6, 18, 0.92) 90%);
}

.vyre-core-path__heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(48px, 8vw, 72px);
    display: grid;
    gap: 18px;
}

.vyre-core-path__eyebrow {
    display: inline-flex;
    align-self: center;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border-radius: 999px;
    background: rgba(21, 130, 247, 0.14);
    color: var(--primary);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
}

.vyre-core-path__heading h2 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 2.6rem);
    color: var(--fg);
}

.vyre-core-path__heading p {
    margin: 0 auto;
    max-width: clamp(540px, 65vw, 820px);
    color: var(--nav-link-hover);
    font-size: 1.05rem;
}

.vyre-core-path__heading p + p {
    color: rgba(8, 16, 40, 0.72);
}

body.dark-mode .vyre-core-path__heading p + p {
    color: rgba(244, 246, 255, 0.74);
}

body.dark-mode .vyre-core-path__eyebrow {
    background: rgba(117, 140, 255, 0.24);
    color: #dce3ff;
}

body.dark-mode .vyre-core-path__heading p {
    color: rgba(244, 246, 255, 0.78);
}

.vyre-core-path__summary {
    max-width: 880px;
    margin: clamp(24px, 6vw, 48px) auto 0;
    text-align: center;
    display: grid;
    gap: 12px;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--nav-link-hover);
}

.vyre-core-path__summary p:first-child {
    font-weight: 600;
    color: var(--fg);
}

body.dark-mode .vyre-core-path__summary p:first-child {
    color: rgba(244, 246, 255, 0.9);
}

.vyre-core-path__summary p {
    margin: 0;
}

body.dark-mode .vyre-core-path__summary {
    color: rgba(244, 246, 255, 0.78);
}

.vyre-core-path__timeline {
    position: relative;
    display: grid;
    row-gap: clamp(40px, 8vw, 88px);
    padding: 0 clamp(24px, 6vw, 64px);
}

.vyre-core-path__timeline::before {
    content: '';
    position: absolute;
    top: calc(var(--core-path-line-start) + var(--core-path-first-card-height));
    bottom: var(--core-path-line-end);
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    background: linear-gradient(180deg, var(--primary), var(--secondary));
    border-radius: 999px;
    opacity: 0.9;
}

body.dark-mode .vyre-core-path__timeline::before {
    opacity: 0.7;
}

.vyre-core-path__item {
    position: relative;
    display: flex;
    justify-content: center;
    padding-inline: var(--core-path-card-padding);
}

.vyre-core-path__item::before {
    content: '';
    position: absolute;
    top: var(--core-path-node-offset);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(21, 130, 247, 0.85), rgba(119, 58, 220, 0.75));
    box-shadow: 0 0 0 7px rgba(21, 130, 247, 0.12), 0 18px 32px rgba(8, 16, 40, 0.18);
    z-index: 2;
    pointer-events: none;
}

body.dark-mode .vyre-core-path__item::before {
    background: linear-gradient(135deg, rgba(117, 140, 255, 0.95), rgba(74, 112, 255, 0.85));
    box-shadow: 0 0 0 8px rgba(117, 140, 255, 0.14), 0 22px 38px rgba(0, 0, 0, 0.46);
}

.vyre-core-path__card {
    width: 100%;
    max-width: var(--core-path-card-max);
    margin: 0 auto;
    padding: var(--core-path-card-padding);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(21, 130, 247, 0.16), rgba(119, 58, 220, 0.16));
    border: 1px solid rgba(21, 130, 247, 0.28);
    box-shadow: 0 24px 52px rgba(12, 22, 48, 0.15);
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.vyre-core-path__card::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    pointer-events: none;
}

body.dark-mode .vyre-core-path__card {
    background: linear-gradient(135deg, rgba(18, 22, 42, 0.94), rgba(117, 140, 255, 0.22));
    border-color: rgba(149, 168, 255, 0.36);
    box-shadow: 0 30px 64px rgba(0, 0, 0, 0.52);
}

body.dark-mode .vyre-core-path__card::after {
    border-color: rgba(244, 246, 255, 0.18);
}

.vyre-core-path__card h3 {
    margin: 0;
    font-size: clamp(1.1rem, 2.6vw, 1.45rem);
    letter-spacing: 0.02em;
    font-weight: 700;
    color: var(--fg);
}

.vyre-core-path__layer {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(21, 130, 247, 0.18);
    color: var(--primary);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
}

body.dark-mode .vyre-core-path__layer {
    background: rgba(117, 140, 255, 0.26);
    color: #dce3ff;
}

.vyre-core-path__card p {
    margin: 0;
    color: var(--nav-link-hover);
    font-size: 1rem;
}

body.dark-mode .vyre-core-path__card p {
    color: rgba(244, 246, 255, 0.84);
}

.vyre-core-path__card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.vyre-core-path__card li {
    position: relative;
    padding-left: 26px;
    font-weight: 600;
    color: var(--nav-link-hover);
    line-height: 1.5;
}

.vyre-core-path__card li::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 6px 16px rgba(12, 22, 48, 0.18);
}

.vyre-core-path__card li strong {
    display: block;
    color: var(--fg);
    margin-bottom: 4px;
}

.vyre-core-path__card li span {
    display: block;
    margin-top: 6px;
    font-weight: 400;
    color: var(--nav-link-hover);
}

.vyre-core-path__notes {
    margin-top: clamp(16px, 3vw, 22px);
    display: grid;
    gap: 10px;
}

.vyre-core-path__notes h4 {
    margin: 0;
    font-size: clamp(1rem, 2.2vw, 1.35rem);
    color: var(--fg);
}

.vyre-core-path__notes p {
    margin: 0;
    color: var(--nav-link-hover);
    line-height: 1.7;
}

body.dark-mode .vyre-core-path__card li {
    color: rgba(244, 246, 255, 0.82);
}

body.dark-mode .vyre-core-path__card li::before {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

body.dark-mode .vyre-core-path__card li strong {
    color: rgba(244, 246, 255, 0.9);
}

body.dark-mode .vyre-core-path__card li span {
    color: rgba(244, 246, 255, 0.78);
}

body.dark-mode .vyre-core-path__notes p {
    color: rgba(244, 246, 255, 0.78);
}

.vyre-core-path__card--soc {
    background: linear-gradient(135deg, #ff8a4f, #ff3f81);
    border-color: rgba(255, 136, 120, 0.5);
    box-shadow: 0 30px 62px rgba(255, 63, 129, 0.28);
    color: #fff;
}

.vyre-core-path__card--soc::after {
    border-color: rgba(255, 255, 255, 0.4);
}

.vyre-core-path__card--soc .vyre-core-path__layer {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.vyre-core-path__card--soc h3,
.vyre-core-path__card--soc p,
.vyre-core-path__card--soc li {
    color: rgba(255, 255, 255, 0.94);
}

.vyre-core-path__card--soc li::before {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 18px rgba(255, 99, 143, 0.42);
}

body.dark-mode .vyre-core-path__card--soc {
    background: linear-gradient(135deg, rgba(255, 138, 79, 0.92), rgba(255, 63, 129, 0.92));
    border-color: rgba(255, 168, 148, 0.6);
    box-shadow: 0 32px 72px rgba(0, 0, 0, 0.6);
}

body.dark-mode .vyre-core-path__card--soc::after {
    border-color: rgba(255, 255, 255, 0.3);
}

body.dark-mode .vyre-core-path__card--soc .vyre-core-path__layer {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.vyre-core-path__card--core {
    border-width: 2px;
    box-shadow: 0 32px 74px rgba(12, 22, 48, 0.24);
    transform: translateY(-4px);
}

body.dark-mode .vyre-core-path__card--core {
    border-color: rgba(149, 168, 255, 0.44);
    box-shadow: 0 36px 84px rgba(0, 0, 0, 0.6);
}

.vyre-core-path__tagline {
    font-weight: 700;
    color: var(--primary);
}

body.dark-mode .vyre-core-path__tagline {
    color: #c7d1ff;
}

.vyre-core-path__details {
    grid-column: 3 / 4;
    display: grid;
    gap: 14px;
    max-width: 560px;
    margin-left: clamp(18px, 4vw, 48px);
}

.vyre-core-path__details h4 {
    margin: 0;
    font-size: clamp(1.05rem, 2.4vw, 1.4rem);
    color: var(--fg);
}

.vyre-core-path__details p {
    margin: 0;
    color: var(--nav-link-hover);
    line-height: 1.7;
}

body.dark-mode .vyre-core-path__details p {
    color: rgba(244, 246, 255, 0.78);
}


.vyre-core-section-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px 18px;
    border-radius: 999px;
    background: rgba(21, 130, 247, 0.12);
    color: var(--primary);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
}

body.dark-mode .vyre-core-section-eyebrow {
    background: rgba(117, 140, 255, 0.24);
    color: #dce3ff;
}

.vyre-core-section-header {
    max-width: 720px;
    margin: 0 auto clamp(36px, 6vw, 56px);
    text-align: center;
    display: grid;
    gap: 14px;
    justify-items: center;
}

.vyre-core-section-header p {
    color: var(--nav-link-hover);
    margin: 0;
}

.vyre-core-overview__inner {
    display: grid;
    gap: clamp(28px, 5vw, 48px);
    grid-template-columns: 1fr;
    grid-template-areas: "content" "media" "callouts";
    align-items: start;
}

.vyre-core-overview__content {
    grid-area: content;
    display: grid;
    gap: clamp(18px, 3vw, 26px);
}

.vyre-core-overview__content p {
    color: var(--nav-link-hover);
}

.vyre-core-overview__metrics {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vyre-core-overview__metrics li {
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(21, 130, 247, 0.05);
    border: 1px solid rgba(21, 130, 247, 0.12);
    display: grid;
    gap: 6px;
}

.vyre-core-overview__metrics strong {
    font-size: 0.98rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary);
}

.vyre-core-overview__metrics span {
    color: var(--nav-link-hover);
    line-height: 1.5;
}

body.dark-mode .vyre-core-overview__metrics li {
    background: rgba(117, 140, 255, 0.08);
    border-color: rgba(117, 140, 255, 0.2);
}

body.dark-mode .vyre-core-overview__metrics strong {
    color: #dce3ff;
}

body.dark-mode .vyre-core-overview__metrics span {
    color: rgba(244, 246, 255, 0.78);
}

.vyre-core-overview__media {
    grid-area: media;
    position: relative;
    min-height: clamp(320px, 44vw, 480px);
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(21, 130, 247, 0.08), rgba(119, 58, 220, 0.12));
    border: 1px solid rgba(21, 130, 247, 0.12);
    box-shadow: 0 22px 48px rgba(12, 22, 48, 0.14);
    padding: clamp(30px, 5.5vw, 38px);
    display: grid;
    gap: 12px;
    align-content: end;
}

.vyre-core-overview__media-glow {
    position: absolute;
    inset: 12%;
    background: radial-gradient(circle at 32% 28%, rgba(117, 140, 255, 0.2), transparent 62%),
        radial-gradient(circle at 76% 36%, rgba(255, 168, 0, 0.16), transparent 70%);
    filter: blur(10px);
    opacity: 0.5;
    z-index: 0;
}

.vyre-core-overview__media-ring {
    position: absolute;
    inset: clamp(28px, 6vw, 44px);
    border-radius: 24px;
    border: 1px solid rgba(21, 130, 247, 0.14);
    opacity: 0.7;
    z-index: 0;
}

.vyre-core-overview__media-title {
    position: relative;
    z-index: 1;
    font-size: clamp(1.02rem, 2.2vw, 1.35rem);
    font-weight: 700;
    color: var(--fg);
}

.vyre-core-overview__media p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--nav-link-hover);
    line-height: 1.6;
}

body.dark-mode .vyre-core-overview__media {
    background: linear-gradient(135deg, rgba(18, 22, 42, 0.82), rgba(117, 140, 255, 0.26));
    border-color: rgba(117, 140, 255, 0.24);
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.5);
}

body.dark-mode .vyre-core-overview__media-ring {
    border-color: rgba(117, 140, 255, 0.28);
}

body.dark-mode .vyre-core-overview__media p {
    color: rgba(244, 246, 255, 0.78);
}

.vyre-core-overview__callouts {
    grid-area: callouts;
    display: grid;
    gap: clamp(18px, 3vw, 26px);
}

.vyre-core-callout {
    background: #fff;
    padding: clamp(24px, 4vw, 32px);
    border-radius: 16px;
    box-shadow: 0 20px 44px rgba(12, 22, 48, 0.12);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.vyre-core-callout__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(21, 130, 247, 0.12);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.85rem;
}

.vyre-core-callout h3 {
    margin: 0;
}

.vyre-core-callout p {
    margin: 10px 0 0;
}

body.dark-mode .vyre-core-callout {
    background: rgba(18, 22, 42, 0.86);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.58);
}

body.dark-mode .vyre-core-callout__label {
    background: rgba(117, 140, 255, 0.24);
    color: #dce3ff;
}

.vyre-core-pillars__grid,
.vyre-core-roles__grid {
    display: grid;
    gap: clamp(20px, 4vw, 30px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    align-content: start;
    grid-auto-rows: minmax(0, 1fr);
}

.vyre-core-roles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vyre-core-card,
.vyre-core-role {
    background: #fff;
    padding: clamp(28px, 4vw, 36px);
    border-radius: 18px;
    box-shadow: 0 24px 56px rgba(12, 22, 48, 0.12);
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 3vw, 22px);
    min-height: clamp(300px, 32vw, 360px);
}

.vyre-core-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.vyre-core-card ul li {
    position: relative;
    padding-left: 22px;
    color: var(--nav-link-hover);
}


.vyre-core-card ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--card-accent-color);
    box-shadow: 0 0 0 3px var(--card-accent-ring);
}

.vyre-core-card {
    --card-accent-bg: linear-gradient(135deg, rgba(21, 130, 247, 0.16), rgba(119, 58, 220, 0.18));
    --card-accent-ring: rgba(21, 130, 247, 0.25);
    --card-accent-color: #1e3d8f;
}

.vyre-core-card--lectures {
    --card-accent-bg: linear-gradient(135deg, rgba(21, 130, 247, 0.24), rgba(119, 58, 220, 0.2));
    --card-accent-ring: rgba(21, 130, 247, 0.3);
    --card-accent-color: #1d4ed8;
}

.vyre-core-card__icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: var(--card-accent-bg);
    box-shadow: 0 14px 30px rgba(12, 22, 48, 0.12), inset 0 0 0 1px var(--card-accent-ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--card-accent-color);
    font-size: 1.45rem;
}

.vyre-core-card--sharepoint {
    --card-accent-bg: linear-gradient(135deg, rgba(119, 58, 220, 0.2), rgba(21, 130, 247, 0.14));
    --card-accent-ring: rgba(119, 58, 220, 0.25);
    --card-accent-color: #6230ba;
}

.vyre-core-card--standards {
    --card-accent-bg: linear-gradient(135deg, rgba(30, 201, 173, 0.2), rgba(21, 130, 247, 0.14));
    --card-accent-ring: rgba(30, 201, 173, 0.26);
    --card-accent-color: #138165;
}

body.dark-mode .vyre-core-card {
    --card-accent-ring: rgba(117, 140, 255, 0.32);
    --card-accent-color: #dbe2ff;
}

body.dark-mode .vyre-core-card__icon {
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.32), inset 0 0 0 1px var(--card-accent-ring);
}

body.dark-mode .vyre-core-card,
body.dark-mode .vyre-core-role {
    background: rgba(18, 22, 42, 0.88);
    box-shadow: 0 32px 70px rgba(0, 0, 0, 0.58);
}

.vyre-core-strategy__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.8fr);
    gap: clamp(30px, 6vw, 60px);
    align-items: center;
}

.vyre-core-strategy__note {
    margin-top: clamp(18px, 3vw, 26px);
    padding: clamp(18px, 3.5vw, 24px);
    border-radius: 16px;
    background: rgba(21, 130, 247, 0.08);
    border: 1px solid rgba(21, 130, 247, 0.18);
    display: grid;
    gap: 8px;
}

.vyre-core-strategy__note strong {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    color: var(--primary);
}

.vyre-core-strategy__note p {
    margin: 0;
    color: var(--nav-link-hover);
}

body.dark-mode .vyre-core-strategy__note {
    background: rgba(117, 140, 255, 0.12);
    border-color: rgba(117, 140, 255, 0.28);
}

body.dark-mode .vyre-core-strategy__note strong {
    color: #dce3ff;
}

body.dark-mode .vyre-core-strategy__note p {
    color: rgba(244, 246, 255, 0.78);
}

.vyre-core-strategy__content ul {
    margin: 18px 0 0;
    padding-left: 22px;
    display: grid;
    gap: 10px;
    color: var(--nav-link-hover);
}

.vyre-core-strategy__media {
    width: 100%;
    padding-bottom: 90%;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(8, 16, 40, 0.08), rgba(21, 130, 247, 0.18));
    box-shadow: inset 0 0 0 1px rgba(8, 16, 40, 0.08);
}

body.dark-mode .vyre-core-strategy__media {
    background: linear-gradient(135deg, rgba(244, 246, 255, 0.08), rgba(117, 140, 255, 0.22));
    box-shadow: inset 0 0 0 1px rgba(244, 246, 255, 0.12);
}

.vyre-core-roadmap {
    background: linear-gradient(180deg, rgba(12, 22, 48, 0.04) 0%, rgba(255, 255, 255, 0.8) 100%);
}

body.dark-mode .vyre-core-roadmap {
    background: linear-gradient(180deg, rgba(12, 18, 42, 0.82) 0%, rgba(4, 6, 18, 0.94) 100%);
}

.vyre-core-roadmap__timeline {
    display: grid;
    gap: clamp(22px, 4vw, 32px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vyre-core-milestone {
    background: #fff;
    padding: clamp(24px, 4vw, 32px);
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(12, 22, 48, 0.12);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vyre-core-milestone__phase {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--primary);
}

body.dark-mode .vyre-core-milestone {
    background: rgba(18, 22, 42, 0.96);
    box-shadow: 0 32px 70px rgba(0, 0, 0, 0.56);
}

.vyre-core-cta {
    text-align: center;
}

.vyre-core-cta p {
    max-width: 660px;
    margin: 16px auto 0;
    color: var(--nav-link-hover);
}

.vyre-core-cta__actions {
    margin-top: clamp(22px, 5vw, 36px);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}


@media (max-width: 1024px) {
    .vyre-core-hero__inner,
    .vyre-core-strategy__inner {
        grid-template-columns: 1fr;
    }

    .vyre-core-overview__media {
        min-height: 320px;
    }

    .vyre-core-hero__media,
    .vyre-core-strategy__media {
        height: 320px;
        padding-bottom: 0;
    }
}

@media (max-width: 900px) {
    .vyre-core-path__timeline {
        row-gap: clamp(32px, 9vw, 60px);
        padding: 0 clamp(20px, 5vw, 40px);
        position: relative;
    }

    .vyre-core-card,
    .vyre-core-role {
        min-height: 0;
    }

    .vyre-core-path__timeline::before {
        display: block;
        top: var(--core-path-card-padding);
        bottom: var(--core-path-line-end);
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.9;
    }

    .vyre-core-path__item {
        padding: 0;
    }

    .vyre-core-path__card {
        margin: 0 auto;
        max-width: 100%;
    }

    .vyre-core-path__item::before {
        display: block;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .vyre-core-path__details {
        margin-left: 0;
    }

    .vyre-core-pillars__grid,
    .vyre-core-roadmap__timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .vyre-core-hero__actions,
    .vyre-core-cta__actions {
        flex-direction: column;
    }

    .vyre-core-pillars__grid,
    .vyre-core-roles__grid,
    .vyre-core-roadmap__timeline {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .vyre-core-hero {
        padding: clamp(60px, 14vw, 110px) 0 clamp(42px, 12vw, 80px);
    }
}

/* --- Global Body Styles --- */

/* The Story Behind page */
.vyre-story-hero,
.vyre-story-challenges,
.vyre-story-timeline,
.vyre-story-vision,
.vyre-story-cta,
.vyre-founder-hero,
.vyre-founder-facts,
.vyre-founder-bio,
.vyre-founder-personal,
.vyre-founder-certifications,
.vyre-founder-timeline,
.vyre-founder-values {
    padding: clamp(60px, 14vw, 110px) 0;
}

.vyre-story-hero__inner,
.vyre-story-focus__inner,
.vyre-story-challenges__inner,
.vyre-story-timeline__inner,
.vyre-story-vision__inner,
.vyre-story-cta__inner,
.vyre-founder-hero__inner,
.vyre-founder-facts__inner,
.vyre-founder-bio__inner,
.vyre-founder-personal__inner,
.vyre-founder-certifications__inner,
.vyre-founder-timeline__inner,
.vyre-founder-values__inner {
    max-width: min(92vw, 1180px);
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 52px);
}

.vyre-story-eyebrow,
.vyre-founder-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border-radius: 999px;
    background: rgba(21, 130, 247, 0.12);
    color: var(--primary);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
}

.vyre-story-hero__inner h1,
.vyre-founder-hero__copy h1 {
    margin: clamp(18px, 4vw, 28px) 0 clamp(16px, 3vw, 24px);
    font-size: clamp(2.2rem, 5.6vw, 3rem);
    color: var(--fg);
}

.vyre-story-hero__inner p,
.vyre-founder-hero__copy p,
.vyre-story-vision__content p,
.vyre-story-vision__quote p,
.vyre-founder-bio__inner p,
.vyre-founder-values__column p {
    margin: 0;
    color: var(--nav-link-hover);
    line-height: 1.7;
}

.vyre-story-challenges__inner {
    display: grid;
    gap: clamp(28px, 6vw, 48px);
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    align-items: start;
}

.vyre-story-challenges__copy {
    display: grid;
    gap: clamp(16px, 3vw, 28px);
    align-content: start;
}

.vyre-story-challenges__copy > .vyre-story-eyebrow {
    justify-self: start;
}

.vyre-story-challenges__highlights {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.vyre-story-challenges__highlights li {
    position: relative;
    padding-left: 26px;
    color: var(--nav-link-hover);
    line-height: 1.6;
}

.vyre-story-challenges__highlights li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.vyre-story-challenges__highlights strong {
    color: var(--fg);
    font-weight: 700;
}

.vyre-story-challenges__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 4vw, 28px);
}

.vyre-story-challenges__list article {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: clamp(24px, 4vw, 32px);
    box-shadow: 0 22px 56px rgba(12, 22, 48, 0.08);
    border: 1px solid rgba(21, 130, 247, 0.08);
    overflow: hidden;
    display: grid;
    gap: 12px;
}

.vyre-story-challenges__card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(21, 130, 247, 0.12), rgba(119, 58, 220, 0.12));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.vyre-story-challenges__card:hover::before,
.vyre-story-challenges__card:focus-within::before {
    opacity: 1;
}

.vyre-story-challenges__badge {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(21, 130, 247, 0.32);
}

.vyre-story-challenges__content {
    position: relative;
    display: grid;
    gap: 12px;
}

.vyre-story-challenges__note {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(8, 16, 40, 0.72);
}

body.dark-mode .vyre-story-challenges__highlights li {
    color: rgba(244, 246, 255, 0.78);
}

body.dark-mode .vyre-story-challenges__highlights strong {
    color: rgba(244, 246, 255, 0.92);
}

body.dark-mode .vyre-story-challenges__list article {
    background: rgba(13, 18, 42, 0.78);
    border: 1px solid rgba(124, 143, 255, 0.18);
    box-shadow: 0 30px 72px rgba(0, 0, 0, 0.5);
}

body.dark-mode .vyre-story-challenges__note {
    color: rgba(244, 246, 255, 0.74);
}

.vyre-feature-showcase {
    padding: clamp(60px, 14vw, 110px) 0;
    background: linear-gradient(180deg, rgba(12, 22, 48, 0.04) 0%, rgba(255, 255, 255, 0) 100%);
}

.vyre-feature-showcase__inner {
    max-width: min(92vw, 1180px);
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 52px);
    display: grid;
    gap: clamp(36px, 6vw, 56px);
}

.vyre-feature-showcase__header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
    display: grid;
    gap: 16px;
}

.vyre-feature-showcase__header h2 {
    margin: 0;
    font-size: clamp(2.1rem, 5vw, 2.8rem);
    color: var(--fg);
}

.vyre-feature-showcase__header p {
    margin: 0;
    color: var(--nav-link-hover);
    font-size: 1.05rem;
}

.vyre-feature-showcase__groups {
    display: grid;
    gap: clamp(36px, 6vw, 52px);
}

.vyre-feature-showcase__group {
    display: grid;
    gap: clamp(20px, 4vw, 32px);
}

.vyre-feature-showcase__group-heading {
    display: grid;
    gap: 12px;
    max-width: 760px;
}

.vyre-feature-showcase__group-heading h3 {
    margin: 0;
    font-size: clamp(1.5rem, 3.8vw, 2rem);
    color: var(--fg);
}

.vyre-feature-showcase__group-heading p {
    margin: 0;
    color: var(--nav-link-hover);
    line-height: 1.6;
}

.vyre-feature-showcase__grid {
    display: grid;
    gap: clamp(18px, 4vw, 28px);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: start;
}

.vyre-feature-card {
    position: relative;
    border-radius: 20px;
    padding: clamp(18px, 3vw, 24px);
    background: linear-gradient(135deg, rgba(250, 252, 255, 0.96), rgba(241, 244, 248, 0.96));
    border: 1px solid rgba(21, 130, 247, 0.12);
    box-shadow: 0 24px 56px rgba(12, 22, 48, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vyre-feature-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(250, 252, 255, 0.6), rgba(235, 240, 246, 0.6));
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.vyre-feature-card:hover,
.vyre-feature-card:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 32px 68px rgba(12, 22, 48, 0.16);
}

.vyre-feature-card:hover::after,
.vyre-feature-card:focus-within::after {
    opacity: 1;
}

.vyre-feature-card__badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 18px;
    width: 132px;
    white-space: nowrap;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    position: relative;
    z-index: 1;
}

.vyre-feature-card h4,
.vyre-feature-card p {
    position: relative;
    z-index: 1;
}

.vyre-feature-card__content {
    display: grid;
    gap: 10px;
}

.vyre-feature-card__content p {
    overflow-wrap: break-word;
}

.vyre-feature-card p:last-of-type {
    margin-bottom: 0;
}

.vyre-feature-card h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--fg);
    position: relative;
    z-index: 1;
}

.vyre-feature-card p {
    margin: 0;
    color: var(--nav-link-hover);
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.vyre-feature-card.is-shipped .vyre-feature-card__badge {
    background: linear-gradient(135deg, #25b169, #1f9f86);
}

.vyre-feature-card.is-partial .vyre-feature-card__badge {
    background: linear-gradient(135deg, #f6b432, #f4821f);
}

.vyre-feature-card.is-planned .vyre-feature-card__badge {
    background: linear-gradient(135deg, #9ca3af, #6b7280);
}

body.dark-mode .vyre-feature-showcase {
    background: linear-gradient(180deg, rgba(14, 18, 38, 0.78) 0%, rgba(8, 10, 22, 0.92) 100%);
}

body.dark-mode .vyre-feature-showcase__header p,
body.dark-mode .vyre-feature-showcase__group-heading p {
    color: rgba(244, 246, 255, 0.78);
}

body.dark-mode .vyre-feature-card {
    background: linear-gradient(135deg, rgba(20, 24, 52, 0.78), rgba(11, 14, 32, 0.78));
    border: 1px solid rgba(124, 143, 255, 0.2);
    box-shadow: 0 36px 90px rgba(0, 0, 0, 0.45);
}

body.dark-mode .vyre-feature-card::after {
    background: linear-gradient(135deg, rgba(92, 108, 178, 0.22), rgba(60, 76, 136, 0.22));
}

body.dark-mode .vyre-feature-card p {
    color: rgba(244, 246, 255, 0.78);
}

@media (max-width: 768px) {
    .vyre-feature-showcase__group-heading {
        max-width: 100%;
    }

    .vyre-feature-card {
        padding: clamp(22px, 6vw, 28px);
    }
}

.vyre-story-section-header,
.vyre-founder-section-header {
    max-width: 780px;
    margin: 0 auto clamp(36px, 6vw, 56px);
    text-align: center;
    display: grid;
    gap: 14px;
    justify-items: center;
}

.vyre-story-hero {
    padding-bottom: clamp(36px, 8vw, 64px);
}

.vyre-story-focus {
    padding: clamp(46px, 10vw, 92px) 0 clamp(60px, 12vw, 110px);
}

.vyre-story-focus__inner {
    max-width: min(92vw, 1180px);
    margin: 0 auto;
    padding: clamp(32px, 6vw, 52px);
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(21, 130, 247, 0.1), rgba(119, 58, 220, 0.08));
    box-shadow: 0 32px 80px rgba(12, 22, 48, 0.12);
    display: grid;
    gap: clamp(28px, 6vw, 42px);
}

.vyre-story-focus__header {
    display: grid;
    gap: 16px;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.vyre-story-focus__header h2 {
    margin: 0;
    font-size: clamp(2.1rem, 5vw, 2.9rem);
    color: var(--fg);
}

.vyre-story-focus__header p {
    margin: 0;
    color: var(--nav-link-hover);
    font-size: 1.05rem;
}

.vyre-story-focus__grid {
    display: grid;
    gap: clamp(18px, 4vw, 28px);
    justify-items: center;
}

.vyre-story-focus__grid h3 {
    margin: 0;
    font-size: clamp(1.3rem, 3.2vw, 1.7rem);
    color: var(--fg);
    text-align: center;
}

.vyre-story-focus__products {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: clamp(12px, 3vw, 20px);
    width: 100%;
}

.vyre-story-focus__products li {
    padding: 14px 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 40px rgba(12, 22, 48, 0.1);
    text-align: center;
    font-weight: 600;
    color: var(--nav-link-hover);
    font-size: 0.95rem;
}

.vyre-story-focus__product {
    display: grid;
    justify-items: center;
    gap: 12px;
}

.vyre-story-focus__product-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: rgba(21, 130, 247, 0.14);
    box-shadow: 0 12px 26px rgba(12, 22, 48, 0.12);
    overflow: hidden;
}

.vyre-story-focus__product-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}

.vyre-story-focus__product-label {
    font-weight: 600;
    color: inherit;
}

.vyre-story-focus__reasoning {
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    gap: 14px;
    text-align: center;
    font-size: 1.02rem;
    color: var(--nav-link-hover);
}

.vyre-story-focus__reasoning p {
    margin: 0;
}

.vyre-story-focus__quote {
    max-width: 620px;
    margin: 0 auto;
}

.vyre-story-focus__quote blockquote {
    margin: 0;
    padding: clamp(24px, 4.2vw, 32px);
    border-radius: 22px;
    background: rgba(21, 130, 247, 0.12);
    border: 1px solid rgba(21, 130, 247, 0.2);
    display: grid;
    justify-items: center;
    text-align: center;
    color: var(--nav-link-hover);
    font-style: italic;
    gap: 8px;
}

.vyre-story-focus__quote blockquote p {
    margin: 0;
}

body.dark-mode .vyre-story-focus__inner {
    background: linear-gradient(135deg, rgba(16, 20, 48, 0.92), rgba(56, 66, 118, 0.72));
    box-shadow: 0 38px 90px rgba(0, 0, 0, 0.54);
    border: 1px solid rgba(149, 168, 255, 0.26);
}

body.dark-mode .vyre-story-focus__header p,
body.dark-mode .vyre-story-focus__reasoning {
    color: rgba(244, 246, 255, 0.82);
}

body.dark-mode .vyre-story-focus__products li {
    background: rgba(15, 20, 42, 0.78);
    color: rgba(244, 246, 255, 0.9);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.48);
    border: 1px solid rgba(149, 168, 255, 0.24);
}

body.dark-mode .vyre-story-focus__product-icon {
    background: rgba(117, 140, 255, 0.2);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.44);
}

body.dark-mode .vyre-story-focus__quote blockquote {
    background: rgba(117, 140, 255, 0.16);
    border-color: rgba(149, 168, 255, 0.32);
    color: rgba(244, 246, 255, 0.86);
}

.vyre-story-timeline__items,
.vyre-founder-timeline__items {
    position: relative;
    display: grid;
    row-gap: clamp(36px, 8vw, 72px);
    justify-items: center;
    max-width: min(980px, 96vw);
    margin: 0 auto;
    padding: clamp(12px, 2vw, 18px) clamp(24px, 6vw, 48px);
}

.vyre-story-timeline__items::before,
.vyre-founder-timeline__items::before {
    content: '';
    position: absolute;
    top: clamp(18px, 3vw, 28px);
    bottom: clamp(18px, 3vw, 28px);
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    background: linear-gradient(180deg, var(--primary), var(--secondary));
    border-radius: 999px;
    opacity: 0.85;
    pointer-events: none;
}

.vyre-story-timeline__item,
.vyre-founder-timeline__item {
    position: relative;
    width: min(540px, 100%);
    background: #fff;
    border-radius: 20px;
    padding: clamp(28px, 4.2vw, 36px);
    box-shadow: 0 24px 60px rgba(12, 22, 48, 0.12);
    display: grid;
    gap: 14px;
}

.vyre-story-timeline__item::before,
.vyre-founder-timeline__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(21, 130, 247, 0.92), rgba(119, 58, 220, 0.82));
    box-shadow: 0 0 0 8px rgba(21, 130, 247, 0.15), 0 18px 32px rgba(8, 16, 40, 0.2);
    pointer-events: none;
    z-index: 1;
}

body.dark-mode .vyre-story-timeline__items::before,
body.dark-mode .vyre-founder-timeline__items::before {
    opacity: 0.65;
}

body.dark-mode .vyre-story-timeline__item,
body.dark-mode .vyre-founder-timeline__item {
    background: rgba(11, 15, 30, 0.85);
    border: 1px solid rgba(149, 168, 255, 0.26);
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.52);
}

body.dark-mode .vyre-story-timeline__item::before,
body.dark-mode .vyre-founder-timeline__item::before {
    background: linear-gradient(135deg, rgba(117, 140, 255, 0.95), rgba(74, 112, 255, 0.85));
    box-shadow: 0 0 0 8px rgba(117, 140, 255, 0.18), 0 22px 38px rgba(0, 0, 0, 0.48);
}

.vyre-story-timeline__summary {
    margin: 0;
    font-weight: 600;
    color: var(--fg);
    line-height: 1.6;
}

.vyre-story-timeline__description {
    margin: 0;
    color: var(--nav-link-hover);
    line-height: 1.7;
}

.vyre-story-timeline__list {
    margin: 0;
    padding-left: 20px;
    color: var(--nav-link-hover);
    display: grid;
    gap: 8px;
    line-height: 1.6;
}

.vyre-story-timeline__list li {
    margin: 0;
}

.vyre-story-timeline__item.is-achieved {
    border: 1px solid rgba(21, 130, 247, 0.24);
}

.vyre-story-timeline__item.is-achieved::before {
    background: linear-gradient(135deg, rgba(21, 130, 247, 0.96), rgba(119, 58, 220, 0.86));
    box-shadow: 0 0 0 8px rgba(21, 130, 247, 0.16), 0 22px 36px rgba(8, 16, 40, 0.2);
}

.vyre-story-timeline__item.is-current {
    border: 1px solid rgba(246, 180, 50, 0.45);
    box-shadow: 0 26px 64px rgba(244, 130, 31, 0.14);
}

.vyre-story-timeline__item.is-current::before {
    background: linear-gradient(135deg, #f6b432, #f4821f);
    box-shadow: 0 0 0 8px rgba(244, 130, 31, 0.18), 0 22px 38px rgba(244, 130, 31, 0.22);
}

.vyre-story-timeline__item.is-current .vyre-story-timeline__year {
    color: #f4821f;
}

.vyre-story-timeline__item.is-future {
    background: rgba(255, 255, 255, 0.94);
    border: 1px dashed rgba(107, 114, 128, 0.4);
    box-shadow: 0 18px 46px rgba(12, 22, 48, 0.08);
}

.vyre-story-timeline__item.is-future::before {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.9), rgba(107, 114, 128, 0.75));
    box-shadow: 0 0 0 6px rgba(156, 163, 175, 0.18), 0 18px 26px rgba(12, 22, 48, 0.2);
}

.vyre-story-timeline__item.is-future .vyre-story-timeline__year {
    color: rgba(107, 114, 128, 0.9);
}

body.dark-mode .vyre-story-timeline__summary {
    color: rgba(244, 246, 255, 0.9);
}

body.dark-mode .vyre-story-timeline__description,
body.dark-mode .vyre-story-timeline__list {
    color: rgba(244, 246, 255, 0.78);
}

body.dark-mode .vyre-story-timeline__item.is-achieved {
    border: 1px solid rgba(149, 168, 255, 0.28);
}

body.dark-mode .vyre-story-timeline__item.is-achieved::before {
    background: linear-gradient(135deg, rgba(117, 140, 255, 0.95), rgba(74, 112, 255, 0.85));
    box-shadow: 0 0 0 8px rgba(117, 140, 255, 0.2), 0 24px 38px rgba(0, 0, 0, 0.38);
}

body.dark-mode .vyre-story-timeline__item.is-current {
    border: 1px solid rgba(246, 180, 50, 0.55);
    box-shadow: 0 28px 72px rgba(244, 130, 31, 0.22);
}

body.dark-mode .vyre-story-timeline__item.is-current::before {
    background: linear-gradient(135deg, #f6b432, #f4821f);
    box-shadow: 0 0 0 8px rgba(246, 180, 50, 0.24), 0 24px 38px rgba(244, 130, 31, 0.34);
}

body.dark-mode .vyre-story-timeline__item.is-current .vyre-story-timeline__year {
    color: #f6b432;
}

body.dark-mode .vyre-story-timeline__item.is-future {
    background: rgba(14, 16, 36, 0.7);
    border: 1px dashed rgba(148, 163, 184, 0.32);
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.44);
}

body.dark-mode .vyre-story-timeline__item.is-future::before {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.78), rgba(129, 140, 169, 0.68));
    box-shadow: 0 0 0 6px rgba(148, 163, 184, 0.24), 0 18px 28px rgba(0, 0, 0, 0.4);
}

body.dark-mode .vyre-story-timeline__item.is-future .vyre-story-timeline__year {
    color: rgba(200, 208, 232, 0.78);
}

.vyre-story-timeline__year,
.vyre-founder-timeline__year {
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 700;
}

.vyre-story-vision__inner {
    display: grid;
    gap: clamp(24px, 6vw, 38px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    align-items: stretch;
}

.vyre-story-vision__quote {
    background: rgba(21, 130, 247, 0.08);
    border-radius: 20px;
    padding: clamp(28px, 4.5vw, 36px);
    border: 1px solid rgba(21, 130, 247, 0.14);
    display: grid;
    gap: 12px;
    align-content: center;
}

.vyre-story-vision__quote footer {
    font-weight: 700;
    color: var(--primary);
}

.vyre-story-cta__inner {
    background: linear-gradient(135deg, rgba(21, 130, 247, 0.12), rgba(119, 58, 220, 0.12));
    border-radius: 24px;
    padding: clamp(34px, 6vw, 48px);
    display: flex;
    flex-wrap: wrap;
    gap: clamp(16px, 4vw, 32px);
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 30px 70px rgba(12, 22, 48, 0.1);
}

.vyre-founder-story-cta {
    padding: clamp(60px, 12vw, 110px) 0;
}

.vyre-founder-story-cta__inner {
    max-width: min(94vw, 1080px);
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(244, 246, 255, 0.9), rgba(226, 232, 255, 0.82));
    border-radius: 28px;
    padding: clamp(32px, 6vw, 50px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(18px, 5vw, 36px);
    align-items: center;
    box-shadow: 0 36px 84px rgba(12, 22, 48, 0.12);
    border: 1px solid rgba(21, 130, 247, 0.18);
}

.vyre-founder-story-cta__content {
    display: grid;
    gap: clamp(14px, 3vw, 22px);
}

.vyre-founder-story-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border-radius: 999px;
    background: rgba(21, 130, 247, 0.16);
    color: var(--primary);
    letter-spacing: 0.18em;
    font-size: 0.74rem;
    text-transform: uppercase;
    font-weight: 700;
}

.vyre-founder-story-cta__content h2 {
    margin: 0;
    font-size: clamp(2rem, 4.6vw, 2.6rem);
    color: var(--fg);
}

.vyre-founder-story-cta__content p {
    margin: 0;
    color: rgba(8, 16, 40, 0.72);
    font-size: 1.05rem;
}

.vyre-founder-story-cta__content ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.vyre-founder-story-cta__content ul li {
    position: relative;
    padding-left: 26px;
    color: var(--nav-link-hover);
}

.vyre-founder-story-cta__content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}

body.dark-mode .vyre-founder-story-cta__inner {
    background: linear-gradient(135deg, rgba(14, 18, 44, 0.92), rgba(44, 58, 112, 0.78));
    border-color: rgba(149, 168, 255, 0.3);
    box-shadow: 0 38px 90px rgba(0, 0, 0, 0.55);
}

body.dark-mode .vyre-founder-story-cta__eyebrow {
    background: rgba(117, 140, 255, 0.28);
    color: #dce3ff;
}

body.dark-mode .vyre-founder-story-cta__content h2 {
    color: rgba(244, 246, 255, 0.92);
}

body.dark-mode .vyre-founder-story-cta__content p,
body.dark-mode .vyre-founder-story-cta__content ul li {
    color: rgba(244, 246, 255, 0.78);
}

body.dark-mode .vyre-founder-story-cta__content ul li::before {
    background: linear-gradient(135deg, rgba(117, 140, 255, 0.95), rgba(74, 112, 255, 0.85));
}

.vyre-story-cta__profile {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vyre-story-cta__avatar {
    width: clamp(96px, 18vw, 140px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(12, 22, 48, 0.22);
    border: 3px solid rgba(255, 255, 255, 0.8);
}

.vyre-story-cta__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vyre-founder-hero__copy {
    display: grid;
    gap: clamp(16px, 3vw, 24px);
    max-width: 720px;
}

.vyre-founder-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.vyre-founder-facts__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 4vw, 30px);
}

.vyre-founder-fact {
    background: #fff;
    border-radius: 18px;
    padding: clamp(24px, 4vw, 30px);
    box-shadow: 0 24px 58px rgba(12, 22, 48, 0.12);
    text-align: center;
}

.vyre-founder-certifications__list {
    list-style: none;
    margin: 0 0 clamp(22px, 4vw, 32px);
    padding: 0;
    display: grid;
    gap: 12px;
}

.vyre-founder-certifications__list li {
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(21, 130, 247, 0.06);
    border: 1px solid rgba(21, 130, 247, 0.12);
}

.vyre-founder-skills {
    margin: clamp(26px, 5vw, 38px) 0;
    display: grid;
    gap: 14px;
}

.vyre-founder-skills h3 {
    margin: 0;
    font-size: clamp(1.1rem, 2.4vw, 1.45rem);
    color: var(--fg);
}

.vyre-founder-skills ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.vyre-founder-skills li {
    position: relative;
    padding-left: 26px;
    color: var(--nav-link-hover);
}

.vyre-founder-skills li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.vyre-founder-values__inner {
    display: grid;
    gap: clamp(24px, 6vw, 40px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.vyre-founder-values__column ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.vyre-founder-values__column ul li {
    position: relative;
    padding-left: 26px;
    color: var(--nav-link-hover);
}

.vyre-founder-values__column ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.vyre-founder-personal__inner {
    display: grid;
    gap: 16px;
    max-width: 780px;
    text-align: center;
}

@media (max-width: 1024px) {
    .vyre-story-challenges__inner,
    .vyre-story-vision__inner,
    .vyre-founder-values__inner {
        grid-template-columns: 1fr;
    }

    .vyre-story-challenges__list,
    .vyre-founder-facts__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vyre-story-focus__inner {
        padding: clamp(28px, 8vw, 44px);
    }

    .vyre-story-focus__products {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .vyre-founder-story-cta__inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .vyre-founder-story-cta__content {
        justify-items: center;
    }
}

@media (max-width: 640px) {
    .vyre-story-challenges__list,
    .vyre-founder-facts__inner {
        grid-template-columns: 1fr;
    }

    .vyre-story-cta__inner,
    .vyre-founder-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .vyre-story-focus__products {
        grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    }

    .vyre-founder-story-cta__inner {
        padding: clamp(28px, 10vw, 40px);
    }
}

/* Design tokens */
:root {
    /* color tokens */
    --bg: #ffffff;
    --fg: #081338;
    --muted: #f5f7ff;
    --muted-fg: rgba(8, 16, 40, 0.68);
    --primary: #1582F7;
    --primary-contrast: #ffffff;
    --secondary: #773ADC;
    --border: rgba(8, 16, 40, 0.14);
    --ring: #1582F7;
    --nav-link: #1f2c4f;
    --nav-link-hover: #0f1c48;
    --nav-link-muted: rgba(31, 44, 79, 0.65);
    --nav-link-bg: rgba(31, 44, 79, 0.06);
    --nav-link-bg-hover: rgba(21, 130, 247, 0.14);

    /* radii */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;

    /* shadows */
    --shadow-sm: 0 1px 2px rgba(12, 22, 48, 0.06);
    --shadow-md: 0 6px 18px rgba(12, 22, 48, 0.12);
    --shadow-lg: 0 18px 44px rgba(12, 22, 48, 0.16);
}

body.dark-mode {
    --bg: #101326;
    --fg: #f4f6ff;
    --muted: #1b2138;
    --muted-fg: rgba(255, 255, 255, 0.7);
    --primary: #758cff; /* slightly softer in dark */
    --primary-contrast: #0b0f24;
    --secondary: #9b7cf0;
    --border: rgba(255, 255, 255, 0.16);
    --ring: #8fa0ff;
    --nav-link: #dce3ff;
    --nav-link-hover: #ffffff;
    --nav-link-muted: rgba(220, 227, 255, 0.72);
    --nav-link-bg: rgba(124, 143, 255, 0.18);
    --nav-link-bg-hover: rgba(124, 143, 255, 0.32);
}

body {
    font-family: 'Nunito Sans', 'Inter', 'Segoe UI', Tahoma, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: linear-gradient(180deg, #f7f8ff 0%, #eef2ff 45%, #f9fbff 100%);
    color: #333;
}

body.dark-mode {
    background: linear-gradient(180deg, #090a19 0%, #0f1427 50%, #0b0c1b 100%);
    color: #fff;
}

body.dark-mode #site-header,
body.dark-mode .site-header {
    background: #101326;
    color: #fff;
}
body.dark-mode article {
    background: rgba(18, 20, 36, 0.88);
    color: #fff;
    border-color: rgba(76, 82, 118, 0.42);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

body.dark-mode .nav-container {
    background: #101326;
    border-bottom: none;
    box-shadow: none;
}


/* --- Container --- */
.container {
    max-width: min(92vw, 1280px);
    margin: 0 auto;
    padding: 0 24px;
}

.site-content {
    position: relative;
    padding: 0 0 120px;
    z-index: 0;
}

.site-content::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(21, 130, 247, 0.08) 0%, rgba(119, 58, 220, 0.06) 35%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 0;
}

body.dark-mode .site-content::before {
    background: linear-gradient(180deg, rgba(76, 139, 255, 0.12) 0%, rgba(25, 27, 48, 0.85) 55%, rgba(8, 9, 20, 0.9) 100%);
}

.site-content > * {
    position: relative;
    z-index: 1;
}

/* --- Header --- */
#site-header,
.site-header {
    background: #ffffff;
    padding: 16px 0 8px;
    position: relative;
    z-index: 1200;
}

.nav-container {
    max-width: 1240px;
    width: min(92vw, 1240px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px clamp(28px, 5vw, 48px);
    background: var(--bg);
    border-radius: 0;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    position: relative;
    box-sizing: border-box;
}


.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.site-logo {
    height: 32px;
    width: auto;
    display: block;
}

/* Buttons / CTAs */
.btn {
    --_bg: var(--bg);
    --_fg: var(--fg);
    --_bd: var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--_bd);
    background: var(--_bg);
    color: var(--_fg);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.btn:hover, .btn:focus-visible { box-shadow: var(--shadow-md); }
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.btn--primary {
    --_bg: var(--primary);
    --_fg: var(--primary-contrast);
    --_bd: transparent;
}
.btn--primary:hover { filter: brightness(1.05); }

.btn--outline {
    --_bg: transparent;
    --_fg: var(--fg);
    --_bd: var(--border);
}
.btn--outline:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }

.btn--ghost {
    --_bg: transparent;
    --_fg: var(--fg);
    --_bd: transparent;
}
.btn--ghost:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }

.btn--lg { padding: 12px 18px; border-radius: var(--radius); }
.btn--sm { padding: 8px 12px; border-radius: var(--radius-xs); font-size: 0.95rem; }

.site-nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.site-nav__inner {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0;
}

.site-nav__header,
.site-nav__footer {
    display: none;
}

.site-nav__title {
    font-size: 0.8rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--nav-link-muted);
    font-weight: 600;
}

.nav-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(190, 202, 255, 0.55);
    background: rgba(226, 233, 255, 0.85);
    box-shadow: 0 12px 28px rgba(15, 35, 70, 0.22);
    cursor: pointer;
    transition: background 0.25s ease, box-shadow 0.25s ease;
    position: relative;
}

.nav-close:focus-visible,
.nav-close:hover {
    background: rgba(226, 233, 255, 1);
    box-shadow: 0 18px 40px rgba(15, 35, 70, 0.28);
}

.nav-close__bar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background: #101a38;
    border-radius: 999px;
    transform-origin: center;
}

.nav-close__bar:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.nav-close__bar:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.site-nav__footer {
    flex-direction: column;
    gap: 12px;
}

.site-nav__footer-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0;
    border-radius: 14px;
    text-decoration: none;
    gap: 8px;
    transition: transform 0.25s ease;
}

.site-nav__footer-link:hover,
.site-nav__footer-link:focus-visible {
    transform: translateY(-2px);
}

.site-nav__footer-link--outline {
    background: transparent;
    color: inherit;
}

.nav-toggle {
    display: none;
    align-items: stretch;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 12px;
    border-radius: 0;
    border: 1px solid rgba(8, 16, 40, 0.12);
    background: #ffffff;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.25s ease, box-shadow 0.25s ease;
    margin-left: auto;
    position: relative;
    z-index: 110;
}

.nav-toggle:focus-visible,
.nav-toggle:hover {
    background: #f4f6ff;
    box-shadow: inset 0 0 0 1px rgba(8, 16, 40, 0.12);
}

.nav-toggle__bar {
    display: block;
    width: 100%;
    height: 2px;
    background: #081338;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

body.dark-mode .nav-toggle {
    border-color: rgba(255, 255, 255, 0.14);
    background: #1b2138;
    box-shadow: none;
}

body.dark-mode .nav-toggle:focus-visible,
body.dark-mode .nav-toggle:hover {
    background: #222a43;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

body.dark-mode .nav-toggle__bar {
    background: #d6dbff;
}

body.dark-mode .site-nav__title {
    color: var(--nav-link-muted);
}

body.dark-mode .nav-close {
    border-color: rgba(76, 82, 118, 0.6);
    background: rgba(26, 29, 48, 0.82);
    box-shadow: 0 20px 42px rgba(4, 6, 18, 0.65);
}

body.dark-mode .nav-close:focus-visible,
body.dark-mode .nav-close:hover {
    background: rgba(26, 29, 48, 0.95);
    box-shadow: 0 24px 52px rgba(4, 6, 18, 0.78);
}

body.dark-mode .nav-close__bar {
    background: #d6dbff;
}

body.dark-mode .site-nav__footer-link--outline {
    color: inherit;
    background: transparent;
}

body.dark-mode .site-nav__footer-link--outline:hover,
body.dark-mode .site-nav__footer-link--outline:focus-visible {
    background: rgba(255, 255, 255, 0.12);
}

.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1100;
}

body.dark-mode .nav-overlay {
    background: rgba(8, 12, 28, 0.2);
}

body.mobile-nav-open {
    overflow: hidden;
}

body.mobile-nav-open .nav-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .site-nav,
    body.mobile-nav-open .site-nav,
    .nav-overlay,
    body.mobile-nav-open .nav-overlay {
        transition: none !important;
    }

    .site-nav .primary-menu > li,
    .primary-menu .sub-menu,
    .mega-panel,
    .nav-toggle__bar {
        transition: none !important;
    }
}

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

body.mobile-nav-open .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

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

.primary-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 34px);
}

.primary-menu > li {
    position: relative;
}

.primary-menu li {
    display: flex;
    align-items: center;
}

.primary-menu > li.menu-item--mega {
    position: static;
}

.menu-item--mega .mega-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 1080px);
    background: #ffffff;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(8, 16, 40, 0.12);
    box-shadow: 0 32px 58px rgba(12, 22, 48, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.26s ease, visibility 0.26s ease;
    z-index: 80;
    padding-top: 0;
}

.menu-item--mega .mega-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
}

.menu-item--mega:hover .mega-panel,
.menu-item--mega:focus-within .mega-panel,
.menu-item--mega.is-open .mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mega-panel__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 4vw, 34px);
    padding: clamp(28px, 5vw, 42px);
    background: inherit;
    transition: none;
}

.mega-panel__heading {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nav-link-muted);
    margin: 0 0 12px;
}

.mega-panel__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mega-panel__item {
    list-style: none;
}

.mega-panel__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 4px;
    border-radius: 12px;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--nav-link);
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s ease, color 0.2s ease;
}

.mega-panel__link::after {
    content: "→";
    font-size: 0.9rem;
    opacity: 0.5;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.mega-panel__link:hover,
.mega-panel__link:focus-visible {
    background: transparent;
    color: var(--nav-link-hover);
    transform: translateX(4px);
}

.mega-panel__link:hover::after,
.mega-panel__link:focus-visible::after {
    opacity: 0.7;
    transform: translateX(6px);
}

.mega-panel__item.current-menu-item .mega-panel__link,
.mega-panel__item.current_page_item .mega-panel__link {
    background: transparent;
    box-shadow: none;
    color: var(--nav-link-hover);
}

.primary-menu li a {
    color: var(--nav-link);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 12px 0;
    border-radius: 0;
    background: transparent;
    transition: color 0.2s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.primary-menu li a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    opacity: 0;
    transform: scaleX(0.4);
    transform-origin: center;
    transition: transform 0.25s ease, opacity 0.25s ease;
    pointer-events: none;
}

.primary-menu li:not(.menu-item-highlight) > a:hover,
.primary-menu li:not(.menu-item-highlight) > a:focus-visible,
.primary-menu li:not(.menu-item-highlight).current-menu-item > a {
    color: var(--nav-link-hover);
}

.primary-menu li:not(.menu-item-highlight) > a:hover::after,
.primary-menu li:not(.menu-item-highlight) > a:focus-visible::after,
.primary-menu li:not(.menu-item-highlight).current-menu-item > a::after {
    transform: scaleX(1);
    opacity: 1;
}

.primary-menu > li.menu-item--mega:focus-within > a.menu-link--has-panel,
.primary-menu > li.menu-item--mega.is-open > a.menu-link--has-panel {
    color: var(--nav-link-hover);
}

.primary-menu > li.menu-item--mega:focus-within > a.menu-link--has-panel::after,
.primary-menu > li.menu-item--mega.is-open > a.menu-link--has-panel::after {
    transform: scaleX(1);
    opacity: 1;
}

.primary-menu .menu-item-highlight > a {
    background: linear-gradient(135deg, #ff8a4f, #ff3f81);
    color: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 32px rgba(255, 63, 129, 0.28);
    padding: 12px 22px;
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.primary-menu .menu-item-highlight > a:hover,
.primary-menu .menu-item-highlight > a:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 20px 36px rgba(255, 63, 129, 0.32);
    color: #fff;
}

.primary-menu .menu-item-highlight > a::after {
    display: none;
}

.primary-menu .menu-item-highlight.current-menu-item > a {
    background: linear-gradient(135deg, #ff8a4f, #ff3f81);
    color: #fff;
}

body.dark-mode .primary-menu li a {
    color: var(--nav-link);
}

body.dark-mode .primary-menu li a::after {
    background: linear-gradient(90deg, rgba(98, 149, 255, 0.9), rgba(164, 118, 255, 0.9));
    box-shadow: none;
}

body.dark-mode .menu-item--mega .mega-panel {
    background: rgba(17, 20, 37, 0.96);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 32px 58px rgba(0, 0, 0, 0.6);
}

body.dark-mode .mega-panel__heading {
    color: var(--nav-link-muted);
}

body.dark-mode .mega-panel__link {
    background: transparent;
    box-shadow: none;
    color: rgba(232, 236, 255, 0.86);
}

body.dark-mode .mega-panel__link::after {
    opacity: 0.5;
}

body.dark-mode .mega-panel__link:hover,
body.dark-mode .mega-panel__link:focus-visible,
body.dark-mode .mega-panel__item.current-menu-item .mega-panel__link,
body.dark-mode .mega-panel__item.current_page_item .mega-panel__link {
    background: transparent;
    box-shadow: none;
    color: var(--nav-link-hover);
}

body.dark-mode .primary-menu li:not(.menu-item-highlight) > a:hover,
body.dark-mode .primary-menu li:not(.menu-item-highlight) > a:focus-visible,
body.dark-mode .primary-menu li:not(.menu-item-highlight).current-menu-item > a {
    color: var(--nav-link-hover);
}

body.dark-mode .primary-menu > li.menu-item--mega:focus-within > a.menu-link--has-panel {
    color: var(--nav-link-hover);
}

body.dark-mode .primary-menu .menu-item-highlight > a {
    background: linear-gradient(135deg, #ff8a4f, #ff3f81);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 42px rgba(255, 63, 129, 0.34);
}

body.dark-mode .primary-menu .menu-item-highlight > a:hover,
body.dark-mode .primary-menu .menu-item-highlight > a:focus-visible {
    box-shadow: 0 28px 56px rgba(255, 63, 129, 0.4);
}

body.dark-mode .primary-menu .menu-item-highlight.current-menu-item > a {
    background: linear-gradient(135deg, #ff8a4f, #ff3f81);
}

/* --- Hero --- */
.vyre-hero {
    padding: 140px 0 120px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 20% 20%, rgba(21,130,247,0.18), transparent 50%),
                radial-gradient(circle at 80% 10%, rgba(119,58,220,0.18), transparent 55%),
                #f7f8ff;
}

.vyre-hero__inner {
    max-width: min(92vw, 1280px);
    margin: 0 auto;
    padding: 0 clamp(26px, 4vw, 42px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.vyre-hero__content {
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.vyre-hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.82rem;
    font-weight: 600;
    color: #2b3c6d;
}

.vyre-hero h1 {
    font-size: clamp(2.8rem, 5vw, 3.8rem);
    line-height: 1.08;
    margin: 0;
    color: #0d1840;
}

.vyre-hero__description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #364266;
    margin: 0;
}

.vyre-hero__actions {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.vyre-hero__tertiary {
    margin: 8px 0 0;
    color: #25345f;
}
.vyre-hero__tertiary a {
    color: #1b3a8f;
    text-decoration: underline;
    font-weight: 700;
}

/* Dark mode contrast for tertiary link under hero */
body.dark-mode .vyre-hero__tertiary { color: #c4c9f5; }
body.dark-mode .vyre-hero__tertiary a {
    color: #9db4ff;
    text-decoration: underline;
}
body.dark-mode .vyre-hero__tertiary a:hover,
body.dark-mode .vyre-hero__tertiary a:focus-visible {
    color: #bcd0ff;
}

.vyre-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 14px 28px;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.vyre-button--primary {
    background: linear-gradient(135deg, #1582F7, #773ADC);
    color: #fff;
    box-shadow: 0 16px 34px rgba(21, 130, 247, 0.25);
}

.vyre-button--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 42px rgba(21, 130, 247, 0.28);
}

.vyre-button--ghost {
    background: rgba(13, 24, 64, 0.08);
    color: #11204f;
    border: 1px solid rgba(13, 24, 64, 0.12);
}

.vyre-button--ghost:hover {
    background: rgba(13, 24, 64, 0.18);
}

/* Buttons with leading icon */
.vyre-button .icon {
    display: inline-block;
    height: 1.15em;
    width: auto;
    margin-right: 10px;
    vertical-align: -0.15em;
}

.vyre-hero__visual {
    position: relative;
    flex: 1;
    min-height: 280px;
}

.vyre-hero__orb {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(144,164,255,0.3) 60%, rgba(119,58,220,0.12) 100%);
    filter: blur(0px);
}

.vyre-hero__glow {
    position: absolute;
    top: 18%;
    left: 20%;
    width: 65%;
    height: 65%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(21,130,247,0.35) 0%, transparent 70%);
    filter: blur(8px);
}

/* --- Hero Dark Mode --- */
body.dark-mode .vyre-hero {
    background: radial-gradient(circle at 20% 20%, rgba(76,139,255,0.12), transparent 50%),
                radial-gradient(circle at 80% 10%, rgba(151,97,255,0.12), transparent 55%),
                #111321;
}

body.dark-mode .vyre-hero__eyebrow {
    color: #8da4ff;
}

body.dark-mode .vyre-hero h1 {
    color: #f6f7ff;
}

body.dark-mode .vyre-hero__description {
    color: #c4c9f5;
}

body.dark-mode .vyre-button--ghost {
    background: rgba(255,255,255,0.06);
    color: #f4f6ff;
    border: 1px solid rgba(255,255,255,0.12);
}

body.dark-mode .vyre-button--ghost:hover {
    background: rgba(255,255,255,0.12);
}

body.dark-mode .vyre-hero__orb {
    background: radial-gradient(circle, rgba(48,58,110,0.8) 0%, rgba(60,70,140,0.35) 60%, rgba(38,28,80,0.2) 100%);
}

body.dark-mode .vyre-hero__glow {
    background: radial-gradient(circle, rgba(102,122,255,0.55) 0%, transparent 70%);
}

/* --- Story Banner --- */
.vyre-story-banner {
    padding: clamp(34px, 5vw, 60px) 0;
}

.vyre-story-banner__inner {
    max-width: min(92vw, 1120px);
    margin: 0 auto;
    padding: clamp(30px, 5vw, 48px);
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(27, 58, 143, 0.08), rgba(119, 58, 220, 0.08)), #ffffff;
    border: 1px solid rgba(12, 32, 91, 0.12);
    box-shadow: 0 24px 60px rgba(13, 24, 64, 0.14);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(28px, 6vw, 60px);
}

.vyre-story-banner__copy {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vyre-story-banner__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 600;
    font-size: 0.78rem;
    color: #1f2f63;
}

.vyre-story-banner__copy h2 {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.3rem);
    color: #0d1840;
}

.vyre-story-banner__copy p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #2f3c63;
}

.vyre-story-banner__support {
    margin-top: 12px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4b5985;
}

.vyre-story-banner__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex: 0 0 auto;
    width: auto;
}

.vyre-story-banner__actions .vyre-button {
    justify-content: center;
    width: auto;
    min-width: 0;
}

body.dark-mode .vyre-story-banner__inner {
    background: linear-gradient(135deg, rgba(41, 58, 143, 0.28), rgba(119, 58, 220, 0.22)), rgba(8, 10, 24, 0.86);
    border: 1px solid rgba(132, 154, 255, 0.24);
    box-shadow: 0 36px 72px rgba(0, 0, 0, 0.42);
}

body.dark-mode .vyre-story-banner__eyebrow {
    color: rgba(189, 204, 255, 0.78);
}

body.dark-mode .vyre-story-banner__copy h2 {
    color: #f4f6ff;
}

body.dark-mode .vyre-story-banner__copy p {
    color: rgba(220, 225, 255, 0.82);
}

body.dark-mode .vyre-story-banner__support {
    color: rgba(205, 214, 255, 0.78);
}

@media (max-width: 900px) {
    .vyre-story-banner__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: clamp(22px, 8vw, 34px);
    }

    .vyre-story-banner__copy {
        align-items: center;
    }

    .vyre-story-banner__actions {
        width: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 14px;
    }

    .vyre-story-banner__actions .vyre-button {
        flex: 0 1 auto;
        width: auto;
    }
}

@media (max-width: 600px) {
    .vyre-story-banner {
        padding: clamp(26px, 7vw, 42px) 0;
    }

    .vyre-story-banner__inner {
        padding: clamp(24px, 8vw, 36px);
        gap: clamp(20px, 7vw, 32px);
    }

    .vyre-story-banner__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 12px;
    }

    .vyre-story-banner__actions .vyre-button {
        width: min(100%, 320px);
        margin: 0 auto;
    }

    .vyre-story-banner__copy {
        align-items: stretch;
        text-align: left;
    }
}

body.dark-mode #site-footer {
    background: linear-gradient(180deg, rgba(6, 8, 22, 0.95) 0%, rgba(4, 6, 18, 0.98) 100%);
    color: #e7ebff;
}

body.dark-mode #site-footer::before {
    background: radial-gradient(circle at 18% -12%, rgba(76, 139, 255, 0.35), transparent 60%),
                radial-gradient(circle at 84% -6%, rgba(151, 97, 255, 0.32), transparent 65%);
}

/* xl breakpoint (≤1200px) */
@media (max-width: 1200px) {
    .nav-container {
        padding: 16px clamp(24px, 4vw, 40px);
    }

    .primary-menu {
        gap: clamp(18px, 2.8vw, 30px);
    }

    .menu-item--mega .mega-panel {
        width: min(94vw, 1024px);
    }

    .vyre-hero__inner {
        gap: clamp(36px, 5vw, 52px);
    }
}

/* lg breakpoint (≤992px) */
@media (max-width: 992px) {
    .vyre-hero {
        padding: 120px 0 80px;
    }

    .vyre-hero__inner {
        flex-direction: column;
        padding: 0 clamp(24px, 6vw, 48px);
        text-align: center;
    }

    .vyre-hero__content {
        align-items: center;
    }

    .vyre-hero__actions {
        justify-content: center;
    }
    .vyre-hero__tertiary { text-align: center; }

    .nav-container {
        gap: 18px;
        padding: 16px clamp(22px, 5vw, 36px);
    }

    .primary-menu {
        gap: clamp(14px, 3vw, 24px);
    }

    .primary-menu li a {
        font-size: 0.9rem;
        letter-spacing: 0.05em;
    }

    .menu-item--mega .mega-panel {
        width: min(94vw, 920px);
    }

    .mega-panel__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(18px, 5vw, 28px);
    }
}

/* mobile & tablet breakpoint (≤992px) */
@media (max-width: 992px) {
    html, body { overflow-x: hidden; }
    .nav-container {
        gap: 18px;
        padding: 18px clamp(20px, 6vw, 30px);
        align-items: center;
    }

    .nav-brand {
        flex: 0 0 auto;
    }

    .site-nav {
        flex: none;
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        height: 100dvh;
        width: min(84vw, 400px);
        padding: 20px 16px 24px 16px;
        background: #ffffff;
        border-radius: 0;
        border-left: 1px solid rgba(8, 16, 40, 0.12);
        box-shadow: -24px 0 48px rgba(12, 22, 48, 0.18);
        transform: translateX(100%);
        color: var(--nav-link);
        transition: transform 0.32s ease, box-shadow 0.32s ease;
        display: block;
        overflow-y: auto;
        overflow-x: hidden;
        pointer-events: none; /* ensure it doesn't block header when closed */
        z-index: 1002; /* ensure above page content */
        box-sizing: border-box;
    }
    .site-nav__inner,
    .primary-menu {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    .primary-menu > li,
    .primary-menu .sub-menu,
    .menu-item--mega .mega-panel,
    .mega-panel__inner {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        padding: clamp(60px, 12vw, 110px) 0;
    }


    body.dark-mode .site-nav {
        background: #101326;
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: -24px 0 48px rgba(0, 0, 0, 0.6);
        color: var(--nav-link);
    }

    body.mobile-nav-open .site-nav {
        transform: translateX(0);
        pointer-events: auto; /* clickable only when open */
    }

    .nav-toggle {
        display: inline-flex;
        order: 2;
        margin-left: auto;
    }

    /* Show only one close control: hide header toggle while menu is open */
    body.mobile-nav-open .gooey-menu { opacity: 0; pointer-events: none; }

    .site-nav__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        width: 100%;
    }

    .site-nav__header,
    .site-nav__footer {
        display: flex;
    }

    .site-nav__header {
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .nav-close {
        display: inline-flex;
    }

    .site-nav__footer {
        margin-top: 0;
        order: -1;
        gap: 10px;
        padding-bottom: 6px;
        border: none;
        display: grid;
        grid-template-columns: 1fr;
    }

    body.dark-mode .site-nav__footer {
        border: none;
    }

    .site-nav__footer-link {
        width: 100%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding: 10px 14px;
        border: none;
        background: rgba(21, 130, 247, 0.12);
        color: inherit;
        border-radius: 8px;
        font-weight: 600;
        text-decoration: none;
        transition: background 0.18s ease, color 0.18s ease;
    }

    .site-nav__footer-link:hover,
    .site-nav__footer-link:focus-visible {
        background: rgba(21, 130, 247, 0.22);
    }

    body.dark-mode .site-nav__footer-link {
        background: rgba(117, 140, 255, 0.16);
    }

    body.dark-mode .site-nav__footer-link:hover,
    body.dark-mode .site-nav__footer-link:focus-visible {
        background: rgba(117, 140, 255, 0.26);
    }

    .primary-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        width: 100%;
        margin: 0;
    }

    /* Ensure links are fully interactive */
    .primary-menu a,
    .mega-panel__link {
        pointer-events: auto;
        position: relative;
        z-index: 1;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .primary-menu li {
        display: block;
        width: 100%;
    }

    .primary-menu > li {
        border: 1px solid rgba(8, 16, 40, 0.1);
        background: rgba(255, 255, 255, 0.88);
        border-radius: 4px;
        overflow: hidden;
    }

    .primary-menu li a {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 12px;
        background: var(--nav-link-bg);
        border: none;
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--nav-link);
        letter-spacing: 0.03em;
        text-align: left;
        line-height: 1.25;
        position: relative;
        z-index: 1;
        box-shadow: none;
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        text-transform: none;
        border-radius: inherit;
    }
    
    .primary-menu .sub-menu {
        list-style: none;
        margin: 4px 0 10px;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        background: transparent;
        border: none;
        border-radius: 0;
    }
    /* Nudge second-level dropdown to the right inside the drawer */
    .site-nav .primary-menu .sub-menu { width: 100%; margin-left: 0; align-self: stretch; }
    
    .primary-menu .sub-menu li {
        background: transparent;
        border: none;
    }
    
    .primary-menu .sub-menu a {
        padding: 8px 14px;
        font-size: 0.82rem;
        letter-spacing: 0;
        color: var(--nav-link);
        text-align: left;
        border-radius: 4px;
        text-transform: none;
    }
    
    .primary-menu .sub-menu a:hover,
    .primary-menu .sub-menu a:focus-visible {
        background: var(--nav-link-bg-hover);
        color: var(--nav-link-hover);
        border: none;
    }

    .primary-menu li a:hover,
    .primary-menu li a:focus-visible {
        background: var(--nav-link-bg-hover);
        color: var(--nav-link-hover);
    }

    body.dark-mode .primary-menu > li {
        background: rgba(27, 33, 56, 0.92);
        border-color: rgba(255, 255, 255, 0.14);
    }

    body.dark-mode .primary-menu li a {
        color: var(--nav-link);
        background: var(--nav-link-bg);
    }

    body.dark-mode .primary-menu li a:hover,
    body.dark-mode .primary-menu li a:focus-visible {
        background: var(--nav-link-bg-hover);
        color: var(--nav-link-hover);
    }

    body.dark-mode .primary-menu .sub-menu {
        background: transparent;
        border: none;
    }
    
    body.dark-mode .primary-menu .sub-menu a {
        color: var(--nav-link);
    }
    
    body.dark-mode .primary-menu .sub-menu a:hover,
    body.dark-mode .primary-menu .sub-menu a:focus-visible {
        background: var(--nav-link-bg-hover);
        color: var(--nav-link-hover);
    }

    .primary-menu li a::after {
        display: none;
    }

    .primary-menu li.menu-item-highlight > a {
        justify-content: center;
    }

    .menu-item--mega .mega-panel {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        width: calc(100% - 32px);
        max-width: 260px;
        margin: 6px 0 0 auto;
        background: rgba(248, 249, 255, 0.92);
        border: 1px solid rgba(8, 16, 40, 0.08);
        border-radius: 10px;
        box-shadow: none;
        padding: 12px;
        transition: none;
    }

    body.dark-mode .menu-item--mega .mega-panel {
        background: rgba(27, 33, 56, 0.94);
        border: 1px solid rgba(255, 255, 255, 0.12);
        transition: none;
    }

    .mega-panel__inner {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 0;
        background: transparent;
        justify-items: stretch;
        transition: none;
    }
    .mega-panel__list { align-items: stretch; }

    .mega-panel__heading {
        letter-spacing: 0;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--nav-link-muted);
        margin: 6px 0 4px;
        text-align: left;
        text-transform: none;
    }

    body.dark-mode .mega-panel__heading {
        color: var(--nav-link-muted);
    }

    .mega-panel__link {
        display: block;
        padding: 10px 14px;
        background: rgba(21, 130, 247, 0.08);
        color: var(--nav-link);
        border-radius: 14px;
        box-shadow: 0 0 0 1px rgba(21, 130, 247, 0.12);
        transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
        text-align: left;
        font-size: 0.82rem;
        text-transform: none;
        transform: none;
    }

    .mega-panel__link:hover,
    .mega-panel__link:focus-visible {
        background: rgba(21, 130, 247, 0.2);
        box-shadow: 0 0 0 1px rgba(21, 130, 247, 0.32);
        color: var(--nav-link-hover);
        outline: 0;
        transform: none;
    }

    body.dark-mode .mega-panel__link {
        background: rgba(117, 140, 255, 0.2);
        box-shadow: 0 0 0 1px rgba(149, 168, 255, 0.28);
        color: rgba(232, 236, 255, 0.88);
    }

    body.dark-mode .mega-panel__link:hover,
    body.dark-mode .mega-panel__link:focus-visible {
        background: rgba(149, 168, 255, 0.36);
        box-shadow: 0 0 0 1px rgba(149, 168, 255, 0.46);
        color: #f4f6ff;
        transform: none;
    }

    /* Gooey mobile toggle - placed in header (original spot) */
    .gooey-menu {
        position: relative;
        right: auto;
        bottom: auto;
        width: auto;
        height: auto;
        display: inline-flex;
        align-items: center;
        margin-left: auto; /* push to right within header */
        order: 2;
        filter: none; /* no goo filter in header */
        z-index: 110;
        pointer-events: auto;
    }

    .gooey-menu .nav-toggle {
        position: static;
        width: 44px;
        height: 44px;
        padding: 12px;
        border-radius: 8px;
        border: 1px solid rgba(8, 16, 40, 0.12);
        background: #ffffff;
        box-shadow: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .gooey-menu .nav-toggle__bar {
        width: 100%;
        height: 2px;
        background: #081338; /* match header */
        border-radius: 2px;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    /* Use default header hamburger layout (no special goo transforms) */
    .gooey-menu .nav-toggle__bar:nth-child(1) { transform: none; }
    .gooey-menu .nav-toggle__bar:nth-child(2) { opacity: 1; }
    .gooey-menu .nav-toggle__bar:nth-child(3) { transform: none; }

    /* When open, rely on global .nav-toggle__bar transforms, keep button style */

    .gooey-menu .goo-dot { display: none !important; }

    body.mobile-nav-open .gooey-menu .goo-dot--1 {
        transform: translate(-36px, -4px) scale(1);
    }
    body.mobile-nav-open .gooey-menu .goo-dot--2 {
        transform: translate(-26px, -32px) scale(1);
    }

    /* Dark mode variants */
    body.dark-mode .gooey-menu .nav-toggle {
        background: #1b2138;
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow: none;
    }
    body.dark-mode .gooey-menu .nav-toggle__bar { background: #d6dbff; }
}
/* --- Top Thin Bar --- */
#top-bar {
    margin: 0;
    border-radius: 0;
    width: 100%;
    background: linear-gradient(to right, #1582F7, #773ADC);
    color: #fff;
    font-size: 14px;
    padding: 6px 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 18px;
}

#top-bar a {
    color: #fff;
    text-decoration: none;
}

/* Apple-style toggle switch */
.theme-toggle-wrapper {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    margin-left: 4px;
    margin-right: 2px;
}

#theme-toggle {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.2);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 26px;
    transition: 0.3s ease;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border-radius: 50%;
    transition: 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#theme-toggle:checked + .toggle-slider {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.9);
}

#theme-toggle:checked + .toggle-slider:before {
    transform: translateX(24px) translateY(-50%);
    background: #1582F7;
}

.toggle-slider:hover {
    border-color: rgba(255, 255, 255, 0.9);
}

/* Dark mode toggle styles */
body.dark-mode .toggle-slider {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

body.dark-mode .toggle-slider:before {
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
}

body.dark-mode #theme-toggle:checked + .toggle-slider {
    background: rgba(117, 58, 220, 0.8) !important;
    border-color: #773ADC !important;
}

body.dark-mode #theme-toggle:checked + .toggle-slider:before {
    background: white !important;
    border: none !important;
}

/* --- Main Content --- */
#site-content {
    margin-top: 0;
}

/* --- Footer --- */
#site-footer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(17, 24, 47, 0.92) 0%, rgba(12, 16, 34, 0.96) 100%);
    color: #f5f7ff;
    text-align: center;
    padding: 72px 0 48px;
    margin-top: 140px;
}

#site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% -10%, rgba(21, 130, 247, 0.35), transparent 55%),
                radial-gradient(circle at 82% 0%, rgba(119, 58, 220, 0.32), transparent 60%);
    opacity: 0.5;
    pointer-events: none;
}

#site-footer .container {
    position: relative;
    z-index: 1;
}

/* Light theme footer palette adjustments */
body:not(.dark-mode) #site-footer {
    /* Soften the footer for light theme */
    background: linear-gradient(180deg, #f5f8ff 0%, #eef3ff 100%);
    color: #0b1440;
}
body:not(.dark-mode) #site-footer::before {
    opacity: 0.35;
    background: radial-gradient(circle at 20% -10%, rgba(21, 130, 247, 0.22), transparent 55%),
                radial-gradient(circle at 82% 0%, rgba(119, 58, 220, 0.18), transparent 60%);
}
body:not(.dark-mode) #site-footer .footer__address { color: rgba(8, 16, 40, 0.78); }
body:not(.dark-mode) #site-footer .footer__map { color: var(--primary); }
body:not(.dark-mode) #site-footer .footer-menu .sub-menu a { color: var(--nav-link); }
body:not(.dark-mode) #site-footer .footer__bottom { border-top-color: rgba(8, 16, 40, 0.12); }
body:not(.dark-mode) #site-footer .footer__legal { color: rgba(8, 16, 40, 0.74); }
body:not(.dark-mode) #site-footer .footer__legal a { color: var(--primary); }
body:not(.dark-mode) #site-footer .footer__social a { color: var(--nav-link); }

/* Footer layout */
#site-footer .footer__top{
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) 2.2fr;
    gap: clamp(24px, 4vw, 48px);
    text-align: left;
    align-items: start;
    margin-bottom: clamp(28px, 4vw, 36px);
}

#site-footer .footer__logo img{ height: 28px; width: auto; display: block; }
#site-footer .footer__brand{ display: flex; flex-direction: column; gap: 18px; }
#site-footer .footer__address{ margin: 0; font-style: normal; color: rgba(246,248,255,0.86); }
#site-footer .footer__map{ color: #9fb3ff; text-decoration: none; font-weight: 600; }
#site-footer .footer__map:hover{ text-decoration: underline; }

#site-footer .footer__nav{ width: 100%; }
#site-footer .footer-menu{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: clamp(16px, 3vw, 28px); }
#site-footer .footer-menu > li{ margin: 0; }
#site-footer .footer-menu > li > a{
    display: block;
    margin-bottom: 12px;
    font-weight: 700;
    /* Gradient heading to differentiate from links */
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-decoration: none;
    pointer-events: none;
    cursor: default;
}
#site-footer .footer-menu .sub-menu{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#site-footer .footer-menu .sub-menu a{ color: #e9edff; text-decoration: none; }
#site-footer .footer-menu .sub-menu a:hover{ text-decoration: underline; }

#site-footer .footer__bottom{ display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(200, 210, 255, 0.18); padding-top: 16px; margin-top: 8px; }
#site-footer .footer__legal{ margin: 0; color: rgba(235,238,255,0.86); }
#site-footer .footer__legal a{ color: #c8d3ff; text-decoration: none; }
#site-footer .footer__legal a:hover{ text-decoration: underline; }
#site-footer .footer__social{ display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
#site-footer .footer__social a{ color: #c9d5ff; font-size: 1.1rem; }

@media (max-width: 900px){
    #site-footer .footer__top{ grid-template-columns: 1fr; }
    #site-footer .footer-menu{ grid-template-columns: repeat(2, minmax(140px, 1fr)); }
    #site-footer .footer__bottom{ flex-direction: column; gap: 10px; align-items: flex-start; }
}

/* --- Articles / Posts --- */
article {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(16px);
    border-radius: 16px;
    border: 1px solid rgba(223, 229, 255, 0.6);
    box-shadow: 0 24px 48px rgba(15, 35, 70, 0.12);
    padding: clamp(32px, 5vw, 56px);
    margin: 80px auto 0;
    max-width: min(92vw, 1100px);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

article + article {
    margin-top: 48px;
}

article h2 {
    margin-top: 0;
    margin-bottom: 18px;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: #0d1840;
}

article .entry-content {
    margin-top: 18px;
}

body.dark-mode article h2 {
    color: #f6f7ff;
}

article:hover {
    transform: translateY(-4px);
    box-shadow: 0 38px 68px rgba(15, 35, 70, 0.18);
}

body.dark-mode article:hover {
    box-shadow: 0 44px 78px rgba(0, 0, 0, 0.62);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    article {
        padding: clamp(28px, 7vw, 44px);
        border-radius: 14px;
        margin: 60px auto 0;
    }
}