:root {
    --home-gold: #d4af37;
    --home-bg: #050a18;
    --home-bg-2: #08101f;
    --home-text: #f4f4f4;
    --home-soft: rgba(255, 255, 255, 0.58);
    --home-muted: rgba(255, 255, 255, 0.38);
    --home-line: rgba(255, 255, 255, 0.09);
    --home-glass: rgba(255, 255, 255, 0.035);
    --home-max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--home-bg);
    color: var(--home-text);
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body.home-booting main,
body.home-booting .home-topbar,
body.home-booting .home-footer { opacity: 0; }
body.home-ready main,
body.home-ready .home-topbar,
body.home-ready .home-footer { opacity: 1; transition: opacity .35s ease; }
button, input { font: inherit; }
a { color: inherit; }

.home-bg,
.home-mask,
.home-wave {
    position: fixed;
    inset: 0;
    pointer-events: none;
}
.home-bg {
    z-index: -5;
    background:
        linear-gradient(90deg, rgba(5, 10, 24, .94), rgba(5, 10, 24, .76)),
        url('/images/nyc.avif') center/cover no-repeat;
    opacity: .52;
}
.home-mask {
    z-index: -4;
    background:
        radial-gradient(circle at 72% 16%, rgba(212, 175, 55, .07), transparent 35%),
        linear-gradient(180deg, rgba(5, 10, 24, .25), var(--home-bg) 78%);
}
.home-wave { z-index: -3; opacity: .72; }
.home-wave svg { width: 100%; height: 100%; }

