/* ============================================================
   PHARM-VISION × Selective Team visual system
   Tokens + typography. Author: Design System project.
   Brand font: Manrope (self-hosted, supplied by client). Full
   Cyrillic, geometric grotesque — used for headings + body.
   ============================================================ */

@font-face{ font-family:'Manrope'; font-weight:200; font-style:normal; font-display:swap;
  src:url('fonts/Manrope-ExtraLight.ttf') format('truetype'); }
@font-face{ font-family:'Manrope'; font-weight:300; font-style:normal; font-display:swap;
  src:url('fonts/Manrope-Light.ttf') format('truetype'); }
@font-face{ font-family:'Manrope'; font-weight:400; font-style:normal; font-display:swap;
  src:url('fonts/Manrope-Regular.ttf') format('truetype'); }
@font-face{ font-family:'Manrope'; font-weight:500; font-style:normal; font-display:swap;
  src:url('fonts/Manrope-Medium.ttf') format('truetype'); }
@font-face{ font-family:'Manrope'; font-weight:600; font-style:normal; font-display:swap;
  src:url('fonts/Manrope-SemiBold.ttf') format('truetype'); }
@font-face{ font-family:'Manrope'; font-weight:700; font-style:normal; font-display:swap;
  src:url('fonts/Manrope-Bold.ttf') format('truetype'); }
@font-face{ font-family:'Manrope'; font-weight:800; font-style:normal; font-display:swap;
  src:url('fonts/Manrope-ExtraBold.ttf') format('truetype'); }

:root{
  /* ---- Brand color ---- */
  --orange:        #E84A14;   /* primary accent */
  --orange-600:    #D63E0C;   /* hover / pressed */
  --orange-700:    #B83209;
  --orange-soft:   #FBE6DC;   /* peach tint fill */
  --orange-soft-2: #FCEFE9;   /* lightest peach */

  --navy:          #1C3A5E;   /* secondary / dark cards / footer */
  --navy-700:      #152E4C;
  --navy-900:      #102338;

  --green:         #1E9E57;   /* positive values */
  --green-soft:    #E3F3EA;

  /* ---- Neutrals ---- */
  --ink:           #1A1A1C;   /* headings, hard text */
  --body:          #3C4046;   /* body copy */
  --muted:         #6C7177;   /* secondary text */
  --faint:         #9AA0A6;   /* labels, captions */
  --line:          #E4E3E1;   /* borders, dividers */
  --line-2:        #EFEEEC;
  --bg:            #F3F2F0;   /* page background (warm light gray) */
  --surface:       #FFFFFF;   /* cards */
  --surface-2:     #FAFAF9;

  /* ---- Radii ---- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --sh-1: 0 1px 2px rgba(16,35,56,.05);
  --sh-2: 0 6px 22px rgba(16,35,56,.08);
  --sh-3: 0 18px 50px rgba(16,35,56,.14);
  --sh-orange: 0 10px 28px rgba(232,74,20,.28);

  /* ---- Layout ---- */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px); /* @kind spacing */

  /* ---- Type ---- */
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-out: cubic-bezier(.16,1,.3,1); /* @kind other */
}

/* ============================================================
   Base & semantic type
   ============================================================ */
*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0;
  overflow-x:clip;
  font-family: var(--font);
  background: var(--bg);
  color: var(--body);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; }

h1,h2,h3,h4{ color: var(--ink); margin:0; line-height:1.05; letter-spacing:-.01em; }

.h1{
  font-weight:800;
  font-size: clamp(34px, 5.4vw, 66px);
  line-height: 1.02;
  letter-spacing:-.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.h2{
  font-weight:800;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height:1.04;
  letter-spacing:-.018em;
  text-transform: uppercase;
  text-wrap: balance;
}
.h3{
  font-weight:700;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height:1.12;
  letter-spacing:-.01em;
}
.h4{ font-weight:700; font-size:19px; line-height:1.2; }

/* Two-tone headline helper */
.tone-orange{ color: var(--orange); }
.tone-navy{ color: var(--navy); }

/* Eyebrow: [ метка ] bracketed orange label */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  color: var(--orange);
  font-weight:700;
  font-size: 13px;
  letter-spacing:.22em;
  text-transform: uppercase;
}
.eyebrow::before{ content:"["; opacity:.85; font-weight:600; }
.eyebrow::after{ content:"]"; opacity:.85; font-weight:600; }

.lead{ font-size: clamp(17px, 1.4vw, 21px); color: var(--muted); line-height:1.55; }
.label{ font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.muted{ color: var(--muted); }
.mono-num{ font-variant-numeric: tabular-nums; }

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap{ max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter); }
.section{ padding: clamp(56px, 8vw, 120px) 0; }
.section-sm{ padding: clamp(40px, 5vw, 72px) 0; }
.stack > * + *{ margin-top: 1rem; }
.grid{ display:grid; gap: 20px; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding: 15px 26px;
  border:0; border-radius: var(--r-sm);
  background: var(--orange);
  color:#fff;
  font-weight:700; font-size:15px; letter-spacing:.02em;
  cursor:pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .25s var(--ease);
  box-shadow: var(--sh-orange);
}
.btn:hover{ background: var(--orange-600); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(232,74,20,.34); }
.btn:active{ transform: translateY(0) scale(.99); }
.btn--navy{ background: var(--navy); box-shadow: 0 10px 26px rgba(28,58,94,.26); }
.btn--navy:hover{ background: var(--navy-700); box-shadow:0 16px 34px rgba(28,58,94,.3); }
.btn--ghost{
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn--ghost:hover{ background:#fff; color: var(--orange); box-shadow: inset 0 0 0 1.5px var(--orange); transform: translateY(-2px); }
.btn--lg{ padding: 18px 32px; font-size:16px; }
.btn .arrow{ width:18px; height:18px; transition: transform .2s var(--ease); }
.btn:hover .arrow{ transform: translate(3px,-3px); }

/* small square icon button like the deck's ↙ tiles */
.icon-tile{
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  background: var(--orange); color:#fff; border-radius: var(--r-xs);
  transition: background .2s var(--ease), transform .2s var(--ease);
}

/* ============================================================
   Cards (Selective vocabulary: flat, thin border, sharp corners)
   ============================================================ */
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 28px;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.card--hover:hover{ transform: translateY(-4px); box-shadow: var(--sh-2); border-color: #d9d8d6; }
.card--orange{ background: var(--orange); border-color: var(--orange); color:#fff; }
.card--orange h3,.card--orange .h3{ color:#fff; }
.card--navy{ background: var(--navy); border-color: var(--navy); color:#e7eef6; }
.card--navy h3,.card--navy .h3{ color:#fff; }
.card--soft{ background: var(--orange-soft-2); border-color: #f6ddd2; }

/* ============================================================
   Scroll-reveal animation primitives (driven by anim.js)
   ============================================================ */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); will-change: opacity, transform; }
.reveal.in{ opacity:1; transform:none; }
.reveal-l{ opacity:0; transform: translateX(-30px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal-l.in{ opacity:1; transform:none; }
.reveal-scale{ opacity:0; transform: scale(.96); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal-scale.in{ opacity:1; transform:none; }
[data-stagger] > *{ transition-delay: calc(var(--i,0) * 90ms); }

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-l,.reveal-scale{ opacity:1 !important; transform:none !important; transition:none !important; }
}