:root{
  --text:#f8fbff;
  --muted:#c7d4de;
  --line:rgba(255,255,255,.20);
  --glass1:rgba(26,52,73,.62);
  --glass2:rgba(8,27,42,.76);
  --blue:#3fa9f5;
  --cyan:#68c9ff;
  --orange:#ffad2f;
  --green:#23c98c;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  background:#122f46;
  overflow-x:hidden;
}

.scene{
  position:fixed;
  inset:0;
  z-index:-3;
  overflow:hidden;
  background:
    radial-gradient(circle at 86% 24%,rgba(238,180,100,.45),transparent 31%),
    linear-gradient(135deg,#2b6c98,#b99667);
}

.scene img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  opacity:1;
}

.scene-overlay{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(180deg,rgba(4,22,35,.22),rgba(4,20,32,.05) 40%,rgba(2,14,23,.42)),
    radial-gradient(circle at 92% 24%,rgba(255,206,116,.18),transparent 33%);
}

/* COMPACT DESKTOP HEADER */
.topbar{
  position:sticky;
  top:0;
  z-index:30;
  height:80px;
  background:rgba(15,46,70,.38);
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(20px) saturate(118%);
  box-shadow:0 8px 20px rgba(0,0,0,.07);
}

.topbar-inner{
  width:min(1380px,94vw);
  height:100%;
  margin:auto;
  display:flex;
  align-items:center;
  gap:24px;
}

.brand{
  min-width:310px;
  display:flex;
  align-items:center;
  gap:13px;
}

.brand-logo{
  width:62px;
  height:46px;
  color:#fff;
  flex:0 0 auto;
}
.brand-logo svg{width:100%;height:100%}

.brand-copy{
  display:flex;
  flex-direction:column;
  line-height:1.08;
}

.brand-copy strong{
  font-size:23px;
  letter-spacing:-.4px;
}

.brand-copy span{
  margin-top:4px;
  font-size:14px;
  color:#d9e8f2;
}

.brand-copy small{
  margin-top:4px;
  font-size:11px;
  color:#bcd1df;
}

nav{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:0;
}

nav a{
  color:#eef7fc;
  text-decoration:none;
  padding:12px 16px;
  border-radius:10px;
  font-size:14px;
  font-weight:650;
  white-space:nowrap;
  transition:.18s;
}

nav a:hover,nav a.active{
  background:linear-gradient(180deg,rgba(65,164,235,.90),rgba(37,125,190,.90));
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}

.navico{margin-right:5px;font-size:16px}

.header-right{
  display:flex;
  align-items:center;
  gap:18px;
  flex:0 0 auto;
}

.place{
  display:flex;
  align-items:center;
  gap:8px;
  padding-right:18px;
  border-right:1px solid rgba(255,255,255,.20);
}

.place svg{width:20px;height:20px;fill:#fff}
.place-copy,.clock{display:flex;flex-direction:column}
.place strong{font-size:14px}
.place small,.clock small{color:#cddce6;font-size:10px}
.country-line{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:3px;
}
.country-line img{
  width:20px;
  height:auto;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.20);
}

.clock{
  min-width:100px;
  text-align:right;
}

.clock strong{
  font-size:24px;
  letter-spacing:.2px;
}

/* MAIN AREA */
.page{
  width:min(1320px,92vw);
  margin:28px auto 22px;
  position:relative;
}

/* no more negative-left clipping */
.slogan{
  position:absolute;
  z-index:2;
  pointer-events:none;
  font-family:"Segoe Script","Brush Script MT",cursive;
  color:rgba(255,255,255,.94);
  text-shadow:0 3px 14px rgba(0,0,0,.48);
}

.slogan-right{
  top:-8px;
  right:18px;
  width:230px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  transform:rotate(-4deg);
  font-size:17px;
  line-height:1.22;
}

.slogan-right span:last-child{
  margin-right:12px;
}

.glass{
  border:1px solid var(--line);
  background:linear-gradient(145deg,var(--glass1),var(--glass2));
  border-radius:16px;
  backdrop-filter:blur(18px) saturate(125%);
  box-shadow:0 13px 30px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.06);
}

.grid-main{
  display:grid;
  padding-top:34px;
  grid-template-columns:1.08fr 1fr;
  gap:14px;
}

.current-card{
  min-height:330px;
  padding:20px 24px 18px;
}

.card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
}

.align-center{align-items:center}

