/* =====================================================================
   EKS Electro School · Premium Stylesheet
   Palette: white #ffffff · emerald #004d40 · pearl #fdfcf0 · black #111111
   ===================================================================== */

/* ----------------- Tokens ----------------- */
:root{
    --c-emerald: #004d40;
    --c-emerald-2: #0a635a;
    --c-emerald-3: #02322b;

    --c-white: #ffffff;
    --c-black: #111111;
    --c-black-2: #2a2a2a;

    --c-pearl: #fdfcf0;
    --c-pearl-2: #f7f3e0;
    --c-pearl-3: #ece6cf;

    /* Accent tokens (legacy "gold" names redirected to black/pearl scheme
       so all existing usages automatically pick up the new palette).        */
    --c-gold: #111111;        /* solid accent on light backgrounds            */
    --c-gold-2: #2a2a2a;      /* darker hover variant                         */
    --c-gold-soft: #f7f3e0;   /* soft cream tone for use on dark backgrounds  */

    /* Premium gold accents — used ONLY for hover glows, button shimmer
       and small interactive accents. Base palette stays white/emerald/
       pearl/black; gold is reserved for "warm reaction" moments.            */
    --c-gold-warm: #d4af37;
    --c-gold-warm-2: #b8932b;
    --c-gold-glow: rgba(212, 175, 55, 0.4);
    --c-gold-glow-soft: rgba(212, 175, 55, 0.18);

    --c-ink: #0d1f1c;
    --c-ink-2: #2a3633;
    --c-mute: #6c7672;
    --c-line: rgba(17, 17, 17, 0.12);

    --glass-bg: rgba(255, 255, 255, 0.62);
    --glass-bg-dark: rgba(2, 50, 43, 0.55);
    --glass-stroke: rgba(255, 255, 255, 0.65);
    --glass-blur: 18px;

    --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.16);

    --radius: 18px;
    --radius-lg: 28px;
    --radius-pill: 999px;

    --f-display: 'Cormorant Garamond', 'Cairo', Georgia, serif;
    --f-body: 'Manrope', 'Cairo', system-ui, sans-serif;

    --container: 1240px;
    --ease: cubic-bezier(.2,.7,.2,1);
}

/* ----------------- Reset ----------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body{
    font-family: var(--f-body);
    color: var(--c-ink);
    line-height: 1.6;
    background: var(--c-pearl);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Atmospheric background */
body::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
      radial-gradient(1200px 700px at 85% -10%, rgba(247,243,224,.65), transparent 60%),
      radial-gradient(900px 600px at -10% 30%, rgba(0,77,64,.10), transparent 60%),
      radial-gradient(700px 500px at 70% 90%, rgba(236,230,207,.45), transparent 60%),
      var(--c-pearl);
    pointer-events: none;
}
body::after{
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: .35;
    mix-blend-mode: multiply;
}

a { color: var(--c-emerald); text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.01em; color: var(--c-emerald); margin: 0; line-height: 1.1; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.section { padding: 110px 0; position: relative; }

/* ----------------- Glass utility ----------------- */
.glass{
    background:
      linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(247,243,224,.40) 100%);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ----------------- Buttons ----------------- */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .02em;
    border: 1px solid transparent;
    transition: all 0.4s ease;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}
.btn:active { transform: scale(0.95); }

.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-block { display: flex; width: 100%; }

