/* ============================================================
   GENZ4GTM — ONLINE BRAND KIT
   Version 2026 · genz4gtm.com
   ============================================================
   This file is the single source of truth for the GENZ4GTM
   visual identity. Import it into any project to get:

   1. COLOR TOKENS          — all brand colors as CSS variables
   2. TYPOGRAPHY TOKENS     — fonts, sizes, weights, tracking
   3. SPACING & RADIUS      — layout tokens
   4. COLOR LOGIC SYSTEM    — rules for backgrounds, labels, icons
   5. LABEL COMPONENTS      — ready-to-use pill/badge classes
   6. ICON SYSTEM           — all original icons as SVG data URIs
   7. UTILITY CLASSES       — bg, text, border helpers
   8. COMPONENT PATTERNS    — post cards, badges, tags

   Usage:
     <link rel="stylesheet" href="genz4gtm_brand_kit.css">
   or
     @import url('genz4gtm_brand_kit.css');
   ============================================================ */


/* ============================================================
   SECTION 1 — COLOR TOKENS
   ============================================================
   Primary palette: the 4 core brand colors.
   Secondary palette: accent + expression colors.
   Background palette: dark canvas colors.
   ============================================================ */

:root {

  /* ── PRIMARY COLORS ── */
  --g4g-pink:        #FF4F9A;   /* Vibrant Pink   — primary brand color, CTAs, highlights */
  --g4g-yellow:      #FFD93D;   /* Bright Yellow  — energy, badges, brand symbol */
  --g4g-purple:      #2B0B3F;   /* Deep Purple    — primary dark, text on light */
  --g4g-white:       #FFFFFF;   /* White          — icons on dark, clean space */

  /* ── SECONDARY COLORS ── */
  --g4g-bubble:      #FDADE1;   /* Bubble Gum Pink — soft, community, culture content */
  --g4g-orange:      #FF6B3D;   /* Vibrant Orange  — events, energy, alerts */
  --g4g-mint:        #00FDBB;   /* Cyber Mint      — GTM/data, insights, growth */
  --g4g-cream:       #F5F0E8;   /* Smooth Cream    — neutral light, partner content */

  /* ── BACKGROUND COLORS ── */
  --g4g-bg-dark:     #1E0A2E;   /* Dark Purple     — primary dark background */
  --g4g-bg-green:    #113321;   /* Dark Green      — GTM growth background */
  --g4g-bg-purple:   #2B0B3F;   /* Deep Purple     — card/section background */

  /* ── SEMANTIC ALIASES ── */
  --g4g-primary:     var(--g4g-pink);
  --g4g-secondary:   var(--g4g-yellow);
  --g4g-dark:        var(--g4g-purple);
  --g4g-light:       var(--g4g-white);
  --g4g-accent-1:    var(--g4g-orange);
  --g4g-accent-2:    var(--g4g-mint);
  --g4g-accent-3:    var(--g4g-bubble);
  --g4g-neutral:     var(--g4g-cream);

  /* ── OPACITY VARIANTS ── */
  --g4g-pink-60:     rgba(255, 79, 154, 0.60);
  --g4g-pink-30:     rgba(255, 79, 154, 0.30);
  --g4g-pink-13:     rgba(255, 79, 154, 0.13);
  --g4g-yellow-60:   rgba(255, 217, 61, 0.60);
  --g4g-yellow-30:   rgba(255, 217, 61, 0.30);
  --g4g-purple-50:   rgba(43, 11, 63, 0.50);
  --g4g-white-70:    rgba(255, 255, 255, 0.70);
  --g4g-white-40:    rgba(255, 255, 255, 0.40);
  --g4g-white-20:    rgba(255, 255, 255, 0.20);
  --g4g-mint-20:     rgba(0, 253, 187, 0.20);
  --g4g-orange-20:   rgba(255, 107, 61, 0.20);
}


/* ============================================================
   SECTION 2 — TYPOGRAPHY TOKENS
   ============================================================
   Primary font: Poppins (Google Fonts)
   Fallback: Helvetica, Arial, sans-serif

   Import in your HTML:
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* ── FONT FAMILIES ── */
  --g4g-font-primary:   'Poppins', Helvetica, Arial, sans-serif;
  --g4g-font-mono:      'Courier New', Courier, monospace;

  /* ── FONT WEIGHTS ── */
  --g4g-weight-regular:   400;
  --g4g-weight-medium:    500;
  --g4g-weight-semibold:  600;
  --g4g-weight-bold:      700;
  --g4g-weight-extrabold: 800;

  /* ── FONT SIZES ── */
  --g4g-text-xs:    10px;   /* micro labels, footnotes */
  --g4g-text-sm:    12px;   /* captions, sub-labels */
  --g4g-text-base:  14px;   /* body text */
  --g4g-text-md:    16px;   /* UI labels, card text */
  --g4g-text-lg:    20px;   /* section headings */
  --g4g-text-xl:    24px;   /* page headings */
  --g4g-text-2xl:   32px;   /* hero headings */
  --g4g-text-3xl:   48px;   /* display headings */

  /* ── LETTER SPACING ── */
  --g4g-tracking-tight:   -0.02em;
  --g4g-tracking-normal:   0em;
  --g4g-tracking-wide:     0.05em;
  --g4g-tracking-wider:    0.08em;
  --g4g-tracking-widest:   0.12em;
  --g4g-tracking-brand:    0.10em;   /* used in GENZ4GTM wordmark */

  /* ── LINE HEIGHTS ── */
  --g4g-leading-tight:   1.2;
  --g4g-leading-normal:  1.5;
  --g4g-leading-loose:   1.8;
}


/* ============================================================
   SECTION 3 — SPACING & RADIUS TOKENS
   ============================================================ */

:root {
  /* ── SPACING SCALE ── */
  --g4g-space-1:   4px;
  --g4g-space-2:   8px;
  --g4g-space-3:   12px;
  --g4g-space-4:   16px;
  --g4g-space-5:   20px;
  --g4g-space-6:   24px;
  --g4g-space-8:   32px;
  --g4g-space-10:  40px;
  --g4g-space-12:  48px;
  --g4g-space-16:  64px;

  /* ── BORDER RADIUS ── */
  --g4g-radius-sm:   4px;    /* small tags, micro badges */
  --g4g-radius-md:   8px;    /* buttons, input fields */
  --g4g-radius-lg:   12px;   /* cards, icon containers */
  --g4g-radius-xl:   16px;   /* large cards */
  --g4g-radius-2xl:  24px;   /* hero cards */
  --g4g-radius-pill: 999px;  /* pill labels, tags */

  /* ── ICON SIZES ── */
  --g4g-icon-xs:   16px;   /* inline text icons */
  --g4g-icon-sm:   20px;   /* compact UI */
  --g4g-icon-md:   24px;   /* standard UI */
  --g4g-icon-lg:   32px;   /* feature icons */
  --g4g-icon-xl:   48px;   /* hero icons */
  --g4g-icon-2xl:  64px;   /* display icons */
  --g4g-icon-3xl:  80px;   /* max display */

  /* ── STROKE WIDTHS ── */
  --g4g-stroke-thin:    1px;
  --g4g-stroke-normal:  1.5px;
  --g4g-stroke-medium:  2px;
  --g4g-stroke-thick:   2.5px;
}


