/* ═══════════════════════════════════════════════════════════════
   HastyLabs — Master Design System
   File: master.css
   Version: 3.0
   Updated: 2026-03-08

   NAMING CONVENTION
   ─────────────────
   Components use plain semantic names, no brand prefix.
   Variants are appended with a double-dash modifier: --mint, --sky…
   Utilities use a single-dash adjective pattern: .text-mint, .bg-card…

   COLOUR SYSTEM — 11 Pastel Accents
   ───────────────────────────────────
   Originals : mint  sky  lavender  peach  rose  butter
   Extended  : teal  coral  lilac  sage  amber

   USAGE
   ─────
   <link rel="stylesheet" href="/static/css/master.css">
   (or via staticfiles: /staticfiles/css/master.css)
═══════════════════════════════════════════════════════════════ */


/* ── 1. Design Tokens ────────────────────────────────────────── */
:root {

    /* ─ Backgrounds ─ */
    --bg: #13151a;
    /* page canvas        */
    --bg-card: #1c1f27;
    /* card / panel       */
    --bg-surface: #23272f;
    /* raised surface     */
    --bg-deep: #0e1014;
    /* inset / well       */
    --bg-overlay: rgba(19, 21, 26, 0.88);
    /* glassmorphic      */

    /* ─ Original Pastels ─ */
    --mint: #6edba8;
    --mint-dim: rgba(110, 219, 168, 0.13);
    --mint-glow: rgba(110, 219, 168, 0.30);

    --sky: #64caed;
    --sky-dim: rgba(100, 202, 237, 0.13);
    --sky-glow: rgba(100, 202, 237, 0.30);

    --lavender: #b388ff;
    --lavender-dim: rgba(179, 136, 255, 0.13);
    --lavender-glow: rgba(179, 136, 255, 0.30);

    --peach: #ff9a72;
    --peach-dim: rgba(255, 154, 114, 0.13);
    --peach-glow: rgba(255, 154, 114, 0.30);

    --rose: #f48fb1;
    --rose-dim: rgba(244, 143, 177, 0.13);
    --rose-glow: rgba(244, 143, 177, 0.30);

    --butter: #ffd166;
    --butter-dim: rgba(255, 209, 102, 0.13);
    --butter-glow: rgba(255, 209, 102, 0.30);

    /* ─ Extended Pastels ─ */
    --teal: #5ce0d8;
    --teal-dim: rgba(92, 224, 216, 0.13);
    --teal-glow: rgba(92, 224, 216, 0.30);

    --coral: #ff7f8e;
    --coral-dim: rgba(255, 127, 142, 0.13);
    --coral-glow: rgba(255, 127, 142, 0.30);

    --lilac: #d4a0ff;
    --lilac-dim: rgba(212, 160, 255, 0.13);
    --lilac-glow: rgba(212, 160, 255, 0.30);

    --sage: #8ed99f;
    --sage-dim: rgba(142, 217, 159, 0.13);
    --sage-glow: rgba(142, 217, 159, 0.30);

    --amber: #ffb347;
    --amber-dim: rgba(255, 179, 71, 0.13);
    --amber-glow: rgba(255, 179, 71, 0.30);

    /* ─ Semantic aliases ─ */
    --color-primary: var(--mint);
    --color-info: var(--sky);
    --color-special: var(--lavender);
    --color-warning: var(--peach);
    --color-danger: var(--rose);
    --color-active: var(--teal);
    --color-alert: var(--coral);
    --color-accent: var(--lilac);
    --color-calm: var(--sage);
    --color-warm: var(--amber);
    --color-new: var(--butter);

    /* ─ Text ─ */
    --text: #eaeaea;
    --text-soft: #a0a4af;
    --text-muted: #636875;
    --text-on-dark: #0e1014;
    --text-white: #ffffff;

    /* ─ Borders ─ */
    --border: rgba(255, 255, 255, 0.07);
    --border-bright: rgba(255, 255, 255, 0.15);
    --border-solid: #2e3340;

    /* ─ Shadows ─ */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);

    /* ─ Typography ─ */
    --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'DM Mono', 'ui-monospace', 'SFMono-Regular', monospace;

    /* ─ Border Radius ─ */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* ─ Layout ─ */
    --site-width: 1180px;
    --header-h: 68px;
}


