/*
 * Bakn landing page.
 *
 * Ported from the design export, which carried every rule as an inline `style` attribute plus a
 * non-standard `style-hover` attribute that only its own JS runtime understood. Both are folded
 * into real classes here: inline styles become declarations, `style-hover` becomes `:hover`.
 * Class names use the same `bakn-` prefix as the MAUI client so the two stay recognizable.
 */

/* ---------- tokens ---------- */

:root {
    --bakn-bg: #05080f;
    --bakn-panel: #070b14;
    --bakn-panel-deep: #060b13;
    --bakn-panel-hover: #0a1020;

    --bakn-ink: #dbe4f3;
    --bakn-ink-bright: #f4f8ff;
    --bakn-ink-wordmark: #f2f6ff;
    --bakn-ink-soft: #e8f0ff;
    --bakn-ink-lede: #c3cfe4;
    --bakn-ink-body: #b3c2dc;
    --bakn-ink-nav: #b8c6de;
    --bakn-ink-cta: #a5b5d2;
    --bakn-ink-dim: #93a5c4;
    --bakn-ink-dimmer: #7d92b5;
    --bakn-ink-faint: #5c6f8f;

    --bakn-blue: #2b5bdc;
    --bakn-blue-bright: #3b6ef5;
    --bakn-blue-link: #6ea8ff;
    --bakn-mint: #8fdcc8;
    --bakn-mint-bright: #4ee8c2;
    --bakn-danger: #f2606a;
    --bakn-dot: #2d3a52;

    --bakn-rule: rgba(125, 146, 181, .18);
    --bakn-rule-strong: rgba(125, 146, 181, .22);
    --bakn-rule-soft: rgba(125, 146, 181, .16);
    --bakn-rule-faint: rgba(125, 146, 181, .14);
    --bakn-rule-mint: rgba(143, 220, 200, .15);
    --bakn-rule-mint-soft: rgba(143, 220, 200, .12);

    --bakn-font-sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bakn-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    --bakn-gutter: 56px;
}

/* ---------- base ---------- */

html,
body {
    margin: 0;
    padding: 0;
    background: var(--bakn-bg);
}

body {
    font-family: var(--bakn-font-sans);
    color: var(--bakn-ink);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--bakn-blue-link);
    text-decoration: none;
}

a:hover {
    color: var(--bakn-mint);
}

::selection {
    background: var(--bakn-blue);
    color: #fff;
}

img {
    max-width: 100%;
}

.bakn-page {
    background: var(--bakn-bg);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Shared section furniture. */
.bakn-eyebrow {
    font-family: var(--bakn-font-mono);
    font-size: 13px;
    letter-spacing: .22em;
    color: var(--bakn-mint);
    margin-bottom: 16px;
}

.bakn-h2 {
    margin: 0 0 24px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--bakn-ink-bright);
}

/* ---------- buttons ---------- */

.bakn-btn {
    display: inline-block;
    font-size: 17px;
    border-radius: 4px;
    transition: background .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}

.bakn-btn-primary {
    background: var(--bakn-blue);
    color: #fff;
    font-weight: 700;
    padding: 16px 34px;
    box-shadow: 0 0 30px rgba(43, 91, 220, .5);
}

.bakn-btn-primary:hover {
    background: var(--bakn-blue-bright);
    box-shadow: 0 0 44px rgba(59, 110, 245, .8);
    color: #fff;
}

.bakn-btn-outline {
    color: var(--bakn-ink-soft);
    font-weight: 600;
    padding: 16px 30px;
    border: 1px solid rgba(232, 240, 255, .35);
    backdrop-filter: blur(6px);
}

.bakn-btn-outline:hover {
    border-color: var(--bakn-mint);
    color: var(--bakn-mint);
}

/* ---------- hero ---------- */

.bakn-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.bakn-hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.bakn-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    animation: baknHeroIn 2.2s cubic-bezier(.16, 1, .3, 1) both;
}

/* Fades the photo into the page background at the bottom so the ticker strip meets flat colour. */
.bakn-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(5, 8, 15, .35) 0%,
            rgba(5, 8, 15, 0) 30%,
            rgba(5, 8, 15, .25) 62%,
            rgba(5, 8, 15, .92) 88%,
            var(--bakn-bg) 100%);
}

/* Second, horizontal scrim: keeps the left-aligned headline legible over a busy photo. */
.bakn-hero-scrim-side {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 8, 15, .55) 0%, rgba(5, 8, 15, 0) 35%);
}

.bakn-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px var(--bakn-gutter);
    z-index: 2;
}

.bakn-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bakn-brand-logo {
    width: 38px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(59, 110, 245, .6));
}

