/* PLIDNO Coming Soon — styles */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v13/UcCo3Fwr0U16wJwu2_x.woff2') format('woff2');
}
:root{
  --plidno-green:#1f4f2e;
  --plidno-accent:#e22f2f;
  --text:#183a24;
  --glass-bg: rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.45);
  --shadow: 0 20px 60px rgba(16,45,29,.25);
  --radius: 28px;
  --maxw: 720px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--ink);
  background:#dfe9e3 url('./assets/bg-greenhouse.jpg') center top /cover no-repeat;
}
/* fallback if bg-greenhouse.jpg is absent */
body.fallback{
  background:#dfe9e3 url('./assets/bg-fallback.svg') center 10% /cover no-repeat;
}
.container{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:24px;
  backdrop-filter: blur(10px);
}
.card{
  width:min(92vw, var(--maxw));
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:36px 28px 28px;
  text-align:center;
}
.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:14px;
}
.brand img{height:clamp(160px, 20vw, 280px) !important; width:auto !important; display:block}
.tagline{
  width: 100% !important; 
  margin:8 0 18px;
  letter-spacing:.12em;
  font-weight:700;
  font-size:14px;
  color:var(--plidno-green);
}
.eyebrow{
  margin:10px 0 6px;
  letter-spacing:.16em;
  font-weight:800;
  font-size:14px;
  color:var(--plidno-green);
}
h1{
  margin:10px 0 6px;
  font-size:40px;
  line-height:1.12;
  color:var(--plidno-green);
  letter-spacing: -0.01em;
  font-weight:800;
}
h2{
  margin:0 0 12px;
  font-size:26px;
  line-height:1.15;
  color:var(--plidno-green);
  font-weight:700;
}
p{
  margin:12px auto;
  font-size:18px;
  line-height:1.6;
  max-width:60ch;
}
.mail{
  margin-top:16px;
  font-weight:700;
  font-size:20px;
}
.mail a{
  color:var(--plidno-green);
  text-decoration:none;
  border-bottom:2px solid rgba(31,79,46,.25);
  padding-bottom:2px;
}
.mail a:hover{border-color:rgba(31,79,46,.55)}
.footer{
  margin-top:8px;
  font-size:14px;
  opacity:.75;
}
/* small screens */
@media (min-width:1200px){
  .card{padding:28px 20px 22px; border-radius:22px}
  .brand img{height:48px}
  h1{font-size:30px}
  h2{font-size:24px}
  p{font-size:16px}
}
/* 1) Центруємо ВСІ елементи всередині картки */
.card{
  display: grid;           /* замість flex/блочного */
  justify-items: center;   /* центр по горизонталі для всіх дітей */
  text-align: center;      /* текст по центру */
}

/* 2) Скидаємо локальні ширини, що могли зсувати (fit-content тощо) */
.brand, .tagline, .eyebrow, h1, h2, p, .mail, .footer{
  margin-left: auto;
  margin-right: auto;
  width: auto;
}

/* 3) Пара рядків у капсі — чітко по центру */
.tagline, .eyebrow{
  letter-spacing: .16em;
  font-weight: 800;
}

/* 4) На всяк випадок — логотип по центру */
.brand{ justify-self: center; }
/* ——— LOGO: розмір назад у рамки + щільніший зазор ——— */
.brand{
  width: min(72vw, 560px);   /* було надто широко – піджимаємо */
  margin: 0 auto 0;          /* забираємо “повітря” під логотипом */
}
@media (max-width:1200px){ .brand{ width: min(74vw, 520px); } }
@media (max-width:768px){  .brand{ width: min(86vw, 340px); } }

.brand img{
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Рядки одразу під логотипом — ближче */
.tagline{  /* FARM TO TABLE */
  margin: 2px 0 10px;        /* ↓ зазор */
  letter-spacing: .18em;
  font-weight: 800;
}
.eyebrow{  /* GROWN IN UKRAINE */
  margin: 0 0 14px;          /* трохи щільніше */
  letter-spacing: .16em;
  font-weight: 800;
}

/* ——— Скляний блок: трохи менш прозорий, читабельніший ——— */
:root{
  --glass-bg: rgba(255,255,255,.70);   /* було занадто прозоро */
  --glass-border: rgba(255,255,255,.45);
}
.container{ backdrop-filter: blur(6px); }  /* легший блюр, щоб не “мило” */
/* Стиснути зазор між лого та рядком FARM TO TABLE */
.brand{ margin-bottom: 0 !important; }
.tagline{ margin-top: 0 !important; margin-bottom: 10px; }
/* —— COMPACT CARD + БІЛЬШЕ ФОНУ ТЕПЛИЦЬ —— */

/* 0) Піднімаємо фон теплиці трохи вище і фіксуємо кадр */
body{
  background:#dfe9e3 url('./assets/bg-greenhouse.jpg') center 6% / cover no-repeat !important;
}

/* 1) Картка компактніша і прозоріша */
.card{
  width: min(86vw, 680px) !important;   /* не ширше 680px */
  padding: 28px 22px 22px !important;   /* було забагато «повітря» */
  background: rgba(255,255,255,.70) !important; /* скляніша */
  box-shadow: 0 16px 48px rgba(16,45,29,.20) !important;
}

/* 2) Лого трохи менше + мінімальний зазор */
.brand{ width: min(74vw, 520px) !important; margin: 0 auto 2px !important; }
.brand img{ width:100% !important; height:auto !important; display:block; }

/* 3) Рядки під логотипом щільніше */
.tagline{ margin: 2px 0 8px !important; letter-spacing:.18em; font-weight:800; }
.eyebrow{ margin: 0 0 10px !important; letter-spacing:.16em; font-weight:800; }

/* 4) Заголовки компактніше, щоб блок нижче став нижчим */
h1{ font-size: 38px !important; line-height: 1.12 !important; margin: 6px 0 4px !important; }
h2{ font-size: 24px !important; line-height: 1.15 !important; margin: 0 0 10px !important; }
p { font-size: 17px !important; line-height: 1.55 !important; margin:10px auto !important; }

/* 5) Мобільні – ще компактніше */
@media (max-width: 480px){
  .card{ padding: 22px 16px 18px !important; }
  .brand{ width: min(88vw, 320px) !important; }
  h1{ font-size: 30px !important; }
  h2{ font-size: 20px !important; }
  p { font-size: 16px !important; }
}