@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300..800;1,400..600&family=JetBrains+Mono:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;1,6..72,300&family=Onest:wght@400;500;600;700&family=Sora:wght@600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;1,8..60,300&display=swap');

:root {
  
  --bg:          #EFEBE2;  
  --ink:         #17130E;  
  --accent:      #E5875C;  
  --accent-ink:  #B5552D;  
  --surface:     color-mix(in srgb, var(--bg) 15%, #FFFFFF); 
  --paper:       #F6F2EA;  
  --white:       #FFFFFF;

  --ink-05: color-mix(in srgb, var(--ink) 5%,  transparent);
  --ink-08: color-mix(in srgb, var(--ink) 8%,  transparent);
  --ink-10: color-mix(in srgb, var(--ink) 10%, transparent); 
  --ink-18: color-mix(in srgb, var(--ink) 18%, transparent); 
  --ink-20: color-mix(in srgb, var(--ink) 20%, transparent); 
  --ink-30: color-mix(in srgb, var(--ink) 30%, transparent); 
  --ink-38: color-mix(in srgb, var(--ink) 38%, transparent); 
  --ink-62: color-mix(in srgb, var(--ink) 62%, transparent); 
  --ink-74: color-mix(in srgb, var(--ink) 74%, transparent); 
  --ink-88: color-mix(in srgb, var(--ink) 88%, transparent); 

  --paper-50: rgba(239,235,226,.5);   
  --paper-72: rgba(246,242,234,.72);  
  --paper-82: rgba(246,242,234,.82);  
  --paper-34: rgba(246,242,234,.34);  

  --case-red: linear-gradient(118deg, #C4241A 0%, #A81D14 52%, #8B160F 100%);
  --case-dark: var(--ink);

  --dawn-base: linear-gradient(100deg, #FBE7DC 0%, #F9DCD3 28%, #F7D2C9 46%, #EAD6D6 60%, #C8D5EA 76%, #AFC7EC 100%);
  --dawn-cream:  #FDF0E6;
  --dawn-peach:  #F7C3A8;
  --dawn-flare:  #EF7B47;  
  --dawn-core:   #EC6A33;
  --dawn-sky:    #A6C2EB;
  --dawn-sky-2:  #B7CDEE;

  --f-display: 'Sora', 'Onest', system-ui, sans-serif;             
  --f-serif:   'Newsreader', 'Source Serif 4', Georgia, serif;     
  --f-text:    'Hanken Grotesk', 'Onest', system-ui, sans-serif;   
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;          

  --t-hero:     600 clamp(38px, 7.4vw, 112px)/.94 var(--f-display);  
  --t-display:  600 clamp(36px, 4.2vw, 60px)/.98 var(--f-display);
  --t-stat-xl:  300 clamp(64px, 9.2vw, 140px)/.9 var(--f-serif);
  --t-teaser:   300 clamp(32px, 3.9vw, 56px)/1.04 var(--f-serif);
  --t-h2:       300 clamp(28px, 3.9vw, 56px)/1.04 var(--f-serif);
  --t-stat-l:   300 clamp(40px, 4.4vw, 64px)/1 var(--f-serif);
  --t-stat-m:   300 clamp(26px, 2.6vw, 38px)/1 var(--f-serif);
  --t-h3:       300 clamp(22px, 1.9vw, 28px)/1.1 var(--f-serif);
  --t-quote:    300 clamp(20px, 1.8vw, 27px)/1.14 var(--f-serif);
  --t-index:    300 clamp(20px, 2.2vw, 32px)/1 var(--f-serif);
  --t-body-l:   400 clamp(15.5px, 1.25vw, 17.5px)/1.62 var(--f-text);
  --t-body:     400 clamp(14px, 1.1vw, 16px)/1.45 var(--f-text);
  --t-small:    400 13.5px/1.45 var(--f-text);
  --t-caption:  400 12.5px/1.35 var(--f-text);
  --t-nav:      500 14.5px/1 var(--f-text);
  --t-btn-l:    600 16px/1 var(--f-text);
  --t-btn:      600 14px/1 var(--f-text);
  --t-eyebrow:  500 11px/1 var(--f-mono);   
  --t-label:    600 12px/1 var(--f-mono);   
  --t-data:     500 clamp(13.5px, 1.05vw, 15px)/1.3 var(--f-mono);

  --ls-hero: -.05em;  --ls-h2: -.035em;  --ls-stat: -.045em;  --ls-h3: -.02em;
  --ls-eyebrow: .2em; --ls-label: .18em; --ls-chip: .1em;

  --container: 1440px;
  --gutter:    clamp(16px, 2.6vw, 40px);   
  --sheet-px:  clamp(18px, 3vw, 56px);     
  --section-pt: clamp(48px, 6vw, 88px);
  --section-pb: clamp(56px, 8vw, 104px);
  --index-col: clamp(52px, 6vw, 104px);    
  --index-gap: clamp(12px, 2vw, 36px);
  --split-gap: clamp(32px, 4.5vw, 72px);
  --stack-l:   clamp(40px, 5vw, 68px);     
  --stack-m:   clamp(22px, 2.6vw, 36px);   
  --stack-p:   clamp(14px, 1.6vw, 20px);   
  --measure:   62ch;  --measure-narrow: 56ch;  --measure-h2: 24ch;

  --r-xs: 2px;    
  --r-bar: 4px;   
  --r:    8px;    
  --r-promo: 10px;
  --r-sheet: 12px;
  --r-dot: 50%;

  --sh-glass: inset 0 0 0 1px rgba(255,255,255,.7), 0 1px 0 rgba(23,19,14,.04), 0 14px 34px -18px rgba(23,19,14,.28);
  --sh-menu:  inset 0 0 0 1px rgba(255,255,255,.7), 0 1px 0 rgba(23,19,14,.04), 0 28px 60px -24px rgba(23,19,14,.3);
  --sh-sheet-top: 0 -1px 0 rgba(23,19,14,.04), 0 -24px 60px -36px rgba(23,19,14,.22);
  --sh-sheet-bottom: 0 24px 60px -36px rgba(23,19,14,.22);
  --sh-frame: 0 1px 0 rgba(23,19,14,.05), 0 0 0 1px var(--ink-08), 0 30px 60px -40px rgba(23,19,14,.35);
  --sh-cta:   0 12px 26px -10px color-mix(in srgb, var(--ink) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.16);
  --sh-lift:  0 18px 38px -20px rgba(23,19,14,.55);
  --sh-case-media: 0 30px 70px -34px rgba(60,10,6,.7), 0 0 0 1px rgba(246,242,234,.16);

  --ease-out: cubic-bezier(.2,.85,.25,1);   
  --ease-mark: cubic-bezier(.16,.9,.2,1);   
  --d-fast: .18s;  --d-base: .25s;  --d-slow: .4s;  --d-rise: .8s;

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

:root:lang(uk):not([data-doc]) {   
  --f-display: 'Sora', 'Onest', system-ui, sans-serif;
  --f-serif:   'Source Serif 4', Georgia, serif;
  --f-text:    'Hanken Grotesk', 'Onest', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;
}

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body { margin: 0; font: var(--t-body-l); color: var(--ink); background: var(--bg); }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--bg); }

.sd-noise { position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: .05; mix-blend-mode: multiply; background: var(--noise) 0 0/150px 150px; }

.sd-hero    { font: var(--t-hero); letter-spacing: var(--ls-hero); text-wrap: balance; max-width: 20ch; margin: 0; }
.sd-display { font: var(--t-display); letter-spacing: var(--ls-hero); text-wrap: balance; margin: 0; }
.sd-h2      { font: var(--t-h2); letter-spacing: var(--ls-h2); text-wrap: pretty; max-width: var(--measure-h2); margin: 0; }
.sd-teaser  { font: var(--t-teaser); letter-spacing: -.028em; color: var(--ink-88); font-feature-settings: 'liga' 1,'dlig' 1,'onum' 1; margin: 0; }
.sd-teaser em { font-style: italic; font-weight: 300; }
.sd-h3      { font: var(--t-h3); letter-spacing: var(--ls-h3); margin: 0; }
.sd-index   { font: var(--t-index); letter-spacing: -.02em; color: var(--ink-38); padding-top: .28em; }
.sd-p       { font: var(--t-body-l); color: var(--ink-74); text-wrap: pretty; margin: 0; }
.sd-body    { font: var(--t-body); color: var(--ink-74); margin: 0; }
.sd-eyebrow { font: var(--t-eyebrow); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--ink-62); }
.sd-label   { font: var(--t-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--accent-ink); }
.sd-stat-xl { font: var(--t-stat-xl); letter-spacing: var(--ls-stat); margin: 0; }
.sd-stat-l  { font: var(--t-stat-l); letter-spacing: var(--ls-h2); margin: 0; }
.sd-stat-m  { font: var(--t-stat-m); letter-spacing: -.03em; display: block; }
.sd-prose   { display: flex; flex-direction: column; gap: var(--stack-p); max-width: var(--measure); }

.sd-sheet {
  position: relative; z-index: 12;
  width: calc(100% - 2 * var(--gutter)); max-width: var(--container); margin: 0 auto;
  background: var(--surface);
  padding: var(--section-pt) var(--sheet-px) var(--section-pb);
}
.sd-sheet--first { border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--sh-sheet-top); padding-top: clamp(20px,3vw,44px); }
.sd-sheet--last  { border-radius: 0 0 var(--r-sheet) var(--r-sheet); box-shadow: var(--sh-sheet-bottom); margin-bottom: var(--gutter); overflow: hidden; }
.sd-sheet--dark  { background: var(--case-dark); color: var(--paper); overflow: hidden; }
.sd-sheet--red   { background: var(--case-red);  color: var(--paper); overflow: hidden; }
.sd-sheet--dark .sd-index, .sd-sheet--red .sd-index { color: var(--paper-50); }
.sd-sheet--dark .sd-p,     .sd-sheet--red .sd-p     { color: var(--paper-82); }
.sd-sheet--dark .sd-eyebrow,.sd-sheet--red .sd-eyebrow { color: var(--paper-72); }

.sd-reason { position: relative; display: grid; grid-template-columns: var(--index-col) 1fr; gap: var(--index-gap); align-items: start; }
.sd-split  { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: var(--split-gap); align-items: start; }
.sd-cols   { display: grid; grid-template-columns: repeat(var(--cols,4), minmax(0,1fr)); gap: clamp(20px,2.4vw,32px); }
@media (max-width: 900px) { .sd-split { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .sd-cols { --cols: 2 !important; } }
@media (max-width: 640px) { .sd-cols { --cols: 1 !important; } .sd-reason { grid-template-columns: 1fr; } }

.sd-btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  height: 40px; padding: 0 20px; border: 0; border-radius: var(--r); cursor: pointer;
  font: var(--t-btn); color: var(--bg); background: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .2s ease;
}
.sd-btn--l { height: auto; padding: 17px 27px; gap: 10px; font: var(--t-btn-l); box-shadow: var(--sh-cta); }
.sd-btn:active { transform: scale(.98); }
.sd-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.sd-btn::before, .sd-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.sd-btn::before { z-index: -1; background: radial-gradient(120px circle at var(--mx,50%) var(--my,50%), rgba(255,248,236,.16), rgba(255,248,236,0) 100%); }
.sd-btn::after  { padding: 1px; background: radial-gradient(90px circle at var(--mx,50%) var(--my,50%), rgba(255,250,242,.8), rgba(255,250,242,0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.sd-btn:hover::before, .sd-btn:hover::after, .sd-btn:focus-visible::before, .sd-btn:focus-visible::after { opacity: 1; }

.sd-btn-ghost { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: var(--r); font: 500 14px/1 var(--f-text); color: var(--ink); transition: background .2s; }
.sd-btn-ghost:hover { background: rgba(255,255,255,.55); }

.sd-link { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 6px; font: italic 400 clamp(15px,1.15vw,17px)/1 var(--f-serif); letter-spacing: -.01em; color: var(--ink); border-bottom: 1px solid var(--ink-30); transition: color .2s ease, border-color .2s ease, gap .2s ease; }
.sd-link:hover { color: var(--accent-ink); border-color: var(--accent); gap: 12px; }
.sd-inline-link { border-bottom: 1px solid var(--ink-30); }
.sd-inline-link:hover { color: var(--accent-ink); border-color: var(--accent); }

.sd-header-wrap { position: sticky; top: 0; z-index: 50; height: 76px; margin-bottom: -76px; padding: 12px var(--gutter) 0; pointer-events: none; }
.sd-header {
  pointer-events: auto; max-width: var(--container); margin: 0 auto; height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 8px 0 20px;
  border-radius: var(--r); background: rgba(253,252,251,.58);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: var(--sh-glass);
}
.sd-logo { display: inline-flex; align-items: center; gap: 8px; font: 600 21px/1 'Sora', sans-serif; letter-spacing: -.045em; color: var(--ink); }
.sd-nav { display: inline-flex; align-items: center; }
.sd-nav a { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: var(--r); font: 400 14.5px/1 var(--f-text); letter-spacing: -.005em; color: color-mix(in srgb, var(--ink) 78%, transparent); transition: background .2s, color .2s; }
.sd-nav a:hover { background: rgba(255,255,255,.55); color: var(--ink); }
.sd-nav a[aria-current="page"] { font-weight: 500; color: var(--ink); background: rgba(255,255,255,.75); box-shadow: 0 1px 2px rgba(23,19,14,.06); }
@media (max-width: 1000px) { .sd-nav { display: none; } } 

.sd-menu-item { display: block; padding: 8px 12px; border-radius: var(--r); transition: background var(--d-fast), box-shadow var(--d-fast); }
.sd-menu-item:hover { background: var(--bg); box-shadow: inset 0 0 0 1px var(--ink-08); }
.sd-menu-item b { display: block; font: 500 14.5px/1.2 var(--f-text); }
.sd-menu-item span { display: block; margin-top: 3px; font: var(--t-caption); color: var(--ink-62); }
.sd-group { display: flex; align-items: center; gap: 8px; font: var(--t-eyebrow); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-62); }
.sd-group::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--accent); }

