* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #0b1410; color: #e9f5ee; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.app { min-height: 100%; display: grid; grid-template-rows: auto 1fr; }
.controls { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); position: sticky; top: 0; background: rgba(11,20,16,0.8); backdrop-filter: blur(6px); z-index: 10; }
.controls button { appearance: none; background: #132219; color: #cfeadd; border: 1px solid rgba(255,255,255,0.12); padding: 8px 12px; border-radius: 10px; font-weight: 600; cursor: pointer; }
.controls button.is-active { background: linear-gradient(135deg, #1e7a41, #2fb66b); color: #062312; border-color: transparent; }
.controls .hint { margin-left: auto; opacity: .8; font-size: 12px; }

.stage-wrap { display: grid; place-items: center; padding: 24px; }
.stage { position: relative; width: 960px; height: 540px; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06) inset; }
.stage.vertical { width: 540px; height: 960px; }

.bg { position: absolute; inset: -10%; background: radial-gradient(60% 60% at 50% 35%, #163924 0%, #0b1410 60%, #0b1410 100%); filter: saturate(1.05) contrast(1.05); }

.glow { position: absolute; inset: -20%; background: radial-gradient(40% 30% at 50% 55%, rgba(47,182,107,0.35), rgba(47,182,107,0) 70% ); mix-blend-mode: screen; opacity: .8; }

.product-layer { position: absolute; inset: 0; display: grid; place-items: center; }
.product-layer .bg-img { width: 115%; height: 115%; object-fit: cover; filter: blur(2px) saturate(1.1) brightness(0.9); transform: scale(1.08); }
.product-layer .product { width: 46%; max-width: 620px; filter: drop-shadow(0 24px 60px rgba(0,0,0,0.5)) saturate(1.05); }

.sheen { pointer-events: none; position: absolute; inset: 0; background: linear-gradient(75deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0) 60%); transform: translateX(-120%) rotate(0.001deg); }

.copy { position: absolute; left: 6%; bottom: 8%; z-index: 3; text-shadow: 0 2px 18px rgba(0,0,0,0.4); }
.kicker { margin: 0 0 2px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: clamp(10px, 2.2vw, 14px); opacity: .9; }
.headline { margin: 0 0 6px; font-size: clamp(28px, 6vw, 56px); font-weight: 800; letter-spacing: -0.02em; }
.sub { margin: 0; font-weight: 500; opacity: .9; }

.logo-tile { position: absolute; right: 6%; top: 6%; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, #1e7a41, #2fb66b); color: #062312; font-weight: 800; font-size: 28px; box-shadow: 0 10px 30px rgba(26, 181, 102, 0.35), inset 0 0 18px rgba(255,255,255,0.25); }

@media (max-width: 720px) {
  .stage { width: 92vw; height: calc(92vw * 9/16); }
  .stage.vertical { width: 70vw; height: calc(70vw * 16/9); }
}

/* Embed mode: fill iframe, hide controls */
body.embed, body.embed html { height: 100%; }
body.embed .app { min-height: 100%; grid-template-rows: 1fr; }
body.embed .controls { display: none; }
body.embed .stage-wrap { padding: 0; height: 100%; }
body.embed .stage { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }