/* ===== tokens ===== */ :root{ --bg:#f2efe8; --bg2:#ece7dd; --card:#ffffff; --ink:#1c1c19; --muted:#6a655d; --gold:#c8912f; --green:#254c3a; --green-d:#1a3a2b; --green-l:#2e5c47; --line:rgba(28,28,25,.09); --shadow:0 18px 50px -24px rgba(30,40,30,.28); --shadow-sm:0 8px 26px -16px rgba(30,40,30,.30); --r:20px; --r-sm:14px; --maxw:1240px; --pad:clamp(16px,4vw,40px); } *{box-sizing:border-box} html{scroll-behavior:smooth} html,body{margin:0;background:var(--bg);overflow-x:hidden} body{font-family:"Inter",system-ui,Arial,sans-serif;color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;font-size:16px} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit} .container{width:min(var(--maxw),calc(100% - var(--pad)*2));margin-inline:auto} .muted{color:var(--muted)} /* preloader styles live inlined in so they paint before this file loads */ /* ===== buttons ===== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15px; padding:13px 22px;border-radius:999px;transition:.25s ease;white-space:nowrap} .btn--green{background:var(--green);color:#fff} .btn--green:hover{background:var(--green-l);transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(37,76,58,.7)} .btn--lg{padding:16px 28px;font-size:16px} .btn--block{width:100%;padding:16px;font-size:16px} .btn--outline{border:1.5px solid rgba(255,255,255,.4);color:#fff} .btn--outline:hover{background:rgba(255,255,255,.1)} .round-btn{width:46px;height:46px;border-radius:999px;background:var(--bg2);color:var(--ink); font-size:20px;display:inline-flex;align-items:center;justify-content:center;transition:.25s;flex:none} .round-btn:hover{background:var(--green);color:#fff;transform:translateY(-2px)} .round-btn--green{background:var(--green);color:#fff} .round-btn--green:hover{background:var(--green-l)} .link-arrow{color:var(--muted);font-size:14.5px;font-weight:500;transition:.2s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px} .link-arrow:hover{color:var(--green)} .link-arrow .ico{width:16px;height:16px;transition:transform .2s} .link-arrow:hover .ico{transform:translateX(3px)} /* ===== svg icons ===== */ .ico{width:1em;height:1em;display:inline-block;flex:none;vertical-align:-.14em;fill:currentColor} .ico--green{color:var(--green)} .btn .ico{width:19px;height:19px} .round-btn .ico{width:20px;height:20px} .header__phone .ico{width:16px;height:16px} /* ===== focus-visible (a11y) ===== */ :focus-visible{outline:2.5px solid var(--green);outline-offset:2px;border-radius:6px} .btn:focus-visible,.round-btn:focus-visible{outline-offset:3px} .field input:focus-visible,.field select:focus-visible{outline:2.5px solid var(--green);outline-offset:0} /* ===== header ===== */ .header{position:sticky;top:0;z-index:60;background:rgba(242,239,232,.82);backdrop-filter:blur(12px); border-bottom:1px solid transparent;transition:.3s} .header.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px -20px rgba(0,0,0,.5)} .header__in{display:flex;align-items:center;gap:22px;height:70px} .logo{font-weight:900;font-size:26px;letter-spacing:-.02em} .nav{display:flex;gap:6px;margin-inline:auto} .nav a{padding:8px 15px;border-radius:999px;font-size:14.5px;font-weight:500;color:#4b4741;transition:.2s;border:1px solid transparent} .nav a:hover{background:#fff;border-color:var(--line)} .header__right{display:flex;align-items:center;gap:16px} .header__phone{font-size:14.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px;color:var(--green)} .burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center} .burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.3s} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ===== hero ===== */ .hero{padding-top:clamp(8px,2vw,20px);padding-bottom:clamp(28px,4vw,48px)} .hero__stage{position:relative;height:clamp(440px,47vw,640px)} .hero__word{position:absolute;top:53%;left:58%;transform:translate(-50%,-50%); font-weight:900;letter-spacing:-.03em;font-size:clamp(120px,23.5vw,340px);line-height:.8; color:var(--ink);z-index:1;white-space:nowrap;user-select:none;opacity:.96} .hero__model{position:absolute;bottom:0;left:59%;transform:translateX(-50%); height:104%;width:auto;max-width:none;z-index:2;object-fit:contain;object-position:bottom center; -webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent 99%); mask-image:linear-gradient(to bottom,#000 82%,transparent 99%)} .hero__left{position:absolute;left:0;bottom:10%;z-index:3;max-width:min(34%,350px)} .hero__title{font-size:clamp(26px,3vw,40px);font-weight:800;line-height:1.06;color:var(--green);margin:0 0 12px;letter-spacing:-.01em} .hero__sub{color:var(--muted);font-size:clamp(14px,1.3vw,16px);margin:0 0 22px;max-width:25ch} .hero__guarantee{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:13.5px;color:#45423b;font-weight:500} .hero__guarantee .ico{width:17px;height:17px} .hero__card{position:absolute;right:0;bottom:18%;z-index:3;background:var(--card);border-radius:var(--r); padding:18px 20px;width:min(34%,270px);box-shadow:var(--shadow)} .hero__card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} .hero__card-label{font-size:12.5px;color:var(--muted)} .hero__card-slot{font-size:12px;font-weight:600;color:var(--green);background:var(--bg2);padding:3px 9px;border-radius:999px} .hero__card-name{font-weight:700;font-size:clamp(15px,1.4vw,18px);line-height:1.25;margin-bottom:16px} .hero__card-bottom{display:flex;align-items:center;justify-content:space-between} .hero__card-price{font-weight:800;color:var(--green);font-size:clamp(15px,1.4vw,19px)} /* stats */ .stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;background:var(--card); border-radius:var(--r);padding:22px clamp(18px,2.4vw,32px);box-shadow:var(--shadow-sm);margin-top:8px} .stat{display:flex;flex-direction:column;gap:2px;position:relative;padding-left:34px;font-size:12.5px;color:var(--muted);line-height:1.3} .stat+.stat{border-left:1px solid var(--line);padding-left:calc(34px + 5%)} .stat__ico{position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:8px;background:var(--bg2); color:var(--green);display:flex;align-items:center;justify-content:center} .stat__ico .ico{width:15px;height:15px} .stat b{color:var(--ink);font-size:18px;font-weight:800} /* ===== sections ===== */ .section{padding:clamp(46px,6vw,86px) 0} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:clamp(22px,3vw,36px)} .sec-head--sm{margin-bottom:20px} .sec-title{font-size:clamp(30px,4.4vw,58px);font-weight:900;letter-spacing:-.02em;text-transform:uppercase;margin:0;line-height:.98} .grid{display:grid;gap:clamp(14px,1.6vw,22px)} .grid-4{grid-template-columns:repeat(4,1fr)} .card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-sm)} /* services */ .svc{padding:14px;transition:.3s;display:flex;flex-direction:column} .svc:hover{transform:translateY(-6px);box-shadow:var(--shadow)} .svc__img{border-radius:var(--r-sm);overflow:hidden;aspect-ratio:4/3;margin-bottom:16px} .svc__img img{width:100%;height:100%;object-fit:cover;transition:.5s} .svc:hover .svc__img img{transform:scale(1.05)} .svc__name{font-size:20px;font-weight:800;margin:0 0 8px;padding-inline:4px} .svc__desc{color:var(--muted);font-size:14px;margin:0 0 16px;padding-inline:4px;flex:1} .svc__foot{display:flex;align-items:center;justify-content:space-between;padding:0 4px 4px} .from{font-weight:800;color:var(--green);font-size:17px} /* masters */ .master{padding:14px;position:relative;display:flex;flex-direction:column; transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease} .master:hover{transform:translateY(-12px) scale(1.025);box-shadow:0 30px 60px -28px rgba(30,40,30,.42);z-index:2} .master__img{border-radius:var(--r-sm);overflow:hidden;aspect-ratio:1/1.1;margin-bottom:14px} .master__img img{width:100%;height:100%;object-fit:cover;object-position:top center; transition:transform .6s cubic-bezier(.2,.7,.3,1)} .master:hover .master__img img{transform:scale(1.07)} .master__name{font-size:17px;font-weight:800;margin:0 0 3px;padding-inline:4px} .master__role{color:var(--muted);font-size:13.5px;margin:0 0 10px;padding-inline:4px} .master__rate{font-size:14px;font-weight:700;padding-inline:4px;margin-bottom:10px;display:flex;align-items:center;gap:5px} .star{color:var(--gold);width:16px;height:16px} .master__time{font-size:12.5px;color:var(--muted);line-height:1.4;padding-inline:4px} .master__time b{color:var(--ink);font-size:14px} .master .round-btn{position:absolute;right:16px;bottom:16px} /* results before/after */ .ba{position:relative;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;box-shadow:var(--shadow-sm); container-type:size;user-select:none;touch-action:none;--x:50%} .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none} .ba__before{position:absolute;inset:0;width:var(--x);overflow:hidden;z-index:2} .ba__before img{width:100cqw;height:100cqh;max-width:none} .ba__t{position:absolute;top:12px;font-size:11px;font-weight:700;color:#fff;background:rgba(28,28,25,.55); backdrop-filter:blur(4px);padding:4px 12px;border-radius:999px;z-index:4;pointer-events:none} .ba__t--before{left:12px} .ba__t--after{right:12px} .ba__handle{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:#fff;transform:translateX(-50%); z-index:3;box-shadow:0 0 10px rgba(0,0,0,.4)} .ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:999px; background:#fff;color:var(--green);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);cursor:ew-resize} .ba__grip .ico{width:20px;height:20px} /* ===== booking ===== */ .booking{background:var(--bg2)} .booking__in{position:relative;display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(24px,4vw,64px);align-items:center} .booking__left{position:relative;z-index:2} .booking__list{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:14px} .booking__list li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500} .ico-check{width:26px;height:26px;border-radius:999px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;flex:none} .ico-check .ico{width:15px;height:15px} .booking__form{position:relative;z-index:2;padding:clamp(22px,2.6vw,34px);display:grid;grid-template-columns:1fr 1fr;gap:16px} .field{display:flex;flex-direction:column;gap:7px} .field--full{grid-column:1/-1} .field label{font-size:13px;color:var(--muted);font-weight:500} .field input,.field select{height:50px;border:1px solid var(--line);border-radius:12px;padding:0 15px;font-size:15px; background:#fbfaf7;color:var(--ink);font-family:inherit;transition:.2s;width:100%} .field input:focus,.field select:focus{outline:none;border-color:var(--green);background:#fff} /* custom animated select */ .cs{position:relative;width:100%} .cs__trigger{width:100%;height:50px;border:1px solid var(--line);border-radius:12px;padding:0 42px 0 15px; background:#fbfaf7;color:var(--ink);font:inherit;font-size:15px;text-align:left;display:flex;align-items:center; cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s} .cs__trigger:hover{border-color:#c9c3b6} .cs.open .cs__trigger{border-color:var(--green);background:#fff;box-shadow:0 0 0 3px rgba(37,76,58,.12)} .cs__val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cs__chev{position:absolute;right:14px;top:50%;width:17px;height:17px;color:var(--muted); translate:0 -50%;transition:rotate .3s cubic-bezier(.2,.8,.3,1),color .2s} .cs.open .cs__chev{rotate:180deg;color:var(--green)} .cs__panel{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:50;background:#fff;border:1px solid var(--line); border-radius:14px;box-shadow:0 26px 55px -22px rgba(30,40,30,.4);padding:6px;max-height:270px;overflow:auto; transform-origin:top center;opacity:0;translate:0 -10px;scale:.96;pointer-events:none; transition:opacity .18s ease,translate .28s cubic-bezier(.2,.85,.3,1),scale .28s cubic-bezier(.2,.85,.3,1)} .cs.open .cs__panel{opacity:1;translate:0 0;scale:1;pointer-events:auto} .cs__opt{padding:11px 14px;border-radius:9px;font-size:15px;cursor:pointer;display:flex;align-items:center;gap:8px; opacity:0;translate:0 8px;transition:background .15s,opacity .3s ease,translate .35s cubic-bezier(.2,.8,.3,1)} .cs.open .cs__opt{opacity:1;translate:0 0} .cs__opt:hover{background:var(--bg2)} .cs__opt[aria-selected="true"]{color:var(--green);font-weight:600;background:var(--bg2)} .cs__opt::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--green);flex:none;opacity:0;transition:opacity .2s} .cs__opt[aria-selected="true"]::before{opacity:1} @media (prefers-reduced-motion:reduce){.cs__opt,.cs__panel{transition:opacity .12s}} .booking__form .btn--block{grid-column:1/-1;margin-top:4px} .booking__note{grid-column:1/-1;text-align:center;color:var(--muted);font-size:13px;margin:2px 0 0;display:flex;gap:6px;justify-content:center} .booking__bg{position:absolute;right:calc(var(--pad)*-1);top:0;bottom:0;width:36%;z-index:1;border-radius:var(--r);overflow:hidden;opacity:.5;pointer-events:none} .booking__bg img{width:100%;height:100%;object-fit:cover} /* ===== price ===== */ .price{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,56px) clamp(40px,6vw,90px);padding:clamp(26px,3vw,44px)} .price__head{display:flex;justify-content:space-between;font-size:13px;color:var(--green);text-transform:uppercase; letter-spacing:.03em;padding-bottom:12px;border-bottom:1.5px solid var(--line);margin-bottom:2px;font-weight:700} .price__head span:last-child{color:var(--muted)} .price__list{list-style:none;padding:0;margin:0} .price__list li{display:flex;align-items:baseline;gap:8px;padding:14px 0;border-bottom:1px solid var(--line)} .price__list li:last-child{border-bottom:0} .price__list li span{font-size:15.5px} .price__list li i{flex:1;border-bottom:1px dotted #cfc9bc;transform:translateY(-3px)} .price__list li b{font-weight:800;font-size:16px;white-space:nowrap} .price__cta{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; border-top:1px solid var(--line);padding-top:24px} .price__cta span{color:var(--muted);font-size:14.5px} /* ===== promos ===== */ .grid-3{grid-template-columns:repeat(3,1fr)} .promo{background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:.3s;display:flex;flex-direction:column} .promo:hover{transform:translateY(-6px);box-shadow:var(--shadow)} .promo__media{aspect-ratio:16/11;overflow:hidden} .promo__media img{width:100%;height:100%;object-fit:cover;transition:.5s} .promo:hover .promo__media img{transform:scale(1.05)} .promo__cap{padding:22px clamp(20px,2vw,28px) 26px;display:flex;flex-direction:column;gap:3px;flex:1} .promo__label{font-size:11.5px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.06em} .promo__cap h3{margin:4px 0 0;font-size:clamp(18px,1.6vw,22px);font-weight:800} .promo__accent{font-size:clamp(36px,3.6vw,50px);font-weight:900;color:var(--green);line-height:1;margin:8px 0 10px} .promo__deadline{font-size:13px;color:var(--muted);margin-top:auto} /* ===== reviews ===== */ .reviews__head{align-items:center} .reviews__score{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .reviews__score b{font-size:34px;font-weight:900} .stars{color:var(--gold);display:inline-flex;gap:2px} .stars .ico{width:18px;height:18px} .stars--sm .ico{width:14px;height:14px} .review{padding:22px;display:flex;flex-direction:column;gap:14px} .review__top{display:flex;align-items:center;gap:12px} .ava{width:42px;height:42px;border-radius:999px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none} .review__top b{display:block;font-size:15px} .review__top .muted{font-size:12.5px} .review p{margin:0;font-size:14px;color:#38352f;flex:1;line-height:1.55} .review__foot{display:flex;justify-content:space-between;align-items:center;font-size:12.5px} /* ===== club ===== */ .club{padding:clamp(24px,3vw,40px);display:grid;grid-template-columns:auto 1fr auto;gap:clamp(24px,3vw,48px);align-items:center} .club__logo b{font-size:26px;font-weight:900;line-height:1;display:block} .club__logo span{color:var(--green);font-weight:700;font-size:14px;margin-top:8px;display:block} .club__benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .club__b{font-size:13.5px;color:#45423b;line-height:1.4;position:relative;padding-left:32px} .club__ico{position:absolute;left:0;top:-1px;color:var(--green);display:inline-flex} .club__ico .ico{width:19px;height:19px} .club__cta{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center} .club__cta .muted{font-size:12.5px} /* ===== faq + contacts ===== */ .faq-contacts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start} .faq .sec-title,.contacts .sec-title{font-size:clamp(26px,3vw,40px);margin-bottom:22px} .acc details{border-bottom:1px solid var(--line)} .acc summary{list-style:none;cursor:pointer;padding:16px 0;font-size:15.5px;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:16px} .acc summary::-webkit-details-marker{display:none} .acc__i{color:var(--green);transition:.3s;flex:none;display:inline-flex} .acc__i .ico{width:20px;height:20px} .acc details[open] .acc__i{transform:rotate(45deg)} .acc details p{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.6;max-width:92%} .faq .link-arrow{display:inline-block;margin-top:18px} .contacts__list{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:16px} .contacts__list li{display:flex;align-items:center;gap:12px;font-size:15.5px} .contacts__list .ico{width:20px;height:20px} .contacts__list a:hover{color:var(--green)} .map{position:relative;display:block;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)} .map img{width:100%;height:auto} .map__pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--green);color:#fff; padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;box-shadow:0 8px 20px -8px rgba(37,76,58,.8); display:inline-flex;align-items:center;gap:6px} .map__pin .ico{width:15px;height:15px} /* ===== footer ===== */ .footer{background:var(--green-d);color:#e8ece9;padding:36px 0 28px;margin-top:20px} .footer__in{display:flex;align-items:center;gap:24px;flex-wrap:wrap} .logo--light{color:#fff} .footer__nav{display:flex;gap:20px;margin-inline:auto;flex-wrap:wrap} .footer__nav a{font-size:14px;color:#c3ccc6;transition:.2s} .footer__nav a:hover{color:#fff} .footer__copy{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#9fb0a7} /* ===== modal ===== */ .modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px} .modal[hidden]{display:none} .modal__backdrop{position:absolute;inset:0;background:rgba(20,25,20,.55);backdrop-filter:blur(4px);animation:fade .3s} .modal__card{position:relative;background:var(--bg);border-radius:24px;width:min(820px,calc(100vw - 40px)); max-height:calc(100vh - 40px);overflow:auto;padding:clamp(26px,3vw,44px);box-shadow:0 40px 100px -30px rgba(0,0,0,.6); animation:pop .35s cubic-bezier(.2,.9,.3,1.2)} .modal__card.gallery{width:min(1120px,calc(100vw - 40px))} .modal__close{position:absolute;top:16px;right:18px;width:40px;height:40px;border-radius:999px;background:#fff; font-size:24px;color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);z-index:2;transition:.2s} .modal__close:hover{transform:rotate(90deg)} .modal h3{font-size:clamp(22px,2.4vw,30px);font-weight:900;margin:0 0 6px;text-transform:uppercase} .modal__lead{color:var(--muted);margin:0 0 24px} .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .gallery-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px} .m-price{display:grid;grid-template-columns:1fr 1fr;gap:8px 40px} .m-price li{display:flex;align-items:baseline;gap:8px;padding:11px 0;border-bottom:1px solid var(--line);list-style:none} .m-price li i{flex:1;border-bottom:1px dotted #cfc9bc;transform:translateY(-3px)} .m-price li b{font-weight:800} .m-price h4{grid-column:1/-1;margin:16px 0 2px;color:var(--green);font-size:15px} .m-masters{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .m-masters figure{margin:0} .m-masters img{width:100%;aspect-ratio:1/1.1;object-fit:cover;object-position:top;border-radius:12px;filter:grayscale(1)} .m-masters figcaption{font-weight:700;font-size:14px;margin-top:8px} .m-masters small{color:var(--muted);font-size:12.5px} .form-success{text-align:center;padding:30px 10px} .form-success .ok{width:70px;height:70px;border-radius:999px;background:var(--green);color:#fff; display:flex;align-items:center;justify-content:center;margin:0 auto 18px} .form-success .ok .ico{width:34px;height:34px} .booking__note{align-items:center} .booking__note .ico{width:15px;height:15px} @keyframes fade{from{opacity:0}to{opacity:1}} @keyframes pop{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}} /* ===== reveal animations (varied) ===== */ /* animate the standalone translate/scale/filter props so element :hover transforms never clash */ .reveal{opacity:0;translate:0 42px; transition:opacity .95s cubic-bezier(.22,.61,.36,1),translate .95s cubic-bezier(.22,.61,.36,1), scale .95s cubic-bezier(.22,.61,.36,1),filter .9s ease} .reveal.in{opacity:1;translate:0 0;scale:1;filter:none} /* variants — mix them across sections so nothing feels one-note */ .reveal--l{translate:-58px 0} .reveal--r{translate:58px 0} .reveal--zoom{translate:0 24px;scale:.9} .reveal--pop{translate:0 0;scale:.86} .reveal--soft{translate:0 26px;transition-duration:1.5s} .reveal--fade{translate:0 0} .reveal--blur{translate:0 16px;filter:blur(14px)} /* gentle staggered cascade for cards in a row */ .grid .reveal:nth-child(2){transition-delay:.1s} .grid .reveal:nth-child(3){transition-delay:.2s} .grid .reveal:nth-child(4){transition-delay:.3s} /* hero: model fades in softly, text & stats follow */ .hero__model{transition-delay:.05s} .hero__left{transition-delay:.35s} .stats{transition-delay:.2s} @media (prefers-reduced-motion:reduce){.reveal,.reveal.in{opacity:1;translate:0 0;scale:1;filter:none;transition:none}} /* ============ RESPONSIVE ============ */ @media (max-width:1080px){ .nav{display:none} .burger{display:flex} .grid-4{grid-template-columns:repeat(2,1fr)} .club{grid-template-columns:1fr;text-align:center;gap:24px} .club__benefits{grid-template-columns:repeat(3,1fr)} .club__logo{display:flex;flex-direction:column;align-items:center} } @media (max-width:900px){ .booking__in{grid-template-columns:1fr} .booking__bg{display:none} .faq-contacts{grid-template-columns:1fr} .stats{grid-template-columns:repeat(3,1fr);row-gap:22px} .stat:nth-child(4){border-left:0;padding-left:34px} .hero__left{position:static;max-width:none;margin-top:18px;text-align:center} .hero__left .btn{margin-inline:auto} .hero__card{display:none} } @media (max-width:760px){ .header__phone{display:none} .header .btn--green{display:none} .grid-3{grid-template-columns:1fr} .price{grid-template-columns:1fr;gap:22px} .price__cta{flex-direction:column;align-items:stretch;text-align:center} .hero__stage{height:auto;display:flex;flex-direction:column;align-items:center} .hero__word{position:static;transform:none;font-size:clamp(90px,26vw,160px);margin-bottom:-6vw} .hero__model{position:static;transform:none;height:auto;width:min(88%,360px);margin-top:-2vw} .club__benefits{grid-template-columns:1fr;gap:14px;text-align:left;max-width:340px;margin-inline:auto} .promo--big{grid-template-columns:1fr} .promo--big .promo__img{aspect-ratio:16/9} .m-masters{grid-template-columns:repeat(2,1fr)} .m-price{grid-template-columns:1fr} .gallery-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .grid-4{grid-template-columns:1fr} .stats{grid-template-columns:1fr 1fr} .stat:nth-child(3){border-left:0;padding-left:34px} .booking__form{grid-template-columns:1fr} .promos__row{grid-template-columns:1fr} .reviews__head{flex-direction:column;align-items:flex-start;gap:10px} .sec-head{flex-direction:column;align-items:flex-start;gap:8px} } /* mobile nav drawer */ .mnav{position:fixed;inset:0 0 0 auto;width:min(300px,80vw);background:var(--bg);z-index:90; transform:translateX(100%);transition:.35s cubic-bezier(.2,.8,.3,1);padding:88px 28px 28px; display:flex;flex-direction:column;gap:6px;box-shadow:-20px 0 60px -30px rgba(0,0,0,.5)} .mnav.open{transform:none} .mnav a{padding:14px 4px;font-size:18px;font-weight:600;border-bottom:1px solid var(--line)} .mnav .btn{margin-top:18px} .mnav-backdrop{position:fixed;inset:0;background:rgba(20,25,20,.4);z-index:80;opacity:0;pointer-events:none;transition:.3s} .mnav-backdrop.open{opacity:1;pointer-events:auto}