/* ==========================================================================
   QRI GOLDEN DESIGN SYSTEM
   A light, editorial theme with mathematical precision
   ========================================================================== */

:root {
    /* --- MATHEMATICAL CONSTANTS --- */
    --phi: 1.61803398875;
    --phi-inv: 0.61803398875;
    
    /* --- TRUE FIBONACCI SPACING (px -> rem at 16px base) --- */
    --fib-1: 0.0625rem;   /* 1px */
    --fib-2: 0.125rem;    /* 2px */
    --fib-3: 0.1875rem;   /* 3px */
    --fib-5: 0.3125rem;   /* 5px */
    --fib-8: 0.5rem;      /* 8px */
    --fib-13: 0.8125rem;  /* 13px */
    --fib-21: 1.3125rem;  /* 21px */
    --fib-34: 2.125rem;   /* 34px */
    --fib-55: 3.4375rem;  /* 55px */
    --fib-89: 5.5625rem;  /* 89px */
    --fib-144: 9rem;      /* 144px */

    /* --- 8px BASELINE GRID --- */
    --baseline: 0.5rem;
    --line-height-tight: 1.25;
    --line-height-base: 1.618;
    --line-height-loose: 1.75;

    /* --- GOLDEN THEME COLORS --- */
    --ga-bg: #ffffff;
    --ga-bg-alt: #faf9f7;
    --ga-surface: #fafafa;
    --ga-border: #e5e5e5;
    --ga-border-light: #f0f0f0;
    --ga-text: #1a1a1a;
    --ga-text-muted: #6b6b6b;
    --ga-text-light: #999999;
    --ga-accent: #D4AF37;
    --ga-accent-dark: #B8962F;
    --ga-link: #4a5568;
    
    /* --- SEMANTIC COLORS --- */
    --color-success: hsl(130, 70%, 45%);
    --color-warning: hsl(45, 90%, 50%);
    --color-error: hsl(10, 70%, 50%);
    --color-info: hsl(200, 80%, 50%);

    /* --- EASING CURVES --- */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);

    /* --- SHADOWS --- */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

/* --- BASE RESET --- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    line-height: var(--line-height-base);
    background: var(--ga-bg);
    color: var(--ga-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- ACCESSIBILITY: FOCUS STATES --- */
:focus-visible {
    outline: 2px solid var(--ga-accent);
    outline-offset: 2px;
}

a {
    color: var(--ga-text);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--ga-accent);
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

.ga-display {
    font-family: 'Bitter', Georgia, serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ga-text);
}

.ga-h1 { 
    font-family: 'Bitter', Georgia, serif; 
    font-size: 2.618rem; 
    font-weight: 600; 
    line-height: 1.2; 
    margin-bottom: var(--fib-21);
    color: var(--ga-text);
}

.ga-h2 { 
    font-family: 'Bitter', Georgia, serif; 
    font-size: 1.618rem; 
    font-weight: 600; 
    line-height: 1.3; 
    margin-bottom: var(--fib-13);
    color: var(--ga-text);
}

.ga-h3 { 
    font-family: 'Bitter', Georgia, serif; 
    font-size: 1.25rem; 
    font-weight: 600; 
    line-height: 1.4; 
    margin-bottom: var(--fib-8);
    color: var(--ga-text);
}

.ga-h4 {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: var(--fib-5);
    color: var(--ga-text);
}

.ga-body { 
    font-size: 1rem; 
    line-height: var(--line-height-base); 
    color: var(--ga-text); 
    max-width: 65ch; 
}

.ga-body-lg {
    font-size: 1.125rem;
    line-height: var(--line-height-base);
    color: var(--ga-text);
}

.ga-small { 
    font-size: 0.875rem; 
    color: var(--ga-text-muted); 
}

.ga-caption { 
    font-size: 0.75rem; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    color: var(--ga-text-muted); 
}

.ga-lead {
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--ga-text-muted);
    max-width: 65ch;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.ga-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fib-8);
    padding: var(--fib-13) var(--fib-21);
    font-family: 'Bitter', Georgia, serif;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    border: 2px solid var(--ga-text);
    background: transparent;
    color: var(--ga-text);
    cursor: pointer;
    transition: all 0.3s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
}

.ga-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--ga-text);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s var(--ease-out-expo);
    z-index: -1;
}

.ga-btn:hover { 
    color: white; 
}

.ga-btn:hover::before { 
    transform: scaleX(1); 
    transform-origin: left; 
}

.ga-btn:active { 
    transform: scale(0.98); 
}

