/* ——— Natural Glass Landing ——— LIGHT (structured like style.css) */
/* Визуально = текущему style-light.css, структура = style.css */

:root{
  /* Типографика (светлая тема) */
  --ink-900:#0f1210;   /* основной заголовок */
  --ink-700:#2a2f2b;   /* подзаголовки */
  --ink-500:#3c433e;   /* основной текст */

  /* Естественная светлая палитра/акценты */
  --accent-2:#2da56e;

  /* Градиент фона страницы (светлый) */
  --bg-deg:180deg;
  --bg-a:#f7faf8;
  --bg-b:#f3f8f4;
  --bg-c:#eef5f1;

  /* Подложка-фото (можете заменить файл) */
/*  --bg-image: url('../img/day.jpg');*/

  /* «Стекло» (почти сплошное для читаемости на светлом фоне) */
  --glass-bg: rgba(255,255,255,.85);
  --glass-brd: rgba(20,35,28,.10);
  --glass-radius:16px;              /* в light — меньше скругление */
  --glass-shadow: 0 12px 24px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.7);

  /* Кнопки: плоские зелёные без тени (общие для .cta/.submit/form) */
  --btn-text:#FFFFFF;
  --btn-bg:#35B06C;
  --btn-bg-hover:#289459;
  --btn-bg-active:#21784A;
  --btn-border:#289459;
  --btn-border-hover:#289459;
  --btn-border-active:#194F33;
  --btn-radius:16px;
  --btn-pad-y:16px;
  --btn-pad-x:24px;
  --btn-shadow:none;
  --btn-shadow-hover:none;
  --btn-shadow-active:none;

  /* Карточки/таймлайн (светлые) */
  --card-bg: rgba(255,255,255,.33);
  --card-brd: rgba(0,0,0,.06);
  --card-radius:22px;
  --card-shadow: 0 10px 20px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.7);

  /* Модалки (почти сплошной белый) */
  --modal-bg: rgba(255,255,255,.95);
  --modal-brd: rgba(0,0,0,.08);
  --modal-shadow: 0 18px 36px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.8);

  /* Размеры контейнеров */
  --container-max:1100px;
  --section-pad:36px 30px;
  --header-pad:64px 40px;
}

/* Базовый фон + деликатное «зерно» */
html,body{height:100%;}
body{
  margin:0; color:var(--ink-500);
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 800px at 8% -10%, rgba(107,173,137,.12), 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(255,255,255,.2), rgba(255,255,255,.1)),
    var(--bg-image) center/cover no-repeat;
  filter: saturate(85%) contrast(96%) brightness(104%) blur(.2px);
  z-index:-2;
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  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 .03 .08 0'/></feComponentTransfer></filter>\
  <rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.20;
}

/* Герой и секции — как в style.css, но параметры из переменных */
header, section{
  max-width: var(--container-max);
  margin:40px auto; padding: var(--section-pad);
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
header{ padding: var(--header-pad); }

/* Типографика (светлая) */
h1,h2,h3{margin:0 0 .6em}
h1{font-size: clamp(36px, 5vw, 62px); line-height:1.05; letter-spacing:.1px; color:var(--ink-900);}
h2{font-size: clamp(22px, 3.2vw, 34px); color:var(--ink-700);}
h3{font-size: 20px; color:#2f3631;}
p,li{color:var(--ink-500);}
ul{margin:0 0 1rem 1.2rem}

/* Ссылки и микро-акценты */
a,.link{ color:var(--accent-2); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Кнопки: единые правила (cta + submit + form submit) */
.cta-buttons a,
.submit-button,
form button[type="submit"],
form input[type="submit"]{
  display:inline-block;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  font-weight:700;
  text-decoration:none;
  line-height:1;
  cursor:pointer;

  color: var(--btn-text);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  box-shadow: var(--btn-shadow);

  transition: filter .2s ease, box-shadow .2s ease, background-color .2s ease, background .2s ease;
}
.cta-buttons a:hover,
.submit-button:hover,
form button[type="submit"]:hover,
form input[type="submit"]:hover{
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  box-shadow: var(--btn-shadow-hover);
}
.cta-buttons a:active,
.submit-button:active,
form button[type="submit"]:active,
form input[type="submit"]:active{
  background: var(--btn-bg-active);
  border-color: var(--btn-border-active);
  box-shadow: var(--btn-shadow-active);
}
.submit-button{
  margin:20px auto; width:100%;
  border-radius:12px !important;
}

/* Карточки — светлые и «воздушные» */
.columns{ display:flex; flex-wrap:wrap; gap:18px; }
.columns>div{
  flex:1 1 260px; padding:18px;
  background: var(--card-bg);
  border:1px solid var(--card-brd);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  color: var(--ink-500);
}
.columns>div:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 28px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.8);
  filter: saturate(104%);
}

/* Иконки-подсказки */
.info-icon{ display:inline-flex; align-items:center; gap:.35rem; margin-left:.4rem; color:var(--accent-2);}
.info-icon::after{
  content:""; width:20px; height:20px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, #f8fff6 45%, #bde8c8 46%, #2e7b4f 80%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.12);
  opacity:.95;
}

/* Таймлайн/аккордеон — светлый */
.timeline-item{
  background: var(--card-bg);
  border:1px solid var(--card-brd);
  border-radius:16px; padding:12px 14px;
  transition:max-height .4s ease, background .2s ease;
  color: var(--ink-500);
}
.timeline-item.active{ background:#ffffff;}

/* Модалки — светлые (почти сплошные) */
.modal-overlay{ background: rgba(0,0,0,.33); backdrop-filter: blur(2px); }
.modal-content{
  background: var(--modal-bg);
  border:1px solid var(--modal-brd);
  border-radius:24px;
  box-shadow: var(--modal-shadow);
  color: var(--ink-700);
}
.modal-body .anons{ color: var(--ink-500); opacity:.95;}

/* Формы — контраст на белом */
#formFields label{ color:var(--ink-700); }
#formFields input{
  background:#ffffff; color:var(--ink-700);
  border:1px solid rgba(0,0,0,.14); border-radius:12px;
  padding:.7rem .85rem;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
#formFields input:focus{
  outline:none;
  border-color:#7dc9a1;
  box-shadow: 0 0 0 3px rgba(125,201,161,.25), inset 0 1px 2px rgba(0,0,0,.05);
}
#formFields input::placeholder{ color:#87938c; opacity:.85;}

/* Мобайл: убираем левые отступы списков */
@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 */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))){
  header, section, .modal-content{ background:#ffffff; }
}

/* Доп. мелочи из текущего light */
.info{cursor:pointer; color:var(--ink-500);}
footer p{color:var(--bg-a);}