@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@800;900&family=Golos+Text:wght@400;500;600;700&display=swap');

:root{
  
  --bg:         oklch(97.6% 0.004 250);  
  --paper:      #ffffff;                 
  --panel:      oklch(98.6% 0.003 250);  
  --plate:      oklch(98% 0.004 250);    
  --plate-edge: oklch(88% 0.01 255);     
  --plate-hi:   oklch(99.5% 0.002 255);  
  --header-bg:  oklch(21% 0.028 230 / 94%);   

  
  --ink:     #1A2026;                    
  --ink-700: oklch(36% 0.014 255);       
  --muted:   oklch(48% 0.014 255);       
  --faint:   oklch(54% 0.013 255);       

  
  --line:        oklch(89% 0.008 255);   
  --line-strong: oklch(80% 0.011 255);   

  
  --accent:      #FFD600;                
  --accent-deep: oklch(80% 0.155 95);    
  --gold-line:   oklch(80% 0.08 95);     

  
  --dark:      #0B1D24;                  
  --dark-2:    #132C37;                  
  --dark-line: oklch(34% 0.035 230);     
  --dark-panel:oklch(17% 0.028 230);     
  --photo-well:oklch(18% 0.02 230);      
  --on-dark:        oklch(88% 0.01 230); 
  --on-dark-dim:    oklch(72% 0.015 230);
  --on-dark-faint:  oklch(62% 0.03 230); 
  --on-dark-strong: #fff;                
  --ghost-border:   oklch(55% 0.03 230); 
  --dim-dark:       oklch(48% 0.03 230); 

  
  
  --bg-diag:
    repeating-linear-gradient(115deg, oklch(100% 0 0 / .5) 0px, oklch(100% 0 0 / .5) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(115deg, oklch(20% 0 0 / .024) 0px, oklch(20% 0 0 / .024) 1px, transparent 1px, transparent 7px);
  
  --bg-grid-dark:
    linear-gradient(oklch(100% 0 0 / .045) 1px, transparent 1px),
    linear-gradient(90deg, oklch(100% 0 0 / .045) 1px, transparent 1px);
  --bg-grid-size: 32px 32px;
  
  --perf-dots:      radial-gradient(oklch(100% 0 0 / .062) 1.1px, transparent 1.5px);
  --perf-dots-size: 13px 13px;
  

  
  --plate-grad:  linear-gradient(160deg, var(--plate-hi), var(--plate) 16%, var(--plate) 86%, var(--plate-edge) 100%);
  --figure-grad: linear-gradient(160deg, var(--plate-hi), var(--plate) 60%, var(--plate-edge));
  --steel-grad:  linear-gradient(155deg, oklch(30% 0.03 230), oklch(22% 0.03 230) 60%, oklch(16% 0.03 230));
  --shadow-btn:        0 6px 16px -10px oklch(75% 0.16 95 / .9);
  --shadow-btn-hover:  0 12px 26px -10px oklch(75% 0.16 95 / .95);
  --shadow-dark-hover: 0 12px 26px -12px oklch(20% 0.02 255 / .55);
  --shadow-card:       inset 0 1px 0 var(--plate-hi), 0 1px 2px oklch(20% 0.02 255 / .05);
  --shadow-card-hover: inset 0 1px 0 var(--plate-hi), 0 16px 30px -18px oklch(78% 0.14 95 / .55);
  --shadow-plate:      0 26px 50px -28px oklch(0% 0 0 / .75);  
  --shadow-frame:      0 26px 50px -28px oklch(0% 0 0 / .8);   
  --shadow-figure:     0 22px 44px -30px oklch(20% 0.02 255 / .5); 
  --shadow-tag:        0 8px 20px -8px oklch(0% 0 0 / .7);     

  
  --spark-grad:        radial-gradient(circle, #fff 0%, var(--accent) 40%, var(--accent-deep) 78%, transparent 100%);
  --spark-shadow:      0 0 12px 3px oklch(88% 0.185 98 / .85), 0 0 3px 1px #fff;
  --spark-burst-grad:  radial-gradient(circle, #fff 0%, var(--accent) 60%, transparent 100%);
  --spark-burst-glow:  0 0 6px 1px oklch(88% 0.185 98 / .9);
  --bullet-grad:       radial-gradient(circle, #fff 0%, var(--accent) 55%, var(--accent-deep) 100%);
  --bullet-glow:       0 0 6px 1px oklch(88% 0.185 98 / .5);
  --focus-glow:        oklch(88% 0.185 98 / .4); 

  
  --ff-display: 'Unbounded', sans-serif;
  --ff-text:    'Golos Text', 'Segoe UI', sans-serif;
  --fs-10: .625rem;    
  --fs-11: .6875rem;   
  --fs-12: .75rem;     
  --fs-13: .8125rem;   
  --fs-14: .875rem;    
  --fs-15: .9375rem;   
  --fs-16: 1rem;       
  --fs-17: 1.0625rem;  
  --fs-18: 1.125rem;   
  --fs-num:    1.625rem;                              
  --fs-num-lg: clamp(1.5rem, 1.3rem + 1vw, 2.125rem); 
  --fs-h1:      clamp(1.75rem, 1.2rem + 2.2vw, 2.875rem);   
  --fs-h1-long: clamp(1.625rem, 1.15rem + 1.55vw, 2.375rem);
  --fs-h2:      clamp(1.25rem, 1rem + 1.1vw, 1.875rem);     
  --fs-h2-cta:  clamp(1.375rem, 1.05rem + 1.5vw, 2.125rem); 
  --lh-body: 1.65;
  --lh-head: 1.16;

  
  --radius: 2px;                              
  --container: 1180px;
  --pad-inline: clamp(1.25rem, 4vw, 2.5rem);
  --section-pad: clamp(4rem, 8vw, 6.5rem);    
  --cta-pad: clamp(3.75rem, 6vw, 5.5rem);     
  --header-h: 84px;   --header-h-m: 68px;     
  --logo-h: 38px;     --logo-h-m: 30px;       
  --logo-h-footer: 42px;
  --fab-size: 56px;                           

  
  --ease: cubic-bezier(.16,.8,.34,1);
  --dur-1: 200ms;        
  --dur-2: 220ms;        
  --dur-3: 260ms;        
  --dur-4: 280ms;        
  --dur-reveal: 380ms;   
  --cycle: 18s;          
  --seam-cycle: 11s;     
  --seam-cycle-slow: 13s;
}