/* === GreenTreeCo theme === */
:root{
    /* Palette */
    --bg:#f5f8f4;          /* page background (light) */
    --fg:#1f2d1b;          /* primary text (deep green) */
    --muted:#e6efe4;       /* soft section background */
    --card:#ffffff;        /* cards */
    --card-border:#c9dcc8; /* card borders */
    --acc:#3d8744;         /* accent (buttons, highlights) */
    --acc-press:#2f6a34;   /* pressed/hover */
    --line:#d7e5d6;        /* separators */
    --input-bg:#f2f7f0;    /* inputs */
  }
  
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    background:var(--bg);
    color:var(--fg);
    line-height:1.6;
  }
  
  /* Layout helpers */
  .container{max-width:1100px;margin:0 auto;padding:0 20px}
  .flex{display:flex;gap:16px}
  .between{justify-content:space-between}
  .center{align-items:center}
  .row{display:flex;gap:10px;flex-wrap:wrap}
  
  /* Header */
  .site-header{
    position:sticky;top:0;z-index:20;
    background:rgba(245,248,244,.86);
    backdrop-filter:saturate(1.1) blur(6px);
    border-bottom:1px solid var(--line);
  }
  .site-header .brand{display:flex;align-items:center;gap:12px;font-weight:700}
  .logo{
    display:inline-grid;place-items:center;
    width:40px;height:40px;border-radius:10px;
    background:#e0f0e1;border:1px solid var(--card-border);
    color:var(--acc);font-weight:800;
    overflow:hidden;
  }
  /* If you use an image logo, keep this <img> inside .logo */
  .logo img{width:100%;height:100%;object-fit:cover;display:block}
  
  .site-header .name{letter-spacing:.2px}
  .site-header nav a{
    color:var(--fg);text-decoration:none;margin-left:18px;opacity:.85
  }
  .site-header nav a:hover{opacity:1}
  
  /* Hero (uses brand banner) */
  .hero{
    min-height:420px;
    padding:84px 0;
    background:url("/assets/hero-tree-right.webp") center/cover no-repeat; /* с ведущим '/' */
    text-align:center;
    position:relative;
    color:#1f2d1b;
  }
  
  /* мягкое затемнение центра (чтобы текст читался) */
  .hero::before{
    content:""; 
    position:absolute; inset:0;
    background: radial-gradient(ellipse at center, rgba(255,255,255,.65) 0%, rgba(255,255,255,.25) 55%, rgba(0,0,0,0) 100%);
    pointer-events:none;
  }
  
  .hero > .container{ position: relative; z-index: 1; }
  
  .hero-logo{
    width:96px;height:96px;
    border-radius:50%;
    border:3px solid #ffffff80;
    box-shadow:0 6px 18px rgba(0,0,0,.15);
    background:#fff;
    object-fit:cover;
    margin-bottom:16px;
  }

  /* Sections */
  .section{padding:56px 0}
  .muted{background:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  
  /* Grid & cards */
  .grid{display:grid;gap:18px}
  .apps{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .card{
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:16px;
    padding:16px;
    box-shadow:0 1px 0 rgba(31,45,27,.04);
  }
  .card img{width:64px;height:64px;border-radius:12px;border:1px solid var(--card-border);background:#f6fbf5}
  .card h3{margin:10px 0 6px;font-size:18px}
  
  /* Buttons & links */
  .button{
    display:inline-block;padding:10px 14px;border-radius:10px;
    border:1px solid var(--acc);
    background:var(--acc);color:#fff;font-weight:600;text-decoration:none;
    transition:transform .06s ease, background .15s ease, border-color .15s ease
  }
  .button:hover{background:var(--acc-press);border-color:var(--acc-press)}
  .button:active{transform:translateY(1px)}
  .button.ghost{
    background:transparent;color:var(--acc);border-color:var(--acc)
  }
  .button.ghost:hover{color:#fff;background:var(--acc);border-color:var(--acc)}
  .button.sm{padding:8px 12px;font-size:14px}
  
  a{color:var(--acc)}
  a:hover{color:var(--acc-press)}
  
  /* Forms */
  .form{display:grid;gap:12px}
  .form .row{grid-template-columns:1fr 1fr}
  label span{display:block;margin-bottom:6px;opacity:.9}
  input,textarea{
    width:100%;padding:10px 12px;border-radius:10px;
    border:1px solid var(--card-border);
    background:var(--input-bg);color:var(--fg)
  }
  input:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(61,135,68,.15)}
  
  /* Footer */
  .site-footer{
    border-top:1px solid var(--line);
    padding:18px 0;background:#f7faf6
  }
  .small{font-size:14px}
  .tiny{font-size:12px;opacity:.8}
  
  /* Responsiveness */
  @media (max-width:720px){
    .form .row{grid-template-columns:1fr}
    .hero{padding:64px 0}
    .hero h1{font-size:32px}
  }

/* Герой-блок во всю ширину */
.hero-flex{
    display:flex;
    align-items:center;
    justify-content:flex-start;  /* прижимаем влево */
    gap:64px;
    min-height:480px;
    padding:84px 80px 84px 120px; /* левый отступ 120px */
    position:relative;
    z-index:1;
    max-width:100%;               /* снимаем ограничение по ширине */
  }
  
  /* Логотип слева */
  .hero-logo-big{
    width:260px; height:260px;
    border-radius:50%;
    border:6px solid #ffffffcc;
    background:#fff;
    box-shadow:0 10px 28px rgba(0,0,0,.25);
    object-fit:cover;
    flex-shrink:0; /* не сжимается */
  }
  
  /* Текст справа */
  .hero-text{
    max-width:620px;
  }
  .hero-text h1{
    margin:0 0 20px;
    font-size:56px;
    line-height:1.2;
    color:#1f2d1b;
  }
  .hero-text p{
    margin:0 0 28px;
    font-size:22px;
    line-height:1.6;
    color:#2f3e2c;
  }
  
  /* Адаптив */
  @media (max-width: 1024px){
    .hero-flex{ padding:64px 40px; gap:40px; }
    .hero-logo-big{ width:200px; height:200px; }
    .hero-text h1{ font-size:44px; }
    .hero-text p{ font-size:20px; }
  }
  @media (max-width:720px){
    .hero-flex{
      flex-direction:column;
      text-align:center;
      gap:24px;
      padding:64px 20px;
    }
    .hero-logo-big{ width:150px; height:150px; }
    .hero-text h1{ font-size:32px; }
    .hero-text p{ font-size:18px; }
  }

  .card{
    background: #f5f8f4;                 /* светлый фон как у сайта */
    border: 1px solid #d7e5d6;           /* мягкая зелёная рамка */
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .card:hover{
    transform: translateY(-4px);
    border-color: #95d5b2;               /* зелёный акцент при наведении */
    box-shadow: 0 6px 18px rgba(61,135,68,.15);
  }
  .card img{
    width: 96px; height: 96px;
    border-radius: 20px;
    margin-bottom: 12px;
    border: 2px solid #c9dcc8;           /* лёгкая рамка вокруг иконки */
    background: #fff;                    /* чтобы иконка не «терялась» */
  }
  .card h3{
    margin: 10px 0 8px;
    font-size: 20px;
    color: #1f2d1b;                      /* основной текстовый цвет */
  }
  .card p{
    font-size: 15px;
    color: #2f3e2c;                      /* более мягкий зелёно-серый */
  }

  .about-flex{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:48px;
  }
  
  .about-text{
    flex:1;
  }
  
  .about-text h2{
    font-size:32px;
    margin-bottom:16px;
    color:#1f2d1b;
  }
  
  .about-text p{
    font-size:18px;
    line-height:1.6;
    margin-bottom:20px;
    color:#2f3e2c;
  }
  
  .about-text .bullets{
    list-style:none;
    padding:0;
    margin:0;
  }
  .about-text .bullets li{
    margin-bottom:10px;
    font-size:16px;
    color:#1f2d1b;
    display:flex;
    align-items:center;
    gap:6px;
  }
  
  .about-visual{
    flex:0 0 200px;
    text-align:center;
  }
  .about-logo{
    width:160px; height:160px;
    border-radius:50%;
    border:4px solid #d7e5d6;
    background:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.1);
    object-fit:cover;
  }
  
  /* Адаптив */
  @media(max-width:768px){
    .about-flex{
      flex-direction:column;
      text-align:center;
    }
    .about-visual{
      margin-top:20px;
    }
  }

  .about-text h3.tools-title{
    margin-top:28px;
    margin-bottom:12px;
    font-size:22px;
    color:#1f2d1b;
  }
  
  .about-text .tools{
    list-style:disc;
    margin:0 0 0 20px;
    padding:0;
    font-size:16px;
    color:#2f3e2c;
  }
  .about-text .tools li{ margin-bottom:8px; }

  /* Контактная форма — аккуратная ширина и сетка */
.form{
  display:grid;
  gap:16px;
  max-width:720px;
}
.form .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
label span{display:block;margin-bottom:6px;opacity:.9}
input,textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #c9dcc8;
  background:#f7fbf7;
  color:#1f2d1b;
}
input:focus,textarea:focus{
  outline:none;border-color:#3d8744;box-shadow:0 0 0 3px rgba(61,135,68,.15)
}
/* Кнопка не на всю ширину */
.form .actions{display:flex;gap:12px}
.form .actions .button{width:auto;padding:12px 18px}

/* Мобилка */
@media (max-width:720px){
  .form .row{grid-template-columns:1fr}
}

html {
  scroll-behavior: smooth;
}