:root {
  --ink: #0d1b2a;
  --ink-soft: #405164;
  --paper: #f4f4f1;
  --paper-warm: #e8e8e2;
  --lime: #b8ec3e;
  --line: rgba(13, 27, 42, 0.16);
  --sans: "DM Sans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "DM Mono", "Noto Sans KR", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.noise {
  position: fixed;
  inset: 0;
  z-index: 10;
  opacity: 0.045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.site-header {
  height: 82px;
  padding: 0 clamp(24px, 5vw, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; letter-spacing: -1px; }
.mark { display: inline-flex; position: relative; width: 22px; height: 20px; }
.mark i { position: absolute; width: 13px; height: 13px; border: 3px solid var(--ink); border-radius: 50%; }
.mark i:first-child { left: 0; top: 0; }
.mark i:last-child { right: 0; bottom: 0; background: var(--paper); }
.site-header nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); }
.site-header nav a { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; transition: opacity .2s ease; }
.site-header nav a:hover { opacity: .5; }

.hero { min-height: calc(100svh - 82px); padding: clamp(60px, 10vw, 150px) clamp(24px, 8vw, 130px) 56px; position: relative; overflow: hidden; display: grid; align-items: center; }
.hero-copy { position: relative; z-index: 1; max-width: 900px; }
.eyebrow, .section-index { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .07em; }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.eyebrow span { width: 8px; height: 8px; background: var(--lime); border-radius: 50%; display: inline-block; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -.065em; font-weight: 600; line-height: .95; }
h1 { margin: clamp(28px, 4vw, 55px) 0 30px; font-size: clamp(58px, 9.4vw, 144px); max-width: 900px; }
h1 em, h2 em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.hero-description { max-width: 440px; color: var(--ink-soft); font-size: clamp(16px, 1.35vw, 20px); line-height: 1.75; letter-spacing: -.035em; }
.text-link { margin-top: 37px; display: inline-flex; align-items: center; gap: 22px; padding-bottom: 9px; border-bottom: 1px solid var(--ink); font-size: 14px; font-weight: 600; }
.text-link span { font-size: 19px; transition: transform .2s ease; }.text-link:hover span { transform: translateY(3px); }
.hero-art { position: absolute; z-index: 0; width: min(60vw, 760px); aspect-ratio: 1; right: -12vw; top: 4%; opacity: .92; }
.orbit { position: absolute; border: 1px solid rgba(13, 27, 42, .22); border-radius: 50%; }
.orbit-one { width: 95%; height: 95%; top: 2%; left: 2%; }
.orbit-two { width: 63%; height: 63%; top: 18%; left: 18%; border-style: dashed; }
.orbit-three { width: 27%; height: 27%; top: 36%; left: 36%; border-color: var(--ink); }
.node { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--lime); border: 3px solid var(--ink); z-index: 1; }
.node-one { top: 14%; left: 29%; }.node-two { right: 12%; top: 58%; background: var(--paper); }.node-three { left: 28%; bottom: 12%; }
.link-line { position: absolute; height: 1px; background: var(--ink); transform-origin: left center; opacity: .8; }
.line-one { width: 44%; left: 30%; top: 16%; transform: rotate(40deg); }.line-two { width: 42%; left: 28%; bottom: 15%; transform: rotate(-38deg); }
.art-label { position: absolute; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }.label-one { left: 8%; top: 14%; }.label-two { right: 3%; top: 42%; }.label-three { left: 10%; bottom: 22%; }
.scroll-cue { position: absolute; bottom: 42px; right: clamp(24px, 5vw, 80px); display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 9px; letter-spacing: .09em; writing-mode: vertical-rl; }
.scroll-cue i { display: block; height: 35px; width: 1px; background: var(--ink); }

.section-grid { padding: clamp(88px, 12vw, 180px) clamp(24px, 8vw, 130px); display: grid; grid-template-columns: minmax(120px, .45fr) 2fr; gap: clamp(35px, 10vw, 150px); border-top: 1px solid var(--line); }
.section-index { color: var(--ink-soft); }
.intro h2, .section-heading h2, .approach h2, .closing h2 { margin: 0; font-size: clamp(44px, 6.4vw, 98px); }
.intro h2 { max-width: 760px; }.intro div > p { max-width: 510px; margin: clamp(33px, 5vw, 55px) 0 0; color: var(--ink-soft); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.85; letter-spacing: -.035em; }