/* ============================================================
   SECTION 4 — COLOR LOGIC SYSTEM
   ============================================================
   The GENZ4GTM color logic defines which background color
   pairs with which icon color, label color, and text color.
   This is the core rule set for all creatives.

   RULE STRUCTURE:
   Background → Icon color → Label color → Text color

   ┌─────────────────────────────────────────────────────────┐
   │  BG COLOR     │ ICON COLOR │ LABEL COLOR  │ TEXT COLOR  │
   ├─────────────────────────────────────────────────────────┤
   │  Pink         │ Yellow     │ Yellow       │ White       │
   │  Purple       │ Yellow     │ Yellow/Pink  │ White       │
   │  Orange       │ White      │ White        │ White       │
   │  Mint         │ Dark Green │ Dark Green   │ Dark Purple │
   │  Bubble Gum   │ Purple     │ Purple       │ Purple      │
   │  Cream        │ Purple     │ Purple       │ Purple      │
   │  Dark (bg)    │ Pink/Yellow│ Pink/Yellow  │ White       │
   │  Dark Green   │ Mint/Yellow│ Mint         │ White       │
   └─────────────────────────────────────────────────────────┘

   LABEL COLORS ALLOWED:
   Pink, Yellow, Purple, Orange ✓ (NEW), Mint ✓ (NEW),
   Bubble Gum, Cream, White

   NEVER:
   - Pink label on Pink background
   - Mint label on Mint background
   - Orange label on Orange background
   - Cream label on Cream background
   ============================================================ */

:root {
  /* ── COLOR LOGIC PAIRS (background → foreground) ── */

  /* Pink background */
  --g4g-on-pink:          var(--g4g-white);
  --g4g-icon-on-pink:     var(--g4g-yellow);
  --g4g-label-on-pink:    var(--g4g-yellow);

  /* Purple background */
  --g4g-on-purple:        var(--g4g-white);
  --g4g-icon-on-purple:   var(--g4g-yellow);
  --g4g-label-on-purple:  var(--g4g-yellow);   /* or pink */

  /* Orange background */
  --g4g-on-orange:        var(--g4g-white);
  --g4g-icon-on-orange:   var(--g4g-white);
  --g4g-label-on-orange:  var(--g4g-white);

  /* Mint background */
  --g4g-on-mint:          var(--g4g-purple);
  --g4g-icon-on-mint:     #113321;              /* Dark Green */
  --g4g-label-on-mint:    #113321;

  /* Bubble Gum background */
  --g4g-on-bubble:        var(--g4g-purple);
  --g4g-icon-on-bubble:   var(--g4g-purple);
  --g4g-label-on-bubble:  var(--g4g-purple);

  /* Cream background */
  --g4g-on-cream:         var(--g4g-purple);
  --g4g-icon-on-cream:    var(--g4g-purple);
  --g4g-label-on-cream:   var(--g4g-purple);

  /* Dark background */
  --g4g-on-dark:          var(--g4g-white);
  --g4g-icon-on-dark:     var(--g4g-pink);
  --g4g-label-on-dark:    var(--g4g-pink);      /* or yellow */

  /* Dark Green background */
  --g4g-on-dark-green:    var(--g4g-white);
  --g4g-icon-on-dark-green: var(--g4g-mint);
  --g4g-label-on-dark-green: var(--g4g-mint);
}


/* ============================================================
   SECTION 5 — LABEL / BADGE COMPONENTS
   ============================================================
   Content category labels used on posts, cards, and feeds.
   Each label has a background color, text color, and optional
   icon slot.

   CATEGORIES:
   .g4g-label--jobs        → Pink bg
   .g4g-label--events      → Orange bg  ← NEW: Orange as label
   .g4g-label--talent      → Yellow bg
   .g4g-label--partner     → Bubble Gum bg
   .g4g-label--insights    → Mint bg    ← NEW: Mint as label
   .g4g-label--community   → Bubble Gum bg
   .g4g-label--gtm         → Dark Green bg
   .g4g-label--matching    → Purple bg
   .g4g-label--network     → Cream bg
   .g4g-label--spotlight   → Pink bg
   .g4g-label--success     → Yellow bg
   .g4g-label--launch      → Orange bg
   ============================================================ */

