/* ============================================================
     КОЛЬОРОВА ГАММА — змінюйте тут
     ============================================================ */
 /*:root {*/
 /*    --c-bg: #0D0F14;*/
 /*     фон сторінки */
 /*    --c-surface: #151820;*/
 /*     фон карток */
 /*    --c-border: #242730;*/
 /*     обводка */
 /*    --c-accent: #C9A96E;*/
 /*     золотий акцент */
 /*    --c-accent2: #8B6E45;*/
 /*     темніший акцент */
 /*    --c-text: #E8E4DC;*/
 /*     основний текст */
 /*    --c-muted: #7A7A8A;*/
 /*     приглушений текст */
 /*    --c-hero-grad: linear-gradient(135deg, #0D0F14 0%, #1a1c25 60%, #0D0F14 100%);*/
 /*}*/
:root {
    /* Фон сторінки */
    --c-bg: #F5F0EA; 
    
    /* Фон карток */
    --c-surface: #FAF7F3; 
    
    /* Обводка */
    --c-border: #D9CFC3; 
    
    /* Золотий/основний акцент */
    --c-accent: #8B6F52; 
    /*--c-accent: #1e1410;*/
    
    /* Темніший акцент (або інший відтінок акценту) */
    --c-accent2: #6B5240; 
    /*--c-accent2: #9c7d5e;*/
    
    /* Основний текст */
    --c-text: #2C2118; 
    
    /* Приглушений текст */
    --c-muted: #8A7A6A; 
    
    /* Градієнт для Hero-секції (адаптований під світлу тему) */
    --c-hero-grad: linear-gradient(135deg, #F5F0EA 0%, #EDE6DC 60%, #F5F0EA 100%);
}
 /* ============================================================
     RESET & BASE
     ============================================================ */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Manrope', sans-serif;
     background: var(--c-bg);
     color: var(--c-text);
     overflow-x: hidden;
     line-height: 1.6;
 }

 h1,
 h2,
 h3,
 h4 {
     /*font-family: 'Playfair Display', serif;*/
    font-family: 'Libre Baskerville', Georgia, serif;
     line-height: 1.2;
 }

 a {
     color: inherit;
     text-decoration: none;
 }

 img {
     max-width: 100%;
 }

 /* ============================================================
     SCROLL REVEAL
     ============================================================ */
 .reveal {
     opacity: 0;
     transform: translateY(32px);
     transition: opacity .7s ease, transform .7s ease;
 }

 .reveal.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* ============================================================
     NAVIGATION
     ============================================================ */
 nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 100;
     padding: 0.3% 5%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 70px;
     /*background: rgba(13, 15, 20, 0.85);*/
     background: rgba(250, 247, 242, .92);;
     backdrop-filter: blur(12px);
     border-bottom: 1px solid var(--c-border);
 }

 .nav-logo {
     font-family: 'Playfair Display', serif;
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--c-accent);
     letter-spacing: .04em;
 }
 .nav-logo a img {
    width: 100px; 
 }

 .nav-logo span {
     color: var(--c-text);
 }

 .nav-links {
     display: flex;
     gap: 2rem;
     list-style: none;
 }

 .nav-links a {
     font-size: .85rem;
     font-weight: 500;
     letter-spacing: .06em;
     position: relative;
     text-transform: uppercase;
     color: var(--c-muted);
     transition: color .25s;
 }

 .nav-links a:hover {
     color: var(--c-accent);
 }