.ga-btn-primary {
    background: var(--ga-text);
    color: white;
}

.ga-btn-primary::before { 
    background: var(--ga-accent); 
}

.ga-btn-primary:hover { 
    border-color: var(--ga-accent); 
}

.ga-btn-accent {
    background: var(--ga-accent);
    border-color: var(--ga-accent);
    color: white;
}

.ga-btn-accent::before {
    background: var(--ga-accent-dark);
}

.ga-btn-accent:hover {
    border-color: var(--ga-accent-dark);
}

.ga-btn-ghost {
    border: none;
    padding: var(--fib-8) var(--fib-13);
}

.ga-btn-ghost::before { 
    display: none; 
}

.ga-btn-ghost:hover { 
    color: var(--ga-accent); 
}

.ga-btn-ghost::after {
    content: '→';
    transition: transform 0.3s var(--ease-out-back);
}

.ga-btn-ghost:hover::after { 
    transform: translateX(4px); 
}

.ga-btn-lg {
    padding: var(--fib-21) var(--fib-34);
    font-size: 1rem;
}

.ga-btn-sm {
    padding: var(--fib-8) var(--fib-13);
    font-size: 0.75rem;
}

/* ==========================================================================
   CARDS
   ========================================================================== */

.ga-card {
    background: white;
    border: 1px solid var(--ga-border);
    padding: var(--fib-34);
    position: relative;
    transition: all 0.4s var(--ease-out-expo);
}

.ga-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: var(--ga-accent);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.4s var(--ease-out-expo);
}

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

.ga-card:hover::before { 
    transform: scaleY(1); 
}

.ga-card-meta {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ga-text-muted);
    margin-bottom: var(--fib-8);
}

.ga-card-flat {
    background: var(--ga-surface);
    border: none;
    padding: var(--fib-34);
}

.ga-card-flat::before {
    display: none;
}

.ga-card-flat:hover {
    box-shadow: none;
    transform: none;
    background: var(--ga-border-light);
}

/* Image Card with Overlay */
.ga-image-card {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    aspect-ratio: 16/10;
}

.ga-image-card img {
    width: 100%; 
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-out-expo);
}

.ga-image-card:hover img {
    transform: scale(1.05);
}

.ga-image-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--fib-21);
    color: white;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.ga-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--fib-21) var(--fib-34);
    background: white;
    border-bottom: 1px solid var(--ga-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.ga-nav-logo {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ga-text);
    text-decoration: none;
}

.ga-nav-logo:hover {
    color: var(--ga-text);
}

.ga-nav-links { 
    display: flex; 
    align-items: center; 
    gap: var(--fib-34); 
}

.ga-nav-link {
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ga-text-muted);
    text-decoration: none;
    transition: color 0.2s;
    position: relative;
}

.ga-nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0;
    width: 100%; height: 2px;
    background: var(--ga-accent);
    transform: scaleX(0);
    transition: transform 0.3s var(--ease-out-expo);
}

.ga-nav-link:hover { 
    color: var(--ga-text); 
}

.ga-nav-link:hover::after { 
    transform: scaleX(1); 
}

.ga-nav-link.active {
    color: var(--ga-text);
}

.ga-nav-link.active::after {
    transform: scaleX(1);
}

/* Mobile Navigation */
.ga-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--fib-8);
}

.ga-nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ga-text);
    margin: 5px 0;
    transition: all 0.3s;
}

@media (max-width: 768px) {
    .ga-nav-toggle {
        display: block;
    }
    
    .ga-nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: var(--fib-21);
        border-bottom: 1px solid var(--ga-border);
        gap: var(--fib-21);
    }
    
    .ga-nav-links.active {
        display: flex;
    }
}

/* ==========================================================================
   FORMS & INPUTS
   ========================================================================== */

.ga-input {
    width: 100%;
    padding: var(--fib-13);
    font-size: 1rem;
    font-family: inherit;
    border: none;
    border-bottom: 2px solid var(--ga-border);
    background: transparent;
    transition: border-color 0.3s;
}

.ga-input:focus {
    outline: none;
    border-color: var(--ga-text);
}

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

.ga-input-boxed {
    border: 1px solid var(--ga-border);
    padding: var(--fib-13) var(--fib-21);
}

.ga-input-boxed:focus {
    border-color: var(--ga-text);
}

.ga-textarea {
    min-height: 150px;
    resize: vertical;
}

.ga-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--fib-8);
    color: var(--ga-text);
}

/* ==========================================================================
   BLOCKQUOTES & TESTIMONIALS
   ========================================================================== */