.sd-chip { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px; border-radius: var(--r); font: 500 11px/1 var(--f-mono); letter-spacing: var(--ls-chip); text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--ink-30); color: var(--ink); }
.sd-sheet--dark .sd-chip, .sd-sheet--red .sd-chip, .sd-chip--on-dark { box-shadow: inset 0 0 0 1px rgba(239,235,226,.34); color: var(--bg); }

.sd-col { padding-top: clamp(16px,1.8vw,22px); border-top: 2px solid var(--ink-20); }
.sd-col ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.sd-col li { font: 400 clamp(14.5px,1.05vw,16px)/1.4 var(--f-text); color: color-mix(in srgb, var(--ink) 78%, transparent); }

.sd-stat { padding-top: 14px; border-top: 2px solid var(--ink-20); }
.sd-stat small { display: block; margin-top: 8px; font: 400 clamp(13.5px,1vw,15px)/1.4 var(--f-text); color: var(--ink-62); }
.sd-sheet--dark .sd-stat, .sd-sheet--red .sd-stat { border-color: var(--paper-34); }
.sd-sheet--dark .sd-stat small, .sd-sheet--red .sd-stat small { color: var(--paper-72); }

.sd-table { width: 100%; border-collapse: collapse; font: var(--t-data); }
.sd-table th { padding: 0 0 14px 12px; text-align: right; font-weight: 500; font-size: .72em; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-62); border-bottom: 1px solid var(--ink-18); }
.sd-table th:first-child { border: 0; }
.sd-table td { padding: 14px 0 14px 12px; text-align: right; border-bottom: 1px solid var(--ink-10); }
.sd-table td:first-child { padding-left: 0; text-align: left; font: 400 clamp(14px,1.1vw,16px)/1.3 var(--f-text); color: var(--ink-74); }
.sd-table tr:last-child td { border-bottom: 0; }
.sd-table .is-key { color: var(--accent-ink); }

