:root{
  --paper:#EEF1F4; --panel:#FFFFFF; --ink:#0D1A2B; --steel:#55657A; --line:#C8D1DB;
  --cobalt:#2346F5; --amber:#D9820A; --amber-soft:#F6B24A;
  --sans:"IBM Plex Sans KR","IBM Plex Sans",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --cond:"IBM Plex Sans Condensed","IBM Plex Sans KR",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:4px}
.wrap{width:min(1160px,100% - 48px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:6px;z-index:20}
.skip:focus{left:16px}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance}
h1{font-size:clamp(2.5rem,6vw,4.6rem);line-height:1.04;letter-spacing:-.035em;font-weight:700}
h2{font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.12;letter-spacing:-.025em;font-weight:700;max-width:22ch}
h3{font-size:clamp(1.35rem,2.3vw,1.8rem);line-height:1.2;letter-spacing:-.015em;font-weight:600}
html[lang=ko] h1{letter-spacing:-.045em;line-height:1.16;font-size:clamp(2.4rem,5.2vw,4.1rem)}
html[lang=ko] h2,html[lang=ko] h3{line-height:1.28}
.sub{color:var(--steel);max-width:60ch;margin-top:16px;font-size:1.1rem}

/* header */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;text-decoration:none;letter-spacing:-.02em}
.nav{display:flex;gap:24px;margin-left:auto;font-size:.95rem}
.nav a{text-decoration:none;color:var(--steel)}
.nav a:hover{color:var(--ink)}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px;font-size:.85rem;background:var(--panel)}
.lang a{text-decoration:none;padding:4px 12px;border-radius:999px;color:var(--steel)}
.lang a[aria-current]{background:var(--ink);color:#fff}
.btn{display:inline-block;background:var(--cobalt);color:#fff;text-decoration:none;font-weight:600;padding:14px 22px;border-radius:8px}
.btn:hover{background:#1836cf}
.btn-small{padding:8px 16px;font-size:.9rem}
.link{font-weight:600;text-underline-offset:5px}

/* hero */
.hero{padding:80px 0 96px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:56px;align-items:center}
.lede{font-size:1.2rem;color:var(--steel);margin-top:24px;max-width:46ch}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:36px}
.perimeter{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 20px 22px}
.switch{display:inline-flex;background:var(--paper);border-radius:8px;padding:4px;gap:4px}
.switch button{font:inherit;font-size:.9rem;font-weight:600;border:0;background:none;color:var(--steel);padding:8px 16px;border-radius:6px;cursor:pointer}
.switch button[aria-pressed=true]{background:var(--ink);color:#fff}
.perimeter svg{display:block;width:100%;height:auto;margin-top:8px}
.wall{fill:rgba(35,70,245,.04);stroke:var(--cobalt);stroke-width:2;stroke-dasharray:7 6;transition:stroke .4s,fill .4s}
.wall-label{font:600 14px var(--sans);fill:var(--cobalt);transition:fill .4s}
.out-label{font:600 14px var(--sans);fill:#9AA7B6;transition:fill .4s}
.ghost{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 5}
.src rect{fill:var(--paper);stroke:var(--line)}
.src text{font:500 15px var(--sans);fill:var(--ink)}
.model{transition:transform .9s cubic-bezier(.6,0,.2,1)}
.model rect{fill:var(--ink)}
.pins path{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.model-t{font:700 17px var(--sans);fill:#fff}
.model-s{font:500 12px var(--sans);fill:#9FB0C6}
.paths path{fill:none;stroke-width:1.5}
.paths{transition:opacity .5s}
.paths-local path{stroke:var(--cobalt);opacity:.45}
.paths-local circle{fill:var(--cobalt)}
.paths-cloud path{stroke:var(--amber);opacity:.55}
.paths-cloud circle{fill:var(--amber)}
.paths-cloud .breach{fill:none;stroke:var(--amber);stroke-width:2}
.perimeter[data-mode=local] .paths-cloud{opacity:0}
.perimeter[data-mode=cloud] .paths-local{opacity:0}
.perimeter[data-mode=cloud] .model{transform:translateX(210px)}
.perimeter[data-mode=cloud] .out-label{fill:var(--amber)}
.perimeter[data-mode=cloud] .wall{stroke:var(--amber);fill:rgba(217,130,10,.05)}
.perimeter[data-mode=cloud] .wall-label{fill:var(--amber)}
figcaption .cap{display:none;font-size:.98rem;color:var(--ink);padding-left:14px;border-left:3px solid var(--cobalt)}
.perimeter[data-mode=cloud] .cap-cloud{display:block;border-color:var(--amber)}
.perimeter[data-mode=local] .cap-local{display:block}
#peri-cap{margin-top:14px;min-height:3.2em}

/* model strip */
.strip{border-block:1px solid var(--line);background:var(--panel)}
.strip-in{display:flex;align-items:center;gap:32px;padding-block:20px;flex-wrap:wrap}
.strip p{font-size:.88rem;color:var(--steel);flex:none}
.strip ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.strip li{font-size:.9rem;font-weight:600;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
.strip li:nth-child(n+6){background:var(--ink);color:#fff;border-color:var(--ink)}

/* why */
.why{padding-top:96px}
.reason + .reason{border-top:0}
.reason{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;padding-block:88px;align-items:start}
.reason.dark{display:block;background:var(--ink);color:#E9EEF4;padding-block:96px}
.reason-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start}
.reason-copy p{margin-top:18px;max-width:54ch;color:var(--steel)}
.dark .reason-copy p{color:#A9B8CA}
.reason-copy .count{font:600 4.5rem/1 var(--cond);color:var(--cobalt);margin:0 0 20px}
.dark .reason-copy .count{color:var(--amber-soft)}
.reason-copy .fine{font-size:.9rem;border-top:1px solid var(--line);padding-top:16px;margin-top:28px}
.chart{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:28px}
.dark .chart{background:#14263C;border-color:#263B55}
.chart figcaption{font-weight:600;font-size:1.05rem;max-width:40ch}
.src-note{font-size:.82rem;color:var(--steel);margin-top:18px}
.dark .src-note{color:#8FA1B8}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:end;height:260px;margin-top:28px}
.col{display:flex;flex-direction:column;justify-content:flex-end;height:100%;text-align:center}
.col b{font:600 2rem/1 var(--cond);margin-bottom:8px}
.col i{display:block;height:calc(var(--v) * 1% * 1.9);background:var(--cobalt);border-radius:6px 6px 0 0}
.col.proj i{background:repeating-linear-gradient(135deg,var(--cobalt) 0 6px,#6F86F8 6px 12px)}
.col span{font-size:.88rem;color:var(--steel);padding-top:10px;border-top:1px solid var(--line)}
.hbars{display:grid;gap:18px;margin-top:26px}
.hbar{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:baseline}
.hbar span{font-size:.95rem}
.hbar b{font:600 1.3rem/1 var(--cond);grid-column:2;grid-row:1}
.hbar i{grid-column:1/-1;display:block;height:14px;width:calc(var(--v) * 1%);background:var(--amber-soft);border-radius:3px}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;margin-top:24px;border-top:1px solid var(--line)}
.dark .figs{border-color:#263B55}
.fig{padding:20px 20px 4px 0}
.fig strong{display:block;white-space:nowrap;font:600 2.3rem/1.05 var(--cond);letter-spacing:-.01em}
.dark .fig strong{color:var(--amber-soft)}
.fig span{display:block;font-size:.88rem;color:var(--steel);margin-top:8px;max-width:26ch}
.dark .fig span{color:#A9B8CA}

table{border-collapse:collapse;width:100%}
caption{text-align:left;font-weight:600;font-size:1.05rem;padding-bottom:14px}
.tasks{background:var(--panel);border:1px solid var(--line);border-radius:12px;border-collapse:separate;border-spacing:0;padding:24px 24px 10px}
.tasks th,.tasks td{text-align:left;padding:13px 10px 13px 0;border-bottom:1px solid var(--line);font-size:.95rem;vertical-align:top}
.tasks tbody tr:last-child th,.tasks tbody tr:last-child td{border-bottom:0}
.tasks thead th{font-size:.85rem;color:var(--steel);font-weight:500}
.tasks tbody th{font-weight:500;width:46%}
.tasks .no{color:var(--amber);font-weight:600}
.tasks .yes{color:var(--cobalt);font-weight:600}

.hero{background:
  linear-gradient(var(--paper),transparent 30%,transparent 70%,var(--paper)),
  repeating-linear-gradient(90deg,transparent 0 79px,rgba(13,26,43,.045) 79px 80px),
  repeating-linear-gradient(0deg,transparent 0 79px,rgba(13,26,43,.045) 79px 80px)}
.proof{margin-top:28px;font-size:.92rem;color:var(--steel);padding-left:14px;border-left:3px solid var(--cobalt);max-width:44ch}
.proof b{color:var(--ink)}
.perimeter{box-shadow:0 30px 60px -30px rgba(13,26,43,.25)}

/* compare */
.compare{padding:24px 0 104px}
.scroll{overflow-x:auto;margin-top:44px}
.cmp{min-width:640px;border-collapse:separate;border-spacing:0}
.cmp th,.cmp td{text-align:left;padding:18px 24px;border-bottom:1px solid var(--line);vertical-align:top;font-size:1rem}
.cmp thead th{font-size:1.05rem;font-weight:600;border-bottom:2px solid var(--ink);color:var(--steel)}
.cmp tbody th{font-weight:600;width:24%;padding-left:0}
.cmp td{color:var(--steel);width:38%}
.cmp .us{background:var(--panel);color:var(--ink);border-inline:2px solid var(--cobalt)}
.cmp thead .us{color:var(--cobalt);border-top:2px solid var(--cobalt);border-radius:10px 10px 0 0;border-bottom-color:var(--cobalt)}
.cmp tbody tr:last-child .us{border-bottom:2px solid var(--cobalt);border-radius:0 0 10px 10px}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td:not(.us){border-bottom:0}

/* hardware tiers */
.tiers{margin-top:88px;padding-top:56px;border-top:1px solid var(--line)}
.tier-row{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:40px;align-items:end}
.tier h4{margin:20px 0 0;font-size:1.2rem;font-weight:600}
.tier p{color:var(--steel);margin-top:8px;font-size:.98rem}
.tier .spec{color:var(--ink);font-weight:500;font-size:.92rem;border-top:1px solid var(--line);padding-top:12px;margin-top:14px}
.rack{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;align-content:end;height:132px;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:10px}
.rack i{display:block;height:22px;border-radius:4px;background:var(--ink);position:relative}
.rack i::after{content:"";position:absolute;right:6px;top:8px;width:6px;height:6px;border-radius:50%;background:#6F86F8}
.rack.tall i{grid-column:1/-1;height:9px}
.rack.tall i::after{top:2px;width:5px;height:5px}

/* sectors */
.sectors{padding:104px 0;background:var(--ink);color:#E9EEF4}
.sectors .sub{color:#A9B8CA}
.sectors-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px}
.sector-list{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.sector-list div{padding:22px 0;border-top:1px solid #263B55}
.sector-list dt{font-weight:600;font-size:1.08rem;color:#fff}
.sector-list dd{margin:8px 0 0;color:#A9B8CA;font-size:.95rem}

/* services */
.services{padding:96px 0;background:var(--panel);border-block:1px solid var(--line)}
.steps{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(3,1fr);counter-reset:s}
.steps li{counter-increment:s;padding:0 32px 0 0;border-top:2px solid var(--ink);position:relative}
.steps h3{font-size:1.6rem}
.steps li + li{padding-left:32px;border-left:1px solid var(--line)}
.steps li::before{content:counter(s);display:block;font:600 1.1rem var(--cond);background:var(--ink);color:#fff;width:32px;height:32px;line-height:32px;text-align:center;margin-bottom:24px}
.steps li + li::before{margin-left:-32px}
.steps p{color:var(--steel);margin-top:12px}
.steps ul{margin:20px 0 0;padding:0;list-style:none;font-size:.95rem}
.steps ul li{all:unset;display:block;padding:9px 0;border-top:1px solid var(--line)}
.steps ul li::before{content:none}

/* record */
.record{padding:96px 0}
.record-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px}
.record p{margin-top:18px;color:var(--steel);max-width:54ch}
.record .links{display:flex;flex-wrap:wrap;gap:20px;color:var(--ink);font-weight:600}
.record .links a{text-underline-offset:5px}
.tally{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 36px;border-top:2px solid var(--ink)}
.tally div{padding:18px 12px 0 0}
.tally dt{font-size:.85rem;color:var(--steel)}
.tally dd{margin:6px 0 0;font:600 2.6rem/1 var(--cond)}
.families th,.families td{text-align:left;padding:11px 12px 11px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.families thead th{font-size:.85rem;color:var(--steel);font-weight:500}
.families tbody th{font-weight:600}

/* faq */
.faq{padding:96px 0;background:var(--panel);border-top:1px solid var(--line)}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:600;font-size:1.08rem;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:14px;font:500 1.6rem var(--cond);color:var(--cobalt)}
details[open] summary::after{content:"–"}
details p{padding:0 0 22px;color:var(--steel);max-width:64ch}

/* contact */
.contact{background:var(--cobalt) repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.07) 79px 80px);color:#fff;padding:112px 0}
.contact p{margin-top:18px;max-width:52ch;font-size:1.15rem;color:#DCE3FF}
.mail{display:inline-block;margin-top:40px;font-size:clamp(1.6rem,5vw,3.6rem);font-weight:700;letter-spacing:-.03em;color:#fff;text-decoration-thickness:3px;text-underline-offset:10px;overflow-wrap:anywhere}

/* footer */
.foot{background:var(--ink);color:#A9B8CA;padding:64px 0;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px}
.foot p{margin-top:8px}
.brand-foot{color:#fff;font-weight:700;font-size:1.2rem}
.foot h2{font-size:.95rem;letter-spacing:0;color:#fff;font-weight:600}
.sources{margin:14px 0 0;padding-left:20px}
.sources li{margin-top:8px}
.copy{margin-top:24px!important}

@media (max-width:920px){
  .nav{display:none}
  .lang{margin-left:auto}
  .hero{padding:48px 0 64px}
  .hero-grid,.reason,.reason-in,.record-grid,.faq-grid,.foot-grid,.sectors-grid{grid-template-columns:1fr;gap:40px}
  .tier-row{grid-template-columns:1fr}
  .sector-list{grid-template-columns:1fr}
  .reason{padding-block:64px}
  .steps{grid-template-columns:1fr;gap:40px}
  .steps li,.steps li + li{padding:0;border-left:0}
  .steps li + li::before{margin-left:0}
  .tally{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  body{font-size:16px}
  .wrap{width:calc(100% - 36px)}
  .top-in{gap:12px}
  .btn-small{display:none}
  .perimeter{padding:14px}
  .chart{padding:20px}
  .cols{height:220px;gap:12px}
  .tasks{padding:16px 16px 6px}
  .families td:nth-child(3),.families th:nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .model,.paths,.wall{transition:none}
  .paths circle:not(.breach){display:none}
}