/* SOFTWORKS — generated from tokens.json */
:root, [data-theme="light"] {
  --bg: #ffffff; /* Page ground: header, products, CTA and footer sections. */
  --surface-subtle: #f8f9fa; /* Quiet band behind the customer/partner proof line. */
  --navy-900: #0e2244; /* Deep brand ground for the hero and the mission band. Carries `on-dark` and `on-dark-muted` text. */
  --line: #dadce0; /* 1px hairlines: header bottom, section tops, product list row dividers. Decorative only (1.4:1 on `bg`), never the only edge of a control. */
  --ink: #202124; /* Headings, product names and partner names on `bg` and `surface-subtle` (16:1 / 15.3:1). */
  --ink-muted: #5f6368; /* Body copy, nav links and product descriptions on `bg` (6:1). */
  --ink-subtle: #80868b; /* Overline labels (product category, proof label) and footer text on `bg`/`surface-subtle`. 3.7:1 on `bg`, 3.5:1 on `surface-subtle`: below 4.5:1 for its 11–12.5px sizes, kept as the source has it. */
  --primary: #1369ff; /* Filled button fill, eyebrow outline and text on `bg`, blue product suffix. White text on it is 3.6:1 and it is 3.6:1 as text on `bg`: below 4.5:1 at 12–14px, kept as the source has it. */
  --on-primary: #ffffff; /* Label on the `primary` filled button (3.6:1, see `primary`). */
  --on-dark: #ffffff; /* Headlines, eyebrow text and ghost-button labels on `navy-900` (15.8:1). */
  --on-dark-muted: #b8c8e8; /* Hero lead paragraph on `navy-900` (9.4:1). */
  --on-dark-body: rgba(255, 255, 255, 0.72); /* Stat descriptions over the stat gradient. Reads 10:1 near the top stop, drops to 4.3:1 over `stat-grad-3`; keep the text in the band's upper two thirds. */
  --on-dark-outline: rgba(255, 255, 255, 0.4); /* Eyebrow outline on `navy-900` (3.6:1). */
  --on-dark-outline-btn: rgba(255, 255, 255, 0.35); /* Ghost button border on `navy-900` (3.1:1). */
  --on-dark-divider: rgba(255, 255, 255, 0.18); /* Vertical dividers between stat columns. Decorative. */
  --stat-accent: #7ce9f5; /* Stat numerals and units over the stat gradient (14:1 at the top stop, 4.7:1 over `stat-grad-3`). */
  --stat-grad-1: #020818; /* Stat band gradient stop at 8.49% (175.15deg). */
  --stat-grad-2: #0a2e63; /* Stat band gradient stop at 41.70%. */
  --stat-grad-3: #0e5fa0; /* Stat band gradient stop at 66.61%. */
  --stat-grad-4: #17aedd; /* Stat band gradient stop at 91.51%, the bottom edge. No text sits here (white is 2.6:1). */
  --product-blue: var(--primary); /* Suffix accent of GenWorks and GenWorks-ML, set in `product-name` (20px 800, large text: 3.6:1 on `bg`). */
  --product-green: #34a853; /* Suffix accent of GenWorks-K8s in `product-name` (3.1:1 on `bg`, large text). */
  --product-red: #ea4335; /* Suffix accent of GenWorks-SOP in `product-name` (3.9:1 on `bg`, large text). */
  --product-yellow: #fbbc04; /* Suffix accent of CloudV in `product-name`. 1.7:1 on `bg`: fails even for large text, kept as the source has it. */
}
:root {
  --space-4: 4px; /* Gap between nav links. */
  --space-8: 8px; /* Nav link vertical padding; nav left inset. */
  --space-14: 14px; /* Eyebrow horizontal padding. */
  --space-16: 16px; /* Nav link horizontal padding; gap between hero buttons; heading-to-paragraph gap. */
  --space-20: 20px; /* Gap between header actions. */
  --space-24: 24px; /* Stat numeral to description; CTA stack gap. */
  --space-26: 26px; /* Button horizontal padding (13px vertical). */
  --space-28: 28px; /* Hero heading to lead; footer vertical padding. */
  --space-36: 36px; /* Gap between logo, nav and actions in the header. */
  --space-40: 40px; /* Lead paragraph to hero buttons. */
  --space-56: 56px; /* Section intro to list; stat column vertical padding. */
  --gutter: 59.65px; /* Page side padding: 5vw at the 1193px frame. Implement as 5vw. */
  --stat-col-pad: 47.72px; /* Stat column inner padding beside a divider: 4vw at 1193px. */
  --hero-pad-top: 93.72px; /* Hero top padding: 11vh at the 852px viewport. */
  --hero-pad-bottom: 76.68px; /* Hero bottom padding: 9vh at 852px. */
  --section-y: 107.37px; /* Products and CTA vertical padding: 9vw at 1193px. */
  --mission-y: 131.23px; /* Mission band vertical padding: 11vw at 1193px. */
  --radius-pill: 999px; /* Every button, nav link hover and eyebrow. The system has no other radius: sections, rows and bands are square. */
  --container-max: 1280px; /* Max width of every section container. */
  --hero-max: 960px; /* Hero content column, centered. */
  --measure-lead: 672px; /* Max width of the hero lead and H1. */
  --measure-intro: 640px; /* Max width of a section intro block. */
  --header-height: 72px; /* Header bar height (plus 1px `line` border). */
  --product-meta-col: 280px; /* Product row name column; description starts 332px from the row edge. */
  --font-sans: "DM Sans", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --text-display-hero: 800 68px/73.44px var(--font-sans); /* Hero H1 only, on `navy-900` in `on-dark`. Max width 671px. */
  --text-stat-number: 900 71.58px/71.58px var(--font-sans); /* Stat numerals in `stat-accent`. */
  --text-mission: 800 46px/58.88px var(--font-sans); /* Centered mission statement on `navy-900`, two lines. */
  --text-heading-xl: 800 46px/51.52px var(--font-sans); /* Closing CTA heading in `ink`, max width 519px. */
  --text-heading-lg: 800 40px/44.8px var(--font-sans); /* Section H2 in `ink`. */
  --text-stat-unit: 700 27.2px/27.2px var(--font-sans); /* Unit after a stat numeral, baseline-aligned, `stat-accent`. */
  --text-product-name: 800 20px/24px var(--font-sans); /* Product name in `ink`, suffix in its product color. */
  --text-lead: 300 19px/33.25px var(--font-sans); /* Hero paragraph in `on-dark-muted`, max width 672px. */
  --text-body-lg: 400 15.5px/26.35px var(--font-sans); /* CTA supporting line in `ink-muted`. */
  --text-body: 400 15px/26.25px var(--font-sans); /* Section intro paragraphs in `ink-muted`, max width 640px. */
  --text-body-row: 400 15px/25.8px var(--font-sans); /* Product row descriptions in `ink-muted`. */
  --text-proof: 600 14.5px/21.75px var(--font-sans); /* Partner names in `ink`, separated by ` · `. */
  --text-body-sm: 400 14px/23.1px var(--font-sans); /* Stat descriptions in `on-dark-body`, max width 249px. */
  --text-nav: 500 14px/21px var(--font-sans); /* Header nav links in `ink-muted`. */
  --text-button: 600 14px/21px var(--font-sans); /* Button labels. */
  --text-caption: 400 12.5px/18.75px var(--font-sans); /* Footer text in `ink-subtle`. */
  --text-eyebrow: 600 12px/18px var(--font-sans); /* Eyebrow pill label, English, title case. */
  --text-overline: 600 11.5px/17.25px var(--font-sans); /* Product category under the name, uppercase, `ink-subtle`. */
  --text-overline-sm: 600 11px/16.5px var(--font-sans); /* Proof line label, uppercase, `ink-subtle`. */
}
.display-hero {
  font-family: var(--font-sans);
  font-size: 68px;
  line-height: 73.44px;
  font-weight: 800;
  letter-spacing: -1.36px;
}
.stat-number {
  font-family: var(--font-sans);
  font-size: 71.58px;
  line-height: 71.58px;
  font-weight: 900;
  letter-spacing: -2.1474px;
}
.mission {
  font-family: var(--font-sans);
  font-size: 46px;
  line-height: 58.88px;
  font-weight: 800;
  letter-spacing: -0.92px;
}
.heading-xl {
  font-family: var(--font-sans);
  font-size: 46px;
  line-height: 51.52px;
  font-weight: 800;
  letter-spacing: -0.92px;
}
.heading-lg {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 44.8px;
  font-weight: 800;
  letter-spacing: -0.8px;
}
.stat-unit {
  font-family: var(--font-sans);
  font-size: 27.2px;
  line-height: 27.2px;
  font-weight: 700;
  letter-spacing: -2.1474px;
}
.product-name {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: -0.2px;
}
.lead {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 33.25px;
  font-weight: 300;
  letter-spacing: 0;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 26.35px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 26.25px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-row {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 25.8px;
  font-weight: 400;
  letter-spacing: 0;
}
.proof {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 21.75px;
  font-weight: 600;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 23.1px;
  font-weight: 400;
  letter-spacing: 0;
}
.nav {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  letter-spacing: 0;
}
.button {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 18.75px;
  font-weight: 400;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.48px;
}
.overline {
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 17.25px;
  font-weight: 600;
  letter-spacing: 0.69px;
}
.overline-sm {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 600;
  letter-spacing: 0.88px;
}