.bakn-brand-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--bakn-ink-wordmark);
}

.bakn-nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
    font-size: 14px;
    letter-spacing: .08em;
    font-family: var(--bakn-font-mono);
}

.bakn-nav-link {
    color: var(--bakn-ink-nav);
}

.bakn-nav-cta {
    color: var(--bakn-bg);
    background: var(--bakn-ink-soft);
    padding: 10px 22px;
    border-radius: 4px;
    font-weight: 700;
    transition: background .18s ease, color .18s ease;
}

.bakn-nav-cta:hover {
    background: var(--bakn-mint);
    color: var(--bakn-bg);
}

.bakn-hero-copy {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 var(--bakn-gutter) 12vh;
    max-width: 980px;
}

.bakn-hero-kicker {
    font-family: var(--bakn-font-mono);
    font-size: 14px;
    letter-spacing: .22em;
    color: var(--bakn-mint);
    margin-bottom: 20px;
    animation: baknRiseIn 1s .5s cubic-bezier(.16, 1, .3, 1) both;
}

.bakn-hero-title {
    margin: 0 0 24px;
    font-size: clamp(48px, 7vw, 96px);
    line-height: .98;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--bakn-ink-bright);
    text-shadow: 0 4px 40px rgba(0, 0, 0, .6);
    animation: baknRiseIn 1s .65s cubic-bezier(.16, 1, .3, 1) both;
}

.bakn-hero-lede {
    margin: 0 0 40px;
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.55;
    color: var(--bakn-ink-lede);
    max-width: 560px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .7);
    animation: baknRiseIn 1s .8s cubic-bezier(.16, 1, .3, 1) both;
}

.bakn-hero-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    animation: baknRiseIn 1s .95s cubic-bezier(.16, 1, .3, 1) both;
}

/* ---------- ticker ---------- */

.bakn-ticker {
    border-top: 1px solid var(--bakn-rule-mint);
    border-bottom: 1px solid var(--bakn-rule-mint);
    background: rgba(143, 220, 200, .03);
    padding: 18px var(--bakn-gutter);
    display: flex;
    gap: 48px;
    justify-content: center;
    flex-wrap: wrap;
    font-family: var(--bakn-font-mono);
    font-size: 13px;
    letter-spacing: .14em;
    color: var(--bakn-ink-dimmer);
}

/* ---------- features ---------- */

.bakn-features {
    padding: 120px var(--bakn-gutter) 90px;
    max-width: 1280px;
    margin: 0 auto;
}

.bakn-features .bakn-h2 {
    margin-bottom: 64px;
    font-size: clamp(34px, 4vw, 56px);
    max-width: 640px;
}

/* 1px grid gap over a rule-coloured background draws the hairlines between cards. */
.bakn-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1px;
    background: var(--bakn-rule);
    border: 1px solid var(--bakn-rule);
}

.bakn-feature {
    background: var(--bakn-panel);
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: background .18s ease;
}

.bakn-feature:hover {
    background: var(--bakn-panel-hover);
}

.bakn-feature-tag {
    font-family: var(--bakn-font-mono);
    font-size: 12px;
    letter-spacing: .18em;
    color: var(--bakn-blue-bright);
}

.bakn-feature-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--bakn-ink-soft);
}

.bakn-feature-body {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--bakn-ink-dim);
}

/* ---------- mesh ---------- */

.bakn-mesh {
    position: relative;
    padding: 110px var(--bakn-gutter);
    background: linear-gradient(180deg, var(--bakn-bg) 0%, #071219 50%, var(--bakn-bg) 100%);
    border-top: 1px solid var(--bakn-rule-mint-soft);
    border-bottom: 1px solid var(--bakn-rule-mint-soft);
    overflow: hidden;
}

.bakn-mesh-aurora {
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 300px;
    background: radial-gradient(ellipse at center, rgba(78, 232, 194, .14) 0%, rgba(78, 232, 194, 0) 70%);
    animation: baknAuroraPulse 6s ease-in-out infinite;
    pointer-events: none;
}

.bakn-mesh-inner {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 80px;
    align-items: center;
}

.bakn-mesh .bakn-h2 {
    margin-bottom: 28px;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
}

.bakn-mesh-accent {
    color: var(--bakn-mint);
}

.bakn-mesh-body {
    margin: 0 0 20px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--bakn-ink-body);
    max-width: 520px;
}

.bakn-mesh-note {
    margin: 0 0 36px;
    font-family: var(--bakn-font-mono);
    font-size: 14px;
    letter-spacing: .06em;
    color: var(--bakn-mint-bright);
}

.bakn-mesh-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

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

