/* ---------- landing ---------- */
.nav{position:fixed;inset:0 0 auto;height:74px;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.on{border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;height:74px;gap:26px;max-width:1240px}
.logo{display:flex;align-items:center;gap:9px;font-size:21px;font-weight:800;letter-spacing:-.055em}
.logo .m{width:27px;height:27px;border-radius:9px;background:var(--ink);position:relative}
.logo .m:before{content:"";position:absolute;left:6px;bottom:6px;width:15px;height:9px;
  background:var(--blue);clip-path:polygon(0 100%,34% 26%,64% 66%,100% 0,100% 100%)}
.nav nav{display:flex;gap:2px;margin-left:8px}
.nav nav a{padding:9px 14px;border-radius:10px;font-size:15.5px;font-weight:700;color:var(--ink2)}
.nav nav a:hover{background:var(--soft);color:var(--ink)}
@media(max-width:900px){.nav nav{display:none}}

.hero{padding:clamp(130px,17vh,190px) 0 0;text-align:center;position:relative;overflow:hidden}
.h1{font-size:clamp(36px,6.4vw,74px);font-weight:800;letter-spacing:-.05em;line-height:1.22}
.h1 .b{color:var(--blue)}
.hero .sub{margin:22px auto 0;max-width:640px;font-size:clamp(15px,1.45vw,19px);color:var(--ink2);line-height:1.8;font-weight:500}
.hero .cta{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* tilted oversized mock */
.stage{margin-top:clamp(46px,7vh,86px);position:relative;height:clamp(300px,42vw,560px);
  perspective:1600px;overflow:hidden}
.stage .glow{position:absolute;left:50%;top:-10%;width:1200px;height:600px;transform:translateX(-50%);
  background:radial-gradient(45% 50% at 50% 50%,rgba(37,99,245,.16),transparent 70%)}
.win{position:absolute;background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--sh3);overflow:hidden}
.win .bar{height:40px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid var(--line2);background:#FBFCFE}
.win .bar i{width:9px;height:9px;border-radius:50%;background:#E2E7EF}
.win .bar .u{margin-left:10px;height:22px;flex:1;max-width:260px;border-radius:6px;background:var(--soft);
  display:flex;align-items:center;padding:0 9px;font-size:11px;color:var(--mute);font-weight:700}
.wA{left:50%;top:0;width:min(980px,86vw);transform:translateX(-50%) perspective(1600px) rotateX(9deg) rotateZ(-.6deg)}
.wB{left:calc(50% + min(300px,30vw));top:clamp(90px,13vw,170px);width:min(420px,44vw);
  transform:rotate(3.2deg);box-shadow:var(--sh3)}
@media(max-width:820px){.wB{display:none}}

.dash{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;padding:18px;text-align:left}
.dcard{border:1px solid var(--line);border-radius:14px;padding:14px}
.dcard .k{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--blue)}
.dcard h4{font-size:15.5px;font-weight:800;letter-spacing:-.03em;margin:6px 0 4px}
.dcard p{font-size:12.5px;color:var(--ink2);line-height:1.6}
.fbar{margin-top:11px;border-radius:12px;padding:12px;background:var(--sky);border:1px solid #D7E3FF}
.fbar .t{font-size:10.5px;font-weight:800;color:var(--blue);letter-spacing:.06em}
.fbar .v{font-size:23px;font-weight:800;letter-spacing:-.04em;margin:3px 0 1px}
.fbar .d{font-size:11.5px;color:var(--ink2);font-weight:600}
.pb{display:flex;gap:7px;margin-top:11px}
.pb span{flex:1;height:34px;border-radius:9px;display:grid;place-items:center;font-size:12px;font-weight:800}
.pb .a{background:var(--ink);color:#fff}
.pb .b{background:#fff;border:1.4px solid var(--line)}
.lrow{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:11px;padding:9px 11px;margin-bottom:7px}
.lrow .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.lrow .t{font-size:12.5px;font-weight:700;flex:1}
.lrow .m{font-size:11.5px;color:var(--mute);font-weight:700}

/* marquee */
.mq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;
  padding:26px 0;overflow:hidden;margin-top:clamp(40px,6vh,70px)}
.mq .lb{text-align:center;font-size:13.5px;font-weight:800;color:var(--mute);margin-bottom:18px}
.mq .track{display:flex;gap:44px;width:max-content;animation:mv 34s linear infinite}
@keyframes mv{to{transform:translateX(-50%)}}
.mq .it{font-size:19px;font-weight:800;letter-spacing:-.04em;color:#9AA3B5;white-space:nowrap}

section.sec{padding:clamp(80px,13vh,150px) 0}
.eyeb{font-size:14px;font-weight:800;color:var(--blue);letter-spacing:.02em;text-align:center}
.h2{font-size:clamp(28px,4.2vw,54px);font-weight:800;letter-spacing:-.05em;line-height:1.26;text-align:center;margin-top:12px}
.h2s{margin:16px auto 0;max-width:620px;text-align:center;color:var(--ink2);font-size:clamp(14.5px,1.25vw,17.5px);line-height:1.8}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(38px,6vh,64px)}
@media(max-width:860px){.g3{grid-template-columns:1fr}}
.pcard{border:1.6px solid var(--ink);border-radius:20px;padding:30px 26px;background:#fff;
  box-shadow:4px 5px 0 var(--line)}
.pcard .n{font-size:12.5px;font-weight:800;color:var(--mute);letter-spacing:.1em}
.pcard h4{font-size:19px;font-weight:800;letter-spacing:-.035em;margin-top:10px}
.pcard p{margin-top:9px;font-size:14.5px;color:var(--ink2);line-height:1.75}
.pcard .big{margin-top:18px;font-size:27px;font-weight:800;color:var(--blue);letter-spacing:-.04em}

.feat{display:flex;flex-direction:column;gap:20px;margin-top:clamp(38px,6vh,64px)}
.fbox{border-radius:26px;padding:clamp(26px,3vw,46px);display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(20px,3vw,44px);align-items:center;border:1.6px solid rgba(11,15,25,.08)}
@media(max-width:900px){.fbox{grid-template-columns:1fr}}
.fbox .k{font-size:13px;font-weight:800;letter-spacing:.04em}
.fbox h3{font-size:clamp(22px,2.6vw,36px);font-weight:800;letter-spacing:-.045em;margin:12px 0 12px;line-height:1.3}
.fbox p{font-size:15px;color:var(--ink2);line-height:1.8}
.fbox .shot{background:#fff;border:1px solid rgba(11,15,25,.08);border-radius:16px;padding:16px;box-shadow:var(--sh2)}
.b1{background:#EDF3FF}.b2{background:#FFF1E8}.b3{background:#EAF8F1}.b4{background:#F1ECFF}

.pay2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(38px,6vh,60px)}
@media(max-width:860px){.pay2{grid-template-columns:1fr}}
.paycard{border:1.8px solid var(--ink);border-radius:22px;padding:30px;background:#fff;box-shadow:5px 6px 0 var(--blue)}
.paycard.c{box-shadow:5px 6px 0 var(--cash)}
.paycard .top{display:flex;align-items:center;gap:12px}
.paycard .ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px}
.paycard h4{font-size:20px;font-weight:800;letter-spacing:-.035em}
.paycard p{margin-top:14px;font-size:14.5px;color:var(--ink2);line-height:1.8}
.paycard ul{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.paycard li{list-style:none;font-size:14px;color:var(--ink2);display:flex;gap:9px}
.paycard li:before{content:"✓";color:var(--blue);font-weight:800}
.paycard.c li:before{color:var(--cash)}

.pr{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(38px,6vh,60px)}
@media(max-width:900px){.pr{grid-template-columns:1fr}}
.prc{border:1.6px solid var(--line);border-radius:22px;padding:30px;background:#fff;display:flex;flex-direction:column}
.prc.best{border:1.8px solid var(--ink);box-shadow:5px 6px 0 var(--blue)}
.prc .nm{font-size:15px;font-weight:800;color:var(--blue)}
.prc .pz{margin-top:12px;font-size:38px;font-weight:800;letter-spacing:-.05em}
.prc .pz small{font-size:15px;font-weight:700;color:var(--mute);margin-left:3px}
.prc ul{margin:20px 0 24px;display:flex;flex-direction:column;gap:10px}
.prc li{list-style:none;font-size:14.5px;color:var(--ink2);display:flex;gap:9px}
.prc li:before{content:"·";color:var(--blue);font-weight:800}

.dark{background:var(--ink);color:#fff;padding:clamp(80px,13vh,140px) 0}
.dark .h2,.dark .eyeb{color:#fff}
.dark .eyeb{color:#8FB0FF}
.dark .h2s{color:rgba(255,255,255,.66)}
.dg{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:clamp(36px,6vh,60px)}
@media(max-width:900px){.dg{grid-template-columns:1fr 1fr}}
.dg .it b{display:block;font-size:16px;font-weight:800;letter-spacing:-.03em}
.dg .it p{margin-top:8px;font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.7}
.dg .it .ic{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.1);margin-bottom:12px;
  display:grid;place-items:center;font-size:15px;font-weight:800;color:#8FB0FF}

.ftr{background:#fff;border-top:1px solid var(--line);padding:clamp(48px,7vh,80px) 0 44px;color:var(--ink2)}
.ftr b{color:var(--ink)}
.ftr .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:26px;font-size:13.5px;line-height:2}
@media(max-width:760px){.ftr .cols{grid-template-columns:1fr}}
.ftr .bot{margin-top:34px;border-top:1px solid var(--line);padding-top:22px;font-size:12.5px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--mute)}