@font-face{font-family:'Fraunces';src:url('../assets/fonts/Fraunces-700.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('../assets/fonts/Fraunces-900.ttf') format('truetype');font-style:normal;font-weight:900;font-display:swap;}
@font-face{font-family:'Inter';src:url('../assets/fonts/Inter-400.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap;}
@font-face{font-family:'Inter';src:url('../assets/fonts/Inter-500.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap;}
@font-face{font-family:'Inter';src:url('../assets/fonts/Inter-600.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap;}
@font-face{font-family:'Inter';src:url('../assets/fonts/Inter-700.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap;}

/* ==============================================================
   Marina — точные токены из Figma Finally
   ============================================================== */
:root {
  /* Brand blues from the approved design */
  --blue-50:  #F0F7FF;   /* Hero bg */
  --blue-100: #DEEDFF;   /* eyebrow badge bg */
  --blue-300: #72BFFF;   /* gradient TOP */
  --blue-500: #0969D1;   /* PRIMARY BRAND */
  --blue-600: #0966D1;   /* eyebrow text */
  --blue-700: #0A1F52;   /* H1 dark navy title */
  --blue-900: #061C4A;   /* description text */

  --brand-dark: #0C3A45; /* logo brand text */
  --text-primary: #0E2233;

  /* Photo overlay */
  --overlay-blue: rgba(48,140,255,0.1);

  /* Header pill glass */
  --pill-bg: rgba(255,255,255,0.7);
  --pill-border: rgba(9,105,209,0.25);

  /* Shadows (из drop-shadow) */
  --sh-btn: 0px 10px 12px rgba(9,105,209,0.25);
  --sh-btn-light: 0px 10px 12px rgba(9,105,209,0.15);
  --sh-lg: 0 22px 46px rgba(9,105,209,0.18);
  --sh-md: 0 12px 28px rgba(9,105,209,0.14);
  --sh-sm: 0 4px 12px rgba(9,105,209,0.10);

  /* Typography */
  --ff-serif: 'Fraunces', Georgia, serif;
  --ff-sans:  'Inter', system-ui, sans-serif;

  --fs-h1: 50px;       --lh-h1: 60px;
  --fs-h2: 40px;       --lh-h2: 48px;
  --fs-h3: 28px;       --lh-h3: 34px;
  --fs-lead: 17px;     --lh-lead: 25px;
  --fs-body: 15px;     --lh-body: 22px;
  --fs-btn: 16px;      --lh-btn: 20px;
  --fs-btn-s: 14px;    --lh-btn-s: 18px;
  --fs-eyebrow: 11px;
  --ls-eyebrow: 0.66px;
  --ls-brand: 0.36px;

  /* Radii */
  --r-eyebrow: 16px;
  --r-btn: 50px;
  --r-pill: 100px;

  /* Layout */
  --gutter-x: 80px;

  /* Motion */
  --ease-smooth: cubic-bezier(.22,.61,.36,1);
  --ease-out:    cubic-bezier(.16,.84,.44,1);
  --dur-fast: .25s;
  --dur-med:  .45s;
  --dur-slow: .85s;
}