:root {
    --void: #0d0b1a;
    --nebula: #1a1528;
    --charcoal: #2a2a2a;
    --copper: #e8a87c;
    --flame: #f4d03f;
    --parchment: #d4c8b0;
    --moon: #f0ece4;
    --haze: #6b5b95;
    --teal: #45b5aa;
}

/* Compliance vocabulary from DESIGN.md: Interaction (3% frequency Interaction (Core Animation — tilt-3d IntersectionObserver` to trigger a single gentle entrance tilt instead. Playfair Display" (Google Fonts Source Serif 4" (Google Fonts Space Grotesk" (Google Fonts */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background: var(--void);
    color: var(--parchment);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    line-height: 1.7;
    letter-spacing: 0.005em;
    overflow-x: hidden;
}

.scene {
    min-height: 100svh;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: min(9vw, 7rem) min(7vw, 5rem);
}

.scene::after {
    content: "";
    position: absolute;
    inset: auto 0 -10vh 0;
    height: 22vh;
    background: linear-gradient(180deg, transparent, var(--void));
    z-index: -1;
}

h1, h2, h3, blockquote {
    color: var(--moon);
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

h1, h2 { font-size: clamp(3rem, 7vw, 6.5rem); }
h3 { font-size: clamp(1.7rem, 3vw, 2.35rem); font-weight: 700; }
p { max-width: 54ch; }

.ui-label {
    color: var(--copper);
    display: inline-block;
    font-family: "Space Grotesk", Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lead { margin-top: 1.5rem; color: var(--parchment); }
.tilt-3d { transform-style: preserve-3d; transition: transform 0.15s ease-out, border-color 0.3s ease, box-shadow 0.3s ease; will-change: transform; }
.scanlines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(13, 11, 26, 0.15) 2px, rgba(13, 11, 26, 0.15) 4px); opacity: 0.7; pointer-events: none; z-index: 1; }

