/* layout.css — sections, grid, nav, footer. Spec 01 + 02 (hero). */

.skip-link {
    position: absolute;
    top: -40px;
    left: var(--space-4);
    background: var(--bg-card);
    color: var(--accent);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    z-index: 100;
}
.skip-link:focus { top: var(--space-4); }

/* Nav ----------------------------------------------------------------- */

.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    height: var(--nav-h);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0.25));
    border-bottom: 1px solid var(--border);
}
/* Drop the backdrop-filter while the page is actively scrolling. Re-blurring
   a 1920×64 strip every frame is the single largest scroll cost on Windows
   (DXGI/ANGLE pays per-pixel cost for blur+saturate); macOS Metal absorbs
   it. The gradient background stays, so the bar remains readable; the
   filter snaps back on idle. While scrolling fast the blur is imperceptible
   anyway — by the time the user stops, the blur is back. */
body.is-scrolling .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.nav-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    height: 100%;
    padding: 0 var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.nav-brand {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--ink);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.nav-brand::before {
    content: "▮ ";
    color: var(--accent);
    margin-right: 2px;
}

.nav-links {
    display: flex;
    gap: var(--space-2);
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}
.nav-links a {
    display: inline-flex;
    align-items: center;
    color: var(--ink-muted);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    transition:
        color var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
}
.nav-links a:hover,
.nav-links a:focus-visible {
    color: var(--accent);
    background: var(--accent-soft);
    outline: none;
}

.nav-cta { white-space: nowrap; }

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}

.nav-links { margin-left: 0; }

.nav-channels {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
}
.nav-channel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
    transition:
        color var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
}
.nav-channel:hover, .nav-channel:focus-visible {
    color: var(--accent);
    background: var(--accent-soft);
    outline: none;
}

/* Hamburger trigger — visible only on mobile */
.nav-menu-trigger {
    display: none;
    width: var(--tap-min);
    height: var(--tap-min);
    padding: 0;
    margin-left: auto;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--ink);
    border-radius: var(--radius-sm);
    transition: background var(--dur-fast) var(--ease-out);
}
.nav-menu-trigger:hover,
.nav-menu-trigger:focus-visible {
    background: var(--accent-soft);
    outline: none;
}
.nav-menu-trigger-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transform-origin: 50% 50%;
    transition: transform var(--dur-fast) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
}
.nav-menu-trigger[aria-expanded="true"] .nav-menu-trigger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-menu-trigger[aria-expanded="true"] .nav-menu-trigger-bar:nth-child(2) {
    opacity: 0;
}
.nav-menu-trigger[aria-expanded="true"] .nav-menu-trigger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Drawer (mobile-only). The aside is always in the DOM but invisible
   and pointer-events: none until .is-open. */
.nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s var(--dur-base);
}
.nav-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s;
}
.nav-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
}
.nav-drawer.is-open .nav-drawer-backdrop {
    opacity: 1;
}
.nav-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(85vw, 320px);
    background: var(--bg-elev);
    border-left: 1px solid var(--border-strong);
    padding: calc(var(--nav-h) + var(--space-2)) var(--space-5)
             calc(var(--space-6) + var(--safe-bottom));
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-out);
    overflow-y: auto;
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.5);
}
.nav-drawer.is-open .nav-drawer-panel {
    transform: translateX(0);
}
.nav-drawer-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: var(--tap-min);
    height: var(--tap-min);
    padding: 0;
    background: transparent;
    border: none;
    color: var(--ink-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.nav-drawer-close:hover,
.nav-drawer-close:focus-visible {
    color: var(--accent);
    background: var(--accent-soft);
    outline: none;
}
.nav-drawer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-family: var(--font-mono);
}
.nav-drawer-links a {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: var(--text-lg);
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
    min-height: var(--tap-min);
    line-height: 1.4;
}
.nav-drawer-links a:hover,
.nav-drawer-links a:focus-visible {
    color: var(--accent);
    background: var(--accent-soft);
    outline: none;
}
.nav-drawer-divider {
    border: 0;
    height: 1px;
    background: var(--border);
    margin: 0;
}
.nav-drawer-channels {
    list-style: none;
    display: flex;
    gap: var(--space-2);
    padding: 0;
    margin: 0;
}
.nav-drawer-channels .nav-channel {
    width: var(--tap-min);
    height: var(--tap-min);
}
.nav-drawer-cta {
    margin-top: auto;
    text-align: center;
    width: 100%;
    justify-content: center;
}

/* Lock body scroll while drawer is open. */
body.is-nav-drawer-open {
    overflow: hidden;
}

@media (max-width: 720px) {
    /* Mobile: hide the inline nav contents — everything moves into the
       drawer. Show just brand on the left + hamburger on the right. */
    .nav-links,
    .nav-actions { display: none; }
    .nav-menu-trigger { display: inline-flex; }
    .nav-inner { padding: 0 var(--space-4); gap: var(--space-2); }
}

