*,
   *::before,
   *::after {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   html {
       font-size: 16px;
       scroll-behavior: smooth;
       -webkit-text-size-adjust: 100%;
       -ms-text-size-adjust: 100%;
   }
   
   body {
       font-family: var(--font-body);
       background-color: var(--bg-primary);
       color: var(--text-primary);
       line-height: 1.6;
       overflow-x: hidden;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
   }

   
   :root {
  
       --brand-red-primary: #d32f2f;
       --brand-red-secondary: #b71c1c;
       --brand-red-light: #ff5252;
       --brand-red-neon: #ff4444;
       
       --brand-blue-primary: #1976d2;
       --brand-blue-secondary: #0d47a1;
       --brand-blue-light: #42a5f5;
       --brand-blue-neon: #2196f3;
       
       --brand-yellow-primary: #ffc107;
       --brand-yellow-secondary: #ff8f00;
       --brand-yellow-light: #ffeb3b;
       --brand-yellow-mustard: #ffa000;
       
  
       --bg-primary: #0f0f0f;
       --bg-secondary: #1a1a1a;
       --bg-tertiary: #262626;
       --bg-card: #2d2d2d;
       --bg-overlay: rgba(15, 15, 15, 0.95);
       --bg-glass: rgba(255, 255, 255, 0.08);
       --bg-glass-hover: rgba(255, 255, 255, 0.12);
       
       --text-primary: #fafafa;
       --text-secondary: rgba(250, 250, 250, 0.8);
       --text-tertiary: rgba(250, 250, 250, 0.6);
       --text-muted: rgba(250, 250, 250, 0.4);
       --text-disabled: rgba(250, 250, 250, 0.2);
       
       --border-primary: rgba(255, 255, 255, 0.1);
       --border-secondary: rgba(255, 255, 255, 0.05);
       --border-accent: rgba(211, 47, 47, 0.3);
       --border-focus: rgba(33, 150, 243, 0.5);
       

       --font-display: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
       --font-heading: 'Interstate', 'Helvetica Neue', 'Arial', sans-serif;
       --font-body: 'Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', sans-serif;
       --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
       
       --fw-light: 300;
       --fw-regular: 400;
       --fw-medium: 500;
       --fw-semibold: 600;
       --fw-bold: 700;
       --fw-extrabold: 800;
       --fw-black: 900;
       
       --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
       --fs-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
       --fs-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
       --fs-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
       --fs-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
       --fs-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
       --fs-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.25rem);
       --fs-4xl: clamp(2.25rem, 2rem + 1.25vw, 3rem);
       --fs-5xl: clamp(3rem, 2.5rem + 2.5vw, 4rem);
       --fs-6xl: clamp(4rem, 3rem + 5vw, 6rem);
       
       --lh-tight: 1.1;
       --lh-snug: 1.2;
       --lh-normal: 1.5;
       --lh-relaxed: 1.6;
       --lh-loose: 1.8;
       
       --ls-tighter: -0.05em;
       --ls-tight: -0.025em;
       --ls-normal: 0;
       --ls-wide: 0.025em;
       --ls-wider: 0.05em;
       --ls-widest: 0.1em;
  
       --space-px: 1px;
       --space-0: 0;
       --space-1: 0.25rem;   
       --space-2: 0.5rem;   
       --space-3: 0.75rem;   
       --space-4: 1rem;      
       --space-5: 1.25rem;   
       --space-6: 1.5rem;    
       --space-8: 2rem;     
       --space-10: 2.5rem;   
       --space-12: 3rem;   
       --space-16: 4rem;     
       --space-20: 5rem;    
       --space-24: 6rem;     
       --space-32: 8rem;     
       --space-40: 10rem;    
       --space-48: 12rem;   
       --space-56: 14rem;    
       --space-64: 16rem;    
       

       --container-xs: 480px;
       --container-sm: 640px;
       --container-md: 768px;
       --container-lg: 1080px;
       --container-xl: 1200px;
       --container-2xl: 1536px;
       --container-max: 1600px;
       
       --container-padding: var(--space-4);
       --container-padding-sm: var(--space-6);
       --container-padding-lg: var(--space-8);
       
       --section-padding-y: var(--space-16);
       --section-padding-y-sm: var(--space-12);
       --section-padding-y-lg: var(--space-24);
       
       
       --radius-none: 0;
       --radius-sm: 0.25rem;    
       --radius-base: 0.5rem;  
       --radius-md: 0.75rem;    
       --radius-lg: 1rem;       
       --radius-xl: 1.5rem;     
       --radius-2xl: 2rem;      
       --radius-full: 9999px;
       
       
       --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
       --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
       --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
       --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
       --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
       --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
       --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
       
       --shadow-brand-red: 0 10px 30px rgba(211, 47, 47, 0.3);
       --shadow-brand-blue: 0 10px 30px rgba(25, 118, 210, 0.3);
       --shadow-brand-yellow: 0 10px 30px rgba(255, 193, 7, 0.3);
       

       --ease-linear: linear;
       --ease-in: cubic-bezier(0.4, 0, 1, 1);
       --ease-out: cubic-bezier(0, 0, 0.2, 1);
       --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
       --ease-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
       --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
       --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
       
       --duration-fast: 150ms;
       --duration-normal: 300ms;
       --duration-slow: 500ms;
       --duration-slower: 750ms;
       
       --transition-fast: all var(--duration-fast) var(--ease-out);
       --transition-normal: all var(--duration-normal) var(--ease-in-out);
       --transition-slow: all var(--duration-slow) var(--ease-in-out);
       --transition-bounce: all var(--duration-normal) var(--ease-bounce);
       
       
       --z-hide: -1;
       --z-auto: auto;
       --z-base: 0;
       --z-docked: 10;
       --z-dropdown: 1000;
       --z-sticky: 1010;
       --z-banner: 1020;
       --z-overlay: 1030;
       --z-modal: 1040;
       --z-popover: 1050;
       --z-skiplink: 1060;
       --z-toast: 1070;
       --z-tooltip: 1080;
       
 
       --bp-xs: 480px;
       --bp-sm: 640px;
       --bp-md: 768px;
       --bp-lg: 1024px;
       --bp-xl: 1280px;
       --bp-2xl: 1536px;
       
  
       --navbar-height: 70px;
       --navbar-height-mobile: 60px;
       --navbar-bg: var(--bg-overlay);
       --navbar-backdrop: blur(20px);
       
       --hero-min-height: 100vh;
       --hero-padding: var(--space-16);
       
       --card-bg: var(--bg-card);
       --card-border: var(--border-primary);
       --card-radius: var(--radius-lg);
       --card-shadow: var(--shadow-lg);
       
       --btn-padding-sm: var(--space-2) var(--space-4);
       --btn-padding-md: var(--space-3) var(--space-6);
       --btn-padding-lg: var(--space-4) var(--space-8);
       --btn-radius: var(--radius-base);
       --btn-font-weight: var(--fw-semibold);
       
       --input-bg: var(--bg-tertiary);
       --input-border: var(--border-primary);
       --input-focus-border: var(--border-focus);
       --input-padding: var(--space-3) var(--space-4);
       --input-radius: var(--radius-base);
   }
   
 
   .container {
       width: 100%;
       margin-left: auto;
       margin-right: auto;
       padding-left: var(--container-padding);
       padding-right: var(--container-padding);
   }
   
   @media (min-width: 480px) {
       .container {
           max-width: var(--container-xs);
       }
   }
   
   @media (min-width: 640px) {
       .container {
           max-width: var(--container-sm);
           padding-left: var(--container-padding-sm);
           padding-right: var(--container-padding-sm);
       }
   }
   
   @media (min-width: 768px) {
       .container {
           max-width: var(--container-md);
       }
   }
   
   @media (min-width: 1024px) {
       .container {
           max-width: var(--container-lg);
           padding-left: var(--container-padding-lg);
           padding-right: var(--container-padding-lg);
       }
   }
   
   @media (min-width: 1280px) {
       .container {
           max-width: var(--container-xl);
       }
   }
   
   @media (min-width: 1536px) {
       .container {
           max-width: var(--container-2xl);
       }
   }
   
   @media (min-width: 1600px) {
       .container {
           max-width: var(--container-max);
       }
   }
   

   .font-display { font-family: var(--font-display); }
   .font-heading { font-family: var(--font-heading); }
   .font-body { font-family: var(--font-body); }
   .font-mono { font-family: var(--font-mono); }
   
   .text-xs { font-size: var(--fs-xs); }
   .text-sm { font-size: var(--fs-sm); }
   .text-base { font-size: var(--fs-base); }
   .text-lg { font-size: var(--fs-lg); }
   .text-xl { font-size: var(--fs-xl); }
   .text-2xl { font-size: var(--fs-2xl); }
   .text-3xl { font-size: var(--fs-3xl); }
   .text-4xl { font-size: var(--fs-4xl); }
   .text-5xl { font-size: var(--fs-5xl); }
   .text-6xl { font-size: var(--fs-6xl); }
   
   .fw-light { font-weight: var(--fw-light); }
   .fw-regular { font-weight: var(--fw-regular); }
   .fw-medium { font-weight: var(--fw-medium); }
   .fw-semibold { font-weight: var(--fw-semibold); }
   .fw-bold { font-weight: var(--fw-bold); }
   .fw-extrabold { font-weight: var(--fw-extrabold); }
   .fw-black { font-weight: var(--fw-black); }
   
   .text-center { text-align: center; }
   .text-left { text-align: left; }
   .text-right { text-align: right; }
   
   .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-brand-red { color: var(--brand-red-primary); }
   .text-brand-blue { color: var(--brand-blue-primary); }
   .text-brand-yellow { color: var(--brand-yellow-primary); }
   
   .uppercase { text-transform: uppercase; }
   .lowercase { text-transform: lowercase; }
   .capitalize { text-transform: capitalize; }
   
   .tracking-tight { letter-spacing: var(--ls-tight); }
   .tracking-normal { letter-spacing: var(--ls-normal); }
   .tracking-wide { letter-spacing: var(--ls-wide); }
   .tracking-wider { letter-spacing: var(--ls-wider); }
   .tracking-widest { letter-spacing: var(--ls-widest); }
   
   .p-0 { padding: var(--space-0); }
   .p-1 { padding: var(--space-1); }
   .p-2 { padding: var(--space-2); }
   .p-3 { padding: var(--space-3); }
   .p-4 { padding: var(--space-4); }
   .p-5 { padding: var(--space-5); }
   .p-6 { padding: var(--space-6); }
   .p-8 { padding: var(--space-8); }
   .p-10 { padding: var(--space-10); }
   .p-12 { padding: var(--space-12); }
   .p-16 { padding: var(--space-16); }
   .p-20 { padding: var(--space-20); }
   .p-24 { padding: var(--space-24); }
   
   .py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
   .py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
   .py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
   .py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
   .py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
   .py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
   .py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
   .py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
   .py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }
   .py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
   .py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
   .py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
   .py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); }
   
   .px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
   .px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
   .px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
   .px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
   .px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
   .px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
   .px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
   .px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
   .px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }
   .px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }
   .px-16 { padding-left: var(--space-16); padding-right: var(--space-16); }
   .px-20 { padding-left: var(--space-20); padding-right: var(--space-20); }
   .px-24 { padding-left: var(--space-24); padding-right: var(--space-24); }
   
   .m-0 { margin: var(--space-0); }
   .m-1 { margin: var(--space-1); }
   .m-2 { margin: var(--space-2); }
   .m-3 { margin: var(--space-3); }
   .m-4 { margin: var(--space-4); }
   .m-5 { margin: var(--space-5); }
   .m-6 { margin: var(--space-6); }
   .m-8 { margin: var(--space-8); }
   .m-10 { margin: var(--space-10); }
   .m-12 { margin: var(--space-12); }
   .m-16 { margin: var(--space-16); }
   .m-auto { margin: auto; }
   
   .my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
   .my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
   .my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
   .my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
   .my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
   .my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
   .my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
   .my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
   .my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }
   .my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); }
   .my-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); }
   .my-auto { margin-top: auto; margin-bottom: auto; }
   
   .mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); }
   .mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
   .mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
   .mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
   .mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
   .mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); }
   .mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
   .mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }
   .mx-10 { margin-left: var(--space-10); margin-right: var(--space-10); }
   .mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); }
   .mx-16 { margin-left: var(--space-16); margin-right: var(--space-16); }
   .mx-auto { margin-left: auto; margin-right: auto; }
   
   .flex { display: flex; }
   .inline-flex { display: inline-flex; }
   .grid { display: grid; }
   .block { display: block; }
   .inline-block { display: inline-block; }
   .hidden { display: none; }
   
   .flex-col { flex-direction: column; }
   .flex-row { flex-direction: row; }
   .flex-wrap { flex-wrap: wrap; }
   .flex-nowrap { flex-wrap: nowrap; }
   
   .items-start { align-items: flex-start; }
   .items-center { align-items: center; }
   .items-end { align-items: flex-end; }
   .items-stretch { align-items: stretch; }
   
   .justify-start { justify-content: flex-start; }
   .justify-center { justify-content: center; }
   .justify-end { justify-content: flex-end; }
   .justify-between { justify-content: space-between; }
   .justify-around { justify-content: space-around; }
   .justify-evenly { justify-content: space-evenly; }
   
   .gap-0 { gap: var(--space-0); }
   .gap-1 { gap: var(--space-1); }
   .gap-2 { gap: var(--space-2); }
   .gap-3 { gap: var(--space-3); }
   .gap-4 { gap: var(--space-4); }
   .gap-5 { gap: var(--space-5); }
   .gap-6 { gap: var(--space-6); }
   .gap-8 { gap: var(--space-8); }
   .gap-10 { gap: var(--space-10); }
   .gap-12 { gap: var(--space-12); }
   .gap-16 { gap: var(--space-16); }
   
   .relative { position: relative; }
   .absolute { position: absolute; }
   .fixed { position: fixed; }
   .sticky { position: sticky; }
   
   .bg-primary { background-color: var(--bg-primary); }
   .bg-secondary { background-color: var(--bg-secondary); }
   .bg-tertiary { background-color: var(--bg-tertiary); }
   .bg-card { background-color: var(--bg-card); }
   .bg-glass { background-color: var(--bg-glass); backdrop-filter: blur(10px); }
   
   .bg-brand-red { background-color: var(--brand-red-primary); }
   .bg-brand-blue { background-color: var(--brand-blue-primary); }
   .bg-brand-yellow { background-color: var(--brand-yellow-primary); }
   
   .border { border: 1px solid var(--border-primary); }
   .border-2 { border: 2px solid var(--border-primary); }
   .border-t { border-top: 1px solid var(--border-primary); }
   .border-b { border-bottom: 1px solid var(--border-primary); }
   .border-l { border-left: 1px solid var(--border-primary); }
   .border-r { border-right: 1px solid var(--border-primary); }
   
   .border-brand-red { border-color: var(--brand-red-primary); }
   .border-brand-blue { border-color: var(--brand-blue-primary); }
   .border-brand-yellow { border-color: var(--brand-yellow-primary); }
   
   .rounded-none { border-radius: var(--radius-none); }
   .rounded-sm { border-radius: var(--radius-sm); }
   .rounded { border-radius: var(--radius-base); }
   .rounded-md { border-radius: var(--radius-md); }
   .rounded-lg { border-radius: var(--radius-lg); }
   .rounded-xl { border-radius: var(--radius-xl); }
   .rounded-2xl { border-radius: var(--radius-2xl); }
   .rounded-full { border-radius: var(--radius-full); }
   
   .shadow-xs { box-shadow: var(--shadow-xs); }
   .shadow-sm { box-shadow: var(--shadow-sm); }
   .shadow { box-shadow: var(--shadow-base); }
   .shadow-md { box-shadow: var(--shadow-md); }
   .shadow-lg { box-shadow: var(--shadow-lg); }
   .shadow-xl { box-shadow: var(--shadow-xl); }
   .shadow-2xl { box-shadow: var(--shadow-2xl); }
   
   .shadow-brand-red { box-shadow: var(--shadow-brand-red); }
   .shadow-brand-blue { box-shadow: var(--shadow-brand-blue); }
   .shadow-brand-yellow { box-shadow: var(--shadow-brand-yellow); }
   
   .transition { transition: var(--transition-normal); }
   .transition-fast { transition: var(--transition-fast); }
   .transition-slow { transition: var(--transition-slow); }
   .transition-bounce { transition: var(--transition-bounce); }

   .visible { visibility: visible; }
   .invisible { visibility: hidden; }
   
   .overflow-auto { overflow: auto; }
   .overflow-hidden { overflow: hidden; }
   .overflow-visible { overflow: visible; }
   .overflow-x-auto { overflow-x: auto; }
   .overflow-x-hidden { overflow-x: hidden; }
   .overflow-y-auto { overflow-y: auto; }
   .overflow-y-hidden { overflow-y: hidden; }
   
   .z-auto { z-index: var(--z-auto); }
   .z-base { z-index: var(--z-base); }
   .z-docked { z-index: var(--z-docked); }
   .z-dropdown { z-index: var(--z-dropdown); }
   .z-sticky { z-index: var(--z-sticky); }
   .z-modal { z-index: var(--z-modal); }
   .z-tooltip { z-index: var(--z-tooltip); }
   
   @media (min-width: 480px) {
       .xs\:block { display: block; }
       .xs\:hidden { display: none; }
       .xs\:flex { display: flex; }
       .xs\:grid { display: grid; }
       
       .xs\:text-sm { font-size: var(--fs-sm); }
       .xs\:text-base { font-size: var(--fs-base); }
       .xs\:text-lg { font-size: var(--fs-lg); }
       .xs\:text-xl { font-size: var(--fs-xl); }
       
       .xs\:p-2 { padding: var(--space-2); }
       .xs\:p-4 { padding: var(--space-4); }
       .xs\:p-6 { padding: var(--space-6); }
       .xs\:p-8 { padding: var(--space-8); }
       
       .xs\:px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
       .xs\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
       .xs\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
       
       .xs\:py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
       .xs\:py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
       .xs\:py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
       
       .xs\:gap-4 { gap: var(--space-4); }
       .xs\:gap-6 { gap: var(--space-6); }
       .xs\:gap-8 { gap: var(--space-8); }
   }
   
   @media (min-width: 640px) {
       .sm\:block { display: block; }
       .sm\:hidden { display: none; }
       .sm\:flex { display: flex; }
       .sm\:grid { display: grid; }
       
       .sm\:flex-row { flex-direction: row; }
       .sm\:flex-col { flex-direction: column; }
       
       .sm\:text-base { font-size: var(--fs-base); }
       .sm\:text-lg { font-size: var(--fs-lg); }
       .sm\:text-xl { font-size: var(--fs-xl); }
       .sm\:text-2xl { font-size: var(--fs-2xl); }
       .sm\:text-3xl { font-size: var(--fs-3xl); }
       
       .sm\:p-4 { padding: var(--space-4); }
       .sm\:p-6 { padding: var(--space-6); }
       .sm\:p-8 { padding: var(--space-8); }
       .sm\:p-12 { padding: var(--space-12); }
       
       .sm\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
       .sm\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
       .sm\:px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }
       
       .sm\:py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
       .sm\:py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
       .sm\:py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
       
       .sm\:gap-6 { gap: var(--space-6); }
       .sm\:gap-8 { gap: var(--space-8); }
       .sm\:gap-12 { gap: var(--space-12); }
   }
   
   @media (min-width: 768px) {
       .md\:block { display: block; }
       .md\:hidden { display: none; }
       .md\:flex { display: flex; }
       .md\:grid { display: grid; }
       
       .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
       .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
       .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
       .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
       
       .md\:flex-row { flex-direction: row; }
       .md\:flex-col { flex-direction: column; }
       
       .md\:text-lg { font-size: var(--fs-lg); }
       .md\:text-xl { font-size: var(--fs-xl); }
       .md\:text-2xl { font-size: var(--fs-2xl); }
       .md\:text-3xl { font-size: var(--fs-3xl); }
       .md\:text-4xl { font-size: var(--fs-4xl); }
       
       .md\:p-6 { padding: var(--space-6); }
       .md\:p-8 { padding: var(--space-8); }
       .md\:p-12 { padding: var(--space-12); }
       .md\:p-16 { padding: var(--space-16); }
       
       .md\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
       .md\:px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }
       .md\:px-16 { padding-left: var(--space-16); padding-right: var(--space-16); }
       
       .md\:py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
       .md\:py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
       .md\:py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
       
       .md\:gap-8 { gap: var(--space-8); }
       .md\:gap-12 { gap: var(--space-12); }
       .md\:gap-16 { gap: var(--space-16); }
   }
   
   @media (min-width: 1024px) {
       .lg\:block { display: block; }
       .lg\:hidden { display: none; }
       .lg\:flex { display: flex; }
       .lg\:grid { display: grid; }
       
       .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
       .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
       .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
       .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
       .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
       
       .lg\:flex-row { flex-direction: row; }
       .lg\:flex-col { flex-direction: column; }
       
       .lg\:text-xl { font-size: var(--fs-xl); }
       .lg\:text-2xl { font-size: var(--fs-2xl); }
       .lg\:text-3xl { font-size: var(--fs-3xl); }
       .lg\:text-4xl { font-size: var(--fs-4xl); }
       .lg\:text-5xl { font-size: var(--fs-5xl); }
       
       .lg\:p-8 { padding: var(--space-8); }
       .lg\:p-12 { padding: var(--space-12); }
       .lg\:p-16 { padding: var(--space-16); }
       .lg\:p-20 { padding: var(--space-20); }
       
       .lg\:px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }
       .lg\:px-16 { padding-left: var(--space-16); padding-right: var(--space-16); }
       .lg\:px-20 { padding-left: var(--space-20); padding-right: var(--space-20); }
       
       .lg\:py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
       .lg\:py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
       .lg\:py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
       
       .lg\:gap-12 { gap: var(--space-12); }
       .lg\:gap-16 { gap: var(--space-16); }
       .lg\:gap-20 { gap: var(--space-20); }
   }
   
   @media (min-width: 1280px) {
       .xl\:block { display: block; }
       .xl\:hidden { display: none; }
       .xl\:flex { display: flex; }
       .xl\:grid { display: grid; }
       
       .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
       .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
       .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
       .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
       .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
       
       .xl\:text-2xl { font-size: var(--fs-2xl); }
       .xl\:text-3xl { font-size: var(--fs-3xl); }
       .xl\:text-4xl { font-size: var(--fs-4xl); }
       .xl\:text-5xl { font-size: var(--fs-5xl); }
       .xl\:text-6xl { font-size: var(--fs-6xl); }
       
       .xl\:p-16 { padding: var(--space-16); }
       .xl\:p-20 { padding: var(--space-20); }
       .xl\:p-24 { padding: var(--space-24); }
       
       .xl\:px-20 { padding-left: var(--space-20); padding-right: var(--space-20); }
       .xl\:px-24 { padding-left: var(--space-24); padding-right: var(--space-24); }
       
       .xl\:py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
       .xl\:py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); }
       
       .xl\:gap-16 { gap: var(--space-16); }
       .xl\:gap-20 { gap: var(--space-20); }
       .xl\:gap-24 { gap: var(--space-24); }
   }
   
 
   .section {
       padding-top: var(--section-padding-y);
       padding-bottom: var(--section-padding-y);
   }
   
   .section-sm {
       padding-top: var(--section-padding-y-sm);
       padding-bottom: var(--section-padding-y-sm);
   }
   
   .section-lg {
       padding-top: var(--section-padding-y-lg);
       padding-bottom: var(--section-padding-y-lg);
   }
   
   .card {
       background-color: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: var(--card-radius);
       box-shadow: var(--card-shadow);
       transition: var(--transition-normal);
   }
   
   .card:hover {
       transform: translateY(-4px);
       box-shadow: var(--shadow-xl);
   }
   
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: var(--space-2);
       padding: var(--btn-padding-md);
       border: none;
       border-radius: var(--btn-radius);
       font-family: var(--font-heading);
       font-weight: var(--btn-font-weight);
       text-decoration: none;
       text-transform: uppercase;
       letter-spacing: var(--ls-wide);
       cursor: pointer;
       transition: var(--transition-bounce);
       position: relative;
       overflow: hidden;
   }
   
   .btn-sm {
       padding: var(--btn-padding-sm);
       font-size: var(--fs-sm);
   }
   
   .btn-lg {
       padding: var(--btn-padding-lg);
       font-size: var(--fs-lg);
   }
   
   .btn-primary {
       background: linear-gradient(45deg, var(--brand-red-primary), var(--brand-red-light));
       color: var(--text-primary);
       box-shadow: var(--shadow-brand-red);
   }
   
   .btn-primary:hover {
       transform: translateY(-2px) scale(1.02);
       box-shadow: 0 15px 40px rgba(211, 47, 47, 0.4);
   }
   
   .btn-secondary {
       background: transparent;
       color: var(--brand-yellow-primary);
       border: 2px solid var(--brand-yellow-primary);
   }
   
   .btn-secondary:hover {
       background: var(--brand-yellow-primary);
       color: var(--bg-primary);
       transform: translateY(-2px) scale(1.02);
   }
   
   .btn-outline {
       background: transparent;
       color: var(--text-primary);
       border: 2px solid var(--border-primary);
   }
   
   .btn-outline:hover {
       background: var(--bg-glass);
       border-color: var(--brand-red-primary);
       color: var(--brand-red-primary);
   }
   
   .input {
       width: 100%;
       padding: var(--input-padding);
       background: var(--input-bg);
       border: 1px solid var(--input-border);
       border-radius: var(--input-radius);
       color: var(--text-primary);
       font-family: var(--font-body);
       font-size: var(--fs-base);
       transition: var(--transition-fast);
   }
   
   .input:focus {
       outline: none;
       border-color: var(--input-focus-border);
       box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
   }
   
   .input::placeholder {
       color: var(--text-muted);
   }

   .focus\:outline-none:focus {
       outline: 2px solid transparent;
       outline-offset: 2px;
   }
   
   .focus\:ring:focus {
       outline: 2px solid transparent;
       outline-offset: 2px;
       box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.5);
   }
   
   @media (prefers-reduced-motion: reduce) {
       *,
       *::before,
       *::after {
           animation-duration: 0.01ms !important;
           animation-iteration-count: 1 !important;
           transition-duration: 0.01ms !important;
           scroll-behavior: auto !important;
       }
   }
   
   @media (prefers-contrast: high) {
       :root {
           --border-primary: rgba(255, 255, 255, 0.3);
           --border-secondary: rgba(255, 255, 255, 0.2);
           --text-secondary: rgba(255, 255, 255, 0.9);
           --text-tertiary: rgba(255, 255, 255, 0.8);
       }
       
       .btn,
       .card,
       .input {
           border-width: 2px;
       }
   }
   
   @media (prefers-color-scheme: light) {
       .light-mode-override {
           --bg-primary: #ffffff;
           --bg-secondary: #f8fafc;
           --bg-tertiary: #f1f5f9;
           --text-primary: #0f172a;
           --text-secondary: rgba(15, 23, 42, 0.8);
           --text-tertiary: rgba(15, 23, 42, 0.6);
       }
   }
   
   @media print {
       *,
       *::before,
       *::after {
           background: transparent !important;
           color: #000 !important;
           box-shadow: none !important;
           text-shadow: none !important;
       }
       
       .no-print {
           display: none !important;
       }
       
       .print-only {
           display: block !important;
       }
       
       a,
       a:visited {
           text-decoration: underline;
       }
       
       a[href]:after {
           content: " (" attr(href) ")";
       }
       
       .btn {
           border: 1px solid #000;
           padding: 0.5rem;
       }
   }

   .gpu {
       transform: translateZ(0);
       backface-visibility: hidden;
       perspective: 1000px;
   }
   
   .will-change-transform {
       will-change: transform;
   }
   
   .will-change-opacity {
       will-change: opacity;
   }
   
   .will-change-auto {
       will-change: auto;
   }
   
   .scroll-smooth {
       scroll-behavior: smooth;
   }
   
   .scroll-auto {
       scroll-behavior: auto;
   }
   
  
   .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;
   }
   
   .not-sr-only {
       position: static;
       width: auto;
       height: auto;
       padding: 0;
       margin: 0;
       overflow: visible;
       clip: auto;
       white-space: normal;
   }
   
   .aspect-square {
       aspect-ratio: 1 / 1;
   }
   
   .aspect-video {
       aspect-ratio: 16 / 9;
   }
   
   .aspect-photo {
       aspect-ratio: 4 / 3;
   }
   
   .object-contain {
       object-fit: contain;
   }
   
   .object-cover {
       object-fit: cover;
   }
   
   .object-fill {
       object-fit: fill;
   }
   
   .object-none {
       object-fit: none;
   }
   
   .object-scale-down {
       object-fit: scale-down;
   }
   
   ::selection {
       background-color: var(--brand-red-primary);
       color: var(--text-primary);
   }
   
   ::-moz-selection {
       background-color: var(--brand-red-primary);
       color: var(--text-primary);
   }
   
   ::-webkit-scrollbar {
       width: 8px;
       height: 8px;
   }
   
   ::-webkit-scrollbar-track {
       background: var(--bg-secondary);
   }
   
   ::-webkit-scrollbar-thumb {
       background: var(--brand-red-primary);
       border-radius: var(--radius-full);
   }
   
   ::-webkit-scrollbar-thumb:hover {
       background: var(--brand-red-light);
   }
   
   html {
       scrollbar-width: thin;
       scrollbar-color: var(--brand-red-primary) var(--bg-secondary);
   }