:root { color-scheme: dark; font-family: Inter, Manrope, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { display: grid; place-items: center; margin: 0; padding: 20px; color: #f4fbf7; background: radial-gradient(circle at 50% 0, #174537 0, #0a251e 36%, #04110e 100%); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.card { position: relative; width: min(100%, 980px); overflow: hidden; border: 1px solid rgba(126, 238, 190, .16); border-radius: 30px; background: rgba(7, 29, 24, .88); box-shadow: 0 30px 100px rgba(0, 0, 0, .45); }
.card img { display: block; width: 100%; aspect-ratio: 16 / 8.7; object-fit: cover; object-position: center; }
.badge { position: absolute; z-index: 2; top: 18px; left: 18px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #d8eee5; background: rgba(4, 20, 16, .78); font-size: 12px; font-weight: 750; backdrop-filter: blur(12px); }
.badge span { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #ffc96b; box-shadow: 0 0 10px #ffc96b; }
section { padding: 28px 34px 20px; text-align: center; }
.eyebrow { margin: 0 0 9px; color: #66e7b4; font-size: 10px; font-weight: 850; letter-spacing: .22em; }
h1 { margin: 0; font-size: clamp(29px, 5vw, 52px); line-height: 1.02; letter-spacing: -.045em; }
.copy { max-width: 610px; margin: 16px auto 0; color: #9db5ac; font-size: clamp(13px, 2vw, 16px); line-height: 1.55; }
footer { padding: 0 24px 24px; color: #64857a; text-align: center; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 560px) { body { align-items: start; padding: 12px; } .card { margin-top: max(8px, env(safe-area-inset-top)); border-radius: 24px; } .card img { aspect-ratio: 4 / 4.25; object-position: 57% center; } section { padding: 24px 20px 17px; } .badge { top: 12px; left: 12px; font-size: 10px; } }