/* ============================================================================
   SLYD WEBSITE - Layout Patterns & Component Styles
   ============================================================================
   This file contains website-specific layout patterns and component styles.

   DESIGN TOKENS ARE NO LONGER HERE!
   Design tokens (colors, spacing, typography, etc.) are now imported from:
   → DesignTokens.css (from SLYD.Components package)

   This file now contains ONLY:
   - CSS Reset & Base Styles
   - Website-specific layout patterns
   - Website-specific component styles
   - Utility classes
   - Animations

   Updated: 2026-01-21 (Phase 4 - Design Token Unification)
   ============================================================================ */

/* ============================================================================
   MIGRATION NOTES FOR DEVELOPERS
   ============================================================================

   OLD VARIABLE NAMES (website-specific) → NEW (from DesignTokens.css):

   Colors:
   --primary → --slyd-primary
   --secondary → --slyd-secondary
   --accent-gold → --slyd-accent-gold
   --accent-purple → --slyd-accent-purple
   --text-primary → --slyd-text-primary
   --bg-body → --slyd-bg-body

   Spacing:
   --space-* → --slyd-spacing-*

   Typography:
   --font-primary → --slyd-font-family-heading
   --text-* → --slyd-font-size-*

   Shadows, Radius, Z-Index, Transitions:
   All now prefixed with --slyd-*

   See DesignTokens.css for complete list of available tokens.
   ============================================================================ */

/* ============================================================================
   VARIABLE ALIASES (Backward Compatibility)
   ============================================================================
   These aliases map old website-specific variable names to the new unified
   DesignTokens.css variables. This maintains backward compatibility with
   existing website CSS.

   TODO: Gradually migrate website CSS to use --slyd-* variables directly,
   then remove these aliases.
   ============================================================================ */

:root {
    /* Colors */
    --primary: var(--slyd-primary);
    --primary-dark: var(--slyd-primary-dark);
    --primary-light: var(--slyd-primary-light);
    --primary-rgb: var(--slyd-primary-rgb);

    --secondary: var(--slyd-secondary);
    --secondary-dark: var(--slyd-secondary-dark);
    --secondary-light: var(--slyd-secondary-light);
    --secondary-rgb: var(--slyd-secondary-rgb);

    --accent-gold: var(--slyd-accent-gold);
    --accent-gold-dark: var(--slyd-accent-gold-dark);
    --accent-gold-light: var(--slyd-accent-gold-light);
    --accent-gold-rgb: var(--slyd-accent-gold-rgb);

    --accent-purple: var(--slyd-accent-purple);
    --accent-purple-dark: var(--slyd-accent-purple-dark);
    --accent-purple-light: var(--slyd-accent-purple-light);
    --accent-purple-rgb: var(--slyd-accent-purple-rgb);

    --accent-pink: var(--slyd-accent-pink);
    --accent-pink-rgb: var(--slyd-accent-pink-rgb);

    --success: var(--slyd-success);
    --success-dark: var(--slyd-success-dark);
    --success-light: var(--slyd-success-light);
    --success-rgb: var(--slyd-success-rgb);

    --warning: var(--slyd-warning);
    --warning-dark: var(--slyd-warning-dark);
    --warning-light: var(--slyd-warning-light);
    --warning-rgb: var(--slyd-warning-rgb);

    --danger: var(--slyd-danger);
    --danger-dark: var(--slyd-danger-dark);
    --danger-light: var(--slyd-danger-light);
    --danger-rgb: var(--slyd-danger-rgb);

    --info: var(--slyd-info);
    --info-rgb: var(--slyd-info-rgb);

    /* Text Colors */
    --text-primary: var(--slyd-text-primary);
    --text-secondary: var(--slyd-text-secondary);
    --text-tertiary: var(--slyd-text-tertiary);
    --text-muted: var(--slyd-text-muted);
    --text-dark-muted: var(--slyd-text-dark-muted);
    --text-inverse: var(--slyd-text-inverse);

    /* Background Colors */
    --bg-body: var(--slyd-bg-body);
    --bg-dark: var(--slyd-bg-dark);
    --bg-darker: var(--slyd-bg-darker);
    --bg-elevated: var(--slyd-bg-elevated);
    --bg-card: var(--slyd-bg-card);
    --bg-card-hover: var(--slyd-bg-card-hover);
    --bg-section-alt: var(--slyd-bg-dark); /* Map to existing bg-dark */
    --bg-glass: var(--slyd-bg-glass);
    --bg-glass-hover: var(--slyd-bg-glass-hover);
    --bg-overlay: var(--slyd-bg-overlay);

    /* Border Colors */
    --border-default: var(--slyd-border-default);
    --border-subtle: var(--slyd-border-subtle);
    --border-hover: var(--slyd-border-hover);
    --border-focus: var(--slyd-border-focus);
    --border-primary: var(--slyd-border-primary);
    --border-gold: var(--slyd-border-gold);
    --border-purple: var(--slyd-border-purple);

    /* Typography */
    --font-primary: var(--slyd-font-family-heading);
    --font-mono: var(--slyd-font-family-mono);

    --text-xs: var(--slyd-font-size-xs);
    --text-sm: var(--slyd-font-size-sm);
    --text-base: var(--slyd-font-size-base);
    --text-md: var(--slyd-font-size-base); /* Map to base */
    --text-lg: var(--slyd-font-size-lg);
    --text-xl: var(--slyd-font-size-xl);
    --text-h1: clamp(2.75rem, 4.5vw, 4rem);      /* Keep responsive clamp */
    --text-h2: clamp(2rem, 3.5vw, 2.75rem);
    --text-h3: clamp(1.5rem, 2.5vw, 1.75rem);
    --text-h4: var(--slyd-font-size-xl);
    --text-h5: var(--slyd-font-size-lg);
    --text-h6: var(--slyd-font-size-base);

    --font-normal: var(--slyd-font-weight-normal);
    --font-medium: var(--slyd-font-weight-medium);
    --font-semibold: var(--slyd-font-weight-semibold);
    --font-bold: var(--slyd-font-weight-bold);

    --leading-none: 1;
    --leading-tight: var(--slyd-line-height-tight);
    --leading-snug: 1.3;
    --leading-normal: var(--slyd-line-height-normal);
    --leading-relaxed: var(--slyd-line-height-relaxed);
    --leading-loose: 1.7;

    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.08em;
    --tracking-widest: 0.12em;

    /* Spacing */
    --space-0: 0;
    --space-1: var(--slyd-spacing-xs);
    --space-2: var(--slyd-spacing-sm);
    --space-3: 12px;
    --space-4: var(--slyd-spacing-md);
    --space-5: 20px;
    --space-6: var(--slyd-spacing-lg);
    --space-8: var(--slyd-spacing-xl);
    --space-10: 40px;
    --space-12: var(--slyd-spacing-2xl);
    --space-16: var(--slyd-spacing-3xl);
    --space-20: 80px;
    --space-24: var(--slyd-spacing-4xl);
    --space-32: 128px;

    --space-xs: var(--slyd-spacing-xs);
    --space-sm: var(--slyd-spacing-sm);
    --space-md: var(--slyd-spacing-md);
    --space-lg: var(--slyd-spacing-lg);
    --space-xl: var(--slyd-spacing-xl);
    --space-2xl: var(--slyd-spacing-2xl);
    --space-3xl: var(--slyd-spacing-3xl);
    --space-4xl: var(--slyd-spacing-4xl);

    /* Section spacing - keep website-specific values */
    --section-padding-y: 120px;
    --section-padding-y-mobile: 80px;

    /* Container - keep website-specific values */
    --container-max-width: var(--slyd-container-max-width);
    --container-padding: 48px;
    --container-padding-mobile: 24px;

    /* Border Radius */
    --radius-none: 0;
    --radius-sm: var(--slyd-radius-sm);
    --radius-md: var(--slyd-radius-md);
    --radius-lg: var(--slyd-radius-lg);
    --radius-xl: var(--slyd-radius-xl);
    --radius-2xl: var(--slyd-radius-2xl);
    --radius-3xl: 24px;
    --radius-full: var(--slyd-radius-full);

    /* Shadows */
    --shadow-sm: var(--slyd-shadow-sm);
    --shadow-md: var(--slyd-shadow-md);
    --shadow-lg: var(--slyd-shadow-lg);
    --shadow-xl: var(--slyd-shadow-xl);
    --shadow-glow-primary: var(--slyd-shadow-glow-primary);
    --shadow-glow-gold: var(--slyd-shadow-glow-gold);
    --shadow-glow-gold-hover: var(--slyd-shadow-glow-gold-hover);
    --shadow-glow-purple: var(--slyd-shadow-glow-purple);

    /* Transitions */
    --transition-fast: var(--slyd-transition-fast);
    --transition-normal: var(--slyd-transition);
    --transition-slow: var(--slyd-transition-slow);
    --transition-slower: 500ms ease;
    --transition-colors: color 250ms ease, background-color 250ms ease, border-color 250ms ease;
    --transition-transform: transform 250ms ease;
    --transition-all: all 250ms ease;

    /* Z-Index */
    --z-base: var(--slyd-z-base);
    --z-elevated: 10;
    --z-dropdown: var(--slyd-z-dropdown);
    --z-sticky: var(--slyd-z-sticky);
    --z-fixed: var(--slyd-z-fixed);
    --z-modal-backdrop: var(--slyd-z-modal-backdrop);
    --z-modal: var(--slyd-z-modal);
    --z-popover: var(--slyd-z-popover);
    --z-tooltip: var(--slyd-z-tooltip);
    --z-toast: var(--slyd-z-toast);
    --z-max: 9999;
}

/* ============================================================================
   2. CSS RESET & BASE STYLES
   ============================================================================ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    background-color: var(--bg-body);
    overflow-x: hidden;
}

/* Lock body scroll when modal/nav is open */
body.nav-open,
body.modal-open {
    overflow: hidden;
}

/* ============================================================================
   3. TYPOGRAPHY
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--text-primary);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }
h6 { font-size: var(--text-h6); }

p {
    margin-bottom: var(--space-4);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition-colors);
}

a:hover {
    color: var(--primary-light);
}

/* Monospace text */
code, pre, .mono {
    font-family: var(--font-mono);
}

/* Small/caption text */
small, .text-sm {
    font-size: var(--text-sm);
}

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

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

/* ============================================================================
   4. ACCESSIBILITY
   ============================================================================ */

/* Skip Link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: white;
    padding: var(--space-3) var(--space-6);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    text-decoration: none;
    z-index: var(--z-max);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
    outline: none;
    box-shadow: var(--shadow-glow-primary);
}

/* Focus Styles */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================================
   5. LAYOUT UTILITIES
   ============================================================================ */

/* Container */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

@media (max-width: 768px) {
    .container {
        padding: 0 var(--container-padding-mobile);
    }
}

/* Section */
.section {
    padding: var(--section-padding-y) 0;
}

.section--alt {
    background: var(--bg-section-alt);
}

@media (max-width: 768px) {
    .section {
        padding: var(--section-padding-y-mobile) 0;
    }
}

/* ============================================================================
   6. BUTTONS
   ============================================================================ */

/* Base button styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: 1;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-all);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn svg,
.btn .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Primary Button (Gold/CTA) */
.btn-gold,
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) 28px;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: 1;
    color: var(--text-inverse);
    background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-gold-dark) 100%);
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-all);
    box-shadow: var(--shadow-glow-gold);
}

.btn-gold:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-gold-hover);
    color: var(--text-inverse);
}

.btn-gold:active:not(:disabled),
.btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.btn-gold:disabled,
.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-gold svg,
.btn-gold .icon,
.btn-primary svg,
.btn-primary .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Secondary Button (Outline) */
.btn-outline,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: calc(var(--space-4) - 1px) 28px;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: 1;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-all);
}

.btn-outline:hover:not(:disabled),
.btn-secondary:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.05);
}

.btn-outline:disabled,
.btn-secondary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-outline svg,
.btn-outline .icon,
.btn-secondary svg,
.btn-secondary .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Cyan Button */
.btn-cyan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) 28px;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: 1;
    color: var(--text-inverse);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-all);
    box-shadow: var(--shadow-glow-primary);
}

.btn-cyan:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(var(--primary-rgb), 0.3);
    color: var(--text-inverse);
}

/* Ghost Button */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: 1;
    color: var(--text-tertiary);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-colors);
}

.btn-ghost:hover:not(:disabled) {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

/* Button Sizes */
.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

.btn-lg {
    padding: var(--space-5) var(--space-8);
    font-size: var(--text-md);
}

/* ============================================================================
   7. TAGS & BADGES
   ============================================================================ */

/* Tag (uppercase, small) */
.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: var(--radius-sm);
}

.tag--gold {
    color: var(--accent-gold);
    background: rgba(var(--accent-gold-rgb), 0.1);
    border-color: rgba(var(--accent-gold-rgb), 0.2);
}

.tag--purple {
    color: var(--accent-purple);
    background: rgba(var(--accent-purple-rgb), 0.1);
    border-color: rgba(var(--accent-purple-rgb), 0.2);
}

.tag--green {
    color: var(--secondary);
    background: rgba(var(--secondary-rgb), 0.1);
    border-color: rgba(var(--secondary-rgb), 0.2);
}

/* Badge (pill style) */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    background: var(--bg-elevated);
    border-radius: var(--radius-full);
}

.badge--success {
    color: var(--success);
    background: rgba(var(--success-rgb), 0.15);
}

.badge--warning {
    color: var(--warning);
    background: rgba(var(--warning-rgb), 0.15);
}

.badge--danger {
    color: var(--danger);
    background: rgba(var(--danger-rgb), 0.15);
}

.badge--info {
    color: var(--info);
    background: rgba(var(--info-rgb), 0.15);
}

/* ============================================================================
   8. CARDS
   ============================================================================ */

.card {
    background: var(--bg-glass);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    transition: var(--transition-all);
}

.card:hover {
    background: var(--bg-glass-hover);
    border-color: var(--border-hover);
}

.card--elevated {
    background: var(--bg-elevated);
}

.card--interactive {
    cursor: pointer;
}

.card--interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* ============================================================================
   9. ICONS
   ============================================================================ */

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
    flex-shrink: 0;
}

.icon-fallback {
    display: inline;
    font-size: 0.75em;
    color: var(--warning);
}

/* Icon container with background */
.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.icon-box--cyan {
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.1);
}

.icon-box--purple {
    color: var(--accent-purple);
    background: rgba(var(--accent-purple-rgb), 0.1);
}

.icon-box--gold {
    color: var(--accent-gold);
    background: rgba(var(--accent-gold-rgb), 0.1);
}

.icon-box--green {
    color: var(--secondary);
    background: rgba(var(--secondary-rgb), 0.1);
}

.icon-box--red {
    color: var(--danger);
    background: rgba(var(--danger-rgb), 0.1);
}

.icon-box svg,
.icon-box .icon {
    width: 24px;
    height: 24px;
}

/* ============================================================================
   10. FORM ELEMENTS
   ============================================================================ */

/* Input base */
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
    width: 100%;
    padding: var(--space-4);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    transition: var(--transition-colors);
}

.input:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

/* Label */
.label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-tertiary);
}

.label--required::after {
    content: " *";
    color: var(--danger);
}

/* Form group */
.form-group {
    margin-bottom: var(--space-6);
}

/* ============================================================================
   11. SECTION COMPONENTS
   ============================================================================ */

/* Section header pattern */
.section-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    margin-bottom: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.08);
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    border-radius: var(--radius-sm);
}

.section-title {
    font-size: var(--text-h2);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.section-desc {
    font-size: var(--text-lg);
    color: var(--text-tertiary);
    max-width: 700px;
    margin: 0 auto;
}

/* ============================================================================
   12. HERO PATTERNS
   ============================================================================ */

/* Split hero layout */
.hero {
    padding: var(--space-24) 0 var(--space-16);
    position: relative;
    overflow: hidden;
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }
}

.hero-content {
    max-width: 600px;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    margin-bottom: var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.08);
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    border-radius: var(--radius-sm);
}

.hero-headline {
    font-size: var(--text-h1);
    font-weight: var(--font-bold);
    line-height: 1.08;
    color: var(--text-primary);
    margin-bottom: var(--space-6);
}

.hero-headline .accent {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent-purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subhead {
    font-size: var(--text-xl);
    color: var(--text-tertiary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-8);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

@media (max-width: 480px) {
    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn-gold,
    .hero-actions .btn-outline {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   13. GRID LAYOUTS
   ============================================================================ */

/* Responsive grid */
.grid {
    display: grid;
    gap: var(--space-6);
}

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

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

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

@media (max-width: 1200px) {
    .grid--4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .grid--3,
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   14. UTILITY CLASSES
   ============================================================================ */

/* Text colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }
.text-cyan { color: var(--primary); }
.text-gold { color: var(--accent-gold); }
.text-purple { color: var(--accent-purple); }
.text-green { color: var(--secondary); }
.text-red { color: var(--danger); }

/* Background colors */
.bg-body { background-color: var(--bg-body); }
.bg-dark { background-color: var(--bg-dark); }
.bg-elevated { background-color: var(--bg-elevated); }
.bg-card { background-color: var(--bg-card); }

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Display */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

/* Flex utilities */
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Spacing */
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* ============================================================================
   15. ANIMATIONS
   ============================================================================ */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-fade-in { animation: fadeIn var(--transition-normal); }
.animate-fade-in-up { animation: fadeInUp var(--transition-slow); }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-spin { animation: spin 1s linear infinite; }

/* ============================================================================
   BENSON ICON STYLES
   ============================================================================ */

.benson-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.benson-icon-wrap img {
    display: block;
}

.benson-icon-wrap:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.7))
            drop-shadow(0 0 16px rgba(251, 191, 36, 0.5))
            drop-shadow(0 0 24px rgba(251, 191, 36, 0.3));
    animation: benson-glow-pulse 1.5s ease-in-out infinite;
}

.benson-icon-wrap.large:hover {
    transform: scale(1.08);
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.8))
            drop-shadow(0 0 24px rgba(251, 191, 36, 0.5))
            drop-shadow(0 0 40px rgba(251, 191, 36, 0.3));
}

@keyframes benson-glow-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.7))
                drop-shadow(0 0 16px rgba(251, 191, 36, 0.5))
                drop-shadow(0 0 24px rgba(251, 191, 36, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.9))
                drop-shadow(0 0 24px rgba(251, 191, 36, 0.6))
                drop-shadow(0 0 36px rgba(251, 191, 36, 0.4));
    }
}

/* ============================================================================
   16. RESPONSIVE BREAKPOINTS
   ============================================================================ */

/* Mobile first approach - these override desktop styles */

/* Small devices (landscape phones, 640px and down) */
@media (max-width: 640px) {
    :root {
        --container-padding: 16px;
        --section-padding-y: 60px;
    }
}

/* Medium devices (tablets, 768px and down) */
@media (max-width: 768px) {
    :root {
        --container-padding: 20px;
        --section-padding-y: 80px;
    }
}

/* Large devices (desktops, 1024px and down) */
@media (max-width: 1024px) {
    :root {
        --section-padding-y: 100px;
    }
}

/* ============================================================================
   END OF DESIGN SYSTEM
   ============================================================================ */