@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

:root{
  --primary:#3B82F6;
  --primary-dark:#1D4ED8;
  --text:#111827;
  --bg:#F9FAFB;
}

*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family:'Inter',sans-serif;
  color:var(--text);
  background:linear-gradient(135deg,#E0F2FE 0%, #F0F9FF 100%);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{
  text-align:center;
  padding:clamp(2rem,4vw,4rem);
  max-width:640px;
  width:100%;
  margin-top: -100px;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(6px);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

.promo{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:rgba(59,130,246,0.08);
  border:2px dashed var(--primary);
  border-radius:12px;
  padding:1rem 1.5rem;
  margin:0 auto 1.5rem;
  max-width:280px;
}

.promo-label{
  font-size:0.875rem;
  font-weight:600;
  color:#f0f0f0;
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom:0.25rem;
}

.promo-code{
  font-size:1.5rem;
  font-weight:700;
  color: #fafafa;
  font-family:'Inter', monospace;
  letter-spacing:3px;
}

h1{
  font-size:clamp(1.5rem,4vw,2.5rem);
  line-height:1.2;
  margin-bottom:1rem;
}

.subtitle{
  font-size:1rem;
  margin-bottom:2rem;
  color:#374151;
}

#cta{
  appearance:none;
  border:none;
  background:var(--primary);
  color:#fff;
  font-size:1.125rem;
  font-weight:600;
  padding:0.75rem 2.75rem;
  border-radius:9999px;
  cursor:pointer;
  transition:background 0.25s, transform 0.25s;
}

#cta:hover,#cta:focus{
  background:var(--primary-dark);
  transform:translateY(-2px);
}

.disclaimer{
  font-size:0.75rem;
  line-height:1.35;
  color:#6B7280;
  margin-bottom:1rem;
}
.disclaimer a{
  color:var(--primary-dark);
  text-decoration:underline;
}

.note{
  font-size:0.75rem;
  color:#6B7280;
}



@media (prefers-color-scheme:dark){
  body{
	color:#F3F4F6;
	background:linear-gradient(135deg,#0F172A 0%, #1E293B 100%);
  }

  .container{
	background:rgba(30,41,59,0.65);
  }

  .subtitle{color:#9CA3AF;}
  .disclaimer{color:#9CA3AF;}
  .note{color:#6B7280;}

  .promo{
	background:rgba(59,130,246,0.15);
	border-color:var(--primary-dark);
  }
}