/* ── BASE LABEL STYLE ── */
.g4g-label {
  display: inline-flex;
  align-items: center;
  gap: var(--g4g-space-1);
  padding: 4px 10px;
  border-radius: var(--g4g-radius-pill);
  font-family: var(--g4g-font-primary);
  font-size: var(--g4g-text-xs);
  font-weight: var(--g4g-weight-bold);
  letter-spacing: var(--g4g-tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* ── LABEL VARIANTS ── */

/* JOBS — Pink background */
.g4g-label--jobs {
  background-color: var(--g4g-pink);
  color: var(--g4g-white);
}

/* EVENTS — Orange background (Orange as label color) */
.g4g-label--events {
  background-color: var(--g4g-orange);
  color: var(--g4g-white);
}

/* TALENT — Yellow background */
.g4g-label--talent {
  background-color: var(--g4g-yellow);
  color: var(--g4g-purple);
}

/* PARTNER — Bubble Gum background */
.g4g-label--partner {
  background-color: var(--g4g-bubble);
  color: var(--g4g-purple);
}

/* INSIGHTS — Mint background (Mint as label color) */
.g4g-label--insights {
  background-color: var(--g4g-mint);
  color: #113321;
}

/* COMMUNITY — Bubble Gum background */
.g4g-label--community {
  background-color: var(--g4g-bubble);
  color: var(--g4g-purple);
}

/* GTM / GROWTH — Dark Green background */
.g4g-label--gtm {
  background-color: #113321;
  color: var(--g4g-mint);
}

/* MATCHING — Purple background */
.g4g-label--matching {
  background-color: var(--g4g-purple);
  color: var(--g4g-yellow);
}

/* NETWORK — Cream background */
.g4g-label--network {
  background-color: var(--g4g-cream);
  color: var(--g4g-purple);
}

/* SPOTLIGHT — Pink background */
.g4g-label--spotlight {
  background-color: var(--g4g-pink);
  color: var(--g4g-white);
}

/* SUCCESS — Yellow background */
.g4g-label--success {
  background-color: var(--g4g-yellow);
  color: var(--g4g-purple);
}

/* LAUNCH / STARTUP — Orange background */
.g4g-label--launch {
  background-color: var(--g4g-orange);
  color: var(--g4g-white);
}

/* TOP CANDIDATE — Purple background, Yellow text */
.g4g-label--top {
  background-color: var(--g4g-purple);
  color: var(--g4g-yellow);
}

/* PLACEMENT OF THE DAY — Pink background */
.g4g-label--placement {
  background-color: var(--g4g-pink);
  color: var(--g4g-white);
}

/* ── LABEL SIZE MODIFIERS ── */
.g4g-label--sm {
  font-size: 9px;
  padding: 3px 8px;
}

.g4g-label--lg {
  font-size: var(--g4g-text-sm);
  padding: 6px 14px;
}

/* ── LABEL WITH ICON SLOT ── */
.g4g-label .g4g-label__icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}


/* ============================================================
   SECTION 6 — ICON SYSTEM
   ============================================================
   All icons from the original GENZ4GTM icon set (Adobe
   Illustrator source) embedded as CSS custom properties
   containing URL-encoded SVG data URIs.

   Usage:
     .my-element::before {
       content: '';
       display: inline-block;
       width: 24px;
       height: 24px;
       background-image: var(--g4g-icon-jobs);
       background-size: contain;
       background-repeat: no-repeat;
     }

   Or use the ready-made .g4g-icon classes below.

   ICON CATEGORIES:
   ── 01 FUNCTIONAL (Website & Content)
      jobs, matching, news-events, insights, talent,
      location, contact, apply, partner, network

   ── 02 MATCHING & PLACEMENT
      match, open-role, top-candidate, connection

   ── 03 FUTURE, INNOVATION & SPEED
      startup-launch, gen-z-upward, speed-match, next-orbit

   ── 04 CULTURE, COMMUNITY & IDENTITY
      mindset, cultural-voice, human-match, gtm-growth

   ── 05 DECORATIVE ELEMENTS
      dot-grid, energy-arrow, cross-plus, wave-stack

   ── 06 MOTION & EXPRESSION
      rhythm, motion, punkt, echo, slash, progress,
      plus, signal, cross, ellipsis

   ── 07 BRAND SYMBOL
      brand-symbol (6-spoke asterisk)

   ── 08 ABSTRACT / CONCEPTUAL
      konstellation, momentum, schnittmenge, frequenz,
      horizont

   ── 09 ARROW VARIANTS
      arrow-white, arrow-pink, arrow-yellow, arrow-orange,
      arrow-mint, arrow-bubble, arrow-cream

   ── 10 APPROVAL & STATUS
      shoutout, match-check, frequenz-wave, aufwaerts,
      approved, safe, speed, always-on, fokus, spotlight
   ============================================================ */

/* ── ICON BASE CLASS ── */
.g4g-icon {
  display: inline-block;
  width: var(--g4g-icon-md);
  height: var(--g4g-icon-md);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.g4g-icon--xs  { width: var(--g4g-icon-xs);  height: var(--g4g-icon-xs);  }
.g4g-icon--sm  { width: var(--g4g-icon-sm);  height: var(--g4g-icon-sm);  }
.g4g-icon--md  { width: var(--g4g-icon-md);  height: var(--g4g-icon-md);  }
.g4g-icon--lg  { width: var(--g4g-icon-lg);  height: var(--g4g-icon-lg);  }
.g4g-icon--xl  { width: var(--g4g-icon-xl);  height: var(--g4g-icon-xl);  }
.g4g-icon--2xl { width: var(--g4g-icon-2xl); height: var(--g4g-icon-2xl); }
.g4g-icon--3xl { width: var(--g4g-icon-3xl); height: var(--g4g-icon-3xl); }


/* ============================================================
   ICON DATA URIs
   Source: genz4gtm_icon_set.svg (Adobe Illustrator 30.2.1)
   All icons use the original paths/shapes from the brand file.
   Colors: white icons on transparent (use CSS filter to recolor)
   ============================================================ */

:root {

  /* ── 01 FUNCTIONAL ICONS ── */

  /* JOBS — shopping bag / briefcase */
  --g4g-icon-jobs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='9' width='18' height='13' rx='2' ry='2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 9V7c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2v2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='3' y1='14' x2='21' y2='14' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");

  /* MATCHING — two circles with dashed connection */
  --g4g-icon-matching: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='7' cy='12' r='4' fill='none' stroke='%23FFD93D' stroke-width='1.8'/%3E%3Ccircle cx='17' cy='12' r='4' fill='none' stroke='%23FF4F9A' stroke-width='1.8'/%3E%3Cline x1='11' y1='12' x2='13' y2='12' stroke='%23fff' stroke-width='1.5' stroke-dasharray='1.5 1.5' opacity='0.6'/%3E%3C/svg%3E");

  /* NEWS / EVENTS — megaphone / speaker */
  --g4g-icon-news-events: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='7' cy='12' rx='3' ry='3' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 9l9-4v14l-9-3V9z' fill='%23fff' opacity='0.9'/%3E%3Cpath d='M14 17.5c1 1 1 2 0 3' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M16 16.5c1.5 1.5 1.5 3.5 0 5' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");

  /* INSIGHTS — lightbulb with cross/plus */
  --g4g-icon-insights: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='10' r='5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Crect x='10' y='16' width='4' height='1.5' rx='0.5' fill='%23fff'/%3E%3Crect x='10.5' y='18' width='3' height='1.5' rx='0.5' fill='%23fff'/%3E%3Crect x='9' y='9.4' width='6' height='1.2' rx='0.4' fill='%23FFD93D'/%3E%3Crect x='11.4' y='7' width='1.2' height='6' rx='0.4' fill='%23FFD93D'/%3E%3C/svg%3E");

  /* TALENT — person silhouette */
  --g4g-icon-talent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='3.5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Cpath d='M5 20c0-5 3-7 7-7s7 2 7 7' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");

  /* LOCATION — map pin */
  --g4g-icon-location: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='4' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='9' r='1.5' fill='%23FDADE1'/%3E%3Cpath d='M12 13l-2.5 5c1.5 1.5 3.5 1.5 5 0L12 13z' fill='%23fff' stroke='%232B0B3F' stroke-width='0.3' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* CONTACT — speech bubble with dots */
  --g4g-icon-contact: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5c0-1.1.9-2 2-2h12c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H9l-3 3v-3H6c-1.1 0-2-.9-2-2V5z' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='9' r='1' fill='%23fff'/%3E%3Ccircle cx='12' cy='9' r='1' fill='%23fff'/%3E%3Ccircle cx='15' cy='9' r='1' fill='%23fff'/%3E%3C/svg%3E");

  /* APPLY — circle with arrow */
  --g4g-icon-apply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Cpath d='M9 12h6M13 10l2 2-2 2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* PARTNER — two people connected */
  --g4g-icon-partner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 17c.8-2.5 2-3.5 4-3.5 1.5 0 2.5.5 3 1.5' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M14 17c.8-2.5 2-3.5 4-3.5' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='10' r='2.5' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='18' cy='10' r='2.5' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cline x1='12.5' y1='10' x2='15.5' y2='10' stroke='%23fff' stroke-width='1' stroke-dasharray='1 1' opacity='0.5'/%3E%3C/svg%3E");

  /* NETWORK — three nodes connected */
  --g4g-icon-network: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5' r='2.5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Ccircle cx='5' cy='17' r='2.5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Ccircle cx='19' cy='17' r='2.5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Cline x1='12' y1='7.5' x2='6' y2='14.5' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='12' y1='7.5' x2='18' y2='14.5' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='7.5' y1='17' x2='16.5' y2='17' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");


  /* ── 02 MATCHING & PLACEMENT ICONS ── */

  /* MATCH — two circles overlapping with heart */
  --g4g-icon-match: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='12' r='5.5' fill='none' stroke='%23FFD93D' stroke-width='1.8'/%3E%3Ccircle cx='16' cy='12' r='5.5' fill='none' stroke='%23FF4F9A' stroke-width='1.8'/%3E%3Cpath d='M12 9.5c0-1.5 2-2 2.5-.5.5 1.5-2.5 4-2.5 4s-3-2.5-2.5-4C12 7.5 12 11 12 9.5z' fill='%23fff'/%3E%3C/svg%3E");

  /* OPEN ROLE — dashed circle (vacancy) */
  --g4g-icon-open-role: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23FFD93D' stroke-width='1.8' stroke-dasharray='2.5 2'/%3E%3C/svg%3E");

  /* TOP CANDIDATE — person with brand symbol badge */
  --g4g-icon-top-candidate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Cpath d='M4 21c0-4.5 2.5-6.5 6-6.5s6 2 6 6.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='18' cy='6' r='3.5' fill='%23FFD93D'/%3E%3Cg transform='translate(18,6)'%3E%3Crect x='-2.5' y='-0.4' width='0.8' height='5' rx='0.2' fill='%232B0B3F' transform='rotate(90)'/%3E%3Crect x='-2.5' y='-0.4' width='0.8' height='5' rx='0.2' fill='%232B0B3F' transform='rotate(150)'/%3E%3Crect x='-2.5' y='-0.4' width='0.8' height='5' rx='0.2' fill='%232B0B3F' transform='rotate(-150)'/%3E%3C/g%3E%3C/svg%3E");

  /* CONNECTION — two nodes with link */
  --g4g-icon-connection: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='12' r='3' fill='none' stroke='%23FFD93D' stroke-width='1.8'/%3E%3Ccircle cx='18' cy='12' r='3' fill='none' stroke='%23FF4F9A' stroke-width='1.8'/%3E%3Cpath d='M9 12h6' stroke='%23fff' stroke-width='1.5' stroke-dasharray='2 1.5' opacity='0.7'/%3E%3Cpath d='M6 9c0-2 1-3 3-3h6c2 0 3 1 3 3' fill='none' stroke='%23fff' stroke-width='1.2' opacity='0.4'/%3E%3C/svg%3E");


  /* ── 03 FUTURE, INNOVATION & SPEED ── */

  /* STARTUP LAUNCH — rocket */
  --g4g-icon-startup-launch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c3 0 5 2 6 6v9c0 1-.5 1.5-1.5 1.5H7.5C6.5 19.5 6 19 6 18V9c1-4 3-6 6-6z' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.5 5.5c2-2.5 3-2.5 5 0H9.5z' fill='%23fff'/%3E%3Ccircle cx='12' cy='13' r='2' fill='%2300FDBB'/%3E%3Cpath d='M8 19l-2.5 4 2.5-2v-2z' fill='%23FFD93D' stroke='%232B0B3F' stroke-width='0.3' stroke-linejoin='round'/%3E%3Cpath d='M16 19l2.5 4-2.5-2v-2z' fill='%23FFD93D' stroke='%232B0B3F' stroke-width='0.3' stroke-linejoin='round'/%3E%3Cpath d='M10.5 21c.5 1.5 1 2 1.5 1.5.5.5 1-.5 1.5-1.5' fill='%23FF4F9A'/%3E%3C/svg%3E");

  /* GEN Z UPWARD — Z with upward arrow */
  --g4g-icon-gen-z-upward: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8h12L6 16h12' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='18' y1='16' x2='18' y2='4' stroke='%23FFD93D' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M14.5 7l3.5-3.5 3.5 3.5' fill='none' stroke='%23FFD93D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* SPEED MATCH — lightning bolt */
  --g4g-icon-speed-match: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 3l-5 9h4l-2 9 9-11h-5l3-7z' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* NEXT ORBIT — planet with ring */
  --g4g-icon-next-orbit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%23fff'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='3.5' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='5' cy='7' r='0.7' fill='%23FFD93D' opacity='0.8'/%3E%3Ccircle cx='19' cy='6' r='0.5' fill='%23fff' opacity='0.6'/%3E%3Ccircle cx='20' cy='10' r='0.4' fill='%23fff' opacity='0.4'/%3E%3C/svg%3E");


  /* ── 04 CULTURE, COMMUNITY & IDENTITY ── */

  /* MINDSET — concentric arcs (signal/waves) */
  --g4g-icon-mindset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20c4.5 0 7.5-3 8.5-7.5 1-4.5-.5-8-4.5-10' fill='none' stroke='%23FF4F9A' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M12 20c3 0 5-2 5.5-5 .5-3-.5-5.5-3-7' fill='none' stroke='%23FF4F9A' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M12 20c1.5 0 2.5-1 3-2.5.5-2-.5-3.5-1.5-4.5' fill='none' stroke='%23FF4F9A' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");

  /* CULTURAL VOICE — microphone */
  --g4g-icon-cultural-voice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='3' width='6' height='10' rx='3' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Cpath d='M5 11c0 4 3 7 7 7s7-3 7-7' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='12' y1='18' x2='12' y2='21' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='9' y1='21' x2='15' y2='21' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");

  /* HUMAN MATCH — two people facing each other */
  --g4g-icon-human-match: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='7' cy='8' r='3' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Cpath d='M2 20c0-3.5 2-5 5-5 1.5 0 2.8.5 3.5 1.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='17' cy='8' r='3' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Cpath d='M22 20c0-3.5-2-5-5-5-1.5 0-2.8.5-3.5 1.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");

  /* GTM GROWTH — line chart going up */
  --g4g-icon-gtm-growth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='3' y1='20' x2='3' y2='4' stroke='%2300FDBB' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='3' y1='20' x2='21' y2='20' stroke='%2300FDBB' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M6 18c2-2 4-4 5-7 1-3 3-5 6-7' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='16' r='1' fill='%23FFD93D'/%3E%3Ccircle cx='12' cy='13' r='1' fill='%23FFD93D'/%3E%3Ccircle cx='16' cy='10' r='1' fill='%23FFD93D'/%3E%3C/svg%3E");


  /* ── 05 DECORATIVE ELEMENTS ── */

  /* DOT GRID — 3x3 dot matrix */
  --g4g-icon-dot-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='6' r='1.5' fill='%23fff'/%3E%3Ccircle cx='12' cy='6' r='1.5' fill='%23FF4F9A'/%3E%3Ccircle cx='18' cy='6' r='1.5' fill='%23fff'/%3E%3Ccircle cx='6' cy='12' r='1.5' fill='%23fff'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23FFD93D'/%3E%3Ccircle cx='18' cy='12' r='1.5' fill='%23fff'/%3E%3Ccircle cx='6' cy='18' r='1.5' fill='%23fff'/%3E%3Ccircle cx='12' cy='18' r='1.5' fill='%23fff'/%3E%3Ccircle cx='18' cy='18' r='1.5' fill='%23fff'/%3E%3C/svg%3E");

  /* ENERGY ARROW — zigzag upward arrow */
  --g4g-icon-energy-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 18L13 8 7 18 1 8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17 5l2.5-2.5 2.5 2.5' fill='none' stroke='%23FFD93D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* CROSS PLUS — overlapping cross and plus */
  --g4g-icon-cross-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10.5' width='14' height='3' rx='1.5' fill='%23FF4F9A'/%3E%3Crect x='10.5' y='5' width='3' height='14' rx='1.5' fill='%23FFD93D'/%3E%3Crect x='8' y='8' width='8' height='8' rx='1.5' fill='%23FF6B3D'/%3E%3C/svg%3E");

  /* WAVE STACK — three wave lines */
  --g4g-icon-wave-stack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 8c2.5-2.5 5-2.5 7.5 0s5 2.5 7.5 0c1.5-1.5 2.5-1.5 3 0' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M2 12c2.5-2.5 5-2.5 7.5 0s5 2.5 7.5 0c1.5-1.5 2.5-1.5 3 0' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M2 16c2.5-2.5 5-2.5 7.5 0s5 2.5 7.5 0c1.5-1.5 2.5-1.5 3 0' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");


  /* ── 06 MOTION & EXPRESSION ── */

  /* RHYTHM — three horizontal lines */
  --g4g-icon-rhythm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='3' y1='8' x2='21' y2='8' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='3' y1='13' x2='21' y2='13' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='3' y1='18' x2='21' y2='18' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");

  /* MOTION — three diagonal lines */
  --g4g-icon-motion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='18' y1='20' x2='22' y2='6' stroke='%23FF4F9A' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='12' y1='20' x2='16' y2='6' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='6' y1='20' x2='10' y2='6' stroke='%23FFD93D' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");

  /* PUNKT — target circle */
  --g4g-icon-punkt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23FF4F9A'/%3E%3C/svg%3E");

  /* ECHO — two concentric arcs */
  --g4g-icon-echo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 17c4-5 4-9 0-14' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M5 19c5.5-7 5.5-13 0-20' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' opacity='0.45'/%3E%3C/svg%3E");

  /* SLASH — diagonal line */
  --g4g-icon-slash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='6' y1='20' x2='18' y2='4' stroke='%23fff' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");

  /* PROGRESS — L-shaped chart axis */
  --g4g-icon-progress: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='4 20 4 4 20 4' fill='none' stroke='%23FF4F9A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='4 20 10 14 14 18 20 8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* PLUS — plus sign */
  --g4g-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='12' y1='4' x2='12' y2='20' stroke='%23fff' stroke-width='2.8' stroke-linecap='round'/%3E%3Cline x1='4' y1='12' x2='20' y2='12' stroke='%23fff' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");

  /* SIGNAL — wifi-style arcs */
  --g4g-icon-signal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 17c2-2 6-2 8 0' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M5 14c3.5-3.5 10.5-3.5 14 0' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' opacity='0.6'/%3E%3Cline x1='12' y1='8' x2='12' y2='17' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");

  /* CROSS — X mark */
  --g4g-icon-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='6' y1='6' x2='18' y2='18' stroke='%23fff' stroke-width='2.8' stroke-linecap='round'/%3E%3Cline x1='18' y1='6' x2='6' y2='18' stroke='%23fff' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");

  /* ELLIPSIS — three dots */
  --g4g-icon-ellipsis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='12' r='2' fill='%23FF4F9A'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23FFD93D'/%3E%3Ccircle cx='18' cy='12' r='2' fill='%23fff'/%3E%3C/svg%3E");


  /* ── 07 BRAND SYMBOL ── */

  /* BRAND SYMBOL — 6-spoke asterisk (3 rounded rects at 90°/150°/-150°) */
  /* This is the official GENZ4GTM brand mark used alongside the wordmark */
  --g4g-icon-brand-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='11' y='4' width='2' height='16' rx='0.5' fill='%23FF4F9A' transform='rotate(90,12,12)'/%3E%3Crect x='11' y='4' width='2' height='16' rx='0.5' fill='%23FF4F9A' transform='rotate(150,12,12)'/%3E%3Crect x='11' y='4' width='2' height='16' rx='0.5' fill='%23FF4F9A' transform='rotate(-150,12,12)'/%3E%3C/svg%3E");

  /* BRAND SYMBOL — Yellow variant */
  --g4g-icon-brand-symbol-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='11' y='4' width='2' height='16' rx='0.5' fill='%23FFD93D' transform='rotate(90,12,12)'/%3E%3Crect x='11' y='4' width='2' height='16' rx='0.5' fill='%23FFD93D' transform='rotate(150,12,12)'/%3E%3Crect x='11' y='4' width='2' height='16' rx='0.5' fill='%23FFD93D' transform='rotate(-150,12,12)'/%3E%3C/svg%3E");

  /* BRAND SYMBOL — White variant */
  --g4g-icon-brand-symbol-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='11' y='4' width='2' height='16' rx='0.5' fill='%23fff' transform='rotate(90,12,12)'/%3E%3Crect x='11' y='4' width='2' height='16' rx='0.5' fill='%23fff' transform='rotate(150,12,12)'/%3E%3Crect x='11' y='4' width='2' height='16' rx='0.5' fill='%23fff' transform='rotate(-150,12,12)'/%3E%3C/svg%3E");

  /* BRAND SYMBOL — Purple variant */
  --g4g-icon-brand-symbol-purple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='11' y='4' width='2' height='16' rx='0.5' fill='%232B0B3F' transform='rotate(90,12,12)'/%3E%3Crect x='11' y='4' width='2' height='16' rx='0.5' fill='%232B0B3F' transform='rotate(150,12,12)'/%3E%3Crect x='11' y='4' width='2' height='16' rx='0.5' fill='%232B0B3F' transform='rotate(-150,12,12)'/%3E%3C/svg%3E");


  /* ── 08 ABSTRACT / CONCEPTUAL ── */

  /* KONSTELLATION — dot constellation */
  --g4g-icon-konstellation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='14' r='1.5' fill='%23FF4F9A'/%3E%3Ccircle cx='16' cy='6' r='3' fill='%23FFD93D'/%3E%3Ccircle cx='19' cy='14' r='1.5' fill='%23FF4F9A'/%3E%3Ccircle cx='12' cy='18' r='1.5' fill='%23FF4F9A'/%3E%3Ccircle cx='6' cy='18' r='1' fill='%23FF4F9A' opacity='0.6'/%3E%3Cline x1='8' y1='14' x2='16' y2='6' stroke='%23fff' stroke-width='1' opacity='0.5'/%3E%3Cline x1='16' y1='6' x2='19' y2='14' stroke='%23fff' stroke-width='1' opacity='0.5'/%3E%3Cline x1='19' y1='14' x2='12' y2='18' stroke='%23fff' stroke-width='1' opacity='0.5'/%3E%3Cline x1='12' y1='18' x2='8' y2='14' stroke='%23fff' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E");

  /* MOMENTUM — spiral */
  --g4g-icon-momentum: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c0-4 2-6 5-6s5 2 5 6-2 7-5 8c-4 1-7.5.3-10-2.5-3-3.5-4-7-3-11 1-4.5 3.5-7 7-8' fill='none' stroke='%23FFD93D' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M12 12c0-3 1-4.5 3.5-4.5s3.5 1.5 3.5 4.5-1 5-3.5 5.5c-2.5.5-4.5-.3-6-2.5' fill='none' stroke='%23FFD93D' stroke-width='1.5' stroke-linecap='round' opacity='0.6'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23FFD93D'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23fff'/%3E%3C/svg%3E");

  /* SCHNITTMENGE — two overlapping circles (Venn) */
  --g4g-icon-schnittmenge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='12' r='6' fill='none' stroke='%23FF4F9A' stroke-width='1.8'/%3E%3Ccircle cx='15' cy='12' r='6' fill='none' stroke='%23FFD93D' stroke-width='1.8'/%3E%3C/svg%3E");

  /* FREQUENZ — waveform / EKG */
  --g4g-icon-frequenz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='2 12 5 12 7 5 9 19 11 9 13 15 15 12 22 12' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='7' cy='5' r='1.5' fill='%23FF4F9A' opacity='0.6'/%3E%3Ccircle cx='11' cy='9' r='1' fill='%23FF4F9A' opacity='0.6'/%3E%3C/svg%3E");

  /* HORIZONT — sun rising */
  --g4g-icon-horizont: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='14' r='5' fill='%23FFD93D'/%3E%3Cline x1='12' y1='5' x2='12' y2='3' stroke='%23FFD93D' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='7' y1='7' x2='5.5' y2='5.5' stroke='%23FFD93D' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='17' y1='7' x2='18.5' y2='5.5' stroke='%23FFD93D' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='4' y1='11' x2='2' y2='11' stroke='%23FFD93D' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='20' y1='11' x2='22' y2='11' stroke='%23FFD93D' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='2' y1='19' x2='22' y2='19' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");


  /* ── 09 ARROW VARIANTS ── */
  /* Upward arrow in different brand colors */

  --g4g-icon-arrow-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='8' y='2' width='2' height='14' rx='0.5' fill='%23fff'/%3E%3Cpath d='M4 7l5-5 5 5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --g4g-icon-arrow-pink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='8' y='2' width='2' height='14' rx='0.5' fill='%23FF4F9A'/%3E%3Cpath d='M4 7l5-5 5 5' fill='none' stroke='%23FF4F9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --g4g-icon-arrow-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='8' y='2' width='2' height='14' rx='0.5' fill='%23FFD93D'/%3E%3Cpath d='M4 7l5-5 5 5' fill='none' stroke='%23FFD93D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --g4g-icon-arrow-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='8' y='2' width='2' height='14' rx='0.5' fill='%23FF6B3D'/%3E%3Cpath d='M4 7l5-5 5 5' fill='none' stroke='%23FF6B3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --g4g-icon-arrow-mint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='8' y='2' width='2' height='14' rx='0.5' fill='%2300FDBB'/%3E%3Cpath d='M4 7l5-5 5 5' fill='none' stroke='%2300FDBB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --g4g-icon-arrow-bubble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='8' y='2' width='2' height='14' rx='0.5' fill='%23FDADE1'/%3E%3Cpath d='M4 7l5-5 5 5' fill='none' stroke='%23FDADE1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --g4g-icon-arrow-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='8' y='2' width='2' height='14' rx='0.5' fill='%23F5F0E8'/%3E%3Cpath d='M4 7l5-5 5 5' fill='none' stroke='%23F5F0E8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");


  /* ── 10 APPROVAL & STATUS ── */

  --g4g-icon-shoutout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='%23FF4F9A'/%3E%3Cpath d='M8 12h8M12 8v8' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");

  --g4g-icon-approved: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='%2300FDBB'/%3E%3Cpath d='M7 12l4 4 6-7' fill='none' stroke='%23113321' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --g4g-icon-safe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c4 0 6.5 1 7.5 2.5v7c0 4-3 7-7.5 9-4.5-2-7.5-5-7.5-9v-7C5.5 4 8 3 12 3z' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.5 12l2.5 2.5 5-5.5' fill='none' stroke='%2300FDBB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --g4g-icon-speed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 3l-5 9h4l-2 9 9-11h-5l3-7z' fill='%23FFD93D' stroke='%232B0B3F' stroke-width='0.5' stroke-linejoin='round'/%3E%3C/svg%3E");

  --g4g-icon-always-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12c0-3.5 3-6 7-6s7 2.5 7 6-3 6-7 6-7-2.5-7-6z' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Cpath d='M5 12c0-3.5 3-6 7-6s7 2.5 7 6-3 6-7 6-7-2.5-7-6z' fill='none' stroke='%23FF4F9A' stroke-width='1.8' transform='rotate(90,12,12)'/%3E%3C/svg%3E");

  --g4g-icon-fokus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23FF4F9A'/%3E%3C/svg%3E");

  --g4g-icon-spotlight: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%23FFD93D'/%3E%3Cline x1='12' y1='3' x2='12' y2='1' stroke='%23FFD93D' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='12' y1='21' x2='12' y2='23' stroke='%23FFD93D' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='3' y1='12' x2='1' y2='12' stroke='%23FFD93D' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='21' y1='12' x2='23' y2='12' stroke='%23FFD93D' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='5.6' y1='5.6' x2='4.2' y2='4.2' stroke='%23FFD93D' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='18.4' y1='18.4' x2='19.8' y2='19.8' stroke='%23FFD93D' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='18.4' y1='5.6' x2='19.8' y2='4.2' stroke='%23FFD93D' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='5.6' y1='18.4' x2='4.2' y2='19.8' stroke='%23FFD93D' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");

}


/* ── ICON UTILITY CLASSES ── */
/* Apply these to any element to show the icon as background */

.g4g-icon--jobs            { background-image: var(--g4g-icon-jobs); }
.g4g-icon--matching        { background-image: var(--g4g-icon-matching); }
.g4g-icon--news-events     { background-image: var(--g4g-icon-news-events); }
.g4g-icon--insights        { background-image: var(--g4g-icon-insights); }
.g4g-icon--talent          { background-image: var(--g4g-icon-talent); }
.g4g-icon--location        { background-image: var(--g4g-icon-location); }
.g4g-icon--contact         { background-image: var(--g4g-icon-contact); }
.g4g-icon--apply           { background-image: var(--g4g-icon-apply); }
.g4g-icon--partner         { background-image: var(--g4g-icon-partner); }
.g4g-icon--network         { background-image: var(--g4g-icon-network); }
.g4g-icon--match           { background-image: var(--g4g-icon-match); }
.g4g-icon--open-role       { background-image: var(--g4g-icon-open-role); }
.g4g-icon--top-candidate   { background-image: var(--g4g-icon-top-candidate); }
.g4g-icon--connection      { background-image: var(--g4g-icon-connection); }
.g4g-icon--startup-launch  { background-image: var(--g4g-icon-startup-launch); }
.g4g-icon--gen-z-upward    { background-image: var(--g4g-icon-gen-z-upward); }
.g4g-icon--speed-match     { background-image: var(--g4g-icon-speed-match); }
.g4g-icon--next-orbit      { background-image: var(--g4g-icon-next-orbit); }
.g4g-icon--mindset         { background-image: var(--g4g-icon-mindset); }
.g4g-icon--cultural-voice  { background-image: var(--g4g-icon-cultural-voice); }
.g4g-icon--human-match     { background-image: var(--g4g-icon-human-match); }
.g4g-icon--gtm-growth      { background-image: var(--g4g-icon-gtm-growth); }
.g4g-icon--dot-grid        { background-image: var(--g4g-icon-dot-grid); }
.g4g-icon--energy-arrow    { background-image: var(--g4g-icon-energy-arrow); }
.g4g-icon--cross-plus      { background-image: var(--g4g-icon-cross-plus); }
.g4g-icon--wave-stack      { background-image: var(--g4g-icon-wave-stack); }
.g4g-icon--rhythm          { background-image: var(--g4g-icon-rhythm); }
.g4g-icon--motion          { background-image: var(--g4g-icon-motion); }
.g4g-icon--punkt           { background-image: var(--g4g-icon-punkt); }
.g4g-icon--echo            { background-image: var(--g4g-icon-echo); }
.g4g-icon--slash           { background-image: var(--g4g-icon-slash); }
.g4g-icon--progress        { background-image: var(--g4g-icon-progress); }
.g4g-icon--plus            { background-image: var(--g4g-icon-plus); }
.g4g-icon--signal          { background-image: var(--g4g-icon-signal); }
.g4g-icon--cross           { background-image: var(--g4g-icon-cross); }
.g4g-icon--ellipsis        { background-image: var(--g4g-icon-ellipsis); }
.g4g-icon--brand-symbol    { background-image: var(--g4g-icon-brand-symbol); }
.g4g-icon--brand-symbol-yellow  { background-image: var(--g4g-icon-brand-symbol-yellow); }
.g4g-icon--brand-symbol-white   { background-image: var(--g4g-icon-brand-symbol-white); }
.g4g-icon--brand-symbol-purple  { background-image: var(--g4g-icon-brand-symbol-purple); }
.g4g-icon--konstellation   { background-image: var(--g4g-icon-konstellation); }
.g4g-icon--momentum        { background-image: var(--g4g-icon-momentum); }
.g4g-icon--schnittmenge    { background-image: var(--g4g-icon-schnittmenge); }
.g4g-icon--frequenz        { background-image: var(--g4g-icon-frequenz); }
.g4g-icon--horizont        { background-image: var(--g4g-icon-horizont); }
.g4g-icon--arrow-white     { background-image: var(--g4g-icon-arrow-white); }
.g4g-icon--arrow-pink      { background-image: var(--g4g-icon-arrow-pink); }
.g4g-icon--arrow-yellow    { background-image: var(--g4g-icon-arrow-yellow); }
.g4g-icon--arrow-orange    { background-image: var(--g4g-icon-arrow-orange); }
.g4g-icon--arrow-mint      { background-image: var(--g4g-icon-arrow-mint); }
.g4g-icon--arrow-bubble    { background-image: var(--g4g-icon-arrow-bubble); }
.g4g-icon--arrow-cream     { background-image: var(--g4g-icon-arrow-cream); }
.g4g-icon--shoutout        { background-image: var(--g4g-icon-shoutout); }
.g4g-icon--approved        { background-image: var(--g4g-icon-approved); }
.g4g-icon--safe            { background-image: var(--g4g-icon-safe); }
.g4g-icon--speed           { background-image: var(--g4g-icon-speed); }
.g4g-icon--always-on       { background-image: var(--g4g-icon-always-on); }
.g4g-icon--fokus           { background-image: var(--g4g-icon-fokus); }
.g4g-icon--spotlight       { background-image: var(--g4g-icon-spotlight); }


/* ============================================================
   SECTION 7 — UTILITY CLASSES
   ============================================================ */

/* ── BACKGROUND COLORS ── */
.g4g-bg-pink        { background-color: var(--g4g-pink); }
.g4g-bg-yellow      { background-color: var(--g4g-yellow); }
.g4g-bg-purple      { background-color: var(--g4g-purple); }
.g4g-bg-white       { background-color: var(--g4g-white); }
.g4g-bg-bubble      { background-color: var(--g4g-bubble); }
.g4g-bg-orange      { background-color: var(--g4g-orange); }
.g4g-bg-mint        { background-color: var(--g4g-mint); }
.g4g-bg-cream       { background-color: var(--g4g-cream); }
.g4g-bg-dark        { background-color: var(--g4g-bg-dark); }
.g4g-bg-dark-green  { background-color: var(--g4g-bg-green); }

/* ── TEXT COLORS ── */
.g4g-text-pink      { color: var(--g4g-pink); }
.g4g-text-yellow    { color: var(--g4g-yellow); }
.g4g-text-purple    { color: var(--g4g-purple); }
.g4g-text-white     { color: var(--g4g-white); }
.g4g-text-bubble    { color: var(--g4g-bubble); }
.g4g-text-orange    { color: var(--g4g-orange); }
.g4g-text-mint      { color: var(--g4g-mint); }
.g4g-text-cream     { color: var(--g4g-cream); }

/* ── BORDER COLORS ── */
.g4g-border-pink    { border-color: var(--g4g-pink); }
.g4g-border-yellow  { border-color: var(--g4g-yellow); }
.g4g-border-purple  { border-color: var(--g4g-purple); }
.g4g-border-mint    { border-color: var(--g4g-mint); }
.g4g-border-orange  { border-color: var(--g4g-orange); }

/* ── TYPOGRAPHY ── */
.g4g-font           { font-family: var(--g4g-font-primary); }
.g4g-font-bold      { font-family: var(--g4g-font-primary); font-weight: var(--g4g-weight-bold); }
.g4g-tracking-brand { letter-spacing: var(--g4g-tracking-brand); }
.g4g-uppercase      { text-transform: uppercase; }


/* ============================================================
   SECTION 8 — COMPONENT PATTERNS
   ============================================================
   Ready-to-use component patterns for GENZ4GTM content.
   ============================================================ */

/* ── POST CARD ── */
.g4g-card {
  background-color: var(--g4g-bg-dark);
  border-radius: var(--g4g-radius-xl);
  padding: var(--g4g-space-6);
  font-family: var(--g4g-font-primary);
  color: var(--g4g-white);
  position: relative;
  overflow: hidden;
}

.g4g-card--pink   { background-color: var(--g4g-pink); }
.g4g-card--purple { background-color: var(--g4g-purple); }
.g4g-card--orange { background-color: var(--g4g-orange); }
.g4g-card--mint   { background-color: var(--g4g-mint); color: var(--g4g-purple); }
.g4g-card--bubble { background-color: var(--g4g-bubble); color: var(--g4g-purple); }
.g4g-card--cream  { background-color: var(--g4g-cream); color: var(--g4g-purple); }

/* ── JOB POST CARD ── */
.g4g-job-card {
  background-color: var(--g4g-white);
  border-radius: var(--g4g-radius-lg);
  padding: var(--g4g-space-5);
  font-family: var(--g4g-font-primary);
  color: var(--g4g-purple);
  border: 1.5px solid rgba(43, 11, 63, 0.08);
}

.g4g-job-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--g4g-space-3);
}

