/* Wider desktop composition; phone layouts retain their existing spacing. */
@media(min-width:761px){
  .wrap{width:calc(100% - 104px);max-width:none}
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,4vw,72px);padding-top:62px;padding-bottom:70px}
  .hero-copy{min-width:0}
  .hero h1{max-width:680px}
  .hero-copy>p{max-width:570px}
  .hero-demo{width:100%;max-width:640px;justify-self:center;padding:24px 36px 38px}
  .gift-preview{min-height:355px;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .hero-demo .preview-footer{margin-top:20px}
  .headline-spark{right:12px}
  .category-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .template-details{padding:21px 18px}
  .template-title-row h3{font-size:18px}
  .template-title-row p{font-size:13px}
  .template-title-row{gap:12px}
  .template-thumbnail{aspect-ratio:1.65}
  .section-heading{align-items:center}
  .section-heading>p{max-width:360px}
  .custom-strip{padding:26px 28px}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .steps article{padding-right:24px}
  .steps article+article{border-left:1px solid var(--line);padding-left:32px}
  .pricing-grid{gap:24px}
  .price-card{padding:36px}
  .faq-section{grid-template-columns:minmax(260px,.8fr) minmax(0,1.4fr);gap:clamp(40px,5vw,90px)}
  .examples-section .example-track{--card-step:clamp(175px,17vw,290px)}
  .example-track .example-card{width:clamp(290px,23vw,350px)}
}
@media(min-width:761px) and (max-width:1050px){
  .wrap{width:calc(100% - 72px)}
  .hero{gap:28px}
  .hero-demo{padding:18px 20px 30px}
  .category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .template-details{padding:18px 14px}
  .template-title-row h3{font-size:16px}
  .template-title-row{gap:8px}
  .header nav{gap:20px}
  .price-card{padding:28px}
}
@media(min-width:1600px){
  .wrap{width:calc(100% - 128px)}
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-top:76px;padding-bottom:84px}
  .hero-demo{max-width:740px}
  .gift-preview{min-height:400px}
  .hero h1{font-size:clamp(90px,6vw,116px)}
  html[lang=id] .hero h1{font-size:clamp(78px,5.3vw,102px)}
  .hero-copy>p{font-size:19px}
  .template-thumbnail{aspect-ratio:1.85}
  .template-details{padding:24px}
  .template-title-row h3{font-size:20px}
  .template-title-row p{font-size:14px}
  .price-card{padding:40px}
}
/* Header + centered white hero + blue strip fill the opening viewport.
   On short screens the hero can grow to keep its contents accessible. */
@media(min-width:761px){
  .header{height:104px}
  .ticker{height:62px;padding:19px 0}
  .hero{
    min-height:calc(100vh - 104px - 62px);
    min-height:calc(100svh - 104px - 62px);
    padding-top:clamp(40px,6vh,80px);
    padding-bottom:clamp(40px,6vh,80px);
    align-items:center;
    align-content:center;
  }
}