:root{
  --bg: #050b12;
  --panel: rgba(9, 22, 34, 0.62);
  --panel-2: rgba(9, 22, 34, 0.78);
  --border: rgba(76,201,255,0.20);
  --text: rgba(225,245,255,0.94);
  --muted: rgba(225,245,255,0.74);
  --muted2: rgba(225,245,255,0.55);
  --accent: rgba(76,201,255,0.95);
  --accent-soft: rgba(76,201,255,0.25);
}

/* background: deep blue grid */
body{
  background:
    radial-gradient(1000px 700px at 55% -10%, rgba(76,201,255,0.22), transparent 60%),
    radial-gradient(900px 650px at 10% 25%, rgba(76,201,255,0.10), transparent 55%),
    radial-gradient(1000px 800px at 90% 80%, rgba(76,201,255,0.08), transparent 60%),
    linear-gradient(180deg, #040910, #061427 55%, #03070c);
  position: relative;
}

body:before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  opacity: 0.35;
  background:
    repeating-linear-gradient(0deg, rgba(76,201,255,0.06) 0, rgba(76,201,255,0.06) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, rgba(76,201,255,0.05) 0, rgba(76,201,255,0.05) 1px, transparent 1px, transparent 32px);
  mask-image: radial-gradient(650px 520px at 55% 30%, rgba(0,0,0,0.95), transparent 70%);
}

/* NAV */
.navbar{
  background: rgba(3, 12, 20, 0.82) !important;
  border-bottom: 1px solid rgba(76,201,255,0.30) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
}
.nav-brand-text{ color: rgba(225,245,255,0.95) !important; }

.buttons button{
  border-bottom: 2px solid rgba(76,201,255,0.18) !important;
  background: rgba(6, 20, 35, 0.30) !important;
}

.buttons button:hover{
  border-color: rgba(76,201,255,0.38) !important;
  transform: translateY(-1px);
}

/* primary CTA */
a.btn, button.btn{ border-radius: 14px !important; }

a.btn{
  background: linear-gradient(135deg, rgba(76,201,255,0.95), rgba(135,220,255,0.75)) !important;
  color: #061427 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 16px 50px rgba(76,201,255,0.20);
}

a.btn:hover{ filter: brightness(1.03); }

.btn-ghost{
  border: 1px solid rgba(76,201,255,0.18) !important;
  background: rgba(6, 20, 35, 0.26) !important;
  color: rgba(225,245,255,0.88) !important;
}
.btn-ghost:hover{
  border-color: rgba(76,201,255,0.35) !important;
  background: rgba(6, 20, 35, 0.38) !important;
}

/* panels */
.panel{
  background:
    radial-gradient(900px 560px at 15% 10%, rgba(76,201,255,0.12), transparent 60%),
    radial-gradient(800px 540px at 90% 85%, rgba(76,201,255,0.09), transparent 55%),
    rgba(6, 20, 35, 0.46) !important;
  border: 1px solid rgba(76,201,255,0.16) !important;
}
.panel:hover{ border-color: rgba(76,201,255,0.34) !important; }

/* hero */
.hero-orb{
  background:
    radial-gradient(700px 520px at 50% 30%, rgba(76,201,255,0.16), transparent 55%),
    rgba(6, 20, 35, 0.35) !important;
  border: 1px solid rgba(76,201,255,0.18);
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);
  position: relative;
}
.hero-orb:before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 50% 50%, rgba(76,201,255,0.14), transparent 55%),
    radial-gradient(circle at 40% 55%, rgba(76,201,255,0.10), transparent 60%);
  filter: blur(18px);
  animation: orbPulse 4.8s ease-in-out infinite;
  pointer-events:none;
}
.hero-orb:after{
  content:"";
  position:absolute;
  inset: 14px;
  border-radius: 18px;
  border: 1px solid rgba(76,201,255,0.12);
  pointer-events:none;
}

@keyframes orbPulse{
  0%,100%{ transform: scale(0.98); opacity: .55; }
  50%{ transform: scale(1.02); opacity: .85; }
}

/* chart accents */
.svgchart .line2{ stroke: rgba(76,201,255,0.78) !important; }

/* center dashboard grid + section heads */
.section-head{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 760px;
}

.section-subtitle{ color: rgba(225,245,255,0.70) !important; }

#dashboard .section-inner{
  width: min(1240px, 92vw) !important; /* override sections.css cap */
}

/* centered columns */
.weather-grid{
  grid-template-columns: minmax(0, 820px) minmax(0, 360px) !important;
  justify-content: center;
}

@media (max-width: 980px){
  .weather-grid{ grid-template-columns: 1fr !important; }
}

#dashboard .panel-pad{ padding: 20px !important; }


/* small-screen overrides */
@media (max-width: 520px){
  #dashboard .section-inner{ width: min(1240px, 96vw) !important; }
  #dashboard .panel-pad{ padding: 14px !important; }
}