/* ============================================================
   Enarge — Design tokens & base styles
   Warm-dark / cream / red, friendly technical
   ============================================================ */

:root {
  /* Warm dark base */
  --ink-900: #1c1815;   /* deepest background */
  --ink-800: #241f1b;   /* panel */
  --ink-700: #2e2823;   /* raised panel */
  --ink-600: #3a322c;   /* border / hairline strong */
  --ink-500: #4a4039;   /* muted border */

  /* Cream / paper */
  --cream-50:  #faf4e8;
  --cream-100: #f3ead7;
  --cream-200: #e7dac1;
  --cream-300: #cfc0a4;

  /* Warm muted text on dark */
  --text-strong: #f7efe1;
  --text:        #ddd0bb;
  --text-muted:  #9c8f7c;
  --text-faint:  #6f6557;

  /* Red accent family (warm) */
  --red-600: #c43d2c;
  --red-500: #d8503e;
  --red-400: #e56a55;
  --red-glow: rgba(216, 80, 62, 0.18);

  /* Supporting warm */
  --amber: #e0a44b;

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  --shadow-soft: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-card: 0 18px 50px -20px rgba(0,0,0,0.6);
  --shadow-lift: 0 30px 70px -30px rgba(0,0,0,0.75);

  --font-round: "Kosugi Maru", system-ui, sans-serif;
  --font-ui: "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --maxw: 1180px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--red-500); color: #fff; }

/* paper grain texture used on cream sections */
.grain {
  position: relative;
}
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(0,0,0,0.025) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
  opacity: 0.6;
}

/* ---- shared layout helpers ---- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-400);
}

.scroll-area { height: 100vh; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }

/* scrollbar */
.scroll-area::-webkit-scrollbar { width: 11px; }
.scroll-area::-webkit-scrollbar-track { background: var(--ink-900); }
.scroll-area::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 20px; border: 3px solid var(--ink-900); }

/* ---- Logo wordmark ---- */
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-round); font-weight: 700;
  letter-spacing: -0.01em;
}
.logo .mark {
  position: relative;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.logo .mark svg { display:block; }
.logo .word { font-size: 27px; color: var(--text-strong); }
.logo .word b { color: var(--red-500); font-weight: 700; }
.logo .tag { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; color: var(--text-faint); margin-top: 5px; line-height: 1.45; white-space: nowrap; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-ui); font-weight: 700; font-size: 15px;
  padding: 13px 22px; border-radius: 999px; border: 0;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn-primary { background: var(--red-500); color: #fff; box-shadow: 0 10px 24px -10px var(--red-500); }
.btn-primary:hover { background: var(--red-400); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--text-strong); border: 1.5px solid var(--ink-500); }
.btn-ghost:hover { border-color: var(--cream-300); color: var(--cream-50); }
.btn-cream { background: var(--cream-50); color: var(--ink-900); }
.btn-cream:hover { background: #fff; transform: translateY(-2px); }

/* ---- fade/slide entrance ---- */
@keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.rise { animation: riseIn .7s cubic-bezier(.2,.7,.2,1) both; }

/* ---- chips ---- */
.chip {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--ink-600); color: var(--text-muted);
  background: transparent; transition: all .15s ease;
}
.chip.is-active { background: var(--red-500); border-color: var(--red-500); color: #fff; }
.chip:hover:not(.is-active) { border-color: var(--cream-300); color: var(--cream-100); }

/* code blocks (shared) */
pre.code {
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.65;
  background: #16120f; border: 1px solid var(--ink-600);
  border-radius: var(--radius); padding: 18px 20px; overflow-x: auto;
  margin: 0;
}
pre.code .tok-key { color: #e56a55; }
pre.code .tok-type { color: #e0a44b; }
pre.code .tok-str { color: #9fcf8e; }
pre.code .tok-com { color: #6f6557; font-style: italic; }
pre.code .tok-num { color: #d9b3ff; }
pre.code .tok-fn { color: #7fc4e8; }

/* placeholder image */
.ph {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 10px, transparent 10px 20px),
    var(--ink-700);
  display: grid; place-items: center;
  color: var(--text-faint); font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  border: 1px solid var(--ink-600);
}


/* ---- responsive grids (company top) ---- */
.ct-grid{display:grid;gap:clamp(22px,3vw,52px)}
.ct-hero,.ct-about,.ct-company,.ct-spec{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.ct-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:22px}
.ct-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:20px}
.ct-foot{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:40px}
.ct-row{display:grid;grid-template-columns:140px minmax(0,1fr);gap:24px;align-items:baseline}
@media(max-width:640px){.ct-row{grid-template-columns:1fr;gap:6px}}
.ct-h1{font-size:clamp(26px,3.6vw,52px);overflow-wrap:normal;text-wrap:pretty;min-width:0}
.ct-hero>*{min-width:0}
.nav-link,.ct-nav a,header nav a{white-space:nowrap}