.sd-bars { display: flex; flex-direction: column; gap: clamp(20px,2.2vw,28px); }
.sd-bar-row { display: flex; align-items: center; gap: 12px; }
.sd-bar-track { display: flex; gap: 2px; height: 20px; width: calc(100% - 76px); }
.sd-bar { height: 20px; background: var(--accent); border-radius: 0 var(--r-bar) var(--r-bar) 0; }
.sd-bar--muted { background: var(--ink-20); border-radius: 0; }
.sd-bar--ghost { background: var(--ink-10); }
.sd-bar-val { flex: none; font: var(--t-data); }

.sd-dl { margin: 0; border-top: 1px solid var(--ink-18); }
.sd-dl > div { display: grid; grid-template-columns: clamp(96px,9vw,132px) minmax(0,1fr); gap: 16px; align-items: baseline; padding: clamp(14px,1.5vw,18px) 0; border-bottom: 1px solid var(--ink-10); }
.sd-dl > div:last-child { border-bottom: 0; }
.sd-dl dt { font: var(--t-h3); letter-spacing: var(--ls-h3); }
.sd-dl dd { margin: 0; font: var(--t-body); color: var(--ink-74); }

.sd-framed { position: relative; }
.sd-framed::before { content: ""; position: absolute; inset: -5% -3%; border-radius: var(--r-xs); background: var(--painting, var(--dawn-base)) center/cover no-repeat; }
.sd-framed > * { position: relative; display: block; width: 100%; height: auto; border-radius: var(--r); }
.sd-framed--white > * { padding: clamp(14px,1.6vw,24px); background: var(--white); box-shadow: var(--sh-frame); }

@keyframes sd-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sd-mark { from { opacity: 0; transform: translate(26px,26px) rotate(-7deg) scale(.94); } to { opacity: 1; transform: none; } }
.sd-rise { opacity: 0; animation: sd-rise var(--d-rise) var(--ease-out) forwards; animation-delay: var(--delay, 0s); }
.sd-mark-in { opacity: 0; animation: sd-mark 1.5s var(--ease-mark) .1s forwards; }
.sd-lift { transition: transform .35s var(--ease-out), box-shadow var(--d-slow) ease; }
.sd-lift:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }
@media (prefers-reduced-motion: reduce) {
  .sd-rise, .sd-mark-in { animation: none; opacity: 1; }
  .sd-btn, .sd-btn *, .sd-lift, .sd-link { transition: none; }
}