/* ── 2. Reset ────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color: inherit;
}

img,
video {
    display: block;
    max-width: 100%;
}

button {
    font-family: var(--font-sans);
    cursor: pointer;
    border: none;
    background: none;
}


/* ── 3. Base / Body ──────────────────────────────────────────── */
body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

/* Enhanced background glow / vibe */
body::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at 50% 50%, rgba(100, 202, 237, 0.03) 0%, transparent 60%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}


/* ── 4. Logo ─────────────────────────────────────────────────── */
/*
  Usage:
    <a href="/" class="logo">
      <span class="logo__name">Hasty</span>
      <span class="logo__suffix">Labs</span>
    </a>
*/
.logo {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: -0.5px;
    line-height: 1;
    text-decoration: none;
    transition: opacity 0.2s;
}

.logo:hover {
    opacity: 0.85;
}

/* Primary brand word — mint to sky gradient */
.logo__name {
    background: linear-gradient(135deg, var(--mint) 0%, var(--sky) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

/* Suffix word — always white */
.logo__suffix {
    color: var(--text-white);
    font-weight: 800;
}


/* ── 5. Site Header ──────────────────────────────────────────── */
/*
  Usage:
    <header class="site-header">
      <div class="site-header__inner"> ... </div>
    </header>
*/
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    background: var(--bg-overlay);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), var(--shadow-sm);
}

.site-header__inner {
    max-width: var(--site-width);
    margin: 0 auto;
    padding: 0 2rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}


/* ── 6. Site Footer ──────────────────────────────────────────── */
/*
  Usage:
    <footer class="site-footer">
      <div class="site-footer__inner"> ... </div>
    </footer>
*/
.site-footer {
    background: var(--bg-deep);
    border-top: 1px solid var(--border);
    padding: 2.5rem 2rem;
    margin-top: auto;
    position: relative;
    z-index: 1;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--mint), var(--lavender), transparent);
    opacity: 0.4;
}

.site-footer__inner {
    max-width: var(--site-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.site-footer__copy {
    font-size: 0.8rem;
    color: var(--text-muted);
}


/* ── 7. Main Content Wrapper ─────────────────────────────────── */
.page-body {
    flex: 1;
    max-width: var(--site-width);
    width: 100%;
    margin: 0 auto;
    padding: 4rem 2rem 6rem;
    position: relative;
    z-index: 1;
}


/* ── 8. Navigation Pills ─────────────────────────────────────── */
/*
  Usage:
    <nav class="nav">
      <a href="#" class="nav__item active">Home</a>
      <a href="#" class="nav__item">About</a>
    </nav>
*/
.nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav__item {
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--text-soft);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    transition: background 0.18s, color 0.18s;
}

.nav__item:hover {
    background: var(--bg-surface);
    color: var(--text);
}

.nav__item.active {
    background: var(--mint-dim);
    color: var(--mint);
    box-shadow: inset 0 0 10px var(--mint-dim);
    border: 1px solid rgba(110, 219, 168, 0.2);
}


/* ── 9. Cards ────────────────────────────────────────────────── */
/*
  Usage:
    <div class="card card--mint">
      <div class="card__icon">🎨</div>
      <h3 class="card__title">Title</h3>
      <p class="card__body">Body text here.</p>
      <span class="card__tag">Label</span>
    </div>

  Variants: --mint --sky --lavender --peach --rose --butter
            --teal --coral --lilac --sage --amber --hero
*/
.card {
    --c-accent: var(--mint);
    --c-dim: var(--mint-dim);
    --c-glow: var(--mint-glow);

    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 2.25rem;
    margin-bottom: 2.5rem;
    /* Prevent cards from touching vertically */
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    position: relative;
    overflow: hidden;
}

/* Soft colour blob in top-left corner */
.card::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -60px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--c-dim);
    filter: blur(20px);
    pointer-events: none;
    opacity: 0.6;
    transition: all 0.3s;
}