.bakn-stat-value {
    font-size: 30px;
    font-weight: 700;
    color: var(--bakn-ink-soft);
}

.bakn-stat-label {
    font-family: var(--bakn-font-mono);
    font-size: 11.5px;
    letter-spacing: .14em;
    color: var(--bakn-ink-dimmer);
}

/* Faux terminal showing an uplink drop, mesh failover, and resync. */
.bakn-console {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: var(--bakn-font-mono);
    font-size: 13.5px;
    background: var(--bakn-panel-deep);
    border: 1px solid var(--bakn-rule-strong);
    border-radius: 6px;
    padding: 28px 26px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    overflow-x: auto;
}

.bakn-console-dots {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.bakn-console-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bakn-dot);
}

.bakn-log {
    color: var(--bakn-ink-dimmer);
    white-space: nowrap;
}

.bakn-log-down {
    color: var(--bakn-danger);
}

.bakn-log-up {
    color: var(--bakn-mint-bright);
}

.bakn-log-strong {
    color: var(--bakn-ink-soft);
}

.bakn-console-msg {
    color: var(--bakn-ink);
    padding: 12px 14px;
    background: rgba(43, 91, 220, .14);
    border-left: 2px solid var(--bakn-blue-bright);
    margin: 8px 0;
}

.bakn-caret {
    color: var(--bakn-mint-bright);
    animation: baknMeshBlink 1.4s step-end infinite;
}

/* ---------- security + platforms ---------- */

.bakn-split {
    padding: 110px var(--bakn-gutter);
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.bakn-split .bakn-h2 {
    font-size: clamp(30px, 3vw, 44px);
}

.bakn-sec-list {
    display: flex;
    flex-direction: column;
}

.bakn-sec-row {
    display: flex;
    gap: 16px;
    align-items: baseline;
    padding: 18px 0;
    border-bottom: 1px solid var(--bakn-rule-soft);
}

.bakn-sec-bullet {
    font-family: var(--bakn-font-mono);
    color: var(--bakn-blue-bright);
    font-size: 14px;
}

.bakn-sec-title {
    font-weight: 600;
    color: var(--bakn-ink-soft);
    font-size: 16.5px;
}

.bakn-sec-body {
    color: var(--bakn-ink-dim);
    font-size: 15.5px;
}

.bakn-platform-lede {
    margin: 0 0 32px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--bakn-ink-dim);
}

.bakn-platform-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.bakn-platform {
    border: 1px solid var(--bakn-rule-strong);
    border-radius: 6px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--bakn-panel);
    transition: border-color .18s ease;
}

.bakn-platform:hover {
    border-color: var(--bakn-blue-bright);
}

.bakn-platform-name {
    font-size: 19px;
    font-weight: 700;
    color: var(--bakn-ink-soft);
}

.bakn-platform-note {
    font-family: var(--bakn-font-mono);
    font-size: 11.5px;
    letter-spacing: .1em;
    color: var(--bakn-ink-dimmer);
}

/* ---------- CTA + footer ---------- */

.bakn-cta {
    position: relative;
    padding: 130px var(--bakn-gutter) 60px;
    text-align: center;
    overflow: hidden;
    border-top: 1px solid var(--bakn-rule-faint);
}

.bakn-cta-glow {
    position: absolute;
    bottom: -180px;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    height: 420px;
    background: radial-gradient(ellipse at center, rgba(43, 91, 220, .22) 0%, rgba(43, 91, 220, 0) 70%);
    pointer-events: none;
}

.bakn-cta-logo {
    width: 72px;
    height: 88px;
    object-fit: contain;
    filter: drop-shadow(0 0 24px rgba(59, 110, 245, .7));
    margin-bottom: 28px;
    position: relative;
}

.bakn-cta .bakn-h2 {
    position: relative;
    margin-bottom: 18px;
    font-size: clamp(36px, 5vw, 68px);
}

.bakn-cta-lede {
    position: relative;
    margin: 0 auto 44px;
    max-width: 460px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--bakn-ink-cta);
}

.bakn-cta-actions {
    position: relative;
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 90px;
}

.bakn-cta-actions .bakn-btn-primary {
    padding: 16px 36px;
    box-shadow: 0 0 34px rgba(43, 91, 220, .55);
}

.bakn-cta-actions .bakn-btn-outline {
    padding: 16px 32px;
    border-color: rgba(232, 240, 255, .3);
    backdrop-filter: none;
}

.bakn-footer {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 28px;
    border-top: 1px solid var(--bakn-rule-faint);
    font-family: var(--bakn-font-mono);
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--bakn-ink-faint);
}

.bakn-footer-links {
    display: flex;
    gap: 28px;
}

