/* Homepage v7.11.0 — Living cinematic archive */
html { scroll-behavior: smooth; }
.sao-home-living {
    --sao-home-bg: #071026;
    --sao-home-card: rgba(255,255,255,.055);
    --sao-home-card-strong: rgba(255,255,255,.09);
    --sao-home-border: rgba(255,255,255,.12);
    --sao-home-border-strong: rgba(184,245,116,.34);
    --sao-home-muted: var(--sa-text-muted,#b8c4e0);
    background: linear-gradient(180deg,#071026 0%, #0a1e5c 42%, #071026 100%);
    color: var(--sa-text,#f7fbff);
    overflow: clip;
}
.sao-skip-link {
    position: fixed;
    left: 1rem;
    top: 1rem;
    z-index: 9999;
    transform: translateY(-180%);
    padding: .75rem 1rem;
    border-radius: 999px;
    background: var(--sa-plumbob,#8FE03D);
    color: #071026;
    font-weight: 900;
}
.sao-skip-link:focus { transform: none; }
.sao-home-section {
    position: relative;
    padding-block: clamp(4.5rem, 8vw, 8rem);
}
.sao-home-section + .sao-home-section { margin-top: 0; }
.sao-home-section-head {
    display: grid;
    gap: .9rem;
    max-width: 860px;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.sao-home-section-head-center { margin-inline: auto; text-align: center; }
.sao-home-section-head-split {
    max-width: none;
    grid-template-columns: minmax(0,.85fr) minmax(280px,.55fr);
    align-items: end;
    gap: clamp(1.5rem,4vw,4rem);
}
.sao-home-kicker,
.sao-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--sa-plumbob-bright,#B8F574);
    font-size: .82rem;
    font-weight: 950;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin: 0;
}
.sao-home-section h2,
.sao-home-section-head h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.95rem, 4vw, 3.75rem);
    line-height: 1.06;
    letter-spacing: -.035em;
    text-wrap: balance;
}
.sao-home-section-head p:not(.sao-home-kicker),
.sao-home-section p {
    color: var(--sao-home-muted);
    font-size: clamp(1rem,1.4vw,1.15rem);
    line-height: 1.7;
}

/* Hero */
.sao-home-hero-living {
    min-height: min(1100px, 100svh);
    position: relative;
    display: grid;
    place-items: center start;
    padding-block: clamp(7rem, 10vw, 11rem) clamp(6rem, 9vw, 9rem);
    isolation: isolate;
    overflow: clip;
    background:
        radial-gradient(circle at 78% 45%, rgba(143,224,61,.22), transparent 24rem),
        radial-gradient(circle at 20% 20%, rgba(82,135,255,.2), transparent 26rem),
        linear-gradient(135deg,#071026 0%,#0a1e5c 55%,#050b1d 100%);
}
.sao-hero-bg-images,
.sao-hero-overlay { position: absolute; inset: 0; }
.sao-hero-bg-images { z-index: 0; overflow: hidden; }
.sao-hero-bg-images img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.02);
    animation: saoKenBurns 60s infinite;
    animation-delay: var(--sao-ken-delay,0s);
    will-change: opacity, transform;
}
.sao-hero-overlay {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(7,16,38,.64) 0%, rgba(7,16,38,.84) 52%, rgba(7,16,38,.96) 100%),
        radial-gradient(ellipse at center, transparent 0%, rgba(7,16,38,.45) 100%);
}
.sao-hero-living-content {
    position: relative;
    z-index: 3;
    max-width: 920px;
}
.sao-hero-title {
    margin: 1.25rem 0 1.25rem;
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 950;
    line-height: 1.03;
    letter-spacing: -.055em;
    color: #fff;
    text-shadow: 0 28px 90px rgba(0,0,0,.45);
}
.sao-hero-title-line {
    display: block;
    opacity: 0;
    transform: translateY(40px);
    animation: saoHeroLineIn .9s cubic-bezier(.22,1,.36,1) forwards;
}
.sao-hero-title-line[data-line="1"] { animation-delay: .2s; }
.sao-hero-title-line[data-line="2"] { animation-delay: .4s; margin-left: clamp(0rem, 4vw, 1.25em); }
.sao-hero-title-line[data-line="3"] { animation-delay: .6s; color: var(--sa-plumbob-bright,#B8F574); }
.sao-hero-subtitle {
    max-width: 680px;
    margin: 0 0 2rem;
    color: var(--sao-home-muted);
    font-size: clamp(1.08rem, 1.7vw, 1.35rem);
    line-height: 1.7;
    opacity: 0;
    transform: translateY(24px);
    animation: saoHeroLineIn .8s .8s cubic-bezier(.22,1,.36,1) forwards;
}
.sao-hero-subtitle strong { color: #fff; font-weight: 950; }
.sao-hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; }
.sao-button-xl {
    padding: 1rem 1.75rem;
    min-height: 56px;
    font-size: 1.03rem;
    font-weight: 900;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.sao-button-ghost {
    color: #fff;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(14px);
}
.sao-button-ghost:hover,
.sao-button-ghost:focus-visible { border-color: var(--sa-plumbob,#8FE03D); color: var(--sa-plumbob-bright,#B8F574); }
.sao-button-xl:hover,
.sao-button-xl:focus-visible { transform: translateY(-3px); }
.sao-button-primary.sao-button-xl:hover,
.sao-button-primary.sao-button-xl:focus-visible { box-shadow: 0 14px 44px rgba(143,224,61,.42); }
.sao-button-arrow { transition: transform .25s ease; }
.sao-button-xl:hover .sao-button-arrow,
.sao-button-xl:focus-visible .sao-button-arrow { transform: translateX(6px); }
.sao-hero-ctas .sao-button:nth-child(1) { animation: saoCtaIn .6s 1s cubic-bezier(.22,1,.36,1) backwards; }
.sao-hero-ctas .sao-button:nth-child(2) { animation: saoCtaIn .6s 1.1s cubic-bezier(.22,1,.36,1) backwards; }
.sao-hero-plumbob-wrapper {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: clamp(2rem, 10vw, 9rem);
    width: clamp(170px, 19vw, 280px);
    aspect-ratio: 100/130;
    transform: translateY(-50%) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
    transform-style: preserve-3d;
    transition: transform .38s ease-out;
    animation: saoPlumbobFloat 6s ease-in-out infinite;
    will-change: transform;
}
.sao-hero-plumbob { width: 100%; height: 100%; filter: drop-shadow(0 0 30px rgba(143,224,61,.4)); animation: saoPlumbobRotate 20s linear infinite; }
.sao-hero-plumbob-glow { position: absolute; inset: -55px; z-index: -1; background: radial-gradient(circle, rgba(143,224,61,.34), transparent 62%); animation: saoPlumbobPulse 4s ease-in-out infinite; }
.sao-hero-scroll-cue {
    position: absolute;
    z-index: 4;
    bottom: clamp(1.5rem, 4vw, 2.5rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    color: var(--sao-home-muted);
    text-decoration: none;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: opacity .3s ease;
    animation: saoScrollCueIn .6s 1.4s ease backwards;
}
.sao-hero-scroll-cue.is-hidden { opacity: 0; pointer-events: none; }
.sao-hero-scroll-line { width: 1px; height: 42px; background: linear-gradient(to bottom, transparent, var(--sa-plumbob,#8FE03D)); animation: saoScrollPulse 2s ease-in-out infinite; }
.sao-hero-scroll-arrow { color: var(--sa-plumbob-bright,#B8F574); animation: saoScrollBounce 2s ease-in-out infinite; }

/* Grids and cards */
.sao-home-timeline-list,
.sao-home-portal-grid,
.sao-home-stats-grid,
.sao-home-behind-grid,
.sao-home-footer-grid { display: grid; gap: 1rem; }
.sao-home-timeline-list { grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; padding: 0; margin: 0; }
.sao-home-timeline-item a,
.sao-home-portal-card,
.sao-home-stat-card,
.sao-home-mini-card,
.sao-home-behind-grid article,
.sao-home-footer-grid nav,
.sao-home-popular-box {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--sao-home-border);
    border-radius: 24px;
    background: var(--sao-home-card);
    backdrop-filter: blur(10px);
    box-shadow: 0 26px 70px rgba(0,0,0,.18);
}
.sao-home-timeline-item a { min-height: 280px; display: flex; flex-direction: column; gap: .75rem; padding: 1.35rem; color: #fff; text-decoration: none; }
.sao-home-timeline-item a:hover,
.sao-home-portal-card:hover,
.sao-home-mini-card:hover { transform: translateY(-5px); border-color: var(--sao-home-border-strong); box-shadow: 0 30px 80px rgba(0,0,0,.28), 0 0 44px rgba(143,224,61,.08); }
.sao-home-timeline-item a,
.sao-home-portal-card,
.sao-home-mini-card { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.sao-home-timeline-year { color: var(--sa-plumbob-bright,#B8F574); font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 900; }
.sao-home-timeline-dot { color: var(--sa-plumbob,#8FE03D); font-size: 1.4rem; }
.sao-home-timeline-item strong { font-size: 1.45rem; }
.sao-home-timeline-item em { color: var(--sao-home-muted); font-style: normal; line-height: 1.55; }
.sao-home-timeline-stats { margin-top: auto; color: var(--sao-home-muted); font-size: .9rem; }
.sao-home-timeline-stats b { color: #fff; }
.sao-home-portal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.sao-home-portal-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1.1rem; color: #fff; text-decoration: none; }
.sao-home-portal-icon { width: 3.15rem; height: 3.15rem; display: grid; place-items: center; border-radius: 18px; background: rgba(143,224,61,.12); font-size: 1.45rem; }
.sao-home-portal-body { display: grid; gap: .25rem; }
.sao-home-portal-body strong { font-size: 1.05rem; }
.sao-home-portal-body em { color: var(--sao-home-muted); font-style: normal; font-size: .92rem; line-height: 1.45; }
.sao-home-portal-count { display: grid; justify-items: end; gap: .2rem; color: var(--sa-plumbob-bright,#B8F574); font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 900; }
.sao-home-editorial-card { display: grid; grid-template-columns: minmax(280px,.9fr) minmax(0,1fr); gap: clamp(1.5rem,4vw,4rem); padding: clamp(1rem,2vw,1.5rem); border: 1px solid rgba(184,245,116,.2); border-radius: 34px; background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.035)); box-shadow: 0 34px 90px rgba(0,0,0,.25); }
.sao-home-editorial-media { min-height: 390px; border-radius: 26px; overflow: hidden; display: grid; place-items: center; background: rgba(143,224,61,.09); color: var(--sa-plumbob-bright,#B8F574); font-size: 5rem; }
.sao-home-editorial-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sao-home-editorial-copy { align-self: center; padding: clamp(.75rem,2vw,2rem); }
.sao-home-editorial-copy h2 { font-size: clamp(2.3rem,5vw,5rem); }
.sao-home-editorial-meta { display: inline-flex; margin: .5rem 0 1.2rem; color: var(--sa-plumbob-bright,#B8F574); font-weight: 900; }
.sao-home-stats-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.sao-home-stat-card { padding: 1.15rem; min-height: 150px; display: grid; gap: .5rem; align-content: center; justify-items: start; }
.sao-home-stat-card span { font-size: 1.55rem; }
.sao-home-stat-card strong { color: #fff; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: clamp(1.9rem,3.2vw,3.2rem); line-height: 1; }
.sao-home-stat-card em { color: var(--sao-home-muted); font-style: normal; font-weight: 900; }
.sao-home-recent-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.36fr); gap: 1.25rem; align-items: start; }
.sao-home-latest-rail { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.sao-home-mini-card { min-height: 235px; display: grid; grid-template-rows: 130px auto auto; gap: .45rem; padding: .75rem; color: #fff; text-decoration: none; }
.sao-home-mini-card img { width: 100%; height: 130px; border-radius: 18px; object-fit: cover; display: block; }
.sao-home-mini-card > span { height: 130px; display: grid; place-items: center; border-radius: 18px; background: rgba(143,224,61,.1); color: var(--sa-plumbob-bright,#B8F574); font-size: 2rem; }
.sao-home-mini-card small { color: var(--sa-plumbob-bright,#B8F574); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.sao-home-popular-box { padding: 1.25rem; }
.sao-home-popular-box h3 { color: #fff; margin: .4rem 0 1rem; font-size: 1.4rem; }
.sao-home-popular-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.sao-home-popular-list a { display: grid; grid-template-columns: auto 1fr; gap: .1rem .75rem; color: #fff; text-decoration: none; }
.sao-home-popular-list span { grid-row: span 2; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: rgba(143,224,61,.15); color: var(--sa-plumbob-bright,#B8F574); font-weight: 900; }
.sao-home-popular-list em { color: var(--sao-home-muted); font-style: normal; font-size: .88rem; }
.sao-home-behind-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.sao-home-behind-grid article { padding: 1.35rem; }
.sao-home-behind-grid article span { font-size: 1.8rem; }
.sao-home-behind-grid h3 { color: #fff; margin: .75rem 0 .4rem; }
.sao-home-rich-footer { padding-block: clamp(4rem,8vw,7rem); background: rgba(0,0,0,.22); }
.sao-home-footer-callout { display: grid; grid-template-columns: 1fr minmax(300px,.65fr); gap: 1.5rem; align-items: center; margin-bottom: 1rem; padding: 1.4rem; border: 1px solid var(--sao-home-border); border-radius: 28px; background: rgba(255,255,255,.055); }
.sao-home-footer-callout h2 { margin: .4rem 0; color: #fff; font-size: clamp(1.6rem,3vw,2.4rem); }
.sao-home-newsletter { display: flex; gap: .75rem; }
.sao-home-newsletter input { min-height: 48px; flex: 1; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; padding: 0 1rem; }
.sao-home-socials { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1rem 0 1.25rem; }
.sao-home-socials a { color: var(--sa-plumbob-bright,#B8F574); text-decoration: none; font-weight: 900; }
.sao-home-footer-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.sao-home-footer-grid nav { padding: 1.1rem; }
.sao-home-footer-grid h3 { color: #fff; margin: 0 0 .8rem; }
.sao-home-footer-grid a { display: block; color: var(--sao-home-muted); text-decoration: none; padding: .22rem 0; font-weight: 800; }
.sao-home-credits { color: var(--sao-home-muted); text-align: center; margin: 1.5rem 0 0; font-size: .92rem; }
