/* Theme variables: Nordic blues, pine greens, warm accents */
:root {
  --bg-top: #e8f3ff;        /* icy sky */
  --bg-bottom: #f7fbff;     /* fresh snow */
  --brand-primary: #1e6f9f; /* nordic blue */
  --brand-secondary: #2e6d5b; /* pine green */
  --accent-warm: #ffb86b;   /* cozy amber/orange */
  --ink: #22313f;           /* dark slate text */
  --muted: #5b7a8a;         /* muted slate */
  --panel: #ffffff;         /* panels/cards */
  --panel-border: #cfe6ff;  /* icy border */
  --shadow-strong: #9ec9e8; /* chunky pixel shadow */
  --header-bg: #d9ecff;
  --footer-bg: #eaf6ff;
  --countdown-bg: #eaf6ff;
  --cta-shadow: #7fb6d7;
  --tagline-border: #9ad2c2;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  font-family: 'Press Start 2P', Arial, monospace;
  overflow-x: hidden;
  color: var(--ink);
}

html { color-scheme: light dark; }

.snow-bg {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

.snowflake {
  position: absolute;
  width: 40px;
  opacity: 0.8;
  filter: drop-shadow(0 0 6px #fff8);
  animation: fall 10s linear infinite;
}

@keyframes fall {
  0% { transform: translateY(-30px);}
  100% { transform: translateY(100vh);}
}

header {
  background: var(--header-bg);
  box-shadow: 0 4px 0 var(--shadow-strong);
  padding: 2rem 0 1rem 0;
  text-align: center;
  border-bottom: 8px double #fff;
  z-index: 1;
  position: relative;
}

.logo-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.skidåkare {
  width: 70px;
  filter: drop-shadow(0 0 5px #fff);
  background: var(--panel);
  border-radius: 50%;
  padding: 0.5rem;
  box-shadow: 0 4px 0 #cae0ff;
}

header h1 {
  font-size: 2.3rem;
  color: var(--brand-primary);
  margin: 0;
  letter-spacing: 2px;
  text-shadow: 2px 2px #fff, 0 0 10px #bfe2ff;
}

.retro-tagline {
  color: var(--brand-secondary);
  font-size: 1rem;
  margin-top: 0.8rem;
  letter-spacing: 0.5px;
  background: #fff7;
  display: inline-block;
  border-radius: 1rem;
  padding: 0.4rem 1.2rem;
  border: 2px dashed var(--tagline-border);
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 3rem 0;
  z-index: 1;
  position: relative;
}

.phone-section {
  display: flex;
  align-items: flex-end;
  gap: 2.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.phone-img {
  width: 170px;
  filter: drop-shadow(0 6px 20px rgba(30, 111, 159, 0.25));
  background: #fff;
  border-radius: 2.2rem;
  padding: 0.6rem;
}

.bubble {
  background: var(--panel);
  border-radius: 2em;
  border: 4px double var(--panel-border);
  padding: 2rem 2.5rem;
  box-shadow: 0 8px 0 var(--shadow-strong), 0 0 20px rgba(255, 184, 107, 0.25);
  max-width: 320px;
  text-align: center;
  z-index: 1;
}

.bubble h2 {
  margin-top: 0;
  font-size: 1.3rem;
  color: var(--brand-secondary);
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

#countdown {
  font-size: 1.2rem;
  letter-spacing: 1px;
  color: var(--brand-primary);
  background: var(--countdown-bg);
  border-radius: 1rem;
  display: inline-block;
  padding: 0.4rem 1.2rem;
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  box-shadow: 0 2px var(--shadow-strong);
}

.cta-btn {
  background: linear-gradient(90deg, var(--brand-secondary) 0%, var(--brand-primary) 100%);
  color: #fff;
  border: none;
  border-radius: 1.2rem;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  font-family: 'Press Start 2P', Arial, monospace;
  margin-top: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--cta-shadow);
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, box-shadow 0.2s;
}

.cta-btn:hover {
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
}

.cta-btn:focus-visible {
  outline: 3px dashed var(--accent-warm);
  outline-offset: 3px;
  box-shadow: 0 6px 0 #7fb6d7;
}

.beta-form {
  margin-top: 1.5rem;
  text-align: center;
}

.beta-form h3 {
  font-size: 1rem;
  color: var(--brand-primary);
  margin: 0 0 0.5rem 0;
}

.beta-form p {
  font-size: 0.7rem;
  color: var(--muted);
  margin: 0 0 1rem 0;
  line-height: 1.4;
}

.beta-form input[type="email"] {
  width: 100%;
  max-width: 280px;
  padding: 0.8rem;
  font-size: 0.8rem;
  font-family: 'Press Start 2P', Arial, monospace;
  border: 3px solid var(--panel-border);
  border-radius: 0.5rem;
  background: var(--panel);
  color: var(--ink);
  margin-bottom: 1rem;
  box-sizing: border-box;
}

.beta-form input[type="email"]:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px rgba(30, 111, 159, 0.2);
}

.form-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cancel-btn {
  background: var(--muted);
  color: #fff;
  border: none;
  border-radius: 1.2rem;
  padding: 0.8rem 1.2rem;
  font-size: 0.8rem;
  font-family: 'Press Start 2P', Arial, monospace;
  cursor: pointer;
  box-shadow: 0 4px 0 #4a6770;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s;
}

.cancel-btn:hover {
  background: #4a6770;
}

.success-message {
  margin-top: 1.5rem;
  text-align: center;
}

.success-message h3 {
  font-size: 1rem;
  color: var(--brand-secondary);
  margin: 0 0 0.5rem 0;
}

.success-message p {
  font-size: 0.7rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

.privacy-notice {
  background: var(--countdown-bg);
  border: 2px solid var(--panel-border);
  border-radius: 0.8rem;
  padding: 1rem;
  margin: 1rem 0;
  font-size: 0.6rem;
  line-height: 1.3;
  text-align: left;
}

.privacy-notice ul {
  margin: 0.5rem 0;
  padding-left: 1.2rem;
}

.privacy-notice li {
  margin-bottom: 0.3rem;
}

.privacy-notice a {
  color: var(--brand-primary);
  text-decoration: underline;
  cursor: pointer;
}

.privacy-notice a:hover {
  color: var(--brand-secondary);
}

.consent-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1rem 0;
  font-size: 0.6rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.consent-checkbox input[type="checkbox"] {
  margin: 0;
  transform: scale(1.2);
}

.gdpr-modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.modal-content {
  background-color: var(--panel);
  margin: 5% auto;
  padding: 2rem;
  border: 4px double var(--panel-border);
  border-radius: 1rem;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 8px 0 var(--shadow-strong);
}

.modal-content h2 {
  color: var(--brand-primary);
  font-size: 1.2rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.modal-content h3 {
  color: var(--brand-secondary);
  font-size: 0.8rem;
  margin: 1.5rem 0 0.5rem 0;
}

.modal-content p, .modal-content li {
  font-size: 0.7rem;
  line-height: 1.4;
  margin-bottom: 0.8rem;
}

.modal-content ul {
  padding-left: 1.5rem;
}

.close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
}

.close:hover {
  color: var(--brand-primary);
}

.gdpr-footer-link {
  color: var(--brand-primary);
  text-decoration: underline;
  font-size: 0.8rem;
  cursor: pointer;
}

.gdpr-footer-link:hover {
  color: var(--brand-secondary);
}

footer {
  background: var(--footer-bg);
  text-align: center;
  padding: 2.5rem 0 1rem 0;
  color: var(--brand-primary);
  font-size: 1rem;
  border-top: 8px double #fff;
  box-shadow: 0 -4px 0 var(--shadow-strong);
  margin-top: 4rem;
  position: relative;
  z-index: 1;
}

.hjärta {
  color: #e85d5a; /* warm coral accent */
  font-size: 1.2em;
}

@media (max-width: 680px) {
  .logo-row { gap: 1rem; }
  header h1 { font-size: 1.2rem;}
  .retro-tagline { font-size: 0.8rem; }
  .phone-section { flex-direction: column; gap: 1.2rem;}
  .bubble { padding: 1rem 1rem; }
  .phone-img { width: 120px; }
  
  .beta-form input[type="email"] {
    max-width: 100%;
    font-size: 0.7rem;
  }
  
  .form-buttons {
    flex-direction: column;
    gap: 0.8rem;
  }
  
  .cta-btn, .cancel-btn {
    width: 100%;
    max-width: 200px;
  }
  
  .modal-content {
    margin: 2% auto;
    padding: 1.5rem;
    width: 95%;
    max-height: 90vh;
  }
  
  .privacy-notice {
    font-size: 0.55rem;
    padding: 0.8rem;
  }
  
  .consent-checkbox {
    font-size: 0.55rem;
  }
}

/* Dark mode – cozy night ski */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-top: #0f2331;       /* northern night sky */
    --bg-bottom: #0b1a24;    /* deep slate */
    --ink: #e6f1f8;          /* light text */
    --muted: #a9c4d4;
    --panel: #132733;        /* dark card */
    --panel-border: #2a5974; /* cold edge */
    --brand-primary: #79c6f2; /* brighter blue for contrast */
    --brand-secondary: #67b39f; /* softer pine */
    --accent-warm: #ffcd85;
    --shadow-strong: #0a3a52; /* dark chunky shadow */
    --header-bg: #0f2a3d;
    --footer-bg: #0f2a3d;
    --countdown-bg: #153445;
    --cta-shadow: #0b3b56;
    --tagline-border: #2d8a74;
  }

  header h1 { text-shadow: 2px 2px #0b1720, 0 0 10px #23536e; }
  .skidåkare { box-shadow: 0 4px 0 #25485d; }
  .phone-img { filter: drop-shadow(0 6px 20px rgba(121, 198, 242, 0.18)); }
  .cta-btn:focus-visible { outline-color: var(--accent-warm); }
}