.bakn-footer-links a {
    color: var(--bakn-ink-dimmer);
}

/* ---------- animations ---------- */

@keyframes baknHeroIn {
    from {
        opacity: 0;
        transform: scale(1.04);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes baknRiseIn {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes baknAuroraPulse {

    0%,
    100% {
        opacity: .55;
    }

    50% {
        opacity: 1;
    }
}

@keyframes baknMeshBlink {

    0%,
    100% {
        opacity: .25;
    }

    50% {
        opacity: 1;
    }
}

/* ---------- responsive ----------
   The design export was fixed-width desktop only. These breakpoints collapse the two-column
   grids and tighten the 56px gutter so the page holds up on tablet and phone. */

@media (max-width: 980px) {
    :root {
        --bakn-gutter: 32px;
    }

    .bakn-mesh-inner,
    .bakn-split {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .bakn-features {
        padding-top: 90px;
    }

    .bakn-mesh,
    .bakn-split {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .bakn-cta {
        padding-top: 96px;
    }
}

@media (max-width: 720px) {
    :root {
        --bakn-gutter: 20px;
    }

    /* Section anchors stay reachable via the CTA and in-page links. */
    .bakn-nav-links .bakn-nav-link {
        display: none;
    }

    .bakn-ticker {
        gap: 20px;
        font-size: 11.5px;
    }

    .bakn-feature {
        padding: 28px 24px;
    }

    .bakn-platform-grid {
        grid-template-columns: 1fr;
    }

    .bakn-hero-copy {
        padding-bottom: 8vh;
    }

    .bakn-cta-actions {
        margin-bottom: 56px;
    }

    .bakn-footer {
        justify-content: center;
        text-align: center;
    }
}

/* Respect users who ask the OS to reduce motion: keep the layout, drop the movement. */
@media (prefers-reduced-motion: reduce) {

    .bakn-hero-img,
    .bakn-hero-kicker,
    .bakn-hero-title,
    .bakn-hero-lede,
    .bakn-hero-actions,
    .bakn-mesh-aurora,
    .bakn-caret {
        animation: none;
    }
}

/* ---------- downloads ---------- */

.bakn-downloads {
    padding: 110px var(--bakn-gutter);
    max-width: 1280px;
    margin: 0 auto;
    border-top: 1px solid var(--bakn-rule-mint-soft);
}

.bakn-downloads .bakn-h2 {
    font-size: clamp(30px, 3vw, 44px);
}

.bakn-downloads-lede {
    margin: 0 0 44px;
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--bakn-ink-dim);
    max-width: 560px;
}

.bakn-download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 40px;
}

.bakn-download {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--bakn-rule-strong);
    border-radius: 6px;
    padding: 24px 22px;
    background: var(--bakn-panel);
    transition: border-color .18s ease;
}

.bakn-download:not(.is-unavailable):hover {
    border-color: var(--bakn-blue-bright);
}

/* Dimmed, but text stays above the 4.5:1 contrast floor — "unavailable" must not mean "unreadable". */
.bakn-download.is-unavailable {
    background: transparent;
    border-style: dashed;
}

.bakn-download-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bakn-download-name {
    font-size: 19px;
    font-weight: 700;
    color: var(--bakn-ink-soft);
}

.bakn-download-badge {
    font-family: var(--bakn-font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bakn-mint);
    border: 1px solid var(--bakn-rule-mint);
    border-radius: 3px;
    padding: 3px 8px;
    white-space: nowrap;
}

.bakn-download-detail {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--bakn-ink-dim);
    flex: 1;
}

.bakn-download-note {
    font-family: var(--bakn-font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--bakn-ink-dimmer);
    margin-bottom: 6px;
}

.bakn-download-btn {
    text-align: center;
    font-size: 15px;
    padding: 12px 20px;
    width: 100%;
    font-family: inherit;
}

/* Disabled buttons: visibly inert, and the cursor says so before the click does. */
.bakn-download-btn:disabled {
    background: transparent;
    color: var(--bakn-ink-faint);
    border: 1px solid var(--bakn-rule);
    font-weight: 600;
    cursor: not-allowed;
    box-shadow: none;
}

.bakn-selfhost {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    border: 1px dashed var(--bakn-rule-strong);
    border-radius: 6px;
    padding: 28px 26px;
}

.bakn-selfhost-copy {
    flex: 1;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bakn-selfhost-why {
    margin: 4px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--bakn-ink-dimmer);
    max-width: 520px;
}

.bakn-selfhost .bakn-download-btn {
    width: auto;
    min-width: 200px;
}

@media (max-width: 720px) {
    .bakn-downloads {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .bakn-selfhost .bakn-download-btn {
        width: 100%;
    }
}