/* =============================================================
   datalab Brand Book — Stylesheet
   Single source of truth for design tokens, primitives & semantics.
   ============================================================= */

/* --- CSS CUSTOM PROPERTIES (DESIGN TOKENS) --- */
:root {
    /* — Core palette — */
    --midnight: #0B2254;
    --deep-blue: #18406C;
    --system-blue: #265D84;
    --teal: #4DAEB4;
    --teal-light: #5CCBCA;
    --teal-glow: #6AE7DF;
    --orange: #E98932;
    --orange-soft: #F4A968;
    --grey: #969696;
    --grey-soft: #C8CCD2;
    --white: #FFFFFF;
    --bg-light: #F6F8FC;
    --bg-tint: #EDF1F8;

    /* — Semantic intent (light mode) — */
    --intent-success: #2BB673;
    --intent-success-bg: rgba(43, 182, 115, 0.10);
    --intent-warning: #E9A23B;
    --intent-warning-bg: rgba(233, 162, 59, 0.10);
    --intent-danger:  #D04A45;
    --intent-danger-bg: rgba(208, 74, 69, 0.10);
    --intent-info:    var(--system-blue);
    --intent-info-bg: rgba(38, 93, 132, 0.10);

    /* — Surface tokens — */
    --current-bg: var(--bg-light);
    --current-text: var(--midnight);
    --card-bg: var(--white);
    --card-bg-alt: var(--bg-tint);
    --border-color: rgba(11, 34, 84, 0.08);
    --border-strong: rgba(11, 34, 84, 0.18);
    --muted-text: rgba(11, 34, 84, 0.70);

    /* — Brand gradients — */
    --gradient-horizon:   linear-gradient(135deg, #0B2254 0%, #18406C 60%, #265D84 100%);
    --gradient-aurora:    linear-gradient(135deg, #265D84 0%, #4DAEB4 50%, #6AE7DF 100%);
    --gradient-signal:    linear-gradient(135deg, #4DAEB4 0%, #6AE7DF 100%);
    --gradient-action:    linear-gradient(135deg, #E98932 0%, #F4A968 100%);
    --gradient-intel:     linear-gradient(135deg, #18406C 0%, #6AE7DF 100%);

    /* — Spacing scale (4pt base, 8pt rhythm) — */
    --space-1: 0.25rem;   /*  4px */
    --space-2: 0.5rem;    /*  8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.5rem;    /* 24px */
    --space-6: 2rem;      /* 32px */
    --space-7: 3rem;      /* 48px */
    --space-8: 4rem;      /* 64px */
    --space-9: 6rem;      /* 96px */
    --space-10: 8rem;     /* 128px */

    /* — Radius scale — */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 9999px;

    /* — Shadow scale (light mode) — */
    --shadow-xs: 0 1px 2px rgba(11, 34, 84, 0.06);
    --shadow-sm: 0 2px 6px rgba(11, 34, 84, 0.08);
    --shadow-md: 0 6px 18px rgba(11, 34, 84, 0.10);
    --shadow-lg: 0 20px 40px rgba(11, 34, 84, 0.12);
    --shadow-glow: 0 0 24px rgba(106, 231, 223, 0.25);
    --shadow-glow-strong: 0 0 40px rgba(106, 231, 223, 0.45);

    /* — Motion — */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-emphasis: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-out:      cubic-bezier(0.0, 0, 0.2, 1);
    --duration-instant: 80ms;
    --duration-fast:    160ms;
    --duration-base:    240ms;
    --duration-slow:    400ms;
    --duration-page:    800ms;

    /* — Focus & a11y — */
    --focus-ring: 2px solid var(--teal-glow);
    --focus-ring-offset: 2px;

    /* — Z-index scale — */
    --z-base: 1;
    --z-raised: 10;
    --z-sticky: 50;
    --z-overlay: 100;
    --z-modal: 200;
    --z-toast: 1000;

    /* — Typography scale (clamp-based responsive) — */
    --font-display:  clamp(3rem, 6vw + 1rem, 6rem);   /* 48–96 */
    --font-h1:       clamp(2.25rem, 4vw + 1rem, 4.5rem);
    --font-h2:       clamp(1.75rem, 2.5vw + 1rem, 3rem);
    --font-h3:       clamp(1.375rem, 1.5vw + 0.75rem, 2rem);
    --font-h4:       1.25rem;
    --font-h5:       1.125rem;
    --font-body-lg:  1.125rem;
    --font-body:     1rem;
    --font-body-sm:  0.875rem;
    --font-caption:  0.75rem;
    --font-label:    0.65rem;
    --leading-tight: 1.1;
    --leading-snug:  1.3;
    --leading-base:  1.6;
    --leading-loose: 1.8;
}

.dark-mode {
    --current-bg: var(--midnight);
    --current-text: var(--white);
    --card-bg: rgba(255, 255, 255, 0.04);
    --card-bg-alt: rgba(255, 255, 255, 0.06);
    --border-color: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.22);
    --muted-text: rgba(255, 255, 255, 0.55);

    /* Semantic intent shifts brighter in dark mode */
    --intent-success:    #4FD191;
    --intent-success-bg: rgba(79, 209, 145, 0.12);
    --intent-warning:    #F4B95C;
    --intent-warning-bg: rgba(244, 185, 92, 0.12);
    --intent-danger:     #E76A65;
    --intent-danger-bg:  rgba(231, 106, 101, 0.12);
    --intent-info:       var(--teal-glow);
    --intent-info-bg:    rgba(106, 231, 223, 0.12);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* --- A11y: focus-visible ring shared across primitives --- */
*:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: 6px;
}

/* --- A11y: respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- BASE --- */
body {
    background-color: var(--current-bg);
    color: var(--current-text);
    font-family: 'Inter', sans-serif;
    transition: background-color 0.4s ease, color 0.4s ease;
    line-height: 1.6;
}

/* --- GLOBAL BRAND TYPOGRAPHY --- */
h1, .h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: var(--font-h1); font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; }
h2, .h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: var(--font-h2); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
h3, .h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: var(--font-h3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
h4, .h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: var(--font-h4); font-weight: 700; }
h5, .h5 { font-family: 'Inter', sans-serif;             font-size: var(--font-h5); font-weight: 700; }

.label-caps  { font-family: 'Inter', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.65rem; }
.body-light  { font-family: 'Inter', sans-serif; font-weight: 300; }
.body-regular{ font-family: 'Inter', sans-serif; font-weight: 400; }
.body-medium { font-family: 'Inter', sans-serif; font-weight: 500; }

/* --- HERO --- */
.horizon-hero {
    position: relative;
    background:
        radial-gradient(circle at 72% 44%, rgba(106, 231, 223, .34), transparent 13%),
        radial-gradient(circle at 82% 62%, rgba(233, 137, 50, .18), transparent 9%),
        linear-gradient(120deg, rgba(11, 34, 84, 1) 0%, rgba(11, 34, 84, .96) 34%, rgba(24, 64, 108, .9) 62%, rgba(38, 93, 132, .82) 100%);
    color: var(--white);
    overflow: hidden;
}

.horizon-hero::before {
    content: "";
    position: absolute;
    z-index: 1;
    right: -6%;
    bottom: 0;
    width: 72%;
    height: 58%;
    background:
        linear-gradient(156deg, transparent 0 34%, rgba(255,255,255,.05) 34.2% 35%, transparent 35.2%),
        linear-gradient(148deg, transparent 0 42%, rgba(106, 231, 223, .16) 42.2% 43%, transparent 43.2%),
        linear-gradient(154deg, transparent 0 52%, rgba(2, 10, 28, .9) 52.2% 100%);
    clip-path: polygon(0 72%, 18% 40%, 30% 56%, 47% 18%, 58% 42%, 72% 24%, 100% 60%, 100% 100%, 0 100%);
    opacity: .94;
}

.data-grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(106, 231, 223, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(106, 231, 223, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    perspective: 1000px;
    transform: rotateX(60deg) translateY(-100px);
    opacity: 0.3;
}

/* --- GLASS CARD --- */
.glass-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
/* Light-mode lift: shadow needed so the card reads off the page */
body:not(.dark-mode) .glass-card { box-shadow: 0 4px 24px rgba(11, 34, 84, 0.07); }
body:not(.dark-mode) .glass-card:hover { box-shadow: 0 8px 32px rgba(11, 34, 84, 0.12); transform: translateY(-3px); }
/* Tinted variants */
.glass-card-teal {
    background: rgba(106, 231, 223, 0.06);
    border: 1px solid rgba(106, 231, 223, 0.18);
    border-radius: 28px;
}
.glass-card-dark {
    background: linear-gradient(135deg, #18406C, #0F2E56);
    border: 1px solid rgba(106, 231, 223, 0.15);
    border-radius: 28px;
    color: var(--white);
}

/* --- BUTTONS --- */
.btn-base,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 32px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: none;
    text-decoration: none;
}

.btn-primary { background: var(--orange); color: var(--white); box-shadow: 0 10px 30px rgba(233, 137, 50, .2); }
.btn-primary:hover  { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(233, 137, 50, .35); filter: brightness(1.05); }
.btn-primary:active { transform: translateY(-1px); }

/* .btn-secondary is the brand spec; .btn-ghost is an alias used in some site components */
.btn-secondary,
.btn-ghost { background: transparent; border: 2px solid var(--teal-glow); color: var(--teal-glow); }
.btn-secondary:hover,
.btn-ghost:hover { background: var(--teal-glow); color: var(--midnight); box-shadow: 0 0 25px rgba(106, 231, 223, 0.4); }

/* --- DARK SURFACE UTILITY ---
   Apply to any hardcoded dark-background container to ensure body text
   stays readable regardless of the page's light/dark mode toggle. */
.dark-surface { color: var(--white); }
.dark-surface .body-light,
.dark-surface .body-regular,
.dark-surface .body-medium,
.dark-surface p,
.dark-surface li { color: rgba(255, 255, 255, 0.8); }
.dark-surface h1,
.dark-surface h2,
.dark-surface h3,
.dark-surface h4 { color: var(--white); }

/* --- FORM ELEMENTS --- */
input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
select { accent-color: #4DAEB4; }
select option { background-color: #4DAEB4; color: #FFFFFF; }
select option:checked,
select option:hover { background-color: #4DAEB4; color: #FFFFFF; }

/* --- TAGS & BADGES ---
   Use these semantic classes instead of inline styles for consistent
   tag appearance across light and dark modes.

   .tag-teal   → Primary category / data label  (Teal on tinted bg)
   .tag-orange → Action / status / highlight     (Orange on tinted bg)
   .tag-ghost  → Metadata / neutral / secondary  (muted, adapts to mode)
   .tag-dark   → Tool badge with midnight background (always dark) */
.tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.tag-teal   { background: rgba(77,174,180,0.12); color: #4DAEB4; border-color: rgba(77,174,180,0.25); }
.tag-orange { background: rgba(233,137,50,0.10); color: #E98932; border-color: rgba(233,137,50,0.25); }
.tag-ghost  { background: rgba(11,34,84,0.06); color: var(--current-text); border-color: rgba(11,34,84,0.10); opacity: 0.65; }
.tag-dark   { background: #0B2254; color: #6AE7DF; border-color: rgba(106,231,223,0.30); }
.tag-dark.tag-video { color: #E98932; border-color: rgba(233,137,50,0.30); }

.dark-mode .tag-ghost  { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); }
.dark-mode .tag-teal   { background: rgba(106,231,223,0.12); color: #6AE7DF; border-color: rgba(106,231,223,0.25); }

/* --- TAG: GHOST TEAL ---
   Outlined pill with a leading teal dot. Used in dark surfaces such as the
   featured partner card. Slightly larger and bolder than the standard .tag.
   Usage: <span class="tag-ghost-teal">Elite Partner</span> */
.tag-ghost-teal {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.55rem 1.25rem;
    border-radius: 999px;
    background: transparent;
    color: var(--teal-glow);
    border: 1.5px solid rgba(106,231,223,0.45);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.tag-ghost-teal::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal-glow);
    flex-shrink: 0;
}

/* =============================================================
   REUSABLE COMPONENT CLASSES
   These classes eliminate repeated inline styles across all partials.
   Non-developers: add these class names to HTML elements directly
   instead of writing style="" attributes.
   ============================================================= */

/* --- SECTION HEADER ---
   Standard two-column section title block used at the top of every section.
   Left: large heading. Right: short description.
   Usage: <div class="section-header"> <h2>Title</h2> <p class="section-tagline">…</p> </div> */
.section-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    margin-bottom: 4rem;  /* 64px — consistent across all sections */
}
@media (min-width: 768px) {
    .section-header { flex-direction: row; }
}
.section-tagline {
    max-width: 28rem;
    opacity: 0.75;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.875rem;
}

/* --- COMPARISON PANELS (Design System section) ---
   Used for every light/dark side-by-side row.
   .panel-light = left column (light background)
   .panel-dark  = right column (dark background)
   Usage: <div class="panel-light"> … </div> */
.panel-light {
    background: #F6F8FC;
    border: 1px solid rgba(11, 34, 84, 0.08);
    border-radius: 1rem;
    padding: 1.5rem;
    /* Force dark text regardless of page mode — panel-light is always a light surface */
    color: var(--midnight);
    --current-text: var(--midnight);
}
.panel-light h1, .panel-light h2, .panel-light h3, .panel-light h4, .panel-light h5,
.panel-light p, .panel-light li, .panel-light span, .panel-light code,
.panel-light .label-caps, .panel-light .body-light, .panel-light .body-regular, .panel-light .body-medium {
    color: var(--midnight);
}
.panel-light .text-teal { color: #4DAEB4; }
.panel-light .text-orange { color: #E98932; }
.panel-light .text-teal-glow { color: #4DAEB4; } /* teal-glow has poor contrast on light — downshift */
.panel-dark {
    background: linear-gradient(145deg, #18406C, #122e56);
    border: 1px solid rgba(106, 231, 223, 0.15);
    border-radius: 1rem;
    padding: 1.5rem;
}

/* --- PANEL LABEL ---
   The small dividing header at the top of each comparison panel.
   Always pair .panel-label with --light or --dark modifier.
   Usage: <p class="panel-label panel-label--light">Row Title</p> */
.panel-label {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.6rem;
    margin-bottom: 1rem;
    padding-bottom: 6px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
.panel-label--light {
    color: rgba(11, 34, 84, 0.5);
    border-bottom-color: rgba(11, 34, 84, 0.1);
}
.panel-label--dark {
    color: rgba(106, 231, 223, 0.8);
    border-bottom-color: rgba(106, 231, 223, 0.2);
}

/* --- PANEL NOTE ---
   Small descriptive text at the bottom of a comparison panel.
   Usage: <p class="panel-note panel-note--light">…</p> */
.panel-note {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.7rem;
    margin-top: 8px;
}
.panel-note--light { color: #0B2254; opacity: 0.5; }
.panel-note--dark  { color: rgba(255, 255, 255, 0.4); }

/* --- VALUE CARD ---
   Light-background card used for team principals and feature items.
   Same visual as .panel-light but semantic name for content context.
   Usage: <div class="value-card"> … </div> */
.value-card {
    background: var(--bg-light);
    border: 1px solid rgba(11, 34, 84, 0.08);
    border-radius: 1rem;
    padding: 1.5rem;
}
.dark-mode .value-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

/* --- ICON BADGE ---
   Rounded square containing a symbol or icon character.
   Pair with --teal (primary), --orange (highlight), or --system (engineering).
   Usage: <div class="icon-badge icon-badge--teal">✓</div> */
.icon-badge {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 700;
    border: 1px solid transparent;
}
.icon-badge--teal   { background: rgba(77, 174, 180, 0.12); color: #4DAEB4;  border-color: rgba(77, 174, 180, 0.2); }
.icon-badge--orange { background: rgba(233, 137, 50, 0.10); color: #E98932;  border-color: rgba(233, 137, 50, 0.2); }
.icon-badge--system { background: rgba(38, 93, 132, 0.08);  color: #265D84;  border-color: rgba(38, 93, 132, 0.15); }

/* --- PILLAR CARD ---
   Teal-tinted card used for strategic pillars (Easy / Trusted / Connected).
   Designed for use on dark backgrounds only.
   Usage: <div class="pillar-card"> … </div> */
.pillar-card {
    background: rgba(106, 231, 223, 0.08);
    border: 1px solid rgba(106, 231, 223, 0.2);
    border-radius: 1rem;
    padding: 1.5rem;
}

/* --- BRAND HEADING (inline) ---
   Apply to <p> or <span> when Plus Jakarta Sans bold style is needed
   but a heading tag (h1–h4) is not semantically correct.
   Usage: <p class="brand-heading text-2xl">…</p> */
.brand-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

/* --- MONO VALUE ---
   Monospace text for displaying code values, hex colours, CSS tokens.
   Usage: <span class="mono-value">#6AE7DF</span> */
.mono-value {
    font-family: monospace;
    font-size: 0.6rem;
}

/* --- PROMPT PREVIEW ---
   Fixed-height image preview area at the top of AI prompt cards.
   Usage: <div class="prompt-preview" style="background:…"> … </div> */
.prompt-preview {
    position: relative;
    overflow: hidden;
    height: 220px;
}

/* --- PROMPT PREVIEW OVERLAY ---
   Gradient fade used over images in prompt preview areas.
   Usage: <div class="prompt-preview-overlay"></div> inside .prompt-preview */
.prompt-preview-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(to top, rgba(11, 34, 84, 0.95), transparent);
}

/* --- PROMPT CARD BODY ---
   Standard content area below a prompt preview image.
   Usage: <div class="prompt-card-body"> … </div> */
.prompt-card-body {
    padding: 1.5rem;
}

/* --- PROMPT CODE BLOCK ---
   Clickable monospace block containing the copyable prompt text.
   Usage: <div class="prompt-code-block" onclick="…">…</div> */
.prompt-code-block {
    border-radius: 0.75rem;
    padding: 1rem;
    cursor: pointer;
    margin-bottom: 0.75rem;
    font-family: monospace;
    font-size: 0.75rem;
    line-height: 1.6;
    background: #F6F8FC;
    border: 1px solid rgba(11, 34, 84, 0.08);
    color: #0B2254;
    transition: border-color 0.3s ease;
}
.prompt-code-block:hover { border-color: rgba(106, 231, 223, 0.5); }

/* --- PROMPT USE LABEL ---
   Top-right label on prompt cards showing the intended use (e.g. "Hero / Brand")
   Usage: <span class="prompt-use-label">Hero / Brand</span> */
.prompt-use-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--current-text);
    opacity: 0.35;
}

/* --- GRADIENT SHOWCASE --- */
.gradient-box {
    height: 100px;
    border-radius: 16px;
    cursor: pointer;
    position: relative;
    transition: transform 0.3s;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.gradient-box:hover { transform: scale(1.02); }
.gradient-box .copy-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    color: white;
    font-weight: bold;
    font-size: 10px;
}
.gradient-box:hover .copy-overlay { opacity: 1; }

/* --- ICON TILE ---
   Clickable square tile used in the icon library grid.
   Each tile receives CSS custom properties via inline style:
     --tile-bg    e.g. rgba(77,174,180,0.10)
     --tile-color e.g. #4DAEB4
   Usage:
   <button class="icon-tile" style="--tile-bg:…;--tile-color:…;">
     <div class="icon-tile-bg"><svg class="icon-svg">…</svg></div>
     <span class="icon-label">Bar Chart</span>
     <span class="icon-copied">Copied!</span>
   </button> */
.icon-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    color: var(--tile-color, #4DAEB4);
}
.icon-tile-bg {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    background: var(--tile-color, #4DAEB4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.icon-tile:hover .icon-tile-bg {
    filter: brightness(1.12);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--tile-color, #4DAEB4) 40%, transparent);
}
.icon-svg {
    width: 28px;
    height: 28px;
    color: #FFFFFF;
    stroke: #FFFFFF;
    display: block;
}
.icon-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--current-text);
    opacity: 0.55;
    text-align: center;
    max-width: 60px;
    line-height: 1.3;
}
.icon-copied {
    display: none;
    position: absolute;
    bottom: -1.4rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', sans-serif;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--teal-glow);
    white-space: nowrap;
}
.icon-tile.copied .icon-copied { display: block; }
.icon-tile.copied .icon-label  { opacity: 0; }

/* --- LOGO USAGE --- */
.incorrect-usage {
    filter: grayscale(1) opacity(0.5);
    border: 2px dashed #ff4d4d !important;
    position: relative;
}
.incorrect-usage::before {
    content: '✕';
    position: absolute;
    top: -10px;
    right: -10px;
    background: #ff4d4d;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 10;
}

/* --- INDUSTRY CARDS --- */
.industry-card {
    height: 320px;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, var(--midnight), var(--deep-blue));
}
.industry-card::after {
    content: "";
    position: absolute;
    inset: auto -10% 0 -10%;
    height: 58%;
    background: rgba(3, 12, 34, .62);
    clip-path: polygon(0 72%, 18% 45%, 33% 62%, 52% 20%, 70% 56%, 100% 30%, 100% 100%, 0 100%);
}

/* --- ANIMATION --- */
.fade-in { animation: fadeIn 0.8s ease-out forwards; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- CHART --- */
.chart-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
}

/* --- BUG ICON --- */
.bug-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: conic-gradient(from 30deg, var(--teal-glow), var(--teal), var(--orange), var(--teal-glow));
    position: relative;
    box-shadow: 0 0 24px rgba(106, 231, 223, .55);
    display: inline-block;
}
.bug-fallback::after {
    content: "";
    position: absolute;
    inset: 8px;
    background: var(--midnight);
    border-radius: 50%;
    transition: background 0.4s ease;
}
.light-mode .bug-fallback::after { background: var(--white); }

/* --- SCROLLBAR --- */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: var(--current-bg); }
::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 10px; }

/* --- TYPOGRAPHY LAB UTILITIES --- */
.type-specimen { font-size: clamp(2rem, 8vw, 4rem); border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; }
.type-details  { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; margin-top: 1rem; }
.type-details div p:first-child { opacity: 0.4; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.type-details div p:last-child  { font-weight: 600; font-size: 0.85rem; }

/* --- SPACING ANNOTATION LABEL ---
   Used in the Spacing section live demo only.
   A small rectangular label that sits at the top-left of an annotated block.
   Unlike .tag it does not use border-radius:999px, so text stays readable.
   Usage: <span class="spacing-anno spacing-anno--orange">Label text</span> */
.spacing-anno {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    position: absolute;
    top: -11px;
    left: 12px;
}
.spacing-anno--orange {
    background: rgba(233,137,50,0.15);
    color: #E98932;
    border: 1px solid rgba(233,137,50,0.35);
}
.spacing-anno--teal {
    background: rgba(77,174,180,0.12);
    color: #4DAEB4;
    border: 1px solid rgba(77,174,180,0.30);
}

/* --- BRAND TABLE ---
   Standard table class for all data tables in the brand book.
   Handles thead background, alternating rows, borders, and hover
   in both light and dark mode automatically.

   Usage:
   <table class="brand-table">
     <thead><tr><th class="p-4">Column</th></tr></thead>
     <tbody><tr><td class="p-4">Value</td></tr></tbody>
   </table>

   For numeric / right-aligned columns, add class="text-right" to th and td.
   Good values (green): add style="color:#6AE7DF;font-weight:700"
   Alert values (orange): add style="color:#E98932;font-weight:700" */

.brand-table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}
.brand-table thead tr {
    background: rgba(11, 34, 84, 0.05);
    border-bottom: 1px solid var(--border-color);
}
.dark-mode .brand-table thead tr {
    background: rgba(106, 231, 223, 0.06);
}
.brand-table th {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.6rem;
    color: var(--current-text);
    opacity: 0.5;
}
.brand-table tbody td {
    border-bottom: 1px solid var(--border-color);
}
.brand-table tbody tr:last-child td {
    border-bottom: none;
}
.brand-table tbody tr:nth-child(even) {
    background: rgba(77, 174, 180, 0.04);
}
.dark-mode .brand-table tbody tr:nth-child(even) {
    background: rgba(106, 231, 223, 0.04);
}
.brand-table tbody tr {
    transition: background 0.15s ease;
}
.brand-table tbody tr:hover {
    background: rgba(77, 174, 180, 0.08);
}
.dark-mode .brand-table tbody tr:hover {
    background: rgba(106, 231, 223, 0.07);
}

/* --- COLOUR UTILITIES ---
   Apply these to any element that needs a brand colour on its text.
   Usage: <span class="text-teal-glow">highlight</span> */
.text-teal-glow { color: var(--teal-glow); }   /* #6AE7DF — hero highlights, accent spans */
.text-teal      { color: var(--teal); }         /* #4DAEB4 — primary teal */
.text-orange    { color: var(--orange); }        /* #E98932 — CTA / warning / sub-labels */
.text-midnight  { color: var(--midnight); }      /* #0B2254 — primary dark text */
.text-white     { color: var(--white); }
.text-muted     { color: var(--current-text); opacity: 0.55; }

/* --- WORDMARK THEME SWITCHING --- */
.wordmark-white { display: none; }
.wordmark-dark  { display: block; }
.dark-mode .wordmark-white { display: block; }
.dark-mode .wordmark-dark  { display: none; }

/* --- NAVIGATION DROPDOWNS ---
   .nav-group          = wrapper div — hover triggers the dropdown
   .nav-group-trigger  = the clickable button label
   .nav-chevron        = small arrow SVG inside the trigger
   .nav-dropdown       = invisible positioned container
   .nav-dropdown-panel = the visible glass panel
   .nav-dropdown-item  = each link row inside the panel

   Usage:
   <div class="relative nav-group">
     <button class="nav-group-trigger">Label <svg class="nav-chevron">…</svg></button>
     <div class="nav-dropdown"><div class="nav-dropdown-panel">
       <a href="#section" class="nav-dropdown-item">Section</a>
     </div></div>
   </div> */

.nav-group-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.65);
    opacity: 1;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}
.nav-group:hover .nav-group-trigger {
    color: var(--white);
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
}
.nav-chevron {
    transition: transform 0.2s ease;
    opacity: 0.5;
}
.nav-group:hover .nav-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

.nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 6px;
    z-index: 100;
}
.nav-group:hover .nav-dropdown {
    display: block;
}

.nav-dropdown-panel {
    background: rgba(8, 18, 50, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(106, 231, 223, 0.14);
    border-radius: 14px;
    padding: 0.375rem;
    min-width: 148px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.nav-dropdown-item {
    display: block;
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
}
.nav-dropdown-item:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
}

/* =============================================================
   BRAND BOOK 2026 � semantic primitives
   ============================================================= */

/* --- Status pills (semantic intent) --- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-family: 'Inter', sans-serif;
    font-size: var(--font-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1;
}
.pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.pill-success { background: var(--intent-success-bg); color: var(--intent-success); }
.pill-warning { background: var(--intent-warning-bg); color: var(--intent-warning); }
.pill-danger  { background: var(--intent-danger-bg);  color: var(--intent-danger); }
.pill-info    { background: var(--intent-info-bg);    color: var(--intent-info); }

/* --- Form primitives --- */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.field-label {
    font-family: 'Inter', sans-serif;
    font-size: var(--font-caption);
    font-weight: 600;
    color: var(--current-text);
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.field-input,
.field-textarea,
.field-select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    color: var(--current-text);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: 'Inter', sans-serif;
    font-size: var(--font-body);
    transition: border-color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard);
}
.field-input:focus,
.field-textarea:focus,
.field-select:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(106, 231, 223, 0.18);
}
.field-help { font-size: var(--font-caption); color: var(--muted-text); }
.field-error { font-size: var(--font-caption); color: var(--intent-danger); font-weight: 600; }
.field--invalid .field-input { border-color: var(--intent-danger); }
.field--invalid .field-input:focus { box-shadow: 0 0 0 3px rgba(208, 74, 69, 0.20); }

/* --- Toggle / switch --- */
.switch {
    position: relative;
    display: inline-block;
    width: 44px; height: 24px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
    position: absolute; inset: 0;
    background: var(--border-strong);
    border-radius: var(--radius-pill);
    transition: background var(--duration-base) var(--ease-standard);
    cursor: pointer;
}
.switch-track::before {
    content: "";
    position: absolute;
    width: 18px; height: 18px;
    left: 3px; top: 3px;
    background: var(--white);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-base) var(--ease-emphasis);
}
.switch input:checked + .switch-track { background: var(--teal); }
.switch input:checked + .switch-track::before { transform: translateX(20px); }

/* --- Table --- */
.brand-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-body-sm);
}
.brand-table th,
.brand-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.brand-table th {
    font-family: 'Inter', sans-serif;
    font-size: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--muted-text);
    background: var(--card-bg-alt);
}
.brand-table tbody tr:hover { background: var(--card-bg-alt); }
.brand-table code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.85em;
    color: var(--teal);
    background: rgba(77, 174, 180, 0.10);
    padding: 2px 6px;
    border-radius: 4px;
}

/* --- KPI tile (data viz primitive) --- */
.kpi-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard),
                transform var(--duration-base) var(--ease-emphasis);
}
.kpi-tile:hover {
    border-color: var(--teal-glow);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}
