:root{
    --bg:#fbf8f3;
    --paper:#fffdfa;
    --ink:#1f211f;
    --muted:#6e706c;
    --green:#294c37;
    --sand:#c79b67;
    --line:#eadfd2;
    --soft:#f5eee6;
    --radius:26px;
    --shadow:0 18px 60px rgba(45,35,25,.08);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:Inter,Arial,sans-serif;
    line-height:1.55;
}

h1,
h2,
h3{
    font-family:Georgia,serif;
    line-height:1.08;
    margin:0 0 .7em;
}

h1{
    font-size:clamp(2.3rem,3.8vw,4rem);
}

h2{
    font-size:clamp(2rem,3.5vw,3.5rem);
}

h3{
    font-size:1.2rem;
}

p{
    margin:.3rem 0 1rem;
}

/* ШАПКА */

.site-header{
    position:sticky;
    top:0;
    z-index:50;
    height:76px;
    padding:0 clamp(18px,5vw,74px);
    display:flex;
    align-items:center;
    gap:28px;
    background:rgba(255,253,250,.94);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    color:var(--ink);
    text-decoration:none;
}

.brand-mark{
    color:var(--sand);
    font-size:28px;
}

.nav{
    margin-left:auto;
    display:flex;
    gap:22px;
}

.nav a,
.site-header>a{
    color:var(--ink);
    text-decoration:none;
    font-size:.95rem;
}

.menu-btn{
    display:none;
    margin-left:auto;
    border:0;
    background:none;
    font-size:26px;
}

/* КНОПКИ */

.btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    border:1px solid var(--green);
    background:var(--green);
    color:#fff!important;
    text-decoration:none;
    border-radius:14px;
    padding:15px 22px;
    font-weight:700;
    cursor:pointer;
}

.btn-small{
    padding:11px 17px;
}

.btn-outline{
    background:transparent;
    color:var(--ink)!important;
    border-color:#d8c3aa;
}

.btn-disabled{
    opacity:.5;
    cursor:not-allowed;
}

/* ВЕРХНІЙ БЛОК */

.hero{
    width:calc(100% - 32px);
    max-width:1440px;
    min-height:650px;
    margin:26px auto;
    display:grid;
    grid-template-columns:55% 45%;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
}

.hero-copy{
    padding:clamp(40px,5vw,70px);
    align-self:center;
}

.hero-photo{
    min-height:550px;
    overflow:hidden;
}

.hero-photo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    transform:scale(.88);
}

.eyebrow{
    font-size:.76rem;
    letter-spacing:.18em;
    color:#8c6844;
    font-weight:800;
    margin-bottom:18px;
}

.lead{
    font-size:1.15rem;
    max-width:640px;
}

.hero-points,
.check-list{
    list-style:none;
    padding:0;
}

.hero-points li,
.check-list li{
    margin:.55rem 0;
    padding-left:25px;
    position:relative;
}

.hero-points li:before,
.check-list li:before{
    content:'✓';
    position:absolute;
    left:0;
    color:var(--sand);
    font-weight:800;
}

.price-card{
    display:flex;
    align-items:center;
    gap:24px;
    width:max-content;
    max-width:100%;
    background:#f3e9dd;
    padding:18px 22px;
    border-radius:18px;
    margin:28px 0 20px;
}

.price-card>div{
    display:flex;
    flex-direction:column;
}

.price-card strong{
    font-size:1rem;
}

.price-card span{
    color:var(--muted);
    font-size:.8rem;
}

.price-card .price{
    font-size:2.25rem;
    font-family:Georgia,serif;
}

.price small{
    font-size:1rem;
}

.divider{
    width:1px;
    height:46px;
    background:#d6c1aa;
}

.hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

/* ОСНОВНІ СЕКЦІЇ */

.section{
    width:calc(100% - 32px);
    max-width:1440px;
    margin:26px auto;
    padding:clamp(40px,6vw,84px);
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
}

.soft{
    background:var(--soft);
}

.section-head{
    text-align:center;
    max-width:820px;
    margin:0 auto 38px;
}

.feature-grid,
.method-grid,
.blog-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.feature-grid article,
.method-grid article,
.blog-grid article,
.request-grid article{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:18px;
    padding:22px;
}

