/* ============================================================
   BlinQ leads site · base.css
   Design tokens, reset, typography and the eyebrow label.
   Loaded first; every other stylesheet builds on these tokens.
   ============================================================ */

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --bg:#0A0A0A;
  --card:#0F0F0F;
  --card-2:#141414;
  --line:#1F1F1F;
  --line-2:#2A2A2A;
  --line-3:#3A3A3A;

  --text:#FFFFFF;
  --text-2:#D4D4D4;
  --muted:#8E8E8E;
  --muted-2:#6B6B6B;
  --faint:#4A4A4A;

  --red:#F0341F;
  --red-2:#FF4028;
  --red-soft:#FBE8E4;
  --red-glow:rgba(240,52,31,.35);

  --ok-bg:#E6F6EC;
  --ok-text:#1F7A45;

  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --ease:cubic-bezier(.16,1,.3,1);

  /* Layout: the whole site (header, sections, strip, footer) is one centred column, at most
     1440px wide, with --gutter inside it on both sides. */
  --max-w:1440px;
  --gutter:clamp(24px,5vw,64px);
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
button{font-family:inherit}
::selection{background:var(--red);color:#fff}
a{color:inherit}

h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.06;color:#fff}
h2{font-size:clamp(30px,4.4vw,50px);line-height:1.05;font-weight:700}
h2 span{display:block;color:var(--red)}
h3{font-size:19px;letter-spacing:-.02em}

/* ============================================================
   EYEBROW LABEL
   ============================================================ */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  color:var(--red);
  line-height:1;
}
.eyebrow::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--red);
  flex:0 0 auto;
}
.eyebrow.no-dot::before{display:none}
.eyebrow.muted{color:var(--muted-2)}
.eyebrow.muted::before{background:var(--muted-2)}