*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --maroon:#5C2016;--maroon-deep:#3E140D;--coral:#E85B45;--coral-deep:#C6432F;
  --paper:#FAF6EE;--cream:#FFFDF0;
  --ink:#2B1810;--ink-soft:#8A6F61;--ink-faint:#B3A093;
  --line:rgba(43,24,16,.13);
  --serif:'Fraunces',serif;--sans:'Lato',sans-serif;--logo-font:'Playfair Display',serif;
  --sh:0 10px 34px rgba(43,24,16,.08);
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none !important;transition:none !important}}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);overflow-x:hidden;line-height:1.5}
a{color:inherit}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
img{max-width:100%;display:block}

/* ============ SHARED ============ */
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
section{padding:128px 0}
.kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--coral);margin-bottom:20px}
.kicker .dot{width:5px;height:5px;border-radius:50%;background:currentColor}
h2.title{font-family:var(--serif);font-style:italic;font-weight:700;font-size:clamp(2.1rem,3.4vw,3.1rem);line-height:1.18;color:var(--maroon);max-width:640px}
.lead{font-size:17px;color:var(--ink-soft);line-height:1.75;max-width:480px;margin-top:20px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:17px 34px;border-radius:100px;font-family:var(--sans);font-weight:700;font-size:15px;text-decoration:none;border:none;cursor:pointer;transition:transform .18s,box-shadow .18s}
.btn-coral{background:var(--coral);color:var(--cream)}
.btn-coral:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(232,91,69,.35)}
.btn-outline{background:transparent;color:var(--maroon);border:1.5px solid rgba(43,24,16,.22)}
.btn-outline:hover{border-color:var(--maroon);background:rgba(43,24,16,.04)}
.btn-cream{background:var(--cream);color:var(--maroon-deep)}
.btn-cream:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.flourish{display:block}

/* ============ NAV ============ */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:76px;background:rgba(250,246,238,.92);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
nav.scrolled{border-color:var(--line);box-shadow:0 6px 24px rgba(43,24,16,.06)}
.nav-logo{font-family:var(--logo-font);font-style:italic;font-weight:700;font-size:23px;text-decoration:none;color:var(--maroon)}
.nav-logo .v{color:var(--coral)}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{text-decoration:none;color:var(--ink-soft);font-size:14.5px;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--coral)}
.nav-cta{background:var(--maroon);color:var(--cream);padding:12px 26px;border-radius:100px;font-size:14px;font-weight:700;text-decoration:none;transition:background .2s,transform .15s}
.nav-cta:hover{background:var(--coral);transform:translateY(-1px)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.hamburger span{width:22px;height:2px;background:var(--maroon);display:block;border-radius:2px}

/* ============ STICKY CTA ============ */
.sticky-btn{position:fixed;bottom:26px;right:26px;z-index:99;background:var(--maroon);color:var(--cream);padding:15px 26px;border-radius:100px;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 10px 30px rgba(43,24,16,.35);transition:transform .2s,background .2s;display:flex;align-items:center;gap:9px}
.sticky-btn:hover{transform:translateY(-3px);background:var(--coral)}

/* ============ HERO ============ */
.hero{position:relative;min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:56px;padding:148px 40px 90px;overflow:hidden;background:var(--paper)}
.hero-watermark{position:absolute;font-family:var(--serif);font-style:italic;font-weight:700;font-size:56vw;line-height:1;color:rgba(92,32,22,.045);top:-14vw;left:-12vw;pointer-events:none;user-select:none}
.hero-copy{position:relative;z-index:2}
.hero h1{font-family:var(--serif);font-style:italic;font-weight:700;font-size:clamp(2.6rem,4.6vw,4.1rem);color:var(--maroon);line-height:1.1;margin-bottom:22px}
.hero h1 .mark{color:var(--coral)}
.hero-sub{color:var(--ink-soft);font-size:17.5px;line-height:1.75;max-width:460px;margin-bottom:14px}
.dedication{display:flex;align-items:center;gap:10px;min-height:26px;margin-bottom:34px}
.dedication .to{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--coral)}
.dedication .caret{display:inline-block;width:1.5px;height:18px;background:var(--coral);animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:56px}
.hero-facts{display:flex;gap:44px;padding-top:38px;border-top:1px solid var(--line)}
.fact-n{font-family:var(--serif);font-style:italic;font-weight:700;font-size:1.9rem;color:var(--maroon);line-height:1}
.fact-l{font-size:12.5px;color:var(--ink-soft);margin-top:7px;max-width:150px;line-height:1.4}

