:root { --primary:#ff5a03; --secondary:#263d5e; --bg:#e4eef0; --surface:#ffffff; --text:#16232b; --muted:#475569; --border:#e2e8f0; }
* { box-sizing:border-box; }
body { margin:0; font-family:'Poppins', Arial, sans-serif; color:var(--text); background:var(--bg); line-height:1.6; }
a { color:inherit; }
a, button { cursor:pointer; }
:focus-visible { outline:2px solid var(--secondary); outline-offset:2px; border-radius:4px; }
.site-header { background:var(--surface); border-bottom:1px solid var(--border); padding:16px 24px; }
.site-header .wrap { max-width:960px; margin:0 auto; padding:0; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.site-header img { height:36px; display:block; }
.back-link { font-size:.9rem; font-weight:600; color:var(--secondary); text-decoration:none; padding:10px 4px; transition:color .2s ease; }
.back-link:hover { color:var(--primary); }
.wrap { max-width:960px; margin:0 auto; padding:24px; }
.wrap.wide { max-width:1080px; }
.breadcrumb { font-size:.85rem; color:var(--muted); margin:0 0 4px; }
.breadcrumb a { color:var(--secondary); text-decoration:none; font-weight:600; transition:color .2s ease; }
.breadcrumb a:hover { color:var(--primary); text-decoration:underline; }
.hero { background:linear-gradient(130deg,#ffffff,#fff5f0); border:1px solid var(--border); border-radius:16px; padding:clamp(22px,4vw,32px); margin-top:8px; box-shadow:0 10px 30px -12px rgba(22,35,43,.08); }
h1, h2 { line-height:1.2; font-weight:800; }
h1 { margin:12px 0 12px; font-size:clamp(1.6rem,4vw,2.1rem); color:var(--text); }
h2 { margin-top:32px; font-size:clamp(1.2rem,3vw,1.4rem); color:var(--secondary); }
p, li { color:var(--muted); }
.lead { font-size:1.05rem; }
.cta { display:inline-block; margin-top:16px; background:var(--primary); color:#fff; text-decoration:none; font-weight:700; padding:13px 22px; border-radius:10px; transition:transform .2s ease, box-shadow .2s ease; box-shadow:0 4px 14px rgba(255,90,3,.25); }
.cta:hover { transform:scale(1.03); box-shadow:0 6px 20px rgba(255,90,3,.35); }
.cta:active { transform:scale(.98); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; list-style:none; padding:0; margin-top:8px; }
.card, .card-item { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px; box-shadow:0 4px 14px -8px rgba(22,35,43,.1); }
.card strong, .card-item strong { color:var(--secondary); }
.card a { color:var(--secondary); text-decoration:none; font-weight:700; }
.card a:hover { color:var(--primary); text-decoration:underline; }
/* Card that IS the link (hub page): whole surface is interactive, so it gets real hover/focus feedback */
a.card-link { display:block; color:inherit; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.card-link strong { display:block; color:var(--secondary); font-weight:700; margin-bottom:4px; }
a.card-link:hover, a.card-link:focus-visible { transform:translateY(-4px); box-shadow:0 14px 28px -12px rgba(22,35,43,.18); border-color:var(--primary); }
.links a { color:var(--secondary); text-decoration:none; font-weight:600; transition:color .2s ease; }
.links a:hover { color:var(--primary); text-decoration:underline; }
.site-footer { margin-top:48px; padding:28px 24px; background:var(--text); color:#fff; text-align:center; font-size:.9rem; }
.site-footer a { color:#ff8c42; text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }

@media (max-width:640px) {
  .site-header .wrap { justify-content:center; text-align:center; }
}

@media (prefers-reduced-motion: reduce) {
  .cta, a.card-link { transition:none; }
  .cta:hover, a.card-link:hover, a.card-link:focus-visible { transform:none; }
}