/* Homepage compact sections, below the Hero slider (which stays inside
   #fullpage, full-viewport, unchanged). Everything here lives in NORMAL
   document flow (outside #fullpage) - fullpage.js only manages whatever is
   inside #fullpage, so these sections are free to be their natural
   (compact) height instead of forced full-screen. Scoped under .home-*,
   loaded only on the homepage - cannot affect any other page. Brand colors
   reused (#de2c42/#e5314a), Fira Sans, same visual language as city.css. */

/* Mobile scroll/horizontal-shift fix (2026-09-17, found via /scrolltest2-5
   and /hometest-/hometest5 bisection on a real Android phone). Two issues,
   both scoped to the homepage only (this file loads only there):
   1) style.css's global ".owl-carousel { touch-action: pan-x; }" blocked
      native vertical page scroll on Android once fullpage.js was removed
      from the Hero (that CSS rule used to be harmless because fullpage.js
      owned ALL vertical touch handling itself via JS). "pan-y" restores
      native vertical scrolling while leaving Owl Carousel's own JS fully
      in charge of horizontal drag, matching Owl's own vendor default seen
      on ".owl-carousel .owl-stage" elsewhere in style.css. Overridden here
      (not in style.css) because style.css's rule applies sitewide to every
      carousel (catalog pages, city pages, etc.) - only the homepage Hero
      was tested against pan-y, so only the homepage gets the override.
   2) Separately, a fast vertical fling on the Hero could make <header>
      (position:fixed; width:100% under 999px) momentarily compute as
      ~511px wide instead of ~384px (root cause of the internal width
      swing not fully isolated - see PROJECT_STATUS.md). Since html/body
      have no overflow-x:hidden anywhere, that took the whole document
      horizontally scrollable, visible as a white gap on the right across
      every section, not just the Hero. overflow-x:hidden on html/body
      prevents the document from ever becoming horizontally scrollable
      regardless of that internal width swing - confirmed on a real
      Android phone (test 11) to fully stop the glitch. */
.owl-carousel {
    touch-action: pan-y !important;
    -ms-touch-action: pan-y !important;
}

html, body {
    overflow-x: hidden;
}

/* Hero: reserve the full-viewport height immediately (no JS needed for
   that - avoids a layout jump), but hide the visual content itself until
   owl-carousel/Parallax.js have finished their first pass. Fixes a
   "photo flashes zoomed, then settles" glitch seen on a real phone.
   NO overflow:hidden here (deliberately removed 2026-09-16): this element
   is exactly 100vh tall and contains a position:fixed descendant
   (.bg-parallax > .bg, the hero background). A 100vh ancestor with
   overflow:hidden wrapping a position:fixed child is a well-documented
   iOS Safari touch-scroll trap - it can swallow the scroll gesture for
   the WHOLE page, independent of any JS. Not needed anyway: the opacity
   transition below works with or without it. */
.home-hero-ready-hide {
    min-height: 100vh;
}

.home-hero-ready-hide .slider {
    opacity: 0;
    transition: opacity .25s ease;
}

.home-hero-ready-hide.home-hero-ready .slider {
    opacity: 1;
}

.home-section {
    padding: 56px 0;
}

.home-section-alt {
    background: #f8f4f2;
}

/* Brand redesign Stage 2 (2026-10-03): plain white - photos in this
   section already carry plenty of color, so the background stays calm
   per the approved rhythm (СПОКОЙНО before the strong "Why LikeLike"
   brand section right after it). A small gradient accent bar under the
   heading gives it a branded touch without recoloring the whole section. */
/* Art-direction pass (2026-10-04): one compositional transition device -
   this section is pulled up over Hero's bottom edge with a matching top
   radius, reading as a soft "sheet" rising over the photo instead of a
   hard rectangular cut. Zero change to Hero itself - Hero's own box ends
   exactly where it always did; this only repositions the sibling after
   it. position/z-index ensure it paints above Hero regardless of stacking
   context quirks. Deliberately the ONLY section using this device - not
   repeated elsewhere, per instruction not to scatter decorative clutter. */