.nav-links a:hover::after {
    right: 0;
}
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 100%;
    height: 1px;
    background: var(--c-accent);
    transition: right .3s ease;
}

 .nav-cta {
     padding: .5rem 1.4rem;
         background: transparent;
    color: var(--c-accent);
     font-size: .85rem;
     font-weight: 600;
     letter-spacing: .04em;
     text-transform: uppercase;
     border: none;
     border-radius: 50px;
     border: 1px solid var(--c-border);
     cursor: pointer;
     transition: background .25s, transform .15s;
 }

 .nav-cta:hover {
     background: var(--c-accent);
     color: #fff;
     transform: translateY(-1px);
 }

 /* burger */
 .burger {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
     background: none;
     border: none;
     padding: 4px;
 }

 .burger span {
     display: block;
     width: 24px;
     height: 2px;
     background: var(--c-text);
     transition: .3s;
 }

 .burger.open span:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
 }

 .burger.open span:nth-child(2) {
     opacity: 0;
 }

 .burger.open span:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg);
 }

 /* mobile nav */
 .mobile-menu {
     display: none;
     position: fixed;
     top: 70px;
     left: 0;
     right: 0;
     z-index: 99;
     background: var(--c-surface);
     border-bottom: 1px solid var(--c-border);
     padding: 1.5rem 5%;
     flex-direction: column;
     gap: 1.2rem;
 }

 .mobile-menu.open {
     display: flex;
 }

 .mobile-menu a {
     font-size: 1rem;
     font-weight: 500;
     color: var(--c-text);
 }

 /* ============================================================
     SECTION WRAPPER
     ============================================================ */
 section {
     padding: 100px 5%;
 }

 .section-label {
     display: inline-block;
     font-size: .75rem;
     font-weight: 600;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--c-accent);
     margin-bottom: 1rem;
 }

 .section-title {
     font-size: clamp(2rem, 4vw, 3.2rem);
     font-weight: 700;
     margin-bottom: 1.2rem;
 }

 .section-sub {
     color: var(--c-muted);
     max-width: 560px;
     font-size: 1rem;
     line-height: 1.75;
 }
 .section-sub b {
   color: var(--c-text);  
 }

 .accent {
     color: var(--c-accent);
 }

 /* ============================================================
     1. HERO
     ============================================================ */
 #hero {
     min-height: 100vh;
     display: flex;
     align-items: center;
     /*background: var(--c-hero-grad);*/
     /*background: linear-gradient(135deg, #F5F0EA 0%, #EDE6DC 50%, #E8DDD2 100%);*/
     background: linear-gradient(135deg, #f9e9cf 0%, #EDE6DC 50%, #E8DDD2 100%);
     padding-top: 90px;
     position: relative;
     overflow: hidden;
 }

 /*.hero-grid-bg {*/
 /*    position: absolute;*/
 /*    inset: 0;*/
 /*    pointer-events: none;*/
 /*    background-image:*/
 /*        linear-gradient(var(--c-border) 1px, transparent 1px),*/
 /*        linear-gradient(90deg, var(--c-border) 1px, transparent 1px);*/
 /*    background-size: 60px 60px;*/
 /*    opacity: .3;*/
 /*}*/

 .hero-glow {
     position: absolute;
     top: 15%;
     right: -5%;
     width: 800px;
     height: 700px;
     /*background: radial-gradient(circle, rgba(201, 169, 110, .12) 0%, transparent 70%);*/
     background-image: url(../images/bs-center.png);
     background-repeat: no-repeat;
         background-size: contain;
     pointer-events: none;
     animation: rotate 60s linear infinite;
     animation-name: panet-rotate;
 }
