@layer reset, base, components, responsive, motion;
@layer reset {
  *,*::before,*::after {box-sizing:border-box}
  body,h1,h2,h3,p {margin:0}
  img {max-width:100%;display:block}
  button,a {-webkit-tap-highlight-color:transparent}
  button {font:inherit}
}
@layer base {
  :root {--bg:#101114;--surface:#181b20;--surface-high:#20242b;--text:#f3f2ee;--muted:#b7bcc5;--line:rgba(222,230,242,.16);--radius:6px;--gutter:clamp(20px,5vw,80px);--section-gap:128px;color-scheme:dark;font-family:'Segoe UI',Arial,sans-serif;font-synthesis:none;font-size:16px}
  html {scroll-behavior:smooth;scroll-padding-top:32px}
  body {background:var(--bg);color:var(--text);line-height:1.6;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;isolation:isolate}
  main {position:relative;z-index:1}
  ::selection {background:#c4d1df;color:#101114}
  a {color:inherit;text-decoration:none}
  button {color:inherit}
  a,button,[role=slider] {touch-action:manipulation}
  :focus-visible {outline:2px solid #e2ebff;outline-offset:6px}
  .container {width:min(calc(100% - 2*var(--gutter)),1200px);margin-inline:auto}
  .section {position:relative;padding:0 0 var(--section-gap)}
  h1,h2,h3 {font-weight:500;line-height:1.12;letter-spacing:-.045em}
  h2 {font-size:clamp(2rem,3.5vw,3.125rem)}
  .sr-only {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .skip-link {position:fixed;z-index:20;top:12px;left:12px;transform:translateY(-200%);background:var(--text);color:var(--bg);padding:12px 20px}
  .skip-link:focus {transform:none}
}
@layer components {
  .hero {position:relative;isolation:isolate;min-height:760px;display:grid;align-items:end;padding:300px 0 var(--section-gap);overflow:hidden}
  .collage {position:absolute;inset:0;--diagonal:110px;z-index:-1;overflow:hidden;mask-image:linear-gradient(180deg,#000 0%,#000 50%,#000d 66%,#0005 84%,transparent 100%)}
  .collage-panel {position:absolute;inset:0;overflow:hidden}
  .collage-panel img {position:absolute;top:0;height:100%;object-fit:cover;object-position:var(--focus);width:60%;max-width:none}
  .panel-1 {clip-path:polygon(0 0,calc(33.333% - var(--diagonal)) 0,calc(33.333% + var(--diagonal)) 100%,0 100%)}
  .panel-2 {clip-path:polygon(calc(33.333% - var(--diagonal) - 1px) 0,calc(66.666% - var(--diagonal)) 0,calc(66.666% + var(--diagonal)) 100%,calc(33.333% + var(--diagonal) - 1px) 100%)}
  .panel-3 {clip-path:polygon(calc(66.666% - var(--diagonal) - 1px) 0,100% 0,100% 100%,calc(66.666% + var(--diagonal) - 1px) 100%)}
  .panel-1 img {left:calc((33.333% + var(--diagonal)) * -.25);width:calc((33.333% + var(--diagonal)) * 1.25)}
  .panel-2 img {left:calc(33.333% - var(--diagonal) - 2px);width:calc(33.334% + 2 * var(--diagonal) + 4px)}
  .panel-3 img {left:calc(66.666% - var(--diagonal) - 2px);width:calc(33.334% + var(--diagonal) + 4px)}
  .hero-shade {position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,17,20,.02) 0%,rgba(16,17,20,.1) 20%,rgba(16,17,20,.62) 44%,rgba(16,17,20,.8) 68%,#101114 100%),radial-gradient(ellipse at 50% 61%,rgba(16,17,20,.25),transparent 76%)}
  .hero-content {text-align:center}
  h1 {font-size:clamp(2rem,3.5vw,3rem);line-height:1.18;max-width:1100px;margin:auto;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.12)}
  .hero-intro {font-size:1.125rem;line-height:1.65;color:#d9dce1;max-width:620px;margin:28px auto 32px;text-wrap:pretty}
  .primary-button {display:flex;align-items:center;justify-content:center;width:max-content;max-width:100%;min-height:54px;min-width:172px;margin-inline:auto;padding:13px 28px;border:1px solid rgba(255,255,255,.36);background:#efefec;color:#16191e;border-radius:4px;font-size:1rem;font-weight:600;box-shadow:0 5px 26px #0003;transition:transform .2s,background .2s}
  .primary-button:hover {background:#fff;transform:translateY(-2px)}
  .comparison {position:relative;aspect-ratio:16/9;background:#0a0b0d;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;isolation:isolate;box-shadow:0 24px 64px #0004;--split:50%}
  .compare-scene,.before-layer {position:absolute;inset:0}
  .compare-scene img {width:100%;height:100%;object-fit:contain;object-position:50% 50%;pointer-events:none;user-select:none}
  .before-layer {clip-path:inset(0 calc(100% - var(--split)) 0 0)}
  .divider {position:absolute;top:0;bottom:0;left:var(--split);width:1px;background:rgba(255,255,255,.78);box-shadow:0 0 10px #0007;pointer-events:none;z-index:2}
  .divider-grip {position:absolute;width:48px;height:48px;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;border:1px solid #ffffffb3;border-radius:50%;background:rgba(25,30,35,.46);backdrop-filter:blur(8px);box-shadow:0 3px 14px #0003}
  .divider-grip svg {width:28px;height:20px}
  .compare-control {position:absolute;inset:0;z-index:3;cursor:ew-resize;touch-action:pan-y}
  .comparison:has(.compare-control:focus-visible) {outline:2px solid #e2ebff;outline-offset:5px}
  .compare-control:focus-visible {outline:none}
  .comparison.is-resetting .divider {transition:left .3s cubic-bezier(.22,.61,.36,1)}
  .comparison.is-resetting .before-layer {transition:clip-path .3s cubic-bezier(.22,.61,.36,1)}
  .comparison.is-loading {cursor:progress}
  .image-label {position:absolute;z-index:2;top:18px;font-size:.875rem;line-height:1;padding:9px 13px;background:rgba(11,14,18,.75);border:1px solid #ffffff26;border-radius:3px;pointer-events:none}
  .before-label {left:18px}
  .after-label {right:18px}
  .thumbnails {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:680px;margin-top:20px;padding-bottom:5px}
  .thumbnail {display:flex;align-items:flex-end;background:none;border:0;text-align:left;min-width:0;min-height:44px;padding:0;cursor:pointer}
  .thumb-photo {display:block;width:100%;overflow:hidden;aspect-ratio:16/9;border-radius:3px;outline:1px solid #ffffff24;outline-offset:0;transition:outline-color .2s,opacity .2s;opacity:.6}
  .thumb-photo img {height:100%;width:100%;object-fit:cover}
  .thumbnail:hover .thumb-photo {opacity:.88}
  .thumbnail.is-active .thumb-photo {opacity:1;outline:1px solid #edf1f7;outline-offset:4px}
  .no-script-note {margin-top:20px;color:var(--muted)}
  .backdrop {position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:strict;--depth-progress:0}
  .depth-plane {position:absolute;right:-230px;top:38vh;width:700px;height:650px;border-radius:100px;border:1px solid #dce8ff10;background:linear-gradient(130deg,#96b0d322,#596b8509 65%,transparent);filter:blur(6px);transform:translate3d(calc(var(--depth-progress) * -160px),calc(var(--depth-progress) * -280px),0) rotate(calc(-24deg + var(--depth-progress) * 18deg)) scale(calc(1 + var(--depth-progress) * .1));will-change:transform}
  .depth-arc {position:absolute;left:-670px;top:18vh;width:1000px;height:1000px;border:46px solid #96b0d30c;border-radius:50%;filter:blur(9px);transform:translate3d(calc(var(--depth-progress) * 130px),calc(var(--depth-progress) * -430px),0) rotate(calc(8deg - var(--depth-progress) * 26deg)) scale(calc(1 - var(--depth-progress) * .12));will-change:transform}
  .pricing-title {max-width:1000px;margin:0 auto 28px;text-align:center;font-size:1.65rem;line-height:1.4;letter-spacing:-.02em;text-wrap:balance}
  .service-note {border-block:1px solid var(--line);padding-block:25px;margin-bottom:36px;text-align:center;font-size:1.0625rem;color:var(--muted)}
  .price-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .price-card {position:relative;display:flex;flex-direction:column;padding:32px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,#1d2026,#16181d);box-shadow:0 14px 36px #0002}
  .price-card h3 {font-size:1.65rem;letter-spacing:-.035em}
  .price-card ul {list-style:none;padding:0;margin:30px 0 36px;color:var(--muted);font-size:1rem}
  .price-card li {display:flex;align-items:baseline;gap:12px;margin-top:8px}
  .price-card li::before {content:'';width:10px;height:1px;background:#78808c;flex:none;align-self:center}
  .price-bottom {margin-top:auto;border-top:1px solid var(--line);padding-top:22px}
  .price {font-size:2.125rem;letter-spacing:-.045em;line-height:1.3}
  .price span {font-size:1rem;letter-spacing:0;color:var(--muted);white-space:nowrap}
  .price-condition {color:var(--muted);font-size:.875rem;margin-top:7px}
  .contact-section {scroll-margin-top:-32px}
  .contact-layout {display:grid;grid-template-columns:minmax(0,1fr);gap:32px;width:100%;max-width:680px;margin-inline:auto;text-align:center}
  .contact-profile {text-align:center}
  .profile-photo {width:224px;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;margin:0 auto 24px}
  .contact-profile h2 {font-size:1.5rem;line-height:1.3;letter-spacing:-.025em;font-weight:600}
  .contact-role {margin-top:6px;color:var(--muted);font-size:1rem}
  .contact-description {font-size:1.375rem;line-height:1.6;text-wrap:pretty}
  .contact-invitation {margin:30px 0 16px;font-size:1.125rem;color:var(--muted)}
  .contact-buttons {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr));gap:14px;max-width:420px;margin-inline:auto}
  .messenger {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 20px;font-weight:600;border:0;border-radius:6px;transition:background .2s}
  .messenger span {min-width:0;max-width:100%;overflow-wrap:anywhere}
  .messenger svg {width:21px;height:21px;flex:none}
  .telegram {background:#087cb7;color:#fff}
  .whatsapp {background:#25d366;color:#082e18}
  .telegram:hover {background:#066ba0}
  .whatsapp:hover {background:#20bd5a}
}
@layer responsive {
  @media(min-width:1600px) {.hero {min-height:800px;padding-top:320px}.collage {--diagonal:125px}}
  @media(max-width:1100px) {.collage {--diagonal:85px}.price-card {padding:26px}.price {font-size:1.875rem}}
  @media(max-width:767px) {
    :root {--section-gap:88px}
    .hero {min-height:700px;padding-top:300px}
    .collage {--diagonal:65px}
    h1 {font-size:clamp(1.75rem,4vw,2rem);line-height:1.2}
    .hero-intro {font-size:1.0625rem;max-width:500px;margin-block:24px 28px}
    .pricing-title {font-size:1.5rem;margin-bottom:24px}
    .price-grid {gap:16px;grid-template-columns:1fr}
    .price-card {padding:28px}
    .price-card h3 {font-size:1.65rem}
    .price-card ul {margin:24px 0 28px}
    .price {font-size:2.125rem}
    .service-note {padding-block:22px;margin-bottom:28px;font-size:1rem}
    .contact-layout {max-width:440px}
    .profile-photo {width:192px;margin-bottom:20px}
    .contact-description {font-size:1.125rem;line-height:1.65}
    .contact-invitation {margin-top:24px;font-size:1.0625rem}
    .depth-plane,.depth-arc {opacity:.65;will-change:auto}
  }
  @media(max-width:600px) {
    :root {--gutter:22px}
    .hero {min-height:660px;padding-top:275px}
    .collage {height:480px;--diagonal:38px;mask-image:linear-gradient(180deg,#000 0%,#000 36%,#000a 63%,transparent 100%)}
    .collage-panel img {object-position:var(--mobile-focus)}
    .panel-1 img {left:calc((33.333% + var(--diagonal)) * -.5);width:calc((33.333% + var(--diagonal)) * 1.5)}
    .hero-shade {background:linear-gradient(180deg,#10111400 0,#10111418 120px,#10111488 240px,#101114eb 380px,#101114 480px)}
    h1 {font-size:clamp(1.625rem,6.8vw,1.875rem);line-height:1.2;letter-spacing:-.035em}
    .desktop-break {display:none}
    .hero-intro {font-size:1rem;line-height:1.6;max-width:360px}
    .image-label {top:10px;font-size:.75rem;padding:7px 9px}
    .before-label {left:10px}.after-label {right:10px}
    .divider-grip {width:44px;height:44px}
    .thumbnails {gap:12px;grid-template-columns:repeat(4,minmax(4rem,1fr));overflow-x:auto;padding:5px;margin:13px -5px 0;max-width:none;scrollbar-width:thin;scrollbar-color:#58616f transparent}
    .messenger {gap:9px;padding-inline:12px;min-height:52px}
    .contact-buttons {gap:10px}
  }
  @media(max-width:359px) {:root {--gutter:18px}.hero {padding-top:255px;min-height:640px}.hero-intro {margin-top:20px}.thumbnails {gap:10px}.messenger {font-size:.9375rem;gap:8px}}
}
@layer motion {
  @media(prefers-reduced-motion:no-preference) {
    .collage-panel img {animation:photo-enter .8s both}
    .panel-2 img {animation-delay:.08s}.panel-3 img {animation-delay:.16s}
    @keyframes photo-enter {from{opacity:.35;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}
    .scroll-fade {opacity:var(--section-opacity,1);filter:blur(var(--section-blur,0px));transition:opacity .35s ease-out,filter .35s ease-out}
    .scroll-fade:has(:focus-visible),.scroll-fade:has(.compare-control:active) {opacity:1;filter:none;pointer-events:auto}
    .scroll-fade:has(:focus-visible) {transition:none}
  }
  @media(prefers-reduced-motion:reduce) {html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.scroll-fade{opacity:1;filter:none;pointer-events:auto}.depth-plane{transform:rotate(-24deg)}.depth-arc{transform:rotate(8deg)} }
}