@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap');

:root{
  --bg-a:#cdae95;
  --bg-b:#f1ddce;
  --bg-c:#ddc6b1;
  --bg-d:#ecdac8;

  --copper-deep:#5c2408;
  --copper-mid:#743914;
  --copper-btn:#8c3f16;
  --copper-btn-hover:#742f0f;
  --brown-soft:#6b4a34;
  --brown-faint:#8a6a54;
  --line:#e3cfc0;
  --line-soft:rgba(92,36,8,0.18);

  --logo-hi:#feb95c;
  --logo-lo:#a83f0f;

  --font-display:"Poppins", sans-serif;
  --font-body:"Poppins", sans-serif;
}

*{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  width:100%;
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--copper-deep);
  background:#e2c9b2;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
  -webkit-font-smoothing:antialiased;
}

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* ---------------------------------------------------------------------- */
/* Page background                                                        */
/* ---------------------------------------------------------------------- */

.page{
  position:relative;
  min-height:100vh;
  width:100%;
  max-width:100vw;
  overflow-x:hidden;
  background:
    radial-gradient(ellipse 90% 60% at 78% 6%, var(--bg-b) 0%, rgba(238,215,196,0) 55%),
    radial-gradient(ellipse 70% 55% at 15% 8%, rgba(238,215,196,0.55) 0%, rgba(238,215,196,0) 60%),
    linear-gradient(150deg, var(--bg-a) 0%, var(--bg-d) 38%, var(--bg-b) 62%, var(--bg-c) 100%);
  isolation:isolate;
}

.bg-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  pointer-events:none;
  z-index:0;
}
.bg-glow--1{
  width:60vw; height:60vw; max-width:900px; max-height:900px;
  top:2%; left:50%; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,214,168,0.55) 0%, rgba(255,214,168,0) 70%);
}
.bg-glow--2{
  width:45vw; height:45vw; max-width:600px; max-height:600px;
  top:8%; right:2%;
  background:radial-gradient(circle, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 70%);
}

.bg-streaks{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      100deg,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 2px,
      rgba(255,255,255,0) 2px,
      rgba(255,255,255,0) 90px
    );
  mix-blend-mode:overlay;
  opacity:.7;
}

.bg-noise{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.content-wrap{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
  padding: clamp(20px,4vw,48px) clamp(20px,6vw,64px) clamp(40px,6vw,72px);
}

/* ---------------------------------------------------------------------- */
/* Hero — nav overlaid on the video's background area                     */
/* ---------------------------------------------------------------------- */

.hero-video-wrap{
  position:relative;
  z-index:1;
  width:100%;
  height: clamp(320px, 40vw, 620px);
  overflow:hidden;
  background:
    radial-gradient(ellipse 80% 70% at 50% 30%, var(--bg-b) 0%, rgba(241,221,206,0) 60%),
    var(--bg-d);
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 28%;
  display:block;
  pointer-events:none;
  user-select:none;
  filter:saturate(1.04);
}

.hero-nav{
  position:absolute;
  top:0; left:0; right:0;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  max-width:1180px;
  margin:0 auto;
  padding: clamp(18px,3vw,32px) clamp(20px,6vw,64px) 0;
}

.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:500;
  font-size: clamp(10px, 1.15vw, 13px);
  letter-spacing: .22em;
  text-transform:uppercase;
  color:var(--brown-soft);
}

/* gradient that separates the hero block from the content below it —
   its end colour matches the glow placed behind the heading further
   down, so the two blocks read as one continuous surface. */
.hero-fade-bottom{
  position:absolute;
  left:0; right:0; bottom:0;
  height:38%;
  background:linear-gradient(to bottom,
    rgba(236,218,200,0) 0%,
    rgba(236,218,200,0.6) 45%,
    var(--bg-d) 100%);
  pointer-events:none;
}

@media (max-width: 767.98px){
  .hero-video-wrap{
    height: clamp(300px, 90vw, 480px);
  }
  .hero-video{
    object-position:center 22%;
  }
  .hero-fade-bottom{ height:46%; }
}

/* ---------------------------------------------------------------------- */
/* Coming soon + countdown                                                */
/* ---------------------------------------------------------------------- */

.coming-section{
  position:relative;
  max-width:720px;
  margin:0 auto;
}

/* soft glow behind the heading, using the same tone/style as the hero's
   own background gradient — visually ties the video block and this
   heading block together into one continuous surface. */
.coming-section::before{
  content:"";
  position:absolute;
  left:50%;
  top:-24px;
  transform:translateX(-50%);
  width:min(1400px, 160%);
  height:240px;
  background:
    radial-gradient(ellipse 70% 70% at 50% 15%, var(--bg-b) 0%, rgba(241,221,206,0) 72%);
  z-index:-1;
  pointer-events:none;
}

