*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:"Segoe UI","Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
color:#443a63;
line-height:1.75;
background:linear-gradient(180deg,#ffffff 0%,#f5efff 45%,#e9defb 100%);
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
body::selection{background:#cbb8f2;color:#2c2350}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
section{scroll-margin-top:84px}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.2}

.page-bg{
position:fixed;
inset:0;
z-index:-2;
background:
linear-gradient(160deg,rgba(255,255,255,.92) 0%,rgba(248,243,255,.84) 45%,rgba(255,255,255,.9) 100%),
url("./bg.jpg") center/cover no-repeat;
}
.page-bg::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(900px 520px at 12% 8%,rgba(214,196,255,.5),transparent 60%),
radial-gradient(760px 480px at 88% 92%,rgba(233,222,253,.55),transparent 60%);
pointer-events:none;
}

.wrap{width:min(1160px,100%);margin:0 auto;padding:0 clamp(20px,4vw,44px)}

.nav{
position:fixed;
top:0;left:0;right:0;
z-index:60;
display:flex;
align-items:center;
justify-content:space-between;
padding:14px clamp(20px,4vw,48px);
background:rgba(255,255,255,.55);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid rgba(190,165,235,.28);
}
.brand{display:flex;align-items:center;gap:11px;font-family:Georgia,serif;font-size:1.3rem;font-weight:700;color:#4b3a85;letter-spacing:.02em}
.brand img{width:40px;height:40px;border-radius:12px;object-fit:cover;box-shadow:0 6px 16px rgba(110,80,190,.25);border:1px solid rgba(255,255,255,.8)}
.links{display:flex;align-items:center;gap:clamp(14px,2.6vw,34px)}
.links a{font-size:.95rem;font-weight:600;color:#675a92;position:relative;transition:color .25s}
.links a::after{content:"";position:absolute;left:50%;bottom:-6px;width:0;height:2px;background:linear-gradient(90deg,#7a5fd0,#b294f2);border-radius:2px;transform:translateX(-50%);transition:width .25s}
.links a:hover{color:#543ca8}
.links a:hover::after{width:100%}

.banner{
position:relative;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:120px clamp(20px,5vw,48px) 80px;
overflow:hidden;
}
.orb{position:absolute;border-radius:50%;filter:blur(72px);opacity:.55;pointer-events:none;animation:drift 11s ease-in-out infinite alternate}
.orb-a{width:430px;height:430px;background:#d5c0ff;top:8%;left:-140px}
.orb-b{width:390px;height:390px;background:#efdffc;bottom:6%;right:-120px;animation-delay:-5s}
@keyframes drift{
from{transform:translateY(-14px) scale(1)}
to{transform:translateY(20px) scale(1.08)}
}
.banner-inner{position:relative;z-index:2;max-width:880px}
.badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:9px 20px;
border-radius:999px;
background:rgba(255,255,255,.72);
border:1px solid rgba(190,160,245,.55);
color:#6a51c4;
font-size:.86rem;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
box-shadow:0 10px 30px rgba(130,95,205,.12);
}
.banner h1.grad{
margin:26px auto 22px;
font-size:clamp(2.7rem,7vw,5.4rem);
font-weight:700;
letter-spacing:-.01em;
background:linear-gradient(100deg,#5c45b8 0%,#8a68e0 35%,#c39ef7 55%,#6a4fc0 90%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.lead{
max-width:700px;
margin:0 auto;
font-size:clamp(1.02rem,2.1vw,1.3rem);
color:#4d4272;
}
.brandline{
max-width:640px;
margin:18px auto 0;
font-family:Georgia,serif;
font-style:italic;
font-size:1.02rem;
color:#7a6aa6;
}
.btn{
display:inline-flex;
align-items:center;
gap:9px;
margin-top:38px;
padding:15px 34px;
border-radius:999px;
color:#fff;
font-weight:700;
font-size:1rem;
background:linear-gradient(120deg,#7a5fd0,#a380ef 55%,#8f6ce0);
box-shadow:0 16px 34px rgba(115,80,200,.34);
transition:transform .25s,box-shadow .25s;
}
.btn svg{transition:transform .25s}
.btn:hover{transform:translateY(-3px);box-shadow:0 22px 44px rgba(115,80,200,.42)}
.btn:hover svg{transform:translateY(3px)}
.scroll-hint{
position:absolute;
left:50%;
bottom:28px;
width:2px;
height:52px;
transform:translateX(-50%);
background:linear-gradient(180deg,#8a6cd8,rgba(138,108,216,0));
animation:drip 2s ease-in-out infinite;
}
@keyframes drip{
0%{transform:translateX(-50%) scaleY(0);transform-origin:top}
45%{transform:translateX(-50%) scaleY(1);transform-origin:top}
55%{transform:translateX(-50%) scaleY(1);transform-origin:bottom}
100%{transform:translateX(-50%) scaleY(0);transform-origin:bottom}
}

.about,.intro,.screenshot{padding:clamp(72px,11vh,120px) 0;position:relative}
.kicker{
display:block;
text-align:center;
font-size:.82rem;
font-weight:800;
letter-spacing:.3em;
text-transform:uppercase;
color:#7a5fd0;
margin-bottom:14px;
}
.about h2,.intro h2,.screenshot h2{
text-align:center;
color:#332a52;
font-size:clamp(1.85rem,4.4vw,3rem);
font-weight:700;
margin-bottom:22px;
}
.about-lead{
max-width:820px;
margin:0 auto;
text-align:center;
font-size:clamp(1rem,1.9vw,1.16rem);
color:#574a7e;
}
.chips{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:54px;
}
.chip{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:10px;
padding:26px 24px;
border-radius:22px;
background:rgba(255,255,255,.68);
border:1px solid rgba(200,175,240,.4);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
box-shadow:0 16px 40px rgba(125,95,200,.1);
transition:transform .3s,box-shadow .3s;
}
.chip:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(125,95,200,.18)}
.chip-ic{
display:flex;
align-items:center;
justify-content:center;
width:52px;height:52px;
border-radius:16px;
color:#6c4fc4;
background:linear-gradient(140deg,#ece2ff,#f9f5ff);
box-shadow:inset 0 0 0 1px rgba(170,135,235,.35);
}
.chip strong{font-size:1.05rem;color:#3c3160;font-family:Georgia,serif}
.chip span:last-child{font-size:.9rem;color:#7a6ca0}

.sec-head{margin-bottom:clamp(40px,7vh,70px)}
.sec-sub{
max-width:680px;
margin:0 auto;
text-align:center;
font-size:1.05rem;
color:#5d507f;
}
.intro-item{
display:flex;
align-items:center;
justify-content:center;
gap:clamp(36px,7vw,96px);
margin-bottom:clamp(70px,11vh,120px);
}
.intro-item:last-child{margin-bottom:0}
.intro-item:nth-of-type(odd){flex-direction:row-reverse}
.intro-img{
flex:0 0 auto;
width:clamp(180px,24vw,300px);
aspect-ratio:9/20;
border-radius:26px;
overflow:hidden;
position:relative;
border:7px solid rgba(255,255,255,.8);
background:#fff;
box-shadow:0 30px 60px rgba(115,80,200,.2),0 10px 20px rgba(115,80,200,.12);
transform:rotate(-2deg);
transition:transform .45s ease;
}
.intro-item:nth-of-type(odd) .intro-img{transform:rotate(2deg)}
.intro-img:hover{transform:rotate(0deg) scale(1.02)}
.intro-img::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(255,255,255,0) 55%,rgba(120,90,200,.16));
pointer-events:none;
}
.intro-img img{width:100%;height:100%;object-fit:cover}
.intro-txt{flex:1;min-width:0;max-width:560px}
.step{
display:inline-flex;
align-items:center;
justify-content:center;
width:46px;height:46px;
border-radius:50%;
color:#fff;
font-weight:800;
font-size:1rem;
background:linear-gradient(140deg,#7a5fd0,#ad8df2);
box-shadow:0 10px 22px rgba(115,80,200,.3);
margin-bottom:18px;
}
.intro-txt h3{
color:#332a52;
font-size:clamp(1.45rem,3vw,2.1rem);
font-weight:700;
margin-bottom:14px;
}
.intro-txt p{color:#5a4d80;font-size:clamp(.98rem,1.6vw,1.08rem)}

.shot-frame{
max-width:900px;
margin:0 auto;
padding:14px;
border-radius:38px;
background:rgba(255,255,255,.6);
border:1px solid rgba(200,175,240,.45);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
box-shadow:0 36px 80px rgba(115,80,200,.2);
}
.shot-frame img{
width:100%;
max-height:80vh;
object-fit:contain;
border-radius:26px;
background:#fdfcff;
}
.tag-row{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:14px;
margin-top:34px;
}
.tag-row span{
padding:10px 22px;
border-radius:999px;
font-size:.92rem;
font-weight:600;
color:#5d479f;
background:rgba(255,255,255,.7);
border:1px solid rgba(190,160,245,.5);
box-shadow:0 8px 20px rgba(125,95,200,.12);
}

.connect{
background:linear-gradient(150deg,#5b46ae 0%,#8a6bd6 48%,#a98df0 100%);
color:#fff;
text-align:center;
padding:clamp(70px,10vh,110px) 0 0;
}
.connect .wrap{display:flex;flex-direction:column;align-items:center}
.foot-logo{
width:72px;height:72px;
border-radius:20px;
object-fit:cover;
border:2px solid rgba(255,255,255,.7);
box-shadow:0 18px 40px rgba(40,20,90,.35);
margin-bottom:22px;
}
.connect h2{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:700;margin-bottom:16px}
.connect p{max-width:640px;font-size:1.03rem;opacity:.94}
.mail{
display:inline-block;
margin:26px auto 0;
padding:14px 36px;
border-radius:999px;
background:#fff;
color:#5b46ae;
font-weight:800;
font-size:1.05rem;
letter-spacing:.02em;
box-shadow:0 18px 40px rgba(40,20,90,.28);
transition:transform .25s,box-shadow .25s;
}
.mail:hover{transform:translateY(-3px);box-shadow:0 24px 52px rgba(40,20,90,.36)}
.foot-line{
width:100%;
display:flex;
flex-direction:column;
gap:4px;
align-items:center;
justify-content:center;
padding:34px 20px 26px;
margin-top:clamp(34px,6vh,60px);
border-top:1px solid rgba(255,255,255,.28);
font-size:.92rem;
opacity:.95;
}
.foot-line .brand-mark{font-family:Georgia,serif;font-weight:700;letter-spacing:.06em}

@media (max-width:1020px){
.chips{grid-template-columns:repeat(2,1fr)}
.intro-item,.intro-item:nth-of-type(odd){flex-direction:column;text-align:center;gap:36px}
.intro-img,.intro-item:nth-of-type(odd) .intro-img{width:min(46vw,240px);transform:rotate(0deg)}
.intro-txt{max-width:620px;margin:0 auto}
.chip{align-items:center;text-align:center}
}
@media (max-width:640px){
.links{display:none}
.nav{padding:12px 18px}
.brand{font-size:1.15rem}
.banner{min-height:92vh;padding-top:110px}
.chips{grid-template-columns:1fr;margin-top:40px}
.chip{flex-direction:row;align-items:center;text-align:left;gap:16px}
.chip span:last-child{flex:1}
.intro-img,.intro-item:nth-of-type(odd) .intro-img{width:52vw;min-width:150px;max-width:210px}
.step{margin:0 auto 18px}
.shot-frame{padding:8px;border-radius:26px}
.shot-frame img{border-radius:18px}
.tag-row{gap:10px}
.tag-row span{padding:8px 16px;font-size:.84rem}
}