.card:hover::before {
    width: 180px;
    height: 180px;
    opacity: 1;
}

/* Coloured accent bar on top edge */
.card::after {
    /* Only shows on color variants */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--c-accent);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transition: height 0.25s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--c-glow);
}

.card:hover::after {
    height: 4px;
}

/* Card colour variants (Manual Overrides) */
.card--mint {
    --c-accent: var(--mint);
    --c-dim: var(--mint-dim);
    --c-glow: var(--mint-glow);
}

.card--sky {
    --c-accent: var(--sky);
    --c-dim: var(--sky-dim);
    --c-glow: var(--sky-glow);
}

.card--lavender {
    --c-accent: var(--lavender);
    --c-dim: var(--lavender-dim);
    --c-glow: var(--lavender-glow);
}

.card--peach {
    --c-accent: var(--peach);
    --c-dim: var(--peach-dim);
    --c-glow: var(--peach-glow);
}

.card--rose {
    --c-accent: var(--rose);
    --c-dim: var(--rose-dim);
    --c-glow: var(--rose-glow);
}

.card--butter {
    --c-accent: var(--butter);
    --c-dim: var(--butter-dim);
    --c-glow: var(--butter-glow);
}

.card--teal {
    --c-accent: var(--teal);
    --c-dim: var(--teal-dim);
    --c-glow: var(--teal-glow);
}

.card--coral {
    --c-accent: var(--coral);
    --c-dim: var(--coral-dim);
    --c-glow: var(--coral-glow);
}

.card--lilac {
    --c-accent: var(--lilac);
    --c-dim: var(--lilac-dim);
    --c-glow: var(--lilac-glow);
}

.card--sage {
    --c-accent: var(--sage);
    --c-dim: var(--sage-dim);
    --c-glow: var(--sage-glow);
}

.card--amber {
    --c-accent: var(--amber);
    --c-dim: var(--amber-dim);
    --c-glow: var(--amber-glow);
}

/* Ensure the accent bar shows for both manual and auto-cycled cards */
.card[class*="card--"]::after,
.card:not([class*="card--"])::after {
    content: '';
}

/* ── Automatic Colour Rotation ── */
/* Cycles through 8 vibrant brand colors automatically, counting ONLY card elements */
.card:not([class*="card--"]):nth-child(8n+1 of .card) {
    --c-accent: var(--teal);
    --c-dim: var(--teal-dim);
    --c-glow: var(--teal-glow);
}

.card:not([class*="card--"]):nth-child(8n+2 of .card) {
    --c-accent: var(--coral);
    --c-dim: var(--coral-dim);
    --c-glow: var(--coral-glow);
}

.card:not([class*="card--"]):nth-child(8n+3 of .card) {
    --c-accent: var(--lilac);
    --c-dim: var(--lilac-dim);
    --c-glow: var(--lilac-glow);
}

.card:not([class*="card--"]):nth-child(8n+4 of .card) {
    --c-accent: var(--sage);
    --c-dim: var(--sage-dim);
    --c-glow: var(--sage-glow);
}

.card:not([class*="card--"]):nth-child(8n+5 of .card) {
    --c-accent: var(--amber);
    --c-dim: var(--amber-dim);
    --c-glow: var(--amber-glow);
}

.card:not([class*="card--"]):nth-child(8n+6 of .card) {
    --c-accent: var(--mint);
    --c-dim: var(--mint-dim);
    --c-glow: var(--mint-glow);
}

