*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#ffd400;color:#090909;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
img{max-width:100%}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 5vw;background:#ffd400;border-bottom:2px solid #111}
.topbar a{color:#111;text-decoration:none;font-weight:900}
.phone{font-size:clamp(22px,3vw,38px)}
nav{display:flex;gap:28px}
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:660px;align-items:center;padding:55px 5vw;gap:32px;overflow:hidden}
.sup{font-weight:900;letter-spacing:.13em;font-size:15px}
.hero h1{margin:8px 0 0;line-height:.82}
.hero h1 i{display:block;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(58px,8vw,120px);font-style:normal;letter-spacing:-.035em;transform:rotate(-2deg)}
.hero h1 b{display:block;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(118px,17vw,238px);letter-spacing:-.04em}
.price{display:flex;align-items:flex-end;gap:14px;margin:18px 0 26px}
.price strong{font-family:Impact,"Arial Black",sans-serif;font-size:clamp(78px,10vw,142px);line-height:.82;letter-spacing:-.03em}
.price small{font-size:clamp(18px,2vw,30px);font-weight:900;text-transform:uppercase;padding-bottom:7px}
.buttons{display:flex;flex-wrap:wrap;gap:12px}
.btn{padding:15px 24px;border:3px solid #111;text-decoration:none;text-transform:uppercase;font-weight:900}
.dark{background:#111;color:#ffd400}
.light{color:#111}
.hero-image{position:relative}
.hero-image:before{content:"";position:absolute;inset:8% -7% -6% 12%;background:#111;transform:rotate(-4deg);z-index:-1}
.hero-image img{display:block;width:100%;aspect-ratio:5/4;object-fit:cover;object-position:55% center;border:4px solid #111;transform:rotate(1deg)}
.section{padding:65px 5vw}
.title{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin-bottom:30px}
.title span{height:5px;background:#111}
.title h2{margin:0;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(32px,4.5vw,60px);text-transform:uppercase;text-align:center;letter-spacing:-.015em}
.perks{display:grid;grid-template-columns:repeat(4,1fr);border:3px solid #111}
.perks article{text-align:center;padding:28px;border-right:2px solid #111}
.perks article:last-child{border-right:0}
.perks article div{font-size:54px}
.perks h3,.films h3{font-size:21px;text-transform:uppercase}
.perks p,.films p{line-height:1.5}
.films{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.films article{background:#111;color:white;border:3px solid #111;overflow:hidden}
.films img{width:100%;height:225px;object-fit:cover;display:block}
.films article div{padding:18px}
.films h3{color:#ffd400;margin:0 0 10px}
.films p{margin:0}
.reviews img{width:100%;display:block;border:3px solid #111;border-radius:18px}
.map{position:relative}
.map img{width:100%;display:block;border:4px solid #111;border-radius:24px}
.map-label{position:absolute;top:50%;transform:translateY(-50%);background:#111;color:#ffd400;padding:18px 22px;text-transform:uppercase;display:flex;flex-direction:column;font-size:clamp(16px,2vw,28px)}
.map-label small{font-size:.56em;margin-top:5px}
.map-label.left{left:0}
.map-label.right{right:0;text-align:right}
.cta{background:#111;color:#ffd400;text-align:center;padding:50px 20px}
.cta span{font-weight:900;text-transform:uppercase}
.cta a{display:block;color:#ffd400;text-decoration:none;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(48px,9vw,105px);line-height:1.05}
.cta p{margin:8px 0 0;font-weight:700}
footer{background:#080808;padding:24px;display:flex;justify-content:center;gap:30px;flex-wrap:wrap}
footer a{color:#ffd400;text-decoration:none;text-transform:uppercase;font-weight:800}
.float{position:fixed;right:18px;bottom:18px;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#111;color:#ffd400;text-decoration:none;font-size:28px;z-index:30;box-shadow:0 8px 22px rgba(0,0,0,.28)}

@media(max-width:900px){
  nav{display:none}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:28px}
  .hero-image{order:-1}
  .hero-image img{max-height:430px}
  .perks{grid-template-columns:repeat(2,1fr)}
  .perks article:nth-child(2){border-right:0}
  .films{grid-template-columns:repeat(2,1fr)}
  .map-label{position:static;transform:none;margin:10px 0}
  .map-label.right{text-align:left}
}
@media(max-width:580px){
  .topbar{height:72px;padding:10px 16px;justify-content:center}
  .phone{font-size:26px;letter-spacing:-.02em}
  .hero{display:flex;flex-direction:column;padding:18px 16px 34px;gap:20px}
  .hero-image{order:0;width:100%}
  .hero-image:before{inset:10px -6px -10px 10px;transform:rotate(-2deg)}
  .hero-image img{width:100%;aspect-ratio:4/3;max-height:none;object-fit:cover;object-position:58% center;border-width:3px;transform:none}
  .hero-copy{width:100%}
  .sup{display:block;margin-top:6px;font-size:14px;letter-spacing:.09em}
  .hero h1{margin:8px 0 4px;line-height:.9}
  .hero h1 i{font-size:48px;line-height:1;letter-spacing:-.045em;transform:none;white-space:nowrap}
  .hero h1 b{font-size:112px;line-height:.82;letter-spacing:-.055em}
  .price{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:8px;margin:14px 0 18px}
  .price strong{font-size:92px;line-height:.8;justify-self:center}
  .price small{font-size:16px;padding-bottom:5px}
  .buttons{display:grid;grid-template-columns:1fr;gap:10px}
  .btn{min-height:56px;padding:14px 18px;text-align:center;display:flex;align-items:center;justify-content:center;font-size:17px}
  .btn.light{display:none}
  .section{padding:46px 16px}
  .title{grid-template-columns:26px 1fr 26px;gap:8px;margin-bottom:24px}
  .title span{height:3px}
  .title h2{font-size:30px;line-height:1.02}
  .perks{grid-template-columns:1fr;border-width:2px}
  .perks article{border-right:0;border-bottom:2px solid #111;padding:22px 18px}
  .perks article:last-child{border-bottom:0}
  .perks article div{font-size:44px}
  .perks h3{margin:10px 0 6px;font-size:19px}
  .perks p{margin:0}
  .films{grid-template-columns:1fr;gap:14px}
  .films img{height:190px}
  .films article div{padding:16px}
  .reviews img{border-radius:10px}
  .map img{border-radius:12px}
  .map-label{padding:14px 16px;font-size:18px;margin:8px 0}
  .cta{padding:38px 14px}
  .cta a{font-size:44px;white-space:nowrap}
  .cta p{font-size:14px}
  footer{gap:16px;padding:20px 12px}
  footer a{font-size:13px}
  .float{width:54px;height:54px;font-size:25px}
}