.feature-grid span{
    font-size:28px;
    color:var(--sand);
}

/* ГАЛЕРЕЯ */

.gallery{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-top:32px;
}

.gallery img{
    width:100%;
    height:230px;
    object-fit:cover;
    border-radius:16px;
}

/* ЗАПИТИ */

.request-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.request-grid article{
    font-weight:700;
    text-align:center;
}

/* ПРО ПСИХОЛОГА */

.about-grid{
    display:grid;
    grid-template-columns:38% 62%;
    gap:48px;
}

.portrait img{
    width:100%;
    height:620px;
    object-fit:cover;
    border-radius:22px;
}

.about-copy{
    align-self:center;
}

.lead-small{
    font-size:1.2rem;
}

/* МЕТОДИ */

.method-grid{
    grid-template-columns:repeat(3,1fr);
}

/* ЕТАПИ */

.steps{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:14px;
}

.steps article{
    border-top:1px dashed #cdb89d;
    padding-top:20px;
}

.steps b{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#ead8c5;
    margin-bottom:16px;
}

/* ТЕСТ */

.test-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

/* БЛОГ */

.blog-grid{
    grid-template-columns:repeat(3,1fr);
}

.blog-grid span{
    font-size:.75rem;
    color:#8c6844;
    font-weight:800;
}

/* КОНТАКТИ */

.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:38px;
}

.contact-list a{
    color:var(--green);
}

.contact-form{
    display:grid;
    gap:13px;
    margin-top:28px;
}

.contact-form label{
    font-weight:700;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    margin-top:7px;
    border:1px solid #d9ccbd;
    background:#fff;
    border-radius:12px;
    padding:14px;
    font:inherit;
}

.hp{
    position:absolute;
    left:-9999px;
}

.map-wrap{
    min-height:560px;
}

.map-wrap iframe{
    width:100%;
    height:100%;
    border:0;
    border-radius:20px;
}

.form-status{
    min-height:24px;
}

.form-status.ok{
    color:#21613e;
}

.form-status.err{
    color:#a13d3d;
}

/* ПІДВАЛ */

footer{
    width:calc(100% - 32px);
    max-width:1440px;
    margin:0 auto 25px;
    padding:30px 20px;
    display:flex;
    justify-content:space-between;
    color:var(--muted);
}

