/* ui_kits/landing-page/landing.css */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Helvetica Inserat';
  src: url('fonts/Helvetica_Inserat_Roman.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Druk Wide';
  src: url('fonts/DrukWideMediumTrial.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Druk Wide';
  src: url('fonts/DrukWideBoldTrial.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Druk Wide';
  src: url('fonts/DrukWideHeavyTrial.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Druk Wide';
  src: url('fonts/DrukWideSuperTrial.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  --ink: #0A0A0A;
  --paper: #FFFFFF;
  --paper-soft: #F4F4F2;
  --graphite-1: #1A1A1A;
  --graphite-2: #2A2A2A;
  --accent-spring: #00B14F;
  --rule-on-dark: rgba(255,255,255,0.18);
  --rule-on-light: rgba(0,0,0,0.12);
  --font-display: 'Helvetica Inserat', 'Anton', Impact, sans-serif;
  --font-display-2: 'Druk Wide', 'Archivo Black', 'Arial Black', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

/* === Section wrapper === */
.section {
  padding: clamp(64px, 9vw, 128px) clamp(20px, 4vw, 64px);
}

/* === Common type utilities === */
.eyebrow {
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.eyebrow.on-light { color: rgba(0,0,0,0.55); }

.btn {
  display: inline-block;
  padding: 16px 28px;
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ease) 180ms, color var(--ease) 180ms;
  border-radius: 0;
}
.btn-primary-dark { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-primary-dark:hover { background: transparent; color: var(--paper); }
.btn-primary-light { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary-light:hover { background: transparent; color: var(--ink); }

/* === Origin strip === */
.origin-strip {
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* === INSIDE box === */
.ins-box {
  display: inline-block;
  padding: 0 0.18em 0.05em;
  background: currentColor;
  line-height: 1;
}
.ins-box > span { color: var(--ink); }
.on-dark .ins-box > span, .dark .ins-box > span { color: var(--ink); }
.on-light .ins-box > span { color: var(--paper); }