/* ==========================================================
    1. TOKENS — кольори, шрифти, відступи
    Змінюй тут: усі кольори й розміри відступів по всьому сайту
    беруться з цих змінних.
========================================================== */
:root{
    --bg:#070707;
    --bg-alt:#121212;
    --fg:#EFEFEF;
    --muted:#8a8a8a;
    --accent:#C04BFF;
    --line:#2b2b2b;

    /* шкала відступів (mobile-first базові значення) */
    --sp-1:8px;
    --sp-2:16px;
    --sp-3:24px;
    --sp-4:32px;
    --sp-5:48px;
    --sp-6:64px;

    /* внутрішній відступ секції: мобільний / десктопний */
    --section-py:var(--sp-6);       /* 64px на мобільці */
    --section-py-lg:120px;          /* стане 120px від --bp-lg, див. медіа-запити */

    /* горизонтальний паддінг контейнера — саме це відсуває контент від країв екрану.
        Збільшено для малих екранів, щоб текст (особливо великий заголовок)
        гарантовано не "прилипав" до країв. */
    --wrap-px:24px;                 /* мобільний відступ зліва/справа */
    --wrap-px-lg:32px;              /* 32px від --bp-md */

    /* фіксована висота хедера — використовується для "заїзду" секцій під нього.
        Якщо змінюється padding/розмір лого в .nav — онови ці значення. */
    --header-h:76px;
    --header-h-lg:80px;

    --radius:0px;
    --ease:cubic-bezier(.2,.9,.2,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
    background:var(--bg);
    color:var(--fg);
    font-family:'Space Grotesk', sans-serif;
    font-weight:400;
    overflow-x:hidden;
    position:relative;
}

/* текстура зерна на весь екран */
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:2;
    opacity:.05;
    background-image:
        repeating-linear-gradient(0deg, #fff 0px, transparent 1px, transparent 2px, #fff 3px),
        repeating-linear-gradient(90deg, #fff 0px, transparent 1px, transparent 2px, #fff 3px);
    mix-blend-mode:overlay;
}

h1,h2,h3{
    font-family:'Anton', sans-serif;
    font-weight:400;
    letter-spacing:.01em;
    line-height:0.92;
    text-transform:uppercase;
}

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

ul{ list-style:none; }

button{
    font-family:inherit;
    background:none;
    border:none;
    color:inherit;
    cursor:pointer;
}

/* ==========================================================
    2. LAYOUT — контейнер і базова сітка
========================================================== */
.wrap{
    max-width:1240px;
    margin:0 auto;
    padding:0 var(--wrap-px);
}

.section{
    padding-top:var(--section-py);
    padding-bottom:var(--section-py);
    border-bottom:1px solid var(--line);
}

.section-head{
    display:flex;
    flex-direction:column;
    gap:var(--sp-2);
    margin-bottom:var(--sp-5);
}
.section-head h2{ font-size:clamp(32px,8vw,56px); }
.section-head p{ color:var(--muted); max-width:320px; font-size:15px; }

/* ==========================================================
    3. HEADER / NAV (mobile-first)
========================================================== */
header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(7,7,7,.5);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
}

.nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:var(--sp-2) var(--wrap-px);
}

.logo-wrap{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    line-height:1;
}
.logo-main {
    font-family: 'Anton', sans-serif;
    font-size: 30px;
    letter-spacing: .1em;
    color: rgba(7, 7, 7, .88);
    text-transform: uppercase;
    filter: blur(.4px);
    text-shadow: 0 0 2px #fff, 0 0 6px #fff, 0 0 10px var(--accent), 0 0 20px var(--accent), 0 0 40px var(--accent);
    display:inline-block;
    transform:scaleX(1.3);
    transform-origin:left;
}
.logo-sub{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Space Grotesk', sans-serif;
    font-size:8px;
    font-weight:600;
    letter-spacing:.5em;
    color:var(--muted);
    text-transform:uppercase;
    margin-top:6px;
}
.logo-sub::before,
.logo-sub::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--muted);
    min-width:12px;
}
.logo-wrap--sm{
    margin-bottom:var(--sp-2);
}
.logo-wrap--sm .logo-main{
    font-size:25px;
}
.logo-wrap--sm .logo-sub{
    font-size:7px;
    letter-spacing:.4em;
}
.mobile-menu a.logo-wrap{
    border-bottom:none;
    padding:0;
}
@keyframes neon-flicker{
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100%{ opacity:1; }
    20%, 22%, 24%, 55%{ opacity:.85; }
}
.logo-main{ animation:neon-flicker 4s infinite; }

