/* iWubbzy Fan — modern skeleton
   Color system inspired by cheerful kids' sites, with accessible contrast.
*/
:root{
  --yellow:#FFE500;
  --blue:#59B7FF;
  --pink:#FF7AC8;
  --teal:#25D0B4;
  --ink:#0E1020;
  --bg:#ffffff;
  --muted:#f6f7fb;
  --card:#ffffff;
  --border:#e8e9f0;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e1117;
    --muted:#161b22;
    --card:#0f1420;
    --border:#232938;
    --ink:#e6e6f0;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height:1.6;
}

a{color:#0a69e6;text-decoration-thickness:.08em;text-underline-offset:.2em}
a:hover{text-decoration:underline}

.container{width:min(1080px, 92%); margin-inline:auto}

.skip-link{
  position: absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left: 1rem; top:1rem; width:auto; height:auto; background:var(--yellow); color:#111; padding:.5rem .75rem; border-radius:.5rem; outline:2px solid #111;
}

/* Header */
.header{
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(130%) blur(8px);
  background:color-mix(in oklab, var(--bg) 90%, #fff 10% / 85%);
}
.header-inner{
  display:flex; align-items:center; gap:1rem; padding:.75rem 0;
}
.brand{display:flex; align-items:center; gap:.75rem; min-width:0}
.brand img{height:40px; width:auto}
.brand-title{font-weight:800; font-size:1.2rem; white-space:nowrap}
.brand small{opacity:.7; font-weight:600}

.nav{margin-left:auto}
.nav ul{list-style:none; padding:0; margin:0; display:flex; gap:.75rem; flex-wrap:wrap}
.nav a{display:inline-block; padding:.5rem .75rem; border-radius:.75rem; background:transparent}
.nav a[aria-current="page"], .nav a:hover{background: var(--muted)}

/* Hero */
.hero{padding: clamp(2rem, 6vw, 4rem) 0; background:linear-gradient(180deg, var(--muted), transparent)}
.hero-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center;
}
@media (max-width: 840px){
  .hero-grid{grid-template-columns: 1fr}
}

.badge{display:inline-block; padding:.3rem .7rem; border:1px solid var(--border); border-radius:999px; background:#fff4}
.kicker{font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:.8rem; opacity:.9}
h1{font-size:clamp(2rem, 6vw, 3rem); margin:.6rem 0 1rem; line-height:1.15}
.lead{font-size:1.05rem; opacity:.9}

.hero-card{
  border:1px solid var(--border);
  border-radius:1rem; padding:1rem; background:var(--card);
}

/* Cards / sections */
.section{padding:2rem 0}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
@media (max-width: 900px){ .grid{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .grid{grid-template-columns:1fr} }

.card{
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1rem;
  background:var(--card);
}

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--border);
  background:var(--yellow);
  color:#111;
  padding:.6rem .9rem; border-radius:.75rem; font-weight:700; text-decoration:none;
}
.btn:hover{filter:brightness(0.98)}

/* Footer */
.footer{
  border-top:1px solid var(--border);
  padding:2rem 0; margin-top:2rem; background:var(--muted);
}
.footer small{opacity:.8}

.tag{display:inline-block; padding:.25rem .5rem; border-radius:.5rem; background:var(--teal); color:#083; font-weight:800}
.note{font-size:.9rem; opacity:.8}

.hidden{display:none !important}