/* Primary "Записаться" button — emerald → gold shimmer on hover */
.btn-gold{
    background: linear-gradient(
        135deg,
        var(--c-emerald) 0%,
        var(--c-emerald-2) 50%,
        var(--c-gold-warm) 100%
    );
    background-size: 200% 200%;
    background-position: 0% 0%;
    color: var(--c-white);
    box-shadow: 0 12px 28px rgba(0,77,64,.32), inset 0 1px 0 rgba(255,255,255,.18);
    position: relative;
    overflow: hidden;
}
.btn-gold:hover{
    background-position: 100% 100%;
    transform: translateY(-2px);
    box-shadow:
      0 18px 40px rgba(212, 175, 55, 0.4),
      0 0 22px var(--c-gold-glow),
      inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-gold:active{ transform: scale(0.95) translateY(0); }

/* Light shimmer streak that sweeps across on hover */
.btn-gold::before{
    content: "";
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}
.btn-gold:hover::before{ left: 130%; }

.btn-emerald{
    background: var(--c-emerald);
    color: var(--c-pearl);
    box-shadow: 0 10px 24px rgba(0,77,64,.3);
}
.btn-emerald:hover{
    background: linear-gradient(135deg, var(--c-emerald) 0%, var(--c-gold-warm) 140%);
    transform: translateY(-2px);
    box-shadow:
      0 14px 32px rgba(0,77,64,.4),
      0 0 16px var(--c-gold-glow-soft);
}
.btn-emerald:active{ transform: scale(0.95) translateY(0); }

.btn-ghost{
    background: transparent;
    color: var(--c-emerald);
    border-color: var(--c-emerald);
}
.btn-ghost:hover{
    background: var(--c-emerald);
    color: var(--c-pearl);
    box-shadow: 0 0 16px var(--c-gold-glow-soft);
}
.btn-ghost:active{ transform: scale(0.95); }

/* ----------------- Splash Screen ----------------- */
.splash-screen{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: radial-gradient(ellipse at center, #0a635a 0%, #02322b 60%, #001815 100%);
    overflow: hidden;
    animation: splashOut .7s ease forwards 3.2s;
}
.splash-inner{
    position: relative;
    text-align: center;
    color: var(--c-pearl);
    z-index: 2;
}
.splash-logo{
    font-family: var(--f-display);
    font-size: clamp(80px, 16vw, 180px);
    font-weight: 600;
    letter-spacing: .15em;
    display: inline-flex;
    color: var(--c-pearl);
}
.splash-letter{
    display: inline-block;
    opacity: 0;
    transform: translateY(40px);
    animation: splashLetter .9s var(--ease) forwards;
    animation-delay: calc(.15s * var(--i));
    background: linear-gradient(180deg, #fff 0%, var(--c-gold-soft) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.splash-divider{ height: 2px; width: 0; margin: 18px auto; background: var(--c-gold); animation: splashLine 1s var(--ease) forwards .8s; max-width: 220px; }
.splash-tagline{
    font-family: var(--f-display);
    font-size: clamp(22px, 3.4vw, 34px);
    font-style: italic;
    letter-spacing: .2em;
    margin: 6px 0 4px;
    color: var(--c-gold-soft);
    opacity: 0;
    animation: fadeUp .8s var(--ease) forwards 1.2s;
}
.splash-sub{
    font-size: 13px;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: rgba(253,252,240,.7);
    opacity: 0;
    animation: fadeUp .8s var(--ease) forwards 1.6s;
}
.splash-glow{
    position: absolute;
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(247,243,224,.18), transparent 60%);
    filter: blur(40px);
    border-radius: 50%;
    animation: pulse 3s ease-in-out infinite;
}
.splash-screen.hidden{ display: none !important; }

@keyframes splashLetter { to { opacity: 1; transform: translateY(0); } }
@keyframes splashLine { to { width: 100%; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%,100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes splashOut { to { opacity: 0; visibility: hidden; transform: scale(1.05); } }

/* ----------------- Header ----------------- */
.site-header{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 14px 0;
    transition: all .35s var(--ease);
}
.site-header.scrolled{
    background: rgba(253,252,240,.78);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 6px 24px rgba(0,77,64,.08);
    border-bottom: 1px solid var(--c-line);
}
.header-grid{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.brand{
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    color: var(--c-emerald);
}
.brand-mark{
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: .08em;
    background: linear-gradient(135deg, var(--c-emerald) 0%, var(--c-gold) 120%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.brand-mark.big{ font-size: 42px; }
.brand-text{
    font-family: var(--f-display);
    font-style: italic;
    font-size: 16px;
    color: var(--c-emerald);
    letter-spacing: .04em;
}

.main-nav { display: flex; gap: 32px; }
.nav-link{
    position: relative;
    color: var(--c-ink-2);
    font-size: 15px;
    font-weight: 500;
    padding: 6px 0;
    transition: color .25s var(--ease);
}
.nav-link::after{
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    height: 2px; width: 0;
    background: var(--c-gold);
    transition: width .35s var(--ease);
}
.nav-link:hover{ color: var(--c-emerald); }
.nav-link:hover::after{ width: 100%; }

.header-actions{ display: flex; align-items: center; gap: 14px; }

/* Lang Switcher */
.lang-switcher{ position: relative; }
.lang-current{
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(10px);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-emerald);
    font-weight: 600;
    font-size: 13px;
}
.lang-arrow{ font-size: 10px; transition: transform .3s var(--ease); }
.lang-current[aria-expanded="true"] .lang-arrow{ transform: rotate(180deg); }
.lang-menu{
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(16px);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    padding: 8px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.lang-menu.open{ opacity: 1; pointer-events: auto; transform: translateY(0); }
.lang-menu li button{
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 9px 12px;
    font-size: 14px;
    color: var(--c-ink-2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background .2s var(--ease);
}
.lang-menu li button:hover{ background: var(--c-pearl-2); color: var(--c-emerald); }

.burger{
    display: none;
    background: transparent;
    border: none;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
}
.burger span{
    width: 22px; height: 2px;
    background: var(--c-emerald);
    transition: transform .3s var(--ease), opacity .3s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ----------------- Common Section ----------------- */
.section-head{ max-width: 760px; margin: 0 auto 56px; text-align: center; }
.section-title{
    font-size: clamp(34px, 4.6vw, 56px);
    margin-bottom: 14px;
}
.section-sub{ color: var(--c-mute); font-size: 17px; }
.eyebrow{
    font-family: var(--f-display);
    font-style: italic;
    color: var(--c-gold-2);
    letter-spacing: .14em;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* ----------------- Hero ----------------- */
.hero{
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 120px;
    padding-bottom: 80px;
    overflow: hidden;
}
.hero-bg{
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.orb{
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .55;
}
.orb-1{ width: 540px; height: 540px; background: radial-gradient(circle, var(--c-emerald), transparent 70%); top: -120px; right: -100px; animation: float 14s ease-in-out infinite; }
.orb-2{ width: 420px; height: 420px; background: radial-gradient(circle, rgba(247,243,224,.9), transparent 70%); bottom: -80px; left: -60px; animation: float 18s ease-in-out infinite reverse; }
@keyframes float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(30px, -25px); } }

.hero-grid{
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
}
.hero-title{ font-size: clamp(44px, 6.4vw, 86px); line-height: 1.02; margin-bottom: 24px; }
.hero-line{ display: block; }
.hero-line.accent{
    font-style: italic;
    background: linear-gradient(135deg, var(--c-emerald) 0%, var(--c-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-desc{ font-size: 18px; color: var(--c-ink-2); max-width: 560px; margin-bottom: 32px; }
.hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-bullets{ display: grid; gap: 12px; color: var(--c-ink-2); font-size: 15px; }
.hero-bullets li{ display: flex; gap: 12px; align-items: center; }
.hero-bullets .dot{
    width: 8px; height: 8px;
    background: var(--c-emerald);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(0,77,64,.15);
    flex-shrink: 0;
}

.hero-card{ padding: 32px; max-width: 440px; margin-left: auto; }
.hero-card-top{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.badge{
    display: inline-block;
    padding: 5px 12px;
    background: rgba(0,77,64,.1);
    color: var(--c-emerald);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    letter-spacing: .04em;
}
.rating{ color: var(--c-black); font-weight: 600; }
.hero-card-title{ font-size: 32px; margin-bottom: 6px; }
.hero-card-price{
    font-family: var(--f-display);
    font-size: 42px;
    color: var(--c-emerald);
    font-weight: 600;
    margin-bottom: 14px;
}
.hero-card-price span{ font-size: 16px; color: var(--c-mute); font-family: var(--f-body); font-weight: 500; }
.hero-card-desc{ color: var(--c-ink-2); margin-bottom: 24px; }

/* ----------------- About ----------------- */
.about-grid{
    display: grid;
    grid-template-columns: .9fr 1fr;
    gap: 60px;
    align-items: center;
}
.about-visual{
    aspect-ratio: 1 / 1.05;
    padding: 40px;
    /* Фоновое фото клиента (img/about-photo.jpg) задаётся инлайн в HTML.
       Здесь — правила заполнения и центрирования без искажений. */
    background-color: var(--c-emerald-3);   /* fallback пока фото не загружено */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--c-pearl);
    display: grid;
    align-content: end;
    position: relative;
    overflow: hidden;
}
/* Тёмное полупрозрачное напыление, чтобы золотой текст читался на любом фото */
.about-visual-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.30) 0%,
        rgba(0, 0, 0, 0.40) 45%,
        rgba(2, 24, 21, 0.78) 100%
    );
    z-index: 1;
    pointer-events: none;
}
.about-visual .about-stat-hero{
    position: relative;
    z-index: 2;   /* поверх overlay */
}
.about-stats{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    position: relative;
}
.stat{ display: grid; gap: 4px; }
.stat-num{
    font-family: var(--f-display);
    font-size: 42px;
    font-weight: 600;
    color: var(--c-gold-soft);
    line-height: 1;
}
.stat-label{ font-size: 13px; color: rgba(253,252,240,.75); text-transform: uppercase; letter-spacing: .06em; }
.about-text p{ color: var(--c-ink-2); margin-top: 18px; font-size: 16.5px; }

/* ----------------- Cards Grid (services / education) ----------------- */
.cards-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.card{
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: all 0.4s ease;
    position: relative;
    /* Pearl-tinted glassmorphism so cards stand out on emerald and white */
    background:
      linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(247,243,224,.55) 100%);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.5);
}
.card:hover{
    transform: translateY(-10px);
    box-shadow:
      0 0 20px var(--c-gold-glow),
      0 24px 60px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255,255,255,.6);
    border-color: rgba(212, 175, 55, 0.45);
}
.card-icon{
    width: 56px; height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0,77,64,.12), rgba(247,243,224,.9));
    display: grid; place-items: center;
    color: var(--c-emerald);
    margin-bottom: 4px;
}
.card-icon svg{ width: 28px; height: 28px; }
.card-title{ font-size: 26px; }
.card-desc{ color: var(--c-ink-2); font-size: 15px; }
.card-list{ display: grid; gap: 8px; padding-top: 6px; }
.card-list li{
    color: var(--c-ink-2);
    font-size: 14.5px;
    padding-left: 22px;
    position: relative;
}
.card-list li::before{
    content: "✓";
    position: absolute;
    left: 0; top: 0;
    color: var(--c-emerald);
    font-weight: 700;
}
.card-foot{
    margin-top: auto;
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid var(--c-line);
}
.card-price{
    font-family: var(--f-display);
    font-size: 28px;
    font-weight: 600;
    color: var(--c-emerald);
}
.card-price small{ font-size: 14px; color: var(--c-mute); font-family: var(--f-body); font-weight: 500; }

.card.featured{
    background: linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(247,235,200,.7) 100%);
    border-color: rgba(212, 175, 55, 0.35);
}
.card.featured:hover{
    box-shadow:
      0 0 28px rgba(212, 175, 55, 0.5),
      0 24px 60px rgba(0, 0, 0, 0.14),
      inset 0 1px 0 rgba(255,255,255,.7);
    border-color: rgba(212, 175, 55, 0.6);
}
.card-ribbon{
    position: absolute;
    top: 18px; right: 18px;
    background: var(--c-black);
    color: var(--c-white);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.course-tag{
    display: inline-block;
    align-self: flex-start;
    background: rgba(0,77,64,.08);
    color: var(--c-emerald);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ----------------- Procedures — horizontal snap slider ----------------- */
.procedures{ overflow: hidden; }

.proc-slider{
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 8px clamp(20px, 6vw, 120px) 28px;
    /* Hidden scrollbar — clean premium look (hint pulse below shows scrollability) */
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE / old Edge */
}
.proc-slider::-webkit-scrollbar{ display: none; }  /* Chrome / Safari */

.proc-card{
    flex: 0 0 clamp(290px, 80vw, 380px);
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(247,243,224,.6) 100%);
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.5);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.proc-card:hover{
    transform: translateY(-8px);
    box-shadow:
      0 0 24px rgba(212, 175, 55, 0.4),
      0 26px 60px rgba(0, 0, 0, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border-color: rgba(212, 175, 55, 0.5);
}

.proc-card-img{
    position: relative;
    height: clamp(220px, 30vh, 280px);
    background-color: var(--c-emerald-3);  /* fallback before photo loads */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-start;
    padding: 16px;
}
.proc-card-img::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(0,24,21,.55) 100%);
}
.proc-card-badge{
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.92);
    color: var(--c-emerald);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

.proc-card-body{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    flex: 1;
}
.proc-card-body h3{
    font-family: var(--f-display);
    font-size: 27px;
    font-weight: 600;
    color: var(--c-emerald);
    line-height: 1.1;
}
.proc-card-body p{
    color: var(--c-ink-2);
    font-size: 15px;
    line-height: 1.65;
    flex: 1;
}
/* Booking button pinned to the bottom-left of each card.
   Visual styling comes from .btn .btn-gold (same as Hero buttons). */
.proc-card-btn{
    align-self: flex-start;
    margin-top: 4px;
}

/* Scroll-hint underline that subtly pulses on desktop */
.proc-hint{
    height: 3px;
    width: 100%;
    max-width: 120px;
    margin: 4px auto 0;
    border-radius: var(--radius-pill);
    background: rgba(0,77,64,.12);
    overflow: hidden;
    position: relative;
}
.proc-hint-track{
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    width: 40%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--c-emerald), var(--c-gold-warm));
    animation: procHint 2.6s ease-in-out infinite;
}
@keyframes procHint{
    0%   { left: -40%; }
    100% { left: 100%; }
}
.reviews-grid{
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
}
.rev-summary{
    margin-top: 28px;
    padding: 26px;
    display: grid;
    gap: 6px;
    text-align: center;
    max-width: 280px;
}
.rev-avg{
    font-family: var(--f-display);
    font-size: 64px;
    font-weight: 600;
    color: var(--c-emerald);
    line-height: 1;
}
.rev-stars{ color: var(--c-emerald); font-size: 22px; letter-spacing: 4px; }
.rev-count{ color: var(--c-mute); font-size: 14px; }

.review-form{ padding: 32px; }
.review-form h3{ margin-bottom: 22px; font-size: 26px; }
.field{ display: grid; gap: 8px; margin-bottom: 16px; }
.field span{ font-size: 13px; color: var(--c-ink-2); font-weight: 600; letter-spacing: .04em; }
.field input, .field textarea{
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: 13px 16px;
    background: rgba(255,255,255,.7);
    font-family: inherit;
    font-size: 15px;
    color: var(--c-ink);
    transition: border-color .25s, box-shadow .25s;
    width: 100%;
}
.field input:focus, .field textarea:focus{
    outline: none;
    border-color: var(--c-emerald);
    box-shadow: 0 0 0 4px rgba(0,77,64,.15);
}
.field textarea{ resize: vertical; min-height: 110px; }

.stars-input{ display: flex; gap: 6px; }
.stars-input button{
    background: transparent;
    border: none;
    font-size: 30px;
    color: rgba(0,77,64,.18);
    transition: color .2s, transform .2s;
    padding: 0;
}
.stars-input button:hover, .stars-input button.on{ color: var(--c-emerald); transform: scale(1.1); }

.form-msg{ margin-top: 12px; font-size: 14px; min-height: 1.4em; }
.form-msg.ok{ color: var(--c-emerald); }
.form-msg.err{ color: #c0392b; }

.reviews-list,
#reviews-container.reviews-grid{
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr;   /* override the outer 2-col .reviews-grid */
    gap: 16px;
}
.review-item{ padding: 22px; }
.review-item header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.review-item header strong{ color: var(--c-emerald); font-size: 16px; }
.review-stars{ color: var(--c-emerald); letter-spacing: 2px; }
.review-item p{ color: var(--c-ink-2); }

/* ----------------- Contact ----------------- */
.contact-grid{
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
}
.contact-list{ display: grid; gap: 18px; margin: 32px 0; }
.contact-list li{
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--c-line);
    align-items: baseline;
}
.contact-label{ color: var(--c-mute); text-transform: uppercase; font-size: 12px; letter-spacing: .1em; font-weight: 600; }
.contact-value{ color: var(--c-ink); font-size: 16px; }
a.contact-value{ color: var(--c-emerald); }
a.contact-value:hover{ color: var(--c-gold-2); }
.contact-card{ padding: 36px; text-align: center; }
.contact-card h3{ font-size: 28px; margin-bottom: 12px; }
.contact-card p{ color: var(--c-ink-2); margin-bottom: 22px; }

/* ----------------- Footer ----------------- */
.site-footer{
    background: linear-gradient(180deg, transparent 0%, rgba(0,77,64,.06) 100%);
    border-top: 1px solid var(--c-line);
    padding: 60px 0 24px;
    margin-top: 80px;
}
.footer-grid{
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}
.footer-grid p{ color: var(--c-mute); margin-top: 12px; max-width: 360px; }
.footer-grid h4{ font-family: var(--f-body); font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--c-mute); margin-bottom: 14px; }
.footer-grid div a{ display: block; padding: 5px 0; color: var(--c-ink-2); font-size: 14.5px; transition: color .25s; }
.footer-grid div a:hover{ color: var(--c-emerald); }
.footer-bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--c-line);
    color: var(--c-mute);
    font-size: 13px;
}