.nav-links{
    display:none;
    gap:var(--sp-4);
}
.nav-links a{
    font-size:15px;
    font-weight:500;
    transition:color .12s steps(2);
}
.nav-links a:hover{ color:var(--accent); }

.nav-cta{
    display:none;
    border:2px solid var(--accent);
    color:#fff; 
    background:#070707;
    border:2px solid #fff;
    padding:10px 20px;
    font-weight:700;
    font-size:14px;
    transition:background .15s, color .15s;
}
.nav-cta:hover{ 
    background:var(--accent); 
    color:#070707; 
    background:#fff;
    border:2px solid #070707; 
}
.burger{
    position:fixed;
    top:20px;
    right:var(--wrap-px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:32px;
    height:32px;
    z-index:1100;
}
.burger span{
    display:block;
    width:100%;
    height:2px;
    background:var(--fg);
    border-radius:1px;
    transition:transform .25s var(--ease), opacity .2s var(--ease);
}
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu-overlay{
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(1px);
    z-index:999;
    opacity:0;
    visibility:hidden;
    transition:opacity .3s var(--ease), visibility 0s linear .3s;
}
.mobile-menu-overlay.is-open{
    opacity:1;
    visibility:visible;
    transition:opacity .3s var(--ease), visibility 0s linear 0s;
}

.mobile-menu{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:80vw;
    max-width:420px;
    height:100dvh;
    background:
        radial-gradient(circle at 15% 15%, rgba(192,75,255,.10), transparent 55%),
        var(--bg);
    z-index:1000;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:var(--sp-3);
    padding:calc(var(--sp-6) + env(safe-area-inset-top, 0px)) var(--wrap-px) var(--sp-6);
    border-right:1px solid var(--line);
    transform:translateX(-100%);
    transition:transform .35s var(--ease);
}
.mobile-menu.is-open{ transform:translateX(0); }

.mobile-menu .menu-eyebrow{
    color:var(--muted);
    font-size:13px;
    letter-spacing:.04em;
    margin-bottom:var(--sp-2);
}

.mobile-menu a{
    font-family:'Anton', sans-serif;
    font-size:clamp(26px,13vw,30px);
    line-height:1.05;
    text-transform:uppercase;
    padding:var(--sp-1) 0;
    border-bottom:1px solid var(--line);
    transition:color .15s;
}
.mobile-menu a:hover,
.mobile-menu a:focus-visible{ color:var(--accent); }

.mobile-menu .mobile-cta{
    margin-top:var(--sp-4);
    align-self:flex-start;
    background:#fff;
    color:#070707;
    border:2px solid #fff;
    padding:16px 28px;
    font-weight:700;
    font-size:16px;
    font-family:'Space Grotesk', sans-serif;
    text-transform:none;
}

body.menu-open{ overflow:hidden; }

/* ==========================================================
    4. HERO
========================================================== */
.hero{ padding-top:var(--sp-6); padding-bottom:var(--sp-5); }

.hero-tag{
    color:var(--muted);
    font-size:15px;
    margin-bottom:var(--sp-3);
    max-width:420px;
}

.hero h1{
    font-size:clamp(44px, 12vw, 128px);
    overflow:hidden;
}
/* Заголовок героя тепер використовує єдину стандартну утиліту
    .reveal (+ .reveal--up), як і решта тексту на сторінці —
    жодної окремої "hero h1 span" анімації тут більше немає. */
.hero h1 span{ display:block; }
.hero h1 span:nth-child(2){ color:var(--accent); }
.hero-bottom{
    margin-top:var(--sp-5);
    display:flex;
    flex-direction:column;
    gap:var(--sp-3);
}
.hero-sub{
    max-width:440px;
    font-size:16px;
    color:#c9c9c9;
    line-height:1.55;
}

.btn-primary{
    background:#070707;
    color:#fff;
    font-weight:700;
    font-size:16px;
    padding:16px 30px;
    display:inline-block;
    border:2px solid #fff;
    text-align:center;
    transition:background .15s, color .15s;
    white-space:nowrap;
}
.btn-primary:hover{ 
    background:transparent; 
    color:#070707; 
    background:#fff;
    border:2px solid #070707;
}

/* ==========================================================
    4a. VIDEO BACKGROUND — універсальний компонент
========================================================== */
.video-bg{
    position:relative;
    overflow:hidden;
    z-index:0;
    isolation:isolate;
}

.video-bg__media{
    position:absolute !important;
    inset:0 !important;
    top:0; left:0; right:0; bottom:0;
    width:100% !important;
    height:100% !important;
    max-width:none !important;   /* про всяк випадок, якщо тема має img/video{max-width:100%} */
    object-fit:cover !important;
    object-position:center !important;
    z-index:-2;
}

.video-bg__overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(7,7,7,.55), rgba(7,7,7,.75));
    z-index:-1;
}

