/* ========================================================= Альона Саєнко — Продажі і проявленість Modern luxury editorial · gold · sand · black · red · white ========================================================= */ :root{ /* palette */ --black:#0B0A08; --black-2:#121009; --ink:#1A1710; --ink-line:rgba(232,215,176,.14); --sand:#F1E6CB; --sand-2:#E7D5AC; --cream:#FBF6EC; --white:#FFFFFF; --text:#211B12; --muted:#7C715C; --muted-light:#C7B998; --gold:#C9A24B; --gold-2:#E6C879; --gold-deep:#9A772B; --gold-ink:#7E5F22; /* дрібний золотий текст на світлому: 5.5:1, WCAG AA */ --gold-grad:linear-gradient(102deg,#9A772B 0%,#E6C879 30%,#C9A24B 55%,#F0DCA0 80%,#B98F38 100%); --red:#D1232A; --red-deep:#A8151B; --red-soft:#E5524F; --maxw:1280px; --r:26px; --r-sm:16px; --ease:cubic-bezier(.19,1,.22,1); --ease-2:cubic-bezier(.22,.61,.36,1); --f-disp:'Unbounded', system-ui, sans-serif; --f-serif:'Playfair Display', Georgia, serif; --f-sans:'Manrope', system-ui, -apple-system, sans-serif; } /* skip-to-content — перший фокусований елемент, ховається доки не отримає фокус */ .skip-link{position:fixed;top:-120px;left:16px;z-index:10000;background:var(--red);color:#fff;padding:12px 22px;border-radius:0 0 14px 14px;font-weight:600;font-size:.9rem;transition:top .2s var(--ease)} .skip-link:focus{top:0;outline:3px solid var(--gold);outline-offset:2px} main:focus{outline:none} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--f-sans); color:var(--text); background:var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } body.menu-open{overflow:hidden} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} ::selection{background:var(--red);color:#fff} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,56px)} /* ---------- grain ---------- */ .grain{ position:fixed;inset:-50%;z-index:9000;pointer-events:none;opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:overlay; } /* ---------- custom cursor ---------- */ .cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:9500;pointer-events:none;border-radius:50%;mix-blend-mode:difference} .cursor{width:38px;height:38px;border:1.5px solid #fff;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease),opacity .3s} .cursor-dot{width:5px;height:5px;background:#fff;transform:translate(-50%,-50%)} .cursor.hover{width:64px;height:64px;background:rgba(255,255,255,.15)} @media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}} /* ---------- scroll progress ---------- */ .scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9100;background:var(--gold-grad)} /* ---------- preloader ---------- */ .loader{position:fixed;inset:0;z-index:9999;background:var(--black);display:grid;place-items:center;transition:opacity .6s var(--ease),visibility .6s} .loader.done{opacity:0;visibility:hidden} /* Заставка — тільки при першому вході на сайт. Клас ставить інлайн-скрипт у , тож при переходах між сторінками .loader не встигає навіть блимнути чорним. */ html.intro-seen .loader{display:none} /* мобільний узагалі без інтро — запобіжник, якщо inline-скрипт у не спрацював (JS off) */ @media(max-width:680px){.loader{display:none}} .loader-inner{text-align:center} .loader-name{display:block;font-family:var(--f-disp);font-weight:600;font-size:clamp(1.3rem,4vw,2rem);color:var(--cream);letter-spacing:.02em;opacity:0;animation:fadeUp .6s var(--ease) .1s forwards} .loader-bar{display:block;height:2px;width:0;margin:20px auto 0;background:var(--gold-grad);animation:barGrow 1s var(--ease) .25s forwards} @keyframes barGrow{to{width:200px}} /* слова, що виїжджають знизу і ховаються за золотою лінією */ .loader-words{ display:block;height:1.75em;overflow:hidden;margin-top:3px; font-family:var(--f-sans);font-size:clamp(.72rem,2vw,.86rem);font-weight:700; letter-spacing:.26em;text-transform:uppercase; opacity:0;animation:fadeUp .4s var(--ease) .1s forwards; } /* Один прохід (не петля) і зупинка на 4-му слові: JS ловить `animationend` і прибирає заставку саме тоді, коли всі чотири слова показались — без прив'язки до таймера. */ .lw-track{display:block;animation:lwRoll 3.6s var(--ease) .15s forwards} .lw-track i{ display:block;height:1.75em;line-height:1.75em;font-style:normal;white-space:nowrap; background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent; } /* 4 слова, кожному ~25% циклу. Останнє тримається до 100% — на ньому анімація й завершується, що й слугує сигналом «показали все» для JS. */ @keyframes lwRoll{ 0%, 16% {transform:translateY(0)} /* Продажі */ 25%, 41% {transform:translateY(-1.75em)} /* контент */ 50%, 66% {transform:translateY(-3.5em)} /* стан */ 75%, 100% {transform:translateY(-5.25em)} /* проявленість — фінал */ } @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* ---------- shared type ---------- */ .eyebrow{ display:inline-block;font-family:var(--f-sans);font-size:11.5px;font-weight:600; letter-spacing:.32em;text-transform:uppercase;color:var(--gold-ink); } .eyebrow.center{display:block;text-align:center} .eyebrow.gold{color:var(--gold-ink)} .dark .eyebrow{color:var(--gold-2)} .gold-text{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} h2{font-family:var(--f-disp);font-weight:600;font-size:clamp(2.1rem,5.2vw,4rem);line-height:1.02;letter-spacing:-.02em} h2 em,h1 em{font-family:var(--f-serif);font-style:italic;font-weight:500} h1 em{color:var(--gold-2)} h2 em{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .statement em{font-family:var(--f-serif);font-style:italic;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} section{padding:clamp(54px,6.5vw,100px) 0;position:relative} .dark{background:var(--black);color:var(--cream)} .dark h2{color:var(--cream)} .sec-head{text-align:center;margin-bottom:clamp(36px,4.5vw,60px)} .sec-head h2{margin-top:18px} .note{ text-align:center;margin-top:clamp(34px,4vw,56px);font-family:var(--f-serif);font-style:italic; font-size:clamp(1.2rem,2.4vw,1.7rem);color:var(--gold-deep); } .dark .note{color:var(--gold-2)} /* ---------- buttons ---------- */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7em; font-family:var(--f-sans);font-weight:600;font-size:.95rem;letter-spacing:.01em; padding:16px 30px 16px 32px;border-radius:60px;cursor:pointer;border:1.5px solid transparent;overflow:hidden; transition:color .4s var(--ease),border-color .4s var(--ease),transform .25s var(--ease-2),box-shadow .4s var(--ease); min-height:56px;z-index:0; } .btn>*{position:relative;z-index:2} .btn .btn-arr{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:.95em;transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease)} .btn::before{content:"";position:absolute;inset:0;z-index:1;transition:transform .55s var(--ease)} .btn-primary{background:var(--red);color:#fff;box-shadow:0 16px 38px -16px rgba(209,35,42,.75)} .btn-primary .btn-arr{background:rgba(255,255,255,.18)} .btn-primary::before{background:var(--gold-grad);transform:translateX(-101%)} .btn-primary:hover{color:var(--black);box-shadow:0 18px 44px -16px rgba(201,162,75,.6)} .btn-primary:hover::before{transform:translateX(0)} .btn-primary:hover .btn-arr{background:rgba(0,0,0,.14);color:var(--black);transform:translateX(3px)} .btn-line{background:transparent;border-color:currentColor;color:inherit} .btn-line .btn-arr{border:1.5px solid currentColor} .btn-line::before{background:var(--cream);transform:translateX(-101%)} .dark .btn-line::before{background:var(--gold-grad)} .btn-line:hover{color:var(--black);border-color:transparent} .btn-line:hover::before{transform:translateX(0)} .btn-line:hover .btn-arr{border-color:rgba(0,0,0,.3);transform:translateX(3px)} .btn-block{width:100%} .btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px} /* ========================================================= NAV ========================================================= */ .nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:22px 0;transition:padding .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)} .nav.scrolled{background:rgba(11,10,8,.82);backdrop-filter:blur(16px) saturate(1.2);padding:13px 0;box-shadow:0 1px 0 var(--ink-line)} .nav.hide{transform:translateY(-110%)} .nav-inner{display:flex;align-items:center;justify-content:space-between} .brand{display:flex;flex-direction:column;line-height:1.05;color:var(--cream)} .brand-name{font-family:var(--f-disp);font-size:1.12rem;font-weight:600;letter-spacing:.01em} .brand-tag{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-top:3px} .nav-links{display:flex;align-items:center;gap:34px} .nav-links a{color:var(--cream);font-size:.88rem;font-weight:500;letter-spacing:.01em;opacity:.82;position:relative;transition:opacity .25s} .nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1.5px;background:var(--gold-grad);transition:width .3s var(--ease)} .nav-links a:not(.nav-cta):hover{opacity:1} .nav-links a:not(.nav-cta):hover::after{width:100%} .nav-cta{background:var(--red);color:#fff!important;opacity:1!important;padding:11px 24px;border-radius:50px;font-weight:600;transition:background .3s var(--ease),transform .25s var(--ease-2)} .nav-cta:hover{background:var(--gold);color:var(--black)!important;transform:translateY(-1px)} .burger{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:10px;z-index:210} .burger span{width:28px;height:2px;background:var(--cream);border-radius:2px;transition:transform .35s var(--ease),opacity .25s} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)} /* ========================================================= HERO ========================================================= */ .hero{background:var(--black);color:var(--cream);min-height:100svh;display:flex;align-items:center;padding-top:140px;padding-bottom:80px;overflow:hidden} .hero-bg{position:absolute;inset:0;pointer-events:none; background: radial-gradient(80% 60% at 78% 18%,rgba(201,162,75,.22),transparent 60%), radial-gradient(60% 50% at 12% 90%,rgba(209,35,42,.14),transparent 60%); } .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,72px);align-items:center;position:relative;width:100%} .hero-title{font-family:var(--f-disp);font-weight:700;font-size:clamp(2.6rem,7vw,5.6rem);line-height:.98;letter-spacing:-.03em;margin:24px 0} .hero-title .line{display:block;overflow:hidden;padding-bottom:.04em} .hero-title .line-in{display:block;transform:translateY(110%)} .hero-title em{font-family:var(--f-serif);font-style:italic;font-weight:500;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .hero-sub{font-size:clamp(1rem,1.35vw,1.18rem);color:#d8cdb8;max-width:480px;font-weight:300;margin-bottom:36px} .hero-actions{display:flex;flex-wrap:wrap;gap:14px} .hero-visual{position:relative} .hero-photo{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;will-change:transform; box-shadow:0 50px 90px -40px rgba(0,0,0,.8);} .hero-photo img{width:100%;height:108%;object-fit:cover;object-position:50% 28%} .hero-photo::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(230,200,121,.3)} .hero-tag{position:absolute;left:-14px;bottom:34px;z-index:3;font-family:var(--f-serif);font-style:italic;font-size:1.1rem;line-height:1.1;color:var(--black);background:var(--gold-grad);padding:15px 22px;border-radius:var(--r-sm);box-shadow:0 20px 40px -16px rgba(0,0,0,.6)} .hero-tag b{font-family:var(--f-disp);font-style:normal;font-weight:700;font-size:1rem;letter-spacing:-.01em} .scroll-cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)} .scroll-cue-line{width:1px;height:42px;background:linear-gradient(var(--gold),transparent);animation:cue 1.8s var(--ease) infinite} @keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}} /* ========================================================= MARQUEE ========================================================= */ .marquee{background:var(--gold);color:var(--black);padding:20px 0;overflow:hidden;border-top:1px solid rgba(0,0,0,.15);border-bottom:1px solid rgba(0,0,0,.15)} .marquee-track{display:flex;width:max-content;animation:marquee 26s linear infinite} .marquee-track span{font-family:var(--f-disp);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.6rem);text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;display:flex;align-items:center;padding-right:0} .marquee-track i{font-style:normal;color:var(--red);margin:0 .55em;font-size:.7em} @keyframes marquee{to{transform:translateX(-50%)}} /* ========================================================= STATEMENT ========================================================= */ .statement{background:var(--sand);text-align:center} .statement-lead{font-family:var(--f-disp);font-weight:500;font-size:clamp(1.5rem,3.6vw,2.9rem);line-height:1.18;letter-spacing:-.02em;max-width:960px;margin:22px auto 0;color:var(--text)} .nots{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:38px} .nots span{font-size:.9rem;border:1px solid rgba(154,119,43,.45);border-radius:40px;padding:10px 24px;color:var(--gold-deep);font-weight:500;background:rgba(255,255,255,.4)} /* ========================================================= PAIN vs GAIN ========================================================= */ .split{display:grid;grid-template-columns:1fr 1fr;gap:18px} .col{padding:clamp(30px,4vw,52px);border-radius:var(--r);position:relative;overflow:hidden} .col.pain{background:var(--black-2);border:1px solid var(--ink-line)} .col.gain{background:var(--gold-grad);color:var(--black)} .col-tag{display:inline-block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;font-weight:700;padding:6px 14px;border-radius:40px;margin-bottom:24px;border:1px solid rgba(199,185,152,.4);color:var(--muted-light)} .col-tag.gold-tag{border-color:rgba(0,0,0,.3);color:rgba(0,0,0,.7);background:rgba(255,255,255,.25)} .col h3{font-family:var(--f-disp);font-weight:500;font-size:clamp(1.3rem,2.3vw,1.7rem);margin-bottom:24px;letter-spacing:-.02em} .col.pain h3{color:var(--cream)} .col ul{list-style:none} .col li{padding:12px 0 12px 30px;position:relative;font-size:1.04rem;font-weight:300} .col.pain li{border-bottom:1px solid var(--ink-line);color:#d3c9b6} .col.gain li{border-bottom:1px solid rgba(0,0,0,.16);font-weight:400} .col li:last-child{border-bottom:0} .col.pain li::before{content:"—";position:absolute;left:0;color:#6f6450} .col.gain li::before{content:"✦";position:absolute;left:2px;top:14px;color:var(--red);font-size:.78rem} /* ========================================================= QUERIES ========================================================= */ .queries{background:var(--cream)} .chips{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;max-width:880px;margin:0 auto} .chip{background:var(--white);border:1px solid rgba(154,119,43,.25);color:var(--text);border-radius:50px;padding:14px 26px;font-size:1rem;font-weight:500;transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s} .chip:hover{transform:translateY(-4px);background:var(--black);color:var(--cream);border-color:var(--black)} /* ========================================================= ABOUT ========================================================= */ .about-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,5vw,72px);align-items:center} .about-photo,.results-photo{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5} .about-photo img,.results-photo img{width:100%;height:110%;object-fit:cover;object-position:50% 22%;will-change:transform} .photo-frame{position:absolute;inset:14px;border:1px solid rgba(230,200,121,.5);border-radius:calc(var(--r) - 12px);pointer-events:none;z-index:2} .photo-frame.gold-frame{inset:-14px;border:0;border-radius:var(--r);box-shadow:0 0 0 1px var(--gold-2), 16px 16px 0 -1px rgba(201,162,75,.25)} .about-copy h2{margin:16px 0 22px} .about-copy p{color:#d4cab6;max-width:560px;font-weight:300;font-size:1.06rem} .stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:40px;background:var(--ink-line);border:1px solid var(--ink-line);border-radius:var(--r);overflow:hidden} .stat{background:var(--black);padding:26px 28px} .stat .big{font-family:var(--f-disp);font-weight:600;font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.02em;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1} .stat .small{font-size:.85rem;color:var(--muted-light);margin-top:8px;font-weight:300} /* ========================================================= APPROACH ========================================================= */ .approach{background:var(--sand)} .roles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .role{background:var(--black);color:var(--cream);border-radius:var(--r);padding:clamp(30px,3.2vw,46px);position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease)} .role::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--gold-grad);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)} .role:hover{transform:translateY(-10px);box-shadow:0 40px 60px -30px rgba(0,0,0,.55)} .role:hover::before{transform:scaleX(1)} .role .rn{font-family:var(--f-disp);font-weight:800;font-size:3rem;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1} .role h3{font-family:var(--f-disp);font-weight:500;font-size:1.5rem;color:var(--cream);margin:14px 0 22px;letter-spacing:-.02em;line-height:1.05} .role ul{list-style:none} .role li{padding:9px 0 9px 22px;font-size:.98rem;color:#cfc5b1;position:relative;border-bottom:1px solid var(--ink-line);font-weight:300} .role li:last-child{border-bottom:0} .role li::before{content:"";position:absolute;left:0;top:18px;width:9px;height:1px;background:var(--gold)} /* ========================================================= FOR WHOM ========================================================= */ .whom{display:grid;grid-template-columns:1fr 1fr;gap:18px} .box{background:var(--black-2);border:1px solid var(--ink-line);border-radius:var(--r);padding:clamp(30px,3.4vw,46px);transition:border-color .4s var(--ease),transform .4s var(--ease)} .box:hover{border-color:rgba(230,200,121,.4);transform:translateY(-6px)} .box h3{font-family:var(--f-disp);font-weight:500;font-size:1.7rem;color:var(--gold-2);margin-bottom:8px;letter-spacing:-.02em} .box .lbl{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-light);margin-bottom:24px;font-weight:600} .box ul{list-style:none} .box li{padding:11px 0 11px 24px;font-size:1.01rem;position:relative;color:#d6ccb8;border-bottom:1px solid var(--ink-line);font-weight:300} .box li:last-child{border-bottom:0} .box li::before{content:"✦";position:absolute;left:2px;top:13px;color:var(--gold);font-size:.7rem} /* ========================================================= RESULTS ========================================================= */ .results{background:var(--black)} .results-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(36px,6vw,90px);align-items:center} .results-copy .record{font-family:var(--f-disp);font-weight:700;font-size:clamp(2.8rem,8vw,6.2rem);line-height:.92;letter-spacing:-.03em;margin:16px 0 22px} .record .count{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .record .cur{color:var(--red-soft);font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:.4em;letter-spacing:0} .record-cap{color:#d4cab6;max-width:560px;font-weight:300;font-size:1.08rem} .tags{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px} .tags span{font-size:.85rem;border:1px solid var(--ink-line);border-radius:40px;padding:9px 20px;color:var(--cream)} /* ========================================================= FORMATS ========================================================= */ .formats{background:var(--cream)} .fmt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .fmt{background:var(--white);border:1px solid rgba(154,119,43,.18);border-radius:var(--r);padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s} .fmt::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:0;background:var(--gold-grad);opacity:.07;transition:height .5s var(--ease);z-index:0} .fmt:hover{transform:translateY(-8px);box-shadow:0 40px 70px -36px rgba(26,23,16,.35);border-color:rgba(201,162,75,.5)} .fmt:hover::after{height:100%} .fmt>*{position:relative;z-index:1} .fmt-num{font-family:var(--f-disp);font-weight:800;font-size:1.6rem;color:rgba(154,119,43,.3);letter-spacing:-.02em;margin-bottom:6px} .ftop{display:flex;flex-direction:column;gap:6px;margin-bottom:10px} .ftop h3{font-family:var(--f-disp);font-weight:500;font-size:1.55rem;letter-spacing:-.02em;line-height:1.05} .dur{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:700} .desc{font-family:var(--f-serif);font-style:italic;font-size:1.2rem;color:var(--text);margin-bottom:22px} .blk{margin-bottom:18px} .blk .h{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:10px} .blk ul{list-style:none} .blk li{padding:5px 0 5px 18px;font-size:.95rem;position:relative;color:#4c4538;font-weight:400} .blk li::before{content:"–";position:absolute;left:0;color:var(--gold-deep)} .fmt-cta{margin-top:auto;padding-top:20px;font-weight:600;color:var(--red);font-size:.92rem;letter-spacing:.02em;display:inline-flex;align-items:center;gap:8px;align-self:flex-start} .fmt-cta span{transition:transform .3s var(--ease)} .fmt-cta:hover span{transform:translateX(6px)} .fmt.vip{background:var(--black);color:var(--cream);border-color:var(--gold)} .fmt.vip .ftop h3{color:var(--cream)} .fmt.vip .desc{color:#e6dcc8} .fmt.vip .fmt-num{color:rgba(230,200,121,.35)} .fmt.vip .blk li{color:#d4cab6;font-weight:300} .fmt.vip .blk li::before{color:var(--gold)} .fmt.vip::after{background:var(--gold-grad);opacity:.1} .fmt.vip .fmt-cta{color:var(--gold-2)} .vip-flag{position:absolute;top:26px;right:26px;z-index:2;background:var(--gold-grad);color:var(--black);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;padding:7px 14px;border-radius:40px} /* ========================================================= LEAD ========================================================= */ .lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:start} .lead-intro h2{margin:16px 0 22px} .lead-intro p{color:#d4cab6;font-weight:300;font-size:1.06rem;max-width:480px} .lead-bullets{list-style:none;margin-top:26px;display:grid;gap:12px} .lead-bullets li{position:relative;padding-left:34px;color:var(--cream);font-size:1.02rem} .lead-bullets li::before{content:"✦";position:absolute;left:0;top:1px;color:var(--black);background:var(--gold-grad);width:22px;height:22px;border-radius:50%;font-size:.62rem;display:grid;place-items:center;font-weight:700} .lead-photo{margin-top:38px;border-radius:var(--r);overflow:hidden;aspect-ratio:16/11;box-shadow:0 40px 70px -36px rgba(0,0,0,.6)} .lead-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%} .lead-form{background:var(--cream);border-radius:var(--r);padding:clamp(28px,3.6vw,46px);box-shadow:0 50px 90px -40px rgba(0,0,0,.6)} .field{margin-bottom:20px;position:relative} .field label{display:block;font-size:.82rem;font-weight:600;color:var(--text);margin-bottom:9px;letter-spacing:.02em} .req{color:var(--red)} .field input,.field select,.field textarea{width:100%;font-family:var(--f-sans);font-size:1rem;color:var(--text);background:var(--white);border:1.5px solid rgba(154,119,43,.25);border-radius:14px;padding:15px 18px;min-height:54px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)} .field textarea{resize:vertical;min-height:92px;line-height:1.55} .select-wrap{position:relative} .select-wrap::after{content:"▾";position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--gold-deep)} .field select{appearance:none;-webkit-appearance:none;cursor:pointer} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.18)} .field input::placeholder,.field textarea::placeholder{color:#a99c84} .field .hint{display:block;font-size:.78rem;color:var(--muted);margin-top:7px} .field.invalid input,.field.invalid select{border-color:var(--red);box-shadow:0 0 0 3px rgba(209,35,42,.14)} .err{display:none;color:var(--red-deep);font-size:.8rem;margin-top:7px;font-weight:500} .field.invalid .err{display:block} .field.invalid .hint{display:none} .form-foot{font-size:.76rem;color:var(--muted);text-align:center;margin-top:16px} .form-error{margin-top:14px;padding:12px 16px;border-radius:var(--r-sm);background:rgba(209,35,42,.08);border:1px solid rgba(209,35,42,.35);color:var(--red-deep);font-size:.86rem;font-weight:500;text-align:center} .form-success{text-align:center;padding:20px 6px} .success-mark{width:64px;height:64px;border-radius:50%;background:var(--gold-grad);color:var(--black);font-size:1.7rem;display:grid;place-items:center;margin:0 auto 18px;animation:pop .5s var(--ease)} .form-success h3{font-family:var(--f-disp);font-weight:500;font-size:1.5rem;color:var(--text);margin-bottom:8px;letter-spacing:-.02em} .form-success p{color:var(--muted)} @keyframes pop{0%{transform:scale(.4) rotate(-30deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}} /* ========================================================= FOOTER ========================================================= */ .footer{background:var(--black);color:var(--cream);padding:clamp(60px,8vw,110px) 0 44px} .footer-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);padding:clamp(28px,5vw,56px) 0;margin-bottom:50px} .footer-cta span:first-child{font-family:var(--f-disp);font-weight:600;font-size:clamp(2rem,6vw,4.6rem);letter-spacing:-.03em;transition:color .3s var(--ease)} .footer-arrow{font-size:clamp(1.6rem,4vw,3rem);color:var(--gold);transition:transform .4s var(--ease)} .footer-cta:hover span:first-child{color:var(--gold-2)} .footer-cta:hover .footer-arrow{transform:translateX(20px)} .footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px} .footer-brand{display:flex;flex-direction:column;line-height:1.25} .footer-links a{font-size:.95rem;color:var(--cream);opacity:.85;transition:opacity .25s,color .25s} .footer-links a:hover{opacity:1;color:var(--gold-2)} .footer-copy{font-size:.85rem;color:var(--muted-light)} /* ========================================================= REVEAL ========================================================= */ .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal-img{clip-path:inset(0 0 100% 0);opacity:.4;transition:clip-path .9s var(--ease),opacity .9s var(--ease)} .reveal-img.in{clip-path:inset(0 0 0 0);opacity:1} .loaded .hero-title .line-in{transition:transform 1s var(--ease)} .loaded .hero-title.in .line-in{transform:translateY(0)} /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:980px){ .hero-grid,.about-grid,.results-grid,.lead-grid{grid-template-columns:1fr} .hero{min-height:auto;padding-top:120px} .hero-visual{max-width:430px;margin-top:6px} .about-photo,.results-photo{max-width:430px;order:-1} .roles,.fmt-grid{grid-template-columns:1fr} .scroll-cue{display:none} } @media (max-width:680px){ .nav-links{position:fixed;inset:0;width:100%;height:100%;height:100dvh;background:var(--black);flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:40px;transform:translateX(100%);transition:transform .45s var(--ease);-webkit-backface-visibility:hidden;will-change:transform;z-index:9500} .nav-links.open{transform:translateX(0)} .burger{position:relative;z-index:9600} .nav-links a{font-size:1.2rem} .burger{display:flex} .split,.whom,.stats{grid-template-columns:1fr} .hero-tag{left:0} .chip{font-size:.92rem;padding:12px 20px} .cursor,.cursor-dot{display:none} } /* ========================================================= REDUCED MOTION ========================================================= */ /* ========================================================= ПРАВКИ: подход img · queries intro · diplomas · cases · reviews · video · freebies · lightbox ========================================================= */ /* мій підхід — vector block (відмальовано, не картинка) */ .ag{position:relative;margin:clamp(34px,5vw,60px) auto 0;max-width:1000px;background: radial-gradient(120% 90% at 85% 6%,rgba(230,200,121,.12),transparent 42%), radial-gradient(90% 80% at 6% 96%,rgba(201,162,75,.1),transparent 44%),#fffdf8; border-radius:28px;padding:clamp(26px,3.6vw,48px);overflow:hidden; border:1px solid rgba(201,162,75,.34);box-shadow:0 34px 80px -36px rgba(120,90,30,.4)} .ag *{position:relative} .ag-row{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:0} .ag-arrow{display:flex;align-items:center;justify-content:center;font-family:var(--f-sans);font-weight:700;font-size:1.7rem;color:var(--gold-deep);padding:0 clamp(6px,1.4vw,18px)} /* card */ .ag-card{display:flex;flex-direction:column;align-items:center;text-align:center; border:1.5px solid rgba(201,162,75,.55);border-radius:130px/96px; padding:48px clamp(16px,1.8vw,26px) 30px;background:rgba(255,255,255,.5); box-shadow:inset 0 0 0 4px rgba(255,255,255,.6)} .ag-orb{width:54px;height:54px;border-radius:50%;margin-bottom:8px; background:radial-gradient(circle at 33% 28%,#fff7df 0%,#f3d585 20%,#d9a93a 54%,#9a6f1d 100%); box-shadow:0 7px 16px -5px rgba(140,100,30,.7),inset -4px -5px 9px rgba(110,70,8,.55),inset 4px 4px 9px rgba(255,246,212,.8)} .ag-orb.ring::after{content:"";position:absolute;left:50%;top:50%;width:84px;height:30px; border:3px solid rgba(201,162,75,.75);border-radius:50%;transform:translate(-50%,-50%) rotate(-24deg);box-shadow:0 0 6px rgba(201,162,75,.3)} .ag-num{font-family:var(--f-disp);font-weight:700;font-size:2rem;line-height:1; background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .ag-card h3{font-family:var(--f-disp);font-weight:700;text-transform:uppercase;color:#111; font-size:clamp(1.02rem,1.5vw,1.35rem);line-height:1.06;margin:6px 0 16px;letter-spacing:.01em} .ag-card ul{list-style:none;width:100%;display:flex;flex-direction:column;gap:9px;margin-bottom:18px} .ag-card li{position:relative;padding-left:18px;text-align:left;font-family:var(--f-sans);font-weight:700; text-transform:uppercase;font-size:.74rem;letter-spacing:.02em;line-height:1.25;color:#1c1a16} .ag-card li::before{content:"";position:absolute;left:0;top:.42em;width:7px;height:7px;border-radius:50%; background:var(--gold-grad)} .ag-div{display:flex;align-items:center;justify-content:center;width:60%;margin:2px 0 12px; border-top:1.5px dotted rgba(201,162,75,.7);height:0} .ag-div i{transform:translateY(-50%);background:#fffdf8;padding:0 7px;color:var(--gold);font-size:.7rem;font-style:normal} .ag-cap{font-family:var(--f-sans);font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.04em; line-height:1.2;color:var(--gold-deep)} /* wide card 04 */ .ag-wide{position:relative;display:flex;align-items:center;justify-content:center;gap:22px;margin:clamp(16px,2vw,26px) auto 0; width:min(78%,720px);border:1.5px solid rgba(201,162,75,.55);border-radius:90px;padding:24px 40px; background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 4px rgba(255,255,255,.6)} .ag-wide .ag-orb-lg{width:92px;height:92px;flex:0 0 auto;margin:0} .ag-wide-body{text-align:center} .ag-wide .ag-num{font-size:1.7rem} .ag-wide h3{font-family:var(--f-disp);font-weight:700;text-transform:uppercase;color:#111; font-size:clamp(1.1rem,2vw,1.7rem);line-height:1.04;margin:2px 0 6px} .ag-wide .ag-cap{display:block} /* decorative planets + stars */ .ag-bg-planet{position:absolute;border-radius:50%; background:radial-gradient(circle at 34% 30%,#fff7df,#e8c878 26%,#cf9f3f 58%,#8c641b 100%); box-shadow:inset -6px -8px 16px rgba(110,70,8,.5),inset 5px 5px 14px rgba(255,246,212,.7);opacity:.9;z-index:0} .ag-bg-tr{width:120px;height:120px;top:-34px;right:-30px} .ag-bg-bl{width:104px;height:104px;left:-34px;bottom:-30px} .ag-star{position:absolute;color:rgba(201,162,75,.6);z-index:0} .ag-star.s1{top:18px;left:38%;font-size:14px} .ag-star.s2{bottom:40%;right:8%;font-size:11px} .ag-star.s3{top:46%;left:3%;font-size:16px} @media (max-width:760px){ .ag-row{grid-template-columns:1fr;gap:12px} .ag-arrow{transform:rotate(90deg);padding:2px 0} .ag-card{border-radius:40px;padding:40px 28px 28px} .ag-wide{width:100%;flex-direction:column;border-radius:40px;text-align:center} } /* queries intro */ .queries-intro{max-width:780px;margin:0 auto clamp(28px,3.4vw,42px);text-align:center;font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--muted);line-height:1.55} .queries-intro em{font-style:normal;font-weight:600;color:var(--gold-deep)} /* diplomas (inside dark about) */ .diplomas-wrap{margin-top:clamp(42px,5vw,68px)} .diplomas-head h3{font-family:var(--f-disp);font-weight:600;font-size:clamp(1.3rem,2.6vw,1.95rem);color:var(--cream);margin-top:10px;line-height:1.1} .diplomas-head h3 em{font-family:var(--f-serif);font-style:italic;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .strip{display:flex;gap:16px;overflow-x:auto;margin-top:22px;padding-bottom:14px;scroll-snap-type:x mandatory} .strip::-webkit-scrollbar{height:6px} .strip::-webkit-scrollbar-thumb{background:var(--gold-deep);border-radius:10px} .strip::-webkit-scrollbar-track{background:rgba(255,255,255,.06)} .gitem{flex:0 0 auto;border:0;padding:0;background:none;border-radius:12px;overflow:hidden;cursor:pointer;scroll-snap-align:start;box-shadow:0 16px 32px -20px rgba(0,0,0,.5)} .gitem img{display:block;transition:transform .45s var(--ease)} .gitem:hover img{transform:scale(1.05)} .strip .gitem{background:#fff} .strip .gitem img{height:clamp(240px,34vw,320px);width:auto;max-width:none;display:block} /* cases */ .cases{background:var(--cream)} .case{margin-top:clamp(34px,4vw,56px)} .case:first-of-type{margin-top:0} .case-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(33,27,18,.12)} .case-title h3{font-family:var(--f-disp);font-weight:600;font-size:clamp(1.35rem,3vw,2.05rem);line-height:1} .case-title span{display:block;font-size:.92rem;color:var(--muted);margin-top:6px;letter-spacing:.02em} .case-metric{text-align:right;line-height:1} .case-metric .case-b{display:block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin-bottom:4px} .case-metric b{font-family:var(--f-disp);font-weight:600;font-size:clamp(1.4rem,3.2vw,2.2rem);background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .carousel{position:relative} .carousel-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px} .carousel-track::-webkit-scrollbar{height:6px} .carousel-track::-webkit-scrollbar-thumb{background:var(--gold-deep);border-radius:10px} .carousel-track .gitem{width:clamp(220px,27vw,294px);aspect-ratio:4/5;border-radius:16px} .carousel-track .gitem img{width:100%;height:100%;object-fit:cover} .car-btn{position:absolute;top:calc(50% - 24px);width:48px;height:48px;border-radius:50%;border:0;background:var(--black);color:var(--cream);font-size:1.7rem;line-height:1;cursor:pointer;box-shadow:0 12px 26px -12px rgba(0,0,0,.5);transition:background .25s var(--ease),transform .25s var(--ease);z-index:3} .car-btn:hover{background:var(--red);transform:scale(1.06)} .car-btn.prev{left:-12px} .car-btn.next{right:-12px} /* reviews (dark, masonry) */ .reviews .masonry{column-count:3;column-gap:16px} .masonry .gitem{display:block;width:100%;margin:0 0 16px;border-radius:12px;break-inside:avoid} .masonry .gitem img{width:100%} /* video testimonials */ .video-sec{background:var(--cream)} .video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px} .vcard{margin:0;border-radius:16px;overflow:hidden;background:var(--black);box-shadow:0 20px 44px -24px rgba(0,0,0,.45)} .vcard video{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;display:block;background:#000} .vcard figcaption{padding:13px 16px;display:flex;align-items:baseline;gap:8px;color:var(--cream)} .vcard figcaption b{font-family:var(--f-disp);font-weight:600;font-size:1.02rem} .vcard figcaption span{font-size:.82rem;color:var(--gold-2)} /* freebies */ .freebies{background:var(--cream)} .free-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .free-card{position:relative;display:flex;flex-direction:column;background:var(--black);color:var(--cream);border-radius:var(--r);padding:clamp(28px,3vw,40px);overflow:hidden;border:1px solid var(--ink-line);transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .free-card:hover{transform:translateY(-6px);box-shadow:0 34px 64px -30px rgba(0,0,0,.55)} .free-num{font-family:var(--f-serif);font-style:italic;font-size:2.4rem;line-height:1;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .free-card h3{font-family:var(--f-disp);font-weight:600;font-size:1.35rem;margin:10px 0 10px;color:var(--cream)} .free-card p{color:var(--muted-light);font-size:.97rem;margin-bottom:22px;flex:1} .free-cta{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--gold-2);font-size:.95rem} .free-cta span{transition:transform .3s var(--ease)} .free-card:hover .free-cta span{transform:translate(3px,-3px)} /* results tag links */ .tags a{font-size:.85rem;border:1px solid var(--ink-line);border-radius:40px;padding:9px 20px;color:var(--cream);cursor:pointer;transition:color .25s,border-color .25s,background .25s} .tags a:hover{color:var(--black);background:var(--gold-2);border-color:var(--gold-2)} /* lightbox */ .lightbox{position:fixed;inset:0;z-index:9800;background:rgba(11,10,8,.95);display:none;align-items:center;justify-content:center;padding:40px} .lightbox.open{display:flex} .lb-img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:10px;box-shadow:0 30px 90px -20px rgba(0,0,0,.85)} .lb-close{position:absolute;top:20px;right:24px} .lb-close,.lb-nav{width:50px;height:50px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .25s var(--ease);z-index:3;backdrop-filter:blur(4px)} .lb-close{font-size:1.7rem} .lb-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:2rem} .lb-prev{left:18px} .lb-next{right:18px} .lb-close:hover,.lb-nav:hover{background:var(--red)} .lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:var(--cream);font-size:.85rem;letter-spacing:.12em} /* arrow 03 → 04 in approach graphic */ .ag-arrow-down{display:flex;justify-content:center;align-items:center;font-family:var(--f-sans);font-weight:700;font-size:1.9rem;line-height:1;color:var(--gold-deep);margin:clamp(6px,1.2vw,14px) 0 2px} /* reviews carousel — show full screenshot, no crop */ .reviews-carousel .carousel-track{align-items:flex-start} .reviews-carousel .carousel-track .gitem{width:clamp(264px,30vw,330px);aspect-ratio:auto;background:#fff;border-radius:14px} .reviews-carousel .carousel-track .gitem img{width:100%;height:auto;max-width:100%;display:block} .reviews-carousel .car-btn{background:var(--gold-deep)} .reviews-carousel .car-btn:hover{background:var(--red)} /* CTA bands between sections */ .cta-band{display:flex;justify-content:center;margin-top:clamp(34px,4.5vw,58px)} /* нік клієнтки в тексті → її Instagram */ .ig-link{ color:var(--gold-deep);font-weight:600;text-decoration:none; border-bottom:1px solid rgba(154,119,43,.45); transition:color .25s var(--ease),border-color .25s var(--ease); } .dark .ig-link{color:var(--gold-2);border-bottom-color:rgba(230,200,121,.45)} .ig-link:hover{color:var(--gold);border-bottom-color:var(--gold)} .ig-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px} /* «Читати кейс повністю» — внутрішнє посилання з головної на /kosmetolog-case */ .case-more{ display:inline-flex;align-items:center;gap:.6em;margin-top:18px; font-family:var(--f-sans);font-weight:600;font-size:.95rem;letter-spacing:.01em; padding:12px 24px;border-radius:60px;border:1.5px solid var(--gold); background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent; transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .25s var(--ease-2); } .case-more span{-webkit-text-fill-color:var(--gold);color:var(--gold);transition:transform .3s var(--ease)} .case-more:hover{border-color:var(--gold-2);box-shadow:0 10px 26px -12px rgba(201,162,75,.55);transform:translateY(-2px)} .case-more:hover span{transform:translateX(4px)} .case-more:focus-visible{outline:3px solid var(--gold);outline-offset:3px} /* back-to-top button */ /* липка кнопка — тільки мобільний: сторінка на 25 екранів, інакше заявка живе лише на 89% */ .sticky-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:170; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(11,10,8,.94);backdrop-filter:blur(10px);border-top:1px solid rgba(201,162,75,.22); transform:translateY(115%);visibility:hidden;transition:transform .45s var(--ease),visibility .45s var(--ease)} .sticky-cta .btn{width:100%;justify-content:center} .sticky-cta.show{transform:none;visibility:visible} /* поверх відкритого меню їй робити нічого */ body.menu-open .sticky-cta{transform:translateY(115%);visibility:hidden} @media(max-width:680px){ .sticky-cta{display:block} body.sticky-on .to-top{bottom:88px} } .to-top{position:fixed;right:20px;bottom:20px;z-index:180;width:52px;height:52px;border-radius:50%;border:0;background:var(--gold-grad);color:var(--black);font-size:1.35rem;font-weight:700;cursor:pointer;display:grid;place-items:center;line-height:1; opacity:0;visibility:hidden;transform:translateY(14px) scale(.92);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s; box-shadow:0 16px 34px -12px rgba(0,0,0,.5),0 0 0 1px rgba(201,162,75,.35)} .to-top.show{opacity:1;visibility:visible;transform:none} .to-top:hover{transform:translateY(-3px)} .to-top:focus-visible{outline:3px solid var(--gold);outline-offset:3px} @media (max-width:680px){.to-top{right:14px;bottom:14px;width:46px;height:46px;font-size:1.2rem}} @media (max-width:900px){ .reviews-carousel .carousel-track .gitem{width:clamp(240px,44vw,300px)} } @media (max-width:820px){ .free-grid{grid-template-columns:1fr} } @media (max-width:680px){ .car-btn{display:none} .lb-nav{width:42px;height:42px} .reviews-carousel .carousel-track .gitem{width:80vw} /* video testimonials → horizontal swipe on mobile */ .video-grid{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:10px} .video-grid .vcard{flex:0 0 78%;scroll-snap-align:start} .video-grid::-webkit-scrollbar{height:6px} .video-grid::-webkit-scrollbar-thumb{background:var(--gold-deep);border-radius:10px} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .reveal,.hero-title .line-in{opacity:1!important;transform:none!important} .reveal-img{clip-path:none!important} .loader{display:none} .cursor,.cursor-dot{display:none} } /* ========================================================= KOSMETOLOG LP (used by kosmetolog.html only) ========================================================= */ .levers{max-width:900px;margin:clamp(36px,4vw,56px) auto 0;display:flex;flex-direction:column;gap:16px;text-align:left} .lever{display:grid;grid-template-columns:64px 1fr;gap:clamp(16px,2.4vw,28px);align-items:start;padding:clamp(24px,3vw,38px);border-radius:var(--r);background:var(--white);border:1px solid rgba(154,119,43,.22)} .lever-num{font-family:var(--f-disp);font-weight:800;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .lever h3{font-family:var(--f-disp);font-weight:600;font-size:clamp(1.02rem,1.6vw,1.2rem);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;color:var(--text)} .lever p{font-size:1rem;font-weight:300;color:var(--muted);line-height:1.55;margin:0} .lever p+p{margin-top:6px} .lever p b{font-weight:600;color:var(--text)} .case-story-intro a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px;font-weight:600} .case-story-intro{max-width:780px;margin:0 auto 14px;text-align:center;font-size:clamp(1.02rem,1.5vw,1.14rem);color:var(--muted);line-height:1.6} .case-result{max-width:780px;margin:clamp(30px,4vw,46px) auto 0;text-align:center;font-family:var(--f-disp);font-weight:600;font-size:clamp(1.15rem,2vw,1.5rem);color:var(--text)} .faq-sec{background:var(--sand)} .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .faq-item{background:var(--white);border:1px solid rgba(154,119,43,.22);border-radius:var(--r);padding:clamp(26px,3vw,40px)} .faq-item h3{font-family:var(--f-disp);font-weight:600;font-size:1.14rem;margin-bottom:12px;color:var(--text);letter-spacing:-.01em} .faq-item p{font-size:.99rem;font-weight:300;color:var(--muted);line-height:1.6} @media(max-width:860px){.faq-grid{grid-template-columns:1fr}.lever{grid-template-columns:1fr;gap:10px}} /* ========================================================= LEGAL PAGES (privacy / offer / cookies) + footer legal row ========================================================= */ .legal-page{background:var(--cream);min-height:60vh} .legal-wrap{max-width:820px;margin:0 auto;padding-top:clamp(90px,12vw,140px)} .legal-wrap h1{font-family:var(--f-disp);font-weight:700;font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:-.02em;margin-bottom:10px} .legal-date{font-size:.9rem;color:var(--muted);margin-bottom:clamp(28px,4vw,44px)} .legal-wrap h2{font-family:var(--f-disp);font-weight:600;font-size:clamp(1.12rem,2vw,1.4rem);margin:clamp(28px,4vw,40px) 0 14px;letter-spacing:-.01em} .legal-wrap p{font-size:1rem;font-weight:300;color:var(--text);line-height:1.7;margin-bottom:12px} .legal-wrap ul{list-style:none;margin:0 0 14px} .legal-wrap li{position:relative;padding:6px 0 6px 26px;font-size:1rem;font-weight:300;line-height:1.6} .legal-wrap li::before{content:"✦";position:absolute;left:2px;top:9px;color:var(--gold);font-size:.7rem} .legal-wrap a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px} .footer-sub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;border-top:1px solid var(--ink-line);margin-top:clamp(26px,4vw,40px);padding-top:22px;padding-right:76px} .footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:.8rem;letter-spacing:.02em} .footer-legal a{color:var(--muted-light);transition:color .25s;white-space:nowrap} .footer-legal a:hover{opacity:1;color:var(--gold-2)} .footer-legal a+a::before{content:"·";margin-right:12px;color:var(--muted-light);opacity:.45} .footer-fop{font-size:.8rem;color:var(--muted-light);letter-spacing:.02em;white-space:nowrap} @media(max-width:680px){ /* інакше довше імʼя переносить метрику, а коротше лишає в рядку — і число вилітає за край */ .case-head{flex-direction:column;align-items:flex-start;gap:10px} .case-metric{text-align:left} .case-metric b{white-space:nowrap} } @media(max-width:680px){ .footer-sub{flex-direction:column;align-items:center;text-align:center;gap:14px;padding-top:20px;padding-right:0} .footer-legal{flex-direction:column;gap:10px} .footer-legal a+a::before{content:none} } body.legal .nav{background:rgba(11,10,8,.96);backdrop-filter:blur(8px)} /* ========================================================= CASE PAGE (kosmetolog-case.html only) ========================================================= */ .case-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--ink-line);border:1px solid var(--ink-line);border-radius:var(--r);overflow:hidden;margin-top:clamp(30px,4vw,50px)} .case-fact{background:var(--black-2);padding:22px 24px} .case-fact .cf-l{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-light);font-weight:600;margin-bottom:8px} .case-fact .cf-v{font-family:var(--f-disp);font-weight:600;font-size:1.02rem;color:var(--cream);line-height:1.35} .story-block{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,70px);align-items:center;margin-bottom:clamp(44px,6vw,84px)} .story-block.rev{grid-template-columns:.95fr 1.05fr} .story-copy h2{margin-bottom:18px} .story-copy p{font-weight:300;line-height:1.7;margin-bottom:14px;color:var(--text)} .story-copy ul{list-style:none;margin:6px 0 14px} .story-copy li{position:relative;padding:7px 0 7px 26px;font-weight:300;line-height:1.55} .story-copy li::before{content:"—";position:absolute;left:0;color:var(--gold-deep)} .slide-fig{margin:0;position:relative} .slide-fig img{width:100%;height:auto;border-radius:var(--r);border:1px solid rgba(154,119,43,.28);display:block;box-shadow:0 24px 60px -30px rgba(0,0,0,.35)} .slide-fig figcaption{font-size:.85rem;color:var(--muted);margin-top:10px;text-align:center} .timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(30px,4vw,50px)} .tl-item{background:var(--white);border:1px solid rgba(154,119,43,.22);border-radius:var(--r);padding:clamp(20px,2.6vw,32px)} .tl-item .tl-m{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:10px} .tl-item .tl-num{font-family:var(--f-disp);font-weight:800;font-size:clamp(1.25rem,2.2vw,1.8rem);background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px} .tl-item p{font-size:.92rem;font-weight:300;color:var(--muted);line-height:1.55;margin:0} .tl-item.tl-final{background:var(--gold-grad);border:none} .tl-item.tl-final .tl-num{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:var(--black);color:var(--black)} .tl-item.tl-final .tl-m,.tl-item.tl-final p{color:rgba(0,0,0,.72)} .pain-list{list-style:none;margin:14px 0 4px;padding:0} .pain-list li{position:relative;padding:9px 0 9px 24px;font-size:.98rem;font-weight:300;color:var(--muted);border-bottom:1px solid rgba(154,119,43,.16)} .pain-list li:last-child{border-bottom:0} .pain-list li::before{content:"—";position:absolute;left:0;top:9px;color:var(--gold)} .principle{max-width:780px;margin:clamp(34px,4.5vw,56px) auto;padding:clamp(26px,3.4vw,44px);border-radius:var(--r);background:var(--black);color:var(--cream)} .principle p{display:grid;gap:16px;margin:0} .principle .no,.principle .yes{position:relative;padding-left:44px;font-family:var(--f-disp);font-weight:500;font-size:clamp(.98rem,1.7vw,1.18rem);line-height:1.5} /* знаки малюємо самі: емодзі малює ОС власним кольором і вибиває блок із палітри */ .principle .no::before,.principle .yes::before{position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-sans);font-size:.7rem;font-weight:700;line-height:1} .principle .no::before{content:"\2715";border:1px solid rgba(209,35,42,.55);color:var(--red)} .principle .yes::before{content:"\2713";border:1px solid rgba(230,200,121,.55);color:var(--gold-2)} .principle .no{color:#a99e8c} .principle .yes{color:var(--cream)} .quote{max-width:840px;margin:0 auto clamp(22px,3vw,36px);padding:clamp(24px,3.4vw,44px);background:var(--black-2);border:1px solid var(--ink-line);border-left:3px solid var(--gold);border-radius:var(--r)} .quote p{color:#d6ccb8;font-weight:300;line-height:1.75;font-size:1.04rem;margin:0} .quote cite{display:block;margin-top:14px;font-style:normal;font-size:.85rem;color:var(--muted-light);letter-spacing:.06em} @media(max-width:900px){.timeline{grid-template-columns:1fr 1fr}} @media(max-width:860px){.story-block,.story-block.rev{grid-template-columns:1fr}.slide-fig{max-width:440px;margin:0 auto}} @media(max-width:560px){.timeline{grid-template-columns:1fr}}