/* ============================================================
   TECHLAJU DESIGN SYSTEM — Colors & Type
   "Redefining Tomorrow with Digital Solutions"
   Techlaju Sdn Bhd · Kuching, Sarawak
   ============================================================ */

/* --- Fonts (Google Fonts) -------------------------------------------------
   Poppins  → display / headings (best-guess match for the wordmark — confirm)
   DM Sans  → body / UI text
   JetBrains Mono → code & technical accents
   If you have the real brand fonts, swap the @import + --font-* vars below. */
/* Google Fonts, self-hosted in /fonts/g/ (latin + latin-ext only) */
/* DM Sans latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/g/dmsans-rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/g/dmsans-rP2Hp2ywxg089UriCZOIHQ.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;
}
/* DM Sans latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/g/dmsans-rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/g/dmsans-rP2Hp2ywxg089UriCZOIHQ.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;
}
/* DM Sans latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/g/dmsans-rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/g/dmsans-rP2Hp2ywxg089UriCZOIHQ.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;
}
/* JetBrains Mono latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/g/jetbrainsmono-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/g/jetbrainsmono-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.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;
}
/* JetBrains Mono latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/g/jetbrainsmono-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/g/jetbrainsmono-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.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;
}
/* JetBrains Mono latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/g/jetbrainsmono-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/g/jetbrainsmono-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.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;
}
/* Poppins latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/g/poppins-pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/g/poppins-pxiByp8kv8JHgFVrLGT9Z1xlFQ.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;
}
/* Poppins latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/g/poppins-pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/g/poppins-pxiByp8kv8JHgFVrLEj6Z1xlFQ.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;
}
/* Poppins latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/g/poppins-pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/g/poppins-pxiByp8kv8JHgFVrLCz7Z1xlFQ.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;
}
/* Poppins latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/g/poppins-pxiByp8kv8JHgFVrLDD4Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/g/poppins-pxiByp8kv8JHgFVrLDD4Z1xlFQ.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;
}

/* Reznor Broken — the real Techlaju wordmark / brand display face (self-hosted).
   Single-case (capitals render as the lowercase forms) — display use only. */
