/* =========================================================
   BASE — Carbon + Electric Lime · K² labs
   ========================================================= */

:root{
  /* surface */
  --bg:         #0a0a0b;
  --bg-2:       #111113;
  --bg-3:       #18181b;
  --surface:    #1c1c20;
  --rule:       #2a2a2f;
  --rule-2:     #3a3a42;

  /* ink */
  --text:       #ededeb;
  --text-2:     #a8a8a4;
  --text-3:     #6b6b68;

  /* accent */
  --lime:       #c6f432;
  --lime-glow:  rgba(198,244,50,0.4);
  --lime-soft:  rgba(198,244,50,0.12);

  --magenta:    #ff3b6b;

  /* fluid type */
  --fs-hero:    clamp(48px, min(8vw, 13vh), 120px);
  --fs-display: clamp(40px, 6vw, 88px);
  --fs-h2:      clamp(36px, 5vw, 72px);
  --fs-h3:      clamp(22px, 2vw, 30px);

  --ease-out:   cubic-bezier(.2,.7,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box;margin:0;padding:0}
*:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  background:var(--bg);color:var(--text);
  font-family:"JetBrains Mono", ui-monospace, "SF Mono", monospace;
  font-weight:400;font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;
  overflow-x:hidden;
}
body::before{
  /* subtle film grain + vignette */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(198,244,50,0.04), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(255,59,107,0.025), transparent 50%);
}

.sans   { font-family: "Inter", system-ui, sans-serif }
.mono   { font-family: "JetBrains Mono", ui-monospace, monospace }
.display{ font-family: "Inter", system-ui, sans-serif; font-weight:200; letter-spacing:-0.04em }

a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:0;color:inherit}
hr{border:0;height:1px;background:var(--rule)}
img,svg{display:block;max-width:100%}

::selection{background:var(--lime);color:var(--bg)}

.label{
  font-family:"JetBrains Mono", monospace;
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--text-3);
}

/* WORDMARK — K² labs (the only "logo") */
.wordmark{
  display:inline-flex;align-items:baseline;gap:0;
  font-family:"Inter", system-ui, sans-serif;
  font-weight:500;font-size:18px;letter-spacing:-0.02em;
  color:var(--text);
  white-space:nowrap;
  line-height:1;
}
.wordmark .k{font-weight:600;display:inline-block}
.wordmark sup{
  font-size:0.55em;font-weight:600;
  color:var(--lime);
  /* push 2 up so it sits ABOVE the K's cap-height */
  position:relative;
  top:-0.85em;
  margin:0 0 0 0.02em;
  letter-spacing:0;
  vertical-align:baseline;
  line-height:1;
  display:inline-block;
}
.wordmark .labs{font-weight:400;color:var(--text-2);margin-left:0.4em}
.wordmark.lg{font-size:26px}
.wordmark.xl{font-size:40px;font-weight:600}
.wordmark.xl .labs{font-weight:300}

/* =========== BUTTONS =========== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  height:46px;padding:0 22px;
  border:1px solid var(--rule-2);border-radius:999px;
  font-family:"JetBrains Mono", monospace;
  font-size:12px;letter-spacing:0.12em;text-transform:uppercase;font-weight:500;
  color:var(--text);
  background:transparent;
  transition:all .25s var(--ease-out);
  position:relative;
}
.btn:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-1px)}

.btn.primary{
  background:var(--lime);color:var(--bg);border-color:var(--lime);
  font-weight:600;
}
.btn.primary:hover{
  background:var(--lime);color:var(--bg);
  box-shadow:0 0 0 4px var(--lime-soft), 0 8px 32px -8px var(--lime-glow);
  transform:translateY(-1px);
}

.btn .arr{width:14px;height:14px;transition:transform .25s var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}

.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;height:46px;
  font-family:"JetBrains Mono", monospace;
  font-size:12px;letter-spacing:0.12em;text-transform:uppercase;font-weight:500;
  color:var(--text-2);
  padding:6px 0;
  border-bottom:1px solid var(--rule-2);
  transition:all .25s var(--ease-out);
}
.btn-ghost:hover{color:var(--lime);border-color:var(--lime);gap:14px}