:root{
  --navy:#0d1b2a; --navy-mid:#1a2e45; --navy-light:#243d57;
  --ivory:#f5f0e8; --ivory-dark:#e8e0d0;
  --gold:#c9a84c; --gold-light:#e2c47a; --bronze:#a07840;
  --text:#f5f0e8; --text-dim:rgba(245,240,232,0.55); --text-dimmer:rgba(245,240,232,0.3);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--navy);color:var(--text);font-family:'Cormorant Garamond',Georgia,serif;line-height:1.7;overflow-x:hidden}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.2rem 3rem;background:rgba(13,27,42,0.85);backdrop-filter:blur(12px);border-bottom:1px solid rgba(201,168,76,0.15)}
.nav-logo{font-family:'DM Mono',monospace;font-size:0.75rem;letter-spacing:0.18em;color:var(--gold);text-transform:uppercase;text-decoration:none}
.nav-links{display:flex;gap:1.6rem;list-style:none;align-items:center}
.nav-links a{font-family:'DM Mono',monospace;font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--text-dim);text-decoration:none;transition:color 0.3s}
.nav-links a:hover,.nav-links a.active{color:var(--gold-light)}
.lang-toggle{display:flex;gap:0.4rem}
.lang-btn{font-family:'DM Mono',monospace;font-size:0.58rem;letter-spacing:0.1em;background:none;border:1px solid rgba(201,168,76,0.3);color:var(--text-dim);padding:0.25rem 0.6rem;cursor:pointer;text-transform:uppercase;transition:all 0.3s}
.lang-btn.active{color:var(--navy);background:var(--gold);border-color:var(--gold)}

/* BUTTONS */
.btn-primary{display:inline-block;padding:0.85rem 2.2rem;background:var(--gold);color:var(--navy);text-decoration:none;font-family:'DM Mono',monospace;font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;border:none;cursor:pointer;transition:all 0.3s}
.btn-primary:hover{background:var(--gold-light);transform:translateY(-2px)}
.btn-outline{display:inline-block;padding:0.85rem 2.2rem;background:transparent;color:var(--ivory-dark);text-decoration:none;font-family:'DM Mono',monospace;font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;border:1px solid rgba(245,240,232,0.3);cursor:pointer;transition:all 0.3s}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}

/* PAGE HERO */
.page-hero{padding:9rem 2rem 3.5rem;text-align:center;position:relative;overflow:hidden;border-bottom:1px solid rgba(201,168,76,0.12)}
.page-hero .hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 40%,rgba(26,46,69,0.9) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 80% 30%,rgba(201,168,76,0.06) 0%,transparent 60%)}
.page-hero .hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(201,168,76,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,0.04) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 80%)}
.page-label{font-family:'DM Mono',monospace;font-size:0.62rem;letter-spacing:0.25em;color:var(--gold);text-transform:uppercase;margin-bottom:1rem;position:relative}
.page-title{font-size:clamp(2.2rem,6vw,3.6rem);font-weight:300;letter-spacing:0.04em;color:var(--ivory);margin-bottom:1.2rem;position:relative;line-height:1.1}
.page-title em{font-style:italic;color:var(--gold)}
.page-intro{max-width:600px;margin:0 auto;color:var(--text-dim);font-weight:300;font-size:1.05rem;position:relative}

/* SECTIONS */
section{padding:5rem 2rem}
.container{max-width:900px;margin:0 auto}
.alt{background:var(--navy-mid);border-top:1px solid rgba(201,168,76,0.12);border-bottom:1px solid rgba(201,168,76,0.12)}
.section-label{font-family:'DM Mono',monospace;font-size:0.6rem;letter-spacing:0.25em;color:var(--gold);text-transform:uppercase;margin-bottom:1rem}
.section-title{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:300;color:var(--ivory);margin-bottom:2rem;line-height:1.2}
.section-title em{font-style:italic;color:var(--gold-light)}

/* PROSE */
.prose p{color:var(--text-dim);font-size:1.05rem;font-weight:300;margin-bottom:1.2rem;max-width:700px}
.prose p.lead{color:var(--ivory-dark);font-size:1.2rem;font-style:italic}

/* QUESTION PANEL */
.q-panel{background:var(--navy-mid);border:1px solid rgba(201,168,76,0.2);padding:3rem 2.5rem;max-width:720px;margin:0 auto 2.5rem;text-align:center;position:relative}
.q-main{font-size:clamp(1.3rem,3vw,1.7rem);font-weight:300;font-style:italic;color:var(--ivory);line-height:1.55}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem}
.card{background:var(--navy);border:1px solid rgba(201,168,76,0.15);padding:1.7rem;position:relative;overflow:hidden;transition:border-color 0.3s,transform 0.3s}
.alt .card{background:rgba(13,27,42,0.5)}
.card:hover{border-color:rgba(201,168,76,0.4);transform:translateY(-3px)}
.card .num{font-family:'DM Mono',monospace;font-size:0.55rem;letter-spacing:0.2em;color:var(--gold);margin-bottom:0.7rem}
.card h3{font-size:1.15rem;font-weight:400;color:var(--ivory);margin-bottom:0.5rem;font-family:inherit}
.card .purpose{display:block;font-family:'DM Mono',monospace;font-size:0.55rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-light);margin-bottom:0.4rem}
.card p{font-size:0.92rem;color:var(--text-dim);font-weight:300;line-height:1.55}

/* CHANNELS */
a.card{text-decoration:none;color:inherit;display:block}
a.card .ext{display:block;font-family:'DM Mono',monospace;font-size:0.58rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-top:0.9rem}

/* FOOTER */
footer{background:#080f18;border-top:1px solid rgba(201,168,76,0.15);padding:2.5rem 2rem;text-align:center}
footer .f-title{font-family:'DM Mono',monospace;font-size:0.65rem;letter-spacing:0.25em;color:var(--gold);text-transform:uppercase;margin-bottom:0.4rem}
footer p{font-size:0.85rem;color:var(--text-dimmer);font-style:italic}
footer .f-nav{margin-top:1rem;display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
footer .f-nav a{font-family:'DM Mono',monospace;font-size:0.55rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim);text-decoration:none}
footer .f-nav a:hover{color:var(--gold-light)}

/* LANG + REVEAL */
.lang[hidden]{display:none}
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s,transform 0.7s}
.reveal.visible{opacity:1;transform:none}

/* RESPONSIVE */
@media(max-width:768px){
  nav{padding:1rem 1.2rem;flex-wrap:wrap;gap:0.6rem}
  .nav-links{gap:0.9rem;flex-wrap:wrap;justify-content:flex-end}
  .nav-links a{font-size:0.56rem}
  .page-hero{padding:7rem 1.2rem 2.5rem}
  section{padding:3.5rem 1.2rem}
}