.home-section-first {
    background: #FFFFFF;
    position: relative;
    z-index: 2;
    margin-top: -24px;
    border-radius: 24px 24px 0 0;
}

.home-section-first .home-heading::after {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, #FF0A57, #FF830A);
}
.home-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.home-heading {
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: #2a2a2a;
    text-align: center;
    margin: 0 0 8px;
}

.home-subheading {
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #666;
    text-align: center;
    margin: 0 0 28px;
}

/* Quick service tiles */
.home-tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Balance pass (2026-10-04): simplified to ONE accent method - a small
   solid marker bar only (the previous pass also tinted the whole label
   background per family, which made 6 cards read as "six colored tiles"
   instead of calm photo-first cards). Photo/text/links/order/data
   untouched. */
.home-tile {
    display: block;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 4px 20px rgba(40, 16, 10, .07);
    position: relative;
    transition: box-shadow .2s ease, transform .2s ease;
}

.home-tile-label::before {
    content: "";
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    margin: 0 auto 6px;
}

.home-tiles-grid a:nth-child(1) .home-tile-label::before { background: #E802BE; }
.home-tiles-grid a:nth-child(2) .home-tile-label::before { background: #FF0A57; }
.home-tiles-grid a:nth-child(3) .home-tile-label::before { background: #4360F9; }
.home-tiles-grid a:nth-child(4) .home-tile-label::before { background: #3BD3DB; }
.home-tiles-grid a:nth-child(5) .home-tile-label::before { background: #FF830A; }
.home-tiles-grid a:nth-child(6) .home-tile-label::before { background: #3CD609; }
/* Desktop-only, deliberately gated to real hover-capable pointers (mouse)
   - (hover:hover) AND (pointer:fine) both required so touch devices never
   get a hover-dependent state. */
@media (hover: hover) and (pointer: fine) {
    .home-tile:hover, .home-featured:hover {
        box-shadow: 0 8px 26px rgba(40, 16, 10, .12);
        transform: translateY(-2px);
    }
}

.home-tile-photo {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    background: #eee;
}

.home-tile-label {
    display: block;
    padding: 10px 12px;
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #2a2a2a;
    text-align: center;
}

/* Featured (тир / neon show) - visually distinct "new" ribbon */
.home-featured-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.home-featured {
    display: block;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    position: relative;
    border: 1px solid rgba(0, 0, 0, .05);
    box-shadow: 0 4px 20px rgba(40, 16, 10, .09);
    transition: box-shadow .2s ease, transform .2s ease;
}

.home-featured-photo {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    background: #eee;
}

/* No photo uploaded yet for this item - a plain brand-gradient card still
   makes it visible and tappable rather than hiding it entirely. */
/* Brand redesign Stage 2 (2026-10-03): legacy gradient unified to the
   approved homepage palette - homepage-scoped only, style.css untouched. */
.home-featured-noimg {
    aspect-ratio: 4/3;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(135deg, #FF0A57, #FF4616);
}

.home-featured-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #FF0A57;
    color: #fff;
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: 999px;
}

html[dir=rtl] .home-featured-badge {
    left: auto;
    right: 10px;
}

.home-featured-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 12px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
    color: #fff;
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 14px;
}

/* Age quick-select chips */
.home-age-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.home-age-chip {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 999px;
    background: #fff;
    border: 2px solid #FF0A57;
    color: #FF0A57;
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
}

.home-age-chip:hover {
    background: #de2c42;
    color: #fff;
}

/* Brand redesign Stage 2 (2026-10-03): "Why LikeLike" is one of the two
   approved STRONG brand sections (the other is Final CTA). Scoped to
   .home-whyus-section (added in index.blade.php) rather than relying on
   the age-groups-conditional -alt class, and placed AFTER .home-section-
   alt in the file so it always wins regardless of that condition. White
   heading text checked for contrast against both gradient stops (see
   final report) - safe for bold 21-26px heading text (large-text WCAG
   threshold), not used for any smaller/thinner text. */
.home-whyus-section {
    background: linear-gradient(135deg, #FF0A57, #FF4616);
}

.home-whyus-section .home-heading {
    color: #fff;
}

/* Why us strip */
.home-why-grid {    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    text-align: center;
}

/* Homepage redesign Stage 2 (2026-10-02): each item is now its own card
   (background/radius/border/shadow) instead of an icon+text floating on
   the bare section background - matches the homepage design system (20px
   radius, warm soft shadow). SVG icons themselves untouched. */
/* Brandbook pass, Stage 2 (2026-10-04): tightened from 22px/8px to
   reduce excess vertical bulk per real mobile screenshot feedback -
   gradient/layout/icons/text untouched. */
/* Art-direction pass (2026-10-04): lighter shadow (was 0 10px 28px at
   .22 opacity - read as heavy per real mobile screenshots) - same 5
   cards, same gradient, same 2+2+1 layout, only the visual weight of
   each card is reduced. */
.home-why-item {
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .45);
    box-shadow: 0 6px 16px rgba(120, 0, 40, .14);
    padding: 18px 10px;
}

.home-why-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FF0A57;
}

.home-why-icon svg {
    width: 30px;
    height: 30px;
}

.home-why-item span {
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #444;
    display: block;
    overflow-wrap: break-word;
}

/* Video card */
/* Brand redesign Stage 3 (2026-10-03): calm section right after the
   strong "Why LikeLike" gradient - per the approved rhythm (СПОКОЙНО
   after ЯРКО, giving the eye a rest). White overrides the shared
   .home-section-alt's #f8f4f2 for this one section only. */
/* Brandbook pass, Stage 3 (2026-10-04): switched from the orange accent
   to a blue/turquoise family (dominant #3BD3DB turquoise, supported by
   #4360F9 blue in the glow) - a deliberate family change so Video reads
   differently from the pink/orange "Why LikeLike" right before it and
   the orange/yellow Final CTA at the end. YouTube/iframe untouched. */
/* Art-direction pass (2026-10-04): one soft radial shape behind the card
   (same technique already used for Reviews' glow below) so Video reads
   as a central media object, not a card on a flat tint. Blue/turquoise
   family only - not both colors used everywhere, per instruction. */
/* Balance pass (2026-10-04): section background back to WHITE (was a
   full-width light-blue tint, which read as a "blue band" in the overall
   page rhythm) - the blue/turquoise identity stays local: the soft
   radial shape below and the card's own border/glow are unchanged. */
.home-video-section {
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.home-video-section::before {
    content: "";
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(67, 96, 249, .10), transparent 70%);
    pointer-events: none;
}

.home-video-card {
    max-width: 720px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(59, 211, 219, .25);
    box-shadow: 0 0 0 3px rgba(59, 211, 219, .18), 0 4px 20px rgba(67, 96, 249, .10);
    position: relative;
    z-index: 1;
}.home-video-frame {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
}

.home-video-frame iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Homepage redesign Stage 3 (2026-10-02): reviews section gets its own
   warm background + a single very soft brand-colored radial glow (not a
   loud gradient - ~6% opacity, fades to transparent). */
/* Brandbook pass, Stage 3 (2026-10-04): switched from pink to blue/
   turquoise per instruction - "убрать текущую зависимость от pink как
   основного цвета секции". Light tint from the #4EBFF3/#3BD3DB family. */
/* Balance pass (2026-10-04): section background back to WHITE (was a
   full-width light-blue tint). The review CARD keeps its blue/turquoise
   identity (border/shadow/quote-mark/nav-arrows, all local to the card) -
   this is now "white page + blue/turquoise review component", not a
   colored section. Compact spacing from the previous pass is untouched. */
.home-reviews-section {
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.home-reviews-section::before {
    content: "";
    position: absolute;
    top: -90px;
    right: -70px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(75, 191, 243, .11), transparent 70%);
    pointer-events: none;
}

html[dir=rtl] .home-reviews-section::before {
    right: auto;
    left: -70px;
}

/* Widen slightly from style.css's base 590px to give the new card
   padding room to breathe - overriding one property only, style.css
   itself untouched (same pattern already used for .reviews-container
   .reviews-content color, above). */
.reviews-container {
    max-width: 640px;
}

/* The review card itself: style.css's .reviews-box had no background/
   radius/shadow of its own (it was built to sit directly on an old dark
   full-screen section) - now a real white card, matching the homepage
   design system. */
/* Brandbook pass, Stage 3 (2026-10-04): padding tightened from 30/26 to
   22/22 - real mobile screenshot showed the card noticeably taller than
   its (short) text content needed. No text clipped, just less empty
   padding around it. Border/shadow switched to the blue family. */
.reviews-box {
    background: #fff;
    border-radius: 24px;
    border: 1px solid rgba(67, 96, 249, .10);
    box-shadow: 0 4px 20px rgba(40, 70, 140, .08);
    padding: 22px 22px;
    position: relative;
}

.reviews-box::before {
    content: "\201C";
    position: absolute;
    top: 2px;
    left: 24px;
    font-size: 64px;
    line-height: 1;
    font-family: Georgia, "Times New Roman", serif;
    color: #3B7EDB;
    opacity: .32;
    pointer-events: none;
}

html[dir=rtl] .reviews-box::before {
    left: auto;
    right: 24px;
}

/* Owl nav (arrows) IS active in the real JS config (nav:true) and was
   completely unstyled (style.css's ".reviews .owl-nav{display:none}"
   targets a ".reviews" wrapper class that does not exist in the current
   markup, so it never applied) - styled here, CSS only, no JS/config
   change. Owl's dots were checked too (dotsContainer targets
   ".reviews .carousel-dots", equally absent from current markup) - left
   untouched, not adding a container just to enable them. */
.reviews-container .owl-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.reviews-container .owl-nav [class^="owl-"] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 2px 8px rgba(40, 16, 10, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    color: #3B7EDB;
    cursor: pointer;
}

.reviews-container .owl-nav .owl-prev::before { content: "\2039"; }
.reviews-container .owl-nav .owl-next::before { content: "\203A"; }
html[dir=rtl] .reviews-container .owl-nav .owl-prev::before { content: "\203A"; }
html[dir=rtl] .reviews-container .owl-nav .owl-next::before { content: "\2039"; }

/* Reviews CTA row */
.home-review-cta-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* Brand redesign Stage 3 (2026-10-03): legacy #de2c42 unified to the
   approved brand gradient - homepage-scoped, style.css untouched. */
.home-review-cta {
    padding: 12px 26px;
    border-radius: 999px;
    background: linear-gradient(90deg, #4360F9, #3BD3DB);
    color: #fff;
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.home-review-cta-secondary {
    padding: 12px 26px;
    border-radius: 999px;
    background: transparent;
    color: #3B7EDB;
    border: 2px solid #3B7EDB;
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
}

/* Homepage redesign Stage 4 (2026-10-02): moved out of an inline <style>
   block that used to live directly in index.blade.php. Same layout as
   before, color unified to the brand palette (#FF0A57) instead of the
   one-off #e5342c that was only ever used here - purely presentational,
   cities/URLs/order/data untouched. Explicit white background added
   since the section now sits on the warm -alt background instead of
   plain white, so the pills need their own surface to read clearly. */
.home-cities-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

/* Brandbook pass, Stage 4 (2026-10-04): switched from pink to the
   green/turquoise family. Text is dark green #1B5E20 (~7.88:1 on white,
   WCAG-verified) rather than the brighter #3CD609, which fails as a
   text color - that bright green is used only as the border accent. */
.home-cities-list a {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #3CD609;
    border-radius: 999px;
    color: #1B5E20;
    text-decoration: none;
    font-weight: 600;
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-size: 14px;
    transition: background .15s ease, color .15s ease;
}

/* Art-direction pass (2026-10-04): small location-marker dot - a touch
   more expressive without turning pills into large buttons. */
.home-cities-list a::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3CD609;
    margin-inline-end: 7px;
    flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
    .home-cities-list a:hover::before { background: #fff; }
}

/* Brand redesign Stage 4 (2026-10-03): section background overridden to
   white (was inheriting the shared .home-section-alt's #f8f4f2) - calm
   section right before the strong Final CTA, per the approved rhythm. */
/* Brandbook pass, Stage 4 (2026-10-04): light green/turquoise tint
   instead of plain white, per the section's new color family. */
/* Art-direction pass (2026-10-04): desktop padding tightened too (only
   mobile bottom padding was tightened in the previous pass) - real
   screenshots showed three pills sitting in an almost-empty area. */
/* Balance pass (2026-10-04): section background back to WHITE (was a
   full-width light-green tint). Green/turquoise identity stays local to
   the pills themselves (border, marker dot, hover fill) - "white page +
   a small, neat green/turquoise group of cities". Padding/compactness
   from the previous pass is untouched. */
.home-cities-section {
    background: #FFFFFF;
    padding: 40px 0 32px;
}

/* Hover gated to real hover-capable pointers only (mouse) - touch devices
   never get a hover-dependent state, per instruction. Upgraded from a
   flat #FF0A57 fill to the approved brand gradient. */
/* Brandbook pass, Stage 4 (2026-10-04): solid dark green (#0F7A0A,
   ~5.51:1 white-text contrast, WCAG-verified) instead of a gradient - a
   green->turquoise gradient's lighter end failed contrast for white
   hover text, so a solid shade was used instead for this family. */
@media (hover: hover) and (pointer: fine) {
    .home-cities-list a:hover {
        background: #0F7A0A;
        color: #fff;
        border-color: transparent;
    }
}

/* Brandbook pass, Stage 4 (2026-10-04): real mobile screenshot showed an
   unjustified empty gap between the city pills and the Final CTA panel
   below - tightened bottom padding on mobile only. */
@media only screen and (max-width: 767px) {
    .home-cities-section {
        padding-bottom: 18px;
    }
}
/* Final CTA - WhatsApp prominent, especially on mobile */
/* Homepage redesign Stage 4 (2026-10-02): the final CTA text/buttons now
   sit inside a distinct rounded panel with a very soft brand gradient
   (7%/5% opacity - a tint, not a loud banner), instead of floating
   directly on the section's plain -alt background. Text/links/line-height
   untouched. max-width narrower than .home-container's 1200px so it
   reads as a deliberate card, not a full-width strip. */
/* Brand redesign Stage 4 (2026-10-03): Final CTA is the second approved
   STRONG brand section (the other is "Why LikeLike") - upgraded from a
   5-7% tint to the full saturated gradient. Section background stays
   white (.home-finalcta-section below) so this panel reads as a
   deliberate, contained "card", not the whole section. */
/* Balance pass (2026-10-04): the previous "gradient section + solid
   dark card" composition read as two stacked layers, too heavy. ONE
   strong object instead: section back to white, the card itself IS the
   full Orange->Yellow gradient (matches "white page + strong CTA
   object" principle). Text contrast solved with a small, tight local
   dark zone directly behind the heading and phone text only (inline-
   block, hugging the text - not a second card) - white text on
   rgba(40,10,0,.45) composited over this gradient computes to ~6.8:1,
   comfortably passing WCAG even for normal-size text. No new markup -
   achieved on the existing .home-heading/.home-final-phone elements. */
.home-finalcta-section {
    background: #FFFFFF;
}

.home-final-cta {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    background: linear-gradient(135deg, #FF4616, #FF830A);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 28px;
    padding: 44px 28px;
    box-shadow: 0 12px 32px rgba(255, 131, 10, .30);
}

.home-final-cta .home-heading {
    display: inline-block;
    color: #fff;
    background: rgba(40, 10, 0, .45);
    padding: 10px 20px;
    border-radius: 14px;
}.home-final-phone {
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    background: rgba(40, 10, 0, .45);
    padding: 8px 22px;
    border-radius: 999px;
    margin-bottom: 18px;
    direction: ltr;
}

.home-final-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 360px;
    margin: 0 auto;
}

/* Brandbook pass, Stage 4 (2026-10-04): white-on-#25D366 measured
   ~1.99:1 (fails badly) - darkened to #0B6E5F (~6.16:1 with white text,
   WCAG-verified), keeping it recognizably WhatsApp-family green/teal
   rather than abandoning the color. Explicitly authorized this task. */
/* Art-direction pass (2026-10-04): the previous fix (darkened bg to
   #0B6E5F) passed WCAG but read as visually unrecognizable as WhatsApp.
   Restored the true WhatsApp green (#25D366) as the background and
   switched to dark forest-green text instead (#0B3D24, ~6.20:1 with the
   green background - WCAG-verified, comfortably passes) - keeps the
   button instantly recognizable while still passing contrast. */
.home-whatsapp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    border-radius: 999px;
    background: #25D366;
    color: #0B3D24;
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(37, 211, 102, .35);
}

/* Brand redesign Stage 4 (2026-10-03): white pill with brand-colored
   text (contrast-checked, see final report) instead of the legacy
   #de2c42 fill, which would have blended into the new gradient panel. */
/* Brandbook pass, Stage 4 (2026-10-04): switched from pink-family
   #D6004A to a burnt-orange #B33200 (~6.22:1 on white, WCAG-verified)
   for cohesion with the new orange/yellow panel. */
.home-order-btn {
    padding: 16px;
    border-radius: 999px;
    background: #fff;
    color: #B33200;
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Issue 2 (2026-10-01): style.css's .reviews-box .reviews-content{color:#fff}
   was built for an old dark full-screen background. The current homepage
   wraps reviews in a plain light .home-section with no dark background
   anywhere in the chain, so real RU review text rendered white-on-white
   (near invisible). Scoped to .reviews-container - unique to this
   homepage block, not used by any other .reviews-box usage site-wide - so
   style.css itself is not touched and nothing else is affected. Applies
   at all viewport widths (the missing-background problem isn't mobile-
   specific). */
.reviews-container .reviews-content { color: #2a2a2a; }
.reviews-container .reviews-content .reviews-info { border-bottom-color: rgba(0, 0, 0, .12); }
.reviews-container .reviews-content .reviews-info .reviews-source { color: #888; }

/* Art-direction pass (2026-10-04): style.css's .reviews-info has an
   inherited margin-bottom:29px (built for the old full-screen dark
   design) and <p> tags in .reviews-text carry the browser default
   ~1em top/bottom margin - neither was ever overridden, and together
   they were the real remaining source of "card too tall for its short
   text" on real mobile screenshots (the 30->22px padding tightened in
   the previous pass was necessary but not sufficient). No text clipped -
   purely removing unjustified inherited spacing. */
.reviews-container .reviews-content .reviews-info { margin-bottom: 12px; }
.reviews-container .reviews-text p { margin: 0; }

@media only screen and (max-width: 767px) {
    .home-section { padding: 36px 0; }
    /* Homepage redesign Stage 1 (2026-10-02): reduced from the original
       84px, which read as an artificially large gap once .home-lang-mobile
       (which used to sit between Hero and this section) was removed. 64px
       = 60px fixed mobile header (style.css header{position:fixed}, opaque
       once JS toggles .is-scrolled) + a small 4px breathing margin - still
       reliably clears the header at any scroll position (padding-top, not
       scroll-margin-top - that only affects anchor-jump targets, not
       ordinary scroll). Scoped to .home-section-first only, not
       style.css's header rule or any other .home-section down the page. */
    .home-section-first { padding-top: 64px; }
    /* Issue 4: .home-heading never set its own line-height, so on mobile
       it inherited body's fixed line-height:16px (style.css) - too short
       for a 21px heading once it wraps to 2+ lines, causing visible line
       overlap (worst on the long Final CTA heading, RU/HE both). */
    .home-heading { font-size: 21px; line-height: 1.3; }
    .home-final-cta .home-heading { font-size: 19px; }
    .home-tiles-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .home-tile-label { font-size: 12px; padding: 8px; }
    .home-featured-grid { grid-template-columns: 1fr; }
    .home-why-grid { grid-template-columns: repeat(2, 1fr); }
    /* Homepage redesign Stage 2 (2026-10-02): the 5th item now spans the
       full grid width AND switches from the default vertical (icon above
       text) card layout to a horizontal one (icon beside text) - reads as
       a deliberate wide element, not a narrow item stranded in an empty
       row. Flexbox's row direction follows html[dir] automatically, so
       this mirrors correctly for HE without a separate RTL rule; text-
       align:start (not "left") for the same reason. */
    /* Art-direction pass (2026-10-04): centered + width-capped instead of
       stretching edge-to-edge - real mobile screenshots showed this card
       reading as an accidentally-stretched leftover rather than a
       deliberate wide element. Icon/text/gap/layout direction unchanged. */
    .home-why-item:last-child {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        text-align: start;
        padding: 16px 18px;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
    .home-why-item:last-child .home-why-icon { margin: 0; flex-shrink: 0; }
    .home-age-chip { padding: 10px 16px; font-size: 14px; }
    .home-final-phone { font-size: 20px; }
    .home-final-cta { padding: 32px 20px; border-radius: 22px; }
    /* Homepage redesign Stage 1 (2026-10-02): the floating .lang pill
       (style.css, .screen-bg .lang{position:fixed}) still genuinely
       overlapped homepage content while scrolling on mobile - still
       hidden here. The mobile hamburger menu (#mobile-nav in
       footer.blade.php) already has its own Ru/En/He links, sitewide,
       untouched - that's the language switcher on mobile now, nothing
       homepage-specific added. This rule can only ever affect the
       homepage (home.css loads nowhere else); style.css itself is not
       touched, so city/item/catalog pages keep the floating pill exactly
       as before.

       Brand redesign Stage 1 (2026-10-03) - ROOT BUG FIX: this used to be
       a bare ".lang" selector, which hid BOTH .lang instances (the
       floating header one AND the one inside the mobile hamburger menu,
       #mobile-nav .mobile-popup-bottom .lang - both share the identical
       class). Scoped to "body > ul.lang" - matches ONLY the header's
       direct-body-child instance, verified live; the mobile-menu instance
       is nested 3 levels deep and is structurally excluded by the direct-
       child combinator. Mobile menu language links are visible again as
       a secondary access point, per instruction. */
    body > ul.lang { display: none; }
}

/* Art-direction pass (2026-10-04): language selector moved INTO Hero's
   lower safe area (see index.blade.php) - normal document flow, placed
   after the CTA buttons so it can never overlap H1/subtitle/CTA/the
   photo subject. Hidden entirely on desktop (existing floating header
   .lang pill is untouched and keeps working there). Styled for display
   directly on Hero's photo: the scrim (.home-hero-scrim below) is
   darkest at the very bottom of Hero, exactly where this sits, so plain
   light text reads clearly without needing its own background panel -
   only the active locale gets a small solid pill for emphasis. */
.home-hero-lang {
    display: none;
}

@media only screen and (max-width: 767px) {
    /* Balance pass (2026-10-04): small positional correction only - real
       mobile screenshot showed this sitting too close to Hero's bottom
       edge / the transition into the next section. Added breathing room
       below; still below the CTA buttons, not moved closer to them;
       Hero height untouched. */
    .home-hero-lang {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
        margin-top: 18px;
        margin-bottom: 14px;
    }
    /* Subtle text-shadow added as low-risk insurance alongside the scrim
       lightening above - the exact local contrast against the real photo
       cannot be verified from this environment. No new background/panel;
       a soft shadow directly on the text, same technique used for any
       text-over-photo UI. */
    .home-hero-lang a,
    .home-hero-lang span {
        display: block;
        padding: 6px 13px;
        border-radius: 999px;
        font-family: "Fira Sans", Arial, Helvetica, sans-serif;
        font-weight: 700;
        font-size: 12px;
        line-height: 1.3;
        text-decoration: none;
        color: rgba(255, 255, 255, .65);
        text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    }
    .home-hero-lang span.is-active {
        background: linear-gradient(90deg, #FF0A57, #FF4616);
        color: #fff;
    }
}

/* ===== New single-image Hero (2026-09-29 redesign, stage 1) =====
   Isolated .home-hero-* classes only - does not touch/override any
   .slider/.bg/.bg-parallax/.screen rule used elsewhere (item/city pages),
   those stay exactly as they were in style.css. Loads only via home.css,
   which loads only on the homepage. */
.home-hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.home-hero-media {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.home-hero-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 66% 35%; /* homepage-hero-magician-panda-stage-photo (2026-09-30): 16:9 photo, panda face ~66% across - shifts crop right/up toward it; see full rationale above the mobile override at the end of this file */
    display: block;
}

/* Hero bottom-scrim fix (2026-10-04): technical cause of the "black
   footer" look, confirmed by reading this exact rule before editing -
   the gradient's bottom stop (0%) was rgba(20,8,8,.78), a near-80%-
   opacity near-black overlay sitting exactly where the bottom-anchored
   content (H1/subtitle/CTA/languages, via .home-hero{align-items:
   flex-end}) lives. Lightened to .50 - the photo stays visible through
   the overlay instead of nearly disappearing into black, while still
   darkening enough for white text. Only this one stop changed; the
   45%/75% stops (which govern the upper part of the fade, where H1/
   subtitle mostly sit) are untouched, so their contrast is unaffected. */
.home-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(20, 8, 8, .50) 0%, rgba(20, 8, 8, .38) 45%, rgba(20, 8, 8, .06) 75%);
}

.home-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 56px;
    width: 100%;
    box-sizing: border-box;
}

.home-hero-text {
    max-width: 620px;
}

html[dir=rtl] .home-hero-text {
    margin-left: auto;
    margin-right: 0;
}

.home-hero-title {
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 46px;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 14px;
}

.home-hero-subtitle {
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #fff;
    margin: 0 0 26px;
    max-width: 520px;
}

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

.home-hero-cta-primary {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 999px;
    background: linear-gradient(90deg, #FF0A57, #FF4616);
    color: #fff;
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border: none;
}

.home-hero-cta-secondary {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    font-family: "Fira Sans", Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
}

.home-hero-cta-primary:hover { opacity: .9; }
.home-hero-cta-secondary:hover { background: rgba(255, 255, 255, .15); }

@media only screen and (min-width: 768px) {
    .home-hero { min-height: 78vh; }
}

/* Mobile Hero (2026-09-30, third pass - consolidated): replaces three
   earlier experimental mobile blocks (an 82vh cover-crop tuned for the
   16:9 desktop photo, an object-fit:contain "letterbox" attempt, and a
   two-zone 45vh-photo + separate-text-zone layout) which all existed only
   to compensate for mobile reusing the same horizontal 1920x1080 desktop
   photo. Mobile now gets its OWN dedicated portrait (1080x1350, 4:5)
   photo via a <picture><source media="(max-width:767px)"> in
   index.blade.php - already composed for a phone screen, so no more
   crop/letterbox compensation is needed: a single unified overlay
   composition, same architecture as desktop (.home-hero-media absolute,
   .home-hero-scrim visible, text bottom-aligned via the base
   .home-hero{align-items:flex-end}), just with mobile-appropriate
   type/button sizing. */
@media only screen and (max-width: 767px) {
    .home-hero {
        min-height: 88vh;
        min-height: 88dvh;
    }
    .home-hero-photo {
        object-fit: cover;
        object-position: center center;
    }
    .home-hero-inner { padding: 0 16px 32px; }
    .home-hero-text { max-width: none; }
    .home-hero-title { font-size: 30px; }
    .home-hero-subtitle { font-size: 15px; margin-bottom: 20px; max-width: none; }
    .home-hero-actions { flex-direction: column; }
    .home-hero-cta-primary, .home-hero-cta-secondary {
        padding: 14px 22px;
        font-size: 15px;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }
}