/* =========================
   RESET
========================= */

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

:root{

  --primary:#ff3064;
  --primary-hover:#ff4978;

  --dark:#090204;
  --dark-soft:#20181c;

  --light:#f6f1f3;

  --yellow:#fff200;

  --shadow:
    0 12px 28px rgba(255,48,100,.22);
}

html{

  scroll-behavior:smooth;

  -webkit-text-size-adjust:100%;
}

 body{

  font-family:'Montserrat',sans-serif;

  background:var(--dark);

  color:#fff;

  min-height:100dvh;

  overflow-x:hidden;

  text-rendering:optimizeLegibility;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}


/* =========================
   TOP BAR
========================= */

.top-bar{

  position:fixed;

  top:0;
  left:0;

  width:100%;

  z-index:1000;

  background:var(--primary);

  color:var(--yellow);

  display:flex;

  align-items:center;
  justify-content:center;

  gap:16px;

  padding:12px 18px;

  font-size:13px;
  font-weight:800;

  letter-spacing:.4px;

  text-align:center;
}

.top-divider{
  opacity:.4;
}

.promo-code{

  display:flex;

  align-items:center;

  gap:10px;

  border:1px dashed #fff;

  border-radius:999px;

  padding:6px 12px;

  cursor:pointer;

  user-select:none;

  transition:
    background .2s ease,
    opacity .2s ease;
}

.promo-code:hover{
  background:rgba(255,255,255,.12);
}

.promo-text{

  color:#fff;

  font-size:11px;

  font-weight:800;

  letter-spacing:1.2px;
}

.promo-badge{

  background:#fff;

  color:var(--primary);

  font-size:10px;

  font-weight:800;

  padding:4px 8px;

  border-radius:999px;
}

/* =========================
   MAIN
========================= */

.main{

  display:grid;

  grid-template-columns:1fr 1fr;

  min-height:100dvh;

  padding-top:58px;
}

/* =========================
   LEFT SIDE
========================= */

.left-side{

  position:relative;

  overflow:hidden;

  background:#000;
}

.slider{

  position:relative;

  width:100%;
  height:100%;
}

.slides{

  position:relative;

  width:100%;
  height:100%;
}

.slide{

  position:absolute;

  inset:0;

  opacity:0;

  visibility:hidden;

  transform:scale(1.02);

  transition:
    opacity .65s ease,
    transform 1.2s ease;

  will-change:opacity,transform;
}

.slide.active{

  opacity:1;

  visibility:visible;

  transform:scale(1);

  z-index:2;
}

/* =========================
   IMAGE
========================= */

.bg-image{

  width:100%;
  height:100%;

  object-fit:cover;

  object-position:center;

  display:block;
}

/* =========================
   BUTTONS
========================= */

.slider-btn{

  position:absolute;

  top:50%;

  transform:translateY(-50%);

  width:46px;
  height:46px;

  border:none;

  border-radius:50%;

  background:rgba(0,0,0,.68);

  color:#fff;

  font-size:20px;

  cursor:pointer;

  z-index:10;

  transition:
    background .2s ease,
    opacity .2s ease;
}

.slider-btn:hover{
  background:var(--primary);
}

.prev-btn{
  left:16px;
}

.next-btn{
  right:16px;
}

/* =========================
   DOTS
========================= */

.slider-dots{

  position:absolute;

  bottom:22px;

  left:50%;

  transform:translateX(-50%);

  display:flex;

  gap:10px;

  z-index:10;
}

.dot{

  width:10px;
  height:10px;

  border-radius:999px;

  background:rgba(255,255,255,.45);

  transition:
    transform .2s ease,
    background .2s ease;

  transform-origin:center;
}

.dot.active{

  background:#fff;

  transform:scaleX(2.3);
}

/* =========================
   RIGHT SIDE
========================= */

.right-side{

  background:var(--light);

  display:flex;

  align-items:center;
  justify-content:center;

  padding:48px 32px;

  content-visibility:auto;

  contain-intrinsic-size:800px;
}

.verify-card{

  width:100%;

  max-width:620px;

  text-align:center;
}

.verify-title{

  color:#111;

  font-size:clamp(2rem,4vw,3rem);

  line-height:1;

  font-weight:700;

  margin-bottom:38px;
}

.verify-title strong{
  font-weight:800;
}

/* =========================
   CTA BUTTONS
========================= */

.button-wrap{

  display:flex;

  justify-content:center;

  gap:20px;

  margin-bottom:32px;
}

.verify-btn{

  min-width:240px;

  padding:20px 30px;

  border:none;

  border-radius:999px;

  text-decoration:none;

  display:flex;

  align-items:center;
  justify-content:center;

  font-size:1rem;

  font-weight:700;

  transition:
    background .2s ease,
    opacity .2s ease;
}

.yes-btn{

  background:var(--primary);

  color:#fff;

  box-shadow:var(--shadow);
}

.yes-btn:hover{
  background:var(--primary-hover);
}

.no-btn{

  background:var(--dark-soft);

  color:#fff;
}

.no-btn:hover{
  background:#000;
}

/* =========================
   TERMS
========================= */

.terms{

  max-width:520px;

  margin:auto;

  color:#444;

  font-size:.9rem;

  line-height:1.65;
}

/* =========================
   TOAST
========================= */

.toast{

  position:fixed;

  bottom:24px;

  left:50%;

  transform:
    translateX(-50%)
    translateY(70px);

  background:var(--primary);

  color:#fff;

  padding:12px 20px;

  border-radius:999px;

  font-size:12px;

  font-weight:700;

  letter-spacing:.4px;

  opacity:0;

  pointer-events:none;

  transition:
    transform .3s ease,
    opacity .3s ease;

  z-index:9999;
}

.toast.show{

  opacity:1;

  transform:
    translateX(-50%)
    translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:900px){

  .main{
    grid-template-columns:1fr;
  }

  .left-side{
    min-height:42vh;
  }

  .right-side{
    min-height:58vh;
  }
}

/* =========================
   MOBILE
========================= */

@media(max-width:600px){

  .top-bar{

    flex-direction:column;

    gap:8px;

    padding:10px 12px;

    font-size:12px;
  }

  .top-divider{
    display:none;
  }

  .main{
    padding-top:72px;
  }

  .left-side{
    min-height:50vh;
  }

  .right-side{

    min-height:50vh;

    padding:32px 22px;
  }

  .verify-title{

    font-size:2rem;

    margin-bottom:28px;
  }

  .button-wrap{

    flex-direction:column;

    gap:16px;
  }

  .verify-btn{

    width:100%;

    min-width:100%;

    padding:18px 20px;
  }

  .terms{

    font-size:.8rem;

    line-height:1.5;
  }

  .slider-btn{

    width:40px;
    height:40px;

    font-size:18px;
  }

  .prev-btn{
    left:12px;
  }

  .next-btn{
    right:12px;
  }
}

/* =========================
   TOUCH DEVICES
========================= */

@media (hover:none){

  .verify-btn:hover,
  .slider-btn:hover,
  .promo-code:hover{

    transform:none;

    background:initial;
  }

  .yes-btn:hover{
    background:var(--primary);
  }

  .no-btn:hover{
    background:var(--dark-soft);
  }
}

/* =========================
   REDUCE MOTION
========================= */

@media(prefers-reduced-motion:reduce){

  *{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;
  }
}