.video-bg--full,
.video-bg--tall{
    display:flex;
    align-items:center;
}
.video-bg--full > .wrap,
.video-bg--tall > .wrap{
    width:100%;
}
.video-bg--full{
    height:100vh;           
    height:100svh !important;
    min-height:100svh !important;
}
.video-bg--tall{
    height:70vh;
    height:70svh !important;
    min-height:70svh !important;
}

.pull-under-header{
    margin-top:calc(-1 * var(--header-h));
}
.pull-under-header > .wrap{
    padding-top:var(--header-h);
}
@media (min-width:860px){
    .pull-under-header{ margin-top:calc(-1 * var(--header-h-lg)); }
    .pull-under-header > .wrap{ padding-top:var(--header-h-lg); }
}
/* ==========================================================
SCROLL REVEAL — універсальна утиліта появи елемента при
прокручуванні. Додай клас .reveal + модифікатор напрямку
на БУДЬ-ЯКИЙ елемент вручну. JS-обсервер сам додасть
.is-visible, коли елемент з'явиться у вʼюпорті.

Напрямки (додай ОДИН з них поруч з .reveal):
    .reveal--up     — виринає знизу вгору (за замовчуванням, якщо без модифікатора)
    .reveal--left   — виїжджає зліва направо
    .reveal--right  — виїжджає справа наліво
    .reveal--down   — опускається зверху вниз

Затримку керуй через style="--reveal-delay:.2s" на самому елементі.
Це ЄДИНА анімація появи тексту на сайті — використовується і в hero,
і в CTA, і будь-де ще, де потрібен reveal-ефект.
========================================================== */
.reveal{
    opacity:0 !important; 
    transition:opacity .8s var(--ease), transform .8s var(--ease) !important;
    transition-delay:var(--reveal-delay, 0s) !important;
}
.reveal--inline{
    display:inline-block;
}
.reveal.is-visible{
    opacity:1 !important;
    transform:translate(0,0) !important;
}
.reveal,
.reveal--up{ transform:translateY(40px) !important; }
.reveal--down{ transform:translateY(-40px) !important; }
.reveal--left{ transform:translateX(-40px) !important; }
.reveal--right{ transform:translateX(40px) !important; }
@media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}
/* ==========================================================
    ВИМКНЕННЯ АНІМАЦІЙ ТА ПРИХОВАНИХ СТАНІВ У РЕДАКТОРІ GUTENBERG
========================================================== */
.block-editor-page .reveal,
.editor-styles-wrapper .reveal,
body.wp-admin .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.block-editor-page .logo-main,
.editor-styles-wrapper .logo-main,
body.wp-admin .logo-main {
    animation: none !important;
    filter: none !important;
}

.block-editor-page .btn-booking,
.editor-styles-wrapper .btn-booking,
body.wp-admin .btn-booking {
    animation: none !important;
}
/* ========================================= */
/* ==========================================================
    5. SERVICES
========================================================== */
.service-row{
    display:grid;
    grid-template-columns:32px 1fr 90px;
    align-items:center;
    gap:var(--sp-2);
    padding:var(--sp-3) 0;
    border-top:1px solid var(--line);
    transition:background .15s;
}
.services .service-row:last-child{ border-bottom:1px solid var(--line); }
.service-row:hover{ background:var(--bg-alt); }