/*.planet-rotate {*/
/*     animation: rotate 60s linear infinite;*/
/*     animation-name: panet-rotate;*/
/*}*/
/* @keyframes panet-rotate {*/
/*  from {*/
/*    transform: rotate(0deg);*/
/*  }*/
/*  to {*/
/*    transform: rotate(360deg);*/
/*  }*/
/*} */
 .hero-glow_2 {
     position: absolute;
     top: 20%;
     right: 10%;
     width: 500px;
     height: 500px;
     /*background: radial-gradient(circle, rgba(201, 169, 110, .12) 0%, transparent 70%);*/
 }
 .hero-inner {
     position: relative;
     max-width: 760px;
 }

 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     padding: .4rem 1rem;
     border: 1px solid var(--c-border);
     border-radius: 50px;
     font-size: .75rem;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--c-muted);
     margin-bottom: 2rem;
 }

 .hero-badge::before {
     content: '';
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--c-accent);
     display: inline-block;
 }

 .hero-title {
     font-size: clamp(2.8rem, 7vw, 4.0rem);
     font-weight: 900;
     line-height: 1.08;
     margin-bottom: 1.5rem;
      font-style: italic;
    color: #9c7d5e;
 }

 .hero-title em {
     font-style: normal;
     /*color: var(--c-accent);*/
     color:#1e1410;
     display: block;
 }

 .hero-desc {
     font-size: 1.1rem;
     color: var(--c-muted);
     max-width: 520px;
     line-height: 1.8;
     margin-bottom: 2.5rem;
 }

 .hero-btns {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
 }

 .btn-primary {
     padding: .85rem 2.2rem;
     background: var(--c-accent);
     color: #fff;
     font-weight: 700;
     font-size: .95rem;
     letter-spacing: .04em;
         border-radius: 50px;
     border: none;
     cursor: pointer;
     transition: background .25s, transform .15s, box-shadow .25s;
     /*transition: background .25s, transform .15s;*/
     transition: background .25s, transform .15s, box-shadow .25s;
 }

 .btn-primary:hover {
     background: var(--c-accent2);
     transform: translateY(-2px);
 }

 .btn-secondary {
     padding: .85rem 2.2rem;
     background: transparent;
     color: var(--c-accent);
     font-weight: 600;
     font-size: .95rem;
     letter-spacing: .04em;
     border-radius: 50px;
     border: 1px solid var(--c-border);
     cursor: pointer;
     transition: background .25s, transform .15s, box-shadow .25s;
 }

 .btn-secondary:hover {
     border-color: var(--c-accent);
     background: var(--c-accent);
     color: #fff;
     transform: translateY(-2px);
 }

 .hero-stats {
     display: flex;
     gap: 3rem;
     margin-top: 4rem;
     flex-wrap: wrap;
 }

 .stat-item {}

 .stat-num {
     font-family: 'Playfair Display', serif;
     font-size: 2.4rem;
     font-weight: 700;
     color: var(--c-accent);
     line-height: 1;
 }

 .stat-label {
     font-size: .8rem;
     color: var(--c-muted);
     margin-top: .3rem;
     letter-spacing: .06em;
     text-transform: uppercase;
 }

 /* ============================================================
     2. ПОСЛУГИ
     ============================================================ */
 #services {
     background: var(--c-bg);
 }

 .services-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     margin-bottom: 3.5rem;
     flex-wrap: wrap;
     gap: 1.5rem;
 }

 .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 1.5px;
     /*background: var(--c-border);*/
     /*border: 1.5px solid var(--c-border);*/
 }

 .service-card {
     background: var(--c-surface);
     padding: 2.5rem;
     border-radius: 10px;
     border: 1px solid #d9cfc3;
     margin:10px;
     position: relative;
     overflow: hidden;
     /*transition: background .3s;*/
     transition: transform .3s, box-shadow .3s, border-color .3s;
 }

 /*.service-card::after {*/
 /*    content: '';*/
 /*    position: absolute;*/
 /*    bottom: 0;*/
 /*    left: 0;*/
 /*    right: 0;*/
 /*    height: 2px;*/
 /*    background: var(--c-accent);*/
 /*    transform: scaleX(0);*/
 /*    transform-origin: left;*/
 /*    transition: transform .35s;*/
 /*}*/

 .service-card:hover {
     background: #fffcf8;
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgb(139 111 82 / 12%);
    border:1px solid;
    border-color: var(--c-accent);
 }

 .service-card:hover::after {
     transform: scaleX(1);
 }

 .service-icon {
     width: 48px;
     height: 48px;
     margin-bottom: 1.5rem;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid var(--c-border);
     color: var(--c-accent);
     font-size: 1.4rem;
 }
 .service-icon img.emoji {
      filter: brightness(0.2);
}

 .service-card h3 {
     font-size: 1.2rem;
     margin-bottom: .8rem;
 }

 .service-card p {
     color: var(--c-muted);
     font-size: .9rem;
     line-height: 1.7;
 }

 /* ============================================================
     3. ПРО НАС
     ============================================================ */
 #about {
     background: var(--c-surface);
     overflow: hidden;
 }

 .about-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 6rem;
     align-items: center;
 }

 .about-img-wrap {
     position: relative;
 }

 .about-img-box {
     /*aspect-ratio: 3/4;*/
     /*background: var(--c-border);*/
     position: relative;
     overflow: hidden;
 }

 .about-img-box img {
     /*width: 100%;*/
     /*height: 100%;*/
     object-fit: cover;
     filter: grayscale(40%);
     border-radius: 10px;
 }

 .about-img-placeholder {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     /*background: linear-gradient(135deg, #1a1c25 0%, #242730 100%);*/
     font-size: 5rem;
     color: var(--c-border);
 }

 .about-tag {
     position: absolute;
     bottom: -1.5rem;
     right: -1.5rem;
     background: var(--c-accent);
     border-radius:5%;
     color: #fff;
     padding: 1.5rem 2rem;
     font-family: 'Playfair Display', serif;
     font-size: 1rem;
     font-weight: 700;
 }

 .about-content {}

 .about-content .section-title {
     margin-bottom: 1.5rem;
 }

 .about-features {
     margin-top: 2.5rem;
     display: flex;
     flex-direction: column;
     gap: 1.2rem;
 }

 .about-feature {
     display: flex;
     gap: 1rem;
     align-items: flex-start;
 }

 .about-feature-icon {
     width: 32px;
     height: 32px;
     flex-shrink: 0;
     border: 1px solid var(--c-accent);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--c-accent);
     font-size: .9rem;
     margin-top: .1rem;
 }

 .about-feature h4 {
     font-family: 'Manrope', sans-serif;
     font-size: .95rem;
     font-weight: 600;
     margin-bottom: .25rem;
 }

 .about-feature p {
     color: var(--c-muted);
     font-size: .88rem;
 }

 /* ============================================================
     4. КОМАНДА
     ============================================================ */
 /*#team {
     background: var(--c-bg);
 }

 .team-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 2rem;
     margin-top: 3.5rem;
 }

 .team-card {}

 .team-photo {
     aspect-ratio: 3/4;
     background: var(--c-surface);
     border: 1px solid var(--c-border);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 4rem;
     color: var(--c-border);
     margin-bottom: 1.2rem;
     overflow: hidden;
     position: relative;
 }

 .team-photo::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(201, 169, 110, .15) 0%, transparent 50%);
 }

 .team-name {
     font-size: 1.05rem;
     font-weight: 600;
     margin-bottom: .2rem;
 }

 .team-role {
     font-size: .82rem;
     color: var(--c-accent);
     letter-spacing: .06em;
     text-transform: uppercase;
 }

*/
 #team {
     background: var(--c-bg);
 }

 .team-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     max-width: 1250px;
     gap: 2rem;
     margin-top: 3.5rem;
     margin-left: auto;
    margin-right: auto;
 }

 .team-card {}

 .team-photo {
     aspect-ratio: 3/4;
     background: var(--c-surface);
     border: 1px solid var(--c-border);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 4rem;
     color: var(--c-border);
     margin-bottom: 1.2rem;
     overflow: hidden;
     position: relative;
 }

 .team-photo::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(201, 169, 110, .15) 0%, transparent 50%);
 }

 .team-name {
     font-size: 1.05rem;
     font-weight: 600;
     margin-bottom: .2rem;
 }

 .team-role {
     font-size: .82rem;
     color: var(--c-accent);
     letter-spacing: .06em;
     text-transform: uppercase;
 }
