@font-face {
  font-family: 'Nullge Wordmark';
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url(./assets/nullge-wordmark.woff2) format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(./assets/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  
  --bg: #141514;
  --surface-raised: #191a19;
  --surface-fill: rgba(249, 249, 249, 0.05);
  --surface-fill-hover: rgba(249, 249, 249, 0.12);

  
  --text: #f9f9f9;
  --text-secondary: rgba(255, 255, 255, 0.62);
  --text-muted: rgba(249, 249, 249, 0.45);

  
  --accent: #73f36c;
  --accent-soft: #aaf1d5;
  --accent-dark: #001b05;
  --accent-alpha: rgba(115, 243, 108, 0.16);

  
  --border: rgba(249, 249, 249, 0.1);
  --border-strong: rgba(249, 249, 249, 0.18);

  --danger: #f87171;

  
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  
  --maxw: 1120px;
  --gutter: 24px;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

img,
svg {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--accent);
  color: var(--accent-dark);
}

.page {
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 72px;
  --space-hero: clamp(72px, 10vw, 144px);
  --product-bg: #ecf5e8;
  --product-ink: #173523;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  overflow-wrap: anywhere;
}
.skip { position: fixed; top: -100px; left: var(--gutter); z-index: 10; background: var(--accent); color: var(--accent-dark); padding: var(--space-sm); }
.skip:focus { top: var(--space-sm); }
.header { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-md); border-bottom: 1px solid var(--border); }
.wordmark { font-family: 'Nullge Wordmark', 'Montserrat', system-ui, sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -0.045em; }
.wordmark span { color: var(--accent); }
.header nav { display: flex; gap: var(--space-md); font-size: 14px; color: var(--text-secondary); }
.page a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.page a:hover { text-decoration: underline; text-underline-offset: 5px; }
.hero { padding-block: var(--space-hero); }
.eyebrow { color: var(--text-secondary); font-size: 11px; font-weight: 600; letter-spacing: 1.8px; }
.hero h1 { margin-top: var(--space-md); font-size: clamp(35px, 5.3vw, 66px); line-height: 1.3; letter-spacing: -2.5px; word-break: keep-all; }
.hero h1 span { color: var(--accent); }
.intro { max-width: 560px; margin-block: var(--space-md) var(--space-lg); color: var(--text-secondary); font-size: 16px; line-height: 1.9; word-break: keep-all; }
.textLink { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: 14px; font-weight: 600; }
.sectionHeading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-md); }
.sectionHeading h2 { font-size: 16px; font-weight: 500; color: var(--text-secondary); }
.product { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-raised); }
.product + .product { margin-top: var(--space-md); }
.productClipit { --product-bg: #ff7959; --product-ink: #242326; --product-accent: #ff7959; }
.productAttic { --product-bg: #38362f; --product-ink: #f5f0e6; --product-accent: #eaa77e; }
.page .product:hover { text-decoration: none; border-color: var(--border-strong); }
.productVisual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); min-height: 390px; padding: var(--space-lg); background: var(--product-bg); color: var(--product-ink); }
.productIcon { border-radius: var(--radius-lg); }
.productName { font-size: 54px; font-weight: 600; letter-spacing: -3px; line-height: 1; }
.productNameKo { font-size: 38px; letter-spacing: -2px; word-break: keep-all; text-align: center; }
.productTag { font-size: 9px; font-weight: 600; letter-spacing: 2px; text-align: center; }
.productTagKo { font-size: 11px; letter-spacing: 1px; }
.productCopy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); padding: var(--space-lg); }
.productCopy h3 { font-size: clamp(30px, 3.5vw, 42px); line-height: 1.3; letter-spacing: -1.5px; }
.productCopy > p:not(.eyebrow) { font-size: 14px; line-height: 1.9; color: var(--text-secondary); word-break: keep-all; }
.productCopy .textLink { margin-top: auto; color: var(--product-accent, var(--accent)); }
.contact { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); padding-block: var(--space-hero); }
.contact h2 { margin-top: var(--space-sm); margin-bottom: var(--space-sm); font-size: clamp(28px, 3.5vw, 40px); letter-spacing: -1px; }
.contact p:not(.eyebrow) { font-size: 14px; color: var(--text-secondary); }
.email { font-size: clamp(18px, 2.8vw, 28px); letter-spacing: -1px; }
.email span { color: var(--accent); }
.footer { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-lg); border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 11px; line-height: 1.9; }
.footer strong { color: var(--text); font-size: 13px; }
.supportLinks { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
@media (max-width: 700px) {
  .hero h1 { letter-spacing: -1.7px; }
  .product { grid-template-columns: 1fr; }
  .productVisual { min-height: 300px; }
  .productCopy { padding: var(--space-md); }
  .contact, .footer { flex-direction: column; align-items: flex-start; }
  .contact { gap: var(--space-md); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}