@font-face {
  font-family: 'Reznor Broken';
  src: url('fonts/ReznorBroken.ttf') format('truetype');
  /* Basic Latin + Latin-1 only — the face has no glyphs for curly quotes
     (U+2018–U+201D) etc., so those fall back to Poppins instead of
     rendering as invisible gaps. */
  unicode-range: U+0020-00FF;
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- BRAND COLOR ---------- */
  --tl-blue:        #0C9BFF;   /* Techlaju Blue — the one true brand color */
  --tl-blue-press:  #0A7FD6;   /* darker, for press/active */
  --tl-blue-hover:  #0E8CE6;   /* hover */

  /* ---------- BLUE SCALE ---------- */
  --blue-50:  #EAF6FF;
  --blue-100: #D2ECFF;
  --blue-200: #A6D9FF;
  --blue-300: #6FC2FF;
  --blue-400: #33ABFF;
  --blue-500: #0C9BFF;   /* = --tl-blue */
  --blue-600: #0A7FD6;
  --blue-700: #0867AE;
  --blue-800: #08507F;   /* (kept for tints) */
  --blue-900: #0A2E4D;   /* deep brand navy */

  /* ---------- INK / NEUTRALS ---------- */
  --ink-900: #111111;   /* headings, logo wordmark */
  --ink-800: #1C2127;
  --ink-700: #3A4049;   /* body text */
  --ink-600: #515862;
  --ink-500: #6B7280;   /* muted / captions */
  --ink-400: #9AA1AB;   /* placeholder, disabled */
  --ink-300: #CBD2D9;   /* dividers (strong) */
  --ink-200: #E4E8EC;   /* borders */
  --ink-100: #F1F4F7;   /* subtle fills */
  --ink-50:  #F8FAFC;   /* page tint */
  --white:   #FFFFFF;

  /* ---------- DARK SURFACES (for inverted sections) ---------- */
  --navy-900: #08121F;   /* near-black navy section bg */
  --navy-800: #0E1B2C;
  --navy-700: #16263B;

  /* ---------- SEMANTIC ---------- */
  --success: #16A34A;
  --success-bg: #E7F6EC;
  --warning: #F59E0B;
  --warning-bg: #FEF3DC;
  --danger:  #E5484D;
  --danger-bg: #FCE9EA;
  --info:    var(--tl-blue);
  --info-bg: var(--blue-50);

  /* ---------- SEMANTIC SURFACE ROLES ---------- */
  --bg:           var(--white);
  --bg-subtle:    var(--ink-50);
  --bg-muted:     var(--ink-100);
  --surface:      var(--white);
  --border:       var(--ink-200);
  --border-strong:var(--ink-300);
  --fg:           var(--ink-900);   /* primary text / headings */
  --fg-body:      var(--ink-700);   /* paragraph text */
  --fg-muted:     var(--ink-500);   /* secondary text */
  --fg-on-blue:   var(--white);
  --link:         var(--tl-blue);

  /* ---------- TYPE FAMILIES ---------- */
  --font-brand:   'Reznor Broken', 'Poppins', system-ui, sans-serif;  /* logo-voice display — H1/H2 marquee titles. Renders lowercase. */
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;    /* clean heading + UI workhorse (subheads, buttons, labels) */
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE (fluid-ish, fixed px) ---------- */
  --fs-display: 64px;  --lh-display: 1.04; /* @kind font */ --ls-display: -0.02em;
  --fs-h1: 48px;       --lh-h1: 1.08;      /* @kind font */ --ls-h1: -0.018em;
  --fs-h2: 36px;       --lh-h2: 1.14;      /* @kind font */ --ls-h2: -0.014em;
  --fs-h3: 26px;       --lh-h3: 1.22;      /* @kind font */ --ls-h3: -0.01em;
  --fs-h4: 20px;       --lh-h4: 1.3;       /* @kind font */ --ls-h4: -0.005em;
  --fs-lead: 20px;     --lh-lead: 1.55;    /* @kind font */
  --fs-body: 16px;     --lh-body: 1.62;    /* @kind font */
  --fs-sm: 14px;       --lh-sm: 1.55;      /* @kind font */
  --fs-xs: 12px;       --lh-xs: 1.45;      /* @kind font */
  --fs-eyebrow: 13px;  --ls-eyebrow: 0.14em;  /* uppercase label */

  /* ---------- WEIGHTS ---------- */
  --w-regular: 400; /* @kind font */
  --w-medium:  500; /* @kind font */
  --w-semibold:600; /* @kind font */
  --w-bold:    700; /* @kind font */
  --w-black:   800; /* @kind font */

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---------- RADII ---------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ---------- SHADOWS (soft, cool-tinted) ---------- */
  --sh-xs: 0 1px 2px rgba(16, 38, 64, 0.06);
  --sh-sm: 0 2px 8px rgba(16, 38, 64, 0.07);
  --sh-md: 0 8px 24px rgba(16, 38, 64, 0.09);
  --sh-lg: 0 20px 48px rgba(16, 38, 64, 0.12);
  --sh-blue: 0 10px 30px rgba(12, 155, 255, 0.30);   /* glow under primary CTAs */

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — apply with .tl-prose or use as ref
   ============================================================ */
.tl-display {
  font-family: var(--font-brand); font-weight: var(--w-bold);
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); color: var(--fg); text-wrap: balance;
}
h1, .tl-h1 {
  font-family: var(--font-brand); font-weight: var(--w-bold);
  font-size: var(--fs-h1); line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1); color: var(--fg); text-wrap: balance;
}
h2, .tl-h2 {
  font-family: var(--font-brand); font-weight: var(--w-semibold);
  font-size: var(--fs-h2); line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2); color: var(--fg); text-wrap: balance;
}
h3, .tl-h3 {
  font-family: var(--font-display); font-weight: var(--w-semibold);
  font-size: var(--fs-h3); line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3); color: var(--fg);
}
h4, .tl-h4 {
  font-family: var(--font-display); font-weight: var(--w-semibold);
  font-size: var(--fs-h4); line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4); color: var(--fg);
}
.tl-lead {
  font-family: var(--font-body); font-weight: var(--w-regular);
  font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--fg-body);
}
p, .tl-p {
  font-family: var(--font-body); font-weight: var(--w-regular);
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-body);
}
.tl-sm  { font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--fg-body); }
.tl-muted { color: var(--fg-muted); }
.tl-eyebrow {
  font-family: var(--font-body); font-weight: var(--w-bold);
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--tl-blue);
}
code, .tl-code {
  font-family: var(--font-mono); font-size: 0.92em;
  background: var(--ink-100); color: var(--ink-800);
  padding: 0.12em 0.4em; border-radius: var(--r-xs);
}
a, .tl-link { color: var(--link); text-decoration: none; }
a:hover, .tl-link:hover { text-decoration: underline; text-underline-offset: 3px; }