/*правки*/
.team-photo {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--c-surface);
    margin-bottom: 1.4rem;
    /*border-radius: 10px 10px 0px 0px;*/
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    filter: grayscale(20%);
    transition: filter .4s, transform .4s;
}

.team-card:hover .team-photo img {
    filter: grayscale(0%);
    transform: scale(1.03);
}

.team-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 0 0 1.8rem 0;
    transition: border-color .3s;
    overflow: hidden;
}

.team-card:hover {
    border-color: var(--c-accent);
}

.team-info {
    padding: 0 1.6rem;
}

.team-name {
    font-size: 1.15rem;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
    margin-bottom: .3rem;
}

.team-role {
    font-size: .8rem;
    color: var(--c-accent);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    margin-bottom: .9rem;
}

.team-bio {
    font-size: .88rem;
    color: var(--c-muted);
    line-height: 1.7;
}

.services-price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.2rem;
    margin-top: 3.5rem;
}

.sp-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    padding: 1.6rem 1.8rem;
    transition: border-color .3s, transform .2s;
}

.sp-card:hover {
    border-color: var(--c-accent);
    transform: translateY(-3px);
}

.sp-name {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .5rem;
    font-family: 'Playfair Display', serif;
}

.sp-price {
    font-size: 1.35rem;
    color: var(--c-accent);
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

.sp-price span {
    font-size: .85rem;
    color: var(--c-muted);
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem 1.1rem;
    border: 1px solid var(--c-border);
    color: var(--c-muted);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: border-color .25s, color .25s;
    text-decoration: none;
}

.social-link:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.social-link svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

.about-img-box-real {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 4/5;
    overflow: hidden;
    border: 1px solid var(--c-border);
    position: relative;
}

.about-img-box-real img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

 /* ============================================================
     5. ПЕРЕВАГИ
     ============================================================ */
 #advantages {
     background: var(--c-surface);
 }

 .advantages-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1px;
     background: var(--c-border);
     border: 1px solid var(--c-border);
     margin-top: 3.5rem;
 }

 .adv-item {
     background: var(--c-surface);
     padding: 2.5rem 3rem;
     display: flex;
     gap: 1.5rem;
     align-items: flex-start;
     transition: background .3s;
 }

 .adv-item:hover {
     background: #fffcf8;
 }

 .adv-num {
     font-family: 'Playfair Display', serif;
     font-size: 2.5rem;
     font-weight: 900;
     color: var(--c-border);
     line-height: 1;
     flex-shrink: 0;
     min-width: 50px;
     transition: color .3s;
 }

 .adv-item:hover .adv-num {
     color: var(--c-accent);
 }

 .adv-item h4 {
     font-size: 1rem;
     font-weight: 600;
     margin-bottom: .5rem;
 }

 .adv-item p {
     font-size: .88rem;
     color: var(--c-muted);
     line-height: 1.65;
 }

 /* ============================================================
     6. ПРАЙС
     ============================================================ */
 #pricing {
     background: var(--c-bg);
 }

 .pricing-intro {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     margin-bottom: 3.5rem;
     flex-wrap: wrap;
     gap: 1.5rem;
 }

 .pricing-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 1.5rem;
 }

 .price-card {
     background: var(--c-surface);
     border: 1px solid var(--c-border);
     padding: 2.5rem;
     position: relative;
     transition: transform .3s, border-color .3s;
 }

 .price-card:hover {
     transform: translateY(-4px);
     border-color: var(--c-accent);
 }

 .price-card.featured {
     border-color: var(--c-accent);
     background: linear-gradient(135deg, #1a1c25 0%, #1e2030 100%);
 }

 .price-badge {
     position: absolute;
     top: -12px;
     left: 2rem;
     background: var(--c-accent);
     color: #0D0F14;
     padding: .25rem .9rem;
     font-size: .75rem;
     font-weight: 700;
     letter-spacing: .06em;
     text-transform: uppercase;
 }

 .price-name {
     font-size: .8rem;
     font-weight: 600;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--c-muted);
     margin-bottom: 1rem;
 }

 .price-amount {
     font-family: 'Playfair Display', serif;
     font-size: 2.8rem;
     font-weight: 700;
     color: var(--c-accent);
     line-height: 1;
     margin-bottom: .3rem;
 }

 .price-amount span {
     font-size: 1rem;
     font-weight: 400;
     color: var(--c-muted);
 }

 .price-desc {
     font-size: .85rem;
     color: var(--c-muted);
     margin-bottom: 2rem;
     line-height: 1.6;
 }

 .price-divider {
     height: 1px;
     background: var(--c-border);
     margin-bottom: 1.5rem;
 }

 .price-features {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: .8rem;
     margin-bottom: 2rem;
 }

 .price-features li {
     font-size: .9rem;
     display: flex;
     align-items: flex-start;
     gap: .7rem;
 }

 .price-features li::before {
     content: '—';
     color: var(--c-accent);
     flex-shrink: 0;
 }

 .btn-price {
     width: 100%;
     padding: .85rem;
     background: transparent;
     border: 1px solid var(--c-border);
     border-radius: 50px;
     color: var(--c-accent);
     font-weight: 600;
     font-size: .9rem;
     cursor: pointer;
     letter-spacing: .04em;
     text-transform: uppercase;
     transition: background .25s, transform .15s, box-shadow .25s;
 }

 .btn-price:hover,
 .price-card.featured .btn-price {
     background: var(--c-accent);
     border-color: var(--c-accent);
     color: #fff;
 }