.s-num{ color:var(--accent); font-family:'Anton',sans-serif; font-size:18px; }
.s-name{ font-size:18px; font-weight:600; }
.s-time{ display:none; }
.s-price{ color:var(--fg); font-weight:700; font-size:15px; text-align:right; }

/* ==========================================================
    6. TEAM
========================================================== */
/*
.services{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background-image:url('https://base51.com.ua/wp-content/themes/base51/assets/image1.jpeg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:scroll;   
}
.services::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(7,7,7,.75), rgba(7,7,7,.9));
    z-index:-1;
}
*/
.team-grid{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:80%;
    gap:12px;
    background:transparent;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--wrap-px);
    padding-bottom:var(--sp-2);
    -ms-overflow-style:none;
    scrollbar-width:none;
}
.team-grid::-webkit-scrollbar{ display:none; }

.barber{
    scroll-snap-align:start;
    background:var(--bg);
    padding:var(--sp-4) var(--sp-3) var(--sp-3);
    position:relative;
    overflow:hidden;
    border:1px solid var(--line);
}
.barber-mark{
    width:100%;
    aspect-ratio:3/4;
    background:linear-gradient(160deg, #1c1c1c, #050505);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:var(--sp-2);
    position:relative;
}
.barber-mark span{
    font-family:'Anton', sans-serif;
    font-size:44px;
    color:#2f2f2f;
    transition:color .2s;
}
.barber:hover .barber-mark span{ color:var(--accent); }
.barber h3{ font-size:19px; margin-bottom:6px; }
.barber p{ color:var(--muted); font-size:14px; }

/* ==========================================================
    7. CTA
========================================================== */
.cta{ text-align:left; }
.cta h2{
    font-size:clamp(34px,10vw,90px);
    max-width:900px;
}
.cta h2 em{ font-style:normal; color:var(--accent); }
.cta .btn-primary{ margin-top:var(--sp-4); }
.cta{
    display:flex;
    flex-direction:column;
    gap:var(--sp-4);
}

.cta-top{
    display:flex;
    flex-direction:column;
    gap:var(--sp-4);
}

.cta-map{
    position:relative;
    width:100%;
    aspect-ratio:4/3;
    overflow:hidden;
    border:1px solid var(--line);
    isolation:isolate;
}

/* приглушуємо стандартні "туристичні" кольори гугл-карти під темну тему */
.cta-map iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    filter:grayscale(1) invert(92%) contrast(88%);
}

/* легкий accent-кант при наведенні / фокусі */
.cta-map:hover,
.cta-map:focus-within{
    border-color:var(--accent);
}

/* рамка-декор у стилі секцій сайту */
.cta-map::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(192,75,255,.15);
    z-index:1;
}

@media (min-width:860px){
    .cta-top{
        flex-direction:row;
        justify-content:space-between;
        align-items:flex-end;
        gap:var(--sp-5);
    }

    .cta{
        flex-direction:row;
        align-items:stretch;
        gap:var(--sp-5);
    }

    .cta-top{
        flex:1 1 50%;
        flex-direction:column;
        align-items:flex-start;
        justify-content:center;
    }

    .cta-map{
        flex:1 1 50%;
        aspect-ratio:auto;
        min-height:340px;
    }
}

/* ==========================================================
    8. FOOTER
========================================================== */
footer.wrap{ padding:var(--sp-6) var(--wrap-px); }

.foot-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:var(--sp-4);
    margin-bottom:var(--sp-5);
}

.foot-logo{
    font-family:'Anton', sans-serif;
    font-size:26px;
    color:var(--accent);
    margin-bottom:var(--sp-1);
}

.foot-col h4{
    font-size:13px;
    color:var(--muted);
    margin-bottom:var(--sp-2);
    font-weight:500;
}
.foot-col p, .foot-col a{
    display:block;
    font-size:15px;
    margin-bottom:var(--sp-1);
    color:#d8d8d8;
}
.foot-col a{ transition:color .15s; }
.foot-col a:hover{ color:var(--accent); }