@media (max-width: 480px) {
    .nav-inner { padding: 0 var(--space-3); }
    .nav-brand { font-size: var(--text-xs); }
}

/* Sections ------------------------------------------------------------ */

main { padding-top: 0; }

.section {
    min-height: 80vh;
    padding: var(--space-24) var(--space-6);
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.section-placeholder .placeholder-label {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--ink-subtle);
    border-left: 2px solid var(--accent-soft);
    padding-left: var(--space-4);
}

/* Hero ---------------------------------------------------------------- */

.hero {
    position: relative;
    min-height: 100svh;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overflow: hidden;
    isolation: isolate;
    /* Respect iPhone safe-area on the bottom so the cert rail isn't clipped
       by the home-indicator area. */
    padding-bottom: var(--safe-bottom);
}

.hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
    transition: opacity 600ms var(--ease-out);
}
.hero-canvas.is-ready { opacity: 1; }

.hero-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 30% 20%, var(--accent-soft), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(0, 255, 209, 0.06), transparent 60%),
        var(--bg);
}

/* Portrait — emerges from the void on the right side of the hero. The
   left edge fades to transparent so it doesn't compete with the
   centered text stack. Hidden on viewports too narrow to fit it. */
.hero-portrait {
    position: absolute;
    right: 0;
    top: var(--nav-h);
    bottom: 240px;
    width: min(42vw, 520px);
    margin: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.35) 35%,
        rgba(0, 0, 0, 0.85) 65%,
        black 88%,
        rgba(0, 0, 0, 0.9) 100%
    );
            mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.35) 35%,
        rgba(0, 0, 0, 0.85) 65%,
        black 88%,
        rgba(0, 0, 0, 0.9) 100%
    );
}
.hero-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% 25%;
    filter: contrast(1.04) saturate(0.85) brightness(0.95);
}
/* Subtle cyan rim glow that hugs the portrait's right edge */
.hero-portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse 70% 60% at 80% 50%,
        rgba(0, 255, 209, 0.12),
        transparent 70%
    );
    mix-blend-mode: screen;
}

/* Mid-viewport: portrait stays on the right but narrower so the text stack
   has more breathing room. */
@media (max-width: 1100px) and (min-width: 769px) {
    .hero-portrait {
        width: min(36vw, 380px);
        bottom: 200px;
    }
}

/* Mobile (≤768px): re-compose the hero as a real two-row grid so portrait
   and text can't overlap. Row 1 = portrait (auto-sized), Row 2 = stack (1fr).
   Chrome lines and cert rail stay absolute over the top. */
@media (max-width: 768px) {
    .hero {
        grid-template-rows: auto auto;
    }
    .hero-portrait {
        position: static;
        grid-row: 1;
        grid-column: 1;
        justify-self: center;
        margin: calc(var(--nav-h) + var(--safe-top) + var(--space-2)) auto var(--space-4);
        width: clamp(170px, 44vw, 220px);
        height: clamp(170px, 44vw, 220px);
        border-radius: 50%;
        overflow: hidden;
        z-index: 2;
        /* Drop the desktop horizontal fade — show the full portrait, soft-edged. */
        -webkit-mask-image: radial-gradient(circle at center,
            black 62%,
            rgba(0, 0, 0, 0.85) 78%,
            transparent 100%);
                mask-image: radial-gradient(circle at center,
            black 62%,
            rgba(0, 0, 0, 0.85) 78%,
            transparent 100%);
    }
    .hero-portrait img {
        /* Re-center on the face for the smaller circular crop. */
        object-position: 50% 22%;
    }
    .hero-portrait::after {
        /* Switch the rim glow into a circular halo around the avatar. */
        background: radial-gradient(
            circle at center,
            transparent 55%,
            rgba(0, 255, 209, 0.22) 72%,
            transparent 92%
        );
    }
}

.hero::after {
    /* subtle vignette so type stays readable over the mesh */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}

.hero-chrome {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    padding: calc(var(--nav-h) + var(--space-6)) var(--space-8) var(--space-6);
    gap: var(--space-2);
}