.mg-20 {
 margin-top: 20px;  
}
 /* ============================================================
     7. ВІДГУКИ
     ============================================================ */
 #reviews {
     background: var(--c-surface);
 }

 .reviews-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 1.5rem;
     margin-top: 3.5rem;
 }

 .review-card {
     background: var(--c-bg);
     border: 1px solid var(--c-border);
     padding: 2rem;
     position: relative;
     transition: border-color .3s;
 }

 .review-card:hover {
     border-color: var(--c-accent);
 }

 .review-quote {
     font-size: 3rem;
     line-height: 1;
     color: var(--c-accent);
     opacity: .3;
     font-family: 'Playfair Display', serif;
     margin-bottom: -.5rem;
 }

 .review-text {
     font-size: .92rem;
     color: var(--c-muted);
     line-height: 1.75;
     margin-bottom: 1.5rem;
 }

 .review-stars {
     color: var(--c-accent);
     font-size: .9rem;
     letter-spacing: .1em;
     margin-bottom: 1.2rem;
 }

 .review-author {
     display: flex;
     align-items: center;
     gap: .8rem;
 }

 .review-avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: var(--c-surface);
     border: 1px solid var(--c-border);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: .85rem;
     font-weight: 700;
     color: var(--c-accent);
 }

 .review-name {
     font-size: .9rem;
     font-weight: 600;
 }

 .review-date {
     font-size: .78rem;
     color: var(--c-muted);
 }

 /* ============================================================
     8. КОНТАКТИ / ФОРМА
     ============================================================ */
 #contact {
     background: var(--c-bg);
 }

 .contact-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 6rem;
     align-items: start;
 }

 .contact-info-item {
     display: flex;
     gap: 1rem;
     align-items: flex-start;
     margin-bottom: 1.8rem;
 }

 .contact-icon {
     width: 40px;
     height: 40px;
     flex-shrink: 0;
     border: 1px solid var(--c-border);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--c-accent);
 }

 .contact-info-item h4 {
     font-family: 'Manrope', sans-serif;
     font-size: .82rem;
     font-weight: 600;
     color: var(--c-muted);
     text-transform: uppercase;
     letter-spacing: .08em;
     margin-bottom: .3rem;
 }

 .contact-info-item p {
     font-size: .95rem;
 }

 .form-title {
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 1.8rem;
 }

 .form-group {
     margin-bottom: 1.2rem;
 }

 .form-label {
     display: block;
     font-size: .78rem;
     font-weight: 600;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--c-muted);
     margin-bottom: .5rem;
 }

 .form-control {
     width: 100%;
     padding: .85rem 1rem;
     background: var(--c-surface);
     border: 1px solid var(--c-border);
     color: var(--c-text);
     font-family: 'Manrope', sans-serif;
     font-size: .95rem;
     outline: none;
     transition: border-color .25s;
     resize: none;
 }

 .form-control:focus {
     border-color: var(--c-accent);
 }

 .form-control::placeholder {
     color: var(--c-muted);
 }

 .form-submit {
     width: 100%;
     padding: 1rem;
     background: var(--c-accent);
     border: none;
     border-radius:50px;
     color: #fff;
     font-family: 'Manrope', sans-serif;
     font-size: .95rem;
     font-weight: 700;
     letter-spacing: .06em;
     text-transform: uppercase;
     cursor: pointer;
     margin-top: .5rem;
     transition: background .25s, transform .15s;
 }

 .form-submit:hover {
     background: var(--c-accent2);
     transform: translateY(-2px);
 }

 .form-note {
     font-size: .78rem;
     color: var(--c-muted);
     margin-top: .8rem;
 }

 .success-msg {
     display: none;
     padding: 1rem;
     background: rgba(201, 169, 110, .1);
     border: 1px solid var(--c-accent);
     color: var(--c-accent);
     font-size: .9rem;
     margin-top: 1rem;
 }

 /* ============================================================
     FOOTER
     ============================================================ */
 footer {
     background: #1a1a1a;;
     border-top: 1px solid var(--c-border);
     padding: 3rem 5%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 1.5rem;
 }

 .footer-logo {
     font-family: 'Playfair Display', serif;
     font-size: 1.3rem;
     font-weight: 700;
     color: var(--c-accent);
 }
 .footer-logo a img {
width: 120px;
 }

 .footer-copy {
     font-size: .82rem;
     color: var(--c-surface);
 }

 .footer-links {
     display: flex;
     gap: 1.5rem;
     list-style: none;
 }

 .footer-links a {
     font-size: .82rem;
     color: var(--c-surface);
     transition: color .2s;
 }

 .footer-links a:hover {
     color: var(--c-accent);
 }