.kpi-tile-label {
    font-family: 'Inter', sans-serif;
    font-size: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--muted-text);
    font-weight: 600;
}
.kpi-tile-value {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--current-text);
}
.kpi-tile-delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-caption);
    font-weight: 700;
}
.kpi-tile-delta.up   { color: var(--intent-success); }
.kpi-tile-delta.down { color: var(--intent-danger); }

/* --- Sparkline (inline chart) --- */
.sparkline {
    display: inline-block;
    width: 100%;
    max-width: 120px;
    height: 32px;
    vertical-align: middle;
}
.sparkline path { fill: none; stroke: var(--teal-glow); stroke-width: 1.5; }
.sparkline .area { fill: rgba(106, 231, 223, 0.12); stroke: none; }

/* --- AI surface card (chat / agent UI) --- */
.ai-surface {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    position: relative;
    overflow: hidden;
}
.ai-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gradient-aurora);
    opacity: 0.05;
    pointer-events: none;
}
.ai-message {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    align-items: flex-start;
}
.ai-message-avatar {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--gradient-aurora);
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 800;
}
.ai-message-avatar.user { background: var(--card-bg-alt); color: var(--current-text); }
.ai-message-body {
    font-family: 'Inter', sans-serif;
    font-size: var(--font-body-sm);
    line-height: var(--leading-base);
    color: var(--current-text);
}
.ai-typing {
    display: inline-flex; gap: 3px;
}
.ai-typing span {
    width: 6px; height: 6px;
    background: var(--teal-glow);
    border-radius: 50%;
    animation: ai-typing 1.4s ease-in-out infinite;
}
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* --- Imagery card (photo treatment) --- */
.imagery-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--gradient-horizon);
}
.imagery-card::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(11,34,84,0.7) 100%);
    pointer-events: none;
}
.imagery-card img { width: 100%; height: 100%; object-fit: cover; }
.imagery-card-label {
    position: absolute;
    left: var(--space-4); bottom: var(--space-4);
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-size: var(--font-caption);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    z-index: 1;
}