.home-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(5,10,24,.72);
    backdrop-filter: blur(18px);
}
.home-topbar-inner {
    width: min(var(--home-max), calc(100% - 40px));
    margin: 0 auto;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.home-mini-brand {
    font-family: "Playfair Display", serif;
    color: var(--home-gold);
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: .03em;
}
.home-nav { display: flex; align-items: center; gap: 24px; }
.home-nav a {
    text-decoration: none;
    font-family: "Fira Code", monospace;
    font-size: .68rem;
    letter-spacing: .08em;
    color: rgba(255,255,255,.58);
    transition: .2s ease;
}
.home-nav a:hover { color: var(--home-gold); }
.home-nav .home-login {
    padding: 9px 14px;
    border: 1px solid rgba(212,175,55,.35);
    border-radius: 999px;
    color: var(--home-gold);
}

.home-hero {
    width: min(var(--home-max), calc(100% - 40px));
    min-height: calc(100vh - 64px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(48px, 7vw, 96px);
    align-items: center;
    padding: 76px 0 86px;
}
.home-hero-left,
.home-hero-right { min-width: 0; }
.home-kicker {
    display: block;
    color: var(--home-gold);
    font-family: "Fira Code", monospace;
    font-size: .76rem;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.home-hero-left h2,
.home-section-head h2,
.home-membership-card h2,
.home-newsletter-copy h2 {
    margin: 14px 0 18px;
    font-family: "Playfair Display", serif;
    font-size: clamp(2.15rem, 4.2vw, 4rem);
    line-height: 1.08;
    letter-spacing: -.03em;
}
.home-hero-copy,
.home-section-head p,
.home-philosophy-copy,
.home-membership-card p,
.home-newsletter-copy p {
    color: var(--home-soft);
    line-height: 1.75;
}
.home-hero-copy { max-width: 620px; font-size: 1rem; }
.home-intents { margin-top: 30px; }
.home-intent {
    position: relative;
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 15px;
    align-items: start;
    padding: 16px 18px;
    margin-bottom: 10px;
    border: 1px solid var(--home-line);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
    cursor: pointer;
    transition: .22s ease;
}
.home-intent:hover { border-color: rgba(212,175,55,.48); transform: translateX(4px); }
.home-intent input { position: absolute; opacity: 0; }
.home-radio {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    border: 2px solid var(--home-gold);
    border-radius: 50%;
}
.home-intent input:checked + .home-radio {
    box-shadow: inset 0 0 0 4px var(--home-bg), 0 0 16px rgba(212,175,55,.35);
    background: var(--home-gold);
}
.home-intent strong { display: block; font-size: .95rem; }
.home-intent small { display: block; margin-top: 4px; color: var(--home-muted); line-height: 1.5; font-size: .77rem; }
.home-primary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: 9px;
    background: var(--home-gold);
    color: #080808;
    font-weight: 800;
    letter-spacing: .04em;
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.home-intents .home-primary { width: 100%; margin-top: 8px; }
.home-primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 12px 34px rgba(212,175,55,.16); }
.home-primary-link { text-decoration: none; }
.home-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 20px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 9px;
    text-decoration: none;
    color: rgba(255,255,255,.72);
    font-family: "Fira Code", monospace;
    font-size: .7rem;
    transition: .2s ease;
}
.home-secondary:hover { border-color: rgba(212,175,55,.5); color: var(--home-gold); }
.home-form-error { margin: 12px 0 0; color: #ff9494; font-family: "Fira Code", monospace; font-size: .72rem; text-align: center; }

.home-brand-lockup h1 {
    margin: 0;
    color: var(--home-gold);
    font-family: "Playfair Display", serif;
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.06em;
}
.home-brand-lockup span {
    display: block;
    margin-top: 14px;
    font-family: "Fira Code", monospace;
    font-size: .78rem;
    letter-spacing: .3em;
    color: rgba(255,255,255,.78);
}
.home-manifesto {
    margin: 28px 0 18px;
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    line-height: 1.42;
    font-weight: 300;
    color: rgba(255,255,255,.62);
}
.home-intro { max-width: 610px; color: var(--home-soft); line-height: 1.78; }
.home-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

.home-section {
    position: relative;
    width: min(var(--home-max), calc(100% - 40px));
    margin: 0 auto;
    padding: 110px 0;
    border-top: 1px solid var(--home-line);
}
.home-section-soft::before {
    content: "";
    position: absolute;
    inset: 36px -100vw;
    z-index: -1;
    background: rgba(255,255,255,.012);
}
.home-section-head { max-width: 800px; margin-bottom: 48px; }
.home-section-head h2 { font-size: clamp(2rem, 4vw, 3.3rem); }
.home-section-head p { max-width: 720px; margin: 0; font-size: 1rem; }
.home-section-head-narrow { max-width: 920px; margin-inline: auto; text-align: center; }

.home-topic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.home-topic-card {
    min-height: 310px;
    padding: 28px;
    border: 1px solid var(--home-line);
    border-radius: 18px;
    background: var(--home-glass);
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.home-topic-card:hover { transform: translateY(-5px); border-color: rgba(212,175,55,.45); background: rgba(212,175,55,.035); }
.home-topic-featured { border-color: rgba(212,175,55,.25); }
.home-topic-index { color: rgba(212,175,55,.55); font-family: "Fira Code", monospace; font-size: .75rem; }
.home-topic-card h3 { margin: 38px 0 14px; color: var(--home-gold); font-family: "Playfair Display", serif; font-size: 1.7rem; }
.home-topic-card p { margin: 0; color: var(--home-soft); line-height: 1.72; font-size: .91rem; }
.home-topic-card a,
.home-topic-note { margin-top: auto; padding-top: 28px; font-family: "Fira Code", monospace; font-size: .66rem; letter-spacing: .06em; }
.home-topic-card a { color: var(--home-gold); text-decoration: none; }
.home-topic-note { color: var(--home-muted); }

.home-philosophy { text-align: center; }
.home-flow {
    max-width: 1000px;
    margin: 44px auto 28px;
    padding: 26px 24px;
    border: 1px solid rgba(212,175,55,.26);
    border-radius: 16px;
    background: rgba(212,175,55,.025);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px;
    color: var(--home-gold);
    font-family: "Fira Code", monospace;
    font-size: .78rem;
    letter-spacing: .08em;
}
.home-flow b { color: rgba(255,255,255,.25); }
.home-philosophy-copy { max-width: 760px; margin: 0 auto; }

.home-workbench { max-width: 900px; }
.home-workbench-item {
    display: grid;
    grid-template-columns: 170px 1fr 24px;
    gap: 20px;
    align-items: center;
    padding: 20px 12px;
    border-bottom: 1px solid var(--home-line);
    text-decoration: none;
    transition: padding .2s ease, background .2s ease;
}
.home-workbench-item:hover { padding-left: 20px; background: rgba(212,175,55,.025); }
.home-workbench-label { color: var(--home-gold); font-family: "Fira Code", monospace; font-size: .7rem; text-transform: uppercase; }
.home-workbench-title { color: rgba(255,255,255,.86); font-size: .95rem; line-height: 1.45; }
.home-workbench-arrow { color: var(--home-gold); opacity: .45; }
.home-workbench-item.is-empty { pointer-events: none; opacity: .55; }

.home-latest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.home-latest-card {
    min-height: 265px;
    padding: 24px;
    border: 1px solid var(--home-line);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: .22s ease;
}
.home-latest-card:hover { transform: translateY(-4px); border-color: rgba(212,175,55,.4); }
.home-latest-meta { color: var(--home-gold); font-family: "Fira Code", monospace; font-size: .64rem; text-transform: uppercase; }
.home-latest-card h3 { margin: 20px 0 12px; font-size: 1.05rem; line-height: 1.45; color: #fff; }
.home-latest-card p { margin: 0; color: var(--home-soft); font-size: .83rem; line-height: 1.65; }
.home-latest-footer { margin-top: auto; padding-top: 22px; color: var(--home-gold); font-family: "Fira Code", monospace; font-size: .65rem; }
.home-loading { padding: 22px 0; color: var(--home-muted); font-family: "Fira Code", monospace; font-size: .75rem; }

.home-membership-card {
    padding: clamp(32px, 5vw, 62px);
    border: 1px solid rgba(212,175,55,.55);
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(212,175,55,.085), rgba(5,10,24,.88));
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: end;
}
.home-membership-card h2 { max-width: 760px; font-size: clamp(2rem, 3.8vw, 3.25rem); }
.home-membership-card p { max-width: 700px; }
.home-membership-actions { display: flex; flex-direction: column; gap: 10px; min-width: 260px; }

.home-newsletter-section {
    display: grid;
    grid-template-columns: 1fr .9fr;
    gap: 70px;
    align-items: start;
}
.home-newsletter-copy h2 { font-size: clamp(2rem, 3.5vw, 3rem); }
.home-newsletter-form { display: grid; gap: 13px; }
.home-news-field { display: grid; gap: 7px; }
.home-news-field label {
    color: rgba(255,255,255,.62);
    font-family: "Fira Code", monospace;
    font-size: .66rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.home-news-field label span { color: var(--home-gold); }
.home-newsletter-form input:not([type="checkbox"]),
.home-newsletter-form select {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--home-line);
    border-radius: 9px;
    background: rgba(0,0,0,.2);
    color: #fff;
    outline: none;
    font: inherit;
}
.home-newsletter-form select {
    cursor: pointer;
    color-scheme: dark;
}
.home-newsletter-form input:not([type="checkbox"]):focus,
.home-newsletter-form select:focus {
    border-color: rgba(212,175,55,.65);
    box-shadow: 0 0 0 3px rgba(212,175,55,.06);
}
.home-news-consent {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
    margin: 3px 0 4px;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.018);
    color: rgba(255,255,255,.55);
    font-size: .71rem;
    line-height: 1.58;
    cursor: pointer;
}
.home-news-consent input {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--home-gold);
}
.home-news-consent a {
    color: var(--home-gold);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.home-news-consent a:hover { color: #efd468; }
.home-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.home-news-message { min-height: 20px; margin: 2px 0 0; color: var(--home-soft); font-size: .78rem; line-height: 1.5; }
.home-news-message.is-success { color: #9de2b4; }
.home-news-message.is-error { color: #ff9c9c; }

.home-footer {
    width: min(var(--home-max), calc(100% - 40px));
    margin: 0 auto;
    padding: 54px 0 70px;
    border-top: 1px solid var(--home-line);
    color: var(--home-muted);
    font-size: .78rem;
}
.home-footer > div:first-child { display: flex; flex-direction: column; gap: 5px; }
.home-footer strong { color: var(--home-gold); font-family: "Playfair Display", serif; font-size: 1.25rem; }
.home-footer span { font-family: "Fira Code", monospace; font-size: .64rem; }
.home-footer-links { display: flex; gap: 18px; margin: 22px 0; flex-wrap: wrap; }
.home-footer-links a { text-decoration: none; }
.home-footer-links a:hover { color: var(--home-gold); }

@media (max-width: 980px) {
    .home-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 64px; }
    .home-hero-right { order: -1; }
    .home-topic-grid, .home-latest-grid { grid-template-columns: repeat(2, 1fr); }
    .home-membership-card, .home-newsletter-section { grid-template-columns: 1fr; }
    .home-membership-actions { min-width: 0; max-width: 380px; }
}

@media (max-width: 680px) {
    .home-topbar-inner { width: min(calc(100% - 28px), var(--home-max)); }
    .home-nav a:not(.home-login) { display: none; }
    .home-hero, .home-section, .home-footer { width: min(calc(100% - 32px), var(--home-max)); }
    .home-hero { padding: 48px 0 62px; gap: 42px; }
    .home-brand-lockup h1 { font-size: clamp(3.6rem, 20vw, 5rem); }
    .home-brand-lockup span { letter-spacing: .18em; font-size: .64rem; }
    .home-topic-grid, .home-latest-grid { grid-template-columns: 1fr; }
    .home-topic-card { min-height: 270px; }
    .home-section { padding: 78px 0; }
    .home-workbench-item { grid-template-columns: 1fr 24px; gap: 8px 14px; }
    .home-workbench-label { grid-column: 1 / -1; }
    .home-membership-card { padding: 30px 22px; }
    .home-flow { justify-content: flex-start; text-align: left; }
}

/* ============================================================
   MOBILE FULL-WIDTH HARDENING
   Fix homepage chỉ chiếm một phần viewport trên mobile
   ============================================================ */

@media (max-width: 680px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        overflow-x: clip;
    }


    /* ========================================================
       TOPBAR
       ======================================================== */

    .home-topbar {
        width: 100%;
        max-width: none;
        margin: 0;
        left: 0;
        right: 0;
    }

    .home-topbar-inner {
        width: 100%;
        max-width: none;

        margin: 0;

        padding-left: 16px;
        padding-right: 16px;

        box-sizing: border-box;
    }


    /* ========================================================
       MAIN PAGE
       ======================================================== */

    main {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
    }


    /* ========================================================
       HERO
       ======================================================== */

    .home-hero {
        width: 100%;
        max-width: none;
        min-width: 0;

        margin-left: 0;
        margin-right: 0;

        padding:
            48px 16px
            62px;

        grid-template-columns:
            minmax(0, 1fr);

        gap: 42px;

        box-sizing: border-box;
    }

    .home-hero-left,
    .home-hero-right {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .home-hero-right {
        order: -1;
    }


    /* ========================================================
       SECTIONS
       ======================================================== */

    .home-section {
        width: 100%;
        max-width: none;
        min-width: 0;

        margin-left: 0;
        margin-right: 0;

        padding:
            78px 16px;

        box-sizing: border-box;
    }

    .home-footer {
        width: 100%;
        max-width: none;

        margin-left: 0;
        margin-right: 0;

        padding:
            54px 16px
            70px;

        box-sizing: border-box;
    }


    /* ========================================================
       GRIDS
       ======================================================== */

    .home-topic-grid,
    .home-latest-grid,
    .home-membership-card,
    .home-newsletter-section {
        width: 100%;
        max-width: 100%;

        grid-template-columns:
            minmax(0, 1fr);
    }

    .home-topic-card,
    .home-latest-card,
    .home-membership-card,
    .home-newsletter-form,
    .home-workbench {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }


    /* ========================================================
       BRAND
       ======================================================== */

    .home-brand-lockup {
        width: 100%;
        max-width: 100%;
    }

    .home-brand-lockup h1 {
        max-width: 100%;

        font-size:
            clamp(
                3.1rem,
                18vw,
                4.5rem
            );

        white-space: normal;
    }

    .home-brand-lockup span {
        max-width: 100%;

        font-size: .62rem;
        letter-spacing: .16em;
    }


    /* ========================================================
       CTA
       ======================================================== */

    .home-hero-actions {
        width: 100%;
    }

    .home-hero-actions .home-primary,
    .home-hero-actions .home-secondary {
        width: 100%;
    }


    /* ========================================================
       START HERE
       ======================================================== */

    .home-intents {
        width: 100%;
    }

    .home-intent {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}