.home-hero .hero-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--space-6);align-items:center}
.hero-text{max-width:60ch}
.hero-label{font-size:var(--fs-6);color:var(--color-text-secondary);margin-bottom:var(--space-2)}
.hero-image img{width:100%;border-radius:var(--radius-md)}

.concept-wrap{display:flex;justify-content:center}
.concept-text{max-width:700px;text-align:center}

.random-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.random-text{max-width:60ch}

.cards-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-5)}
.cards-grid .card{padding:var(--space-3)}

.steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}

.categories-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}

.exp-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--space-6)}
.exp-text{max-width:60ch}

.mobile-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);text-align:center}
.mobile-grid>div{max-width:55ch;margin-inline:auto}

.features-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}

.design-wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:center}
.design-text{max-width:600px;margin-inline:auto;text-align:center}
.design-image img{border-radius:var(--radius-md)}

.download-wrap{max-width:700px}

.cta-wrap{text-align:center;max-width:500px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--space-3)}
.cta-note{font-size:var(--fs-6)}

@media(max-width:900px){
.home-hero .hero-grid{grid-template-columns:1fr}
.random-grid{grid-template-columns:1fr}
.exp-grid{grid-template-columns:1fr}
.design-wrap{grid-template-columns:1fr}
.mobile-grid{grid-template-columns:1fr}
.cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.steps-grid{grid-template-columns:1fr}
.categories-grid{grid-template-columns:1fr}
.features-grid{grid-template-columns:1fr}
}

@media(max-width:600px){
.cards-grid{grid-template-columns:1fr}
.home-hero .hero-grid,.random-grid,.exp-grid,.mobile-grid,.design-wrap{gap:var(--space-4)}
.home-hero .hero-text{text-align:center}
}