.chrome {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    letter-spacing: 0.04em;
    opacity: 0;
    pointer-events: auto;
}
.chrome-tl { grid-column: 1; grid-row: 1; justify-self: start; }
.chrome-tr { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
.chrome-bl { grid-column: 1; grid-row: 3; justify-self: start; }
.chrome-br { grid-column: 2; grid-row: 3; justify-self: end; text-align: right; }

.hero-stack {
    grid-column: 1;
    grid-row: 1;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 880px;
    margin: 0 auto;
    /* padding-bottom reserves space for the cert ticker (~200px strip + margin)
       so the stack's vertical center sits visually higher in the hero. */
    padding: 0 var(--space-6) 260px;
    align-self: center;
    justify-self: center;
    text-align: left;
    width: 100%;
}

@media (max-width: 900px) {
    .hero-stack { padding-bottom: 200px; }
}
@media (max-width: 768px) {
    /* Stack drops into grid-row 2, naturally below the portrait. No
       padding-top hack needed — the grid keeps them apart. */
    .hero-stack {
        grid-row: 2;
        padding-top: 0;
        padding-bottom: 140px;
        align-self: start;
        text-align: center;
    }
    .hero-identity {
        justify-content: center;
    }
    /* Hide the chrome status line on mobile — it overlaps the portrait
       column at narrow widths and the brand row already conveys context. */
    .chrome-tl { display: none; }
}
@media (max-width: 600px) {
    .hero-stack { padding-bottom: 130px; }
}

.hero-name {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(2.75rem, 9vw, var(--text-4xl));
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--ink);
    text-shadow: 0 0 60px var(--accent-glow);
}

.hero-tagline {
    font-size: clamp(var(--text-base), 2vw, var(--text-xl));
    line-height: 1.45;
    color: var(--ink);
    max-width: 720px;
}

@media (max-width: 720px) {
    .hero-chrome { padding: calc(var(--nav-h) + var(--space-4)) var(--space-4) var(--space-4); }
    .chrome { font-size: 0.7rem; }
    .chrome-tr, .chrome-br { display: none; }
    .hero-stack { padding: 0 var(--space-4); }
}

/* Capabilities ------------------------------------------------------- */

.section-capabilities {
    display: block;
    max-width: 1200px;
    padding-top: var(--space-16);
    padding-bottom: var(--space-24);
}

.cap-header {
    max-width: 760px;
    margin-bottom: var(--space-10);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.cap-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent);
    letter-spacing: 0.06em;
}
.cap-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--ink);
}
.cap-sub {
    color: var(--ink-muted);
    font-size: var(--text-base);
    line-height: 1.55;
    max-width: 620px;
}
.cap-return {
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-subtle);
}
.cap-return .kw { color: var(--accent); }

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    align-items: start;
}

/* 2-column layout for mid-width: AI-Native + Cloud share row 1, Business
   takes row 2 spanning the full width so it doesn't orphan in a half-row. */
@media (max-width: 1100px) {
    .capabilities-grid {
        grid-template-columns: 1fr 1fr;
    }
    .capabilities-grid > .cap-axis[data-axis="business"] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 880px) {
    .capabilities-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .capabilities-grid > .cap-axis[data-axis="business"] {
        grid-column: auto;
    }
}

/* Writing section (spec 14) ------------------------------------------ */

.section-writing {
    display: block;
    max-width: 1200px;
    padding-top: var(--space-16);
    padding-bottom: var(--space-24);
    min-height: 0;
}

/* Footer -------------------------------------------------------------- */

.footer {
    border-top: 1px solid var(--border);
    padding: var(--space-8) var(--space-6);
    margin-top: var(--space-16);
}

.footer-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

.footer-copy { margin-right: auto; }

.footer-link {
    color: var(--ink-muted);
    transition: color var(--dur-fast) var(--ease-out);
}
.footer-link:hover, .footer-link:focus-visible { color: var(--accent); }

/* Hero fallback mesh (spec 22) — mobile-only.
   On desktop the WebGL canvas is the hero visual; if WebGL fails we
   reveal the original gradient-only .hero-fallback (unchanged). The
   mesh would bleed through the alpha-transparent canvas on desktop,
   so it's hidden everywhere outside the mobile gate below. */
.hero-fallback-mesh {
    display: none;
}

/* Spec 22 — Mobile overhaul (≤767px) ==================================
   Compress section rhythm so the page stops eating a full viewport per
   section. Every change here gates on <768px — desktop is untouched. */
@media (max-width: 767px) {
    .hero-fallback-mesh {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        color: var(--accent);
        opacity: 0.7;
    }
    .hero-fallback-mesh circle { fill: currentColor; }
    .hero-fallback-mesh line   { stroke: currentColor; stroke-width: 0.4; }

    .section {
        min-height: auto;
        padding: var(--space-12) var(--space-4);
    }
    /* Spec 22.3: reserve room for the cert rail (108px tall) lifted 96px
       above the bottom-bar, plus the iOS safe-area and a little breathing
       room. Without this, the tagline crashes into the cert tiles when
       100svh is short (e.g. iPhone Safari with toolbars visible). */
    .hero-stack {
        padding-bottom: calc(108px + 96px + env(safe-area-inset-bottom) + var(--space-4));
    }
    .site-footer {
        padding: var(--space-6) var(--space-4);
        margin-top: var(--space-8);
    }
}