:root{
  --red-dark: #8f3a3d;
  --red: #a8474b;
  --red-soft: #b5585c;
  --gold: #ad8c42;
  --text-dark: #2c2422;
}

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

body{
  font-family: 'Poppins', sans-serif;
  color: var(--text-dark);
  -webkit-font-smoothing:antialiased;
}

.page{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding: 24px 0;
}

.phone{
  width:100%;
  max-width:430px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.18);
  transition: filter .35s ease;
  opacity:0;
  transform: translateY(30px);
  animation: softLaunchRise 1s cubic-bezier(.22,1,.36,1) .15s forwards,
             softLaunchGlow 3.2s ease-in-out 1.2s infinite;
}

@keyframes softLaunchRise{
  from{ opacity:0; transform: translateY(30px) scale(.97); }
  to{   opacity:1; transform: translateY(0) scale(1); }
}

@keyframes softLaunchGlow{
  0%,100%{ box-shadow: 0 10px 40px rgba(0,0,0,.18), 0 0 0 rgba(255,240,225,0); }
  50%{     box-shadow: 0 10px 40px rgba(0,0,0,.18), 0 0 55px rgba(255,240,225,.55); }
}

@media (min-width:431px){
  .phone{
    border-radius:28px;
    min-height:90vh;
  }
}

.phone.dimmed{
  filter: grayscale(0.75) brightness(0.55);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  line-height:0;
}

.hero-img{
  display:block;
  width:100%;
  height:auto;
}

/* ---------- Promo image ---------- */
.promo{
  display:block;
  line-height:0;
}
.promo-img{
  display:block;
  width:100%;
  height:auto;
}

/* ---------- Explore / socials ---------- */
.explore{
  text-align:center;
  padding: 26px 16px 34px;
}
.explore-label{
  font-size:13px;
  font-weight:600;
  letter-spacing:.5px;
  margin-bottom:14px;
}
.socials{
  display:flex;
  justify-content:center;
  gap:18px;
}
.social-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1.4px solid var(--text-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--text-dark);
  text-decoration:none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.social-icon svg{ width:17px; height:17px; }
.social-icon:hover{
  background: var(--red);
  border-color: var(--red);
  color:#fff;
  transform: translateY(-2px);
}

/* ---------- Surprise overlay ---------- */
.overlay{
  position:fixed;
  inset:0;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  background: rgba(20,16,15,.55);
  backdrop-filter: blur(1px);
  z-index:50;
  padding:20px;
  opacity:0;
  transition: opacity .3s ease;
}
.overlay.show{
  display:flex;
  opacity:1;
}

.surprise-img{
  width:100%;
  max-width:300px;
  height:auto;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));
  opacity:0;
  transform: scale(.4) rotate(-8deg);
}
.overlay.show .surprise-img{
  animation: surprisePop .65s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes surprisePop{
  0%{   opacity:0; transform: scale(.4) rotate(-8deg); }
  55%{  opacity:1; transform: scale(1.08) rotate(3deg); }
  75%{  transform: scale(.96) rotate(-1.5deg); }
  100%{ opacity:1; transform: scale(1) rotate(0deg); }
}

.close-btn{
  width:38px;
  height:38px;
  border-radius:50%;
  border:1.4px solid #fff;
  background:transparent;
  color:#fff;
  font-size:16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .2s ease, color .2s ease;
}
.close-btn:hover{
  background:#fff;
  color: var(--text-dark);
}