@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Manrope:wght@500;600;700&display=swap');
:root{
  --bg:#f7f8fb; --surface:#ffffff; --ink:#0f172a; --muted:#475569;
  --accent:#ff6a00; --accent2:#2563eb; --border:#e5e7eb;
  --ring: 0 0 0 4px rgba(37,99,235,.15);
  --shadow: 0 10px 30px rgba(2,6,23,.06), 0 2px 8px rgba(2,6,23,.04);
  --maxw: 1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0;background:var(--bg);color:var(--ink);
     font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
     font-size:clamp(15px, 1.05vw, 18px); line-height:1.65;}
img{max-width:100%;height:auto;display:block; border-radius:14px}
a{color:var(--accent2); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:Manrope, Inter, system-ui; line-height:1.2; margin:0 0 .6rem}
h1{font-size:clamp(28px, 3.2vw, 44px); font-weight:800}
h2{font-size:clamp(22px, 2.2vw, 32px); font-weight:800}
h3{font-size:clamp(18px, 1.5vw, 22px); font-weight:700}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.tag{color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid var(--border); padding:.4rem .7rem; border-radius:999px; background:#fff; color:var(--muted)}
.badge svg{width:16px;height:16px}
.btn{display:inline-flex;align-items:center;gap:.6rem;
  background:linear-gradient(135deg,var(--accent),#ff914d);
  color:#fff; padding:.8rem 1rem; border-radius:12px; font-weight:700; letter-spacing:.2px;
  box-shadow:var(--shadow); border:0}
.btn.secondary{background:#fff; color:var(--ink); border:1px solid var(--border)}
.btn:focus{outline:none; box-shadow:var(--ring)}
header{position:sticky;top:0;z-index:999; background:rgba(255,255,255,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between; padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.8rem}
.brand img{width:48px;height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--accent2); background:#fff}
.brand .meta{display:flex; flex-direction:column}
.brand .meta small{color:var(--muted)}
.menu a{margin:0 .7rem; font-weight:600}
.hamb{display:none}
@media(max-width:900px){
  .menu{display:none; position:absolute; right:20px; top:70px; background:#fff; border:1px solid var(--border);
        border-radius:12px; padding:.6rem; min-width:260px; box-shadow:var(--shadow)}
  .menu a{display:block; padding:.6rem .7rem; border-radius:10px}
  .menu a:hover{background:#f1f5f9; text-decoration:none}
  .hamb{display:inline-flex; gap:.4rem; align-items:center; border:1px solid var(--border);
        border-radius:10px; padding:.45rem .7rem; background:#fff; color:var(--ink)}
  .menu.open{display:block}
}
.hero{padding:3rem 0 2rem; border-bottom:1px solid var(--border);
  background:
   radial-gradient(1000px 600px at -10% -10%, rgba(255,106,0,.08), transparent 60%),
   radial-gradient(800px 500px at 110% -20%, rgba(37,99,235,.08), transparent 60%);}
.hero .lead{display:grid; gap:24px; grid-template-columns:1.2fr 1fr}
@media(max-width:980px){ .hero .lead{grid-template-columns:1fr} }
.card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1rem; box-shadow:var(--shadow)}
.pills{display:flex; flex-wrap:wrap; gap:.45rem}
.pill{background:#f8fafc; border:1px solid var(--border); border-radius:999px; padding:.35rem .6rem; color:var(--muted)}

/* Sticky category nav */
.catbar{position:sticky; top:66px; z-index:998; background:#fff; border-bottom:1px solid var(--border)}
.catbar .wrap{display:flex; gap:.5rem; overflow:auto; padding:.6rem 24px}
.cat{white-space:nowrap; border:1px solid var(--border); background:#fff; padding:.4rem .7rem; border-radius:999px; color:#0f172a; font-weight:600}
.cat.active, .cat:hover{background:var(--accent2); color:#fff; border-color:transparent}

/* Full-width bands with alternating layout */
.section{padding:1rem 0 0}
.sectitle{padding:1.2rem 0 .6rem}
.band{padding:1.2rem 0; border-top:1px solid var(--border)}
.band .inner{display:grid; gap:24px; align-items:center; grid-template-columns: 1.15fr 1fr}
.band.reverse .inner{grid-template-columns: 1fr 1.15fr}
@media(max-width:980px){ .band .inner, .band.reverse .inner{grid-template-columns: 1fr} }
.meta .title{font-weight:800; font-size:clamp(18px,1.7vw,24px)}
.meta .loc{color:var(--muted); margin:.2rem 0 .5rem}
.meta ul{margin:.6rem 0 0; padding-left:1.1rem}
.meta ul li{margin:.25rem 0}
footer{padding:2rem 0; color:var(--muted)}
/* reveal */
.obsv{opacity:0; transform:translateY(18px); transition:transform .55s ease, opacity .55s ease}
.reveal{opacity:1; transform:none}