:root{
  --accent:#ffb703;
  --accent-2:#8ecae6;
  --ink:#2b2d42;
  --muted:#6b7280;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--ink); background:#fff}
a{color:#1d4ed8;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{padding:24px 0;border-bottom:1px solid #f1f5f9;background:#fff;position:sticky;top:0;z-index:10}
.brand{display:flex;gap:16px;align-items:center}
.brand img{width:68px;height:68px;object-fit:cover;border-radius:16px;border:4px solid #fff;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.brand h1{font-size:clamp(24px,3vw,36px);margin:0}
.tag{display:inline-block;margin-left:8px;font-size:14px;background:var(--accent-2);color:#0b3954;padding:6px 10px;border-radius:999px}
.nav{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px}
.nav a{font-weight:600}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;padding:32px 0}
.hero img{width:100%;height:auto;border-radius:20px;box-shadow:0 12px 36px rgba(0,0,0,.08)}
.hero h2{font-size:clamp(22px,2.6vw,34px);margin:0 0 12px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.button{display:inline-block;background:var(--accent);color:#111827;padding:12px 18px;border-radius:12px;font-weight:700}
.button.secondary{background:#e2e8f0;color:#111827}
.section{padding:28px 0}
.section h3{font-size:clamp(20px,2.2vw,28px);margin:0 0 12px}
.grid{display:grid;grid-template-columns:repeat( auto-fit, minmax(250px,1fr) );gap:18px}
.card{border:1px solid #eef2f7;border-radius:16px;padding:0;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.04);overflow:hidden}
.card img{width:100%;height:240px;object-fit:cover;display:block}
.card .pad{padding:16px}
.card h4{margin:6px 0 8px;font-size:18px}
.card p{margin:0 0 12px;color:var(--muted)}
.badge{background:#fff3cd;color:#7c2d12;border:1px dashed #fde68a;padding:6px 10px;border-radius:999px;font-size:12px;margin:12px 16px 0 16px;display:inline-block}
.list-links{display:flex;gap:10px;flex-wrap:wrap}
.videos{display:grid;grid-template-columns:repeat( auto-fit, minmax(260px,1fr) );gap:18px}
.videos a{border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;display:block}
.videos img{width:100%;height:180px;object-fit:cover;display:block}
.videos span{display:block;padding:12px;font-weight:600}
.footer{border-top:1px solid #f1f5f9;padding:26px 0;color:var(--muted)}
.small{font-size:12px}
@media (max-width:860px){ .hero{grid-template-columns:1fr} .card img{height:200px} }