.hero { padding: 48px 0 40px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(54px, 7.4vw, 124px); }
.hero h1 .c { color: var(--blue); display: block; }
.hero p { margin-top: 20px; font-size: 18.5px; color: var(--muted); max-width: 32em; }
.status { margin-top: 24px; display: inline-flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: #FFF1D6; color: #4D3000; font-size: 15px; font-weight: 600; }
.cubes { position: relative; aspect-ratio: 1; max-width: 460px; justify-self: center; width: 100%; }
.cubes span { position: absolute; width: 30%; aspect-ratio: 1; border-radius: 10px; display: grid; place-items: end start; padding: 10px; font: 800 14px Archivo; color: var(--ink); }
.plan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.plan div { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.plan b { font: 800 24px/1.05 Archivo; font-stretch: 100%; }
.plan p { color: var(--muted); font-size: 15px; }
.sec { margin-top: 96px; }
.sec h2 { font-size: clamp(38px, 4.4vw, 70px); margin-bottom: 24px; }
.sec h2 .c { color: var(--blue); }
.band { margin-top: 96px; background: var(--blue); color: #fff; border-radius: 22px; padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.band h2 { font-size: clamp(36px, 4vw, 64px); }
.band h2 .c { color: var(--lime); display: block; }
.band p { color: #fff; }
@media (max-width: 960px) { .hero { grid-template-columns: 1fr; } .plan { grid-template-columns: 1fr 1fr; } .band { grid-template-columns: 1fr; padding: 24px; } }
@media (max-width: 560px) { .plan { grid-template-columns: 1fr; } .cubes { max-width: 300px; } }