.card:not([class*="card--"]):nth-child(8n+7 of .card) {
    --c-accent: var(--sky);
    --c-dim: var(--sky-dim);
    --c-glow: var(--sky-glow);
}

.card:not([class*="card--"]):nth-child(8n+8 of .card) {
    --c-accent: var(--rose);
    --c-dim: var(--rose-dim);
    --c-glow: var(--rose-glow);
}


/* Hero: multi-colour rainbow bar across the top */
.card--hero {
    --c-dim: rgba(110, 219, 168, 0.08);
    --c-glow: rgba(110, 219, 168, 0.20);
}

.card--hero::after {
    background: linear-gradient(90deg,
            var(--mint) 0%,
            var(--sky) 18%,
            var(--lavender) 36%,
            var(--peach) 54%,
            var(--rose) 72%,
            var(--butter) 90%,
            var(--teal) 100%);
}

/* Card child elements */
.card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--c-dim);
    font-size: 1.35rem;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

.card__title {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 0.65rem;
    position: relative;
    z-index: 1;

    /* Lavender-to-Rose Glow Gradient */
    background: linear-gradient(110deg, var(--lavender) 0%, var(--rose) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.card__body {
    font-size: 0.88rem;
    color: var(--text-soft);
    line-height: 1.65;
    position: relative;
    z-index: 1;
}

.card__tag {
    display: inline-block;
    margin-top: 1rem;
    padding: 3px 10px;
    border-radius: var(--radius-xs);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--c-dim);
    color: var(--c-accent);
    position: relative;
    z-index: 1;
}


/* ── 10. Buttons ─────────────────────────────────────────────── */
/*
  Usage:
    <button class="btn btn--fill">Primary</button>
    <button class="btn btn--outline">Secondary</button>
    <button class="btn btn--ghost">Ghost</button>
  With colour:
    <button class="btn btn--fill btn--sky">Info Action</button>
*/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    white-space: nowrap;
}

.btn--fill {
    --btn-color: var(--mint);
    background: var(--btn-color);
    color: var(--text-on-dark);
    box-shadow: 0 4px 16px var(--mint-glow);
}

.btn--fill:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Colour overrides */
.btn--fill.btn--sky {
    --btn-color: var(--sky);
    box-shadow: 0 4px 16px var(--sky-glow);
}

.btn--fill.btn--lavender {
    --btn-color: var(--lavender);
    box-shadow: 0 4px 16px var(--lavender-glow);
}

.btn--fill.btn--peach {
    --btn-color: var(--peach);
    box-shadow: 0 4px 16px var(--peach-glow);
}

.btn--fill.btn--rose {
    --btn-color: var(--rose);
    box-shadow: 0 4px 16px var(--rose-glow);
}

.btn--fill.btn--teal {
    --btn-color: var(--teal);
    box-shadow: 0 4px 16px var(--teal-glow);
}

.btn--fill.btn--coral {
    --btn-color: var(--coral);
    box-shadow: 0 4px 16px var(--coral-glow);
}

.btn--fill.btn--amber {
    --btn-color: var(--amber);
    box-shadow: 0 4px 16px var(--amber-glow);
}

.btn--outline {
    background: transparent;
    border: 1.5px solid var(--border-bright);
    color: var(--text-soft);
}

.btn--outline:hover {
    border-color: var(--mint);
    color: var(--mint);
    background: var(--mint-dim);
}

.btn--ghost {
    background: transparent;
    color: var(--text-muted);
}

.btn--ghost:hover {
    background: var(--bg-surface);
    color: var(--text);
}

/* Sizes */
.btn--sm {
    padding: 7px 14px;
    font-size: 0.78rem;
}

.btn--lg {
    padding: 14px 30px;
    font-size: 1rem;
}


/* ── 11. Tags & Badges ───────────────────────────────────────── */
/*
  Usage:
    <span class="tag tag--mint">Success</span>
    <span class="badge badge--rose">Danger</span>
*/

