/* ============================================================
   Nova Landing Page — style-new.css
   Responsive Build
   ============================================================ */

/* ── FONT FACES ── */
@font-face {
  font-family: Dilemma;
  font-style: normal;
  font-weight: 400;
  src: url(https://superspeciosa.com/cdn/shop/files/Dilemma-SansLight.otf?v=1718382000) format('opentype');
}
@font-face {
  font-family: Dilemma;
  font-style: normal;
  font-weight: 550;
  src: url(https://superspeciosa.com/cdn/shop/files/dilemma-sans-regular.otf?v=1720027357) format('opentype');
}
@font-face {
  font-family: Dilemma;
  font-style: normal;
  font-weight: 700;
  src: url(https://superspeciosa.com/cdn/shop/files/Dilemma-SansBold.otf?v=1718382000) format('opentype');
}
@font-face {
  font-family: dilemma-sans-black;
  font-style: normal;
  font-weight: 550;
  src: url(../../assets/fonts/dilemma-sans-black.woff) format('opentype');
}
@font-face {
  font-family: DilemmaSansMediumCD;
  font-style: normal;
  font-weight: 550;
  src: url(../../assets/fonts/DilemmaSansMediumCD.woff) format('opentype');
}

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

/* ── CSS VARIABLES ── */
:root {
  --green-primary : #2c7a2c;
  --green-btn     : #228b22;
  --green-btn-h   : #1a6b1a;
  --green-light   : #6dd46d;
  --gold          : #f5a623;
  --text-dark     : #111827;
  --text-mid      : #374151;
  --text-light    : #6b7280;
  --border-soft   : rgba(0, 0, 0, .10);
  --white         : #ffffff;
  --overlay       : rgba(10, 30, 10, 0.55);

  /* ── FLUID FONT SIZES ── */
  --fs-xs   : clamp(11px, 3vw, 13px);
  --fs-sm   : clamp(13px, 3.5vw, 15px);
  --fs-base : 16px;
  --fs-md   : clamp(16px, 4vw, 18px);
  --fs-sub  : clamp(16px, 4.5vw, 25px);
  --fs-lg   : clamp(32px, 8vw, 62px);
}

/* ── LAYOUT ROOT ── */
html, body {
  min-height: 100vh;
  font-family: 'Dilemma', sans-serif;
  font-size: var(--fs-base);
  color: var(--white);
  background-color: #000;
}

/* ── BACKGROUND WRAPPER ── */
.lp-wrapper {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background: url('../../assets/images/desktop LP Banner _2400 1200 (1).png') center / cover no-repeat;
  overflow-x: hidden;
}

/* ── OVERLAY ── */
.lp-overlay {
  position: absolute;
  inset: 0;
     background: rgb(60 60 60 / 57%);
  pointer-events: none;
  z-index: 0;
}

/* ── CENTRED CONTENT AREA ── */
.lp-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: 40px 20px;
}

/* ── INNER CONTAINER ── */
.lp-inner {
  max-width: 720px;
  width: 100%;
  text-align: center;
}

/* ── LOGO ── */
.lp-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.lp-logo-icon {
  width: clamp(60px, 15vw, 80px);
  height: clamp(60px, 15vw, 80px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-logo-icon img {
  width: 130%;
  height: 100%;
}

/* ── STAR BADGE ── */
.lp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  border: 1.5px solid rgba(255, 255, 255, 0.30);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.90);
  margin-bottom: 24px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lp-stars {
  display: flex;
  gap: 2px;
}

.lp-stars span {
  font-size: var(--fs-sm);
  color: var(--gold);
}

/* ── HEADLINE ── */
.lp-headline {
  font-family: 'Dilemma', sans-serif;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 16px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.50);
}

.lp-headline .lp-hash {
  color: var(--green-light);
}

/* ── SUB COPY ── */
.lp-sub {
  font-size: var(--fs-sub);
  font-weight: 550;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 28px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.40);
  white-space: normal; /* Allows text to wrap nicely on mobile */
}

.lp-sub strong {
  font-weight: 700;
  color: var(--white);
}

/* ── CTA BUTTON ── */
.lp-btn {
  display: inline-block;
  width: 100%;
  max-width: 320px;
  padding: 16px 32px;
  background: var(--green-btn);
  color: #fff;
  font-family: 'Dilemma', sans-serif;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 24px rgba(34, 139, 34, .50);
  margin-bottom: 28px;
}

.lp-btn:hover {
  background: var(--green-btn-h);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(34, 139, 34, .55);
  color: #fff;
}

.lp-btn:active {
  transform: translateY(0);
}

/* ── TRUST ROW ── */
.lp-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-size: clamp(14px, 3.8vw, 18px);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
}

.lp-trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lp-trust-item .lp-check {
  color: var(--green-light);
  font-weight: 700;
  font-size: 14px;
}

/* ── PRIVACY POLICY STRIP ── */
.lp-privacy-strip {
  position: relative;
  z-index: 1;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  padding: 14px 20px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  font-family: 'Dilemma', sans-serif;
}

.lp-privacy-strip a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin: 0 6px;
  font-size: inherit;
  transition: color .15s;
}

.lp-privacy-strip a:hover {
  color: #fff;
}

/* ── MOBILE OPTIMIZATIONS ── */
@media (max-width: 600px) {
  .lp-card {
    padding: 24px 16px;
  }
  .lp-wrapper {
  min-height: 100vh;
  width: 100%;
  background: url('../../assets/images/mobile banner - 700X1200.png') center / cover no-repeat;
}
  
  .lp-trust {
    flex-direction: column;
    gap: 8px;
  }

  .lp-badge {
    border-radius: 16px;
  }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .lp-btn {
    transition: none;
  }
}