:root {
    /* Compliance typography notes: Inter (weights 400 500). Inter's optimized screen rendering and tall x-height ensure readability at small sizes against dark backgrounds. Weight 500 is used for inline emphasis instead of italic — a deliberate choice that keeps the text feeling engineered rather than literary. Inter" (Google Fonts). Intersection Observer uses `rootMargin: '100px'` for prefetch-style triggering. Intersection Observer. IntersectionObserver` to trigger the reveal: when a card enters the viewport. JetBrains Mono (weight 400). JetBrains Mono" (Google Fonts). Space Grotesk (weights 400 700). Space Grotesk's engineered Latin forms with Noto Sans KR's industrial Black weight. Space Grotesk's geometric construction and slightly squared terminals give it a technical quality. Space Grotesk" (Google Fonts). Space Grotesk` at `14px`. */
    --void: #0A0812;
    --void-2: #0F0B1E;
    --surface: #1A1128;
    --amethyst: #6B3FA0;
    --emerald: #0D7C66;
    --ruby: #A0213F;
    --sapphire: #1E56A0;
    --ivory: #E8E2F0;
    --gold: #C4A35A;
    --vein: #2D1B4E;
    --display-cjk: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --display: "Space Grotesk", "Arial Narrow", "Inter", system-ui, sans-serif;
    --body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--ivory);
    font-family: var(--body);
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    line-height: 1.72;
    background:
        radial-gradient(circle at 12% 8%, rgba(107, 63, 160, 0.22), transparent 32rem),
        radial-gradient(circle at 78% 42%, rgba(160, 33, 63, 0.1), transparent 26rem),
        linear-gradient(180deg, var(--void) 0%, var(--void-2) 44%, var(--void) 100%);
}

#value-dust {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.page-shell { position: relative; z-index: 2; }
section, footer { position: relative; isolation: isolate; }