/* Pill-shaped tag */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Square badge (mono font, used for status / code labels) */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Shared colour variants */
.tag--mint,
.badge--mint {
    background: var(--mint-dim);
    color: var(--mint);
}

.tag--sky,
.badge--sky {
    background: var(--sky-dim);
    color: var(--sky);
}

.tag--lavender,
.badge--lavender {
    background: var(--lavender-dim);
    color: var(--lavender);
}

.tag--peach,
.badge--peach {
    background: var(--peach-dim);
    color: var(--peach);
}

.tag--rose,
.badge--rose {
    background: var(--rose-dim);
    color: var(--rose);
}

.tag--butter,
.badge--butter {
    background: var(--butter-dim);
    color: var(--butter);
}

.tag--teal,
.badge--teal {
    background: var(--teal-dim);
    color: var(--teal);
}

.tag--coral,
.badge--coral {
    background: var(--coral-dim);
    color: var(--coral);
}

.tag--lilac,
.badge--lilac {
    background: var(--lilac-dim);
    color: var(--lilac);
}

.tag--sage,
.badge--sage {
    background: var(--sage-dim);
    color: var(--sage);
}

.tag--amber,
.badge--amber {
    background: var(--amber-dim);
    color: var(--amber);
}


/* ── 12. Hero Panel ──────────────────────────────────────────── */
/*
  Usage:
    <section class="panel">
      <div class="panel__eyebrow">Eyebrow</div>
      <h1 class="panel__title">Title <span class="gradient-text">here</span></h1>
      <p class="panel__desc">Description.</p>
    </section>
*/
.panel {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    padding: 3.5rem 4rem;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

/* Big soft radial-glow (the "oomph" blob) */
.panel::after {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--lavender-dim) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

/* Rainbow top stripe */
.panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            var(--mint) 0%,
            var(--sky) 20%,
            var(--lavender) 40%,
            var(--peach) 60%,
            var(--rose) 80%,
            var(--teal) 100%);
    z-index: 1;
}

.panel__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lavender-dim);
    color: var(--lavender);
    border-radius: var(--radius-xs);
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.panel__title {
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.15;
    margin-bottom: 1.25rem;
    color: var(--text);
}

.panel__desc {
    font-size: 1.05rem;
    color: var(--text-soft);
    line-height: 1.75;
    max-width: 560px;
}


/* ── 13. Stat Cards ──────────────────────────────────────────── */
/*
  Usage:
    <div class="stat stat--mint">
      <span class="stat__value">92%</span>
      <span class="stat__label">Completion</span>
    </div>
*/
.stat {
    --c-accent: var(--mint);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s, box-shadow 0.25s;
    position: relative;
    overflow: hidden;
}

.stat::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 3px;
    border-radius: 2px 2px 0 0;
    background: var(--c-accent);
}

.stat:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.stat--mint {
    --c-accent: var(--mint);
}

.stat--sky {
    --c-accent: var(--sky);
}

.stat--lavender {
    --c-accent: var(--lavender);
}

.stat--peach {
    --c-accent: var(--peach);
}

.stat--rose {
    --c-accent: var(--rose);
}

.stat--teal {
    --c-accent: var(--teal);
}

.stat__value {
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 0.4rem;
    color: var(--c-accent);
}

.stat__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}


/* ── 14. Colour Palette Blocks ───────────────────────────────── */
/*
  Usage:
    <div class="pal">
      <div class="pal__block pal__block--mint">
        <span class="pal__label">Mint</span>
        <span class="pal__hex">#6EDBA8</span>
      </div>
    </div>
*/
.pal {
    display: flex;
    gap: 1rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 180px;
    box-shadow: var(--shadow-md);
}

.pal__block {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.1rem;
    transition: flex 0.3s ease;
    cursor: default;
}

.pal__block:hover {
    flex: 1.6;
}