.ga-blockquote {
    border-left: 4px solid var(--ga-accent);
    padding-left: var(--fib-21);
    margin: var(--fib-34) 0;
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.25rem;
    font-style: italic;
    color: var(--ga-text);
}

.ga-blockquote cite {
    display: block;
    margin-top: var(--fib-13);
    font-size: 0.875rem;
    font-style: normal;
    color: var(--ga-text-muted);
}

.ga-blockquote-large {
    font-size: 1.5rem;
    padding-left: var(--fib-34);
}

/* ==========================================================================
   BADGES & TAGS
   ========================================================================== */

.ga-badge {
    display: inline-block;
    padding: var(--fib-3) var(--fib-8);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid currentColor;
}

.ga-badge-success { color: var(--color-success); }
.ga-badge-warning { color: var(--color-warning); }
.ga-badge-info { color: var(--color-info); }
.ga-badge-error { color: var(--color-error); }

.ga-badge-filled {
    background: var(--ga-text);
    color: white;
    border-color: var(--ga-text);
}

.ga-badge-accent {
    background: var(--ga-accent);
    color: white;
    border-color: var(--ga-accent);
}

/* ==========================================================================
   PROGRESS BARS
   ========================================================================== */

.ga-progress {
    width: 100%;
    height: 8px;
    background: var(--ga-border);
    overflow: hidden;
    position: relative;
}

.ga-progress-fill {
    height: 100%;
    background: var(--ga-accent);
    transition: width 1s var(--ease-out-expo);
    position: relative;
}

.ga-progress-fill::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 30px; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
    animation: progress-shimmer 2s infinite;
}

@keyframes progress-shimmer {
    0% { opacity: 0; transform: translateX(-30px); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translateX(30px); }
}

.ga-progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--fib-8);
    font-size: 0.875rem;
}

/* ==========================================================================
   STATS & METRICS
   ========================================================================== */

.ga-stat {
    text-align: center;
    padding: var(--fib-21);
}

.ga-stat-value {
    font-family: 'Bitter', Georgia, serif;
    font-size: 3rem;
    font-weight: 700;
    color: var(--ga-accent);
    line-height: 1;
    margin-bottom: var(--fib-8);
}

.ga-stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ga-text-muted);
}

/* ==========================================================================
   TIMELINE
   ========================================================================== */

.ga-timeline {
    position: relative;
    padding-left: var(--fib-34);
}

.ga-timeline::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--ga-border);
}

.ga-timeline-item {
    position: relative;
    padding-bottom: var(--fib-34);
}

.ga-timeline-item::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--fib-34) - 5px);
    top: 4px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--ga-accent);
    border: 2px solid white;
}

.ga-timeline-date {
    font-size: 0.8rem;
    color: var(--ga-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--fib-5);
}

/* ==========================================================================
   ACCORDION / FAQ
   ========================================================================== */

.ga-accordion-item {
    border-bottom: 1px solid var(--ga-border);
}

.ga-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--fib-21) 0;
    cursor: pointer;
    font-weight: 600;
    font-family: 'Bitter', Georgia, serif;
    transition: color 0.2s;
}

.ga-accordion-header:hover {
    color: var(--ga-accent);
}

.ga-accordion-header::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform 0.3s;
}

.ga-accordion-item.active .ga-accordion-header::after {
    transform: rotate(45deg);
}

.ga-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease-out-expo);
}

.ga-accordion-item.active .ga-accordion-content {
    max-height: 1000px;
}

.ga-accordion-body {
    padding-bottom: var(--fib-21);
}

/* ==========================================================================
   TOOLTIPS
   ========================================================================== */

.ga-tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.ga-tooltip-trigger {
    border-bottom: 1px dotted var(--ga-text-muted);
    cursor: help;
}

.ga-tooltip-content {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: var(--fib-8) var(--fib-13);
    background: var(--ga-text);
    color: white;
    font-size: 0.8rem;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s var(--ease-out-back);
    z-index: 100;
}

.ga-tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--ga-text);
}

.ga-tooltip-wrapper:hover .ga-tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-12px);
}

/* ==========================================================================
   TABS
   ========================================================================== */

.ga-tabs {
    display: flex;
    gap: var(--fib-5);
    border-bottom: 1px solid var(--ga-border);
    padding-bottom: var(--fib-8);
}

