https://pastein.ru/t/spM
Загрузка данных
<!DOCTYPE html>
<html lang="ru" style="margin:0;padding:0;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Фотограф Tertix & Khityaev</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
(function(){ var s = document.createElement('style'); s.textContent = `
:root{ --bg1:#000000; --bg2:#1a0000; --bg3:#3b0000; --text:#f8fafc; --muted:#b9b9b9; --gold:#fcd34d; --gold-dark:#c49a2c; --gold-soft:rgba(252,211,77,.15); --border:rgba(255,255,255,.12); }
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top: 80px;}
body{ margin:0; font-family:'Inter',sans-serif; color:var(--text); background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 50%,var(--bg3) 100%); min-height:100vh; overflow-x:hidden; }
.font-display{font-family:'Playfair Display',serif;letter-spacing:-.01em}
.font-serif{font-family:'Cormorant Garamond',serif}
.grad-text{ background:linear-gradient(135deg,#ffffff 0%,#fef3c7 45%,#fcd34d 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gold-frame{ border:1px solid var(--gold); background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(252,211,77,.05)); box-shadow:0 0 0 4px var(--gold-soft), 0 10px 40px rgba(252,211,77,.15); position:relative; border-radius:20px; padding:2.5rem 2rem; }
.save-badge{ position:absolute; top:-15px; right:-15px; background:linear-gradient(135deg,#fcd34d,#c49a2c); color:#000; font-weight:800; font-size:1rem; padding:.6rem 1.2rem; border-radius:50px; box-shadow:0 4px 12px rgba(252,211,77,.35); transform:rotate(8deg); }
.reveal{opacity:0;transform:translateY(30px);transition:all .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.hero-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: url("https://i.postimg.cc/4NWfb83f/Retus'-lica-i-glaz-(1).jpg") center / cover no-repeat; z-index: -1; transition: filter 1.2s ease, opacity 1.2s ease; filter: blur(0px); opacity: 1; }
.hero-bg.blurred { filter: blur(18px) brightness(0.6); opacity: 0.7; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.85) 100%); }
.action-btn{ font-weight:600; background:linear-gradient(135deg,rgba(0,0,0,0.25),rgba(60,40,0,0.35)); border:1px solid transparent; border-image: linear-gradient(135deg, #fcd34d, #c49a2c) 1; color:var(--text) !important; padding:10px 20px; border-radius:10px; backdrop-filter: blur(8px); transition:all .3s ease; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; text-align:center; }
.action-btn:hover{ transform:translateY(-2px); box-shadow:0 0 15px rgba(252,211,77,.4); background:linear-gradient(135deg,rgba(0,0,0,0.4),rgba(70,50,0,0.5)); }
.divider{ color:var(--gold); font-size:1.2rem; line-height:1; user-select:none; margin: 0 0.5rem; }
.feature-card{ position:relative; overflow:hidden; transition:all .5s ease; background:rgba(255,255,255,.06); border:1px solid var(--border); backdrop-filter:blur(10px); border-radius:20px; padding:2rem 1.5rem; text-align:center; height:100%; }
.feature-card:hover{ transform:translateY(-6px); border-color:var(--gold); box-shadow:0 12px 40px rgba(252,211,77,.12); }
.feature-card .icon-wrap{ width:80px;height:80px; margin:0 auto 1.5rem; display:flex;align-items:center;justify-content:center; color:var(--gold); }
.feature-card h4{ font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700; margin-bottom:1rem; color:var(--text); }
.feature-card p{ color:var(--muted); line-height:1.6; font-size:1rem; }
.carousel-wrap{ width:100%; overflow:hidden; position:relative; border-radius:20px; }
.carousel-track{ display:flex; transition:transform .8s cubic-bezier(.22,1,.36,1); }
.carousel-slide{ min-width:100%; padding:0; display:flex; justify-content:center; align-items:center; }
.photo-frame{ width:100%; max-width:950px; max-height:85vh; border-radius:0; box-shadow:none; background:transparent; overflow:hidden; margin:0 auto; display:flex; justify-content:center; align-items:center; }
.photo-frame img{ max-width:100%; max-height:80vh; width:auto; height:auto; object-fit:contain; object-position:center; background:transparent; loading="lazy"; referrerpolicy="no-referrer"; border-radius:16px; }
.carousel-btn{ position:absolute; top:50%; transform:translateY(-50%); width:52px;height:52px; border-radius:50%; background:rgba(0,0,0,.5); backdrop-filter:blur(8px); border:1px solid var(--border); color:var(--text); cursor:pointer; display:flex;align-items:center;justify-content:center; transition:all .3s ease; z-index:5; }
.carousel-btn:hover{ background:var(--gold); color:#000; border-color:var(--gold); }
.carousel-btn.prev{ left:16px; }
.carousel-btn.next{ right:16px; }
.carousel-dots{ display:flex; justify-content:center; gap:12px; margin-top:24px; }
.dot{ width:12px;height:12px;border-radius:50%; background:rgba(255,255,255,.2); transition:all .3s ease;cursor:pointer; }
.dot.active{background:var(--gold);transform:scale(1.3);box-shadow:0 0 10px rgba(252,211,77,.5);}
.price-card{ background:rgba(255,255,255,.06);backdrop-filter:blur(10px); border-radius:20px; padding:2rem; height:100%; border:1px solid var(--border); }
.price-card.popular{ border-color:var(--gold); box-shadow:0 8px 30px rgba(252,211,77,.15); }
.btn-primary{ width:100%;padding:15px;border:none;border-radius:12px; background:linear-gradient(135deg,#2b0000,#4d0000);color:var(--text); font-weight:600;font-size:15px;cursor:pointer;transition:all .3s ease;letter-spacing:.02em; border:1px solid rgba(255,255,255,.1); }
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.4), 0 0 15px rgba(252,211,77,.2);}
.tg-icon{ display:flex;align-items:center;justify-content:center; width:44px;height:44px; border-radius:50%; background:rgba(255,255,255,.08); color:var(--muted); transition:all .3s ease; text-decoration:none; }
.tg-icon:hover{ color:var(--gold); background:rgba(252,211,77,.12); transform:scale(1.1); box-shadow:0 0 12px rgba(252,211,77,.3); }
.nav-link{transition:all .2s ease; text-decoration: none; color: inherit;}
.nav-link:hover{color:var(--gold);}
.order-info{ margin-top:3rem; padding:2rem; border-radius:20px; background:rgba(255,255,255,.04); border:1px solid rgba(252,211,77,.2); text-align:center; }
.arrow{ color:var(--gold); font-size:2rem; font-weight:bold; }
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px;}
`; document.head.appendChild(s); })();
</script>
<style>
*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.fixed{position:fixed}.relative{position:relative}.left-0{left:0px}.right-0{right:0px}.top-0{top:0px}.z-10{z-index:10}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:0.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-1{margin-top:0.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-3{margin-top:0.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.min-h-[90vh]{min-height:90vh}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.border-t{border-top-width:1px}.p-8{padding:2rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-12{padding-bottom:3rem}.pt-24{padding-top:6rem}.text-left{text-align:left}.text-center{text-align:center}.font-serif{font-family:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-[1.05]{line-height:1.05}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.tracking-[0.25em]{letter-spacing:0.25em}.tracking-[0.2em]{letter-spacing:0.2em}.tracking-[0.3em]{letter-spacing:0.3em}@media (min-width: 640px){.sm\:block{display:block}.sm\:inline{display:inline}.sm\:w-auto{width:auto}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width: 768px){.md\:mt-14{margin-top:3.5rem}.md\:flex{display:flex}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.md\:flex-row{flex-direction:row}.md\:p-10{padding:2.5rem}.md\:text-left{text-align:left}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-7xl{font-size:4.5rem;line-height:1}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width: 1024px){.lg\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.lg\:text-7xl{font-size:4.5rem;line-height:1}.lg\:text-8xl{font-size:6rem;line-height:1}}
</style>
</head>
<body>
<!-- Фон-изображение -->
<div class="hero-bg" id="heroBg">
<div class="hero-overlay"></div>
</div>
<!-- Шапка -->
<header class="fixed top-0 left-0 right-0 z-50 px-5 py-4 flex items-center justify-between" style="background:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,0));backdrop-filter:blur(8px)">
<div class="flex items-center gap-3">
<a href="https://t.me/BopoH_B_Hebe" target="_blank" class="tg-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2L11 13"></path><path d="M22 2l-7 20-4-9-9-4 20-7z"></path></svg>
</a>
</div>
<!-- Меню в центре -->
<nav class="hidden md:flex items-center gap-8 text-sm" style="color:var(--muted)">
<a href="#about" class="nav-link">О нас</a>
<a href="#features" class="nav-link">Преимущества</a>
<a href="#gallery" class="nav-link">Работы</a>
<a href="#prices" class="nav-link">Цены</a>
</nav>
<div></div>
</header>
<!-- Герой -->
<section class="min-h-[90vh] flex flex-col items-center justify-center px-6 pt-24 pb-12 text-center relative z-10">
<p class="text-sm tracking-[0.3em] uppercase mb-6" style="color:var(--gold)">Надежно & Качественно</p>
<h1 class="font-display text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold grad-text leading-[1.05] max-w-4xl"> Запечатлим каждое<br>мгновение </h1>
<div class="mt-10 md:mt-14">
<h2 class="font-display text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-black grad-text leading-none"> Tertix <span class="font-serif italic font-normal">&</span> Khityaev </h2>
<div class="mt-5 flex items-center justify-center gap-3 flex-wrap">
<a href="tel:+79127511376" class="text-lg md:text-xl font-medium nav-link" style="color:var(--text);text-decoration:none"> +7 (912) 751-13-76 </a>
<span style="color:var(--gold)">•</span>
<a href="#prices" class="text-sm font-medium nav-link" style="color:var(--muted);text-decoration:none;text-transform:uppercase;letter-spacing:.15em">Цены</a>
</div>
<!-- Кнопки с адаптивными разделителями -->
<div class="mt-8 flex flex-col sm:flex-row flex-wrap items-center justify-center gap-4 sm:gap-3">
<a href="#gallery" class="action-btn w-full sm:w-auto text-center">Смотреть работы</a>
<span class="divider hidden sm:inline">|</span>
<a href="https://profi.ru/profile/TerentyevTA/" target="_blank" class="action-btn w-full sm:w-auto text-center">Связаться в Profi.ru</a>
<span class="divider hidden sm:inline">|</span>
<a href="#prices" class="action-btn w-full sm:w-auto text-center">Выбрать тариф</a>
</div>
</div>
</section>
<!-- О нас -->
<section id="about" class="py-8 px-6 max-w-4xl mx-auto reveal relative z-10">
<p class="text-sm tracking-[0.25em] uppercase mb-4 text-center" style="color:var(--gold)">О нас</p>
<p class="font-serif text-2xl md:text-3xl leading-relaxed text-center" style="color:var(--text)"> Мы — <strong>Тихон и Женя</strong>, ребята с большим опытом создания классных и запоминающихся фотографий с любых мероприятий, праздников и историй из Вашей жизни. </p>
<p class="mt-6 text-lg leading-relaxed text-center" style="color:var(--muted)"> Почему выбирают нас? <strong class="font-display" style="color:var(--text)">Потому что мы работаем вдвоем.</strong> </p>
<div class="gold-frame rounded-2xl p-8 md:p-10 mt-10 text-center">
<div class="save-badge">Экономия 100%</div>
<p class="font-display text-2xl md:text-3xl font-bold" style="color:var(--text)"> Во время съемки всегда работают<br class="hidden sm:block"> <span style="color:var(--gold)">два фотографа</span>, а стоимость<br class="hidden sm:block"> остается как за одного! </p>
</div>
<p class="mt-10 text-lg leading-relaxed text-center" style="color:var(--muted)"> Пока один из нас занимается основными кадрами и создает эстетику, которую Вы будете пересматривать не один год, второй ловит эмоции, неожиданные моменты и детали, которые легко пропустить. </p>
<p class="mt-4 font-serif text-2xl md:text-3xl text-center leading-snug" style="color:var(--text)"> Как итог — у вас получаются не просто памятные фото,<br>а <em>незабываемая история «того самого» дня.</em> </p>
<p class="mt-10 text-center font-display text-xl" style="color:var(--gold)"> Будем рады познакомиться с Вами и обсудить любые идеи для съемки! </p>
</section>
<!-- Преимущества -->
<section id="features" class="py-16 px-6 relative z-10">
<div class="max-w-7xl mx-auto">
<p class="text-sm tracking-[0.25em] uppercase mb-4 text-center reveal" style="color:var(--gold)">Почему мы</p>
<h3 class="font-display text-4xl md:text-5xl font-bold text-center grad-text reveal mb-12">Наши преимущества</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="feature-card reveal">
<div class="icon-wrap">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14,2 14,8 20,8"></polyline></svg>
</div>
<h4>2 по цене 1</h4>
<p>Два фотографа на съемке — вдвое больше ракурсов, деталей и живых эмоций.</p>
</div>
<div class="feature-card reveal">
<div class="icon-wrap">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12,6 12,12 16,14"></polyline></svg>
</div>
<h4>Готовность за 2–3 дня</h4>
<p>Обрабатываем фото быстро и качественно — вы получаете результат уже на следующей неделе.</p>
</div>
<div class="feature-card reveal">
<div class="icon-wrap">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
</div>
<h4>Разумные цены</h4>
<p>Пока многие просят 5–10 тысяч за час и выдают фото как с телефона, мы делаем вдвое дешевле.</p>
</div>
<div class="feature-card reveal">
<div class="icon-wrap">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
</div>
<h4>Полный пакет</h4>
<p>Все кадры проходят авторскую обработку, плюс вы получаете абсолютно все исходные снимки.</p>
</div>
</div>
</div>
</section>
<!-- Галерея -->
<section id="gallery" class="py-16 px-6 relative z-10">
<div class="max-w-6xl mx-auto mb-10 text-center reveal">
<p class="text-sm tracking-[0.25em] uppercase mb-4" style="color:var(--gold)">Портфолио</p>
<h3 class="font-display text-4xl md:text-5xl font-bold grad-text">Наши работы</h3>
<p class="mt-4" style="color:var(--muted)">Свайпайте влево/вправо или используйте стрелки для просмотра</p>
</div>
<div class="max-w-6xl mx-auto">
<div class="carousel-wrap" id="carousel">
<button class="carousel-btn prev" id="prevBtn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"></polyline></svg>
</button>
<div class="carousel-track" id="carouselTrack">
<div class="carousel-slide"><div class="photo-frame"><img src="https://i.postimg.cc/4NWfb83f/Retus'-lica-i-glaz-(1).jpg" alt="Ретушь портрета"></div></div>
<div class="carousel-slide"><div class="photo-frame"><img src="https://i.postimg.cc/0Qv3Ms7s/Detal'naa-retus'-foto-(1).jpg" alt="Детальная обработка"></div></div>
<div class="carousel-slide"><div class="photo-frame"><img src="https://i.postimg.cc/63hPCmhG/Studijnyj-portret-s-morem.jpg" alt="Студийный портрет с морем"></div></div>
<div class="carousel-slide"><div class="photo-frame"><img src="https://i.postimg.cc/Y9xPQsxp/Studijnyj-portret-s-morem-(2)-(1).jpg" alt="Студийный портрет вариант 2"></div></div>
<div class="carousel-slide"><div class="photo-frame"><img src="https://i.postimg.cc/VNt8XQg3/11000-4.png" alt="Работа 11000-4"></div></div>
<div class="carousel-slide"><div class="photo-frame"><img src="https://i.postimg.cc/6QZXCJcF/A2.png" alt="Работа A2"></div></div>
<div class="carousel-slide"><div class="photo-frame"><img src="https://i.postimg.cc/xdm2LD5h/A4.png" alt="Работа A4"></div></div>
<div class="carousel-slide"><div class="photo-frame"><img src="https://i.postimg.cc/52TJHN5W/A9.png" alt="Работа A9"></div></div>
</div>
<button class="carousel-btn next" id="nextBtn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
</button>
</div>
<div class="carousel-dots" id="carouselDots"></div>
</div>
</section>
<!-- Цены -->
<section id="prices" class="py-20 px-6 relative z-10">
<div class="max-w-6xl mx-auto">
<p class="text-sm tracking-[0.25em] uppercase mb-4 text-center reveal" style="color:var(--gold)">Стоимость</p>
<h3 class="font-display text-4xl md:text-5xl font-bold text-center grad-text reveal">Тарифы и услуги</h3>
<p class="mt-4 text-center reveal" style="color:var(--muted)">Информация по пакетам услуг</p>
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="price-card reveal">
<p class="text-sm tracking-[0.2em] uppercase mb-2" style="color:var(--gold)">Легкий старт</p>
<div class="font-display text-6xl font-black my-4 grad-text">1 час</div>
<div class="font-serif text-3xl font-semibold mb-6" style="color:var(--text)">3 700 ₽</div>
<ul class="text-left space-y-2 text-sm mb-8" style="color:var(--muted)">
<li>✓ 2 фотографа на месте</li>
<li>✓ от 15 обработанных фото</li>
<li>✓ все исходные снимки</li>
<li>✓ готово за 2–3 дня</li>
</ul>
</div>
<div class="price-card reveal popular">
<div class="inline-block px-3 py-1 rounded-full text-xs font-semibold mb-2" style="background:var(--gold-soft);color:var(--gold)">Популярный</div>
<p class="text-sm tracking-[0.2em] uppercase mb-2" style="color:var(--gold)">Стандарт</p>
<div class="font-display text-6xl font-black my-4 grad-text">2 часа</div>
<div class="font-serif text-3xl font-semibold mb-6" style="color:var(--text)">7 200 ₽</div>
<ul class="text-left space-y-2 text-sm mb-8" style="color:var(--muted)">
<li>✓ 2 фотографа на месте</li>
<li>✓ от 30 обработанных фото</li>
<li>✓ все исходные снимки</li>
<li>✓ готово за 2–3 дня</li>
</ul>
</div>
<div class="price-card reveal">
<p class="text-sm tracking-[0.2em] uppercase mb-2" style="color:var(--gold)">Премиум</p>
<div class="font-display text-6xl font-black my-4 grad-text">3 часа</div>
<div class="font-serif text-3xl font-semibold mb-6" style="color:var(--text)">10 500 ₽</div>
<ul class="text-left space-y-2 text-sm mb-8" style="color:var(--muted)">
<li>✓ 2 фотографа на месте</li>
<li>✓ от 40 обработанных фото</li>
<li>✓ все исходные снимки</li>
<li>✓ готово за 2–3 дня</li>
</ul>
</div>
</div>
<div class="order-info reveal">
<p class="font-serif text-xl md:text-2xl" style="color:var(--text)"> Любой тариф можно <span style="color:var(--gold)">дополнить</span> под ваши нужды </p>
<p class="mt-3" style="color:var(--muted)">Дополнительные часы — 3 000 ₽ / час · Печать фотоальбомов — от 5 000 ₽ · Выезд за город — обсуждается индивидуально</p>
<div class="mt-5 flex flex-wrap items-center justify-center gap-4">
<a href="tel:+79127511376" class="action-btn">Позвонить +7 (912) 751-13-76</a>
<span class="divider">|</span>
<a href="https://t.me/BopoH_B_Hebe" target="_blank" class="action-btn">Написать в Telegram</a>
<span class="divider">|</span>
<a href="https://profi.ru/profile/TerentyevTA/" target="_blank" class="action-btn">Profi.ru</a>
</div>
</div>
</div>
</section>
<!-- Подвал -->
<footer class="py-8 px-6 relative z-10 border-t" style="border-color:var(--border)">
<div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
<div class="text-center md:text-left">
<p class="font-display text-xl grad-text font-bold">Tertix & Khityaev</p>
<p class="text-sm mt-1" style="color:var(--muted)">Фотография с душой · © 2026</p>
</div>
<div class="flex items-center gap-4">
<a href="https://t.me/BopoH_B_Hebe" target="_blank" class="tg-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2L11 13"></path><path d="M22 2l-7 20-4-9-9-4 20-7z"></path></svg>
</a>
<a href="tel:+79127511376" class="tg-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
</a>
</div>
</div>
</footer>
<!-- Скрипты -->
<script>
(function(){
// Анимация появления блоков при прокрутке
var reveals = document.querySelectorAll('.reveal');
var io = new IntersectionObserver(function(entries){
entries.forEach(function(e){
if(e.isIntersecting){
e.target.classList.add('in');
io.unobserve(e.target);
}
});
},{threshold:.12});
reveals.forEach(function(el){ io.observe(el); });
// Эффект размытия фона при прокрутке
var heroBg = document.getElementById('heroBg');
window.addEventListener('scroll', function(){
if(window.scrollY > window.innerHeight * 0.4) heroBg.classList.add('blurred');
else heroBg.classList.remove('blurred');
});
// Карусель: автоматическое создание точек по количеству фото
var track = document.getElementById('carouselTrack');
var slides = track.querySelectorAll('.carousel-slide');
var dotsWrap = document.getElementById('carouselDots');
var currentIndex = 0;
function goTo(index){
if(index < 0) index = slides.length - 1;
if(index >= slides.length) index = 0;
currentIndex = index;
track.style.transform = 'translateX(-' + (index * 100) + '%)';
updateDots();
}
function updateDots(){
var dots = dotsWrap.querySelectorAll('.dot');
dots.forEach(function(d,i){
d.classList.toggle('active', i === currentIndex);
});
}
// Создаем точки под каждое фото
slides.forEach(function(_,i){
var d = document.createElement('div');
d.className = 'dot' + (i === 0 ? ' active' : '');
d.addEventListener('click', function(){ goTo(i); });
dotsWrap.appendChild(d);
});
// Кнопки навигации
document.getElementById('prevBtn').addEventListener('click', function(){ goTo(currentIndex - 1); });
document.getElementById('nextBtn').addEventListener('click', function(){ goTo(currentIndex + 1); });
// Поддержка свайпа на мобильных
var startX = 0;
track.addEventListener('touchstart', function(e){ startX = e.touches[0].clientX; }, {passive:true});
track.addEventListener('touchend', function(e){
var endX = e.changedTouches[0].clientX;
if(startX - endX > 50) goTo(currentIndex + 1);
if(endX - startX > 50) goTo(currentIndex - 1);
}, {passive:true});
})();
</script>
</body>
</html>