.services { background: var(--ink); color: var(--paper); padding: clamp(80px, 10vw, 140px) clamp(24px, 5vw, 80px) clamp(30px, 5vw, 70px); }
.services .section-index { color: rgba(244,244,241,.55); }.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; padding: 0 clamp(0px, 3vw, 48px) clamp(50px, 8vw, 100px); }.section-heading h2 { max-width: 650px; }
.service-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(244,244,241,.18); border: 1px solid rgba(244,244,241,.18); }
.service-card { position: relative; min-height: 400px; padding: 30px; overflow: hidden; background: var(--ink); display: flex; flex-direction: column; align-items: flex-start; }
.service-card > span { font-family: var(--mono); font-size: 11px; color: rgba(244,244,241,.56); }.service-card h3 { margin: auto 0 12px; letter-spacing: -.045em; font-size: clamp(22px, 2.1vw, 31px); line-height: 1; }.service-card p { max-width: 285px; margin: 0; color: rgba(244,244,241,.72); font-size: 14px; line-height: 1.7; letter-spacing: -.025em; }
.service-card-dark { background: var(--lime); color: var(--ink); }.service-card-dark > span, .service-card-dark p { color: rgba(13,27,42,.67); }
.card-icon { position: absolute; right: 27px; top: 28px; width: 75px; height: 75px; }.product-icon i { position: absolute; border: 1px solid var(--lime); border-radius: 50%; }.product-icon i:nth-child(1) { inset: 0; }.product-icon i:nth-child(2) { inset: 16px; }.product-icon i:nth-child(3) { width: 10px; height: 10px; background: var(--lime); border: 0; top: 33px; left: 33px; }
.business-icon { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; transform: rotate(16deg); }.business-icon i { border: 1px solid var(--ink); }.business-icon i:nth-child(1), .business-icon i:nth-child(4) { background: var(--ink); }
.partner-icon i { position: absolute; height: 34px; width: 59px; top: 20px; border: 1px solid var(--lime); border-radius: 30px; }.partner-icon i:first-child { left: 0; }.partner-icon i:last-child { right: 0; background: var(--lime); mix-blend-mode: screen; }

.approach { padding: clamp(80px, 11vw, 165px) clamp(24px, 8vw, 130px) 0; }.approach-top { display: grid; grid-template-columns: minmax(120px, .45fr) 1.7fr .7fr; gap: clamp(20px, 4vw, 68px); align-items: end; }.approach-top h2 { max-width: 690px; }.approach-summary { margin: 0 0 8px; color: var(--ink-soft); line-height: 1.65; font-size: 15px; letter-spacing: -.03em; }
.steps { margin: clamp(70px, 10vw, 142px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }.steps li { padding: 24px 0; display: grid; grid-template-columns: minmax(80px, .45fr) 1.7fr .7fr; gap: clamp(20px, 4vw, 68px); border-bottom: 1px solid var(--line); align-items: baseline; }.steps span { font-family: var(--mono); color: var(--ink-soft); font-size: 11px; }.steps strong { font-size: clamp(24px, 3.5vw, 47px); letter-spacing: -.055em; font-weight: 500; }.steps p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.65; }

.closing { margin-top: clamp(85px, 13vw, 190px); padding: clamp(100px, 13vw, 190px) clamp(24px, 8vw, 130px); background: var(--paper-warm); position: relative; overflow: hidden; }.closing > *:not(.closing-orb) { position: relative; z-index: 1; }.closing h2 { margin: 28px 0 28px; }.closing > p:last-child { color: var(--ink-soft); font-size: 16px; }.closing-orb { position: absolute; width: min(48vw, 600px); aspect-ratio: 1; right: -4%; top: 50%; transform: translateY(-50%); border: 1px solid var(--ink); border-radius: 50%; }.closing-orb i { position: absolute; border-radius: 50%; border: 1px solid var(--ink); }.closing-orb i:nth-child(1) { width: 64%; height: 64%; left: 18%; top: 18%; }.closing-orb i:nth-child(2) { width: 28%; height: 28%; left: 36%; top: 36%; background: var(--lime); }.closing-orb i:nth-child(3) { width: 10px; height: 10px; background: var(--ink); top: 13%; left: 29%; }

.site-footer { padding: 45px clamp(24px, 5vw, 80px) 28px; background: var(--ink); color: var(--paper); display: grid; grid-template-columns: 1fr 1.25fr; gap: 50px; }.site-footer .wordmark { color: var(--paper); }.site-footer .mark i { border-color: var(--paper); }.site-footer .mark i:last-child { background: var(--ink); }.footer-brand > p { margin: 18px 0 0; color: rgba(244,244,241,.58); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; }.footer-info { color: rgba(244,244,241,.72); font-size: 12px; line-height: 1.8; letter-spacing: -.015em; }.footer-info p { margin: 0; }.footer-info b { color: var(--paper); font-weight: 500; }.divider { color: rgba(244,244,241,.26); padding: 0 6px; }.copyright { grid-column: 1 / -1; margin: 48px 0 0; padding-top: 16px; border-top: 1px solid rgba(244,244,241,.18); color: rgba(244,244,241,.44); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; }

@media (max-width: 760px) {
  .site-header { height: 68px; }.site-header nav { gap: 16px; }.site-header nav a { font-size: 9px; }.hero { min-height: calc(100svh - 68px); padding-top: 70px; align-items: start; }.hero-art { width: 105vw; right: -37vw; top: 36%; opacity: .53; }.hero-copy { max-width: 100%; }.hero-description { max-width: 330px; }.scroll-cue { display: none; }.section-grid { grid-template-columns: 1fr; gap: 32px; }.section-heading { padding: 0 0 50px; display: block; }.section-heading h2 { margin-top: 31px; }.service-list { grid-template-columns: 1fr; }.service-card { min-height: 300px; }.approach-top, .steps li { grid-template-columns: 1fr; gap: 16px; }.approach-top h2 { margin-top: 13px; }.approach-summary { margin-top: 18px; }.steps li { padding: 23px 0; }.site-footer { grid-template-columns: 1fr; gap: 32px; }.copyright { margin-top: 6px; }.closing { padding-right: 24px; }.closing-orb { width: 110vw; right: -55vw; opacity: .55; }.footer-info { font-size: 11px; }
}