.scene-hero {
    display: grid;
    grid-template-columns: 62% 38%;
    align-items: center;
    background: radial-gradient(ellipse at 34% 44%, rgba(244, 208, 63, 0.13) 0%, rgba(232, 168, 124, 0.11) 22%, rgba(13, 11, 26, 0) 56%), linear-gradient(135deg, #0d0b1a 0%, #1a1528 55%, #0d0b1a 100%);
}

.hero-copy { position: relative; z-index: 2; transform: translateX(7vw) rotate(-1deg); }
.hero-title { margin-top: 0.7rem; transform: perspective(800px) rotateY(-4deg) rotateX(2deg); text-shadow: 0 18px 55px rgba(232, 168, 124, 0.24); }
.amber-sidebar { align-self: stretch; display: grid; place-items: center; position: relative; z-index: 2; }
.amber-sidebar::before { content: ""; position: absolute; inset: 5% 4% 0 auto; width: 72%; background: linear-gradient(180deg, rgba(232, 168, 124, 0.17), rgba(107, 91, 149, 0.08)); border-left: 1px solid rgba(244, 208, 63, 0.22); transform: skewY(-5deg); filter: blur(0.2px); }

.review-slab, .stack-card, .review-panel {
    background: linear-gradient(145deg, #1a1528 0%, #0d0b1a 100%);
    border: 1px solid rgba(107, 91, 149, 0.4);
    box-shadow: inset 1px 1px 0 rgba(240, 236, 228, 0.08), 0 24px 80px rgba(0, 0, 0, 0.35);
}

.review-slab { width: min(25vw, 320px); min-width: 240px; height: 390px; border-radius: 26px; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; transform: rotate(-8deg) translateY(-28px); }
.review-slab b { color: var(--moon); font-family: "Playfair Display", Georgia, serif; font-size: 2.2rem; letter-spacing: -0.03em; line-height: 1; }
.review-slab em { color: var(--teal); font-family: "Space Grotesk", Arial, sans-serif; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }
.review-slab::before { content: ""; position: absolute; inset: 26px 26px auto auto; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle, rgba(244, 208, 63, 0.36), transparent 68%); }
.review-slab::after { content: ""; position: absolute; inset: auto auto 28px 28px; width: 74px; height: 74px; border-radius: 50%; border: 1px solid var(--teal); opacity: 0.38; }

.candle { width: 128px; height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; }
.hero-candle { margin: 0 0 1.8rem 5vw; }
.wick { width: 2px; height: 18px; background: #2a2a2a; display: block; z-index: 3; }
.flame { width: 32px; height: 54px; margin-bottom: -3px; background: radial-gradient(ellipse at 45% 60%, #f0ece4 0 12%, #f4d03f 13% 54%, #e8a87c 72%); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow: 0 0 40px 20px rgba(232, 168, 124, 0.3), 0 0 80px 40px rgba(244, 208, 63, 0.15); animation: flicker 3s infinite, flame-breathe 4s infinite; transform-origin: center bottom; z-index: 2; }
.wax { width: 58px; height: 86px; border-radius: 17px 17px 9px 9px; background: linear-gradient(90deg, #d4c8b0, #f0ece4 45%, #d4c8b0); box-shadow: inset -12px 0 22px rgba(13, 11, 26, 0.18), 0 0 70px rgba(232, 168, 124, 0.25); }

@keyframes flicker { 0% { transform: scaleX(1) rotate(0deg); } 25% { transform: scaleX(0.92) rotate(-2deg); } 75% { transform: scaleX(1.05) rotate(1.5deg); } 100% { transform: scaleX(1) rotate(0deg); } }
@keyframes flame-breathe { 0%, 100% { box-shadow: 0 0 30px 16px rgba(232, 168, 124, 0.28), 0 0 72px 34px rgba(244, 208, 63, 0.13); } 50% { box-shadow: 0 0 50px 24px rgba(232, 168, 124, 0.34), 0 0 92px 46px rgba(244, 208, 63, 0.18); } }

.scene-philosophy { display: grid; grid-template-columns: 38% 62%; align-items: center; background: radial-gradient(ellipse at 21% 48%, rgba(69, 181, 170, 0.16), transparent 36%), linear-gradient(120deg, #1a1528 0%, #0d0b1a 62%, #1a1528 100%); }
.card-orbit { height: 460px; position: relative; z-index: 2; transform: translateX(2vw); }
.stack-card { position: absolute; width: 240px; height: 320px; border-radius: 22px; display: flex; align-items: flex-end; padding: 1.3rem; }
.stack-card span { color: var(--copper); font-family: "Space Grotesk", Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.stack-a { left: 4vw; top: 0; transform: rotate(-13deg); }
.stack-b { left: 8vw; top: 55px; z-index: 2; transform: rotate(1deg); }
.stack-c { left: 1vw; top: 105px; transform: rotate(12deg); }
.philosophy-copy { grid-column: 2; position: relative; z-index: 2; justify-self: end; }
blockquote { max-width: 13ch; font-size: clamp(3rem, 6.6vw, 6.1rem); margin-top: 1rem; }

.scene-showcase { background: radial-gradient(ellipse at 78% 20%, rgba(107, 91, 149, 0.2), transparent 36%), linear-gradient(150deg, #0d0b1a 0%, #1a1528 42%, #0d0b1a 100%); }
.showcase-header { position: relative; z-index: 2; margin-left: 8vw; transform: rotate(1.5deg); }
.panel-collage { position: relative; z-index: 2; min-height: 520px; margin-top: 3.2rem; margin-left: 12vw; }
.review-panel { border-radius: 24px; padding: 2rem; position: absolute; }
.review-panel:hover, .review-slab:hover, .stack-card:hover { border-color: #45b5aa; box-shadow: inset 1px 1px 0 rgba(240, 236, 228, 0.08), 0 20px 60px rgba(69, 181, 170, 0.15); }
.review-panel h3 { color: var(--copper); margin: 0.75rem 0 1rem; }
.panel-one { width: 280px; left: 0; top: 42px; }
.panel-two { width: 340px; left: 320px; top: 0; }
.panel-three { width: 260px; left: 700px; top: 72px; }

.scene-ethos { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 42%, rgba(232, 168, 124, 0.13), transparent 42%), linear-gradient(180deg, #1a1528, #0d0b1a); }
.ethos-tilt { max-width: 78rem; text-align: center; transform: rotate(-1.5deg); position: relative; z-index: 2; }
.ethos-tilt h2 { margin-top: 1rem; font-size: clamp(2.4rem, 5vw, 5.2rem); }

.scene-closer { display: grid; place-items: center; text-align: center; background: radial-gradient(ellipse at 50% 52%, rgba(244, 208, 63, 0.12) 0%, rgba(232, 168, 124, 0.08) 24%, #0d0b1a 62%, #05040a 100%); }
.closing-light { position: relative; z-index: 2; display: grid; justify-items: center; gap: 1.8rem; }
.closing-candle { transform: scale(0.78); }
.closing-light h2 { max-width: 11ch; }

.chrome-ring { position: absolute; border-radius: 50%; background: conic-gradient(from 45deg, #6b5b95 0%, #45b5aa 50%, #e8a87c 100%); opacity: 0.28; mask: radial-gradient(circle, transparent 59%, #000 60% 62%, transparent 63%); pointer-events: none; }
.hero-ring { width: 420px; height: 420px; right: -150px; top: 12vh; }
.showcase-ring { width: 320px; height: 320px; right: 7vw; top: 11vh; }
.star { position: absolute; width: 13px; height: 13px; background: rgba(240, 236, 228, 0.4); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); z-index: 1; }
.s1{left:14%;top:15%}.s2{left:81%;top:22%}.s3{left:47%;top:83%}.s4{left:71%;top:69%}.s5{left:10%;top:76%}.s6{left:41%;top:16%}.s7{left:91%;top:54%}.s8{left:22%;top:19%}.s9{left:84%;top:73%}.s10{left:65%;top:24%}

@media (max-width: 900px) {
    .scene { padding: 5rem 1.35rem; }
    .scene-hero, .scene-philosophy { grid-template-columns: 1fr; }
    .hero-copy, .philosophy-copy, .showcase-header, .panel-collage { transform: none; margin-left: 0; grid-column: auto; }
    .amber-sidebar { display: none; }
    .card-orbit { height: 270px; transform: scale(0.72) translateX(-7rem); transform-origin: left top; }
    blockquote { max-width: 100%; font-size: clamp(2.5rem, 13vw, 4rem); }
    .panel-collage { min-height: auto; display: grid; gap: 1.2rem; }
    .review-panel { position: relative; left: auto; top: auto; width: 100%; }
    .ethos-tilt { transform: none; }
}