/* INVY UA Landing — design tokens
 * Pulled from the INVY design system, with two deliberate overrides for this page:
 *   1. Display face = Montserrat Alternates (better Cyrillic support)
 *   2. Primary CTA = coffee #290401 (not the orange gradient) — orange remains
 *      reserved for accents (eyebrows, highlights, focus rings).
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

@font-face { font-family: "Montserrat Alternates"; font-weight: 400; font-style: normal;
  src: url("../fonts/MontserratAlternates-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Montserrat Alternates"; font-weight: 500; font-style: normal;
  src: url("../fonts/MontserratAlternates-Medium.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Montserrat Alternates"; font-weight: 600; font-style: normal;
  src: url("../fonts/MontserratAlternates-SemiBold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Montserrat Alternates"; font-weight: 700; font-style: normal;
  src: url("../fonts/MontserratAlternates-Bold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Montserrat Alternates"; font-weight: 800; font-style: normal;
  src: url("../fonts/MontserratAlternates-ExtraBold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Montserrat Alternates"; font-weight: 900; font-style: normal;
  src: url("../fonts/MontserratAlternates-Black.woff2") format("woff2"); font-display: swap; }

:root {
  /* Brand */
  --coffee:        #290401;
  --coffee-2:      #44403c;
  --coffee-3:      #78716c;
  --coffee-4:      #a8a29e;

  --cream-0:       #ffffff;
  --cream-1:       #fff8f4;
  --cream-2:       #fff0e8;
  --cream-3:       #f8f2ef;
  --cream-4:       #f5ede8;

  --orange-50:     #fff7ed;
  --orange-100:    #ffedd5;
  --orange-200:    #fed7aa;
  --orange-300:    #fdba74;
  --orange-400:    #fb923c;
  --orange-500:    #f07532;
  --orange-600:    #ea580c;
  --orange-700:    #d14f0a;

  --rose-300:      #f2b8b5;
  --rose-500:      #b1585c;

  --success:       #1f8a5b;

  /* Semantic */
  --fg-1: var(--coffee);
  --fg-2: var(--coffee-2);
  --fg-3: var(--coffee-3);
  --fg-4: var(--coffee-4);
  --bg-page: var(--cream-1);
  --bg-soft: var(--cream-3);
  --bg-card: var(--cream-0);
  --bg-inverse: var(--coffee);

  --accent: var(--orange-600);
  --accent-soft: var(--orange-100);

  --border-subtle: rgba(41, 4, 1, 0.08);
  --border-strong: rgba(41, 4, 1, 0.16);
  --border-coffee: rgba(41, 4, 1, 0.92);

  /* Type */
  --font-display: "Montserrat Alternates", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* Display scale (Cyrillic-friendly: slightly tighter on display) */
  --fs-display-xl: 76px;   --lh-display-xl: 1.02;   --tr-display-xl: -2.6px;
  --fs-display-l:  56px;   --lh-display-l:  1.04;   --tr-display-l:  -1.8px;
  --fs-display-m:  40px;   --lh-display-m:  1.10;   --tr-display-m:  -1.2px;
  --fs-h3:         24px;   --lh-h3:         1.25;
  --fs-h4:         18px;   --lh-h4:         1.35;

  --fs-lead: 19px;  --lh-lead: 30px;
  --fs-body: 16px;  --lh-body: 25px;
  --fs-sm:   14px;  --lh-sm:   21px;
  --fs-xs:   12.5px;--lh-xs:   18px;

  --fs-eyebrow: 11.5px; --tr-eyebrow: 1.4px;

  /* Spacing */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;   --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;   --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;  --s-24: 96px;

  --r-1: 6px;   --r-2: 10px;  --r-3: 14px;
  --r-4: 18px;  --r-5: 24px;  --r-6: 32px;
  --r-pill: 9999px;

  --shadow-1: 0 1px 2px rgba(41,4,1,0.06);
  --shadow-2: 0 6px 24px rgba(41,4,1,0.08);
  --shadow-3: 0 14px 48px rgba(41,4,1,0.12);

  /* The coffee CTA — replaces the previous orange gradient per spec */
  --shadow-cta: 0 8px 24px rgba(41,4,1,0.28);
  --shadow-cta-inner: inset 0 1px 0 rgba(255,255,255,0.10);

  --grad-hero: radial-gradient(120% 80% at 70% 0%, #ffe8d6 0%, #fff0e8 38%, #fff8f4 70%, #fff8f4 100%);
  --grad-coffee: linear-gradient(180deg, #3a0a05 0%, #290401 100%);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); color: var(--fg-1); text-wrap: balance; }
h1 { font-weight: 800; font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--tr-display-xl); }
h2 { font-weight: 800; font-size: var(--fs-display-l); line-height: var(--lh-display-l); letter-spacing: var(--tr-display-l); }
h3 { font-weight: 700; font-size: var(--fs-display-m); line-height: var(--lh-display-m); letter-spacing: var(--tr-display-m); }
h4 { font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-h3); }

p { margin: 0; color: var(--fg-2); text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

/* Selection */
::selection { background: var(--coffee); color: var(--cream-1); }

/* Section helpers */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.section   { padding: 96px 0; }
.section-tight { padding: 64px 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: var(--accent);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--accent); }

/* Animation primitives */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; }
.reveal.in { animation: fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

@keyframes panda-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}
.panda-bob { animation: panda-bob 4.5s ease-in-out infinite; }

@keyframes pulse-dot {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.4); }
}
.pulse-dot { animation: pulse-dot 1.8s ease-in-out infinite; }

/* Focus ring */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Responsive scaling */
@media (max-width: 1024px) {
  :root {
    --fs-display-xl: 56px; --lh-display-xl: 1.04;
    --fs-display-l:  44px; --lh-display-l:  1.06;
    --fs-display-m:  32px; --lh-display-m:  1.14;
  }
  .section { padding: 72px 0; }
}
@media (max-width: 640px) {
  :root {
    --fs-display-xl: 40px; --tr-display-xl: -1.6px;
    --fs-display-l:  32px; --tr-display-l:  -1.2px;
    --fs-display-m:  26px; --tr-display-m:  -0.8px;
  }
  .container { padding: 0 20px; }
  .section { padding: 56px 0; }
}