.foot-col .social{
    display:flex;
    justify-content:flex-start;
    gap:10px;
}
.foot-col .social a{ margin-right:0; }
.foot-col .social a{ transition:transform .15s; display:inline-flex; }
.foot-col .social a:hover{ transform:translateY(-2px); }

.foot-bottom{
    border-top:1px solid var(--line);
    padding-top:var(--sp-3);
    display:flex;
    flex-direction:column;
    gap:var(--sp-1);
    color:var(--muted);
    font-size:13px;
}

/* ==========================================================
    9. FLOATING ACTIONS
========================================================== */
.floating-actions{
    position:fixed;
    left:0;
    right:0;
    bottom:calc(20px + env(safe-area-inset-bottom, 0px));
    display:flex;
    flex-direction:column-reverse;
    align-items:flex-end;
    justify-content:flex-end;
    gap:var(--sp-2);
    padding:0 var(--wrap-px);
    z-index:80;
    pointer-events:none;
}
.floating-actions > *{ pointer-events:auto; }

body.menu-open .floating-actions{ visibility:hidden; }

.btn-booking{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(135deg, var(--accent), #8B2FD9);
    color:#070707;
    font-weight:800;
    font-size:15px;
    letter-spacing:.01em;
    padding:16px 24px;
    border-radius:999px;
    white-space:nowrap;
    box-shadow:0 10px 28px rgba(192,75,255,.35);
    animation:pulse-ring 2.4s infinite, btn-breathe 2.4s infinite;
}
.btn-booking-icon{
    width:20px;
    height:20px;
    flex:none;
}

@keyframes pulse-ring{
    0%{   box-shadow:0 10px 28px rgba(192,75,255,.35), 0 0 0 0 rgba(192,75,255,.55); }
    70%{  box-shadow:0 10px 28px rgba(192,75,255,.35), 0 0 0 16px rgba(192,75,255,0); }
    100%{ box-shadow:0 10px 28px rgba(192,75,255,.35), 0 0 0 0 rgba(192,75,255,0); }
}
@keyframes btn-breathe{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.045); }
}

.btn-top{
    width:46px;
    height:46px;
    border-radius:50%;
    background:var(--bg-alt);
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transform:translateY(14px);
    pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease), background .15s;
}
.btn-top.is-visible{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}
.btn-top:hover{ background:var(--line); }
.btn-top svg{
    width:18px;
    height:18px;
    transition:transform .15s var(--ease);
}
.btn-top:hover svg{ transform:translateY(-2px); }

/* ==========================================================
    10. MEDIA QUERIES
========================================================== */
@media (min-width:640px){
    .team-grid{
        grid-auto-flow:row;
        grid-template-columns:repeat(2,1fr);
        overflow-x:visible;
        scroll-snap-type:none;
        /*background:var(--line);*/
        /*gap:2px;*/
        padding-bottom:0;
    }
    /*.barber{ border:none; }*/
    .foot-grid{ grid-template-columns:1fr 1fr; }
}

@media (min-width:860px){
    :root{
        --wrap-px:var(--wrap-px-lg);
        --section-py:var(--section-py-lg);
    }

    .burger{ display:none; }
    .mobile-menu{ display:none; }

    .nav-links{ display:flex; }
    .nav-cta{ display:inline-block; }

    .hero{ padding-top:120px; padding-bottom:80px; }
    .hero-bottom{
        flex-direction:row;
        align-items:flex-end;
        justify-content:space-between;
        gap:40px;
    }

    .section-head{
        flex-direction:row;
        justify-content:space-between;
        align-items:flex-end;
    }

    .service-row{ grid-template-columns:60px 1fr 140px 140px; }
    .s-time{ display:block; color:var(--muted); font-size:15px; text-align:right; }

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

    .foot-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; }
    .foot-bottom{ flex-direction:row; justify-content:space-between; }

    .btn-booking{ font-size:15px; padding:16px 26px; }
}

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

@media (max-width:360px){
    .hero h1{ font-size:clamp(38px, 13vw, 128px); }
}

@media (prefers-reduced-motion: reduce){
    .mobile-menu, .burger span, .btn-primary, .nav-cta{ transition:none; }
}