/* ----------------- Chatbot ----------------- */
.chatbot{
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 200;
}
.chat-fab{
    position: relative;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-emerald) 0%, var(--c-emerald-2) 100%);
    color: var(--c-gold-soft);
    border: 2px solid rgba(247,243,224,.45);
    display: grid;
    place-items: center;
    box-shadow: 0 16px 40px rgba(0,77,64,.4);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.chat-fab svg{ width: 28px; height: 28px; }
.chat-fab:hover{ transform: scale(1.06); box-shadow: 0 20px 50px rgba(0,77,64,.55); }
.chat-fab-pulse{
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid var(--c-gold-soft);
    animation: chatPulse 2s ease-out infinite;
    pointer-events: none;
}
@keyframes chatPulse {
    0% { transform: scale(1); opacity: .8; }
    100% { transform: scale(1.5); opacity: 0; }
}

.chat-window{
    position: absolute;
    bottom: calc(100% + 16px);
    right: 0;
    width: min(360px, calc(100vw - 56px));
    height: 520px;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    animation: chatIn .4s var(--ease);
}
.chat-window[hidden],
.chat-window.is-hidden{ display: none !important; }
@keyframes chatIn { from { opacity: 0; transform: scale(.85) translateY(20px); } to { opacity: 1; transform: scale(1); } }

