/* ——— Natural Glass Landing ——— */
:root{
  /* Естественная палитра леса */
  --leaf-50:#f2f6f2;
  --leaf-100:#dfeade;
  --leaf-200:#c7dcc8;
  --leaf-300:#9ec6a4;
  --leaf-400:#6bab79;
  --leaf-500:#3c9154;
  --leaf-600:#2f7343;
  --leaf-700:#255b35;
  --leaf-800:#1f4a2c;
  --leaf-900:#173620;

  --amber:#f3c97a;
  --sand:#e5d8c5;
  --choco:#7a5844;

  /* Фон */
  --bg-deg: 180deg;
  --bg-a: #0f2b1d;
  --bg-b: #163829;
  --bg-c: #1b3f2f;

  /* Полупрозрачные плашки */
  --glass-bg: rgba(255,255,255,.085);
  --glass-brd: rgba(255,255,255,.18);
  --glass-shadow: 0 8px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);

  /* Кнопки */
  --btn-grad-a:#ffe4b3;
  --btn-grad-b:#ffc676;
  --btn-text:#1d2a23;

  /* Картинка-листья (опционально) */
   /*--bg-image: url('../img/night.jpg');*/
}

/* Базовый фон + мягкое зерно */
html,body{height:100%;}
body{
  margin:0; color:#f3f5f2; font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(var(--bg-deg), var(--bg-a), var(--bg-b) 45%, var(--bg-c) 100%);
  position:relative;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    linear-gradient(0deg, rgba(12,24,18,.55), rgba(12,24,18,.35)),
    var(--bg-image) center/cover no-repeat;
  filter: saturate(90%) contrast(95%) brightness(95%);
  z-index:-2;
}
body::after{
  /* тонкое "зерно" */
  content:"";
  position:fixed; inset:0; z-index:-1;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'>\
  <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 0 .05 .12 0'/></feComponentTransfer></filter>\
  <rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.35; pointer-events:none;
}

/* Герой и секции становятся «стеклом» */
header, section{
  max-width: 1100px; margin: 40px auto; padding: 36px 30px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: 28px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
header{ padding: 64px 40px; }

/* Заголовки — крупные, «сливочные» */
h1,h2,h3{margin:0 0 .6em}
h1{font-size: clamp(36px, 5vw, 62px); line-height:1.05; letter-spacing:.2px; color:#f7f6ef; text-shadow:0 1px 0 rgba(0,0,0,.25);}
h2{font-size: clamp(22px, 3.2vw, 34px); color:#f1efe6;}
h3{font-size: 20px; color:#eae6da;}

/* Абзацы читаемые и «тёплые» */
p,li{color:#e7eee7;}
ul{margin:0 0 1rem 1.2rem}

/* Пилл-кнопки */
.cta-buttons a{
  display:inline-block; margin:10px 12px 0 0; padding:12px 22px;
  border-radius: 999px; font-weight:700; text-decoration:none;
  background: linear-gradient(180deg, var(--btn-grad-a), var(--btn-grad-b));
  color: var(--btn-text);
  box-shadow: 0 10px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
}
.cta-buttons a:hover{ transform: translateY(-1px); filter: saturate(105%);}
.cta-buttons a:active{ transform: translateY(0); box-shadow: 0 6px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35);}

/* Карточки в .columns — мягкие блоки */
.columns{ display:flex; flex-wrap:wrap; gap:18px; }
.columns>div{
  flex:1 1 260px; padding:18px 18px;
  background: rgba(18,28,23,.4);
  border: 1px solid rgba(255,255,255,.12);
  border-radius:22px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .15s ease, box-shadow .2s ease;
}
.columns>div:hover{ transform: translateY(-2px); box-shadow: 0 14px 26px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);}

/* Иконки-подсказки */
.info-icon{ display:inline-flex; align-items:center; gap:.35rem; margin-left:.4rem; color:#e9f3e6; }
.info-icon::after{ content:""; width:20px; height:20px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, #e9f3e6 45%, #93c69e 46%, #2d5b3c 80%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.25);
  opacity:.9;
}
.info-icon:hover{ filter:saturate(110%); }

/* Таймлайн */
.timeline-item{
  background: rgba(18,28,23,.35);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:12px 14px;
  transition:max-height .4s ease, background .2s ease;
}
.timeline-item.active{ background: rgba(18,28,23,.5);}

/* Модалки в том же стиле */
.modal-overlay{ background: rgba(4,12,3,.96);backdrop-filter: blur(2px);}
.modal-content{
  background: var(--glass-bg);
  border:1px solid var(--glass-brd);
  border-radius: 24px;
  box-shadow: var(--glass-shadow);
  color:#eef3ee;
}
.modal-body .anons{ color:#e9edeb; opacity:.9;}

/* Формы внутри модалки */
#formFields label{ color:#eef3ee;}
#formFields input{
  background: rgba(255,255,255,.06); color:#f5f8f6;
  border:1px solid rgba(255,255,255,.18); border-radius:12px;
}
#formFields input::placeholder{ color:#cfe0d5; opacity:.8;}
.submit-button{
	margin: 20px auto;
	padding: 16px 24px;
	width:100%;
	border-radius: 12px !important;
	background-color: #28a745;
}

/* Адаптивность */
@media (max-width:720px){
  header,section{margin:20px 14px; padding:24px 18px;}
  h1{font-size: clamp(30px, 9vw, 48px);}
  section ul, section ol{padding-left: 0;}
  .text ul{padding-left: 0;} 
}

/* Небольшой graceful-degradation для safari/старых браузеров */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  header, section, .modal-content{ background: rgba(32,48,40,.85); }
}
.info{cursor: pointer; color:var(--ink-500);}
a{color:#28a745;}