/* --- Logo clearspace diagram --- */
.clearspace-frame {
    position: relative;
    padding: var(--space-7);
    background: var(--card-bg);
    border: 1px dashed var(--teal);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
}
.clearspace-frame::before {
    content: "X";
    position: absolute;
    top: var(--space-2); left: var(--space-2);
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--font-caption);
    color: var(--teal);
    opacity: 0.6;
}

/* --- Token swatch (used in tables) --- */
.token-swatch {
    display: inline-block;
    width: 24px; height: 24px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    vertical-align: middle;
    margin-right: var(--space-2);
}

/* --- Motion demo blob --- */
.motion-demo {
    width: 48px; height: 48px;
    background: var(--gradient-signal);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-glow);
}
.motion-demo--ease-standard:hover { transition: transform var(--duration-base) var(--ease-standard); transform: translateX(80px); }
.motion-demo--ease-emphasis:hover { transition: transform var(--duration-base) var(--ease-emphasis); transform: translateX(80px); }
.motion-demo--ease-out:hover      { transition: transform var(--duration-slow) var(--ease-out);      transform: translateX(80px); }

/* --- Section anchor offset (for sticky nav) --- */
section[id] { scroll-margin-top: 6rem; }

/* =============================================================
   LIGHT-MODE CHART FRAME OVERRIDES
   Chart frames always stay dark in dark mode.
   In light mode they switch to white with midnight labels/grids.
   ============================================================= */

/* Frame background */
body:not(.dark-mode) .chart-frame {
    background: #FFFFFF !important;
    border-color: rgba(11, 34, 84, 0.14) !important;
    box-shadow: 0 2px 16px rgba(11, 34, 84, 0.07) !important;
}

/* All SVG text labels → midnight at 65% */
body:not(.dark-mode) .chart-frame svg text {
    fill: rgba(11, 34, 84, 0.65) !important;
}

/* Horizontal / vertical gridlines */
body:not(.dark-mode) .chart-frame svg line {
    stroke: rgba(11, 34, 84, 0.10) !important;
}

/* Radar / polar rings and axis spokes (stroke-only paths & polygons) */
body:not(.dark-mode) .chart-frame svg [fill="none"] {
    stroke: rgba(11, 34, 84, 0.10) !important;
}

/* White point outlines on scatter → transparent (brand dot colour shows through) */
body:not(.dark-mode) .chart-frame svg circle[stroke="#FFFFFF"] {
    stroke: transparent !important;
}