footer div{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

footer a{
    color:inherit;
}

/* АНІМАЦІЯ */

.reveal{
    opacity:0;
    transform:translateY(16px);
    transition:.65s ease;
}

.reveal.visible{
    opacity:1;
    transform:none;
}

/* ПЛАНШЕТ */

@media(max-width:1050px){

    .nav{
        display:none;
        position:absolute;
        top:76px;
        left:0;
        right:0;
        padding:20px;
        background:var(--paper);
        flex-direction:column;
        border-bottom:1px solid var(--line);
    }

    .nav.open{
        display:flex;
    }

    .menu-btn{
        display:block;
    }

    .site-header>.btn{
        display:none;
    }

    .hero{
        width:calc(100% - 24px);
        margin:12px auto;
        grid-template-columns:1fr;
    }

    .hero-photo{
        min-height:440px;
        order:-1;
    }

    .feature-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .about-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .portrait img{
        height:520px;
    }

    .steps{
        grid-template-columns:repeat(3,1fr);
    }
}

/* МОБІЛЬНА ВЕРСІЯ */

@media(max-width:700px){

    .site-header{
        height:66px;
        padding:0 16px;
    }

    .nav{
        top:66px;
    }

    /* Загальний верхній блок */
    .hero{
        width:calc(100% - 16px);
        min-height:auto;
        margin:8px auto 12px;
        grid-template-columns:1fr;
        border-radius:20px;
        overflow:hidden;
    }

    /* Фото зверху */
    .hero-photo{
        order:-1;
        min-height:0;
        height:230px;
    }

    .hero-photo img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center 58%;
    }

    /* Текстова частина */
    .hero-copy{
        padding:24px 20px 22px;
        align-self:auto;
    }

    /* Маленький напис над заголовком */
    .hero .eyebrow{
        margin-bottom:10px;
        font-size:.64rem;
        letter-spacing:.14em;
    }

    /* Головний заголовок */
    .hero h1{
        font-size:clamp(2rem,9vw,2.65rem);
        line-height:1;
        margin-bottom:18px;
    }

    /*
    На мобільному ховаємо опис і пункти,
    щоб ціна та кнопка потрапили на перший екран
    */
    .hero .lead,
    .hero .hero-points{
        display:none;
    }

    /* Блок із ціною */
    .price-card{
        width:100%;
        margin:0 0 14px;
        padding:13px 15px;
        gap:12px;
        justify-content:space-between;
        border-radius:16px;
    }

    .price-card strong{
        font-size:.82rem;
    }

    .price-card span{
        font-size:.67rem;
        line-height:1.25;
    }

    .price-card .price{
        font-size:1.9rem;
        white-space:nowrap;
    }

    .price-card .price small{
        font-size:.8rem;
    }

    .divider{
        height:40px;
    }

    /* Кнопки */
    .hero-actions{
        display:block;
    }

    .hero-actions .btn{
        width:100%;
        min-height:52px;
        padding:13px 16px;
        border-radius:14px;
        font-size:.95rem;
    }

    /* Другу кнопку на першому екрані прибираємо */
    .hero-actions .btn-outline{
        display:none;
    }

    /* Інші секції */
    .section{
        width:calc(100% - 16px);
        margin:12px auto;
        padding:38px 20px;
    }

    .feature-grid,
    .method-grid,
    .blog-grid,
    .request-grid,
    .gallery{
        grid-template-columns:1fr;
    }

    .gallery img{
        height:250px;
    }

    .steps{
        grid-template-columns:1fr 1fr;
    }

    .about-grid{
        gap:24px;
    }

    .portrait img{
        height:460px;
    }

    .test-card{
        align-items:flex-start;
        flex-direction:column;
    }

    .map-wrap{
        min-height:380px;
    }

    footer{
        width:calc(100% - 16px);
        flex-direction:column;
        gap:15px;
    }
}

/* BLOG */

.blog-section {
  overflow: hidden;
}

.blog-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 42px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(45, 35, 25, 0.06);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(45, 35, 25, 0.1);
}

.blog-card-image {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--soft);
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.035);
}

.blog-card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 26px 28px 30px;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 16px;
  color: var(--sand);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.blog-test-label {
  flex-shrink: 0;
  padding: 6px 10px;
  color: var(--green);
  background: rgba(41, 76, 55, 0.09);
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

.blog-card h3 {
  margin: 0 0 14px;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.12;
}

.blog-card h3 a {
  color: var(--ink);
  text-decoration: none;
}

.blog-card h3 a:hover {
  color: var(--green);
}

.blog-card p {
  margin: 0 0 24px;
  color: var(--muted);
}

.blog-read-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: auto;
  color: var(--green);
  font-weight: 800;
  text-decoration: none;
}

.blog-read-link span {
  transition: transform 0.2s ease;
}

.blog-read-link:hover span {
  transform: translateX(4px);
}

@media (max-width: 760px) {
  .blog-grid-two {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 28px;
  }

  .blog-card-content {
    padding: 22px 20px 24px;
  }

  .blog-card h3 {
    font-size: 1.55rem;
  }
}
/* Обмеження ширини блогу */
#blog {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

/* Дві акуратні картки */
.blog-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* Фото не розтягується по висоті */
.blog-card-image {
  aspect-ratio: 16 / 9;
  max-height: 340px;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Трохи компактніший текст */
.blog-card-content {
  padding: 22px 24px 26px;
}

@media (max-width: 900px) {
  .blog-grid-two {
    grid-template-columns: 1fr;
    max-width: 680px;
  }

  .blog-card-image {
    max-height: none;
    aspect-ratio: 16 / 9;
  }
}
@media (max-width: 760px) {
  #blog {
    padding-left: 16px;
    padding-right: 16px;
  }

  .blog-grid-two {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 520px;
    margin: 28px auto 0;
    gap: 20px;
  }

  .blog-card {
    width: 100%;
    max-width: 100%;
  }

  .blog-card-image {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 4 / 3;
  }

  .blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}