.coming-soon{
  font-family:var(--font-body);
  font-weight:500;
  font-size: clamp(13px, 1.6vw, 17px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--copper-mid);
  margin: 6px 0 clamp(18px,3vw,28px);
}

.countdown{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(14px, 3vw, 34px);
  margin-bottom: clamp(22px,3.5vw,34px);
  flex-wrap:nowrap;
}

.count-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width: 56px;
}

.count-num{
  font-family:var(--font-display);
  font-weight:500;
  font-size: clamp(34px, 7vw, 58px);
  line-height:1;
  color:var(--copper-deep);
  font-variant-numeric: tabular-nums;
}

.count-label{
  margin-top:8px;
  font-size: clamp(9px, 1.1vw, 11px);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--brown-soft);
}

.count-divider{
  width:1px;
  height: clamp(34px, 5vw, 52px);
  background: var(--line-soft);
}

/* Diamond dividers */
.diamond-divider, .line-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  margin: clamp(18px,3vw,28px) auto;
  max-width: 360px;
}
.diamond-divider::before, .diamond-divider::after,
.line-divider::before, .line-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line-soft);
}
.diamond-divider span{
  width:6px;height:6px;
  margin:0 14px;
  background:var(--copper-mid);
  transform:rotate(45deg);
  flex:none;
  opacity:.85;
}
.line-divider{ max-width:420px; }
.line-divider span{
  width:5px;height:5px;
  margin:0 12px;
  background:var(--copper-mid);
  transform:rotate(45deg);
  flex:none;
  opacity:.7;
}

/* ---------------------------------------------------------------------- */
/* Subscribe section                                                      */
/* ---------------------------------------------------------------------- */

.section-heading{
  font-family:var(--font-body);
  font-weight:600;
  font-size: clamp(16px, 2.4vw, 22px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--copper-mid);
  margin: 0 0 12px;
}

.section-sub{
  font-family:var(--font-body);
  font-weight:300;
  font-size: clamp(13.5px, 1.6vw, 16px);
  line-height:1.6;
  color:var(--brown-soft);
  margin: 0 0 clamp(20px,3vw,30px);
}

.subscribe-form{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:0;
  max-width:600px;
  margin:0 auto;
  border-radius:4px;
  overflow:hidden;
  box-shadow: 0 10px 28px rgba(92,36,8,0.10);
}

.email-input{
  flex:1 1 auto;
  min-width:0;
  border:1px solid var(--line);
  border-right:none;
  background:rgba(255,250,245,0.35);
  padding: 16px 20px;
  font-family:var(--font-body);
  font-weight:300;
  font-size:14px;
  color:var(--copper-deep);
  outline:none;
  border-radius:4px 0 0 4px;
}
.email-input::placeholder{
  color:#a17c60;
  font-weight:300;
}
.email-input:focus{
  background:rgba(255,250,245,0.6);
  border-color:var(--copper-btn);
}

.subscribe-btn{
  flex:0 0 auto;
  border:none;
  background:var(--copper-btn);
  color:#fff;
  padding: 16px 30px;
  font-family:var(--font-body);
  font-weight:500;
  font-size: clamp(11px, 1.3vw, 13px);
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  border-radius:0 4px 4px 0;
  transition: background .2s ease, transform .15s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
}
.subscribe-btn:hover{ background:var(--copper-btn-hover); }
.subscribe-btn:active{ transform:scale(.98); }
.subscribe-btn .btn-check{ display:none; font-size:14px; }
.subscribe-btn.is-success .btn-check{ display:inline-block; }

.form-msg{
  min-height:20px;
  margin: 12px 0 0;
  font-size:13px;
  color:var(--copper-mid);
}

.gift-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin: clamp(22px,3.5vw,30px) auto 0;
}

.gift-icon{
  flex:none;
  width:38px;height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.35);
  color:var(--copper-mid);
  border:1px solid var(--line-soft);
}

.gift-text{
  font-size: clamp(12.5px, 1.4vw, 14.5px);
  color:var(--brown-soft);
  font-weight:300;
}

.copyright{
  font-size:12px;
  letter-spacing:.04em;
  color:var(--brown-faint);
  margin: 0 0 16px;
  font-weight:300;
}

.social-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-bottom: clamp(10px,2vw,20px);
}

.social-link{
  width:34px;height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--copper-mid);
  border:1px solid var(--line-soft);
  text-decoration:none;
  transition: background .2s ease, transform .15s ease, color .2s ease;
}
.social-link:hover{
  background:var(--copper-btn);
  color:#fff;
  border-color:var(--copper-btn);
  transform:translateY(-2px);
}