.ga-tab {
    padding: var(--fib-8) var(--fib-13);
    font-size: 0.9rem;
    color: var(--ga-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    font-family: inherit;
}

.ga-tab::after {
    content: '';
    position: absolute;
    bottom: calc(-1 * var(--fib-8) - 1px);
    left: 0; width: 100%; height: 2px;
    background: var(--ga-accent);
    transform: scaleX(0);
    transition: transform 0.3s var(--ease-out-expo);
}

.ga-tab:hover { 
    color: var(--ga-text); 
}

.ga-tab.active { 
    color: var(--ga-text);
    font-weight: 600;
}

.ga-tab.active::after { 
    transform: scaleX(1); 
}

.ga-tab-content {
    display: none;
    padding-top: var(--fib-21);
}

.ga-tab-content.active {
    display: block;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.ga-footer {
    background: var(--ga-bg-alt);
    border-top: 1px solid var(--ga-border);
    padding: var(--fib-89) var(--fib-34) var(--fib-34);
}

.ga-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--fib-34);
    margin-bottom: var(--fib-55);
}

@media (max-width: 768px) {
    .ga-footer-grid { 
        grid-template-columns: 1fr 1fr; 
    }
}

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

.ga-footer-brand {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--fib-13);
}

.ga-footer-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ga-text-muted);
    margin-bottom: var(--fib-13);
}

.ga-footer-link {
    display: block;
    color: var(--ga-text);
    text-decoration: none;
    padding: var(--fib-5) 0;
    transition: color 0.2s;
}

.ga-footer-link:hover { 
    color: var(--ga-accent); 
}

.ga-footer-bottom {
    border-top: 1px solid var(--ga-border);
    padding-top: var(--fib-21);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--ga-text-muted);
    flex-wrap: wrap;
    gap: var(--fib-13);
}

.ga-footer-social {
    display: flex;
    gap: var(--fib-13);
}

.ga-footer-social a {
    color: var(--ga-text-muted);
    transition: color 0.2s;
}

.ga-footer-social a:hover {
    color: var(--ga-accent);
}

/* ==========================================================================
   HERO SECTIONS
   ========================================================================== */

.ga-hero {
    padding: var(--fib-144) var(--fib-34);
    text-align: center;
    position: relative;
}

.ga-hero-compact {
    padding: var(--fib-89) var(--fib-34);
}

.ga-hero-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D4AF37' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.ga-hero-image {
    background-size: cover;
    background-position: center;
    color: white;
}

.ga-hero-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6));
}

.ga-hero-image > * {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   SECTIONS & CONTAINERS
   ========================================================================== */

.ga-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--fib-21);
}

.ga-container-sm {
    max-width: 800px;
}

.ga-container-lg {
    max-width: 1400px;
}

.ga-section {
    padding: var(--fib-89) 0;
}

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

.ga-section-sm {
    padding: var(--fib-55) 0;
}

/* Section Headers */
.ga-section-header {
    text-align: center;
    margin-bottom: var(--fib-55);
}

.ga-section-title {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--ga-text);
    display: flex;
    align-items: center;
    gap: var(--fib-13);
    margin-bottom: var(--fib-13);
}

.ga-section-title::before {
    content: '';
    width: var(--fib-5);
    height: var(--fib-21);
    background: var(--ga-accent);
    border-radius: 2px;
}

.ga-section-subtitle {
    color: var(--ga-text-muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ==========================================================================
   GRID LAYOUTS
   ========================================================================== */

.ga-grid {
    display: grid;
    gap: var(--fib-21);
}

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

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

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

.ga-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

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

/* ==========================================================================
   LISTS
   ========================================================================== */

.ga-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ga-list li {
    padding: var(--fib-8) 0;
    border-bottom: 1px solid var(--ga-border-light);
}

.ga-list li:last-child {
    border-bottom: none;
}

.ga-list-icon {
    padding-left: var(--fib-34);
    position: relative;
}

.ga-list-icon li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--ga-accent);
}

/* ==========================================================================
   DIVIDERS
   ========================================================================== */

.ga-divider {
    border: none;
    border-top: 1px solid var(--ga-border);
    margin: var(--fib-34) 0;
}

.ga-divider-accent {
    border-top: 2px solid var(--ga-accent);
    width: 60px;
}

/* ==========================================================================
   CRYPTO & PAYMENT ICONS
   ========================================================================== */