.pal__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}

.pal__hex {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 2px;
}

.pal__block--mint {
    background: linear-gradient(160deg, #8aedcc 0%, #6edba8 100%);
}

.pal__block--sky {
    background: linear-gradient(160deg, #91dcf2 0%, #64caed 100%);
}

.pal__block--lavender {
    background: linear-gradient(160deg, #d0b8ff 0%, #b388ff 100%);
}

.pal__block--peach {
    background: linear-gradient(160deg, #ffbc9e 0%, #ff9a72 100%);
}

.pal__block--rose {
    background: linear-gradient(160deg, #f9b5cc 0%, #f48fb1 100%);
}

.pal__block--butter {
    background: linear-gradient(160deg, #ffe08a 0%, #ffd166 100%);
}

.pal__block--teal {
    background: linear-gradient(160deg, #8aedea 0%, #5ce0d8 100%);
}

.pal__block--coral {
    background: linear-gradient(160deg, #ffaab5 0%, #ff7f8e 100%);
}

.pal__block--lilac {
    background: linear-gradient(160deg, #e3c0ff 0%, #d4a0ff 100%);
}

.pal__block--sage {
    background: linear-gradient(160deg, #b4e8c0 0%, #8ed99f 100%);
}

.pal__block--amber {
    background: linear-gradient(160deg, #ffcf80 0%, #ffb347 100%);
}


/* ── 15. Progress Bars ───────────────────────────────────────── */
/*
  Usage:
    <div class="progress">
      <div class="progress__fill progress__fill--mint" style="width:75%"></div>
    </div>
*/
.progress {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-deep);
    overflow: hidden;
}

.progress__fill {
    height: 100%;
    border-radius: var(--radius-pill);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress__fill--mint {
    background: var(--mint);
}

.progress__fill--sky {
    background: var(--sky);
}

.progress__fill--lavender {
    background: var(--lavender);
}

.progress__fill--peach {
    background: var(--peach);
}

.progress__fill--rose {
    background: var(--rose);
}

.progress__fill--teal {
    background: var(--teal);
}

.progress__fill--coral {
    background: var(--coral);
}

.progress__fill--lilac {
    background: var(--lilac);
}

.progress__fill--sage {
    background: var(--sage);
}

.progress__fill--amber {
    background: var(--amber);
}


/* ── 16. Typography ──────────────────────────────────────────── */
.page-title {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text-white);
    line-height: 1.1;
    margin-bottom: 0.75rem;
}

.page-title em {
    font-style: normal;
    background: linear-gradient(110deg, var(--mint) 0%, var(--sky) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-title__accent {
    color: var(--mint);
}

.page-subtitle {
    font-size: 0.9rem;
    color: var(--text-soft);
    margin-bottom: 1.75rem;
    line-height: 1.7;
}

.section-title {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
    line-height: 1.2;
}

.section-title em {
    font-style: normal;
    background: linear-gradient(110deg, var(--lavender) 0%, var(--rose) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-eyebrow {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

/* Gradient text utility */
.gradient-text {
    background: linear-gradient(135deg, var(--mint) 0%, var(--sky) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Dividers */
.divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
}

.section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 3rem 0 1.5rem;
}

.section-divider__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.section-divider__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border-solid) 0%, transparent 100%);
}


/* ── 17. Terminal Block ───────────────────────────────────────── */
/*
  Usage:
    <div class="terminal">
      <span class="terminal__prompt">$ </span>command
    </div>
*/
.terminal {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.83rem;
    color: var(--text-soft);
    line-height: 1.7;
    overflow-x: auto;
}

.terminal__prompt {
    color: var(--mint);
}

.terminal__output {
    color: var(--sky);
}

.terminal__comment {
    color: var(--text-muted);
}

.terminal__string {
    color: var(--peach);
}

.terminal__keyword {
    color: var(--lavender);
}


/* ── 18. Grid Layouts ────────────────────────────────────────── */
.grid {
    display: grid;
    gap: 2rem;
}

.grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2.5rem;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}


/* ── 19. Colour Utilities ────────────────────────────────────── */
.text-mint {
    color: var(--mint);
}

.text-sky {
    color: var(--sky);
}

.text-lavender {
    color: var(--lavender);
}

.text-peach {
    color: var(--peach);
}

.text-rose {
    color: var(--rose);
}

.text-butter {
    color: var(--butter);
}

.text-teal {
    color: var(--teal);
}

.text-coral {
    color: var(--coral);
}

.text-lilac {
    color: var(--lilac);
}

.text-sage {
    color: var(--sage);
}

.text-amber {
    color: var(--amber);
}

.text-soft {
    color: var(--text-soft);
}

.text-muted {
    color: var(--text-muted);
}

.text-white {
    color: var(--text-white);
}


/* ── 20. Spacing Utilities ───────────────────────────────────── */
.mt-1 {
    margin-top: 0.5rem;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.mt-4 {
    margin-top: 2rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

.mt-6 {
    margin-top: 3rem;
}

.mb-6 {
    margin-bottom: 3rem;
}

.mt-8 {
    margin-top: 4rem;
}

.mb-8 {
    margin-bottom: 4rem;
}

/* ── 23. Extra Vibrancy ────────────────────────────────────────── */
.gradient-heading {
    background: linear-gradient(135deg, var(--text-white) 30%, var(--mint) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.gradient-heading--special {
    background: linear-gradient(135deg, var(--text-white) 30%, var(--lavender) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}





/* ── 21. Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .page-body {
        padding: 2rem 1rem 4rem;
    }

    .panel {
        padding: 2rem 1.5rem;
        border-radius: var(--radius-lg);
    }

    .panel__title {
        font-size: 2rem;
    }

    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pal {
        height: 120px;
    }

    .site-header__inner {
        padding: 0 1rem;
    }
}

@media (max-width: 480px) {
    .stat-grid {
        grid-template-columns: 1fr;
    }

    .panel__title {
        font-size: 1.6rem;
    }

    .logo {
        font-size: 1.6rem;
    }
}


/* ── 22. Layout & Sidebar ────────────────────────────────────── */
.mobile-bar {
    display: none;
    height: 60px;
    padding: 0 1.5rem;
    background: var(--bg-overlay);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.hamburger {
    width: 32px;
    height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    z-index: 1100;
}

.hamburger__bar {
    width: 100%;
    height: 2px;
    background: var(--text-soft);
    border-radius: 1px;
    transition: all 0.3s;
}

.hamburger.is-open .hamburger__bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.is-open .hamburger__bar:nth-child(2) {
    opacity: 0;
}

.hamburger.is-open .hamburger__bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.sidebar-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 2.5rem 2rem;
    transition: transform 0.3s ease;
}

.sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--mint), var(--sky), transparent);
    opacity: 0.5;
}

.sidebar__brand {
    margin-bottom: 3rem;
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Space between groups */
}

.nav-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-group__title,
.nav-group__title--link {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 16px;
    margin-bottom: 6px;
    display: block;
    transition: color 0.2s;
}

.nav-group__title--link:hover {
    color: var(--mint);
}

.nav-group__title--link.active {
    color: var(--mint);
}

.sidebar__nav .nav__item {
    font-size: 0.95rem;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar__nav .nav__item--sub {
    font-size: 0.88rem;
    padding-left: 32px;
    color: var(--text-soft);
}

.sidebar__nav .nav__item.active {
    background: var(--mint-dim);
    color: var(--mint);
}

.main-wrapper {
    margin-left: 280px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    padding: 3rem 4rem;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .main-wrapper {
        margin-left: 0;
    }

    .mobile-bar {
        display: flex;
    }

    .main-content {
        padding: 2rem 1.5rem;
    }
}