/* === PWRPLN Luxe Tech Theme (gold/black/white) === */
:root {
  --wrap: min(1040px, calc(100% - 32px));
  --header-h: 64px;
  --bg:#0b0c0e;
  --fg:#f4f5f7;
  --muted:#c9cdd3;
  --accent:#D4AF37;       /* royal gold */
  --accent-weak: rgba(212,175,55,0.18);
  --glass: rgba(20,22,26,0.55);
  --glass-stroke: rgba(255,255,255,0.12);
}

*, *::before, *::after { box-sizing: border-box; }

/* Base */
html, body { height: 100%; }
body {
  background: var(--bg);
  margin: 0; color:#e7edf3;
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;
  isolation: isolate;
}

/* Ambient backdrops */
body::before {
  content:""; position:absolute; inset:-10vmax; z-index:-2;
  background:
    repeating-linear-gradient(115deg, rgba(212,175,55,.06) 0px, rgba(212,175,55,.06) 2px, transparent 2px, transparent 8px),
    radial-gradient(70vmax 70vmax at 15% 20%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(90vmax 90vmax at 80% 80%, rgba(0,0,0,0.35), transparent 70%),
    radial-gradient(50vmax 50vmax at 55% 42%, rgba(212,175,55,0.10), transparent 65%),
    radial-gradient(120vmax 120vmax at 50% 50%, var(--bg), var(--bg) 40%, transparent 60%);
  filter: saturate(110%) blur(0.3px);
  animation: drift 28s ease-in-out infinite alternate;
}
body::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.045"/></svg>');
  mix-blend-mode: soft-light;
}

/* Header — luxe glass bar */
header.site-header {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  width: var(--wrap); height: 64px;
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 16px;
  padding: 0 16px;
  background: linear-gradient(180deg, rgba(20,22,26,0.72), rgba(20,22,26,0.55));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 12px 28px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(255,255,255,0.06);
  z-index: 20;
  transition: height .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
header.site-header::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 8px; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, rgba(212,175,55,0.00), rgba(212,175,55,0.65) 18%, rgba(212,175,55,0.65) 82%, rgba(212,175,55,0.00));
  opacity: .85; pointer-events: none;
}

/* Brand */
.site-header .brand{ display:flex; align-items:center; gap:10px; padding-left:2px; }
.site-header .brand img{ width:28px; height:28px; display:block; filter: drop-shadow(0 0 8px rgba(212,175,55,0.35)); border-radius:6px; }
.site-header .brand .wordmark{
  font: 800 1rem/1.1 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
  letter-spacing:.12em; text-transform: uppercase; color:#fafcff;
}

