/* ===== RESET ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
[hidden]{display:none!important;}
html{height:100%;scroll-behavior:smooth;}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased;height:100%;overflow-x:hidden;overflow-y:auto;background:#fff;}

:root{
  --bg:#e8e6f0;
  --purple:#afa6de;
  --purple2:#b3a2e7;
  --blue:#758AF0;
  --accent:#7078FD;
  --text:#1a1a2e;
  --text2:rgba(26,26,46,0.5);
  --glow:rgba(109,92,184,0.15);
  --sb:#7078FD;
}

/* ===== PAGE 1 ===== */
.page1{
  width:100%;min-height:100vh;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:80px 24px 160px;overflow:hidden;
  background:linear-gradient(180deg,transparent 55%,#ffffff 100%),linear-gradient(135deg,var(--purple2) 0%,var(--purple) 25%,var(--purple2) 50%,var(--purple) 75%,var(--blue) 100%);
}
#trail{position:absolute;inset:0;z-index:1;pointer-events:none;}

/* ===== HERO ===== */
.hero{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:900px;}

.logo{display:block;width:100px;height:100px;border-radius:24px;margin:0 auto 8px;transition:transform 0.4s cubic-bezier(0.22,1,0.36,1),filter 0.4s;cursor:default;filter:drop-shadow(0 8px 24px var(--glow));}
.logo:hover{transform:scale(1.08) rotate(-2deg);filter:drop-shadow(0 12px 36px rgba(109,92,184,0.25));}

.hero h1{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;color:var(--text);letter-spacing:-0.02em;line-height:1.2;text-align:center;}
.hero .sub{font-size:clamp(0.85rem,1.4vw,1rem);color:var(--text2);margin-bottom:32px;text-align:center;}

/* ===== FLOWCHART ===== */
.flow{
  position:relative;width:100%;max-width:840px;height:260px;margin-top:32px;
  display:flex;align-items:center;justify-content:center;
}
.flow-svg{
  width:100%;height:100%;overflow:visible;
}

/* Flow nodes (SVG-based for perfect alignment) */
.flow-node{
  opacity:0;transform:translateX(-24px);
  transition:opacity 0.6s ease,transform 0.6s cubic-bezier(0.22,1,0.36,1);
}.flow-node{transform-box:fill-box;transform-origin:center}.flow-node.vis:hover{transform:scale(1.06) translateX(0) !important;filter:drop-shadow(0 8px 24px rgba(109,92,184,0.2))}

.flow-node.vis{opacity:1;transform:translateX(0);}

.flow-box{
  fill:#fff;fill-opacity:0.85;stroke:rgba(109,92,184,0.1);stroke-width:1;
  filter:drop-shadow(0 2px 8px rgba(109,92,184,0.06));
cursor:default;}
.flow-box-accent{fill:rgba(109,92,184,0.1);stroke:rgba(109,92,184,0.15);stroke-width:1;}

.flow-text{font-size:13px;font-weight:600;fill:var(--text);text-anchor:middle;dominant-baseline:middle;}
.flow-tag{font-size:9px;font-weight:600;fill:var(--accent);text-anchor:middle;letter-spacing:0.06em;text-transform:uppercase;}
.flow-icon{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* Flow lines */
.flow-line{
  fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;
  opacity:0.3;
  stroke-dasharray:1000;stroke-dashoffset:1000;
  transition:stroke-dashoffset 0.8s ease;
}
.flow-line.drawn{stroke-dashoffset:0;}

/* Scroll hint */
.scroll-hint{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:default;user-select:none;opacity:0.5;transition:opacity 0.3s;}
.scroll-hint:hover{opacity:1;}
.scroll-hint svg{color:var(--text2);animation:hb 2.5s ease-in-out infinite;}
@keyframes hb{0%,100%{transform:translateY(0);opacity:0.4;}50%{transform:translateY(8px);opacity:0.8;}}
.scroll-hint span{font-size:0.75rem;color:var(--text2);}

/* ===== PAGE 2 ===== */
.page3{position:relative;width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px 24px 80px;background:#ffffff;overflow:hidden;}.page2{position:relative;width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px 24px 80px;background:#ffffff;overflow:hidden;}
.dl-inner{max-width:1000px;width:100%;text-align:center;}
.step-tag{position:absolute;top:40px;left:40px;font-size:1rem;font-weight:600;color:var(--accent);background:rgba(109,92,184,0.08);padding:8px 20px;border-radius:20px;z-index:10}.os{font-size:1.3rem;font-weight:500;color:var(--text2);margin-bottom:32px;}
.os strong{color:var(--accent);font-weight:600;}
.cards{display:flex;gap:48px;justify-content:center;flex-wrap:wrap;}.btn-glass,.btn-sub{transition:opacity 0.5s ease,transform 0.5s ease}.cards.locked .btn-glass,.cards.locked .btn-sub{opacity:0;transform:translateY(10px);pointer-events:none}.cards.unlocked .btn-glass,.cards.unlocked .btn-sub{opacity:1;transform:translateY(0)}

.card{flex:1;min-width:420px;max-width:520px;position:relative;overflow:hidden;border-radius:28px;padding:90px 50px;display:flex;flex-direction:column;align-items:center;gap:20px;background:linear-gradient(135deg,rgba(255,255,255,0.4) 0%,transparent 100%),linear-gradient(135deg,var(--purple2) 0%,var(--purple) 25%,var(--purple2) 50%,var(--purple) 75%,var(--blue) 100%);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(109,92,184,0.1);box-shadow:0 8px 32px rgba(109,92,184,0.08),0 2px 8px rgba(0,0,0,0.03);opacity:0;transition:transform 1s cubic-bezier(0.34,1.15,0.64,1),opacity 0.6s ease,box-shadow 0.35s ease,background 0.35s ease;}
.card:not(.vis)#card-left:not(.vis){transform:translateX(-120vw)}
.card:not(.vis)#card-right{transform:translateX(120vw)}
.card.vis{opacity:1;transform:translateX(0)}
.card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 20px 60px rgba(109,92,184,0.2),0 8px 24px rgba(0,0,0,0.08);}
.card-glow{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(109,92,184,0.06),transparent 60%);opacity:0;transition:opacity 0.5s;pointer-events:none;}
.card:hover .card-glow{opacity:1;}
.card-ic{color:#1a1a2e;opacity:0.9;margin-bottom:8px;position:relative;z-index:1;}
.card h3{font-size:1.6rem;font-weight:700;color:var(--text);position:relative;z-index:1;}
.card-desc{font-size:1.05rem;color:var(--text2);line-height:1.7;position:relative;z-index:1;text-align:center;}

/* ===== LIQUID GLASS BUTTON ===== */
.btn-glass{display:block;width:100%;padding:18px 0;margin-top:12px;font-size:1.1rem;font-weight:600;color:#fff;text-decoration:none;text-align:center;border-radius:18px;background:transparent;backdrop-filter:blur(30px) saturate(200%);-webkit-backdrop-filter:blur(30px) saturate(200%);border:1px solid rgba(255,255,255,0.15);box-shadow:inset 0 1px 1px rgba(255,255,255,0.4),inset 0 -1px 1px rgba(0,0,0,0.03);transition:all 0.4s cubic-bezier(0.22,1,0.36,1);cursor:default;position:relative;z-index:1;overflow:hidden;}
.btn-glass::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);transition:left 0.6s;}
.btn-glass:hover::before{left:100%;}
.btn-glass:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.5);box-shadow:0 8px 32px rgba(0,0,0,0.1),0 0 24px rgba(0,0,0,0.05),inset 0 2px 2px rgba(255,255,255,0.5),inset 0 -1px 2px rgba(0,0,0,0.08);transform:translateY(-3px);}
.btn-glass:active{transform:translateY(-1px);box-shadow:0 2px 12px rgba(109,92,184,0.15),inset 0 2px 2px rgba(255,255,255,0.3);}