.chat-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--c-emerald) 0%, var(--c-emerald-3) 100%);
    color: var(--c-pearl);
}
.chat-head strong{ font-family: var(--f-display); font-size: 19px; display: block; }
.chat-head small{ color: var(--c-gold-soft); font-size: 12px; }
.chat-close{
    background: rgba(255,255,255,.15);
    border: none;
    color: var(--c-pearl);
    width: 32px; height: 32px;
    border-radius: 50%;
    font-size: 14px;
    transition: background .25s;
}
.chat-close:hover{ background: rgba(255,255,255,.3); }

.chat-body{
    flex: 1;
    padding: 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(253,252,240,.5);
}
.chat-msg{
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14.5px;
    line-height: 1.45;
    animation: msgIn .35s var(--ease);
}
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.chat-msg.bot{ background: rgba(255,255,255,.85); color: var(--c-ink); align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: 0 4px 10px rgba(0,77,64,.06); }
.chat-msg.user{ background: var(--c-emerald); color: var(--c-pearl); align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-msg p{ margin: 0; }
.chat-msg p + p { margin-top: 6px; }

.chat-suggest{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.chat-suggest button{
    background: rgba(0,77,64,.08);
    border: 1px solid rgba(0,77,64,.15);
    border-radius: var(--radius-pill);
    padding: 6px 12px;
    font-size: 12.5px;
    color: var(--c-emerald);
    transition: all .2s;
}
.chat-suggest button:hover{ background: var(--c-emerald); border-color: var(--c-emerald); color: var(--c-white); }

.chat-form{
    display: flex;
    border-top: 1px solid var(--c-line);
    background: #fff;
}
.chat-form input{
    flex: 1;
    border: none;
    padding: 14px 16px;
    font: inherit;
    font-size: 14.5px;
    color: var(--c-ink);
    background: transparent;
}
.chat-form input:focus{ outline: none; }
.chat-form button{
    background: var(--c-black);
    color: var(--c-white);
    border: none;
    padding: 0 20px;
    font-size: 18px;
    font-weight: 700;
    transition: background .2s;
}
.chat-form button:hover{ background: var(--c-emerald); }

/* ----------------- RTL Support ----------------- */
html[dir="rtl"] body{ font-family: 'Cairo', var(--f-body); }
html[dir="rtl"] .nav-link::after{ left: auto; right: 0; }
html[dir="rtl"] .lang-menu{ right: auto; left: 0; }
html[dir="rtl"] .chatbot{ right: auto; left: 28px; }
html[dir="rtl"] .chat-msg.bot{ align-self: flex-start; border-bottom-left-radius: 16px; border-bottom-right-radius: 4px; }
html[dir="rtl"] .chat-msg.user{ align-self: flex-end; border-bottom-left-radius: 4px; border-bottom-right-radius: 16px; }
html[dir="rtl"] .card-list li{ padding-left: 0; padding-right: 22px; }
html[dir="rtl"] .card-list li::before{ left: auto; right: 0; }
html[dir="rtl"] .card-ribbon{ right: auto; left: 18px; }
html[dir="rtl"] .hero-card{ margin-left: 0; margin-right: auto; }
html[dir="rtl"] .footer-bottom{ flex-direction: row-reverse; }

/* ----------------- Responsive ----------------- */
@media (max-width: 1024px){
    .hero-grid, .about-grid, .reviews-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-card{ margin-inline: 0; max-width: 100%; }
    .cards-grid{ grid-template-columns: repeat(2, 1fr); }
    .footer-grid{ grid-template-columns: 1fr 1fr; }

    /* Navigation collapses into a burger on tablets and below */
    .main-nav{
        position: fixed;
        top: 64px; left: 0; right: 0;
        flex-direction: column;
        background: rgba(253,252,240,.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        padding: 24px;
        gap: 18px;
        border-bottom: 1px solid var(--c-line);
        transform: translateY(-110%);
        transition: transform .35s var(--ease);
        box-shadow: var(--shadow-md);
        z-index: 90;
    }
    .main-nav.open{ transform: translateY(0); }
    .burger{ display: flex; }
    .header-actions .btn{ display: none; }
}

@media (max-width: 720px){
    .section{ padding: 80px 0; }
    .cards-grid{ grid-template-columns: 1fr; }
    .footer-grid{ grid-template-columns: 1fr; }
    .footer-bottom{ flex-direction: column; gap: 8px; text-align: center; }
    .contact-list li{ grid-template-columns: 1fr; gap: 4px; }
    .hero{ padding-top: 110px; }
    .hero-title{ font-size: clamp(38px, 10vw, 56px); }
    .splash-logo{ font-size: clamp(64px, 22vw, 120px); }
    .chatbot{ bottom: 16px; right: 16px; }
    html[dir="rtl"] .chatbot{ left: 16px; right: auto; }
    .chat-fab{ width: 56px; height: 56px; }
    .proc-slider{ padding: 8px 16px 24px; gap: 14px; }
    .proc-card{ flex-basis: 84vw; }
}

/* ----------------- Reveal-on-scroll ----------------- */
.reveal{ opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity: 1; transform: translateY(0); }
.reveal-stagger > *{ opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.in > *{ opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay: .05s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay: .15s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay: .25s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay: .35s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .splash-screen{ animation: none; opacity: 0; visibility: hidden; }
}

/* =====================================================================
   Gold gradient for the keyword "Электроэпиляция" + premium accents
   ===================================================================== */
.gold-gradient{
    position: relative;
    display: inline-block;
    background: linear-gradient(
        100deg,
        #b8932b 0%,
        #d4af37 18%,
        #f7e18a 35%,
        #ffe9a0 50%,
        #f7e18a 65%,
        #d4af37 82%,
        #b8932b 100%
    );
    background-size: 220% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Soft warm glow behind the text */
    filter: drop-shadow(0 0 18px rgba(212, 175, 55, 0.45))
            drop-shadow(0 2px 8px rgba(212, 175, 55, 0.35));
    animation: goldShimmer 6s ease-in-out infinite;
    text-shadow: 0 0 1px rgba(212, 175, 55, 0.15);
    font-weight: 600;
}
@keyframes goldShimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =====================================================================
   Google review button — premium gold with the official Google "G"
   ===================================================================== */
.btn-google{
    background:
      linear-gradient(135deg, #d4af37 0%, #f7e9a0 50%, #b8932b 100%);
    background-size: 200% 200%;
    background-position: 0% 0%;
    color: #1a1a1a;
    border: 1px solid rgba(212, 175, 55, 0.6);
    box-shadow:
      0 12px 28px rgba(212, 175, 55, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.55);
    font-weight: 700;
    letter-spacing: .02em;
    margin-top: 18px;
    position: relative;
    overflow: hidden;
}
.btn-google:hover{
    background-position: 100% 100%;
    transform: translateY(-2px);
    box-shadow:
      0 18px 40px rgba(212, 175, 55, 0.55),
      0 0 22px rgba(212, 175, 55, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.btn-google:active{ transform: scale(0.96) translateY(0); }

.btn-google::before{
    content: "";
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    transition: left 0.7s ease;
    pointer-events: none;
}
.btn-google:hover::before{ left: 130%; }

.btn-google .google-icon{
    background: #fff;
    border-radius: 50%;
    padding: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* =====================================================================
   Smoother global transitions — premium cubic-bezier easing
   ===================================================================== */
:root{
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

.btn,
.card,
.glass,
.hero-card,
.contact-card,
.lang-menu,
.hamburger,
.rev-filter-btn,
.btn-load-more,
.photo-upload,
.review-item,
.reveal{
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reveal animation for sections — softer, longer fade with cubic-bezier */
.reveal{
    opacity: 0;
    transform: translateY(40px);
}
.reveal.in{
    opacity: 1;
    transform: translateY(0);
}

/* HTML smooth scroll between anchors */
html{ scroll-behavior: smooth; }

/* =====================================================================
   "About" — single hero stat block, central gold accent
   ===================================================================== */
.about-stat-hero{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 28px 0 8px;
    border-top: 1px solid rgba(212, 175, 55, 0.45);
    border-bottom: 1px solid rgba(212, 175, 55, 0.45);
    margin: 28px 0 0;
}
.about-stat-num{
    font-family: var(--f-display);
    font-size: clamp(72px, 9vw, 132px);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.02em;
    /* gold-gradient class already provides the shimmer.
       Extra drop-shadow keeps the gold crisp over any photo. */
    filter:
        drop-shadow(0 0 18px rgba(212, 175, 55, 0.45))
        drop-shadow(0 3px 10px rgba(0, 0, 0, 0.55));
}
.about-stat-label{
    font-family: var(--f-body);
    font-size: clamp(15px, 1.6vw, 19px);
    color: rgba(253, 252, 240, 0.95);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 600;
    padding-top: 6px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

/* =====================================================================
   Education — coach line under section title
   ===================================================================== */
.edu-coach-line{
    margin-top: 18px;
    margin-bottom: 12px;
    font-family: var(--f-display);
    font-size: clamp(20px, 2.2vw, 26px);
    font-style: italic;
    color: var(--c-emerald);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    background:
      linear-gradient(135deg,
        rgba(247, 235, 200, 0.45) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(247, 235, 200, 0.45) 100%);
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow:
      0 6px 20px rgba(212, 175, 55, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.edu-coach-icon{
    font-size: 1.1em;
    color: var(--c-gold-warm);
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.6));
}

/* =====================================================================
   Footer — hours block
   ===================================================================== */
.footer-hours{
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    color: rgba(253, 252, 240, 0.78);
    line-height: 1.6;
}
.footer-hours strong{
    color: var(--c-gold-warm);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}

/* =====================================================================
   Reviews "AliExpress style" — filter bar, photo upload, load-more
   ===================================================================== */
.reviews-block{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Filter bar */
.rev-filter{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background:
      linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(247,243,224,.40) 100%);
    border: 1px solid rgba(255,255,255,.7);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    box-shadow: var(--shadow-sm);
}
.rev-filter-btn{
    background: transparent;
    border: 1px solid rgba(0, 77, 64, 0.18);
    color: var(--c-ink);
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.rev-filter-btn:hover{
    border-color: rgba(212, 175, 55, 0.55);
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.25);
    transform: translateY(-1px);
}
.rev-filter-btn.active{
    background: linear-gradient(135deg, var(--c-emerald) 0%, var(--c-emerald-2) 100%);
    color: var(--c-pearl);
    border-color: var(--c-emerald);
    box-shadow:
      0 6px 18px rgba(0, 77, 64, 0.3),
      0 0 14px rgba(212, 175, 55, 0.25);
}
.rev-filter-count{
    background: rgba(255, 255, 255, 0.7);
    color: var(--c-emerald);
    font-size: 12px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    min-width: 22px;
    text-align: center;
}
.rev-filter-btn.active .rev-filter-count{
    background: rgba(255, 255, 255, 0.92);
}

/* Load-more button */
.btn-load-more{
    align-self: center;
    margin-top: 10px;
    min-width: 240px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
}
.rev-load-counter{
    background: rgba(0, 77, 64, 0.08);
    color: var(--c-emerald);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.rev-empty{
    text-align: center;
    color: var(--c-mute);
    font-style: italic;
    padding: 30px 20px;
}

/* Photo upload */
.photo-upload{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1.5px dashed rgba(0, 77, 64, 0.35);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.4);
    color: var(--c-emerald);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.photo-upload:hover{
    border-color: var(--c-gold-warm);
    background: rgba(247, 235, 200, 0.4);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.28);
    color: var(--c-emerald);
}
.photo-upload svg{ flex-shrink: 0; }

.photo-previews{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.photo-previews:empty{ display: none; }
.photo-preview-item{
    position: relative;
    width: 78px;
    height: 78px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.photo-preview-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.photo-preview-remove{
    position: absolute;
    top: 4px; right: 4px;
    width: 20px; height: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    display: grid;
    place-items: center;
    transition: all 0.4s ease;
}
.photo-preview-remove:hover{
    background: #c0392b;
    transform: scale(1.1);
}

/* Photos inside published reviews */
.review-photos{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.review-photo{
    width: 88px; height: 88px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0, 77, 64, 0.15);
    cursor: zoom-in;
    transition: all 0.4s ease;
}
.review-photo:hover{
    transform: scale(1.05);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.45);
    border-color: var(--c-gold-warm);
}
.review-photo img{
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* Lightbox for review photos */
.photo-lightbox{
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(2, 50, 43, 0.92);
    backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    cursor: zoom-out;
    animation: fadeIn .35s ease;
}
.photo-lightbox img{
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* =====================================================================
   Universal "gold glow" hover effect on buttons
   ===================================================================== */
.btn:hover{
    filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.35));
}
.btn-gold:hover,
.btn-emerald:hover,
.btn-google:hover{
    filter: drop-shadow(0 0 18px rgba(212, 175, 55, 0.55));
}

/* =====================================================================
   Responsive tweaks for new blocks
   ===================================================================== */
@media (max-width: 720px){
    .about-stat-num{ font-size: clamp(56px, 16vw, 96px); }
    .edu-coach-line{
        font-size: 17px;
        padding: 10px 18px;
        margin-left: auto;
        margin-right: auto;
    }
    .rev-filter{ padding: 10px; gap: 6px; }
    .rev-filter-btn{ padding: 6px 10px; font-size: 13px; }
    .photo-preview-item{ width: 64px; height: 64px; }
    .review-photo{ width: 72px; height: 72px; }
}

/* =====================================================================
   Chatbot typing indicator — animated 3-dot "is typing" bubble
   ===================================================================== */
.chat-typing p{
    display: inline-flex;
    gap: 5px;
    padding: 4px 0;
}
.chat-typing .t-dot{
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--c-emerald);
    opacity: 0.4;
    animation: typingDot 1.2s ease-in-out infinite;
}
.chat-typing .t-dot:nth-child(2){ animation-delay: 0.18s; }
.chat-typing .t-dot:nth-child(3){ animation-delay: 0.36s; }
@keyframes typingDot{
    0%,60%,100%{ transform: translateY(0); opacity: 0.35; }
    30%{ transform: translateY(-5px); opacity: 1; }
}

/* Procedures slider — drag affordance */
.proc-slider{ cursor: grab; }
.proc-slider.is-dragging{ cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.proc-slider.is-dragging a{ pointer-events: none; }
.proc-slider.is-dragging .proc-card{ user-select: none; }

/* =====================================================================
   Empty review sample cards (clean factory state) + disabled submit
   ===================================================================== */
.review-sample{
    border: 1.5px dashed rgba(0, 77, 64, 0.22);
    background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(247,243,224,.35) 100%);
    opacity: .8;
}
.review-sample header{ align-items: center; gap: 12px; }
.review-sample-avatar{
    width: 40px; height: 40px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 38%, rgba(0,77,64,.18) 0 38%, transparent 39%),
      radial-gradient(circle at 50% 100%, rgba(0,77,64,.18) 0 60%, transparent 61%);
    background-color: rgba(0,77,64,.06);
    flex-shrink: 0;
}
.review-sample-stars{ color: rgba(212,175,55,.5); letter-spacing: 2px; }
.review-sample-title{
    display: block;
    color: var(--c-emerald);
    font-size: 16px;
    margin: 6px 0 4px;
}
.review-sample-text{ color: var(--c-mute); font-style: italic; }

/* Disabled submit button when monthly review limit reached */
.btn.is-disabled,
.btn:disabled{
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(.3);
}

/* =====================================================================
   RESPONSIVE — tablets (768–1024px) and phones (<480px)
   Burger nav already activates at <=1024 (see main media block).
   ===================================================================== */

/* --- Tablets: 768px – 1024px --- */
@media (min-width: 768px) and (max-width: 1024px){
    .container{ padding-inline: 32px; }
    .section{ padding: 90px 0; }
    /* Procedure cards a touch narrower so ~2 are visible at once */
    .proc-card{ flex: 0 0 clamp(320px, 46vw, 420px); }
    .proc-slider{ padding: 8px 32px 28px; gap: 22px; }
    /* Reviews stack into one column on tablets */
    .reviews-grid{ grid-template-columns: 1fr; gap: 36px; }
    .about-stat-num{ font-size: clamp(64px, 11vw, 110px); }
}

/* --- Phones: <= 480px --- */
@media (max-width: 480px){
    .container{ padding-inline: 18px; }
    .section{ padding: 64px 0; }

    /* Headings scale down but stay readable */
    .section-title{ font-size: clamp(26px, 8vw, 34px); }
    .hero-title{ font-size: clamp(32px, 9vw, 44px); }

    /* "3000+" stat block — center the text block under the photo,
       keep it fully inside the rounded card */
    .about-visual{
        aspect-ratio: auto;
        min-height: 380px;
        padding: 26px 20px;
        align-content: end;
        justify-items: center;
    }
    .about-stat-hero{
        align-items: center;
        text-align: center;
        width: 100%;
        max-width: 100%;
        padding: 22px 0 6px;
    }
    .about-stat-num{
        font-size: clamp(58px, 19vw, 92px);
        max-width: 100%;
        overflow-wrap: break-word;
    }
    .about-stat-label{ text-align: center; }

    /* Procedures slider — one card per view, text stays large */
    .proc-slider{ padding: 6px 16px 22px; gap: 14px; }
    .proc-card{ flex: 0 0 86vw; }
    .proc-card-img{ height: clamp(200px, 52vw, 240px); }
    .proc-card-body{ padding: 20px; }
    .proc-card-body h3{ font-size: 24px; }
    .proc-card-body p{ font-size: 15px; }   /* keep text comfortably large */

    /* Reviews controls wrap nicely */
    .rev-filter{ padding: 10px; gap: 6px; }
    .rev-filter-btn{ padding: 7px 11px; font-size: 13px; }
    .review-form{ padding: 22px; }
    .btn-google{ font-size: 14px; }

    /* Chatbot a bit smaller */
    .chat-window{ width: calc(100vw - 32px); height: 70vh; }

    /* Footer fully stacked + centered */
    .footer-grid{ grid-template-columns: 1fr; text-align: center; }
    .footer-hours{ display: inline-block; text-align: center; }
}