.hero{background:#f5f5f5;border-bottom:1px solid var(--line);overflow:hidden}
.hero .hero-inner{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"heading visual" "details visual";grid-template-rows:auto auto;gap:24px 32px;align-content:start;min-height:0;padding-top:28px;padding-bottom:32px}
.hero-heading{grid-area:heading;align-self:end;position:relative;z-index:1;min-width:0}
.hero .hero-kicker{margin-bottom:24px;font-size:9px;line-height:1.6;letter-spacing:.11em}
.hero h1{margin:0;font-size:clamp(43px,4.4vw,64px);letter-spacing:-.052em;line-height:1.05}
.hero-details{grid-area:details;align-self:start;position:relative;z-index:1;min-width:0}
.hero .hero-description{font-size:17px;line-height:1.65}
.hero .hero-subtitle{font-size:13px;line-height:1.8;margin-top:14px}
.hero .hero-actions{gap:18px;margin-top:28px;flex-wrap:wrap}
.hero-media{grid-area:visual;align-self:center;min-width:0;width:calc(100% - 24px);margin:0;pointer-events:none}
.hero-media img{display:block;width:100%;height:auto;max-width:none;object-fit:contain;-webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent),linear-gradient(180deg,transparent,#000 2%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent),linear-gradient(180deg,transparent,#000 2%,#000 96%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect;mask-repeat:no-repeat}
@media(max-width:1100px){
  .hero .hero-inner{gap:22px 20px;min-height:0;padding-top:24px;padding-bottom:28px}
  .hero h1{font-size:46px}.hero .hero-kicker{font-size:8px;letter-spacing:.08em}
  .hero .hero-description{font-size:15px}.hero .hero-subtitle{font-size:12px}
  .hero .hero-actions{gap:12px 16px}.hero .hero-actions .button{font-size:12px;padding:13px 18px;gap:16px}
  .hero-media{width:calc(100% - 48px);margin:0}
}
@media(min-width:761px) and (max-height:760px){
  .hero .hero-inner{padding-top:24px;padding-bottom:28px;gap:18px 32px}
  .hero .hero-kicker{margin-bottom:16px}
  .hero h1{font-size:clamp(38px,3.6vw,54px)}
  .hero .hero-description{font-size:15px;line-height:1.55}
  .hero .hero-subtitle{font-size:12px;line-height:1.6;margin-top:10px}
  .hero .hero-actions{margin-top:20px;gap:16px}
  .hero .hero-actions .button{min-height:48px;padding-top:12px;padding-bottom:12px}
}
@media(max-width:760px){
  .hero .hero-inner{grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "visual" "details";grid-template-rows:auto;min-height:0;padding-top:24px;padding-bottom:24px;gap:14px}
  .hero .hero-kicker{display:none}
  .hero h1{font-size:clamp(30px,8.8vw,36px);line-height:1.05;letter-spacing:-.045em}
  .hero-media{width:100%;margin:0}
  .hero .hero-description{font-size:14px;line-height:1.6}.hero .hero-subtitle{font-size:12px;line-height:1.6;margin-top:8px}
  .hero .hero-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:16px;align-items:center}
  .hero .hero-actions .button{min-height:48px;font-size:12px;padding:12px 15px;gap:12px;justify-content:space-between}
}
@media(max-width:370px){
  .hero .hero-inner{padding-top:21px;padding-bottom:22px;gap:12px}
  .hero h1{font-size:30px}
  .hero .hero-actions{gap:11px}.hero .hero-actions .button{padding:12px 11px;gap:8px}
}

@media(max-width:760px) and (max-height:740px){
  .hero .hero-inner{padding-top:18px;padding-bottom:20px;gap:10px}
  .hero h1{font-size:32px;line-height:1.03}
  .hero-media{max-width:320px;margin-inline:auto}
  .hero .hero-description{font-size:13px;line-height:1.55}.hero .hero-subtitle{font-size:11.5px;line-height:1.6;margin-top:6px}
  .hero .hero-actions{margin-top:14px;gap:12px}.hero .hero-actions .button{min-height:44px;padding-top:10px;padding-bottom:10px}
}
@media(max-width:370px) and (max-height:740px){.hero h1{font-size:30px}}
@media(max-width:760px) and (max-height:600px){
  .hero .hero-inner{padding-top:12px;padding-bottom:16px;gap:8px}
  .hero h1{font-size:28px;line-height:1.03}.hero-media{max-width:230px}
  .hero .hero-description{font-size:13px;line-height:1.5}.hero .hero-subtitle{font-size:11px;line-height:1.5;margin-top:5px}
  .hero .hero-actions{margin-top:10px}
}
@media(max-width:960px) and (max-height:500px) and (orientation:landscape){
  .topbar{display:none}.header-inner{height:64px}.navigation{top:64px}
  .hero .hero-inner{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"heading visual" "details visual";min-height:0;padding-top:12px;padding-bottom:12px;gap:10px 24px}
  .hero .hero-kicker{display:none}.hero h1{font-size:26px;line-height:1.05}.hero-media{max-width:none;width:100%;margin:0}
  .hero .hero-description{font-size:13px;line-height:1.55}.hero .hero-subtitle{font-size:11px;line-height:1.6;margin-top:6px}
  .hero .hero-actions{margin-top:14px;gap:10px}.hero .hero-actions .button{min-height:44px;font-size:11px;padding:10px 12px;gap:10px}
}