
:root {
 font-family:system-ui,-apple-system,Arial,sans-serif;
 color:#191b20;
 background:#faf9f7;
}
*{box-sizing:border-box}
body{margin:0}
a{text-decoration:none;color:inherit}
.wrap{width:min(1080px,calc(100% - 30px));margin:auto}
header{background:#fff;border-bottom:1px solid #eee}
header .wrap{
 min-height:78px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px
}
.logo{
 font-size:clamp(23px,4vw,31px);
 font-weight:900;
 letter-spacing:-1px
}
.logo span{color:#f65e22}
.logo small{
 display:block;
 font-size:10px;
 letter-spacing:1.7px;
 color:#555
}
header nav{
 font-size:13px;
 color:#d65119;
 font-weight:800
}
main{padding:28px 0 65px}
.hero{
 border-radius:25px;
 background:linear-gradient(120deg,#fff,#fff0e5);
 border:1px solid #f3d9c6;
 padding:clamp(23px,5vw,64px);
 display:grid;
 grid-template-columns:1.5fr 1fr;
 gap:17px;
 align-items:center
}
.hero[hidden]{display:none}
.tag{
 display:inline-block;
 color:#b44613;
 background:#ffe2d0;
 padding:9px 13px;
 border-radius:25px;
 font-size:12px;
 font-weight:800
}
h1{
 font-size:clamp(38px,6vw,68px);
 letter-spacing:-2px;
 line-height:1.07;
 margin:18px 0;
 color:#ed5a1d
}
.lead{
 color:#51555b;
 line-height:1.5;
 font-size:clamp(17px,2vw,22px)
}
.visual{
 background:linear-gradient(135deg,#ff994f,#fa5a1f);
 min-height:225px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:24px;
 font-size:100px
}
.poster{
 display:block;
 width:100%;
 max-width:850px;
 border-radius:22px;
 margin:0 auto 23px
}
.actions{
 display:flex;
 gap:12px;
 flex-wrap:wrap;
 margin:23px 0
}
.btn{
 display:inline-flex;
 justify-content:center;
 align-items:center;
 min-height:54px;
 padding:14px 22px;
 border-radius:13px;
 font-weight:800;
 text-align:center
}
.primary{background:#f45e22;color:white}
.secondary{
 background:#fff;
 border:1px solid #f5bb9f;
 color:#aa4517
}
h2{
 font-size:clamp(27px,4vw,35px);
 margin:35px 0 18px;
 letter-spacing:-1px
}
.cards{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:15px
}
.card{
 background:white;
 border:1px solid #eee1d9;
 padding:23px;
 border-radius:18px
}
.number{
 font-size:28px;
 color:#f65e22;
 font-weight:900
}
.card h3{margin:12px 0}
.card p{margin:0;color:#666;line-height:1.5}
.offer{
 background:#212226;
 color:white;
 border-radius:22px;
 margin-top:30px;
 padding:27px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:15px
}
.offer strong{font-size:26px}
.offer p{color:#ddd}
details{
 padding:17px 19px;
 border:1px solid #ebe2de;
 background:#fff;
 border-radius:12px;
 margin:10px 0
}
summary{cursor:pointer;font-weight:750}
details p{color:#555;line-height:1.5}
footer{
 background:#212226;
 color:white;
 padding:25px 0;
 font-size:13px
}
footer .wrap{
 display:flex;
 gap:12px;
 justify-content:space-between;
 flex-wrap:wrap
}
@media(max-width:700px){
 .hero{grid-template-columns:1fr}
 .visual{min-height:140px;font-size:75px}
 .cards{grid-template-columns:1fr}
 .offer{flex-direction:column;align-items:flex-start}
}