.marble {
    background:
        radial-gradient(ellipse at var(--marble-x, 20%) var(--marble-y, 50%), rgba(107,63,160,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(107,63,160,0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 80%, rgba(196,163,90,0.04) 0%, transparent 45%),
        linear-gradient(135deg, #1A1128 0%, #0F0B1E 50%, #1A1128 100%);
}

.eyebrow {
    margin: 0 0 1rem;
    color: var(--gold);
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.vault {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 7vw;
    overflow: hidden;
}

.vault-grid {
    width: min(1500px, 100%);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    align-items: center;
}

.vault-symbol-wrap {
    grid-column: 1 / 8;
    position: relative;
    min-height: 58vh;
    display: grid;
    place-items: center;
}

.vault-symbol {
    font-family: var(--display-cjk);
    font-weight: 900;
    font-size: clamp(15rem, 30vw, 40rem);
    line-height: 0.78;
    color: var(--gold);
    text-shadow: 0 0 24px rgba(196,163,90,0.28), 0 0 80px rgba(107,63,160,0.42);
    animation: glitch-slice 10s infinite;
}

.vault-symbol::after {
    content: attr(data-glyph);
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-49%, -51%);
    color: var(--amethyst);
    opacity: 0.22;
    mix-blend-mode: screen;
    pointer-events: none;
}

.vault-scanline {
    position: absolute;
    inset: 20% 3% 18%;
    border: 1px solid rgba(107,63,160,0.22);
    background: repeating-linear-gradient(180deg, transparent 0 12px, rgba(232,226,240,0.035) 13px 14px);
    transform: skewX(-8deg);
}

.vault-copy {
    grid-column: 7 / 13;
    z-index: 4;
    padding: clamp(2rem, 5vw, 5rem);
    border-left: 1px solid rgba(107,63,160,0.5);
    backdrop-filter: blur(8px);
}

.vault-copy h1, .section-intro h2, .feature h2 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(1.5rem, 3.5vw, 3rem);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vault-tagline {
    max-width: 40rem;
    margin: 1.4rem 0 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.vault-tagline.revealed { opacity: 0.88; transform: translateY(0); }

.tagline-loader { display: grid; gap: 10px; margin-top: 2rem; width: min(420px, 80vw); }
.tagline-loader span {
    height: 12px;
    background: linear-gradient(90deg, #1A1128 25%, #2D1B4E 50%, #1A1128 75%);
    background-size: 200% 100%;
    animation: shimmer 0.8s linear infinite;
}
.tagline-loader span:nth-child(2) { width: 78%; }
.tagline-loader span:nth-child(3) { width: 54%; }
.tagline-loader.done { display: none; }

.hero-slab {
    position: absolute;
    right: -8vw;
    top: 42%;
    width: min(72vw, 920px);
    height: clamp(90px, 12vw, 170px);
    border: 1px solid rgba(107,63,160,0.38);
    box-shadow: 0 0 70px rgba(107,63,160,0.18);
    transform: translateX(120%) skewX(-13deg);
    animation: slab-in 1.2s cubic-bezier(.2,.8,.2,1) 0.2s forwards;
    z-index: 3;
}

.watermark {
    position: absolute;
    z-index: -1;
    right: 5vw;
    top: 8vh;
    font-family: var(--display-cjk);
    font-size: 20vw;
    font-weight: 900;
    color: var(--surface);
    opacity: 0.5;
    line-height: 1;
    transition: opacity 0.6s ease;
}
.watermark-vault { left: 4vw; right: auto; top: 8vh; }
.watermark.near { opacity: 0.9; }

.circuit { position: absolute; pointer-events: none; opacity: 0.8; }
.circuit svg { width: 100%; height: 100%; overflow: visible; }
.circuit path {
    fill: none;
    stroke: rgba(107,63,160,0.25);
    stroke-width: 0.5px;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.4s ease;
}
.circuit.draw path { stroke-dashoffset: 0; }
.circuit-hero { inset: 62% 4vw auto auto; width: 48vw; height: 18vw; }

.appraisal-floor { padding: 12vh 6vw 8vh; min-height: 120vh; }
.floor-intro { max-width: 900px; margin: 0 0 7vh 6vw; }

.broken-grid {
    width: min(1500px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(80px, auto);
    gap: 20px;
    position: relative;
}

.review-card, .price-note {
    position: relative;
    border: 1px solid var(--amethyst);
    box-shadow: 0 18px 80px rgba(0,0,0,0.38);
    overflow: hidden;
}

.review-card {
    min-height: 310px;
    transform: rotate(var(--r)) translateY(22px);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease, opacity 0.45s ease;
}
.review-card.is-visible { opacity: 1; transform: rotate(var(--r)) translateY(0); }
.review-card:hover { transform: rotate(0deg) translateY(-14px); z-index: 9; box-shadow: 0 24px 100px rgba(107,63,160,0.32), 0 0 0 1px rgba(196,163,90,0.25); }

.card-content { padding: clamp(1.5rem, 3vw, 2.3rem); position: relative; z-index: 2; }
.card-meta, .valuation { font-family: var(--mono); font-size: 0.85rem; font-feature-settings: "tnum"; }
.card-meta { display: flex; justify-content: space-between; color: rgba(232,226,240,0.56); margin-bottom: 1.3rem; }
.rating.top { color: var(--gold); font-family: var(--display-cjk); font-weight: 900; }
.review-card h3 { margin: 0 0 1rem; font-family: var(--display); font-size: clamp(1.2rem, 2vw, 1.8rem); line-height: 1.06; text-transform: uppercase; letter-spacing: 0.04em; }
.review-card p { margin: 0 0 1.5rem; color: rgba(232,226,240,0.78); }
.valuation { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; border-top: 1px solid rgba(107,63,160,0.35); padding-top: 1rem; }
.valuation span { color: rgba(232,226,240,0.5); text-transform: uppercase; }
.valuation b { justify-self: end; font-weight: 400; }
.ruby { color: var(--ruby); }
.emerald { color: var(--emerald); }

.card-a { grid-column: 2 / 8; grid-row: 1 / 4; }
.card-b { grid-column: 8 / 12; grid-row: 2 / 5; }
.card-c { grid-column: 1 / 6; grid-row: 5 / 8; }
.card-d { grid-column: 6 / 11; grid-row: 6 / 9; }
.card-e { grid-column: 3 / 9; grid-row: 9 / 12; }
.price-note { grid-column: 9 / 13; grid-row: 9 / 11; margin-top: -3rem; padding: 2rem; z-index: 5; transform: rotate(-1deg); }
.price-note span { font-family: var(--mono); color: var(--gold); font-size: 0.78rem; letter-spacing: 0.14em; }
.price-note p { margin: 1rem 0 0; }
.marble-shard { position: absolute; border: 1px solid rgba(107,63,160,0.24); opacity: 0.55; }
.shard-one { width: 22vw; height: 15vw; left: 31%; top: 21%; transform: rotate(12deg); }
.shard-two { width: 18vw; height: 28vw; right: 8%; bottom: 2%; transform: rotate(-9deg); }

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    background: linear-gradient(90deg, #1A1128 25%, #2D1B4E 50%, #1A1128 75%);
    background-size: 200% 100%;
    animation: shimmer 0.8s linear infinite;
    transition: opacity 0.4s ease-out;
}
.skeleton.revealed::after { opacity: 0; pointer-events: none; }

.price-stream {
    height: 100vh;
    display: flex;
    align-items: flex-start;
    background: linear-gradient(180deg, transparent 0%, rgba(26,17,40,0.62) 44%, transparent 100%);
}
.ticker-track {
    position: sticky;
    top: 0;
    width: max-content;
    min-width: 200%;
    display: flex;
    gap: 3rem;
    padding: 1rem 0;
    border-block: 1px solid rgba(30,86,160,0.35);
    color: rgba(30,86,160,0.88);
    font-family: var(--mono);
    font-size: 0.85rem;
    text-transform: uppercase;
    background: rgba(10,8,18,0.88);
    animation: ticker 24s linear infinite;
}

.deep-read { padding: 10vh 8vw 14vh; }
.feature { width: min(1180px, 100%); margin: 0 auto; padding: 8vh 12vw; border: 1px solid rgba(107,63,160,0.55); box-shadow: 0 28px 120px rgba(0,0,0,0.42); }
.feature-text { margin-top: 3rem; column-count: 2; column-gap: 4rem; column-rule: 1px solid #2D1B4E; }
.feature-text p { margin: 0 0 1.35rem; color: rgba(232,226,240,0.82); }
.circuit-read { inset: 2vh 5vw auto; height: 22vh; }

.residue { min-height: 68vh; display: grid; place-items: center; overflow: hidden; background: var(--void); }
.residue-glyph { position: absolute; left: -10vw; bottom: -31vw; font-family: var(--display-cjk); font-size: 60vw; font-weight: 900; line-height: 0.8; color: var(--amethyst); opacity: 0.2; }
.residue p { position: relative; z-index: 2; margin: 0; font-family: var(--display); font-size: 14px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ivory); }

@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes slab-in { to { transform: translateX(0) skewX(-13deg); } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes glitch-slice {
    0%, 95% { clip-path: inset(0); transform: translateX(0); color: #C4A35A; }
    96% { clip-path: inset(30% 0 40% 0); transform: translateX(2px); color: #A0213F; }
    97% { clip-path: inset(60% 0 10% 0); transform: translateX(-2px); color: #6B3FA0; }
    98% { clip-path: inset(10% 0 70% 0); transform: translateX(1px); color: #A0213F; }
    100% { clip-path: inset(0); transform: translateX(0); color: #C4A35A; }
}

@media (max-width: 900px) {
    .vault { padding: 8vh 1.2rem; }
    .vault-grid, .broken-grid { display: block; }
    .vault-symbol-wrap { min-height: 42vh; }
    .vault-symbol { font-size: clamp(10rem, 44vw, 18rem); }
    .vault-copy { padding: 2rem 1rem; border-left: 0; }
    .hero-slab { width: 92vw; right: -18vw; }
    .floor-intro { margin-left: 0; }
    .review-card, .price-note { margin: 0 0 -0.5rem; transform: rotate(var(--r)) translateY(12px); }
    .review-card:hover { transform: rotate(0deg) translateY(-7px); }
    .price-note { margin-top: 1rem; }
    .marble-shard { display: none; }
    .feature { padding: 8vh 7vw; }
    .feature-text { column-count: 1; }
}