.ga-crypto-icon {
    width: 40px; 
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.ga-crypto-btc { background: #f7931a; color: white; }
.ga-crypto-eth { background: #627eea; color: white; }
.ga-crypto-usdc { background: #2775ca; color: white; }

/* ==========================================================================
   UTILITIES
   ========================================================================== */

/* Flexbox */
.ga-flex { display: flex; }
.ga-flex-col { flex-direction: column; }
.ga-flex-wrap { flex-wrap: wrap; }
.ga-items-center { align-items: center; }
.ga-items-start { align-items: flex-start; }
.ga-items-end { align-items: flex-end; }
.ga-justify-center { justify-content: center; }
.ga-justify-between { justify-content: space-between; }
.ga-justify-end { justify-content: flex-end; }

/* Gaps */
.ga-gap-5 { gap: var(--fib-5); }
.ga-gap-8 { gap: var(--fib-8); }
.ga-gap-13 { gap: var(--fib-13); }
.ga-gap-21 { gap: var(--fib-21); }
.ga-gap-34 { gap: var(--fib-34); }

/* Margins */
.ga-mt-0 { margin-top: 0; }
.ga-mt-8 { margin-top: var(--fib-8); }
.ga-mt-13 { margin-top: var(--fib-13); }
.ga-mt-21 { margin-top: var(--fib-21); }
.ga-mt-34 { margin-top: var(--fib-34); }
.ga-mt-55 { margin-top: var(--fib-55); }

.ga-mb-0 { margin-bottom: 0; }
.ga-mb-8 { margin-bottom: var(--fib-8); }
.ga-mb-13 { margin-bottom: var(--fib-13); }
.ga-mb-21 { margin-bottom: var(--fib-21); }
.ga-mb-34 { margin-bottom: var(--fib-34); }
.ga-mb-55 { margin-bottom: var(--fib-55); }

/* Padding */
.ga-p-21 { padding: var(--fib-21); }
.ga-p-34 { padding: var(--fib-34); }
.ga-p-55 { padding: var(--fib-55); }

.ga-py-21 { padding-top: var(--fib-21); padding-bottom: var(--fib-21); }
.ga-py-34 { padding-top: var(--fib-34); padding-bottom: var(--fib-34); }
.ga-py-55 { padding-top: var(--fib-55); padding-bottom: var(--fib-55); }

/* Text */
.ga-text-center { text-align: center; }
.ga-text-right { text-align: right; }
.ga-text-muted { color: var(--ga-text-muted); }
.ga-text-accent { color: var(--ga-accent); }

/* Width */
.ga-w-full { width: 100%; }
.ga-max-w-prose { max-width: 65ch; }
.ga-mx-auto { margin-left: auto; margin-right: auto; }

/* Visibility */
.ga-hidden { display: none; }

@media (max-width: 768px) {
    .ga-hidden-mobile { display: none; }
}

@media (min-width: 769px) {
    .ga-hidden-desktop { display: none; }
}


/* ==========================================================================
   KURAMOTO SYSTEM OVERRIDES
   ========================================================================== */

:root {
    --global-hue: 0deg;
    --global-sync: 0;
}

body.kuramoto-active {
    /* Subtle light background that shifts with global phase */
    background: radial-gradient(
        circle at top,
        oklch(99% 0.01 var(--global-hue)),
        oklch(96% 0.02 var(--global-hue))
    );
    transition: background 0.5s ease;
}

/* Oscillator Elements */
.kuramoto-active .ga-btn,
.kuramoto-active .research-card,
.kuramoto-active .cta-card,
.kuramoto-active .approach-card,
.kuramoto-active .ga-nav-link,
.kuramoto-active .ga-section-title,
.kuramoto-active .tool-link {
    /* Default phase if JS hasn't set it yet */
    --phase: 0deg;
    --cluster-hue-shift: 0deg;
    
    /* Compute the effective hue */
    --kuramoto-hue: calc(var(--phase) + var(--cluster-hue-shift));
    
    /* Override the design system accent color */
    /* 70% Lightness = Pastel, 0.16 Chroma = Vibrant but readable */
    --ga-accent: oklch(70% 0.16 var(--kuramoto-hue));
    --ga-accent-dark: oklch(60% 0.16 var(--kuramoto-hue));
    
    transition: --ga-accent 0.1s linear, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Research Cards: Use the hue for the overlay gradient */
.kuramoto-active .research-card-overlay {
    background: linear-gradient(to top, oklch(20% 0.1 var(--kuramoto-hue) / 0.9) 0%, transparent 100%);
}

/* Hero Tagline */
.kuramoto-active .hero-tagline {
    --phase: 0deg;
    --kuramoto-hue: var(--phase); 
    color: oklch(65% 0.2 var(--kuramoto-hue));
}

/* Stats */
.kuramoto-active .ga-stat-value {
    --phase: 0deg; 
    color: oklch(70% 0.18 var(--phase));
}

/* Clear static hero background to let global field show */
.kuramoto-active .hero-home {
    background: none; 
}