.hero-visual{position:relative;z-index:2;display:flex;justify-content:center}
.hero-photo-frame{position:relative;width:100%;max-width:380px;perspective:1200px}
.hero-photo{width:100%;aspect-ratio:4/5;border-radius:4px;overflow:hidden;box-shadow:0 30px 70px rgba(43,24,16,.28);transition:transform .25s ease;transform-style:preserve-3d;will-change:transform}
.hero-photo img,.hero-photo video{width:100%;height:100%;object-fit:cover}
.hero-tag{position:absolute;left:-30px;bottom:36px;background:var(--maroon);color:var(--cream);padding:16px 20px;border-radius:6px;box-shadow:0 16px 36px rgba(43,24,16,.3);max-width:210px;font-size:12.5px;line-height:1.55}
.hero-tag b{display:block;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--coral);margin-bottom:3px;font-weight:700}
.hero-corner{position:absolute;width:15px;height:15px;opacity:.55}
.hero-corner::before,.hero-corner::after{content:'';position:absolute;background:var(--coral)}
.hero-corner::before{width:15px;height:1.4px;top:7px}
.hero-corner::after{width:1.4px;height:15px;left:7px}
.hero-corner.a{top:120px;right:8%}
.hero-corner.b{bottom:70px;left:2%}

/* ============ MARQUEE ============ */
.marquee{background:var(--coral);padding:16px 0;overflow:hidden}
.marquee-track{display:flex;gap:14px;animation:mq 30s linear infinite;width:max-content}
.mq-item{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.04em;color:var(--maroon-deep);white-space:nowrap;border:1px solid rgba(62,20,13,.28);border-radius:100px;padding:9px 18px}
.mq-dot{width:4px;height:4px;border-radius:50%;background:var(--maroon-deep);flex-shrink:0}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ PROCESS ============ */
.process{background:var(--paper)}
.proc-steps{display:flex;flex-direction:column;position:relative;padding-left:8px}
.proc-steps::before{content:'';position:absolute;left:19px;top:10px;bottom:10px;width:1px;background:var(--line)}
.proc-step{display:flex;gap:26px;padding:0 0 44px;position:relative}
.proc-step:last-child{padding-bottom:0}
.proc-num{font-family:var(--serif);font-style:italic;font-weight:600;font-size:16px;color:var(--coral);width:40px;height:40px;border-radius:50%;background:var(--cream);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}
.proc-step h3{font-size:17.5px;font-weight:700;color:var(--maroon);margin-bottom:7px;padding-top:6px}
.proc-step p{font-size:14.5px;color:var(--ink-soft);line-height:1.65;max-width:380px}

.proc-steps-wide{display:grid;grid-template-columns:repeat(3,1fr);gap:52px;margin-top:60px;padding-left:0}
.proc-steps-wide::before{left:60px;right:60px;top:20px;bottom:auto;width:auto;height:1px}
.proc-steps-wide .proc-step{flex-direction:column;gap:16px;padding-bottom:0}
.proc-steps-wide .proc-step h3{padding-top:0}
.proc-steps-wide .proc-step p{max-width:none}

/* ============ VIDEO REVIEWS ============ */
.reviews{background:var(--maroon-deep);color:var(--cream)}
.reviews .kicker{color:var(--coral)}
.reviews .title{color:var(--cream)}
.rev-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.rev-arrows{display:flex;gap:10px}
.rev-arrow{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,253,240,.25);background:transparent;color:var(--cream);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s}
.rev-arrow:hover{background:var(--coral);border-color:var(--coral)}
.rev-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:56px 4px 6px;scrollbar-width:none}
.rev-track::-webkit-scrollbar{display:none}
.rev-dots{display:flex;gap:8px;margin-top:6px}
.rev-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,253,240,.25);border:none;padding:0;cursor:pointer;transition:background .2s,transform .2s}
.rev-dot.active{background:var(--coral);transform:scale(1.3)}

