:root{--bg:#0b0b0d;--panel:#0f1720;--muted:#9aa4b2;--accent:#e6b800;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;background:linear-gradient(180deg,#050508 0%, #0b0b0d 100%);color:#fff;line-height:1.5}
.container{max-width:980px;margin:0 auto;padding:28px}
header{display:flex;align-items:center;gap:18px;padding:18px 0}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:64px;width:auto;border-radius:6px}
h1{font-size:28px;margin:0}
.tag{color:var(--accent);font-weight:600;font-size:14px}

.hero{display:grid;grid-template-columns:1fr;gap:20px;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border:1px solid rgba(255,255,255,0.03);border-radius:12px}
.hero .title{font-size:44px;line-height:1;margin:0}
.hero p.lead{color:var(--muted);margin:6px 0 0}
.ctas{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:8px;background:#111418;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,0.04);font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--accent),#ffb84d);color:#0b0b0d}

section{margin-top:22px}
.card{padding:18px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);border:1px solid rgba(255,255,255,0.03);border-radius:10px}
h2{margin:0 0 8px;font-size:20px}
.muted{color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.socials{display:flex;flex-wrap:wrap;gap:8px}
.socials a{color:var(--accent);text-decoration:none;font-weight:600}

footer{margin-top:28px;padding:18px;text-align:center;color:var(--muted);font-size:13px}

/* Decorative subdued background logo behind content */
body.with-bg{position:relative}
body.with-bg::before{
  content:"";
  position:fixed;
  inset:0;
  /* try primary logo, fall back to cropped logo if needed */
  /* background-image: url('logo_notext.png'), url('eologo_crop_hc.png'); */
  background-image: url('assets/logo_notext.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: 65%, 65%;
  opacity: 0.20; /* slightly more visible */
  pointer-events: none;
  /*filter: grayscale(100%) brightness(1.15);*/
  z-index:0;
}

/* Ensure page content sits above the decorative background */
.container{position:relative;z-index:1}

@media(max-width:880px){
  body.with-bg::before{background-position: center 40%, center 40%;background-size:70%,70%;opacity:0.08}
}

@media(min-width:880px){
  .hero{grid-template-columns:1fr 360px;align-items:center}
  .hero .title{font-size:48px}
  h1{font-size:32px}
}