:root {
  color-scheme: light;
  --body-bg: #edf4ff;
  --modal-bg: #ffffff;
  --text-primary: #112b58;
  --text-secondary: #405778;
  --text-disclaimer: #61728c;
  --link-color: #245bc0;
  --btn-top: #3678df;
  --btn-bottom: #174799;
  --btn-hover-top: #2868cc;
  --btn-hover-bottom: #103b84;
  --pulse-color: rgba(46, 111, 213, 0.32);
  --pulse-color-fade: rgba(46, 111, 213, 0);
  --modal-shadow: 0 16px 44px rgba(15, 48, 104, 0.15), 0 4px 12px rgba(15, 48, 104, 0.07);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --body-bg: #07152e;
    --modal-bg: #102344;
    --text-primary: #ecf6ff;
    --text-secondary: #bed0e9;
    --text-disclaimer: #a5bad5;
    --link-color: #94caff;
    --btn-top: #3c84ed;
    --btn-bottom: #225bb9;
    --btn-hover-top: #5599fa;
    --btn-hover-bottom: #2b68c9;
    --pulse-color: rgba(80, 155, 255, 0.36);
    --pulse-color-fade: rgba(80, 155, 255, 0);
    --modal-shadow: 0 18px 48px rgba(0, 6, 21, 0.36), 0 4px 12px rgba(0, 6, 21, 0.18);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  background: radial-gradient(circle at 50% 0%, rgba(146, 211, 255, 0.28), transparent 55%), var(--body-bg);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 12vh;
  font-family: 'Roboto', 'Segoe UI', Tahoma, sans-serif;
  color: var(--text-primary);
}
.premium-modal {
  width: 480px;
  background: var(--modal-bg);
  border-radius: 16px;
  box-shadow: var(--modal-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 36px 32px 28px;
  position: relative;
}
.premium-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #a8ecff, #4b91ed 50%, #173f91);
}
.modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 16px;
}
.header-logo {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  margin-bottom: 20px;
  box-shadow: 0 5px 16px rgba(20, 65, 145, 0.16);
}
.title { font-size: 24px; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.modal-body { padding-bottom: 24px; }
.title-sub { font-size: 15px; line-height: 24px; color: var(--text-secondary); }
.modal-footer { display: flex; flex-direction: column; align-items: center; }
@keyframes pulse-cta {
  0% { box-shadow: 0 0 0 0 var(--pulse-color); }
  70% { box-shadow: 0 0 0 16px var(--pulse-color-fade); }
  100% { box-shadow: 0 0 0 0 var(--pulse-color-fade); }
}
.btn-download {
  background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom));
  border: none;
  border-radius: 10px;
  color: #ffffff;
  padding: 16px 24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  transition: transform 0.1s, box-shadow 0.2s;
  margin-bottom: 20px;
  animation: pulse-cta 2s infinite ease-in-out;
}
.btn-download:hover {
  background: linear-gradient(180deg, var(--btn-hover-top), var(--btn-hover-bottom));
  animation: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34, 91, 185, 0.38);
}
.btn-download:focus-visible, .modal-disclaimer a:focus-visible, .cwslink:focus-visible {
  outline: 3px solid #83d8ff;
  outline-offset: 3px;
}
.btn-main-text { font-size: 20px; font-weight: 600; line-height: 1.2; margin-bottom: 2px; }
.btn-sub-text { font-size: 12px; font-weight: 400; opacity: 0.95; }
.modal-disclaimer {
  font-size: 11px;
  color: var(--text-disclaimer);
  line-height: 18px;
  margin-bottom: 24px;
  max-width: 90%;
}
.modal-disclaimer a { color: var(--link-color); text-decoration: none; }
.modal-disclaimer a:hover { text-decoration: underline; }
.badge-container { display: flex; justify-content: center; width: 100%; }
.badge-img { height: 40px; width: auto; display: block; cursor: pointer; transition: opacity 0.15s; }
.badge-img:hover { opacity: 0.85; }
@media (max-width: 520px) {
  .premium-modal { width: 100%; margin: 16px; padding: 28px 20px 24px; }
  .btn-download { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-download { animation: none; transition: none; }
}