/* =========================
   VERDELIA LAB — новий стиль
   Повна унікалізація змінних, токенів, типографіки та компонентів
   ========================= */

   :root{
    --ink:#141414;
    --ink-2:#2c2c2c;
    --muted:#6e726f;
    --paper:#faf7f2;
    --canvas:#ffffff;
    --accent:#6a8d73;     /* шавлієво-зелений */
    --accent-2:#c07d59;   /* тепла мідь */
    --line:#e9e3da;
    --shadow-1:0 6px 28px rgba(20,20,20,.08);
    --shadow-2:0 10px 40px rgba(20,20,20,.12);
    --radius:18px;
  }
  
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body.page{
    margin:0;
    color:var(--ink);
    background:var(--paper);
    font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  
  /* Typography */
  .h-display{
    font-family:Fraunces,Georgia,serif;
    font-weight:600;
    font-size:clamp(28px,4vw,44px);
    letter-spacing:.2px;
  }
  .muted{color:var(--muted)}
  .tag{
    display:inline-block;
    font-size:12px;
    padding:6px 10px;
    border:1px solid var(--line);
    border-radius:999px;
    letter-spacing:.6px;
    text-transform:uppercase;
    color:var(--ink-2);
    background:rgba(255,255,255,.6);
  }
  
  /* Layout primitives */
  .wrap{
    width:min(1120px, 100%);
    margin-inline:auto;
    padding-inline:24px;
  }
  .section{padding:64px 0}
  .section--alt{background:var(--canvas)}
  
  /* Header */
  .site-header{
    position:sticky; top:0; z-index:10;
    background:rgba(250,247,242,.9);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .site-header .wrap{
    display:flex; align-items:center; justify-content:space-between;
    min-height:68px;
  }
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
  .brand__mark{width:40px; height:40px; object-fit:contain}
  .brand__title{font-family:Fraunces,serif; font-size:22px; letter-spacing:.4px}
  .brand__title b{color:var(--accent)}
  
  .menu__toggle{
    display:none;
    border:1px solid var(--line);
    background:var(--canvas);
    padding:10px 14px;
    border-radius:10px;
    font-weight:600; cursor:pointer;
  }
  .menu__items{
    display:flex; gap:28px; list-style:none; margin:0; padding:0;
  }
  .menu__link{
    text-decoration:none; color:var(--ink-2); font-weight:600;
  }
  .menu__link:hover{color:var(--accent)}
  
  /* Hero */
  .hero{padding-top:24px}
  .hero__grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:48px; align-items:center;
  }
  .hero__title{
    font-family:Fraunces,serif;
    font-size:clamp(32px,5vw,56px);
    line-height:1.1; margin:.2em 0 .4em;
  }
  .hero__lead{color:var(--ink-2); max-width:52ch}
  .hero__cta{display:flex; gap:12px; margin-top:18px}
  
  .btn{
    --pad:13px 22px;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:var(--pad);
    border-radius:12px; text-decoration:none; font-weight:700;
    border:1px solid var(--line); transition:.2s;
  }
  .btn--solid{background:var(--accent); color:#fff; border-color:var(--accent)}
  .btn--solid:hover{transform:translateY(-1px); box-shadow:var(--shadow-1)}
  .btn--ghost{background:#fff; color:var(--ink); }
  .btn--ghost:hover{border-color:var(--accent)}
  .btn--link{padding:0; border:none; color:var(--accent); background:transparent}
  
  .hero__media{
    display:grid; gap:14px;
    grid-template-columns:1fr 1fr;
    grid-auto-rows:160px;
  }
  .hero__tile{border-radius:16px; overflow:hidden; box-shadow:var(--shadow-1); background:#ddd}
  .hero__tile.tall{grid-row:span 2}
  .hero__tile img{width:100%; height:100%; object-fit:cover}
  
  /* Trust strip */
  .trust{
    margin-top:28px; display:grid;
    grid-template-columns:repeat(6, minmax(0,1fr));
    gap:18px; opacity:.8;
  }
  .trust img{width:100%; height:46px; object-fit:contain; filter:grayscale(1);}
  .trust img:hover{filter:none}
  
  /* Cards (Rituals) */
  .cards.three{
    display:grid; gap:22px;
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
  .card{
    background:var(--canvas); border:1px solid var(--line);
    border-radius:var(--radius); overflow:hidden;
    box-shadow:var(--shadow-1); display:flex; flex-direction:column; height:100%;
  }
  .card__head{display:flex; justify-content:space-between; align-items:center; padding:18px 18px 0}
  .card__title{font-size:22px; font-weight:800; margin:0}
  .card__media{width:100%; height:220px; object-fit:cover; display:block; margin-top:10px}
  .card__text{padding:14px 18px 18px; color:var(--muted)}
  
  /* Sets */
  .grid-sets{
    display:grid; gap:24px;
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
  .kit{
    display:grid; grid-template-columns:120px 1fr; gap:18px;
    background:var(--canvas); border:1px dashed var(--line); border-radius:var(--radius);
    padding:18px; align-items:center;
  }
  .kit__media img{width:100%; height:100%; object-fit:contain}
  .kit__title{margin:0 0 8px; font-size:20px}
  .kit__list{margin:0 0 12px 18px; color:var(--muted)}
  
  /* Notes */
  .notes{
    display:grid; gap:22px;
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
  .note{background:var(--canvas); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-1)}
  .note__img{width:100%; height:200px; object-fit:cover; display:block}
  .note__body{padding:16px 18px}
  .note__title{margin:0 0 8px; font-weight:800}
  .note__time{color:var(--accent-2); font-weight:700; font-size:13px}
  
  /* Accordion */
  .accordion{max-width:820px; margin:12px auto 0}
  .accordion__item{
    background:var(--canvas); border:1px solid var(--line);
    border-radius:12px; box-shadow:var(--shadow-1); margin-bottom:12px;
  }
  .accordion__summary{
    padding:16px 18px; cursor:pointer; font-weight:700; list-style:none;
  }
  .accordion__content{padding:0 18px 18px; color:var(--muted)}
  
  /* Footer */
  .site-footer .footer__grid{
    display:grid; gap:28px;
    grid-template-columns:260px 1fr;
  }
  .footer__logo{width:42px; height:42px; object-fit:contain; margin-bottom:10px}
  .footer__cols{display:grid; gap:22px; grid-template-columns:repeat(3, minmax(0,1fr))}
  .footer__title{margin:0 0 10px; font-size:16px; font-weight:800}
  .list{list-style:none; padding:0; margin:0}
  .list a{text-decoration:none; color:var(--ink-2)}
  .list a:hover{color:var(--accent)}
  .footer__bottom{border-top:1px solid var(--line); margin-top:18px; padding-top:16px}
  
  /* Reveal on view */
  .reveal{opacity:0; transform:translateY(12px); transition:.4s}
  .reveal.is-in{opacity:1; transform:none}
  
  /* Responsive */
  @media (max-width: 960px){
    .hero__grid{grid-template-columns:1fr; gap:28px}
    .cards.three{grid-template-columns:1fr 1fr}
    .grid-sets{grid-template-columns:1fr 1fr}
    .notes{grid-template-columns:1fr 1fr}
  }
  @media (max-width: 720px){
    .menu__toggle{display:inline-block}
    .menu__items{
      position:fixed; inset:68px 0 auto 0; background:var(--canvas);
      border-bottom:1px solid var(--line);
      transform:translateY(-120%); transition:.25s; padding:14px 24px; gap:16px; flex-direction:column;
    }
    .menu__items.is-open{transform:translateY(0)}
    .trust{grid-template-columns:repeat(3,1fr)}
    .cards.three{grid-template-columns:1fr}
    .grid-sets{grid-template-columns:1fr}
    .notes{grid-template-columns:1fr}
  }