/* ==========================================================================
   BASE THEME & VARIABLES
   ========================================================================== */
:root{
    /* Monochrome palette + eco-accent */
    --clr-bg:            #f5f5f5;
    --clr-surface:       #ffffff;
    --clr-surface-soft:  #f9f9f9;
    --clr-text-main:     #333333;
    --clr-text-dark:     #222222;
    --clr-text-light:    #fafafa;
    --clr-accent:        #4ade80; /* Eco-verde */
    --clr-accent-dark:   #16a34a;
    --clr-border:        #d4d4d4;

    /* Gradients & overlays */
    --overlay-dark:      linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55));
    --overlay-light:     linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,.65));

    /* Shadows */
    --shadow-soft:       0 2px 8px rgba(0,0,0,.06);
    --shadow-medium:     0 4px 16px rgba(0,0,0,.12);

    /* Rounding */
    --radius:            .75rem;

    /* Motion */
    --ease-nonlinear:    cubic-bezier(.6,.05,.3,.95);
}

/* ==========================================================================
   GLOBAL RESET & TYPOGRAPHY
   ========================================================================== */
html{
    scroll-behavior:smooth;
}
body{
    background:var(--clr-bg);
    color:var(--clr-text-main);
    font-family:'Rubik',system-ui,Arial,sans-serif;
    line-height:1.6;
}

/* Headings */
h1,h2,h3,h4,h5,h6{
    font-family:'Manrope',sans-serif;
    color:var(--clr-text-dark);
    font-weight:800;
    line-height:1.2;
    text-align:center;
    text-shadow:1px 1px 3px rgba(0,0,0,.5); /* extra contrast */
}

/* Links */
a{
    color:var(--clr-accent-dark);
    transition:color .25s var(--ease-nonlinear);
}
a:hover{
    color:var(--clr-accent);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn,
button,
input[type='submit']{
    display:inline-block;
    background:var(--clr-accent);
    color:var(--clr-text-light);
    font-family:'Manrope',sans-serif;
    font-weight:600;
    padding:.8rem 2.5rem;
    border-radius:9999px;
    transition:all .3s var(--ease-nonlinear);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
    background:var(--clr-accent-dark);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

/* ==========================================================================
   HEADER & NAV
   ========================================================================== */
header{
    backdrop-filter:blur(8px) saturate(150%);
    background:rgba(17,17,17,.95);
    box-shadow:var(--shadow-medium);
}
#mobileMenu a{
    color:var(--clr-text-light);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
#hero{
    position:relative;
    color:#ffffff; /* гарантия контрастности */
    text-shadow:0 2px 6px rgba(0,0,0,.6);
}
#hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:var(--overlay-dark);
    z-index:0;
}
#hero>*{
    position:relative;
    z-index:1;
}

/* ==========================================================================
   CARD COMPONENT
   ========================================================================== */
.card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:var(--clr-surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow-soft);
    transition:transform .35s var(--ease-nonlinear),box-shadow .35s var(--ease-nonlinear);
}
.card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-medium);
}
.card-image{
    width:100%;
    height:12rem;
    overflow:hidden;
}
.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0 auto;
    display:block;
}
.card-content{
    padding:1.5rem;
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* ==========================================================================
   GALLERY SLIDER
   ========================================================================== */
#galleryTrack img{
    user-select:none;
}

/* Controls */
button#prevSlide,
button#nextSlide,
button#prevTesti,
button#nextTesti{
    width:2.5rem;
    height:2.5rem;
    line-height:2.5rem;
    font-size:1.5rem;
    border-radius:9999px;
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
#testimonialTrack > div{
    padding-bottom:2rem;
}

/* ==========================================================================
   PRICING TABLE
   ========================================================================== */
#pricing .w-full{
    border:1px solid var(--clr-border);
}

/* ==========================================================================
   PARALLAX & GLASS
   ========================================================================== */
.parallax{
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
}
.glass{
    background:rgba(255,255,255,.22);
    backdrop-filter:blur(10px);
}

/* ==========================================================================
   LINK "LEER MÁS"
   ========================================================================== */
.link-more{
    font-weight:600;
    position:relative;
    padding-right:1.2rem;
}
.link-more::after{
    content:'→';
    position:absolute;
    right:0;
    top:0;
    transition:transform .25s var(--ease-nonlinear);
}
.link-more:hover::after{
    transform:translateX(4px);
}

/* ==========================================================================
   SUCCESS PAGE
   ========================================================================== */
.success-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
}

/* ==========================================================================
   PRIVACY & TERMS PAGES
   ========================================================================== */
.legal-page{
    padding-top:100px; /* избежать перекрытия хедером */
}

/* ==========================================================================
   NON-LINEAR ANIMATIONS
   ========================================================================== */
@keyframes floatNonlinear{
    0%{transform:translateY(0);}
    35%{transform:translateY(-10px);}
    60%{transform:translateY(6px);}
    100%{transform:translateY(0);}
}
.animate-float{
    animation:floatNonlinear 6s var(--ease-nonlinear) infinite;
}

/* ==========================================================================
   COOKIE POPUP (minimal override)
   ========================================================================== */
#cookiePopup{
    animation:slideUp .6s var(--ease-nonlinear);
}
@keyframes slideUp{
    0%{transform:translateY(100%);}
    100%{transform:translateY(0);}
}

/* ==========================================================================
   SOCIAL LINKS
   ========================================================================== */
footer ul li a{
    position:relative;
    display:inline-block;
    padding:.1rem .2rem;
}
footer ul li a::before{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:2px;
    background:var(--clr-accent);
    transition:width .3s var(--ease-nonlinear);
}
footer ul li a:hover::before{
    width:100%;
}

/* ==========================================================================
   UTILITIES (helper classes)
   ========================================================================== */
.bg-overlay-dark{
    background:var(--overlay-dark);
}
.bg-overlay-light{
    background:var(--overlay-light);
}