.g4g-job-card__title {
  font-size: var(--g4g-text-lg);
  font-weight: var(--g4g-weight-bold);
  color: var(--g4g-purple);
  letter-spacing: var(--g4g-tracking-tight);
}

.g4g-job-card__meta {
  font-size: var(--g4g-text-sm);
  color: var(--g4g-purple);
  opacity: 0.6;
  margin-bottom: var(--g4g-space-4);
}

.g4g-job-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--g4g-space-2);
  background-color: var(--g4g-pink);
  color: var(--g4g-white);
  font-family: var(--g4g-font-primary);
  font-size: var(--g4g-text-sm);
  font-weight: var(--g4g-weight-bold);
  letter-spacing: var(--g4g-tracking-wide);
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--g4g-radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
}

/* ── CANDIDATE CARD ── */
.g4g-candidate-card {
  background-color: var(--g4g-purple);
  border-radius: var(--g4g-radius-lg);
  padding: var(--g4g-space-5);
  font-family: var(--g4g-font-primary);
  color: var(--g4g-white);
}

.g4g-candidate-card__name {
  font-size: var(--g4g-text-xl);
  font-weight: var(--g4g-weight-bold);
  color: var(--g4g-white);
}

.g4g-candidate-card__role {
  font-size: var(--g4g-text-sm);
  color: var(--g4g-yellow);
  font-weight: var(--g4g-weight-semibold);
  letter-spacing: var(--g4g-tracking-wide);
  text-transform: uppercase;
}

.g4g-candidate-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g4g-space-2);
  margin-top: var(--g4g-space-3);
}

/* ── SYMBOL GRAMMAR ── */
/*
  The brand symbol (6-spoke asterisk) has specific meanings
  when combined with other elements:

  Symbol alone          = Sichtbarkeit (visibility)
  Ring + Symbol         = Stelle frei (open role)
  Two circles + Symbol  = Match gemacht (match made)
  Two symbols           = Match gemacht (match made)
  Symbol badge          = Top Kandidat (top candidate)
*/

.g4g-symbol {
  display: inline-block;
  background-image: var(--g4g-icon-brand-symbol-yellow);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.g4g-symbol--sm  { width: 16px; height: 16px; }
.g4g-symbol--md  { width: 24px; height: 24px; }
.g4g-symbol--lg  { width: 40px; height: 40px; }
.g4g-symbol--xl  { width: 64px; height: 64px; }
.g4g-symbol--2xl { width: 80px; height: 80px; }

.g4g-symbol--pink   { background-image: var(--g4g-icon-brand-symbol); }
.g4g-symbol--yellow { background-image: var(--g4g-icon-brand-symbol-yellow); }
.g4g-symbol--white  { background-image: var(--g4g-icon-brand-symbol-white); }
.g4g-symbol--purple { background-image: var(--g4g-icon-brand-symbol-purple); }


/* ============================================================
   SECTION 9 — COLOR LOGIC REFERENCE
   ============================================================
   Quick reference for creatives. Use these data attributes
   to auto-apply the correct color logic to any container.

   <div data-g4g-bg="pink">   → Pink bg, Yellow icons/labels
   <div data-g4g-bg="purple"> → Purple bg, Yellow icons/labels
   <div data-g4g-bg="orange"> → Orange bg, White icons/labels
   <div data-g4g-bg="mint">   → Mint bg, Dark Green icons/labels
   <div data-g4g-bg="bubble"> → Bubble bg, Purple icons/labels
   <div data-g4g-bg="cream">  → Cream bg, Purple icons/labels
   <div data-g4g-bg="dark">   → Dark bg, Pink/Yellow icons/labels
   ============================================================ */

[data-g4g-bg="pink"] {
  background-color: var(--g4g-pink);
  color: var(--g4g-white);
  --g4g-icon-color: var(--g4g-yellow);
  --g4g-label-color: var(--g4g-yellow);
}

[data-g4g-bg="purple"] {
  background-color: var(--g4g-purple);
  color: var(--g4g-white);
  --g4g-icon-color: var(--g4g-yellow);
  --g4g-label-color: var(--g4g-yellow);
}

[data-g4g-bg="orange"] {
  background-color: var(--g4g-orange);
  color: var(--g4g-white);
  --g4g-icon-color: var(--g4g-white);
  --g4g-label-color: var(--g4g-white);
}

[data-g4g-bg="mint"] {
  background-color: var(--g4g-mint);
  color: var(--g4g-purple);
  --g4g-icon-color: #113321;
  --g4g-label-color: #113321;
}

[data-g4g-bg="bubble"] {
  background-color: var(--g4g-bubble);
  color: var(--g4g-purple);
  --g4g-icon-color: var(--g4g-purple);
  --g4g-label-color: var(--g4g-purple);
}

[data-g4g-bg="cream"] {
  background-color: var(--g4g-cream);
  color: var(--g4g-purple);
  --g4g-icon-color: var(--g4g-purple);
  --g4g-label-color: var(--g4g-purple);
}

[data-g4g-bg="dark"] {
  background-color: var(--g4g-bg-dark);
  color: var(--g4g-white);
  --g4g-icon-color: var(--g4g-pink);
  --g4g-label-color: var(--g4g-pink);
}

[data-g4g-bg="dark-green"] {
  background-color: var(--g4g-bg-green);
  color: var(--g4g-white);
  --g4g-icon-color: var(--g4g-mint);
  --g4g-label-color: var(--g4g-mint);
}


/* ============================================================
   END OF GENZ4GTM BRAND KIT
   ============================================================
   Version:   2026
   Brand:     GENZ4GTM
   Website:   genz4gtm.com
   Colors:    Pink #FF4F9A · Yellow #FFD93D · Purple #2B0B3F
              Orange #FF6B3D · Mint #00FDBB · Bubble #FDADE1
              Cream #F5F0E8 · White #FFFFFF
   Fonts:     Poppins (primary) · Helvetica (fallback)
   Icons:     Original GENZ4GTM icon set (Adobe Illustrator)
   Symbol:    6-spoke asterisk (brand mark)
   ============================================================ */