.sol-hero { background: #080a0b; color: #f8f9f6; overflow: hidden; }
.sol-hero-inner { min-height: min(780px, 90svh); display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 3rem; }
.sol-hero-copy { position: relative; z-index: 2; padding: 5rem 0; }
.sol-hero h1, .sol-light h2, .sol-light h3 { font-family: Montserrat, sans-serif; font-weight: 600; letter-spacing: -.045em; }
.sol-hero h1 { max-width: 10ch; margin: 0; font-size: clamp(3.3rem, 6.5vw, 6.8rem); line-height: .99; }
.sol-hero-copy > p { color: #bdc5c4; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; margin: 1.65rem 0 2rem; }
.sol-hero-purchase { display: flex; align-items: center; gap: 1.5rem; font-size: 1.2rem; font-weight: 600; }
.sol-hero-buy { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: .8rem 1.5rem; border-radius: 999px; background: #f8f9f6; color: #080a0b; text-decoration: none; }
.sol-hero-buy:hover { background: #dce9e8; }
.sol-hero-buy:focus-visible, .sol-light-tabs button:focus-visible { outline: 2px solid #dce9e8; outline-offset: 4px; }
.sol-hero-art { position: relative; height: min(670px, 72svh); min-height: 480px; isolation: isolate; }
.sol-hero-art::before { content: ""; position: absolute; inset: 9% 0 2%; background: radial-gradient(ellipse, rgba(142,161,158,.13), transparent 67%); }
.sol-hero-phone { position: absolute; width: auto; max-width: none; height: 88%; top: 6%; left: 50%; object-fit: contain; filter: drop-shadow(0 18px 25px rgba(0,0,0,.5)); transform-origin: 50% 75%; }
.sol-hero-phone-center { transform: translateX(-50%); z-index: 2; }
.sol-hero-phone-left { transform: translateX(-71%) rotate(-9deg) scale(.92); opacity: .43; }
.sol-hero-phone-right { transform: translateX(-29%) rotate(9deg) scale(.92); opacity: .43; }
.sol-light { background: #080a0b; color: #f8f9f6; padding: clamp(5rem, 9vw, 9rem) 0; }
.sol-light-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 2.5rem; }
.sol-light h2 { margin: 0; max-width: 13ch; font-size: clamp(2.5rem, 5vw, 5rem); line-height: 1.03; }
.sol-light-heading > p { max-width: 25ch; color: #aeb8b6; line-height: 1.55; margin: 0 0 .3rem; }
.sol-light-scene { position: relative; min-height: 650px; overflow: hidden; border-radius: 4px; background: #050607; }
.sol-light-images { position: absolute; inset: 0; }
.sol-light-images img { display: block; position: absolute; inset: 0 0 0 auto; width: 72%; height: 100%; object-fit: contain; object-position: right center; }
.sol-light-images img[hidden], .sol-light-panel[hidden] { display: none; }
.sol-light-images::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #080a0b 4%, rgba(8,10,11,.92) 27%, transparent 65%); }
.sol-light-content { position: relative; z-index: 1; display: flex; min-height: 650px; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: clamp(1.5rem, 4vw, 4rem); }
.sol-light-tabs { display: flex; gap: .35rem; flex-wrap: wrap; padding: .25rem; border: 1px solid #58615f; border-radius: 999px; background: rgba(8,10,11,.75); }
.sol-light-tabs button { min-width: 70px; min-height: 44px; border: 0; border-radius: 999px; padding: .65rem 1rem; color: #d3d9d7; background: transparent; font: inherit; cursor: pointer; }
.sol-light-tabs button[aria-selected="true"] { background: #f8f9f6; color: #080a0b; }
.sol-light-panel { margin-top: 2.4rem; max-width: 22rem; }
.sol-light h3 { font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.08; margin: 0 0 .75rem; }
.sol-light-panel p { color: #c0c9c6; line-height: 1.55; margin: 0; }
@media (max-width: 700px) {
  .sol-hero-inner { min-height: 0; display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .sol-hero-copy { padding: 5.5rem 0 1rem; }
  .sol-hero h1 { font-size: clamp(3.1rem, 12vw, 5rem); }
  .sol-hero-art { height: 460px; min-height: 0; margin: 0 -1rem; }
  .sol-hero-phone { height: 85%; top: 7%; }
  .sol-light-heading { display: block; }
  .sol-light-heading > p { margin-top: 1rem; }
  .sol-light-scene, .sol-light-content { min-height: 660px; }
  .sol-light-images img { width: 100%; height: 75%; top: 0; object-position: center top; }
  .sol-light-images::after { background: linear-gradient(0deg, #080a0b 14%, rgba(8,10,11,.92) 31%, transparent 64%); }
  .sol-light-content { padding: 1.5rem; }
  .sol-light-panel { margin-top: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .sol-hero *, .sol-light * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }