.studio-install-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr);
  gap: 2rem;
  align-items: center;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 3.4rem);
  border: 1px solid rgba(199, 230, 107, .3);
  border-radius: 18px;
  background: linear-gradient(135deg, #10251c, #176b4d);
  box-shadow: var(--studio-shadow);
  color: #fff;
}

.studio-install-hero h2 { margin: .3rem 0 1rem; font-size: clamp(2rem, 4vw, 3.15rem); font-weight: 800; letter-spacing: -.04em; }
.studio-install-hero p { max-width: 610px; margin: 0; color: #d8e7dc; font-size: 1.02rem; line-height: 1.7; }
.studio-install-hero .studio-eyebrow { color: var(--studio-lime); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; font-size: .72rem; }
.studio-install-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.studio-install-actions .btn-success { border-color: var(--studio-lime); background: var(--studio-lime); color: var(--studio-deep); font-weight: 800; }
.studio-install-actions .btn-outline-success { border-color: rgba(255,255,255,.75); color: #fff; font-weight: 700; }
.studio-install-actions .btn-outline-secondary { border-color: rgba(255,255,255,.42); color: #fff; font-weight: 700; }
.studio-install-note { margin-top: 1rem !important; font-size: .84rem; color: #bcd1c2 !important; }
.studio-install-hero__art { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 270px; justify-self: end; }
.studio-install-hero__art span { display: grid; place-items: center; width: 100px; height: 100px; border: 1px solid rgba(255,255,255,.2); border-radius: 18px; background: rgba(255,255,255,.1); color: var(--studio-lime); font-size: 2rem; transform: rotate(-5deg); }
.studio-install-hero__art span:nth-child(2) { transform: translateY(22px) rotate(6deg); color: #fff; }
.studio-install-hero__art span:nth-child(3) { transform: translate(45px, 10px) rotate(-2deg); }
.studio-install-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.25rem; }
.studio-install-features article { padding: 1.3rem; border: 1px solid var(--studio-line); border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(24, 48, 35, .05); }
.studio-install-features i { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: .85rem; border-radius: 11px; background: var(--studio-green-soft); color: var(--studio-green); font-size: 1.18rem; }
.studio-install-features h3 { margin: 0 0 .35rem; color: var(--studio-ink); font-size: 1.02rem; font-weight: 800; }
.studio-install-features p { margin: 0; color: var(--studio-muted); font-size: .9rem; line-height: 1.55; }

.studio-app #loginModal .modal-content, .studio-app #signupModal .modal-content { border: 1px solid var(--studio-line); border-radius: 14px; box-shadow: var(--studio-shadow); }
.studio-app #loginModal .modal-header, .studio-app #signupModal .modal-header { border-bottom-color: var(--studio-line); }
.studio-app #loginModal .modal-title::before, .studio-app #signupModal .modal-title::before { background: var(--studio-green); }
.studio-app #loginModal .btn-primary, .studio-app #signupModal .btn-primary { border-color: var(--studio-green); background: var(--studio-green); }

@media (max-width: 767px) { .studio-install-hero { grid-template-columns: 1fr; } .studio-install-hero__art { display: none; } .studio-install-features { grid-template-columns: 1fr; } }