.icon-footer .contact-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}
.contact-info-item a {
transition: 0.4s.
}
.contact-info-item a:hover {
color:var(--c-accent);
}
 /* ============================================================
     RESPONSIVE
     ============================================================ */
 @media (max-width: 900px) {

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

     .about-img-wrap {
         max-width: 400px;
     }

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

     .nav-links,
     .nav-cta {
         display: none;
     }

     .burger {
         display: flex;
     }
 }
 @media (max-width: 768px) {
  .hero-btns{
      justify-content: center;
  }
  .hero-glow {
    height: 1000px;  
    right: -19%;
    top: 102px;
  }
 .hero-inner {
    background: #f9f6f0d6;
    padding: 20px;
    border-radius: 10px;  
  }
 }

 @media (max-width: 600px) {
     section {
         padding: 70px 5%;
     }

     .hero-stats {
         gap: 1.5rem;
     }

     .adv-item {
         padding: 1.8rem;
     }

     footer {
         flex-direction: column;
         text-align: center;
     }
 }
/* ============================================================
   WORDPRESS / ACF ДОДАТКОВІ СТИЛІ
   ============================================================ */

/* Team socials */
.team-socials {
    display: flex;
    gap: .7rem;
    margin-top: 1rem;
}

.team-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--c-border);
    color: var(--c-muted);
    transition: border-color .25s, color .25s;
    text-decoration: none;
}

