:root{
  --bg:#0f0f15;
  --bg-soft:#151521;
  --card:#ffffff;
  --ink:#121212;
  --muted:#737799;
  --brand:#ff4b5c;
  --brand-2:#ffd166;
  --accent:#68d391;
  --ring: rgba(255,75,92,.3);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:
    radial-gradient(1000px 600px at -10% -10%, rgba(255,75,92,.15), transparent 60%),
    radial-gradient(800px 500px at 110% 10%, rgba(255,209,102,.12), transparent 60%),
    linear-gradient(180deg,#0e0e14 0%, #12121c 100%);
  color:#f5f7ff;
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height:1.6;
}

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

.site-header{
  position:sticky; top:0; z-index:100;
  backdrop-filter:saturate(1.1) blur(8px);
  background:rgba(14,14,20,.6);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
}
.brand{
  font-family:"Baloo 2", cursive;
  font-weight:800; letter-spacing:.5px;
  color:#fff; text-decoration:none; font-size:1.4rem;
}
.nav-toggle{
  display:none; background:none; border:0; color:#fff; font-size:1.4rem; cursor:pointer;
}
.nav-list{
  display:flex; gap:18px; list-style:none; margin:0; padding:0;
}
.nav-list a{
  color:#e9ecff; text-decoration:none; padding:8px 10px; border-radius:10px;
}
.nav-list a:hover{ background:rgba(255,255,255,.06) }

.hero{
  padding: clamp(48px, 8vw, 96px) 0 40px;
}
.hero-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items:center;
}
.title{
  font-family:"Baloo 2", cursive; font-size: clamp(2.2rem, 6vw, 4rem);
  margin:0 0 8px;
}
.subtitle{
  color:#cfd4ff; font-size: clamp(1.05rem, 2.5vw, 1.25rem);
}
.highlight{ color: var(--brand-2); font-weight:900 }
.cta-row{ display:flex; gap:12px; margin-top:18px }