.video-card{flex:0 0 300px;width:300px;aspect-ratio:3/4.2;border-radius:10px;overflow:hidden;background:#1a0f0a;position:relative;cursor:pointer;scroll-snap-align:start;isolation:isolate}
.vc-video{width:100%;height:100%;object-fit:cover;display:block;background:var(--maroon-deep)}
.vc-mute{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(255,253,240,.14);backdrop-filter:blur(10px);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .25s;font-size:14px}
.video-card.playing .vc-mute{opacity:1}
.vc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);width:60px;height:60px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;z-index:2;transition:opacity .3s,transform .3s;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.video-card:hover .vc-play{transform:translate(-50%,-50%) scale(1.06)}
.vc-play svg{width:20px;height:20px;fill:var(--coral);margin-left:3px}
.video-card.playing .vc-play{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.8)}
.vc-caption{position:absolute;bottom:0;left:0;right:0;padding:18px;z-index:2;background:linear-gradient(to top,rgba(26,15,10,.85),transparent)}
.vc-name{color:var(--cream);font-size:13.5px;font-weight:700}
.vc-role{color:rgba(255,253,240,.6);font-size:11.5px;margin-top:2px}
.vc-progress{position:absolute;top:0;left:0;height:2.5px;background:var(--coral);z-index:2;width:0%}

/* ============ SHOWCASE ============ */
.showcase{background:var(--paper)}
.sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center}
.sc-photo{position:relative;border-radius:4px;overflow:hidden;box-shadow:var(--sh);aspect-ratio:1/1}
.sc-photo img,.sc-photo video{width:100%;height:100%;object-fit:cover}
.sc-feats{display:flex;flex-direction:column;gap:24px;margin:30px 0 38px}
.sc-feat{display:flex;gap:18px;align-items:flex-start}
.sc-feat-mark{font-family:var(--serif);font-style:italic;font-weight:700;font-size:20px;color:var(--coral);width:30px;flex-shrink:0}
.sc-feat h4{font-size:15.5px;font-weight:700;color:var(--maroon);margin-bottom:4px}
.sc-feat p{font-size:13.8px;color:var(--ink-soft);line-height:1.6;max-width:360px}

/* ============ CTA ============ */
.cta{background:var(--maroon);position:relative;overflow:hidden;text-align:center}
.cta::before{content:'';position:absolute;top:-220px;left:50%;transform:translateX(-50%);width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(232,91,69,.14),transparent 70%);pointer-events:none}
.cta-in{position:relative;z-index:2;max-width:600px;margin:0 auto}
.cta h2{font-family:var(--serif);font-style:italic;font-weight:700;font-size:clamp(2rem,4vw,3.2rem);color:var(--cream);margin-bottom:18px;line-height:1.2}
.cta p{color:rgba(255,253,240,.62);font-size:16.5px;line-height:1.7;margin-bottom:36px}
.cta-note{color:rgba(255,253,240,.4);font-size:13px;margin-top:28px}

/* ============ FOOTER ============ */
footer{background:var(--maroon-deep);padding:64px 40px 40px;text-align:center}
.foot-logo{font-family:var(--logo-font);font-style:italic;font-weight:700;font-size:24px;color:var(--cream);margin-bottom:10px}
.foot-logo .v{color:var(--coral)}
.foot-tag{color:rgba(255,253,240,.45);font-size:13.5px;font-style:italic;font-family:var(--serif);margin-bottom:30px}
.foot-links{display:flex;justify-content:center;gap:26px;padding-bottom:26px;border-bottom:1px solid rgba(255,253,240,.08);margin-bottom:22px;flex-wrap:wrap}
.foot-links a{color:rgba(255,253,240,.55);text-decoration:none;font-size:13.5px;transition:color .2s}
.foot-links a:hover{color:var(--coral)}
footer p{color:rgba(255,253,240,.32);font-size:12.5px;line-height:1.9}

