:root{
  --green:#0b4f2f;
  --green2:#073c25;
  --gold:#f2c94c;
  --red:#d5222a;
  --ink:#101614;
  --muted:#66706c;
  --paper:#f7f8f6;
  --white:#fff;
  --line:#e4e8e5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  line-height:1.65;
}
a{text-decoration:none;color:inherit}
.topbar{
  position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:14px max(18px,calc((100vw - 1180px)/2));background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.brand{display:flex;gap:12px;align-items:center}
.brand h1{font-size:18px;margin:0;letter-spacing:.2px}
.brand p{margin:0;color:var(--muted);font-size:12px}
.flag-mark{
  width:42px;height:42px;border-radius:13px;background:var(--green);display:grid;place-items:center;
  box-shadow:inset 0 -5px 0 var(--red);
}
.star{color:var(--gold);font-size:20px}
.menu-btn{display:none;border:0;background:none;font-size:25px}
.nav{
  display:flex;gap:28px;justify-content:center;background:var(--green);color:#fff;padding:12px 18px;
  position:sticky;top:71px;z-index:40;font-size:14px;
}
.nav a{opacity:.9}.nav a:hover{opacity:1;color:var(--gold)}
main{max-width:1180px;margin:auto;padding:22px}
.breaking{
  display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;
  margin-bottom:22px;box-shadow:0 10px 30px rgba(10,30,20,.04)
}
.breaking-badge{background:var(--red);color:#fff;font-weight:800;padding:11px 17px}
.ticker{padding:9px 15px;display:flex;gap:14px;align-items:center;min-width:0}
.ticker strong{color:var(--green);white-space:nowrap}.ticker span{color:var(--muted);font-size:14px}
.hero{
  min-height:470px;border-radius:28px;padding:48px;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;
  background:linear-gradient(135deg,var(--green2),var(--green));color:#fff;overflow:hidden;position:relative
}
.hero:after{content:"";position:absolute;width:320px;height:320px;border:1px solid rgba(242,201,76,.25);border-radius:50%;left:-70px;top:-70px}
.eyebrow{font-size:12px;letter-spacing:2px;color:var(--gold);font-weight:800}
.hero h2{font-size:clamp(42px,7vw,82px);line-height:1.02;margin:14px 0 20px}
.hero p{max-width:650px;color:rgba(255,255,255,.82);font-size:17px}
.hero-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.primary,.secondary{padding:12px 18px;border-radius:12px;font-weight:800}
.primary{background:var(--gold);color:var(--green2)}
.secondary{border:1px solid rgba(255,255,255,.35);color:#fff}
.radar-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:24px;border-radius:25px;backdrop-filter:blur(7px)}
.radar{aspect-ratio:1;border-radius:50%;position:relative;overflow:hidden;border:1px solid rgba(242,201,76,.45);
 background:repeating-radial-gradient(circle,transparent 0 16%,rgba(255,255,255,.06) 17% 18%),
 linear-gradient(90deg,transparent 49%,rgba(255,255,255,.13) 50%,transparent 51%),
 linear-gradient(transparent 49%,rgba(255,255,255,.13) 50%,transparent 51%)}
.scan{position:absolute;inset:0;background:conic-gradient(from 15deg,rgba(242,201,76,.34),transparent 25%);animation:spin 4s linear infinite}
.dot{width:9px;height:9px;background:var(--gold);border-radius:50%;position:absolute;box-shadow:0 0 15px var(--gold)}
.d1{top:27%;right:35%}.d2{bottom:32%;left:25%}.d3{top:55%;right:20%}
@keyframes spin{to{transform:rotate(360deg)}}
.radar-meta{display:flex;justify-content:space-between;margin-top:14px;gap:12px}.radar-meta span{color:#dfe9e3;font-size:13px}
.section{padding:54px 0 20px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px}
.section-head h3{font-size:30px;margin:2px 0}.kicker{color:var(--red);font-weight:800;font-size:13px}
.status{font-size:12px;color:var(--green);font-weight:700}
.grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 10px 25px rgba(8,35,20,.04)}
.placeholder-img{height:170px}.featured .placeholder-img{height:250px}
.green{background:linear-gradient(135deg,#0b4f2f,#2c7a52)}
.gold{background:linear-gradient(135deg,#f2c94c,#f2994a)}
.red{background:linear-gradient(135deg,#8f1620,#d5222a)}
.card-body{padding:18px}.card h4{font-size:20px;line-height:1.4;margin:9px 0}.card p{color:var(--muted);font-size:14px}
.tag{font-size:11px;color:var(--green);background:#edf5f0;padding:5px 9px;border-radius:999px;font-weight:800}
.meta{display:flex;justify-content:space-between;color:#8a928e;font-size:11px;margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.live-panel{margin:48px 0;background:#101613;color:#fff;border-radius:25px;padding:28px}
.live-title{display:flex;align-items:center;gap:13px}.live-title span{color:var(--gold);font-weight:900;font-size:12px}.live-title h3{margin:1px 0 0;font-size:25px}
.pulse{width:11px;height:11px;background:var(--red);border-radius:50%;box-shadow:0 0 0 0 rgba(213,34,42,.5);animation:pulse 1.7s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(213,34,42,0)}100%{box-shadow:0 0 0 0 rgba(213,34,42,0)}}
.timeline{margin-top:20px;border-top:1px solid #27322d}.event{display:grid;grid-template-columns:90px 1fr;gap:20px;border-bottom:1px solid #27322d;padding:15px 0}.event time{color:var(--gold);font-size:12px}.event p{margin:0;color:#d7ded9}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.steps>div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px}.steps b{color:var(--gold);background:var(--green);padding:5px 9px;border-radius:8px}.steps h4{margin:16px 0 5px;font-size:20px}.steps p{margin:0;color:var(--muted);font-size:14px}
footer{max-width:1180px;margin:35px auto 0;padding:24px 22px 38px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:13px}
footer strong{color:var(--green)}
@media(max-width:800px){
  .topbar{padding:12px 16px}.menu-btn{display:block}.nav{display:none;position:fixed;top:67px;right:10px;left:10px;border-radius:14px;flex-direction:column;gap:4px;padding:10px;box-shadow:0 15px 30px rgba(0,0,0,.2)}
  .nav.open{display:flex}.nav a{padding:10px 12px}
  main{padding:14px}.ticker span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hero{grid-template-columns:1fr;padding:30px 22px;border-radius:22px}.hero h2{font-size:49px}.radar-card{max-width:330px;width:100%;margin:auto}
  .grid{grid-template-columns:1fr}.featured .placeholder-img,.placeholder-img{height:180px}
  .steps{grid-template-columns:1fr 1fr}
  footer{flex-direction:column;gap:8px}
}
@media(max-width:480px){.steps{grid-template-columns:1fr}.section-head h3{font-size:26px}.hero p{font-size:15px}}


/* Live news additions */
.card-link{display:block;height:100%;color:inherit}
.news-img{width:100%;height:170px;object-fit:cover;display:block;background:#eef1ef}
.featured .news-img{height:250px}
.loading-card{opacity:.9}
.error-card .tag{color:#8f1620;background:#fbeaec}
.card-link:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.card h4{overflow-wrap:anywhere}
@media(max-width:800px){
  .featured .news-img,.news-img{height:180px}
}