/* Lang toggle */
.lang-toggle { display:flex; align-items:center; gap:6px; align-self:center; }
.lang-toggle button{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.15);
  color:#f0f0f0; font:600 0.8rem/1 system-ui,-apple-system,Segoe UI,Roboto;
  border-radius:6px; padding:4px 10px; cursor:pointer; transition:all .25s ease;
}
.lang-toggle button:hover{ background:rgba(255,255,255,0.1); border-color:rgba(212,175,55,0.45); color:#fff; }
.lang-toggle button.active{ background:var(--accent); color:#0b0c0e; border-color:rgba(212,175,55,0.55); }

/* Nav */
.site-header nav{ display:flex; justify-content:flex-end; }
.site-header nav ul{ display:flex; gap:12px; list-style:none; margin:0; padding:0; justify-content:flex-end; }
.site-header nav a.navlink{
  position: relative; text-decoration:none; color: var(--fg);
  font: 500 0.92rem/1 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
  letter-spacing: .04em; opacity:.9; padding: 10px 14px; border-radius: 10px; transition: all .25s ease;
}
.site-header nav a.navlink::after{
  content:""; position:absolute; left:12px; right:12px; bottom:8px; height:2px; border-radius:1px;
  background: linear-gradient(90deg, rgba(212,175,55,0.00), var(--accent) 22%, var(--accent) 78%, rgba(212,175,55,0.00));
  transform: scaleX(0); transform-origin:center; transition: transform .28s ease;
}
.site-header nav a.navlink:hover{ opacity:1; background: rgba(255,255,255,0.06); }
.site-header nav a.navlink:hover::after{ transform: scaleX(1); }
.site-header nav a.navlink.active{ opacity:1; background: rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 8px rgba(0,0,0,0.20); }
.site-header nav a.navlink.active::after{ transform: scaleX(1); }

/* Shrink on scroll */
body.scrolled header.site-header{ height:56px; background: linear-gradient(180deg, rgba(20,22,26,0.82), rgba(20,22,26,0.62)); }
body.scrolled header.site-header::after{ bottom:6px; opacity:.9; }

/* Hero */
.hero {
  position:relative; display:grid; place-items:center; gap:1.25rem;
  padding:64px 0; margin: var(--header-h) auto 0 auto; width: var(--wrap);
}
.hero::before{
  content:""; position:absolute; inset:-6% -3%; z-index:-1;
  background: radial-gradient(closest-side, rgba(212,175,55,0.05), transparent 70%);
  filter: saturate(110%);
}
.hero .headline{
  font: 800 clamp(2.2rem,6vw,4rem)/1.05 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
  letter-spacing:.01em; color:#fafcff; text-align:center; margin:0; text-shadow:0 2px 18px rgba(0,0,0,0.35);
}
.hero .sub{
  max-width:60ch; text-align:center; margin:10px auto 0; color:#cfd6de; opacity:.96;
  font:500 clamp(1rem,2.4vw,1.25rem)/1.35 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial;
}
img.logo{
  width: clamp(140px,32vw,300px); display:block;
  filter: drop-shadow(0 0 22px rgba(212,175,55,0.25)) drop-shadow(0 8px 18px rgba(0,0,0,0.55));
  animation: fadeIn 800ms ease-out both, float 6s ease-in-out infinite;
}

/* Content container */
#content-slot {
  width: var(--wrap); margin: 12px auto 48px auto; scroll-margin-top: calc(var(--header-h) + 16px);
  padding: 28px 28px;
  border-radius: 14px; background: var(--glass);
  border: 1px solid var(--glass-stroke);
  box-shadow: 0 10px 25px rgba(0,0,0,0.35), inset 0 1px 1px rgba(255,255,255,0.25), inset 0 -1px 1px rgba(255,255,255,0.05);
  opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease;
  backdrop-filter: blur(10px) saturate(120%);
  position: relative;
}
#content-slot::before{
  content:""; position:absolute; left:0; top:10px; bottom:10px; width:2px; border-radius:2px;
  background: linear-gradient(180deg, rgba(212,175,55,0.00), rgba(212,175,55,0.25) 20%, rgba(212,175,55,0.25) 80%, rgba(212,175,55,0.00));
  opacity:.6;
}
#content-slot.ready { opacity:1; transform: translateY(0); }
#content-slot h2 { color:var(--fg); position:relative; padding-bottom:8px; font-size: clamp(1.4rem, 2.2vw, 1.8rem); letter-spacing:.02em; }
#content-slot h2::after{
  content:""; position:absolute; left:0; right:70%; bottom:0; height:2px; border-radius:1px;
  background: linear-gradient(90deg, var(--accent), rgba(212,175,55,0.00));
}
#content-slot a{ color:var(--fg); text-decoration:none; border-bottom:1px solid rgba(212,175,55,0.45); }
#content-slot a:hover{ border-bottom-color: var(--accent); }

/* Pills */
.pills{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; padding:0; list-style:none; }
.pills li{ margin:0; padding:0; }
.glass-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:12px; background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-stroke); color:#fff; text-decoration:none; letter-spacing:.02em; font-weight:500;
  backdrop-filter: blur(6px) saturate(140%); -webkit-backdrop-filter: blur(6px) saturate(140%);
  transition: all .25s ease;
}
.glass-pill:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(212,175,55,0.35);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.22), inset 0 -1px 2px rgba(255,255,255,0.10), 0 2px 8px rgba(0,0,0,0.18);
}

/* Responsive */
@media (max-width: 920px){
  #content-slot{ padding: 24px 24px; }
}
@media (max-width: 520px){
  header.site-header { height: 56px; }
  :root { --header-h: 56px; }
  .site-header nav a.navlink { padding: 8px 10px; font-size: .9rem; }
  .hero { padding: 48px 0; }
  #content-slot { padding: 20px; }
}

/* Animations */
@keyframes fadeIn { from { opacity:0; transform: translateY(10px) scale(.98);} to { opacity:1; transform: translateY(0) scale(1);} }
@keyframes float { 0%,100%{ transform: translateY(-3px);} 50%{ transform: translateY(5px);} }
@keyframes drift { 0%{ transform:translate3d(0,0,0);} 100%{ transform:translate3d(-2vmax,-1vmax,0);} }
@keyframes ribbon{ to{ transform: translate3d(-4%, -2%, 0); } }

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  body::before, .hero::before, img.logo { animation: none !important; }
}