/* ==========================================================================
   1. IMPORTS
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500&display=swap');

/* ==========================================================================
   2. GLOBAL VARIABLES (Preserved strictly as requested)
   ========================================================================== */
:root {
  /* Brand Colours */
    --color-primary: #FF8C61;
    --color-primary-dark: #e5723f;
    --color-secondary: #6CB4EE;
    --color-accent: #B588D1;
  /* Text */
    --color-text: #171717;
    --color-text-muted: #525252;
    --color-heading: #171717;
  /* Backgrounds */
    --color-bg: #fafafa;
    --color-bg-alt: #f5f5f5;
    --color-surface: #f5f5f5;
    --color-border: #e5e5e5;
  /* Status */
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-error: #dc2626;
  /* Typography */
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-heading: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-size-base: 18px;
    --line-height-base: 1.6;
  /* Sizing & Layout */
    --radius: 12px;
    --radius-lg: 12px;
    --max-width: 90rem;
    --spacing-section: 80px;
  /* Tailwind Neutral Palette Equivs */
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0a0a0a;
  --color-bg-dark: #0a0a0a;
  /* Glass UI & Animation */
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 1);
  --glass-blur: blur(24px);
  --glass-dark-bg: rgba(23, 23, 23, 0.5);
  --glass-dark-border: rgba(255, 255, 255, 0.1);
  --glass-dark-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
  --ease-brand: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   3. CSS RESET & BASE STYLES
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    overflow-x: hidden;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

/* ==========================================================================
   4. TYPOGRAPHY (From Brand Guidelines)
   ========================================================================== */
h1, .text-display {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(3rem, 6vw, 6rem);
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: var(--color-heading);
}

h2, .text-section-title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-heading);
}

h3, .text-subtitle {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--color-heading);
}

p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    max-width: 600px; /* Strict brand rule */
}

.text-small {
    font-size: 0.875rem;
    line-height: 1.6;
}

.micro-label {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height: 1;
}

/* ==========================================================================
   5. GLOBAL COMPONENTS
   ========================================================================== */

/* Glass UI Components */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--glass-shadow);
    transition: all var(--transition-base);
}

.glass-card-dark {
    background: var(--glass-dark-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-dark-border);
    border-radius: var(--radius);
    box-shadow: var(--glass-dark-shadow);
    transition: all var(--transition-base);
    color: var(--neutral-50);
}

.glass-card-dark p {
    color: var(--neutral-400);
}

.glass-card-dark h1, .glass-card-dark h2, .glass-card-dark h3 {
    color: var(--neutral-50);
}

/* Overlays & Textures */
.grain-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.structural-grid-dark {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
}

.structural-grid-light {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* ==========================================================================
   6. UTILITIES
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section-padding {
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section);
}

/* Abstract Image Treatment */
.sleek-image {
    filter: contrast(1.1) opacity(0.6);
    mix-blend-mode: multiply;
    transition: filter var(--transition-base);
}

/* Icon Resets */
svg.brand-icon {
    stroke-width: 1.2;
    fill: currentColor;
    fill-opacity: 0.1;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}