/* 자동 생성: tools/build-design-pages.cjs — 원본 tools/design/Main.dc.html. 직접 고치지 말고 디자인 원본을 고친 뒤 다시 생성하세요. */
body{margin:0;background:#fff}
*{box-sizing:border-box}
a{color:#2633ff;text-decoration:none}
a:hover{color:#1420c4}
.pg{width:100%;font-family:"Geist","IBM Plex Sans KR",sans-serif;color:#0a0b0d;background:#fff;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-x:clip}
.pg h1,.pg h2,.pg h3,.pg p,.pg ul,.pg ol,.pg dl,.pg dd{margin:0}
.paused *{animation-play-state:paused!important}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 32px}
.acc{color:var(--accent,#2633ff)}
.ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ab{position:absolute}

.announce{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;padding:10px 16px;font-size:13px;color:#4b5164;border-bottom:1px solid #eceef3}
.announce a{font-weight:600;color:var(--accent,#2633ff)}
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid #eef0f4}
.nav-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;min-height:66px}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:"Geist",sans-serif;font-weight:700;font-size:21px;letter-spacing:-.04em;color:#0a0b0d}
.brand:hover{color:#0a0b0d}
.brand svg{width:30px;height:30px;flex:none}
.links{display:flex;gap:2px;flex:1}
.links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;color:#1c2030;font-size:15px;font-weight:500;white-space:nowrap}
.links a:hover{background:#f3f4f8;color:#0a0b0d}
.links a.cur-page{color:var(--accent,#2633ff)}
.nav-cta{display:flex;gap:8px;align-items:center}
.lang{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid #e1e3ea;background:#fff;color:#1c2030;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.lang svg{width:16px;height:16px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:18px;height:18px}
.btn-pri{background:var(--accent,#2633ff);color:#fff}
.btn-pri:hover{color:#fff;background:#0a0b0d}
.btn-sec{background:#fff;color:#0a0b0d;border:1px solid #d8dbe6}
.btn-sec:hover{color:#0a0b0d;border-color:#0a0b0d}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px}
.btn-light{background:#fff;color:#08145e}
.btn-light:hover{color:#08145e;background:#e3e7ff}
.btn-line{border:1px solid rgba(255,255,255,.5);color:#fff}
.btn-line:hover{color:#fff;border-color:#fff}
.tlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;font-size:15px;color:var(--accent,#2633ff)}
.tlink svg{width:16px;height:16px}
.dark .tlink{color:#e3ccff}
.dark .tlink:hover{color:#fff}

.hero{position:relative;overflow:hidden;min-height:720px;display:flex;align-items:center;padding:72px 0}
.hero>.wrap{position:relative;z-index:2}
.hero-bg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#eceef5 1px,transparent 1px),linear-gradient(90deg,#eceef5 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 72% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 72% 40%,#000 30%,transparent 75%)}
.px{position:absolute;width:12px;height:12px;background:var(--accent,#2633ff);animation:pxb 4s ease-in-out infinite}
.px.l{background:#c084fc}
@keyframes pxb{0%,100%{opacity:.12}50%{opacity:1}}
.hero-copy{max-width:740px;display:flex;flex-direction:column;gap:32px}
.h1{font-size:clamp(34px,3.9vw,54px);line-height:1.22;letter-spacing:-.035em;font-weight:600}
.h1 .nb{white-space:nowrap}
.h1-sub{color:#69718d;font-weight:500}
.lead{font-size:18px;line-height:1.7;color:#464c5e;max-width:34em}
.acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.facts{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;padding:0;font-size:14px;color:#464c5e}
.facts li{display:flex;align-items:center;gap:8px}
.facts svg{width:18px;height:18px;color:var(--accent,#2633ff)}
.uses-sec{position:relative;padding:8px 0 16px}
.uses{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;position:relative}
.use{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:18px;border:1px solid #e4e6ee;background:#fff;color:#0a0b0d;transition:border-color .2s,transform .2s,box-shadow .2s}
.use:hover{color:#0a0b0d;border-color:var(--accent,#2633ff);transform:translateY(-2px);box-shadow:0 20px 40px -24px rgba(15,22,90,.35)}
.use .ico{width:42px;height:42px;border-radius:12px;background:#eef0ff;color:var(--accent,#2633ff);display:flex;align-items:center;justify-content:center}
.use .ico svg{width:22px;height:22px}
.use b{font-size:17px;letter-spacing:-.02em}
.use span{font-size:14px;color:#5d6375;line-height:1.5}

.sec{position:relative;padding:128px 0}
.soft{background:#f6f7fa}
.dark{background:#060a26;color:#eef0ff}
.dark .lead{color:#b4b9da}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:56px 64px}
.row.rev{flex-direction:row-reverse}
.copy{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:24px}
.vis{flex:1.55 1 500px;min-width:0}
.h2{font-size:clamp(32px,4.1vw,52px);line-height:1.14;letter-spacing:-.04em;font-weight:700}
.ticks{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.55;color:#262b3a}
.ticks svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--accent,#2633ff)}
.dark .ticks li{color:#dfe3ff}
.dark .ticks svg{color:#c084fc}
.note{padding:18px 20px;border-radius:16px;background:#fff;border:1px solid #e4e6ee;font-size:15px;line-height:1.65;color:#3a4052}
.note b{color:#0a0b0d}

.scene{position:relative;width:100%;container-type:inline-size;border-radius:22px;background:#fbfbfd;border:1px solid #e4e6ee;overflow:hidden;box-shadow:0 50px 100px -40px rgba(15,22,90,.35),0 2px 6px rgba(15,22,90,.05)}
.dark .scene{background:#0b1034;border-color:#20285a;box-shadow:0 50px 120px -40px rgba(0,0,0,.7);background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:4cqw 4cqw}
.cin{position:absolute;inset:0;font-size:2cqw}
.wbar{position:absolute;left:0;right:0;top:0;height:11%;display:flex;align-items:center;gap:1.2em;padding:0 1.8em;background:#fff;border-bottom:1px solid #eceef4;font-size:.95em;color:#5a6073;z-index:2}
.dots{display:flex;gap:.45em}
.dots i{display:block;width:.75em;height:.75em;border-radius:50%;background:#dfe1ea}
.url{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{display:inline-flex;align-items:center;gap:.45em;padding:.35em .8em;border-radius:1em;background:#eef0ff;color:var(--accent,#2633ff);font-weight:600;white-space:nowrap}
.tog{display:inline-flex;align-items:center;gap:.6em;font-weight:600;color:#30364a;white-space:nowrap}
.tog i{position:relative;display:block;width:2.8em;height:1.6em;border-radius:1em;background:#d5d8e4;transition:background .3s .4s}
.tog i::after{content:"";position:absolute;left:.2em;top:.2em;width:1.2em;height:1.2em;border-radius:50%;background:#fff;transition:transform .3s .4s}
.tog.on i{background:var(--accent,#2633ff)}
.tog.on i::after{transform:translateX(1.2em)}

.cur{position:absolute;z-index:30;width:2.3em;height:2.3em;transition:left .6s cubic-bezier(.3,.7,.2,1),top .6s cubic-bezier(.3,.7,.2,1);pointer-events:none}
.cur svg{display:block;width:100%;height:100%;filter:drop-shadow(0 .2em .35em rgba(0,0,0,.35))}
.cur path{fill:#0a0b0d;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.dark .cur path{fill:#fff;stroke:#0a0b0d}
.cur::after{content:"";position:absolute;left:-.8em;top:-.8em;width:1.8em;height:1.8em;border-radius:50%;border:2px solid var(--accent,#2633ff);opacity:0}
.dark .cur::after{border-color:#c084fc}
.cur.ca::after{animation:clkA .6s ease-out .45s}
.cur.cb::after{animation:clkB .6s ease-out .45s}
@keyframes clkA{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
@keyframes clkB{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}

.phone{position:absolute;border-radius:2.05em;padding:.16em;background:linear-gradient(150deg,#6a6e78 0%,#202227 20%,#45484f 48%,#16171a 76%,#575a62 100%);box-shadow:inset 0 0 0 .06em rgba(255,255,255,.25),0 .3em .6em rgba(8,10,30,.2),0 1.8em 3.2em -1em rgba(8,10,30,.5)}
.phone::before{content:"";position:absolute;right:-.15em;top:23%;width:.17em;height:10%;border-radius:0 .12em .12em 0;background:linear-gradient(90deg,#2a2c31,#7a7e88)}
.phone::after{content:"";position:absolute;left:-.15em;top:17%;width:.17em;height:6.5%;border-radius:.12em 0 0 .12em;background:linear-gradient(270deg,#2a2c31,#7a7e88);box-shadow:0 2.4em 0 #55585f}
.scr{position:relative;width:100%;height:100%;border-radius:1.9em;overflow:hidden;background:#fff;border:.34em solid #050507}
.scr::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.05) 28%,rgba(255,255,255,0) 40%)}
.cam{position:absolute;left:50%;top:.85em;width:.62em;height:.62em;margin-left:-.31em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#4a5a8c 0 15%,#0d1018 38%,#000 70%);box-shadow:0 0 0 .07em #000;z-index:10}
.isl{position:absolute;left:50%;top:.78em;width:3.3em;height:1em;margin-left:-1.65em;border-radius:1em;background:radial-gradient(circle at 78% 50%,#2c3a66 0 .13em,#05060a .2em,#000 .5em);z-index:10}
.hbar{position:absolute;left:50%;bottom:.75em;width:4em;height:.22em;margin-left:-2em;border-radius:1em;background:rgba(0,0,0,.75);z-index:10}
.app-top{display:flex;align-items:center;justify-content:space-between;height:3.6em;padding:1.5em 1em .2em;background:#fff;border-bottom:1px solid #efefef}
.app-top b{font-size:1.15em;font-weight:700;letter-spacing:-.02em;color:#111}
.at-i{display:flex;gap:.7em;color:#111}
.at-i svg{width:1.25em;height:1.25em}
.feed{display:flex;flex-direction:column;background:#fff;transition:transform .7s cubic-bezier(.2,.7,.2,1) .15s}
.feed.up{transform:translateY(-38%)}
.post{display:flex;flex-direction:column}
.ph{display:flex;align-items:center;gap:.5em;padding:.55em .8em;font-size:.85em;font-weight:600;color:#111;white-space:nowrap;overflow:hidden}
.ph i{display:block;width:1.9em;height:1.9em;border-radius:50%;flex:none;box-shadow:0 0 0 .14em #fff,0 0 0 .28em #f05a7e}
.post .img{display:block;height:11em}
.act{display:flex;gap:.8em;padding:.6em .8em .25em;color:#111}
.act svg{width:1.3em;height:1.3em}
.cap{display:block;padding:0 .8em .7em;font-size:.8em;font-weight:600;color:#111;white-space:nowrap}
.ibar{position:absolute;left:.6em;right:.6em;bottom:.9em;display:flex;align-items:center;height:2.5em;padding:0 .85em;border-radius:1.3em;background:#fff;border:1px solid #dcdfe9;white-space:nowrap;overflow:hidden;color:#0a0b0d;z-index:3;transition:border-color .3s .3s,box-shadow .3s .3s}
.ibar.on{border-color:var(--accent,#2633ff);box-shadow:0 0 0 .22em rgba(38,51,255,.16)}
.tv{white-space:nowrap;overflow:hidden}
.tv.ph{color:#9a9fb0}
.caret{display:inline-block;width:1.5px;height:1.15em;margin-left:1px;background:var(--accent,#2633ff);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.rip{position:absolute;left:50%;top:46%;width:3.2em;height:3.2em;margin:-1.6em 0 0 -1.6em;border-radius:50%;background:rgba(38,51,255,.4);opacity:0;pointer-events:none;z-index:7}
.rip.on{animation:rip .9s ease-out .15s}
@keyframes rip{0%{opacity:.95;transform:scale(.25)}100%{opacity:0;transform:scale(2.6)}}
.mtag{position:absolute;left:50%;top:-.9em;z-index:8;transform:translateX(-50%);padding:.25em .8em;border-radius:1em;background:var(--accent,#2633ff);color:#fff;font-size:.95em;font-weight:700;white-space:nowrap}

.tc{position:absolute}
.tc .phone{left:0;top:0;right:0;bottom:1.7em;font-size:.48em;transition:box-shadow .25s .4s}
.tc.sel .phone{box-shadow:0 0 0 2px #fff,0 0 0 4.5px var(--accent,#2633ff),0 1em 2em -1em rgba(10,14,60,.5)}
.chk{position:absolute;left:-.45em;top:-.45em;z-index:9;width:1.9em;height:1.9em;border-radius:.55em;background:#fff;border:1.5px solid #c9cdda;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s .4s,border-color .2s .4s}
.chk svg{width:1.2em;height:1.2em}
.tc.sel .chk{background:var(--accent,#2633ff);border-color:var(--accent,#2633ff)}
.tname{position:absolute;left:0;right:0;bottom:0;height:1.6em;line-height:1.6em;font-size:.85em;color:#4b5164;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.toast{position:absolute;z-index:25;display:flex;align-items:center;gap:.6em;padding:.75em 1em;border-radius:.9em;background:#0a0b0d;color:#fff;font-size:.92em;font-weight:600;box-shadow:0 1em 2.4em -1em rgba(0,0,0,.5);animation:toastin .4s cubic-bezier(.2,.8,.2,1) both;white-space:nowrap}
.toast svg{width:1.2em;height:1.2em;color:#c084fc;flex:none}
@keyframes toastin{from{opacity:0;transform:translateY(.8em)}to{opacity:1;transform:none}}

.sbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px}
.stages{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.stages li{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;background:#eef0f5;color:#5d6375;font-size:14px;font-weight:500;transition:background .3s,color .3s}
.stages li b{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#fff;font-size:12px;font-family:"Geist",sans-serif;color:#0a0b0d}
.stages li.on{background:var(--accent,#2633ff);color:#fff}
.stages li.on b{color:var(--accent,#2633ff)}
.stages li.done{color:#0a0b0d}
.dark .stages li{background:#151b47;color:#aab0d6}
.dark .stages li b{background:#232a5e;color:#fff}
.dark .stages li.on{background:#c084fc;color:#14092b}
.dark .stages li.on b{background:#14092b;color:#c084fc}
.dark .stages li.done{color:#fff}
.pp{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #d8dbe6;background:#fff;color:#0a0b0d;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.pp svg{width:16px;height:16px}
.dark .pp{background:transparent;border-color:#2c3466;color:#e9ecff}

.pcb{position:absolute;border-radius:.7em;overflow:hidden;background:#0b0c0f;border:.38em solid #0b0c0f;box-shadow:0 0 0 1px #2c2f36,0 1.2em 2.4em -1em rgba(8,10,30,.5);transition:box-shadow .3s}
.pcb.main{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent,#2633ff)}
.pcb.drop{box-shadow:0 0 0 2px #fff,0 0 0 4px #c084fc,0 0 2.4em rgba(192,132,252,.7)}
.pcin{position:absolute;inset:0;font-size:.82em}
.wall{position:absolute;inset:0;background:radial-gradient(ellipse at 28% 105%,#9cc2ff 0%,rgba(156,194,255,0) 55%),radial-gradient(ellipse at 85% -5%,#3b4fc4 0%,rgba(59,79,196,0) 60%),linear-gradient(160deg,#0d1a4a,#1c3a9e 55%,#4f7fe8)}
.tbar{position:absolute;left:0;right:0;bottom:0;height:12%;display:flex;align-items:center;justify-content:center;gap:.5em;background:rgba(235,239,248,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-top:1px solid rgba(255,255,255,.6)}
.tbar i{display:block;width:1.15em;height:1.15em;border-radius:.28em}
.tbar i:nth-child(1){background:linear-gradient(135deg,#4fc3ff,#1d6fe8)}
.tbar i:nth-child(2){background:#fff;box-shadow:inset 0 0 0 .12em #9aa3b5;border-radius:50%}
.tbar i:nth-child(3){background:linear-gradient(180deg,#ffd76b,#f2a900)}
.tbar i:nth-child(4){background:radial-gradient(circle at 50% 50%,#fff 0 22%,#3aa0ff 23% 55%,#0b5fd8 56%);border-radius:50%}
.tclk{position:absolute;right:.7em;top:50%;transform:translateY(-50%);font-size:.7em;color:#1b1e26;white-space:nowrap}
.bw{position:absolute;left:7%;right:7%;top:8%;bottom:18%;background:#fff;border-radius:.45em;overflow:hidden;box-shadow:0 .8em 1.8em -.6em rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.08)}
.bw-t{display:flex;align-items:flex-end;justify-content:space-between;height:2em;padding:0 0 0 .5em;background:#e3e6ec}
.bw-t .tab{display:flex;align-items:center;gap:.4em;height:1.55em;padding:0 .8em;border-radius:.45em .45em 0 0;background:#fff;font-size:.72em;color:#202124;white-space:nowrap}
.bw-t .tab i{display:block;width:.9em;height:.9em;border-radius:.2em;background:#0d0d0d;box-shadow:inset 0 0 0 .2em #3c50d8}
.wc{display:flex;align-self:stretch}
.wc i{position:relative;display:block;width:2.2em}
.wc i::before{content:"";position:absolute;left:50%;top:50%;width:.7em;margin-left:-.35em;border-top:1px solid #3c4043}
.wc i:nth-child(2)::before{height:.6em;margin-top:-.3em;border:1px solid #3c4043}
.wc i:nth-child(3)::before{height:.75em;margin-top:-.375em;border:0;background:linear-gradient(45deg,transparent 46%,#3c4043 46% 54%,transparent 54%),linear-gradient(-45deg,transparent 46%,#3c4043 46% 54%,transparent 54%)}
.srch{display:flex;align-items:center;gap:.5em;margin:1.1em auto 0;width:82%;height:2.3em;padding:0 .9em;border-radius:1.2em;border:1px solid #dfe1e5;box-shadow:0 .1em .4em rgba(32,33,36,.12);color:#202124;white-space:nowrap;overflow:hidden}
.srch svg{width:1.1em;height:1.1em;color:#9aa0a6;flex:none}
.res{display:flex;flex-direction:column;gap:.1em;width:84%;margin:.7em auto 0;font-size:.78em;line-height:1.35}
.res>*{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:fadein .4s ease-out both}
.res b{font-weight:500;color:#1a0dab}
.res small{font-size:.85em;color:#188038;animation-delay:.08s}
.res span{font-size:.9em;color:#4d5156;animation-delay:.16s}
@keyframes fadein{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}
.pcl{position:absolute;left:.6em;top:.6em;z-index:3;padding:.25em .6em;border-radius:.6em;background:rgba(10,12,30,.72);color:#fff;font-size:.85em;font-weight:600;white-space:nowrap}
.fchip{display:flex;align-items:center;gap:.7em;padding:0 1em;border-radius:.9em;background:#fff;border:1px dashed #c6cada;font-size:.95em;color:#0a0b0d;line-height:1.3}
.fchip small{color:#6b7183}
.fic{width:2.2em;height:2.6em;border-radius:.35em;background:#1e8e50;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.68em;font-weight:700;flex:none}
.ghost{position:absolute;z-index:29;transition:left .6s cubic-bezier(.3,.7,.2,1),top .6s cubic-bezier(.3,.7,.2,1),opacity .2s;opacity:0;transform:rotate(-8deg)}
.ghost.on{opacity:.95}
.xfer{display:flex;align-items:center;gap:1em;padding:0 1.1em;border-radius:.9em;background:#fff;border:1px solid #e1e4ec;font-size:.92em;color:#5a6073;transition:color .3s,border-color .3s}
.xfer svg{width:1.3em;height:1.3em;flex:none;color:var(--accent,#2633ff)}
.xfer .xt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.xfer.on{color:#0a0b0d;border-color:#cdd2ff}
.xfer.ok{border-color:#b7e9a0}
.xfer b{font-family:"Geist",sans-serif;min-width:2.6em;text-align:right}
.bar{position:relative;display:block;height:.45em;border-radius:1em;background:#e6e8f0;overflow:hidden;flex:1;min-width:3em}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:1em;background:var(--accent,#2633ff);transition:width .6s ease}
.xfer.ok .bar i{background:#4cc22b}

.hs{position:absolute;inset:0}
.hs.and{background:linear-gradient(160deg,#0d4f4c,#179488 60%,#6fd0a0)}
.hs.ios{background:linear-gradient(160deg,#1d2b8a,#5b3fd1 60%,#c060d8)}
.pages{position:absolute;inset:0;display:flex;width:200%;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pages.p2{transform:translateX(-50%)}
.page{width:50%;height:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;gap:.9em .7em;padding:3em 1em 1em}
.appw{display:flex;flex-direction:column;align-items:center;gap:.3em;min-width:0}
.appi{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;border-radius:24%;color:#fff;box-shadow:inset 0 .08em 0 rgba(255,255,255,.35),0 .2em .4em rgba(0,0,0,.25)}
.appi svg{width:55%;height:55%}
.appw small{max-width:100%;font-size:.62em;color:#fff;text-shadow:0 .05em .2em rgba(0,0,0,.6);white-space:nowrap;overflow:hidden}
.dock{position:absolute;left:.6em;right:.6em;bottom:1.4em;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7em;padding:.6em;border-radius:1.4em;background:rgba(255,255,255,.24);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pdots{position:absolute;left:0;right:0;bottom:6.8em;z-index:2;display:flex;justify-content:center;gap:.35em}
.pdots i{display:block;width:.38em;height:.38em;border-radius:50%;background:rgba(255,255,255,.45)}
.pdots i.on{background:#fff}
.phone.and{border-radius:1.55em;padding:.12em;background:linear-gradient(150deg,#3b3e45 0%,#15161a 30%,#2b2d33 60%,#0e0f12 100%)}
.phone.and .scr{border-radius:1.45em;border-width:.26em}
.phone.and::after{left:auto;right:-.15em;top:36%;height:9%;border-radius:0 .12em .12em 0;background:linear-gradient(90deg,#2a2c31,#6b6f78);box-shadow:none}
.phone.and .appi{border-radius:50%}
.phone.ios{border-radius:2.25em;background:linear-gradient(150deg,#e3ded6 0%,#8f8a82 22%,#cdc7bd 50%,#7d786f 78%,#c4beb4 100%)}
.phone.ios .scr{border-radius:2.1em}
.phone.ios::before{background:linear-gradient(90deg,#7d786f,#d6d0c6)}
.phone.ios::after{top:22%;background:linear-gradient(270deg,#7d786f,#d6d0c6);box-shadow:0 2.2em 0 #a8a298,0 -2.3em 0 #a8a298}
.aw-clock{grid-column:1 / -1;display:flex;flex-direction:column;gap:.25em;padding:.4em .2em 1.4em;color:#fff;text-shadow:0 .05em .3em rgba(0,0,0,.3)}
.aw-clock b{font-family:"Geist",sans-serif;font-size:3.1em;font-weight:300;letter-spacing:-.04em;line-height:1}
.aw-clock span{font-size:.7em}
.a-dock{position:absolute;left:1em;right:1em;bottom:6.2em;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9em}
.a-dock .appi{border-radius:50%}
.a-search{position:absolute;left:.8em;right:.8em;bottom:3em;z-index:2;height:2.5em;display:flex;align-items:center;gap:.5em;padding:0 .9em;border-radius:1.25em;background:rgba(255,255,255,.94);color:#5f6368;font-size:.9em}
.a-search svg{width:1.15em;height:1.15em;flex:none}
.a-search span{flex:1}
.a-nav{position:absolute;left:0;right:0;bottom:0;z-index:11;height:2.6em;display:flex;align-items:center;justify-content:space-around;padding:0 1.6em;color:rgba(255,255,255,.92);transition:background .3s,color .3s}
.a-nav svg{width:1em;height:1em}
.a-nav.dark{background:#f8f9fe;color:#1f1f1f}
.a-bar{display:flex;align-items:center;gap:.7em;padding:2.3em .8em .8em;color:#1f1f1f}
.a-bar svg{width:1.15em;height:1.15em;flex:none}
.a-bar b{flex:1;font-size:1.05em;font-weight:500}
.a-bar-i{display:flex;gap:.7em}
.bub.a{border-radius:1.2em}
.bub.in.a{background:#e9eef6;color:#1f1f1f;border-bottom-left-radius:.35em}
.bub.out.a{background:#d3e3fd;color:#0b2a5b;border-bottom-right-radius:.35em}
.a-input{display:flex;align-items:center;gap:.5em;margin:0 .6em 3.3em}
.a-input>svg{width:1.3em;height:1.3em;color:#444;flex:none}
.a-field{flex:1;min-width:0;display:flex;align-items:center;height:2.6em;padding:0 .9em;border-radius:1.3em;background:#e9eef6;color:#1f1f1f;white-space:nowrap;overflow:hidden}
.a-send{width:2.4em;height:2.4em;border-radius:50%;background:#0b57d0;color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.a-send svg{width:1.05em;height:1.05em}
.iw{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;padding:.7em .8em;border-radius:1.4em;background:linear-gradient(180deg,#4a95ff,#1c5fd6);color:#fff;box-shadow:0 .2em .4em rgba(0,0,0,.25)}
.iw small{font-size:.72em;font-weight:600}
.iw b{font-family:"Geist",sans-serif;font-size:2.3em;font-weight:300;line-height:1}
.iw span{font-size:.6em;line-height:1.35;opacity:.92}
.i-search{position:absolute;left:50%;bottom:7.2em;z-index:2;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.3em;padding:.35em .85em;border-radius:1em;background:rgba(255,255,255,.26);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:.68em;font-weight:600}
.i-search svg{width:1em;height:1em}
.i-bar{position:relative;display:flex;justify-content:center;padding:2.3em .8em .6em;border-bottom:1px solid #ececec;background:#f9f9f9}
.i-bar>svg{position:absolute;left:.6em;top:3em;width:1.25em;height:1.25em;color:#0a84ff}
.i-who{display:flex;flex-direction:column;align-items:center;gap:.25em}
.i-who i{display:flex;align-items:center;justify-content:center;width:2.4em;height:2.4em;border-radius:50%;background:linear-gradient(180deg,#a5abb8,#858a96);color:#fff;font-style:normal;font-weight:600;font-size:.9em}
.i-who small{font-size:.68em;color:#1c1c1e}
.bub.i{border-radius:1.15em}
.bub.in.i{background:#e9e9eb;color:#000;border-bottom-left-radius:.3em}
.bub.out.i{background:#0a84ff;color:#fff;border-bottom-right-radius:.3em}
.i-input{display:flex;align-items:center;gap:.5em;margin:0 .6em 2em}
.i-plus{width:2.2em;height:2.2em;border-radius:50%;background:#e9e9eb;color:#7c7c80;display:flex;align-items:center;justify-content:center;flex:none}
.i-plus svg{width:1em;height:1em}
.i-field{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;height:2.3em;padding:0 .3em 0 .9em;border-radius:1.15em;border:1px solid #d1d1d6;color:#000;white-space:nowrap;overflow:hidden}
.i-up{width:1.7em;height:1.7em;border-radius:50%;background:#0a84ff;color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.i-up svg{width:1em;height:1em}
.hbar.lt{background:rgba(255,255,255,.88)}
.appv{position:absolute;inset:0;z-index:5;background:#fff;display:flex;flex-direction:column;transform:scale(.15);opacity:0;transform-origin:38% 12%;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.appv.open{transform:scale(1);opacity:1}
.appv-h{display:flex;align-items:center;gap:.5em;padding:2.4em .9em .7em;border-bottom:1px solid #eceef4;font-weight:600;color:#0a0b0d}
.appv-h svg{width:1em;height:1em;color:var(--accent,#2633ff)}
.thread{flex:1;display:flex;flex-direction:column;gap:.5em;padding:.9em}
.bub{max-width:80%;padding:.55em .8em;border-radius:1em;font-size:.95em;line-height:1.35}
.bub.in{background:#eef0f5;color:#0a0b0d;align-self:flex-start;border-bottom-left-radius:.3em}
.bub.out{background:var(--accent,#2633ff);color:#fff;align-self:flex-end;border-bottom-right-radius:.3em;animation:pop .35s ease-out both}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.fing{position:absolute;z-index:8;width:2.4em;height:2.4em;margin:-1.2em 0 0 -1.2em;border-radius:50%;background:rgba(255,255,255,.55);border:2px solid #fff;box-shadow:0 0 0 .3em rgba(192,132,252,.5);transition:left .55s cubic-bezier(.3,.7,.2,1),top .55s cubic-bezier(.3,.7,.2,1),opacity .3s;opacity:0}
.fing.on{opacity:1}
.dlab{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:.5em;padding:.4em .85em;border-radius:1em;background:#151b47;border:1px solid #2a3270;color:#e9ecff;font-size:.95em;font-weight:600;white-space:nowrap;transform:translateX(-50%)}
.dlab i{display:block;width:.55em;height:.55em;border-radius:50%;background:#c084fc}
.dlab.sync{background:#c084fc;border-color:#c084fc;color:#14092b}
.dlab.sync i{background:#14092b}
.link{position:absolute;height:2px;background-image:linear-gradient(90deg,#c084fc 50%,transparent 50%);background-size:12px 2px;animation:dash .8s linear infinite}
@keyframes dash{to{background-position:12px 0}}
.chips2{position:absolute;left:50%;top:84%;z-index:12;display:flex;gap:.8em;transform:translateX(-50%)}
.chipd{display:inline-flex;align-items:center;gap:.6em;padding:.65em 1em;border-radius:1em;background:#fff;color:#0a0b0d;font-size:.95em;font-weight:600;box-shadow:0 1em 2em -1em rgba(0,0,0,.6);white-space:nowrap;transition:opacity .4s,transform .4s;opacity:0;transform:translateY(.6em)}
.chipd.on{opacity:1;transform:none}
.chipd svg{width:1.2em;height:1.2em;color:var(--accent,#2633ff)}
.chipd .bar{width:4em;flex:none}
.eq{display:flex;align-items:flex-end;gap:.15em;height:1.1em}
.eq i{display:block;width:.22em;height:30%;border-radius:.2em;background:var(--accent,#2633ff);animation:eq .9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.15s}
.eq i:nth-child(3){animation-delay:.3s}
.eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}

.pnl{position:absolute;background:#fff;border:1px solid #e3e6ee;border-radius:1.1em;box-shadow:0 1.4em 3em -1.6em rgba(15,22,90,.3)}
.ptitle{position:absolute;font-size:1.1em;font-weight:700;color:#0a0b0d}
.lbl{position:absolute;font-size:.9em;color:#6b7183;font-weight:500}
.selb{position:absolute;display:flex;align-items:center;justify-content:space-between;padding:0 .9em;border-radius:.6em;border:1px solid #d9dce7;font-size:.95em;color:#8a90a2;background:#fff;transition:border-color .2s .4s,color .2s .4s}
.selb svg{width:1em;height:1em}
.selb.on{border-color:var(--accent,#2633ff);color:#0a0b0d;font-weight:600}
.chp{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:.6em;border:1px solid #d9dce7;font-size:.95em;font-weight:600;color:#4b5164;background:#fff;transition:background .2s .4s,border-color .2s .4s,color .2s .4s}
.chp.on{background:var(--accent,#2633ff);border-color:var(--accent,#2633ff);color:#fff}
.drow{position:absolute;display:flex;align-items:center;gap:.7em;padding:0 .8em;border-radius:.6em;border:1px solid #eceef4;font-size:.9em;background:#fff;transition:background .2s .4s,border-color .2s .4s}
.drow.on{background:#f1f3ff;border-color:#cdd2ff}
.bx{width:1.4em;height:1.4em;border-radius:.4em;border:1.5px solid #c9cdda;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;transition:background .2s .4s,border-color .2s .4s}
.bx svg{width:1em;height:1em}
.drow.on .bx{background:var(--accent,#2633ff);border-color:var(--accent,#2633ff)}
.drow b{font-weight:600;color:#0a0b0d}
.drow span{color:#6b7183;white-space:nowrap}
.drow em{margin-left:auto;font-style:normal;font-size:.85em;padding:.15em .55em;border-radius:.5em;background:#f2f3f7;color:#4b5164;white-space:nowrap}
.est{position:absolute;display:flex;flex-direction:column;gap:.2em;font-size:.85em;color:#6b7183}
.est b{font-size:1.08em;color:#0a0b0d;white-space:nowrap}
.gob{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:.7em;background:var(--accent,#2633ff);color:#fff;font-weight:700;transition:transform .15s .45s,background .3s}
.gob.press{transform:scale(.92)}
.gob.off{background:#c9cdda}
.cw{position:absolute;background:#fff;border-radius:1em;border:1px solid #e3e6ee;overflow:hidden;box-shadow:0 1.6em 3.2em -1.4em rgba(15,22,90,.35)}
.cw-bar{display:flex;align-items:center;gap:.4em;height:2.4em;padding:0 .8em;background:#f4f5f9;border-bottom:1px solid #eceef4;font-size:.85em;color:#5a6073;white-space:nowrap}
.cw-bar i{display:block;width:.6em;height:.6em;border-radius:50%;background:#d7dae4;flex:none}
.cw-bar span{margin-left:.4em}
.cw-h{display:flex;align-items:center;justify-content:space-between;padding:.9em 1em .5em;font-weight:700}
.cw-h span{font-size:.85em;color:#6b7183;font-weight:500}
.cw-list{display:flex;flex-direction:column;gap:.5em;padding:.3em .8em}
.mrow{display:flex;align-items:center;gap:.6em;padding:.65em .7em;border-radius:.7em;border:1px solid #eceef4;font-size:.88em;animation:slidein .45s cubic-bezier(.2,.8,.2,1) both;transition:background .3s,opacity .4s,border-color .3s;white-space:nowrap}
.mrow i{display:block;width:.6em;height:.6em;border-radius:50%;background:#3fb950;flex:none}
.mrow.live{background:#f1f3ff;border-color:#cdd2ff}
.mrow.off{opacity:.5}
.mrow.off i{background:#b9bdca}
@keyframes slidein{from{opacity:0;transform:translateX(1.2em)}to{opacity:1;transform:none}}
.dd{margin-left:auto;padding:.15em .55em;border-radius:.5em;font-size:.88em;font-weight:700;background:#eef0ff;color:#1f2bd6}
.dd.warn{background:#fff0dc;color:#8a4a00}
.dd.end{background:#eceef3;color:#5d6375}
.empty{padding:2.2em 1em;text-align:center;color:#8a90a2;font-size:.9em}
.alertc{position:absolute;z-index:20;padding:1em 1.1em;border-radius:1em;background:#fff;border:1px solid #ffd7a8;box-shadow:0 1.6em 3.2em -1em rgba(120,60,0,.35);animation:toastin .4s both}
.alertc .ah{display:flex;align-items:center;gap:.5em;font-weight:700;color:#8a4a00}
.alertc .ah svg{width:1.2em;height:1.2em}
.alertc p{margin-top:.4em;font-size:.88em;color:#4b5164;line-height:1.5}
.timec{position:absolute;z-index:20;display:inline-flex;align-items:center;gap:.4em;padding:.4em .9em;border-radius:1em;background:#0a0b0d;color:#fff;font-size:.9em;font-weight:600;animation:toastin .4s both;white-space:nowrap}
.timec svg{width:1em;height:1em;color:#c084fc}

.rt{position:absolute;background:#0f1540;border:1px solid #232b62;border-radius:1.1em}
.rtt{position:absolute;color:#fff;font-weight:700;font-size:1.05em}
.rtt small{display:block;margin-top:.2em;font-size:.8em;font-weight:500;color:#9aa2d6}
.vline{position:absolute;width:2px;background:#2a3270}
.blk{position:absolute;z-index:2;display:flex;align-items:center;gap:.8em;padding:0 1em;border-radius:.8em;background:#161d52;border:1px solid #273070;color:#dfe3ff;font-size:.92em;transition:background .3s,border-color .3s,box-shadow .3s}
.blk .bi{width:2em;height:2em;border-radius:.55em;display:flex;align-items:center;justify-content:center;background:#232b6a;color:#aab3ff;flex:none}
.blk .bi svg{width:1.1em;height:1.1em}
.blk b{font-weight:600;color:#fff;white-space:nowrap}
.blk span{color:#9aa2d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk .st{margin-left:auto;width:1.4em;height:1.4em;border-radius:50%;border:1.5px solid #39418a;display:flex;align-items:center;justify-content:center;color:#14092b;flex:none}
.blk .st svg{width:.9em;height:.9em}
.blk.act{border-color:#c084fc;box-shadow:0 0 0 .2em rgba(192,132,252,.18);background:#1a2360}
.blk.act .st{border-color:#c084fc;border-top-color:transparent;animation:spin .8s linear infinite}
.blk.done .st{background:#c084fc;border-color:#c084fc}
@keyframes spin{to{transform:rotate(360deg)}}
.runb{position:absolute;display:flex;align-items:center;justify-content:center;gap:.35em;border-radius:.7em;background:#c084fc;color:#14092b;font-weight:700;font-size:.95em;white-space:nowrap;transition:transform .15s .45s,background .3s,color .3s}
.runb svg{width:1em;height:1em}
.runb.press{transform:scale(.9)}
.runb.busy{background:#2a3370;color:#cfd5ff}
.gh{position:absolute;display:flex;align-items:center;gap:1em;font-size:.95em;color:#c9cef0;white-space:nowrap}
.gh b{color:#fff}
.gh .bar{background:#1a2055}
.gh .bar i{background:#c084fc}
.tgrid{position:absolute;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:.9em .8em}
.tl{position:relative;display:flex;flex-direction:column;gap:.35em;min-height:0}
.tl .phone{position:relative;flex:1;min-height:0;font-size:.42em;transition:box-shadow .3s}
.tl.run .phone{box-shadow:0 0 0 2px #4b57ff,0 0 1.4em rgba(75,87,255,.65)}
.tl.ok .phone{box-shadow:0 0 0 2px #c084fc}
.tst{display:flex;align-items:center;justify-content:space-between;gap:.3em;font-size:.76em;color:#9aa2d6;white-space:nowrap}
.tst em{font-style:normal;padding:.1em .45em;border-radius:.45em;background:#1a2055;color:#9aa2d6}
.tl.run .tst em{background:#3340ff;color:#fff}
.tl.ok .tst em{background:#c084fc;color:#14092b}
.okb{position:absolute;right:-.4em;top:-.4em;z-index:4;width:1.6em;height:1.6em;border-radius:50%;background:#c084fc;color:#14092b;display:flex;align-items:center;justify-content:center;animation:pop .35s both}
.okb svg{width:1em;height:1em}
.scan{position:absolute;left:0;right:0;top:0;height:30%;z-index:3;background:linear-gradient(180deg,transparent,rgba(75,87,255,.38),transparent);animation:scan 1.2s linear infinite}
@keyframes scan{from{transform:translateY(-100%)}to{transform:translateY(340%)}}

.hfield{position:absolute;top:0;bottom:0;left:44%;right:0;z-index:1;overflow:hidden;perspective:2200px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 32%),linear-gradient(180deg,#000 70%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 32%),linear-gradient(180deg,#000 70%,transparent);mask-composite:intersect}
.plane{position:absolute;left:50%;top:50%;width:800px;height:1054px;display:grid;grid-template-columns:repeat(7,92px);grid-template-rows:repeat(5,190px);gap:26px;transform:translate(-50%,-50%) rotateX(52deg) rotateZ(-34deg)}
.fp{position:relative;font-size:7px;border-radius:17px;padding:1.5px;background:linear-gradient(150deg,#6a6e78 0%,#202227 20%,#45484f 48%,#16171a 76%,#575a62 100%);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3),0 26px 30px -18px rgba(15,22,90,.45);transition:box-shadow .25s .4s,opacity .4s}
.fp-scr{position:relative;width:100%;height:100%;border-radius:15.5px;overflow:hidden;background:#fff;border:3px solid #050507}
.fp-scr::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 40%)}
.fp.sel{box-shadow:0 0 0 3px #fff,0 0 0 7px var(--accent,#2633ff),0 26px 30px -18px rgba(15,22,90,.35)}
.fp.dim{opacity:.4}
.fp.fire{animation:fire 1s ease-out .15s}
@keyframes fire{0%{box-shadow:0 0 0 3px #fff,0 0 0 7px var(--accent,#2633ff),0 0 0 0 rgba(38,51,255,.55)}100%{box-shadow:0 0 0 3px #fff,0 0 0 7px var(--accent,#2633ff),0 0 0 46px rgba(38,51,255,0)}}
.fchk{position:absolute;left:-11px;top:-11px;z-index:3;width:28px;height:28px;border-radius:8px;background:var(--accent,#2633ff);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px #fff;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1) .35s}
.fchk svg{width:18px;height:18px}
.fp.sel .fchk{transform:scale(1)}
.ftag{position:absolute;left:50%;bottom:-13px;z-index:3;transform:translateX(-50%);padding:3px 10px;border-radius:999px;background:var(--accent,#2633ff);color:#fff;font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 0 0 3px #fff}
.heart{position:absolute;left:50%;top:42%;z-index:4;width:40px;height:40px;margin:-20px 0 0 -20px;color:#ff3d6e;animation:heart .7s cubic-bezier(.3,1.6,.5,1) .2s both}
.heart svg{display:block;width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 4px 6px rgba(255,61,110,.4))}
@keyframes heart{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
.hcur{z-index:5;font-size:15px}
.biz{background:#0a0f33}
.h2s{font-size:clamp(26px,2.9vw,38px);line-height:1.34;letter-spacing:-.03em;font-weight:500;color:#8f97c9;max-width:30em}
.h2s b{color:#fff;font-weight:600}
.bizmap{position:relative;width:100%;aspect-ratio:1120/520;container-type:inline-size;margin-top:56px;border-radius:20px;border:1px solid #1c2456;background-color:#0b1138;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:18px 18px}
.bm{position:absolute;inset:0;font-size:1.3cqw}
.bl{position:absolute;display:block;pointer-events:none;transition:top .8s cubic-bezier(.4,0,.2,1),height .8s cubic-bezier(.4,0,.2,1)}
.bl.h{height:2px;margin-top:-1px;background-image:linear-gradient(90deg,#39437f 50%,transparent 50%);background-size:8px 2px;animation:flowx 1.1s linear infinite}
.bl.v{width:2px;margin-left:-1px;background-image:linear-gradient(180deg,#39437f 50%,transparent 50%);background-size:2px 8px;animation:flowy 1.1s linear infinite}
.bl.v.up{animation-name:flowyup}
.bl::before{content:"";position:absolute;inset:0;opacity:0;background-size:inherit;background-position:inherit;transition:opacity .8s ease}
.bl.h::before{background-image:linear-gradient(90deg,#c084fc 50%,transparent 50%)}
.bl.v::before{background-image:linear-gradient(180deg,#c084fc 50%,transparent 50%)}
.bl.on::before{opacity:1}
.bl.on::after{content:"";position:absolute;border-radius:3px;box-shadow:0 0 10px 2px rgba(192,132,252,.7);animation:1.8s linear infinite both}
.bl.h.on::after{top:-1px;height:4px;width:22%;left:-22%;background:linear-gradient(90deg,rgba(255,255,255,0),#e9d5ff 70%,#fff);animation-name:pulsex}
.bl.v.on::after{left:-1px;width:4px;height:22%;top:-22%;background:linear-gradient(180deg,rgba(255,255,255,0),#e9d5ff 70%,#fff);animation-name:pulsey}
.bl.v.on.up::after{background:linear-gradient(0deg,rgba(255,255,255,0),#e9d5ff 70%,#fff);animation-name:pulseyup}
.bl.d1::after{animation-delay:.3s}
.bl.d2::after{animation-delay:.55s}
.bl.d3::after{animation-delay:.8s}
.bl.d4::after{animation-delay:1.05s}
.bl.d5::after{animation-delay:1.35s}
@keyframes flowx{to{background-position:8px 0}}
@keyframes flowy{to{background-position:0 8px}}
@keyframes flowyup{to{background-position:0 -8px}}
@keyframes pulsex{0%{left:-22%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes pulsey{0%{top:-22%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
@keyframes pulseyup{0%{top:100%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:-22%;opacity:0}}
.bm-dev{position:absolute;display:flex;align-items:center;gap:.7em;padding:0 .9em;border-radius:.8em;background:#121a4d;border:1px solid #273072;color:#9aa2d6;transition:background .3s,border-color .3s,color .3s}
.bm-dev svg{width:1.5em;height:1.5em;flex:none}
.bm-dev b{display:block;font-size:.95em;font-weight:600;white-space:nowrap}
.bm-dev small{display:block;margin-top:.15em;font-size:.75em;opacity:.85;white-space:nowrap}
.bm-dev.on{background:#1b2468;border-color:#c084fc;color:#fff}
.bm-core{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em;border-radius:1.1em;background:var(--accent,#2633ff);color:#fff;text-align:center;animation:corepulse 2.4s ease-in-out infinite}
.bm-core svg{width:2.6em;height:2.6em}
.bm-core b{font-family:"Geist",sans-serif;font-size:1.3em;letter-spacing:-.03em}
.bm-core span{font-size:.72em;color:#e3e6ff;padding:0 .6em;line-height:1.35}
@keyframes corepulse{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.2),0 0 0 0 rgba(38,51,255,.5)}50%{box-shadow:0 0 0 1px rgba(255,255,255,.2),0 0 0 1.4em rgba(38,51,255,0)}}
.bm-biz{position:absolute;display:flex;align-items:center;gap:.8em;padding:0 1em;border-radius:.8em;background:#121a4d;border:1px solid #273072;color:#dfe3ff;font:inherit;text-align:left;cursor:pointer;transition:background .3s,border-color .3s}
.bm-biz:hover{border-color:#5a66c8}
.bm-biz .bi2{width:2em;height:2em;border-radius:.55em;display:flex;align-items:center;justify-content:center;background:#1e276a;color:#aab3ff;flex:none}
.bm-biz .bi2 svg{width:1.15em;height:1.15em}
.bm-biz b{font-weight:600;white-space:nowrap}
.bm-biz em{margin-left:auto;font-style:normal;font-size:.78em;padding:.25em .6em;border-radius:.5em;background:#1a2160;color:#aab1dd;white-space:nowrap}
.bm-biz.on{background:var(--accent,#2633ff);border-color:var(--accent,#2633ff);color:#fff}
.bm-biz.on .bi2{background:rgba(255,255,255,.2);color:#fff}
.bm-biz.on em{background:#c084fc;color:#14092b}
.biztabs{display:none;flex-wrap:wrap;gap:8px;margin-top:32px}
.btab{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #2c3466;background:transparent;color:#dfe3ff;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.btab.on{background:var(--accent,#2633ff);border-color:var(--accent,#2633ff);color:#fff}
.bizcard{margin-top:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 36px;padding:32px;border-radius:20px;background:#0f1540;border:1px solid #232b62;animation:fadein .45s ease-out both}
.bc-h{display:flex;align-items:center;gap:12px}
.bc-h .ico{width:44px;height:44px;border-radius:12px;background:var(--accent,#2633ff);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.bc-h svg{width:22px;height:22px}
.bc-h h3{font-size:22px;font-weight:700;color:#fff;letter-spacing:-.02em}
.bizcard .who{margin-top:16px;font-size:14px;font-weight:600;color:#e3ccff}
.bizcard p{font-size:15.5px;line-height:1.7;color:#c4c9ef}
.bizcard .who+p{margin-top:6px}
.bizcard h4{margin:0 0 14px;font-size:14px;font-weight:600;color:#8f97c9}
.money{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.money h4{margin:0}
.tagp{padding:6px 12px;border-radius:999px;background:#c084fc;color:#14092b;font-size:13px;font-weight:700}
.bm-dev,.bm-biz,.bm-biz .bi2,.bm-biz em,.btab{transition:background-color .8s cubic-bezier(.4,0,.2,1),border-color .8s cubic-bezier(.4,0,.2,1),color .8s cubic-bezier(.4,0,.2,1),box-shadow .8s cubic-bezier(.4,0,.2,1)}
.bm-dev.on{box-shadow:0 0 0 .25em rgba(192,132,252,.12),0 0 1.6em rgba(192,132,252,.28)}
.bm-biz.on{box-shadow:0 0 0 .25em rgba(38,51,255,.2),0 .8em 2em -.6em rgba(38,51,255,.85)}
.bizcard{animation:bizin .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes bizin{from{opacity:0;transform:translateY(10px);filter:brightness(.55)}to{opacity:1;transform:none;filter:none}}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.stp{display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:20px;background:#fff;border:1px solid #e4e6ee}
.stp h3{font-size:20px;letter-spacing:-.02em;font-weight:700}
.stp p{font-size:15px;line-height:1.65;color:#4b5164}
.hv{position:relative;height:168px;border-radius:14px;background:#f2f4f9;display:flex;align-items:center;justify-content:center;gap:14px;padding:16px;overflow:hidden}
.hv-ph{width:38px;height:74px;border-radius:10px;padding:1.5px;flex:none;background:linear-gradient(150deg,#6a6e78,#202227 25%,#45484f 55%,#16171a);box-shadow:0 10px 16px -8px rgba(8,10,30,.5)}
.hv-ph i{display:block;width:100%;height:100%;border-radius:8.5px;border:2.5px solid #050507;background:linear-gradient(160deg,#1d2b8a,#5b3fd1 60%,#c060d8)}
.hv-cable{flex:0 1 70px;height:3px;background-image:linear-gradient(90deg,var(--accent,#2633ff) 50%,transparent 50%);background-size:10px 3px;animation:dash .6s linear infinite}
.hv-mon{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none}
.hv-mon i{display:block;width:96px;height:62px;border-radius:6px;border:3px solid #0b0c0f;background:radial-gradient(ellipse at 28% 105%,#9cc2ff 0%,rgba(156,194,255,0) 55%),linear-gradient(160deg,#0d1a4a,#1c3a9e 55%,#4f7fe8);box-shadow:0 10px 16px -8px rgba(8,10,30,.5)}
.hv-mon s{display:block;width:34px;height:6px;border-radius:3px;background:#0c0e16;text-decoration:none}
.hv-app{width:100%;max-width:240px;border-radius:12px;background:#fff;border:1px solid #e3e6ee;box-shadow:0 18px 30px -18px rgba(15,22,90,.35);overflow:hidden}
.hv-app-h{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid #eceef4;font-size:13px;font-weight:700}
.hv-app-h svg{width:18px;height:18px}
.hv-app-r{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:12.5px;color:#30364a}
.hv-app-r i{display:block;width:7px;height:7px;border-radius:50%;background:#3fb950;animation:pxb 2s ease-in-out infinite}
.hv-app-r em{margin-left:auto;font-style:normal;color:#2a8a10;font-weight:600;font-size:12px}
.hv-br{width:100%;max-width:250px;border-radius:12px;background:#fff;border:1px solid #e3e6ee;box-shadow:0 18px 30px -18px rgba(15,22,90,.35);overflow:hidden}
.hv-br-t{display:flex;align-items:center;gap:5px;padding:8px 10px;background:#f4f5f9;border-bottom:1px solid #eceef4;font-size:12px;color:#4b5164}
.hv-br-t i{display:block;width:7px;height:7px;border-radius:50%;background:#d7dae4}
.hv-br-t span{margin-left:6px;flex:1;padding:3px 8px;border-radius:6px;background:#fff}
.hv-br-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px}
.hv-br-g i{display:block;aspect-ratio:9/16;border-radius:5px;background:#0c0e16;border:2px solid #0c0e16;animation:pxb 3s ease-in-out infinite}

.spec{display:flex;flex-direction:column;border-top:1px solid #e4e6ee;margin-top:32px}
.spec>div{display:flex;flex-wrap:wrap;gap:6px 24px;padding:18px 0;border-bottom:1px solid #e4e6ee}
.spec dt{flex:0 0 120px;font-weight:700;font-size:15px}
.spec dd{flex:1 1 260px;font-size:15px;line-height:1.65;color:#3a4052}
.prices{display:flex;flex-direction:column;gap:16px}
.price{display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:20px;border:1px solid #e4e6ee;background:#fff}
.price.hi{background:#0a0b0d;color:#fff;border-color:#0a0b0d}
.price h3{font-size:17px;font-weight:700}
.price .amt{font-size:46px;font-weight:700;letter-spacing:-.04em;line-height:1}
.price .amt small{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-left:6px;color:#6b7183}
.price.hi .amt small{color:#a9aec4}
.price p{font-size:15px;line-height:1.6;color:#4b5164}
.price.hi p{color:#c4c8d8}
.price .ticks li{font-size:15px}
.price.hi .ticks li{color:#e5e7f2}
.price.hi .ticks svg{color:#c084fc}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.plans .price .btn{margin-top:auto}
.prow{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;border-top:1px solid #e4e6ee}
.prow li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid #e4e6ee;font-size:14.5px;line-height:1.4}
.prow li span{color:#4b5164}
.prow li b{font-weight:700;color:#0a0b0d;text-align:right;white-space:nowrap}
.price.hi .prow,.price.hi .prow li{border-color:#2b2e38}
.price.hi .prow li span{color:#a9aec4}
.price.hi .prow li b{color:#fff}
.pfoot{flex-direction:row;flex-wrap:wrap;gap:10px 32px;margin-top:28px}
.pfoot li{font-size:15px}
.pnote{margin-top:14px;font-size:14px;line-height:1.7;color:#6b7183;max-width:62em}
#price .acc{color:#c084fc}
#price .price{color:#0a0b0d}
#price .wrap > .pnote{color:#aab0d6}
#price .spec,#price .spec>div{border-color:#232a5e}
#price .spec dd{color:#b4b9da}
/* 플랜 카드 — 콘솔 마이페이지 요금제 카드와 같은 모양: 어두운 카드, PLUS 파랑·PRO 보라 그라데이션, 둥근 버튼은 요금 바로 아래(마크업 순서는 그대로, order로만 이동) */
.plans{align-items:stretch}
#price .plans .price{position:relative;gap:14px;padding:28px;border:1px solid #272d57;border-radius:20px;background:rgba(255,255,255,.03);color:#e8eaed}
#price .plans .price.plan-plus{border-color:rgba(74,144,217,.5);background:linear-gradient(160deg,rgba(74,144,217,.24) 0%,rgba(74,144,217,.07) 55%,rgba(74,144,217,.02) 100%)}
#price .plans .price.plan-pro{border-color:rgba(155,89,182,.6);background:linear-gradient(160deg,rgba(155,89,182,.3) 0%,rgba(155,89,182,.09) 55%,rgba(155,89,182,.02) 100%)}
.plans .price>*{order:2}
.plans .price>h3,.plans .price>.pfor,.plans .price>.amt{order:0}
.plans .price>.btn{order:1;width:100%;margin-top:2px}
.plans .price h3{font-size:20px;font-weight:800;letter-spacing:.03em;color:#f1f3f8}
.plans .plan-plus h3{color:#5ea2e6}
.plans .plan-pro h3{color:#b784d6}
.plans .price .pfor{margin-top:-8px;font-size:14px;line-height:1.5;color:#a3a9c6}
.plans .price .amt{color:#fff}
.plans .price .amt small{font-weight:500;color:#a3a9c6}
.pbadge{position:absolute;top:28px;right:28px;padding:2px 12px;border-radius:999px;border:1px solid rgba(74,144,217,.4);background:rgba(74,144,217,.16);color:#7db4ec;font-size:12.5px;font-weight:700;line-height:1.6}
.plans .btn{min-height:46px;font-weight:700}
.plans .btn-sec{background:rgba(255,255,255,.07);color:#e8eaed;border:1px solid rgba(255,255,255,.16)}
.plans .btn-sec:hover{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.plans .btn-plus{background:#3577c2;color:#fff;border:1px solid transparent}
.plans .btn-plus:hover{color:#fff;background:#3f84cf}
.plans .plan-pro .btn-sec{background:#9b59b6;color:#fff;border-color:transparent}
.plans .plan-pro .btn-sec:hover{color:#fff;background:#a866c3}
.plans .prow{border-top-color:rgba(255,255,255,.09)}
.plans .prow li{border-bottom-color:rgba(255,255,255,.09)}
.plans .prow li span{color:#a9b0cc}
.plans .prow li b{color:#f1f3f8}
.plans .plan-plus .prate b{color:#7db4ec}
.plans .plan-pro .prate b{color:#c99ae4}
.plans .price .pcap{margin-top:6px;font-size:13px;font-weight:700;color:#a3a9c6}
.ticks.pfeat{gap:9px}
#price .plans .pfeat li{font-size:14.5px;color:#dfe3f0}
#price .plans .pfeat svg{width:18px;height:18px;color:#5cb85c}
#price .plans .pfeat li.off{color:#8a90ad}
#price .plans .pfeat li.off svg{color:#5d6383}
.pfeat .pup{margin-left:auto;padding:1px 8px;border-radius:999px;background:rgba(74,144,217,.16);color:#7db4ec;font-size:12px;font-style:normal;font-weight:700;line-height:1.6;white-space:nowrap}
@media (max-width:900px){.plans{grid-template-columns:repeat(1,minmax(0,1fr))}}

.faq{display:flex;flex-direction:column;border-top:1px solid #dfe2ea}
.faq details{border-bottom:1px solid #dfe2ea}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:18px 0;font-size:17px;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;flex:none;color:var(--accent,#2633ff);transition:transform .2s}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq p{padding:0 0 22px;font-size:15.5px;line-height:1.7;color:#464c5e;max-width:46em}

.cta{position:relative;overflow:hidden;background:#08145e;color:#fff;padding:120px 0 170px}
.cta .h2{color:#fff}
.cta .lead{color:#c4c9ef}
.bars{position:absolute;left:0;right:0;bottom:0;height:150px;display:flex;align-items:flex-end;gap:6px;padding:0 6px;pointer-events:none}
.bars i{flex:1;display:block;border-radius:4px 4px 0 0;background:var(--accent,#2633ff);transform-origin:bottom;animation:eqb 3.4s ease-in-out infinite}
@keyframes eqb{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

.foot{padding:56px 0 40px}
.foot-row{display:flex;flex-wrap:wrap;gap:32px 64px;justify-content:space-between}
.foot p{margin-top:12px;font-size:14px;line-height:1.7;color:#5d6375}
.foot h3{font-size:13px;font-weight:600;color:#6b7183}
.foot nav{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:6px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;color:#262b3a;font-size:14px}
.foot nav a:hover{color:var(--accent,#2633ff)}
.contacts{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:12px}
.ctc{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 22px 6px 6px;border-radius:999px;border:1px solid #e1e3ea;background:#fff;color:#0a0b0d;font-size:15px;font-weight:700;transition:border-color .2s,box-shadow .2s,transform .2s}
.ctc:hover{color:#0a0b0d;border-color:#b9bdca;box-shadow:0 10px 22px -14px rgba(15,22,90,.4);transform:translateY(-1px)}
.cti{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.cti svg{width:24px;height:24px}
.cti.tg{background:#2aabee}
.cti.kk{background:#fee500}
.foot-legal{margin-top:32px;padding-top:20px;border-top:1px solid #eceef3;display:flex;flex-direction:column;gap:12px}
.foot .foot-terms{gap:0 20px;margin-top:0}
.foot .foot-terms a{font-size:13px;color:#4b5164}
.foot .foot-terms a.pp{font-weight:700;color:#0a0b0d}
.foot .foot-biz p{margin:0;display:flex;flex-wrap:wrap;font-size:12.5px;line-height:1.8;color:#6b7183}
.foot-biz span:not(:last-child)::after{content:"·";margin:0 .7em;color:#b6bac6}
.foot-biz a{color:#4b5164;text-decoration:underline;text-underline-offset:2px}
.foot-biz a:hover{color:var(--accent,#2633ff)}
.foot-copy{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-top:4px;font-size:12.5px;color:#6b7183}

.blend{background:linear-gradient(180deg,var(--t) 0,var(--bg) var(--fa,120px),var(--bg) calc(100% - var(--fb,120px)),var(--b) 100%)}
#multi{--bg:#fff;--t:#fff;--b:#838593}
#iphone{--bg:#060a26;--t:#838593;--b:#7e8090}
#pc{--bg:#f6f7fa;--t:#7e8090;--b:#fff}
#rental{--bg:#fff;--t:#fff;--b:#838593}
#sns{--bg:#060a26;--t:#838593;--b:#0a0f33}
#biz{--bg:#0a0f33;--t:#0a0f33;--b:#808396}
#start{--bg:#f6f7fa;--t:#808396;--b:#7f8396}
#price{--bg:#060a26;--t:#7f8396;--b:#7e8090}
#faq{--bg:#f6f7fa;--t:#7e8090;--b:#7f86ac}
#contact{--bg:#08145e;--t:#7f86ac;--b:#fff;--fb:150px}
@media (max-width:640px){.blend{--fa:72px}#multi,#iphone,#pc,#rental,#sns,#biz,#start,#price,#faq{--fb:72px}}
@media (max-width:1200px){.hfield{left:50%}}
@media (max-width:900px){.hero{display:block;min-height:0;padding:56px 0 440px}.hfield{left:0;top:auto;height:440px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 72%,transparent);-webkit-mask-composite:source-over;mask-image:linear-gradient(180deg,transparent,#000 18%,#000 72%,transparent);mask-composite:add}}
@media (max-width:860px){.steps{grid-template-columns:repeat(1,minmax(0,1fr))}.bizcard{grid-template-columns:repeat(1,minmax(0,1fr));padding:24px}}
@media (max-width:760px){.bizmap{display:none}.biztabs{display:flex}}
@media (max-width:760px){.links{order:3;flex:1 1 100%;overflow-x:auto;padding-bottom:6px}.nav-row{padding-top:8px}}
@media (max-width:640px){.wrap{padding:0 16px}.sec{padding:84px 0}.hero{padding:56px 0 64px}.cta{padding:84px 0 150px}.lang{display:none}}
@media (prefers-reduced-motion:reduce){.pg *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}}