/* ---------------------------------------------------------------------- */
/* Success modal                                                          */
/* ---------------------------------------------------------------------- */

.modal-overlay{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(46,24,10,0.42);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.modal-overlay.is-open{
  opacity:1;
  visibility:visible;
  transition: opacity .3s ease, visibility 0s linear 0s;
}

.success-modal{
  position:relative;
  width:100%;
  max-width:420px;
  text-align:center;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, var(--bg-b) 0%, rgba(241,221,206,0) 60%),
    #fdf6ef;
  border:1px solid var(--line);
  border-radius:4px;
  padding: clamp(32px,5vw,44px) clamp(24px,4vw,36px) clamp(28px,4vw,34px);
  box-shadow: 0 30px 70px rgba(60,25,5,0.28);
  transform: translateY(18px) scale(.96);
  opacity:0;
  transition: transform .38s cubic-bezier(.2,.8,.25,1), opacity .32s ease;
}
.modal-overlay.is-open .success-modal{
  transform: translateY(0) scale(1);
  opacity:1;
}

.modal-close{
  position:absolute;
  top:14px; right:14px;
  width:30px; height:30px;
  border:none;
  background:transparent;
  color:var(--brown-soft);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .2s ease, color .2s ease;
}
.modal-close:hover{
  background:var(--line);
  color:var(--copper-deep);
}

.modal-icon{
  position:relative;
  width:64px; height:64px;
  margin: 0 auto 20px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(145deg, var(--logo-hi) 0%, var(--copper-btn) 100%);
  box-shadow: 0 10px 24px rgba(140,63,22,0.35);
  animation: modalIconPop .5s cubic-bezier(.2,.9,.3,1.3) .1s both;
}

.modal-sparkle{
  position:absolute;
  color: var(--logo-hi);
  font-size:14px;
  opacity:0;
  animation: modalSparkle 1.6s ease-in-out .4s infinite;
  pointer-events:none;
}
.modal-sparkle--1{ top:8%; left:14%; font-size:12px; animation-delay:.3s; }
.modal-sparkle--2{ top:14%; right:12%; font-size:16px; animation-delay:.7s; }
.modal-sparkle--3{ top:2%; left:50%; font-size:10px; animation-delay:1.05s; }

@keyframes modalIconPop{
  0%{ transform:scale(0); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes modalSparkle{
  0%, 100%{ opacity:0; transform:scale(.6) rotate(0deg); }
  50%{ opacity:1; transform:scale(1) rotate(20deg); }
}

.modal-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size: clamp(21px, 3vw, 26px);
  letter-spacing:.03em;
  color:var(--copper-deep);
  margin:0 0 12px;
}

.modal-text{
  font-size:14.5px;
  line-height:1.65;
  color:var(--brown-soft);
  font-weight:300;
  margin:0 0 6px;
}

.modal-subtext{
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--copper-mid);
  font-weight:500;
  margin:14px 0 26px;
}

.modal-btn{
  border:none;
  background:var(--copper-btn);
  color:#fff;
  padding:13px 36px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-radius:4px;
  cursor:pointer;
  transition: background .2s ease, transform .15s ease;
}
.modal-btn:hover{ background:var(--copper-btn-hover); }
.modal-btn:active{ transform:scale(.97); }

@media (prefers-reduced-motion: reduce){
  .modal-icon, .modal-sparkle{ animation:none; }
}

/* ---------------------------------------------------------------------- */
/* Responsive tuning                                                      */
/* ---------------------------------------------------------------------- */

@media (max-width: 767.98px){
  .top-row{
    padding-top:2px;
  }
  .eyebrow{ font-size:10px; letter-spacing:.16em; }

  .logo-scene{ width:min(72vw, 340px); }

  .countdown{ gap: 10px; }
  .count-block{ min-width:44px; }
  .count-divider{ height:30px; }

  .subscribe-form{
    flex-direction:column;
    box-shadow:none;
  }
  .email-input{
    border-right:1px solid var(--line);
    border-bottom:none;
    border-radius:4px 4px 0 0;
    text-align:center;
  }
  .subscribe-btn{
    border-radius:0 0 4px 4px;
    padding:14px 20px;
  }
  .gift-row{ padding:0 10px; }
}

@media (max-width: 420px){
  .countdown{ gap:6px; }
  .count-num{ font-size: 30px; }
  .count-label{ font-size:8px; letter-spacing:.18em; }
  .count-block{ min-width:38px; }
}

@media (min-width: 1400px){
  .content-wrap{ max-width:1280px; }
}