:root{
  --fg:#f6f7fb;
  --muted:rgba(246,247,251,.76);
  --muted2:rgba(246,247,251,.62);

  /* MORE TRANSLUCENT PANELS (key request) */
  --panel:rgba(10,12,16,.40);
  --panel2:rgba(10,12,16,.52);

  --border:rgba(255,255,255,.10);
  --border2:rgba(255,255,255,.16);
  --shadow:0 18px 60px rgba(0,0,0,.42);
  --r:18px; --pad:22px; --max:1120px;

  --link:#a9d8ff;
  --accent:rgba(169,216,255,.22);
}

/* baseline */
html,body{height:100%; margin:0;}
body{
  background:transparent !important;
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  font-size:16px;
  line-height:1.55;
  letter-spacing:.1px;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
p,li{color:var(--muted);}
small,.small{color:var(--muted2);}
a{color:var(--link); text-decoration:none;}
a:hover{text-decoration:underline; text-underline-offset:3px;}

/* headings: tighter, more “exec” */
h1,h2,h3{
  color:var(--fg);
  letter-spacing:-.02em;
  line-height:1.08;
  margin:0 0 .6rem 0;
  font-weight:800;
}
h1{font-size:clamp(38px,4.6vw,58px);}
h2{font-size:clamp(22px,2.7vw,30px); margin-top:28px;}
h3{font-size:18px; margin-top:18px; font-weight:750;}

/* keep background system untouched */
#hud-bg,#hud-shade{pointer-events:none;}

/* stop any page-level solid backgrounds */
header,main,section,footer,.wrap{background:transparent !important;}

/* layout */
.wrap,.container,main{max-width:var(--max); margin:0 auto;}
main{padding:26px 18px 72px;}
header{padding:14px 18px 10px;}

/* top nav: cleaner and less “link soup” */
nav{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
nav a{
  padding:10px 12px;
  border-radius:12px;
  color:rgba(246,247,251,.86);
}
nav a:hover{background:rgba(255,255,255,.06); text-decoration:none;}
nav a[aria-current="page"], nav a.active{
  background:rgba(169,216,255,.10);
  border:1px solid rgba(169,216,255,.20);
}

/* cards/panels: more translucent, consistent spacing */
.card,.panel,.box,.callout,.tile,.feature{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding:var(--pad);
  margin:16px 0;
}

/* if your markup uses plain sections/divs, keep them from exploding into “jumbled blocks” */
section{margin:18px 0;}
section>h2, section>h3{margin-left:2px;}

/* lists */
ul{margin:.35rem 0 0 1.15rem;}
li{margin:.22rem 0;}

/* buttons */
button,.btn,a.btn,input[type=submit]{
  appearance:none;
  border:1px solid var(--border2);
  background:rgba(255,255,255,.08);
  color:var(--fg);
  padding:10px 14px;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;
}
button:hover,.btn:hover,a.btn:hover,input[type=submit]:hover{
  background:rgba(255,255,255,.12);
  text-decoration:none;
}
button:focus-visible,.btn:focus-visible,a.btn:focus-visible,input[type=submit]:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(169,216,255,.14);
}

/* forms */
form{max-width:920px;}
label{display:block; margin:10px 0 6px; color:var(--muted); font-weight:700;}
input,textarea,select{
  width:100%;
  box-sizing:border-box;
  background:rgba(0,0,0,.22);
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  outline:none;
}
textarea{min-height:120px; resize:vertical;}
input:focus,textarea:focus,select:focus{
  border-color:rgba(169,216,255,.55);
  box-shadow:0 0 0 4px rgba(169,216,255,.12);
}

/* tighten “hero” blocks so text looks intentional */
.hero, .lead, .kicker{
  max-width:820px;
}