:root{
  --text:#f3f1ec;
  --muted:#d7d0c6;
  --line:rgba(255,255,255,.16);
  --card:rgba(12,12,14,.84);
  --card-soft:rgba(20,20,22,.66);
  --accent:#ead8a4;
  --header:#060606;
  --footer:#516572;
  --maxw:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background-color:#000;
  background-image:linear-gradient(rgba(0,0,0,.36),rgba(0,0,0,.52)), var(--bg-image);
  background-repeat:repeat;
  background-position:top left;
  line-height:1.55;
}
a{color:#f5ecd7}
a:hover{color:white}
img{max-width:100%;height:auto;display:block}
.site-header{
  background:rgba(0,0,0,.9);
  border-bottom:1px solid rgba(255,255,255,.1);
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(4px);
}
.header-inner{
  max-width:var(--maxw); margin:0 auto; padding:1rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{font-size:clamp(1.35rem,2vw,2rem); font-weight:700; letter-spacing:.02em; text-decoration:none; color:white}
.brand small{display:block; font-size:.7em; font-weight:400; color:#ddd; letter-spacing:0}
.top-links{display:flex; gap:.75rem; flex-wrap:wrap; justify-content:flex-end}
.top-links a,.chip{
  text-decoration:none; border:1px solid rgba(255,255,255,.25); border-radius:999px;
  padding:.45rem .9rem; background:rgba(255,255,255,.06); color:#fff; font-size:.98rem;
}
.page-shell{max-width:var(--maxw); margin:0 auto; padding:1.35rem}
.hero,.card{
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
}
.hero{padding:1.2rem 0 1rem; text-align:center; margin-bottom:1.1rem}
.hero h1{margin:0 0 .6rem; font-size:clamp(1.8rem,3.6vw,3rem); line-height:1.15}
.hero p.lead{max-width:940px; margin:.4rem auto 0; font-size:clamp(1.05rem,2vw,1.22rem); color:var(--muted)}
.section-title{margin:.1rem 0 .8rem; font-size:clamp(1.35rem,2.3vw,2rem)}
.kicker{color:var(--accent); text-transform:uppercase; letter-spacing:.14em; font-size:.82rem; font-weight:700; margin-bottom:.45rem}
.example-nav{display:flex; flex-wrap:wrap; gap:.65rem; justify-content:center; margin:1rem auto .2rem; max-width:1000px}
.example-nav a{display:inline-block; text-decoration:none; padding:.8rem 1rem; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:16px; min-width:220px; text-align:center; font-weight:700}
.example-nav a.active{background:rgba(234,216,164,.16); border-color:rgba(234,216,164,.38)}
.two-col{display:grid; grid-template-columns:1.2fr .9fr; gap:1.2rem; align-items:start}
.card{padding:0.25rem 0 0.65rem}
.list-clean{margin:0; padding-left:1.1rem}
.list-clean li{margin:.32rem 0}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.note{background:var(--card-soft); border-left:4px solid var(--accent); padding:1rem 1.05rem; border-radius:14px}
.note strong{color:#fff}
.stage-wrap{margin:1.2rem auto 1.4rem; max-width:min(100%, 1205px)}
.stage{width:100%; border:none; border-radius:0; overflow:hidden; background:transparent; box-shadow:none}
.stage iframe{width:100%; height:100%; border:0; display:block; background:transparent}
.summary-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-top:1rem}
.summary-grid .mini{background:var(--card-soft); border:1px solid var(--line); border-radius:16px; padding:.9rem}
.table-like{display:grid; gap:.7rem}
.row-card{display:grid; grid-template-columns:1.1fr .85fr 1fr; gap:1rem; padding:1rem; background:var(--card-soft); border:1px solid var(--line); border-radius:18px}
.row-card h3{margin:.1rem 0 .35rem; font-size:1.15rem}
.footer{
  background:rgba(8,8,10,.96);
  border-top:1px solid rgba(255,255,255,.12);
  color:#f0f2f3; margin-top:2rem; padding:2.3rem 1rem 2.6rem; text-align:center;
}
.footer .inner{max-width:1200px; margin:0 auto}
.footer p{margin:.35rem auto; max-width:1150px}
.footer a{color:#fff}
.footer .domains{font-size:1.08rem; font-weight:700}
.badge{display:inline-block; margin:.15rem .18rem; padding:.28rem .62rem; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(255,255,255,.08); font-size:.92rem}
@media (max-width:980px){
  .two-col,.grid-3,.summary-grid,.row-card,.grid-2{grid-template-columns:1fr}
  .header-inner{padding:.9rem 1rem}
  .brand{font-size:1.5rem}
}
@media (max-width:640px){
  .page-shell{padding:.8rem}
  .example-nav a{min-width:unset; width:100%}
  .top-links{display:none}
}

.revue-section{max-width:1000px;margin:0 auto 1.5rem;text-align:center}
.video-embed{position:relative;width:100%;aspect-ratio:16/9;margin:0 auto;overflow:hidden;background:#000}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}