.btn{
  appearance:none; border:0; border-radius:16px;
  padding:12px 18px; cursor:pointer; font-weight:800; letter-spacing:.2px;
  background:#fff; color:#111; box-shadow: 0 6px 24px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn:hover{ transform: translateY(-2px) }
.btn:active{ transform: translateY(0) scale(.98) }
.btn.primary{ background: var(--brand); color: #fff }
.btn.ghost{ background: transparent; color:#fff; border:1px solid rgba(255,255,255,.25) }
.btn.boom{ background: linear-gradient(90deg, var(--brand), #ff7a5c); color:#fff }

.hero-art{
  position:relative; min-height:240px; display:grid; place-items:center;
}
.shinchan-sticker{
  width:180px; height:180px; display:grid; place-items:center;
  /* font-size:92px; background: #fff; color:#111; border-radius:28px; */
  /* box-shadow: 0 20px 45px rgba(0,0,0,.35); */
  animation: floaty 4s ease-in-out infinite;
  user-select:none;
}
.sticker{
  position:absolute; width:70px; height:70px; border-radius:20px;
  /* background:#fff; display:grid; place-items:center; */
  /* font-size:36px; color:#111; box-shadow:0 15px 35px rgba(0,0,0,.28); */
}
.sticker.face{ top:12%; right:10%; animation: wiggle 2.0s infinite }
.sticker.bounce{ bottom:8%; left:10%; animation: bounce 2.4s infinite }
.sticker.dance{ top:60%; right:-10px; animation: wiggle 1.8s infinite }

.section{ padding: 70px 0 }
.section-title{
  font-family:"Baloo 2"; font-size: clamp(1.6rem, 4vw, 2.2rem); margin:0 0 18px;
}
.lead{ color:#dfe3ff; max-width: 60ch }

.timeline{ margin-top:24px; display:grid; gap:16px }
.time-card{
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:16px 16px 16px 44px; position:relative;
}
.time-dot{
  position:absolute; width:14px; height:14px; border-radius:50%;
  background: var(--brand); left:16px; top:22px; box-shadow:0 0 0 6px var(--ring);
}

.card-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(4, 1fr);
}
.card{
  background: #fff; color:#222; border-radius:20px; padding:18px;
  box-shadow:0 16px 40px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,.28) }
.avatar{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  font-size:30px; background:#ffe9ec; margin-bottom:10px;
}

.teach-grid{
  display:grid; gap:16px; grid-template-columns: repeat(3, 1fr);
}
.teach-card{
  background: linear-gradient(180deg, #fff, #ffe4e7);
  color:#222; border-radius:22px; padding:18px; box-shadow:0 14px 36px rgba(0,0,0,.18);
  border: 1px solid #ffd2d8;
  transition: transform .18s ease;
}
.teach-card:hover{ transform: translateY(-6px) }
.teach-card .icon{ font-size:28px; display:inline-block; margin-bottom:6px }

.quote-box{
  display:grid; gap:14px; place-items:center;
}
.bubble{
  background:#fff; color:#111; padding:16px 18px; border-radius:20px;
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
  max-width:680px; text-align:center; position:relative;
}
.bubble:after{
  content:""; position:absolute; bottom:-10px; left:50%; translate:-50% 0;
  border:10px solid transparent; border-top-color:#fff;
}

.chaos-wrap{
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  border-radius:20px; padding:16px; display:grid; gap:14px;
}
.meter{
  height:18px; background: rgba(255,255,255,.14); border-radius:999px; overflow:hidden;
}
.bar{
  height:100%; width:0%; background: linear-gradient(90deg, #6ee7b7, #38bdf8);
  transition: width .2s ease, background .2s ease;
}
.chaos-stats{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.badge{
  background:#fff; color:#111; font-weight:900; padding:6px 10px; border-radius:999px;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}

.join-form{
  display:grid; gap:10px; width:min(560px, 100%); margin-inline:auto;
}
.join-form input{
  padding:14px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); color:#fff; outline:none;
}
.join-form input:focus{ border-color:#fff; box-shadow: 0 0 0 6px rgba(255,255,255,.08) }
.muted{ color: var(--muted); font-size:.9rem }

.site-footer{
  margin-top: 50px; padding:22px 0; border-top:1px solid rgba(255,255,255,.08);
  background: #aeb3cd76;
}
.footer-grid{ display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center }
.small{ font-size:.9rem; color:#c7c67b }

/* Decorative gradient background (no more blur artifacts) */
body {
  background: radial-gradient(circle at -20% -20%, rgba(255, 107, 107, 0.35), transparent 70%),
              radial-gradient(circle at 120% 120%, rgba(77, 171, 247, 0.35), transparent 70%),
              radial-gradient(circle at 50% 50%, rgba(255, 217, 61, 0.35), transparent 70%),
              #0a0a0a; /* base dark background */
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}



/* Animations */
@keyframes floaty{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-10px) }
}
@keyframes bounce{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-10%) }
}
@keyframes wiggle{
  0%,100%{ transform: rotate(0) }
  25%{ transform: rotate(-6deg) }
  75%{ transform: rotate(6deg) }
}

/* Responsive */
@media (max-width: 960px){
  .hero-grid{ grid-template-columns: 1fr; }
  .card-grid{ grid-template-columns: repeat(2, 1fr); }
  .teach-grid{ grid-template-columns: repeat(2, 1fr); }
  .nav-toggle{ display:block }
  .nav-list{
    position:absolute; right:0; top:56px; background:rgba(10,10,14,.98);
    padding:10px; border-bottom-left-radius:14px; display:none; flex-direction:column;
    box-shadow:0 14px 36px rgba(0,0,0,.32);
  }
  .nav-list.show{ display:flex }
}
@media (max-width: 560px){
  .card-grid, .teach-grid{ grid-template-columns: 1fr; }
  .cta-row{ flex-direction:column; align-items:flex-start }
}