*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:#0a1220;color:#e6edf6;line-height:1.5}
a{color:#00e5ff}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}

.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid #16243a}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:22px;color:#e6edf6;text-decoration:none}
.brand img{width:38px;height:38px;border-radius:9px}.brand b{color:#00e5ff}
.links{display:flex;gap:18px;align-items:center;font-size:14px}.links a{color:#b8c7d9;text-decoration:none}

.lang a{color:#8aa0b8;text-decoration:none;padding:0 3px}.lang a.on{color:#00e5ff;font-weight:700}
.hero{display:flex;gap:40px;padding:56px 0;align-items:center}
.hero h1{font-size:44px;line-height:1.15;margin-bottom:16px}
.hero p{font-size:18px;color:#b8c7d9;margin-bottom:24px}
.btn{display:inline-block;background:#00c8e6;color:#03121c;font-weight:700;padding:15px 28px;border-radius:12px;font-size:18px;text-decoration:none;box-shadow:0 0 24px #00e5ff55}
.btn2{display:inline-block;border:1px solid #00e5ff;color:#00e5ff;padding:11px 20px;border-radius:10px;text-decoration:none;font-weight:600}
.sub{font-size:13px;color:#6f86a0;margin-top:10px}
.card{width:340px;flex:none;background:#17212b;border-radius:14px;padding:14px 16px;font-size:14px;box-shadow:0 10px 40px #000a}
.card .vin{color:#5fb8ff;font-family:monospace}.card .h{font-weight:700;font-size:16px}.card .tag{font-size:11px;color:#8aa0b8;letter-spacing:.05em}
.card ul{list-style:none;margin:8px 0}.card li:before{content:"▪ ";color:#8aa0b8}
.kb{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:10px}.kb div{background:#22303e;border-radius:8px;padding:7px;text-align:center;font-size:13px}
section{padding:40px 0;border-top:1px solid #121e31}
h2{font-size:28px;margin-bottom:8px}.lead{color:#a9b9cc;margin-bottom:22px;max-width:780px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.f{background:#0f1a2b;border:1px solid #1a2a42;border-radius:12px;padding:18px}
.f .i{font-size:26px}.f h3{font-size:17px;margin:8px 0 6px}.f p,.f li{font-size:14px;color:#a9b9cc}
.f ul{padding-left:18px}
.steps{display:flex;gap:18px;flex-wrap:wrap}
.s{flex:1;min-width:220px;display:flex;gap:12px;align-items:center;color:#c8d5e4}
.s b{flex:none;width:34px;height:34px;border-radius:50%;background:#00e5ff22;border:1px solid #00e5ff;color:#00e5ff;display:flex;align-items:center;justify-content:center}
.note{padding:14px 18px;border-left:3px solid #ffb020;background:#1b1a12;font-size:14px;color:#d8cfb0;margin-top:20px}
.foot{border-top:1px solid #16243a;padding:22px 0 40px;font-size:13px;color:#7d93ab}
.foot .row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.legal h2{margin-top:34px}.legal h3{margin:18px 0 6px;font-size:18px}.legal p,.legal li{color:#c3d0de;font-size:15px;margin-bottom:8px}.legal ul{padding-left:22px}
@media(max-width:760px){.hero{flex-direction:column;text-align:center;padding:32px 0}.hero h1{font-size:30px}.hero p{font-size:16px}.card{width:100%;text-align:left}.links .hide{display:none}}
.gap{margin-top:30px}
section .grid{margin-top:18px}
.foot{margin-top:30px}
[dir=rtl] .card li:before{content:"▪ "}
[dir=rtl] .note{border-left:0;border-right:3px solid #ffb020}
[dir=rtl] .f ul,[dir=rtl] .legal ul{padding-left:0;padding-right:18px}
.legal h1{font-size:34px;margin:30px 0 4px}
.lang a{display:inline-flex;align-items:center;gap:5px}.lang img{width:20px;height:13px;border-radius:2px;box-shadow:0 0 0 1px #ffffff22}
a.card,a.f,a.s{color:inherit;text-decoration:none;display:block}a.s{display:flex}
a.card:hover,a.f:hover{border-color:#00e5ff;box-shadow:0 0 0 1px #00e5ff66}
.soon{font-size:14px;color:#7fdcec;margin-top:16px}
@media(max-width:760px){.lang a span{display:none}.lang a.on span{display:inline}.nav{gap:10px}.brand{font-size:19px}}
/* sticky header, language switch always in view and easy to tap */
header.nav{position:sticky;top:0;z-index:10;background:rgba(10,18,32,.94);backdrop-filter:blur(8px);margin:0 -24px;padding:12px 24px}
.lang{display:inline-flex;gap:4px;flex-wrap:nowrap}
.lang a{min-height:40px;padding:6px 8px;border-radius:8px;border:1px solid transparent}
.lang a.on{border-color:#00e5ff55;background:#00e5ff14}
.lang a:hover{border-color:#00e5ff55}
.lang img{width:24px;height:16px}
img,svg{max-width:100%}
h1,h2,h3,p,li{overflow-wrap:break-word}
html[lang=ko] body{word-break:keep-all}
@media(max-width:1000px){.links .hide{display:none}}
@media(max-width:760px){.lang a{min-width:44px;min-height:44px;justify-content:center;padding:6px}}
@media(max-width:380px){.wrap{padding:0 14px}header.nav{margin:0 -14px;padding:10px 14px}.brand img{width:30px;height:30px}.brand{font-size:17px;gap:6px}.lang{gap:2px}.lang a{min-width:40px;padding:4px}.lang a.on span{display:none}.hero h1{font-size:26px}.btn{padding:14px 18px;font-size:16px}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips span{font-size:15px;font-weight:600;color:#d8f7ff;background:#00e5ff17;border:1px solid #00e5ff55;border-radius:999px;padding:6px 14px}
.chips span:first-child{color:#03121c;background:#7ff0ff;border-color:#7ff0ff}
.botlang{font-size:16px;color:#c8d5e4;margin-top:14px}
@media(max-width:760px){.chips{justify-content:center}.chips span{font-size:14px}}