:root{
  --bg:#f4f6ff;
  --bg2:#eefaff;
  --ink:#17164f;
  --muted:#706c91;
  --purple:#6640f4;
  --violet:#8a4ff5;
  --teal:#10bcb4;
  --cyan:#3cdce7;
  --white:#ffffff;
  --panel:#ffffff;
  --line:#e4e5f4;
  --shadow:0 18px 50px rgba(82,64,199,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(circle at 82% 10%, rgba(112,73,255,.13), transparent 28rem),
    radial-gradient(circle at 84% 55%, rgba(42,214,217,.15), transparent 26rem),
    linear-gradient(180deg,#f4f5ff 0%,#f7f7ff 47%,#eefaff 100%);
}
a{color:var(--purple);text-decoration:none;font-weight:700}
a:hover{text-decoration:underline}

.glow{position:fixed;pointer-events:none;border-radius:999px;filter:blur(30px);opacity:.48}
.glow-a{width:300px;height:300px;right:-120px;top:110px;background:rgba(118,80,255,.16)}
.glow-b{width:340px;height:340px;right:8%;bottom:0;background:rgba(37,207,213,.14)}

.shell{
  width:min(900px,calc(100% - 32px));
  margin:0 auto;
  padding:48px 0 42px;
  position:relative;
}

.topbar{display:flex;align-items:center;gap:20px;margin-bottom:26px}
.app-icon{
  width:88px;height:88px;border-radius:26px;
  box-shadow:0 14px 35px rgba(89,57,231,.2);
}
.eyebrow{
  margin:0 0 6px;
  font-size:.78rem;
  letter-spacing:.14em;
  font-weight:900;
  color:#7c78a1;
}
h1{
  margin:0;
  font-size:clamp(2.3rem,7vw,4rem);
  line-height:1;
  letter-spacing:-.05em;
}
.sub{margin:10px 0 0;color:var(--muted);font-size:1.08rem}

.notice{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  margin:0 0 20px;padding:20px 22px;border-radius:24px;
  background:linear-gradient(135deg,rgba(103,67,244,.11),rgba(22,194,184,.10));
  border:1px solid rgba(103,67,244,.16);box-shadow:var(--shadow);
}
.notice-icon{
  width:44px;height:44px;border-radius:15px;display:grid;place-items:center;
  color:white;font-size:1.3rem;font-weight:900;
  background:linear-gradient(135deg,#5144f0,#8d43f3);
}
.notice p{margin:7px 0 0;color:var(--muted);line-height:1.55}

.card{
  position:relative;margin:16px 0;padding:27px 29px;border-radius:28px;
  background:rgba(255,255,255,.92);border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(47,42,123,.07);
}
.card h2,.contact h2{
  margin:0 0 14px;font-size:1.25rem;letter-spacing:-.015em;color:#26235d;
}
.card p{
  margin:0 0 13px;color:#635f84;line-height:1.72;
}
.card p:last-child{margin-bottom:0}

.highlight{
  border-color:rgba(103,67,244,.22);
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(249,249,255,.97));
}
.highlight:nth-of-type(8){border-color:rgba(14,188,180,.23)}
.section-badge{
  display:inline-flex;padding:7px 10px;border-radius:999px;margin-bottom:13px;
  background:rgba(103,67,244,.1);color:var(--purple);
  font-size:.78rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
}
.section-badge.teal{background:rgba(16,188,180,.11);color:#078e89}

.contact{
  margin-top:22px;padding:28px;border-radius:30px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(104,65,244,.11),rgba(141,65,243,.10),rgba(20,188,180,.12));
  border:1px solid rgba(104,65,244,.17);box-shadow:var(--shadow);
}
.contact p{margin:.35rem 0 0;max-width:600px;color:var(--muted);line-height:1.65}
.mail{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 18px;border-radius:16px;color:#fff;
  background:linear-gradient(135deg,#5144f0 0%,#7b39ef 68%,#20c1bc 100%);
  box-shadow:0 12px 30px rgba(94,60,229,.2);
}
footer{
  display:flex;justify-content:space-between;gap:16px;padding:24px 4px 0;
  color:#9793ae;font-size:.88rem;
}

@media (max-width:640px){
  .shell{width:min(100% - 22px,900px);padding-top:24px}
  .topbar{gap:14px;align-items:flex-start}
  .app-icon{width:68px;height:68px;border-radius:20px}
  h1{font-size:2.45rem}
  .sub{font-size:1rem}
  .notice{padding:18px;border-radius:22px}
  .card{padding:22px 20px;border-radius:24px}
  .contact{padding:22px 20px;border-radius:24px}
  .mail{width:100%;text-align:center;word-break:break-all}
  footer{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}