*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #fff; min-height: 100vh; }
.pressel-page { max-width: 100%; min-height: 100vh; display: flex; flex-direction: column; }
.pressel-main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 2.5rem 1rem 1rem; }
.pressel-h1 { font-size: 2.25rem; font-weight: 800; color: #111827; text-align: center; line-height: 1.15; margin-bottom: 2rem; max-width: 700px; }
.pressel-h1 .highlight { color: #d97706; }
.img-wrapper { position: relative; cursor: pointer; max-width: 600px; width: 100%; }
.img-wrapper img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 0; }
.play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.25); border: 3px solid rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center; }
.play-btn::after { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 14px 0 14px 26px; border-color: transparent transparent transparent rgba(255,255,255,0.85); margin-left: 4px; }
.play-ping { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,0.2); animation: ping 1.5s cubic-bezier(0,0,0.2,1) infinite; }
@keyframes ping { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 75%, 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
.cta-btn { display: block; width: 100%; max-width: 600px; margin: 2rem auto 0; padding: 1.25rem; border: none; border-radius: 0.75rem; background: #1e3a8a; color: #fff; font-size: 1.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.15); transition: opacity 0.15s, transform 0.15s; }
.cta-btn:hover { opacity: 0.9; }
.cta-btn:active { transform: scale(0.95); }
footer { border-top: 1px solid #e5e7eb; margin-top: 2.5rem; padding: 1.5rem 1rem; text-align: center; }
footer .copyright { font-size: 0.875rem; color: #6b7280; margin-bottom: 0.25rem; }
footer .links { font-size: 0.875rem; color: #6b7280; margin-bottom: 1rem; }
footer .links button { background: none; border: none; color: #6b7280; text-decoration: underline; cursor: pointer; font-size: 0.875rem; transition: color 0.15s; }
footer .links button:hover { color: #374151; }
footer .disclaimer { font-size: 0.7rem; color: #9ca3af; max-width: 800px; margin: 0 auto; line-height: 1.5; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { background: #fff; border-radius: 0.75rem; max-width: 520px; width: 90%; max-height: 80vh; overflow-y: auto; padding: 2rem; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.modal h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.modal p { font-size: 0.9rem; color: #374151; margin-bottom: 0.75rem; line-height: 1.6; }
.modal h3 { font-size: 0.95rem; font-weight: 700; margin: 1rem 0 0.25rem; }
.modal a { color: #2563eb; }
.modal-close { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #9ca3af; line-height: 1; }
.modal-close:hover { color: #111; }
.modal-btn { display: block; width: 100%; padding: 0.85rem; margin-top: 1.25rem; border: none; border-radius: 0.5rem; background: #2563eb; color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; }
.modal-btn:hover { background: #1d4ed8; }

.wlander-page { min-height: 100vh; background: linear-gradient(rgb(27,58,111) 0%, rgb(37,73,131) 55%, rgb(27,58,111) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem 1rem; }
.wlander-h1 { font-size: 2.5rem; font-weight: 800; color: #fff; text-align: center; line-height: 1.15; margin-bottom: 1.5rem; max-width: 800px; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.wlander-h1 .highlight { color: #eab308; }
.video-container { max-width: 1140px; width: 100%; }
.video-container smart-player, .video-container iframe, .video-container .smartplayer-wrapper { width: 100%; aspect-ratio: 16/9; }

@media (min-width: 640px) { .pressel-h1 { font-size: 2.75rem; } }
@media (min-width: 768px) { .pressel-h1 { font-size: 3rem; } .play-btn { width: 110px; height: 110px; } .play-ping { width: 128px; height: 128px; } .wlander-h1 { font-size: 3rem; } }