/* Design tokens */
:root{
  /* Brand */
  --brand-900:#0B1930;
  --brand-800:#0E2746;
  --brand-700:#12365C;
  --brand:#0E2A47;
  --accent:#FFD34E;
  --accent-hover:#F5C842;

  /* Base */
  --bg:#F8FAFC;
  --surface:#ffffff;
  --text:#0F172A;
  --text-secondary:#334155;
  --muted:#64748B;
  --muted-light:#94A3B8;

  /* Effects */
  --radius-1:8px;
  --radius-2:12px;
  --radius-3:16px;
  --radius-4:20px;
  --shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-1:var(--shadow-md);
  --shadow-2:var(--shadow-lg);
  --glass-effect:backdrop-filter:blur(16px); background:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.2);

  /* Layout */
  --container:1200px;
  --gutter:clamp(20px, 4vw, 32px);
  --section-spacing:clamp(3rem, 8vw, 6rem);

  /* Type (fluid) */
  --fs-900:clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --fs-800:clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --fs-700:clamp(1.375rem, 1.25rem + .625vw, 1.75rem);
  --fs-600:clamp(1.125rem, 1.05rem + .375vw, 1.25rem);
  --fs-500:1rem;
  --fs-400:.9375rem;
  --fs-300:.875rem;

  /* Animation */
  --speed-1:.2s;
  --speed-2:.3s;
  --speed-3:.5s;
  --ease-out:cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* <-- Прибирає горизонтальний scroll */
  width: 100%;
  font-family: 'Inter', 
  'Segoe UI Emoji',    /* Windows emoji */
  'Apple Color Emoji', /* macOS/iOS emoji */
  'Noto Color Emoji',  /* Android/Linux emoji */
  'Twemoji Mozilla',   /* Firefox emoji */
  sans-serif;
}

html {
  overflow-x: hidden; /* <-- І тут теж */
}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
ul{margin:0;padding:0;list-style:none}
a{text-decoration:none;color:inherit}

/* Base */
html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, #E9F1FA 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 10%, #E6EFFA 0%, transparent 55%),
    var(--bg);
}

/* Accessibility */
.sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:var(--gutter);top:10px;background:var(--surface);padding:.5rem .75rem;border-radius:.5rem;box-shadow:var(--shadow-1)}

/* Typography */
h1,h2,h3,h4{line-height:1.15;margin:0 0 .4em}
h1{font-size:var(--fs-900);letter-spacing:-.02em}
h2{font-size:var(--fs-800);letter-spacing:-.01em}
h3{font-size:var(--fs-700)}
p{font-size:var(--fs-500);color:var(--muted);margin:0 0 .9em}
.lead{font-size:var(--fs-600);color:var(--text)}
.eyebrow{font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.muted{color:var(--muted)}
.link{color:var(--brand-700);font-weight:600}
.link:hover{color:var(--brand)}

/* Layout helpers */
.container{
  width:min(var(--container), 100% - 2*var(--gutter));
  margin-inline:auto;
}

.narrow{
  max-width:760px;
  margin-inline:auto;
}

.Section{
  position:relative;
}

.Section__head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:1rem;
}

.Section__head h2{
  margin-bottom:0;
}

.Section__head p{
  margin-bottom:0;
  max-width:600px;
}

@media (max-width: 768px){
  .Section__head{
    flex-direction:column;
    align-items:start;
    gap:1rem;
  }
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.8rem 1rem;border-radius:calc(var(--radius-3) - 2px);
  font-weight:600;transition:transform var(--speed-1) ease, box-shadow var(--speed-1) ease, background var(--speed-1);
  will-change:transform;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--brand);color:#fff;border:0;outline:none;box-shadow:0 3px 8px rgba(14,42,71,.10)}
.btn--primary:hover{background:var(--brand-700);box-shadow:0 6px 16px rgba(14,42,71,.14)}
.btn--primary:focus-visible{outline:2px solid color-mix(in oklab, var(--brand) 35%, white);outline-offset:2px}
.btn--primary:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(14,42,71,.12)}
.btn--yellow{background:var(--accent);color:#161616;box-shadow:var(--shadow-1)}
.btn--yellow:hover{box-shadow:var(--shadow-2)}
.btn--outline{background:transparent;color:var(--brand);border:1px solid color-mix(in oklab, var(--brand) 25%, transparent)}
.btn--outline:hover{background:color-mix(in oklab, var(--brand) 10%, white);}

/* Grid helpers */
.Grid{display:grid;gap:clamp(16px, 2.4vw, 28px)}
.Grid--3{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width: 1000px){.Grid--3{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width: 640px){.Grid--3{grid-template-columns:1fr}}

/* Badges */
.Badge{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.28rem .6rem;border-radius:999px;
  background:rgba(14,42,71,.08);color:var(--brand-700);
  font-weight:700;font-size:.72rem;letter-spacing:.06em;
}
.Badge--green{background:rgba(16,185,129,.12);color:#0F8F62}

/* Pills */
.Pills{display:flex;gap:.5rem;flex-wrap:wrap}
.Pill{
  padding:.45rem .8rem;border-radius:999px;border:1px solid rgba(14,42,71,.12);
  background:rgba(255,255,255,.7);backdrop-filter:blur(8px);
  font-weight:600;color:var(--brand-700);transition:background var(--speed-1), transform var(--speed-1)
}
.Pill:hover{transform:translateY(-1px);background:#fff}
.Pill--active{background:var(--brand);color:#fff;border-color:transparent}


/* ========== Container System (Modern Fluid) ========== */

.container {
  width: 100%;
  max-width: min(1400px, 100vw - 2rem);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 5rem);
}

/* Breakpoint overrides for specific sizes */
@media (min-width: 768px) {
  .container {
      max-width: min(720px, 100vw - 3rem);
  }
}

@media (min-width: 1024px) {
  .container {
      max-width: min(960px, 100vw - 4rem);
  }
}

@media (min-width: 1280px) {
  .container {
      max-width: min(1200px, 100vw - 5rem);
  }
}

@media (min-width: 1536px) {
  .container {
      max-width: min(1400px, 100vw - 6rem);
  }
}

@media (min-width: 1920px) {
  .container {
      max-width: min(1600px, 100vw - 7rem);
  }
}

@media (min-width: 2560px) {
  .container {
      max-width: min(2000px, 100vw - 8rem);
  }
}

@media (min-width: 3840px) {
  .container {
      max-width: min(2800px, 100vw - 10rem);
  }
}


/* Page Transitions */
.page-transition {
  transition: opacity 0.3s ease-in-out;
}

.page-transition.fade-out {
  opacity: 0;
}

/* Zoom functionality for images */
.Lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.3s ease;
  transform-origin: center center;
}

.Lightbox__img.zoomed {
  cursor: zoom-out;
  transform: scale(2);
}

.Lightbox__img.zoomed:hover {
  transform: scale(2) !important;
}