@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}
:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --card:#ffffff;
  --card-2:#f9fafb;
  --brand-1:#f59e0b;
  --brand-2:#f97316;
  --brand-3:#8b5cf6;
}
body{
  background:var(--bg);
  color:var(--text);
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  padding:20px;
}
.container{
  max-width:1200px;width:100%;background:var(--card);
  border-radius:24px;box-shadow:0 12px 40px rgba(0,0,0,.12);
  overflow:hidden;animation:fadeIn 1s ease-in-out;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
header.site-header{
  background:linear-gradient(135deg,var(--brand-1),#ef4444,var(--brand-3));
  padding:24px;text-align:center;color:#fff;font-size:1.8rem;font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  padding:50px 30px;background:linear-gradient(135deg,#f9fafb,#f3f4f6);position:relative;}
.hero-text{flex:1 1 500px;padding:20px;}
.hero-text h1{font-size:3rem;margin-bottom:20px;
  background:linear-gradient(90deg,var(--brand-1),var(--brand-2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.hero-text p{font-size:1.2rem;color:#374151;margin-bottom:30px;}
.btn{display:inline-block;padding:16px 40px;background:linear-gradient(90deg,var(--brand-1),var(--brand-2));
  color:#fff;font-weight:700;font-size:1.2rem;border-radius:50px;text-decoration:none;transition:.3s;
  box-shadow:0 6px 18px rgba(245,158,11,.4);}
.btn:hover{transform:scale(1.07);box-shadow:0 8px 24px rgba(245,158,11,.6);}
.hero-img{flex:1 1 400px;text-align:center;padding:20px;}
.hero-img img{width:100%;max-width:400px;border-radius:20px;box-shadow:0 12px 25px rgba(0,0,0,.2);
  animation:float 4s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;padding:40px;background:#fff;}
.feature{background:linear-gradient(145deg,#fff,#f3f4f6);padding:24px;border-radius:16px;text-align:center;
  box-shadow:0 6px 16px rgba(0,0,0,.08);transition:.3s;}
.feature:hover{transform:translateY(-8px);box-shadow:0 10px 24px rgba(0,0,0,.12);}
.feature h3{font-size:1.3rem;margin-bottom:12px;color:#111827;}
.feature p{font-size:1rem;color:#4b5563;}

footer.site-footer{padding:30px;background:#f3f4f6;color:#374151;}
.footer-inner{max-width:1200px;margin:auto;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px;align-items:start;}
.footer-brand h4{font-size:1.2rem;margin-bottom:8px;}
.footer-brand p{color:#6b7280;font-size:.95rem;}
.footer-links a{display:block;margin:6px 0;color:#111827;text-decoration:none;}
.footer-links a:hover{text-decoration:underline;}
.footer-bottom{margin-top:20px;padding-top:16px;border-top:1px solid #e5e7eb;font-size:.85rem;color:#6b7280;text-align:center;}

.notice{background:#fff;padding:28px;border-radius:18px;box-shadow:0 8px 28px rgba(0,0,0,.08);margin:30px;}
.notice h1{font-size:2rem;margin-bottom:10px;}
.notice h2{font-size:1.2rem;margin:18px 0 8px;}
.notice p, .notice li{color:#4b5563;line-height:1.6;}
.notice ul{padding-left:18px;}
a.back{display:inline-block;margin:16px 30px;color:#111827;text-decoration:none;font-weight:600;}
a.back:hover{text-decoration:underline;}

.mobile-join{display:none;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:#fff;border-radius:50px;box-shadow:0 8px 20px rgba(0,0,0,.2);padding:10px 20px;align-items:center;gap:10px;
  animation:slideUp .5s ease;z-index:50;}
.mobile-join img{width:40px;height:40px;border-radius:50%;}
.mobile-join a{ text-decoration:none;color:#111827;font-weight:600;}
@keyframes slideUp{from{transform:translate(-50%,50px);opacity:0;}to{transform:translate(-50%,0);opacity:1;}}

@media(max-width:900px){.footer-inner{grid-template-columns:1fr 1fr;}}
@media(max-width:768px){
  .hero{flex-direction:column;text-align:center;}
  .hero-text h1{font-size:2.2rem;}
  .btn{font-size:1rem;padding:14px 28px;}
  .mobile-join{display:flex;}
  .footer-inner{grid-template-columns:1fr;}
}