/* ============ MOBILE ============ */
@media(max-width:980px){
  .wrap{padding:0 22px}
  section{padding:88px 0}
  nav{padding:0 18px}
  .nav-links,.nav-cta{display:none}
  .hamburger{display:flex}
  nav.mob-open .nav-links{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--paper);padding:22px;gap:18px;border-bottom:1px solid var(--line)}
  nav.mob-open .nav-cta{display:block;text-align:center;margin:6px 22px 10px}
  .hero{grid-template-columns:1fr;padding:112px 22px 64px;gap:52px}
  .hero-visual{order:-1}
  .hero-photo-frame{max-width:300px}
  .hero-tag{left:-14px;bottom:-20px;max-width:170px;padding:13px 16px}
  .hero-facts{gap:26px;flex-wrap:wrap}
  .sc-grid{grid-template-columns:1fr;gap:40px}
  .proc-steps-wide{grid-template-columns:1fr;gap:0;padding-left:8px;margin-top:40px}
  .proc-steps-wide::before{left:19px;right:auto;top:10px;bottom:10px;width:1px;height:auto}
  .proc-steps-wide .proc-step{flex-direction:row;gap:26px;padding-bottom:44px}
  .proc-steps-wide .proc-step:last-child{padding-bottom:0}
  .proc-steps-wide .proc-step h3{padding-top:6px}
  .rev-card{flex:0 0 300px}
  footer{padding:52px 22px 32px}
}
@media(max-width:560px){
  .hero-facts{gap:22px}
  .fact-n{font-size:1.6rem}
}

/* ============ VIDEO PLAYBACK STATES ============ */
/* Videos are real .mp4 files served over HTTP so the browser can stream them
   with range requests. These rules cover the loading / failed states so a card
   never renders as an empty black box. */

/* Poster stays visible until the first frame is decoded. */
video{background-color:var(--maroon-deep);background-size:cover;background-position:center}

/* Loop videos keep their poster visible until the first frame is decoded; the
   browser swaps it automatically, so no opacity juggling is needed here. */

/* Buffering spinner on testimonial cards. */
.vc-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;border:2.5px solid rgba(255,253,240,.25);border-top-color:var(--cream);z-index:3;opacity:0;pointer-events:none;transition:opacity .2s}
.video-card.is-buffering .vc-spinner{opacity:1;animation:vcSpin .7s linear infinite}
.video-card.is-buffering .vc-play{opacity:0}
@keyframes vcSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.video-card.is-buffering .vc-spinner{animation:none}}

/* A card whose video file is missing or unplayable: keep the poster, drop the
   play affordance, and say so rather than looking broken. */
.video-card.is-unavailable{cursor:default}
.video-card.is-unavailable .vc-play,.video-card.is-unavailable .vc-mute,.video-card.is-unavailable .vc-spinner{display:none}
.vc-note{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;display:none;max-width:78%;text-align:center;padding:10px 14px;border-radius:8px;background:rgba(26,15,10,.72);backdrop-filter:blur(8px);color:var(--cream);font-size:12px;line-height:1.45}
.video-card.is-unavailable .vc-note{display:block}

/* Mute button: also reachable by keyboard, so give it a visible resting state
   on focus even when the card is not playing. */
.vc-mute:focus-visible{opacity:1}

/* Cards are clickable; make that reachable without a mouse. */
.video-card:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* ============ ЗНАЧОК ПУНКТА В «ПРИМЕРАХ РАБОТ» ============ */
/* Раньше пункты отмечались символом ✳ — на телефонах он подменялся
   цветным эмодзи (зелёная звёздочка) и игнорировал цвет текста. Теперь это
   встроенный SVG-ромб на currentColor: одинаковый во всех браузерах. */
.sc-feat-mark{display:flex;justify-content:flex-start;padding-top:5px;line-height:0}
.sc-feat-mark svg{display:block}