@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#07101d;
  --bg-soft:#0b1625;
  --panel:#0f1d2f;
  --panel-2:#122238;
  --line:#223653;
  --text:#f5f7fb;
  --muted:#8fa2bd;
  --cyan:#45d5ff;
  --cyan-soft:#a6eeff;
  --gold:#f5c45d;
  --orange:#dc772d;
  --white:#ffffff;
  --shadow:0 22px 60px rgba(3,8,16,.24);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Noto Sans KR",system-ui,sans-serif;
  color:#172033;
  background:#fff;
}
a{text-decoration:none;color:inherit}
button,a{ -webkit-tap-highlight-color:transparent }
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid #e8edf4;
}
.header-inner{
  width:min(1180px,calc(100% - 40px));height:76px;margin:auto;
  display:flex;align-items:center;gap:36px;
}
.brand{display:flex;align-items:center;gap:11px;min-width:max-content}
.brand-mark{
  width:38px;height:38px;display:grid;place-items:center;color:#0ea8d0;
  border:1px solid #bfedf6;border-radius:11px;background:#effcff;font-weight:900
}
.brand-mark svg{width:25px;height:25px}
.brand strong{display:block;font-size:17px;line-height:1.1}
.brand small{display:block;margin-top:4px;color:#8795a8;font-size:9px;letter-spacing:.26em;font-weight:800}
.desktop-nav{display:flex;align-items:center;gap:29px;font-size:14px;font-weight:700;color:#505e72}
.desktop-nav a:hover{color:#0da9d1}
.header-download{
  margin-left:auto;padding:11px 18px;border-radius:8px;
  background:#113e58;color:#fff;font-size:13px;font-weight:800
}
.menu-button{display:none;margin-left:auto;border:0;background:none;font-size:24px}
.mobile-nav{padding:10px 20px 20px;border-top:1px solid #edf0f5}
.mobile-nav a{display:block;padding:12px 2px;font-weight:700;color:#46556c}

.hero{position:relative;overflow:hidden;background:var(--bg);color:var(--text)}
.hero-inner{
  position:relative;z-index:2;width:min(1180px,calc(100% - 40px));min-height:650px;margin:auto;
  display:grid;grid-template-columns:.92fr 1.25fr;align-items:center;gap:56px;padding:78px 0 84px;
}
.hero-glow{position:absolute;border-radius:999px;filter:blur(10px);opacity:.4}
.hero-glow-a{width:520px;height:520px;right:2%;top:4%;background:radial-gradient(circle,rgba(69,213,255,.2),transparent 65%)}
.hero-glow-b{width:400px;height:400px;left:-180px;bottom:-180px;background:radial-gradient(circle,rgba(245,196,93,.14),transparent 65%)}
.eyebrow{margin:0 0 18px;color:#109fc6;font-size:12px;font-weight:900;letter-spacing:.24em}
.hero .eyebrow{color:var(--cyan)}
.hero h1{font-size:54px;line-height:1.16;margin:0;letter-spacing:-.045em}
.hero h1 span{color:var(--gold)}
.hero-description{max-width:510px;margin:25px 0 30px;color:#9dafc6;font-size:17px;line-height:1.85}
.hero-actions{display:flex;align-items:stretch;gap:12px}
.primary-button,.secondary-button{display:flex;justify-content:center;align-items:center;border-radius:10px;font-weight:900}
.primary-button{
  min-width:240px;flex-direction:column;padding:15px 25px;color:#07101d;
  background:linear-gradient(135deg,var(--cyan),#8eeaff);
  box-shadow:0 12px 35px rgba(69,213,255,.18)
}
.primary-button small{margin-top:3px;font-size:10px;opacity:.7}
.secondary-button{padding:0 22px;color:#e6edf7;border:1px solid #29405e;background:rgba(255,255,255,.025)}
.hero-meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:24px;color:#7388a4;font-size:12px;font-weight:700}

.hero-preview{
  border:1px solid #28405f;border-radius:13px;overflow:hidden;background:#08111e;
  box-shadow:0 35px 90px rgba(0,0,0,.38),0 0 0 1px rgba(69,213,255,.03);
  transform:perspective(1200px) rotateY(-2deg) rotateX(1deg);
}
.window-bar{height:43px;padding:0 13px;display:flex;align-items:center;gap:9px;background:#101924;border-bottom:1px solid #202e42;font-size:11px;font-weight:800;color:#aebacc}
.window-logo{width:22px;height:22px;border-radius:6px;background:#163c58;color:var(--cyan);display:grid;place-items:center;font-size:9px}
.window-actions{margin-left:auto;display:flex;gap:9px}.window-actions i{width:9px;height:9px;border-radius:50%;background:#2c3a4c}.window-actions i:last-child{background:#8e3d46}
.app-shell{height:430px;display:grid;grid-template-columns:155px 1fr}
.app-sidebar{padding:18px 13px;background:#0a1421;border-right:1px solid #1f3048}
.mini-profile{display:flex;align-items:center;gap:9px}.avatar{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;background:#123653;color:var(--cyan);font-weight:900}.mini-profile strong,.mini-profile small{display:block}.mini-profile strong{font-size:10px}.mini-profile small{margin-top:3px;color:#6f829e;font-size:7px;letter-spacing:.12em}
.tier-emblem{position:relative;width:84px;height:94px;margin:20px auto 7px}
.shield{position:absolute;inset:0;clip-path:polygon(50% 0,92% 20%,83% 70%,50% 100%,17% 70%,8% 20%);background:linear-gradient(145deg,#a47427,#f6ce68 44%,#68440e)}
.shield:after{content:"";position:absolute;inset:7px;clip-path:inherit;background:#0c1b2c;border:2px solid #b78531}
.wing{position:absolute;top:36px;width:30px;height:15px;background:linear-gradient(90deg,#7d5518,#e7b951);clip-path:polygon(0 50%,100% 0,82% 100%);z-index:2}
.wing.left{left:-19px;transform:scaleX(-1)}.wing.right{right:-19px}
.tier-emblem b{position:absolute;inset:0;display:grid;place-items:center;z-index:4;color:#fff;font-size:14px}
.tier-label{border:1px solid #b97128;border-radius:6px;padding:6px;text-align:center;color:#d68c3f;font-size:8px;font-weight:900;margin-bottom:16px}
.side-link{padding:9px 10px;margin-bottom:4px;border-radius:6px;color:#778ba6;font-size:8px;font-weight:800}.side-link.active{color:#eaf4ff;background:#11263a}
.app-content{padding:20px;background:#0b1522}
.app-heading{display:flex;align-items:end;justify-content:space-between}.app-heading small{color:var(--cyan);font-size:7px;font-weight:900;letter-spacing:.2em}.app-heading h3{margin:4px 0 0;font-size:17px}.app-heading button{border:1px solid #28516b;background:#102c42;color:var(--cyan);border-radius:6px;padding:8px 11px;font-size:8px;font-weight:900}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0}.stat{padding:13px;border:1px solid #20344d;border-radius:8px;background:#101d2d}.stat small,.stat span{display:block}.stat small{color:#71849e;font-size:7px}.stat strong{display:block;margin:7px 0;color:#f6f8fc;font-size:17px}.stat span{color:#50657f;font-size:7px}
.quest-card{position:relative;display:flex;align-items:center;gap:10px;padding:13px 12px;margin-bottom:9px;border:1px solid #20344d;border-radius:8px;background:#0f1b2a;overflow:hidden}.quest-accent{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}.quest-accent.cyan{background:var(--cyan)}.quest-card div:nth-child(2){flex:1}.quest-card small,.quest-card strong,.quest-card span{display:block}.quest-card small{color:#6f829e;font-size:7px}.quest-card strong{margin:4px 0;color:#f0f4fa;font-size:9px}.quest-card span{color:#657993;font-size:7px}.quest-card button{border:1px solid #28415f;background:#15243a;color:#98aac0;border-radius:5px;padding:7px 8px;font-size:7px;font-weight:800}

.numbers{
  width:min(1020px,calc(100% - 40px));margin:-34px auto 0;position:relative;z-index:5;
  display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid #e9eef5;border-radius:14px;
  box-shadow:var(--shadow)
}
.numbers div{padding:24px;text-align:center;border-right:1px solid #edf1f6}.numbers div:last-child{border-right:0}
.numbers strong{display:block;color:#102033;font-size:24px}.numbers span{display:block;margin-top:5px;color:#8b98aa;font-size:12px}

.section{width:min(1180px,calc(100% - 40px));margin:auto;padding:108px 0}
.alt-section{width:100%;padding-left:max(20px,calc((100% - 1180px)/2));padding-right:max(20px,calc((100% - 1180px)/2));background:#f7f9fc}
.section-title{text-align:center;max-width:720px;margin:0 auto 48px}.left-title{text-align:left;margin-left:0}
.section-title h2{margin:0 0 13px;color:#172033;font-size:35px;letter-spacing:-.04em}.section-title>p:last-child{color:#7d8a9e;line-height:1.8}

.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feature-card{position:relative;padding:29px 25px;border:1px solid #e3e9f1;border-radius:13px;background:#fff;box-shadow:0 12px 35px rgba(20,42,67,.05);overflow:hidden}
.feature-number{position:absolute;right:18px;top:16px;color:#e7edf4;font-size:27px;font-weight:900}
.feature-icon{width:47px;height:47px;border-radius:12px;display:grid;place-items:center;background:#ebfaff;color:#0fa8d1;font-size:20px;font-weight:900}
.feature-card h3{margin:22px 0 10px;font-size:18px}.feature-card p{margin:0;color:#77869a;font-size:13px;line-height:1.8}

.screen-grid{display:grid;grid-template-columns:1.5fr .8fr .8fr;gap:18px}
.screen-card{border:1px solid #dfe6ef;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 13px 40px rgba(35,59,83,.07)}
.fake-screen{position:relative;height:300px;background:#091421;overflow:hidden}.screen-top{height:27px;background:#111b27;border-bottom:1px solid #223043}.screen-side{position:absolute;top:27px;bottom:0;left:0;width:23%;background:#0c1724;border-right:1px solid #203149}.screen-panels{position:absolute;left:27%;right:4%;top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.screen-panels i{height:75px;border:1px solid #23374e;background:#101e2e;border-radius:7px}.screen-panels span{grid-column:span 3;height:72px;border:1px solid #23374e;background:#0f1c2b;border-radius:7px}
.promotion-demo{height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#173554,#08131f 62%);color:#fff}.demo-ring{position:absolute;width:150px;height:150px;border:1px solid rgba(245,196,93,.5);border-radius:50%;box-shadow:0 0 40px rgba(245,196,93,.16)}.demo-emblem{z-index:2;width:78px;height:94px;clip-path:polygon(50% 0,94% 22%,80% 72%,50% 100%,20% 72%,6% 22%);display:grid;place-items:center;background:linear-gradient(145deg,#b88128,#f7d277,#6c430d);font-weight:900;font-size:23px}.promotion-demo strong{z-index:2;margin-top:13px;color:#f6ce6b}.promotion-demo span{z-index:2;margin-top:7px;color:#52d9ff;font-size:9px;letter-spacing:.19em;font-weight:900}
.language-demo{height:300px;padding:38px 21px;background:#0b1624;display:flex;flex-direction:column;justify-content:center;gap:10px}.score-row{display:grid;grid-template-columns:1fr auto;gap:4px 15px;padding:15px;border:1px solid #243a55;border-radius:8px;background:#101f31;color:#fff}.score-row b{font-size:12px}.score-row span{font-weight:900;color:var(--cyan)}.score-row i{grid-column:1/3;color:#7188a5;font-size:9px;font-style:normal}
.screen-info{padding:17px 19px}.screen-info strong,.screen-info span{display:block}.screen-info strong{font-size:15px}.screen-info span{margin-top:5px;color:#8b98a9;font-size:12px}

.download-section{padding-top:90px}
.download-card{display:grid;grid-template-columns:1.25fr .75fr;border-radius:20px;overflow:hidden;background:#0a1523;color:#fff;box-shadow:0 28px 80px rgba(10,32,52,.2)}
.download-copy{padding:54px}.download-copy h2{font-size:36px;margin:0 0 15px}.download-copy>p:not(.eyebrow){color:#9aacc3;line-height:1.8}.download-copy ul{padding:0;margin:25px 0 0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}.download-copy li{padding:8px 11px;border:1px solid #263d59;border-radius:6px;color:#9fb1c8;font-size:11px}
.download-panel{padding:42px;background:#102238;display:flex;flex-direction:column;justify-content:center}.download-os{display:flex;align-items:center;gap:13px}.windows-icon{font-size:38px;color:var(--cyan)}.download-os strong,.download-os small{display:block}.download-os small{margin-top:4px;color:#8296af}
.large-download{margin-top:25px;padding:16px;text-align:center;border-radius:9px;background:linear-gradient(135deg,var(--cyan),#9bedff);color:#07111d;font-weight:900}
.download-count-card{display:flex;align-items:center;gap:12px;margin-top:14px;padding:13px 14px;border:1px solid #29445f;border-radius:9px;background:rgba(7,16,29,.38)}
.download-count-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#15344b;color:var(--cyan);font-size:19px;font-weight:900}
.download-count-card div{min-width:0}.download-count-card small{display:block;color:#8298b2;font-size:10px;font-weight:700}.download-count-card strong{display:block;margin-top:2px;color:#f5f8fc;font-size:18px;letter-spacing:-.02em}.download-count-card strong span:last-child{margin-left:2px;font-size:12px;color:#93a7be}
.download-panel p{color:#71869f;font-size:11px;line-height:1.6}.download-panel .download-count-note{margin:8px 2px 0;color:#647a94;font-size:10px}.text-link{color:#a6eaff;font-size:12px;font-weight:800}

.updates{border-top:1px solid #e2e8f0}.update-item{display:grid;grid-template-columns:105px 1fr 60px;align-items:center;gap:18px;padding:24px 4px;border-bottom:1px solid #e2e8f0}.version-badge{color:#718096;font-weight:900}.update-item strong{display:block}.update-item p{margin:6px 0 0;color:#8491a2;font-size:13px}.update-item time{text-align:right;color:#a2adbb;font-size:11px}.update-item.current .version-badge{color:#08a4cf}.update-item.current{background:linear-gradient(90deg,rgba(69,213,255,.05),transparent)}

.faq-list{max-width:860px;margin:auto}.faq-list details{border-bottom:1px solid #dfe6ef;background:#fff}.faq-list summary{padding:22px 5px;cursor:pointer;font-weight:800;list-style:none}.faq-list summary:after{content:"+";float:right;color:#0fa8d1;font-size:20px}.faq-list details[open] summary:after{content:"–"}.faq-list p{margin:-5px 0 0;padding:0 5px 23px;color:#758499;line-height:1.8;font-size:13px}

footer{background:#07101d;color:#8fa2bd}.footer-inner{width:min(1180px,calc(100% - 40px));margin:auto;padding:54px 0;text-align:center}.footer-brand{justify-content:center;color:#fff}.footer-inner p{margin:17px 0}.footer-links{display:flex;justify-content:center;gap:25px;margin:22px 0;font-size:12px;font-weight:800}.footer-inner>small{color:#50647e}

@media(max-width:960px){
  .desktop-nav,.header-download{display:none}.menu-button{display:block}
  .hero-inner{grid-template-columns:1fr;padding-top:65px}.hero-copy{text-align:center}.hero-description{margin-left:auto;margin-right:auto}.hero-actions,.hero-meta{justify-content:center}.hero-preview{transform:none}
  .feature-grid{grid-template-columns:repeat(2,1fr)}.screen-grid{grid-template-columns:1fr 1fr}.screen-main{grid-column:1/3}
  .download-card{grid-template-columns:1fr}.download-panel{padding:35px 54px}
}
@media(max-width:650px){
  .header-inner{width:calc(100% - 28px);height:66px}
  .hero-inner,.section{width:calc(100% - 28px)}.hero h1{font-size:39px}.hero-description{font-size:15px}.hero-actions{flex-direction:column}.secondary-button{padding:14px}.hero-preview{display:none}
  .numbers{width:calc(100% - 28px);grid-template-columns:1fr 1fr;margin-top:-25px}.numbers div:nth-child(2){border-right:0}.numbers div:nth-child(-n+2){border-bottom:1px solid #edf1f6}
  .section{padding:78px 0}.alt-section{width:100%;padding-left:14px;padding-right:14px}.section-title h2{font-size:28px}.feature-grid{grid-template-columns:1fr}.screen-grid{grid-template-columns:1fr}.screen-main{grid-column:auto}
  .download-copy,.download-panel{padding:31px 23px}.download-copy h2{font-size:28px}.download-copy ul{display:block}.download-copy li{margin-bottom:8px}
  .update-item{grid-template-columns:76px 1fr}.update-item time{display:none}.update-item p{font-size:12px}
}
