:root{
  --bg:#ffffff;
  --text:#0f1222;
  --muted:#5b6075;
  --border:#e9eaf2;
  --card:#ffffff;
  --brand-1:#7a4dff;   /* purple */
  --brand-2:#ff4dad;   /* pink */
  --brand-3:#ff7a45;   /* warm orange */
  --shadow: 0 10px 30px rgba(15,18,34,.06);
  --radius: 18px;
  --maxw: 1040px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color:var(--text); background:var(--bg); line-height:1.6;
  background-image:
    radial-gradient(800px 400px at 90% -10%, rgba(122,77,255,.08), transparent 60%),
    radial-gradient(600px 360px at -10% 0%, rgba(255,77,173,.08), transparent 50%),
    radial-gradient(700px 420px at 30% 110%, rgba(255,122,69,.08), transparent 60%);
}

.container{max-width:var(--maxw); margin:0 auto; padding:0 24px}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.8); backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:78px;}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:24px; width:auto; max-height:24px; aspect-ratio:auto; display:block}
.brand span{font-weight:800; letter-spacing:.2px}
.menu{display:flex; gap:20px; align-items:center; font-weight:600}
.menu a{color:var(--muted); padding:10px 12px; border-radius:12px}
.menu a:hover, .menu a[aria-current="page"]{color:var(--text); background:rgba(122,77,255,.08)}

.badge{display:inline-block; font-size:12px; color:#5b6075; border:1px solid var(--border); padding:6px 10px; border-radius:999px; background:#fff}
.hero{padding:96px 0 40px}
.hero h1{margin:0 0 14px; font-size:clamp(32px, 6vw, 56px); line-height:1.08; letter-spacing:-.02em}
.hero p{max-width:740px; color:var(--muted); font-size:clamp(16px,2vw,20px)}

.cta{
  display:inline-flex; align-items:center; gap:10px; font-weight:800;
  background:linear-gradient(135deg, var(--brand-1), var(--brand-2), var(--brand-3));
  color:white; border:0; padding:12px 16px; border-radius:14px; box-shadow:var(--shadow)
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
}
.section{padding:40px 0}
.section h2{margin:0 0 12px; font-size:clamp(22px, 3.2vw, 32px)}

.footer{
  margin-top:40px; border-top:1px solid var(--border); background:#fafbff; color:#6a6f85; padding:36px 0;
  font-size:14px
}
.footer a{color:inherit; text-decoration:underline; text-underline-offset:3px}

.notice{background:#fff5f8; border-left:3px solid var(--brand-2); padding:12px 14px; border-radius:12px; color:#7a274f}