h2{
  margin:0;
  font-size:20px;
  letter-spacing:-.25px;
}

.muted{color:var(--muted)}

.location-line{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:5px;
  color:#d5e4ee;
  font-size:13px;
}

.location-line svg{
  width:15px;
  height:15px;
  fill:#80c7ff;
}

.live-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
  text-align:right;
}

.live{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  background:linear-gradient(#25c997,#16a978);
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}

.live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fff;
}

.live-wrap small{font-size:10px;color:#dbe6ee}

.current-content{
  display:flex;
  align-items:center;
  gap:24px;
  margin:38px 0 28px;
}

.weather-symbol{
  position:relative;
  width:125px;
  height:90px;
  flex:0 0 125px;
}

.sun{
  position:absolute;
  width:65px;
  height:65px;
  left:10px;
  top:0;
  border-radius:50%;
  background:radial-gradient(circle at 38% 35%,#fff7a5,#ffd33d 49%,#f4aa00 100%);
  box-shadow:0 0 28px rgba(255,199,27,.55);
}

.sun::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:50%;
  background:repeating-conic-gradient(#ffd33b 0 4deg,transparent 4deg 28deg);
  -webkit-mask:radial-gradient(circle,transparent 0 58%,#000 59%);
          mask:radial-gradient(circle,transparent 0 58%,#000 59%);
}

.cloud{
  position:absolute;
  border-radius:40px;
  background:linear-gradient(#fff,#dbe9f4);
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.18));
}

.cloud-a{
  width:82px;
  height:32px;
  left:40px;
  top:50px;
}

.cloud-a::before,.cloud-a::after{
  content:"";
  position:absolute;
  background:inherit;
  border-radius:50%;
}

.cloud-a::before{width:42px;height:42px;left:9px;top:-21px}
.cloud-a::after{width:48px;height:48px;right:6px;top:-26px}
.cloud-b{width:44px;height:18px;left:65px;top:60px;opacity:.70}

.temperature{
  font-size:64px;
  line-height:.92;
  font-weight:800;
  letter-spacing:-2px;
}

.condition{
  margin-top:12px;
  font-size:23px;
  font-weight:800;
}

.summary{
  margin-top:7px;
  color:#dbe6ed;
  font-size:13px;
}

.sun-times{
  display:flex;
  gap:65px;
  margin-top:18px;
}

.sun-time{
  display:flex;
  align-items:center;
  gap:10px;
}

.sunrise-icon{
  font-size:29px;
  color:#ffd235;
}

.sun-time div:last-child{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.sun-time strong{font-size:13px}
.sun-time small{font-size:10px;color:#c9d8e2}

.right-stack{display:flex;flex-direction:column;gap:10px}

.wind-card{
  min-height:205px;
  display:grid;
  grid-template-columns:1fr 195px;
  align-items:center;
  padding:18px 22px;
}

.wind-title{
  display:flex;
  align-items:center;
  gap:8px;
}
.wind-title svg{width:27px;height:27px}

.wind-speed-line{
  display:flex;
  align-items:baseline;
  gap:7px;
  margin-top:12px;
}

.wind-value{
  font-size:50px;
  line-height:.92;
  font-weight:800;
}
.unit{font-size:21px;font-weight:800}

.gust-box{
  margin-top:17px;
  max-width:250px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:11px;
  background:rgba(255,255,255,.035);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
}

.gust-label{display:flex;align-items:center;gap:8px}
.gustico{font-size:21px}

.compass{
  width:165px;
  height:165px;
  border-radius:50%;
  position:relative;
  margin:auto;
  border:1px solid rgba(255,255,255,.28);
  background:radial-gradient(circle,rgba(8,27,42,.96) 0 39%,rgba(255,255,255,.06) 40% 58%,rgba(255,255,255,.02) 59%);
  box-shadow:inset 0 0 25px rgba(0,0,0,.30);
}

.compass-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.17);
}
.r1{inset:12px}.r2{inset:29px}

.cardinal{
  position:absolute;
  font-weight:700;
  font-size:10px;
  color:#eaf3f8;
}
.n{top:6px;left:50%;transform:translateX(-50%)}
.s{bottom:6px;left:50%;transform:translateX(-50%)}
.e{right:6px;top:50%;transform:translateY(-50%)}
.w{left:6px;top:50%;transform:translateY(-50%)}
.ne{top:24px;right:27px;font-size:8px;color:#cbd8e0}
.nw{top:24px;left:27px;font-size:8px;color:#cbd8e0}
.se{bottom:24px;right:27px;font-size:8px;color:#cbd8e0}
.sw{bottom:24px;left:27px;font-size:8px;color:#cbd8e0}

.needle{
  position:absolute;
  width:6px;
  height:64px;
  left:calc(50% - 3px);
  top:18px;
  transform-origin:50% 64px;
  background:linear-gradient(#49b7ff 0 59%,transparent 59%);
  clip-path:polygon(50% 0,100% 63%,65% 56%,65% 100%,35% 100%,35% 56%,0 63%);
}

.compass-center{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.compass-center strong{font-size:23px}
.compass-center small{font-size:12px;color:#d8e4ec}

.metric-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.metric{
  min-height:102px;
  padding:10px 6px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:4px;
}

.metric-symbol{font-size:22px;line-height:1}
.blue,.cyan{color:#5dc1ff}
.orange{color:#ff9d2f}
.metric span{color:#e4edf3;font-size:12px}
.metric strong{font-size:17px}
.metric small{font-size:9px;color:#bccdd8}


.live-extra{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:10px;
}

.extra-card{
  min-height:54px;
  padding:7px 12px;
  display:flex;
  align-items:center;
  gap:10px;

  /* intentionally lighter than normal glass cards */
  background:linear-gradient(
    145deg,
    rgba(28,58,78,.34),
    rgba(8,29,45,.42)
  );
  border-color:rgba(255,255,255,.13);
  backdrop-filter:blur(13px) saturate(115%);
  box-shadow:
    0 7px 18px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.04);
  border-radius:13px;
}

.extra-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:12px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
}

.gust-extra{color:#8ed3ff}
.uv-extra{color:#ffd665}
.solar-extra{color:#ffd04d;font-size:16px}
.rain-extra{color:#69caff;font-size:17px}

.extra-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}

.extra-copy span{
  color:#d4e0e8;
  font-size:9px;
}

.extra-copy strong{
  color:#fff;
  font-size:14px;
  line-height:1.05;
  white-space:nowrap;
}

.extra-copy strong span{
  color:#fff;
  font-size:inherit;
}

.extra-copy small{
  color:#b7c7d1;
  font-size:8px;
  line-height:1.05;
}

.extra-copy small span{
  color:#c9d8e2;
  font-size:inherit;
}

.grid-bottom{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:14px;
  margin-top:14px;
}

.chart-card,.forecast{padding:16px 20px}

.title-with-icon{
  display:flex;
  align-items:center;
  gap:9px;
}

.chart-title-icon,.calendar-icon{font-size:23px}

.tabs{
  display:flex;
  gap:3px;
  padding:3px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

.tabs button{
  border:0;
  border-radius:999px;
  padding:6px 12px;
  background:transparent;
  color:#e4eef4;
  cursor:pointer;
  font-size:11px;
}

.tabs button.selected{
  background:linear-gradient(#42aaf2,#2587ce);
}

.chart-wrap{
  height:220px;
  margin-top:10px;
}

.forecast-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:7px;
  margin-top:18px;
}

.forecast-grid>div{
  min-height:155px;
  padding:12px 5px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.04);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-align:center;
}

.forecast-grid b{font-size:13px}
.forecast-icon{font-size:29px}
.forecast-grid strong{font-size:17px}
.forecast-grid small{font-size:9px;color:#cad8e1}

.statusbar{
  margin-top:24px;
  min-height:72px;
  background:rgba(8,25,35,.79);
  border-top:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(18px);
}

.status-inner{
  width:min(1440px,94vw);
  min-height:72px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr) 1.1fr;
  align-items:center;
  gap:18px;
}

.status-item{
  display:flex;
  align-items:center;
  gap:10px;
}

.status-item>span{
  min-width:24px;
  text-align:center;
}

.status-dot{
  width:15px;
  height:15px;
  min-width:15px!important;
  border-radius:50%;
}

.green{background:#2bd18f}
.wifi,.database,.pulse{font-size:23px}

.status-item div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.status-item strong{font-size:12px}
.status-item small{font-size:9px;color:#b9c9d4}

.footer-brand{
  text-align:right;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.footer-brand strong{
  font-family:"Segoe Script","Brush Script MT",cursive;
  font-size:20px;
  font-weight:500;
}

.footer-brand span{
  font-family:"Segoe Script","Brush Script MT",cursive;
  font-size:13px;
}

.footer-brand small{
  margin-top:2px;
  font-size:9px;
  color:#aebfca;
}

/* for 1600-ish desktop screens like user's screenshot */
@media(max-width:1650px){
  .slogan{
    font-size:15px;
    margin-left:4px;
  }

  .page{
    width:min(1220px,92vw);
    margin-top:22px;
  }

  .topbar-inner{
    width:min(1260px,94vw);
  }

  .brand{min-width:285px}
  .brand-copy strong{font-size:21px}
  nav a{padding:10px 13px;font-size:13px}
}

/* tablets / narrow desktop */
@media(max-width:1180px){
  .slogan{display:none}
  .live-extra{grid-template-columns:repeat(2,1fr)}
  .topbar{height:auto;min-height:74px}
  .topbar-inner{padding:8px 0}
  nav{display:none}
  .grid-main,.grid-bottom{grid-template-columns:1fr}
  .page{width:94vw}
  .slogan{display:none}
}

/* mobile */
@media(max-width:760px){
  .live-extra{grid-template-columns:1fr 1fr}
  .brand{min-width:0;flex:1}
  .brand-logo{width:48px;height:38px}
  .brand-copy strong{font-size:18px}
  .brand-copy span{font-size:11px}
  .brand-copy small{display:none}
  .header-right .place{display:none}
  .clock{min-width:70px}
  .clock strong{font-size:19px}

  .current-content{
    flex-direction:column;
    align-items:flex-start;
  }

  .temperature{font-size:56px}
  .wind-card{grid-template-columns:1fr;gap:18px}
  .metric-row{grid-template-columns:repeat(2,1fr)}
  .forecast-grid{grid-template-columns:repeat(2,1fr)}
  .tabs{display:none}

  .status-inner{
    grid-template-columns:1fr 1fr;
    padding:16px 0;
  }

  .footer-brand{text-align:left}
}


.history-status{
  display:block;
  margin-top:2px;
  color:#aebfca;
  font-size:8px;
  font-weight:500;
}

.tabs button{
  transition:background .15s ease, color .15s ease;
}


.forecast-grid .forecast-loading,
.forecast-grid .forecast-error{
  grid-column:1 / -1;
  min-height:155px;
}


.forecast-source-status{
  display:block;
  margin-top:2px;
  color:#aebfca;
  font-size:8px;
  font-weight:500;
  letter-spacing:.05px;
}


/* BUILD014 SUBPAGES */
.subpage{
  width:min(1220px,92vw);
  margin:26px auto 30px;
}

.subpage-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px;
}

.subpage-head h1{
  margin:0;
  font-size:34px;
  letter-spacing:-1px;
  text-shadow:0 3px 16px rgba(0,0,0,.22);
}

.subpage-head p{
  margin:5px 0 0;
  color:#d8e6ef;
  font-size:14px;
}

.subpage-live{
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:rgba(12,42,61,.38);
  backdrop-filter:blur(12px);
  font-size:11px;
}

.subpage-live span{
  display:inline-block;
  width:7px;height:7px;
  border-radius:50%;
  background:#28ce91;
  margin-right:6px;
}

.today-stat-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:9px;
  margin-bottom:14px;
}

.stat-card{
  min-height:102px;
  padding:14px 11px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  gap:7px;
}

.stat-card span{
  font-size:10px;
  color:#c8d7e1;
}

.stat-card strong{
  font-size:18px;
}

.stat-card strong span{
  font-size:inherit;
  color:#fff;
}

.stat-card small{
  color:#aebfca;
  font-size:8px;
}

.sub-chart-card{
  padding:18px 20px;
}

.sub-chart-wrap{
  height:390px;
  margin-top:14px;
}

.history-control-card{
  padding:14px 18px;
  display:flex;
  gap:30px;
  align-items:center;
  margin-bottom:14px;
}

.control-group{
  display:flex;
  align-items:center;
  gap:10px;
}

.control-group>span{
  color:#bfcfda;
  font-size:11px;
}

.segment{
  display:flex;
  gap:3px;
  padding:3px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
}

.segment button{
  border:0;
  color:#e7f0f5;
  background:transparent;
  padding:7px 12px;
  border-radius:999px;
  cursor:pointer;
  font-size:10px;
}

.segment button.selected{
  background:linear-gradient(#42aaf2,#2587ce);
}

.history-big-chart{
  height:460px;
  margin-top:12px;
}

.history-info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:12px;
}

.info-card{
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.info-card span{
  color:#bdced9;
  font-size:10px;
}

.info-card strong{
  font-size:13px;
}

.subpage-foot{
  text-align:right;
  margin-top:12px;
  font-size:9px;
  color:#c0d0da;
}

@media(max-width:1100px){
  .today-stat-grid{grid-template-columns:repeat(3,1fr)}
  .history-control-card{flex-direction:column;align-items:flex-start}
}

@media(max-width:700px){
  .today-stat-grid{grid-template-columns:repeat(2,1fr)}
  .subpage-head{align-items:flex-start;flex-direction:column}
  .sub-chart-wrap,.history-big-chart{height:330px}
  .history-info-grid{grid-template-columns:1fr}
  .segment{flex-wrap:wrap}
}


/* BUILD015 - ARSO Maribor + compact snow status */
.forecast-snow{
  margin-top:8px;
  padding:7px 10px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:#c9d8e2;
  font-size:9px;
  line-height:1.35;
}

.forecast-snow b{
  color:#eef6fb;
  font-weight:600;
}

.snow-symbol{
  font-size:12px;
  opacity:.82;
}

.snow-divider{
  opacity:.45;
}

.forecast-snow.snow-active{
  background:rgba(98,188,244,.10);
  border-radius:8px;
  border-top-color:rgba(160,220,255,.23);
  color:#eef8ff;
}

@media(max-width:700px){
  .forecast-snow{
    flex-wrap:wrap;
    gap:5px;
  }
}


/* BUILD016 - About page */
.about-page{
  padding-bottom:20px;
}

.about-hero{
  padding:20px 24px;
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:14px;
}

.about-hero-icon{
  flex:0 0 auto;
  width:58px;
  height:58px;
  border:2px solid rgba(255,255,255,.7);
  border-radius:15px;
  display:grid;
  place-items:center;
  font-size:31px;
  color:#edf7fc;
  background:rgba(255,255,255,.035);
}

.about-hero h2{
  margin:0 0 7px;
  font-size:20px;
}

.about-hero p{
  margin:0;
  max-width:880px;
  color:#c9d8e2;
  font-size:11px;
  line-height:1.6;
}

.about-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

.about-card{
  padding:18px 20px;
  position:relative;
  min-height:245px;
}

.about-card-icon{
  position:absolute;
  top:16px;
  right:18px;
  font-size:21px;
  opacity:.72;
}

.about-card h3{
  margin:0 0 9px;
  font-size:17px;
}

.about-card p{
  color:#c2d2dc;
  font-size:10px;
  line-height:1.55;
  margin:0 34px 15px 0;
}

.about-card dl{
  margin:0;
}

.about-card dl div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:7px 0;
  border-top:1px solid rgba(255,255,255,.065);
}

.about-card dt{
  color:#9fb2bf;
  font-size:9px;
}

.about-card dd{
  margin:0;
  font-size:10px;
  color:#f2f7fa;
  text-align:right;
  font-weight:600;
}

.about-sources{
  margin-top:12px;
  padding:16px 20px;
}

.about-sources h2{
  margin:0 0 10px;
  font-size:16px;
}

.source-line{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:12px;
  align-items:center;
  padding:8px 0;
  border-top:1px solid rgba(255,255,255,.06);
}

.source-line strong{
  font-size:10px;
}

.source-line span{
  color:#bdcdd7;
  font-size:10px;
}

@media(max-width:850px){
  .about-grid{grid-template-columns:1fr}
  .about-hero{align-items:flex-start}
}


/* BUILD017 - automatic day/night current-weather symbol */
.weather-symbol .sun{
  transition:opacity .45s ease, transform .45s ease, box-shadow .45s ease;
}

.weather-symbol::after{
  content:"";
  position:absolute;
  width:62px;
  height:62px;
  left:12px;
  top:1px;
  border-radius:50%;
  opacity:0;
  transform:scale(.86);
  transition:opacity .45s ease, transform .45s ease;
  background:
    radial-gradient(circle at 37% 33%, rgba(255,255,255,.42) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 63%, rgba(124,151,178,.28) 0 5px, transparent 6px),
    radial-gradient(circle at 67% 28%, rgba(124,151,178,.20) 0 3px, transparent 4px),
    linear-gradient(145deg,#f5f8ff,#cbd9e7 63%,#9eb3c8);
  box-shadow:0 0 25px rgba(187,215,242,.30);
}

.weather-symbol.night .sun{
  opacity:0;
  transform:scale(.82);
}

.weather-symbol.night::after{
  opacity:1;
  transform:scale(1);
}

.weather-symbol.night .cloud{
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.23));
}

.weather-symbol.day::after{
  opacity:0;
}


/* BUILD018 - local current-weather visual states */
.weather-symbol{
  --cloud-opacity:1;
}

.weather-symbol .cloud{
  transition:
    opacity .35s ease,
    transform .35s ease,
    filter .35s ease,
    background .35s ease;
}

/* Clear daytime: keep only a very small atmospheric cloud hint. */
.weather-symbol.wx-clear.day .cloud-a{
  opacity:.16;
  transform:translate(11px,5px) scale(.72);
}
.weather-symbol.wx-clear.day .cloud-b{
  opacity:0;
}

/* Partly cloudy is the established BUILD017 visual. */
.weather-symbol.wx-partly .cloud-a{opacity:1}
.weather-symbol.wx-partly .cloud-b{opacity:.70}

/* Cloudy: sun/moon becomes subdued and cloud cover becomes denser. */
.weather-symbol.wx-cloudy.day .sun{
  opacity:.18;
  transform:scale(.88);
}
.weather-symbol.wx-cloudy.night::after{
  opacity:.23;
}
.weather-symbol.wx-cloudy .cloud-a{
  opacity:1;
  transform:translate(-5px,-4px) scale(1.08);
  background:linear-gradient(#eef4f8,#c4d3df);
}
.weather-symbol.wx-cloudy .cloud-b{
  opacity:.92;
  transform:translate(12px,-11px) scale(1.25);
}

/* Rain layers */
.rain-drops{
  position:absolute;
  left:47px;
  top:77px;
  width:69px;
  height:22px;
  display:flex;
  justify-content:space-around;
  opacity:0;
  transition:opacity .25s ease;
  z-index:5;
}
.rain-drops i{
  display:block;
  width:3px;
  height:14px;
  border-radius:999px;
  background:linear-gradient(#80d6ff,#2d9edb);
  transform:rotate(18deg);
  box-shadow:0 0 5px rgba(69,180,239,.30);
}

.weather-symbol.wx-rain .rain-drops,
.weather-symbol.wx-heavy-rain .rain-drops{
  opacity:1;
}

.weather-symbol.wx-rain .sun,
.weather-symbol.wx-heavy-rain .sun{
  opacity:.12;
}

.weather-symbol.wx-rain.night::after,
.weather-symbol.wx-heavy-rain.night::after{
  opacity:.18;
}

.weather-symbol.wx-rain .cloud-a,
.weather-symbol.wx-heavy-rain .cloud-a{
  transform:translate(-4px,-4px) scale(1.06);
  background:linear-gradient(#dbe5ec,#9fb3c2);
}

.weather-symbol.wx-rain .cloud-b,
.weather-symbol.wx-heavy-rain .cloud-b{
  opacity:.95;
  background:linear-gradient(#d5e0e8,#94aabb);
}

.weather-symbol.wx-heavy-rain .rain-drops i{
  height:18px;
  width:4px;
  background:linear-gradient(#93dcff,#1685c5);
}

/* Fog layers */
.fog-lines{
  position:absolute;
  left:22px;
  top:67px;
  width:98px;
  height:30px;
  opacity:0;
  z-index:6;
  transition:opacity .25s ease;
}
.fog-lines i{
  display:block;
  height:4px;
  margin:5px 0;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#dce7ee 18%,#dce7ee 82%,transparent);
  opacity:.88;
}
.fog-lines i:nth-child(2){
  transform:translateX(11px);
  width:78px;
}
.fog-lines i:nth-child(3){
  transform:translateX(3px);
  width:88px;
}

.weather-symbol.wx-fog .fog-lines{
  opacity:1;
}
.weather-symbol.wx-fog .cloud{
  opacity:.40;
  filter:blur(.5px);
}
.weather-symbol.wx-fog.day .sun{
  opacity:.22;
}
.weather-symbol.wx-fog.night::after{
  opacity:.22;
}

/* Night clear: moon remains prominent, cloud becomes discreet. */
.weather-symbol.wx-clear.night .cloud-a{
  opacity:.22;
  transform:translate(12px,6px) scale(.72);
}
.weather-symbol.wx-clear.night .cloud-b{
  opacity:0;
}