.btn-sub{display:inline-block;margin-top:12px;font-size:0.9rem;color:var(--text2);text-decoration:none;padding:6px 12px;border-radius:8px;transition:all 0.3s;position:relative:z-index:1;}
.btn-sub:hover{color:var(--accent);background:rgba(109,92,184,0.06);text-decoration:none;}

/* ===== RESPONSIVE ===== */

@media(max-width:960px){.cards{gap:20px;}.card{min-width:0;max-width:420px;padding:40px 24px;}}
@media(max-width:900px){.flow{transform:scale(0.7);transform-origin:top center;margin-bottom:-60px;}}
@media(max-width:640px){.cards{flex-direction:column;align-items:center;}}
@media(max-width:600px){.logo{width:80px;height:80px;}.hero h1{font-size:1.5rem;}.flow{transform:scale(0.55);margin-bottom:-100px;}.card{min-width:280px;padding:36px 28px;}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}}
/* ===== PASSWORD AREA ===== */
.lock-msg{display:inline-flex;align-items:center;font-size:1.1rem;color:var(--text2);margin-top:100px;margin-bottom:-56px;transition:opacity 0.5s ease}.lock-msg svg{width:20px;height:20px}.lock-msg.hide{opacity:0;pointer-events:none}
.pw-area{margin-top:48px;text-align:center;display:flex;gap:12px;justify-content:center;align-items:center}.page3 .btn-glass{margin-top:24px}
.pw-locked{font-size:1.1rem;color:var(--text2);margin-bottom:20px;transition:opacity 0.5s ease,transform 0.5s ease;}
.pw-locked.hide{opacity:0;transform:translateY(-10px);pointer-events:none;}
.pw-input-wrap{display:flex;gap:12px;justify-content:center;align-items:center;}
.pw-input{width:260px;padding:14px 18px;font-size:1rem;border:1px solid rgba(109,92,184,0.2);border-radius:14px;background:rgba(255,255,255,0.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text);outline:none;transition:border-color 0.3s,box-shadow 0.3s;}
.pw-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(109,92,184,0.1);}
.pw-btn{padding:14px 28px;font-size:1rem;font-weight:600;color:#fff;border:none;border-radius:14px;background:linear-gradient(135deg,var(--purple2),var(--accent));cursor:default;transition:transform 0.3s,box-shadow 0.3s;}
.pw-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(109,92,184,0.25);}
.pw-btn:active{transform:translateY(0);}

/* Cards fade in */



@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-8px);}40%{transform:translateX(8px);}60%{transform:translateX(-4px);}80%{transform:translateX(4px);}}