.team-social-link:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.team-social-link svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

/* Team photo placeholder (no image) */
.team-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--c-surface) 0%, var(--c-border) 100%);
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--c-accent);
}

/* About fallback */
.about-img-fallback {
    width: 100%;
    height: 300px;
    background: var(--c-border);
    border-radius: 10px;
}

/* About wysiwyg text */
.about-text-wysiwyg {
    max-width: 100% !important;
}

.about-text-wysiwyg p {
    margin-bottom: 1rem;
    color: var(--c-muted);
    font-size: 1rem;
    line-height: 1.75;
}

.about-text-wysiwyg b,
.about-text-wysiwyg strong {
    color: var(--c-text);
}

/* Nav scroll effect */
#jh-nav.scrolled {
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

/* WordPress admin bar fix */
.admin-bar #jh-nav {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar #jh-nav {
        top: 46px;
    }
}

/* ============================================================
   404 СТОРІНКА
   ============================================================ */
#jh-404 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f9e9cf 0%, #EDE6DC 50%, #E8DDD2 100%);
    padding: 120px 5% 80px;
    text-align: center;
}

.jh-404-inner {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.jh-404-code {
    font-family: 'Playfair Display', serif;
    font-size: clamp(7rem, 20vw, 12rem);
    font-weight: 900;
    line-height: 1;
    color: var(--c-border);
    letter-spacing: -.04em;
    user-select: none;
    margin-bottom: -1rem;
}

.jh-404-gavel {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    opacity: .5;
}

.jh-404-title {
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 700;
    margin-bottom: 1.2rem;
    line-height: 1.2;
}

.jh-404-desc {
    color: var(--c-muted);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 2.5rem;
}

.jh-404-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.jh-404-actions a {
    display: inline-block;
    text-decoration: none;
}

.jh-404-links p {
    font-size: .82rem;
    color: var(--c-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .8rem;
}

.jh-404-links ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.jh-404-links a {
    font-size: .9rem;
    color: var(--c-muted);
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 2px;
    transition: color .2s, border-color .2s;
}

.jh-404-links a:hover {
    color: var(--c-accent);
    border-color: var(--c-accent);
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.jh-breadcrumbs {
    font-size: .8rem;
    color: var(--c-muted);
    padding: .5rem 5%;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

.jh-breadcrumbs a {
    color: var(--c-accent);
    text-decoration: none;
    transition: opacity .2s;
}

.jh-breadcrumbs a:hover { opacity: .7; }

.jh-bc-sep {
    color: var(--c-border);
    font-size: .75rem;
}

/* ============================================================
   SEO / ACCESSIBILITY STYLES
   ============================================================ */

/* Skip to content link (для screen readers та SEO) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    padding: .75rem 1.5rem;
    background: var(--c-accent);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    z-index: 9999;
    transition: top .2s;
    text-decoration: none;
}
.skip-link:focus {
    top: 0;
}

/* Screen reader only (доступність) */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    word-wrap: normal;
}
.screen-reader-text:focus {
    clip: auto;
    height: auto;
    left: 5px;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Focus styles для доступності */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

/* Img оптимізація */
img {
    max-width: 100%;
    height: auto;
}