/* =========================
   Base + Theme
========================= */
:root{
  --bg: #0b0d10;
  --surface: #101418;
  --surface-2:#141a20;
  --text: #e9eef5;
  --muted:#93a1b3;
  --brand:#6ea8fe;
  --brand-2:#a879ff;
  --ring:  rgba(110,168,254,.45);
  --ok:    #2ecc71;
  --warn:  #ffb020;
  --danger:#ff6b6b;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --radius: 14px;
  --radius-sm: 10px;
  --container: 1120px;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f9fc;
    --surface:#ffffff;
    --surface-2:#f2f5f9;
    --text:#1f2a37;
    --muted:#5b6b81;
    --shadow: 0 12px 28px rgba(31,42,55,.10);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

* { box-sizing: border-box; }
html, body { height:100%; }
body{
  margin:0;
  font: 16px/1.55 "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(110,168,254,.20), transparent 60%),
              radial-gradient(900px 600px at 100% 10%, rgba(168,121,255,.18), transparent 55%),
              var(--bg);
}

/* Layout */
.container { max-width: var(--container); margin: 0 auto; padding: 2rem; }
.section   { padding: clamp(2rem, 5vw, 4rem) 0; }

header{
  position: sticky; top:0; z-index: 50;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0)) , var(--surface);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: .9rem 2rem; }
.brand{
  display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.2px; text-decoration:none; color:var(--text);
}
.brand-badge{
  width:28px; height:28px; border-radius:8px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: var(--shadow);
}
nav ul{ list-style:none; display:flex; gap:1rem; margin:0; padding:0; }
nav a{
  color: var(--text); text-decoration:none; padding:.5rem .8rem; border-radius: 10px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
nav a:hover{ background: rgba(110,168,254,.12); transform: translateY(-1px);}
nav a.active{ background: rgba(168,121,255,.16); }

/* Hero */
.hero{
  text-align:center;
  padding: clamp(3rem, 8vw, 6rem) 2rem;
}
.hero h1{ font-size: clamp(2rem, 5vw, 3rem); margin:.25rem 0; }
.hero p{ color: var(--muted); max-width: 720px; margin: .6rem auto 1.2rem; }
.button{
  display:inline-flex; align-items:center; gap:.5rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff; border:none; padding:.9rem 1.2rem; border-radius: 999px; cursor:pointer;
  box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .2s ease;
}
.button:hover{ transform: translateY(-1px); box-shadow: 0 12px 32px rgba(110,168,254,.25); }
.button:focus-visible{ outline: 3px solid var(--ring); outline-offset: 2px; }

/* Cards, Grid, Tags */
.card{
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 1.2rem;
  box-shadow: var(--shadow);
}
.card.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  backdrop-filter: blur(8px);
}

.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); gap: 1.2rem; }
.tag{
  display:inline-block; font-size:.8rem; color: var(--muted);
  padding:.2rem .6rem; border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: var(--surface-2);
}

/* Weather widget */
#weather.card{ padding: 1.2rem 1.2rem 1rem; max-width: 640px; margin: 0 auto 2rem; }
#weather h2{ margin: .2rem 0 1rem; font-size: 1.15rem; color: var(--muted); }
.weather-row{ display:flex; align-items:center; gap:1rem; }
#weather-icon{
  width:64px; height:64px; border-radius:12px; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.weather-main{ display:flex; flex-direction:column; gap:.1rem; }
.weather-place{ font-weight:600; }
.weather-temp{ font-size: 2.25rem; font-weight: 700; line-height: 1; }
.weather-desc{ color: var(--muted); text-transform: capitalize; }
.weather-meta{ margin-top:.6rem; display:flex; gap:1rem; flex-wrap:wrap; color: var(--muted); }
.badge{ padding:.25rem .55rem; border-radius: 999px; background: var(--surface-2); border:1px solid rgba(255,255,255,.10); }

.hidden{ display:none; }

/* Footer */
h1,h2,h3{ margin:0; }
main p{ margin:.35rem 0; }
footer{
  margin-top: 3rem;
  border-top: 1px solid rgba(255,255,255,.08);
  background: var(--surface);
  color: var(--muted);
  text-align:center;
  padding: 1.2rem;
}

/* Forms (future) */
input, textarea, select{
  width:100%; padding:.75rem .9rem; color:var(--text);
  background: var(--surface-2); border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
}
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--ring); outline-offset: 2px;
}
label{ display:block; margin:.6rem 0 .25rem; color: var(--muted); }

/* Utilities */
.mt-1{ margin-top:.5rem; } .mt-2{ margin-top:1rem; } .mt-3{ margin-top:1.5rem; }
.center{ display:grid; place-items:center; }