@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,600;700&display=swap");
:root{
  --brand:#464775;
  --brand-2:#6264A7;
  --ink:#1b1a1f;
  --muted:#5c5a66;
  --line:#e6e4ef;
  --paper:#fff;
  --soft:#f6f5fb;
  --mint:#e8f7f0;
  --font:"DM Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --display:"Source Serif 4", "Songti SC", serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(900px 420px at 10% -10%, #ece9ff 0%, transparent 55%),
    radial-gradient(700px 380px at 100% 0%, #e7f3ff 0%, transparent 50%),
    linear-gradient(180deg, #fbfafe 0%, #f3f2f8 100%);
  line-height:1.6;
}
a{color:var(--brand-2);text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:min(100% - 2rem, 980px);margin-inline:auto}
.site-header{
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(14px);
  background:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(70,71,117,.08);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:1rem}
.brand{display:flex;align-items:center;gap:.65rem;color:inherit}
.brand small{display:block;font-size:.68rem;letter-spacing:.04em;color:var(--muted);line-height:1.1}
.brand strong{font-size:1.05rem;letter-spacing:-.02em}
.nav{display:flex;gap:1.1rem;font-size:.92rem}
.nav a{color:var(--muted)}
.nav a[aria-current="page"]{color:var(--brand);font-weight:600}
.hero{
  padding:clamp(2.4rem,6vw,4.2rem) 0 2rem;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:center;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand-2);background:#ecebff;padding:.35rem .7rem;border-radius:999px;
}
h1{
  font-family:var(--display);
  font-size:clamp(2rem,4.8vw,3.15rem);
  line-height:1.12;letter-spacing:-.03em;margin:.85rem 0 .8rem;
}
.lead{color:var(--muted);font-size:1.05rem;max-width:38ch;margin:0 0 1.4rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:46px;padding:.7rem 1.15rem;border-radius:10px;font-weight:650;font-size:.95rem;
  border:1px solid transparent;transition:.18s ease;
}
.btn-primary{background:linear-gradient(180deg,#6a6cb8,#464775);color:#fff;box-shadow:0 10px 24px rgba(70,71,117,.28)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.phone{
  position:relative;justify-self:end;width:min(100%,320px);
  aspect-ratio:9/16;border-radius:28px;
  background:linear-gradient(160deg,#2f315f,#6264A7 55%,#9ea0e0);
  box-shadow:0 24px 50px rgba(70,71,117,.28);
  overflow:hidden;isolation:isolate;
  animation:float 7s ease-in-out infinite;
}
.phone::before{
  content:"";position:absolute;inset:12px;border-radius:22px;background:rgba(255,255,255,.96);
}
.phone-ui{position:absolute;inset:12px;border-radius:22px;padding:1rem;display:flex;flex-direction:column;gap:.7rem}
.dotbar{display:flex;gap:.35rem}
.dotbar i{width:7px;height:7px;border-radius:50%;background:#d7d5e8;display:block}
.chip{height:34px;border-radius:10px;background:linear-gradient(90deg,#f0eff8,#e4e7ff);width:72%}
.cardx{flex:1;border-radius:14px;background:linear-gradient(180deg,#fff,#f4f3fb);border:1px solid #eceaf7;padding:.9rem}
.cardx h3{margin:0 0 .35rem;font-size:.95rem}
.cardx p{margin:0;color:var(--muted);font-size:.82rem}
.rowpill{display:flex;gap:.45rem;margin-top:.7rem}
.rowpill span{flex:1;height:28px;border-radius:8px;background:#ecebff}
.section{padding:1.2rem 0 3.2rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.tile{
  background:rgba(255,255,255,.88);border:1px solid rgba(70,71,117,.1);
  border-radius:16px;padding:1.15rem 1.2rem;
  box-shadow:0 8px 24px rgba(36,36,60,.04);
  animation:rise .7s ease both;
}
.tile:nth-child(2){animation-delay:.08s}
.tile:nth-child(3){animation-delay:.16s}
.tile h2{font-size:1.05rem;margin:0 0 .45rem}
.tile p{margin:0;color:var(--muted);font-size:.92rem}
.steps{margin-top:1.4rem;background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.3rem}
.steps ol{margin:.4rem 0 0;padding-left:1.2rem;color:var(--muted)}
.site-footer{border-top:1px solid var(--line);padding:1.4rem 0 2rem;color:var(--muted);font-size:.88rem}
.footer-inner{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;padding-top:2rem}
  .phone{justify-self:center;width:min(100%,260px)}
  .nav{display:none}
  .grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .phone,.tile{animation:none}
}