:root {
  --ink: #071019;
  --deep: #0a1622;
  --paper: #eef2f4;
  --muted: #93a1ac;
  --line: rgba(255,255,255,.14);
  --blue: #36a7ff;
  --amber: #ffad32;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", Arial, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.site-header { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: 82px; padding: 0 clamp(24px, 5vw, 76px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.09); background: rgba(7,16,25,.72); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 800; letter-spacing: -.04em; }
.brand > span:last-child > span { color: var(--blue); }
.brand-mark { width: 31px; height: 18px; display: grid; gap: 3px; transform: skewX(-22deg); }
.brand-mark i { display: block; height: 2px; background: currentColor; }
.brand-mark i:nth-child(1) { width: 100%; } .brand-mark i:nth-child(2) { width: 70%; } .brand-mark i:nth-child(3) { width: 42%; }
nav { display: flex; gap: 34px; font: 700 12px/1 system-ui; letter-spacing: .12em; }
nav a { color: #c5d0d7; transition: color .2s; } nav a:hover { color: var(--blue); }
.menu-button { display: none; border: 0; background: none; color: white; font: 700 12px system-ui; letter-spacing: .12em; }
.hero { position: relative; min-height: 100svh; padding: 170px clamp(24px, 8vw, 125px) 80px; display: flex; align-items: center; overflow: hidden; }
.hero-image { position: absolute; inset: 0; background-image: linear-gradient(100deg,#071019 23%,rgba(7,16,25,.78) 49%,rgba(7,16,25,.08)), url('./assets/hero-systems.png'); background-size: cover; background-position: center; opacity: .94; }
.hero-grid { position: absolute; inset: 0; 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: 80px 80px; mask-image: linear-gradient(to right, black, transparent 85%); }
.hero-content { position: relative; z-index: 2; max-width: 920px; }
.eyebrow,.section-no { margin: 0 0 30px; color: var(--blue); font: 750 12px/1.4 system-ui; letter-spacing: .19em; }
h1,h2,.lead { margin: 0; letter-spacing: -.045em; line-height: 1.08; }
h1 { font-size: clamp(54px, 7.6vw, 116px); font-weight: 700; }
h1 em { color: #64baff; -webkit-text-stroke: 0; font-style: normal; text-shadow: 0 0 36px rgba(54,167,255,.16); }
.closing em { color: #64baff; -webkit-text-stroke: 0; font-style: normal; }
.hero-copy { max-width: 600px; margin: 38px 0 30px; color: #b8c4cc; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.75; word-break: keep-all; }
.text-link { display: inline-flex; align-items: center; gap: 28px; border-bottom: 1px solid #71808b; padding: 0 0 10px; font-weight: 700; font-size: 14px; }
.text-link span { color: var(--amber); font-size: 20px; }
.hero-index { position: absolute; right: clamp(24px,5vw,76px); top: 50%; display: flex; flex-direction: column; align-items: center; gap: 14px; font: 700 10px system-ui; color: #8797a2; }
.hero-index div { width: 1px; height: 100px; background: linear-gradient(var(--blue) 22%,var(--line) 22%); }
.hero-note { position: absolute; right: clamp(24px,5vw,76px); bottom: 42px; text-align: right; font: 700 10px/1.7 system-ui; letter-spacing: .17em; color: #8c9aa4; }
.section-pad { padding: clamp(90px, 12vw, 180px) clamp(24px, 8vw, 125px); }
.statement { background: var(--paper); color: var(--ink); display: grid; grid-template-columns: 1fr 3fr; }
.statement .section-no { color: #357aa9; }
.lead { font-size: clamp(42px, 5.6vw, 82px); font-weight: 700; word-break: keep-all; }
.lead strong { color: #087fd2; }
.statement-copy { max-width: 650px; margin: 44px 0 0 auto; color: #52616b; font-size: 18px; line-height: 1.8; word-break: keep-all; }
.services { background: #0a1622; }
.section-heading { display: grid; grid-template-columns: 1fr 3fr; margin-bottom: 80px; }
.section-heading h2,.experience h2,.approach h2 { font-size: clamp(46px,6vw,84px); font-weight: 690; }
.service-list { border-top: 1px solid var(--line); }
.service { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 28px; align-items: start; padding: 38px 0; border-bottom: 1px solid var(--line); transition: padding .3s, background .3s; }
.service:hover { padding-left: 20px; background: linear-gradient(90deg,rgba(54,167,255,.07),transparent); }
.service > span { color: var(--blue); font: 700 12px system-ui; }
.service h3 { margin: 0 0 13px; font: 650 clamp(26px,3vw,41px)/1.1 system-ui; letter-spacing: -.04em; }
.service p { margin: 0; max-width: 560px; color: #94a5b0; line-height: 1.75; word-break: keep-all; }
.service b { justify-self: end; color: var(--amber); font-size: 25px; }
.experience { background: #06101a; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(50px,9vw,140px); align-items: center; }
.metric-panel { min-height: 520px; padding: 58px; border: 1px solid rgba(54,167,255,.27); background: radial-gradient(circle at 60% 35%,rgba(54,167,255,.18),transparent 38%),linear-gradient(145deg,#102538,#071019); display: flex; flex-direction: column; justify-content: space-between; box-shadow: 30px 30px 0 rgba(54,167,255,.04); }
.metric-panel > p:first-child { color: var(--blue); font: 700 11px system-ui; letter-spacing: .2em; }
.metric-panel strong { font: 760 clamp(105px,15vw,220px)/.75 system-ui; letter-spacing: -.09em; }
.metric-panel small { font-size: 15px; letter-spacing: .08em; color: var(--amber); }
.metric-panel > p:last-child { max-width: 420px; color: #a9b5bd; line-height: 1.7; word-break: keep-all; }
.experience-copy > p:not(.section-no) { color: #9baab4; font-size: 18px; line-height: 1.8; word-break: keep-all; }
.experience-copy h2 { margin-bottom: 36px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.tags span { padding: 9px 12px; border: 1px solid #2a3b49; color: #a8b8c2; font: 700 10px system-ui; letter-spacing: .1em; }
.capabilities { background: var(--paper); color: var(--ink); }
.capabilities .section-no { color: #357aa9; }
.cap-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #b9c3c9; border-left: 1px solid #b9c3c9; }
.cap-grid div { min-height: 225px; padding: 34px; border-right: 1px solid #b9c3c9; border-bottom: 1px solid #b9c3c9; }
.cap-grid strong { font: 650 25px system-ui; letter-spacing: -.03em; }
.cap-grid p { color: #5b6972; line-height: 1.7; word-break: keep-all; }
.approach { background: #0b1722; }
.process { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); }
.process li { min-height: 260px; padding: 28px 28px 28px 0; border-right: 1px solid var(--line); }
.process li + li { padding-left: 28px; }
.process span { color: var(--blue); font: 700 11px system-ui; }
.process strong { display: block; margin: 55px 0 20px; font: 650 25px system-ui; }
.process p { color: #8fa0ab; line-height: 1.7; word-break: keep-all; }
.closing { position: relative; min-height: 72vh; padding: 120px clamp(24px,8vw,125px); display: flex; flex-direction: column; justify-content: center; background: #050a0e; overflow: hidden; }
.closing h2 { position: relative; font: 760 clamp(70px,12vw,170px)/.82 system-ui; letter-spacing: -.08em; }
.closing > p:last-child { position: relative; margin-top: 45px; color: #9dabb4; font-size: 18px; }
.speed-lines { position: absolute; right: -10%; top: 0; bottom: 0; width: 62%; background: repeating-linear-gradient(116deg,transparent 0 18px,rgba(54,167,255,.09) 19px 20px); transform: skewX(-10deg); mask-image: linear-gradient(to left,black,transparent); }
footer { padding: 35px clamp(24px,5vw,76px); display: flex; justify-content: space-between; align-items: center; color: #72838e; font: 700 10px system-ui; letter-spacing: .12em; }
.footer-brand { color: var(--paper); font-size: 14px; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (max-width: 800px) {
  .site-header { height: 68px; }
  .menu-button { display: block; }
  nav { position: absolute; top: 68px; left: 0; right: 0; display: none; flex-direction: column; gap: 0; padding: 10px 24px 24px; background: rgba(7,16,25,.97); }
  nav.open { display: flex; } nav a { padding: 15px 0; border-bottom: 1px solid var(--line); }
  .hero { padding-top: 140px; align-items: flex-end; }
  .hero-index { display: none; }
  .hero-note { left: 24px; right: auto; text-align: left; }
  .hero-content { padding-bottom: 90px; }
  .statement,.section-heading,.experience { grid-template-columns: 1fr; }
  .statement .section-no,.section-heading .section-no { margin-bottom: 55px; }
  .statement-copy { margin-left: 0; }
  .service { grid-template-columns: 44px 1fr auto; }
  .experience { gap: 70px; }
  .metric-panel { min-height: 390px; padding: 35px; }
  .cap-grid { grid-template-columns: 1fr 1fr; }
  .process { grid-template-columns: 1fr 1fr; }
  .process li:nth-child(2) { border-right: 0; } .process li:nth-child(3) { padding-left: 0; }
  footer { flex-wrap: wrap; gap: 24px; } footer > p:nth-child(2) { order: 3; width: 100%; }
}
@media (max-width: 520px) {
  h1 { font-size: 51px; }
  .hero-copy { font-size: 16px; }
  .service { grid-template-columns: 34px 1fr; }
  .service b { display: none; }
  .cap-grid,.process { grid-template-columns: 1fr; }
  .cap-grid div { min-height: 170px; }
  .process li,.process li + li { padding: 27px 0; border-right: 0; border-bottom: 1px solid var(--line); min-height: auto; }
  .process strong { margin: 30px 0 12px; }
  .closing { min-height: 62vh; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } }