:root{
  --eco-green:#00ff4c;   /* brighter nature */
  --eco-blue:#00b7ff;    /* tech */
  --eco-gold:#ffcc00;    /* golden light */
  --eco-white:#eef9ff;
  --eco-bg0:#040913;
  --eco-bg1:#071827;

  --eco-glow-green: 0 0 14px rgba(0,255,76,.35), 0 0 28px rgba(0,255,76,.18);
  --eco-glow-blue : 0 0 14px rgba(0,183,255,.35), 0 0 28px rgba(0,183,255,.18);
  --eco-glow-gold : 0 0 14px rgba(255,204,0,.45), 0 0 36px rgba(255,204,0,.22);
}

/* Global background + text */
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 800px at 18% 12%, rgba(0,255,76,.22), transparent 58%),
    radial-gradient(900px 700px at 82% 14%, rgba(0,183,255,.26), transparent 58%),
    radial-gradient(780px 560px at 52% 92%, rgba(255,204,0,.18), transparent 62%),
    linear-gradient(180deg,var(--eco-bg0),var(--eco-bg1)) !important;
  color:var(--eco-white) !important;
}

/* Links */
a{ color:var(--eco-green); text-decoration-color:rgba(0,255,76,.35); }
a:hover{ color:var(--eco-gold); text-shadow: var(--eco-glow-gold); }

/* Headings: blue tech glow */
h1,h2,h3{
  color:var(--eco-white) !important;
  text-shadow: var(--eco-glow-blue);
}

/* Make accents show (stop "everything white") */
strong, b{ color:var(--eco-white) !important; }
em, i{ color:rgba(238,249,255,.92) !important; }

/* Buttons / pills / badges */
button, .btn, .pill, .cta, .badge, input[type="submit"]{
  border-radius:999px !important;
}
.btn, .pill, .cta, input[type="submit"]{
  border:1px solid rgba(0,183,255,.45) !important;
  background:rgba(0,183,255,.12) !important;
  color:var(--eco-white) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.btn:hover, .pill:hover, .cta:hover, input[type="submit"]:hover{
  border-color:rgba(255,204,0,.70) !important;
  background:rgba(255,204,0,.14) !important;
  color:var(--eco-white) !important;
  box-shadow: var(--eco-glow-gold);
}

/* NAV + DROPDOWNS: always above, clickable, readable */
nav{
  position:sticky !important;
  top:0 !important;
  z-index:2147483647 !important;
  backdrop-filter: blur(8px);
}
nav, nav *{ pointer-events:auto !important; }
nav a{ color:var(--eco-white) !important; }
nav a:hover{ color:var(--eco-gold) !important; text-shadow: var(--eco-glow-gold); }

nav li{ position:relative !important; }
nav li ul{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  z-index:2147483647 !important;
  min-width: 220px;
  background: rgba(4,9,19,.92);
  border:1px solid rgba(0,183,255,.35);
  border-radius:14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  padding:10px 10px;
}
nav li:hover > ul,
nav li:focus-within > ul{
  display:block !important;
}
nav li ul a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
}
nav li ul a:hover{
  background: rgba(255,204,0,.10);
  border: 1px solid rgba(255,204,0,.25);
}

/* KILL legacy blockers (subheader/quick nav overlays) */
.subheader,.subnav,.secondary-nav,.legacy-subheader{ display:none !important; }
#econQuickNav, .econQuickNav, .quicknav, .quick-nav{ display:none !important; }

/* VIDEO/hero spacing */
video, .video-slot, .video-wrap, .hero-video, .carousel, .carousel-wrap{
  max-width:1200px !important;
  margin:18px auto !important;
  display:block !important;
}

/* HUBS layout: force responsive columns (fix "too wide") */
.hubs, .hub-grid, .hubs-grid, .cards, .card-grid, .grid{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}
.hub-grid, .hubs-grid, .card-grid{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap:16px !important;
}
.hub, .hub-card, .card{
  background: rgba(0,183,255,.06);
  border:1px solid rgba(0,183,255,.22);
  border-radius:18px;
  padding:14px;
}
.hub:hover, .hub-card:hover, .card:hover{
  border-color: rgba(0,255,76,.35);
  box-shadow: var(--eco-glow-green);
}

/* SIGIL as logo (top-right / in header) */
.eco-sigil{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}
.eco-sigil a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:999px;
  border:1px solid rgba(255,204,0,.70);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,204,0,.18), transparent 55%),
    rgba(255,204,0,.08);
  box-shadow: var(--eco-glow-gold);
}
.eco-sigil a:hover{
  border-color:rgba(0,255,76,.70);
  background:
    radial-gradient(circle at 30% 30%, rgba(0,255,76,.18), transparent 55%),
    rgba(0,255,76,.08);
  box-shadow: var(--eco-glow-green);
}
.eco-sigil img, .eco-sigil svg{
  width:38px;
  height:38px;
  display:block;
}