/* ALTERRA VR — BIRTHDAY DESIGN / BLOCK 01 V1
   Visual pass only. Sales copy, funnel order and anchors stay unchanged. */

/* Header: thinner, glassier, more premium without changing navigation semantics. */
.bp-header{
  height:78px;
  padding:0 clamp(28px,4vw,76px);
  background:rgba(2,11,19,.78);
  border-bottom:1px solid rgba(72,229,249,.15);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
}
.bp-brand-mark{
  box-shadow:0 0 0 1px rgba(83,235,255,.08),0 0 22px rgba(48,219,241,.08);
}
.bp-nav{gap:30px}
.bp-nav a{
  position:relative;
  color:#a9bbc7;
  transition:color .18s ease;
}
.bp-nav a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-10px;
  height:1px;
  transform:scaleX(0);
  transform-origin:center;
  background:#56eaff;
  box-shadow:0 0 12px rgba(86,234,255,.55);
  transition:transform .18s ease;
}
.bp-nav a:hover{color:#f6fbff}
.bp-nav a:hover::after{transform:scaleX(1)}
.bp-head-cta{
  min-height:46px;
  padding:0 20px;
  border-radius:13px;
  background:linear-gradient(180deg,rgba(7,30,47,.82),rgba(3,17,29,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 0 20px rgba(52,221,241,.05);
}

/* Hero */
.bp-hero{
  min-height:790px;
  align-items:center;
  padding:126px clamp(28px,5vw,94px) 74px;
  background:#020b13;
}
.bp-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:auto 4vw 34px auto;
  width:min(480px,34vw);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(71,226,247,.58));
  opacity:.7;
}
.bp-hero::after{
  content:"";
  position:absolute;
  z-index:-2;
  width:420px;
  height:420px;
  left:8%;
  top:17%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(44,215,239,.10),rgba(44,215,239,.02) 44%,transparent 70%);
  filter:blur(10px);
  pointer-events:none;
}
.bp-hero-media{
  left:42%;
  overflow:hidden;
}
.bp-hero-media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,#020b13 0%,rgba(2,11,19,.86) 8%,rgba(2,11,19,.22) 34%,rgba(2,11,19,.08) 74%,rgba(2,11,19,.45) 100%);
  pointer-events:none;
}
.bp-hero-media img{
  object-position:center 44%;
  filter:saturate(1.02) contrast(1.06) brightness(.88);
  transform:scale(1.02);
}
.bp-hero-shade{
  background:
    linear-gradient(90deg,#020b13 0%,rgba(2,11,19,.98) 31%,rgba(2,11,19,.70) 47%,rgba(2,11,19,.10) 69%,rgba(2,11,19,.34) 100%),
    linear-gradient(180deg,rgba(2,11,19,.12),transparent 55%,#020b13 100%);
}
.bp-hero-grid{
  opacity:.12;
  background-size:72px 72px;
  mask-image:linear-gradient(90deg,#000 0 38%,transparent 72%);
}
.bp-hero-content{
  width:min(720px,52vw);
  margin-left:max(0px,calc((100vw - 1600px)/2));
  position:relative;
  z-index:2;
}
.bp-back{
  margin-bottom:20px;
  color:#7392a4;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.bp-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:17px;
  color:#5cecff;
  letter-spacing:.2em;
}
.bp-hero .bp-kicker::before{
  content:"";
  width:34px;
  height:1px;
  background:#56eaff;
  box-shadow:0 0 12px rgba(86,234,255,.65);
}
.bp-hero h1{
  max-width:690px;
  font-size:clamp(56px,5.3vw,92px);
  line-height:.88;
  letter-spacing:-.06em;
  text-wrap:balance;
  text-shadow:0 8px 30px rgba(0,0,0,.28);
}
.bp-hero h1 span{
  color:#49def1;
  text-shadow:0 0 28px rgba(52,219,240,.12);
}
.bp-hero-lead{
  max-width:610px;
  margin-top:25px;
  color:#c8d7e0;
  font-size:17px;
  line-height:1.57;
}
.bp-hero-actions{margin-top:28px;gap:10px}
.bp-hero .bp-btn{
  min-height:54px;
  border-radius:13px;
  padding:0 21px;
}
.bp-hero .bp-btn-primary{
  min-width:220px;
  box-shadow:0 10px 28px rgba(32,207,230,.12),0 0 24px rgba(42,218,240,.10);
}
.bp-hero .bp-btn-ghost{
  color:#e5eef3;
  background:rgba(2,15,25,.66);
  backdrop-filter:blur(8px);
}
.bp-hero-facts{
  width:min(655px,100%);
  margin-top:26px;
  border-color:rgba(80,228,248,.22);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(7,29,46,.78),rgba(3,18,30,.72));
  box-shadow:0 18px 40px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025);
}
.bp-hero-facts div{padding:14px 17px}
.bp-hero-facts b{
  color:#f4fbff;
  font-size:15px;
  letter-spacing:-.01em;
}
.bp-hero-facts span{
  margin-top:4px;
  color:#7f9aaa;
  font-size:10px;
  letter-spacing:.02em;
}

/* Tablet */
@media (max-width:1100px){
  .bp-header{height:68px;padding:0 20px}
  .bp-hero{
    min-height:800px;
    padding:104px 28px 56px;
  }
  .bp-hero-media{left:28%}
  .bp-hero-media::before{background:linear-gradient(90deg,#020b13 0%,rgba(2,11,19,.86) 16%,rgba(2,11,19,.24) 50%,rgba(2,11,19,.20) 100%)}
  .bp-hero-shade{background:linear-gradient(90deg,rgba(2,11,19,.98) 0%,rgba(2,11,19,.86) 36%,rgba(2,11,19,.30) 68%,rgba(2,11,19,.42) 100%),linear-gradient(180deg,rgba(2,11,19,.08),#020b13 100%)}
  .bp-hero-content{width:min(680px,78vw);margin:0}
  .bp-hero h1{font-size:clamp(52px,8.2vw,82px)}
}

/* Phone: image becomes a cinematic upper field, copy stays readable below. */
@media (max-width:700px){
  .bp-hero{
    min-height:790px;
    padding:94px 18px 32px;
    align-items:flex-end;
  }
  .bp-hero::before{display:none}
  .bp-hero::after{width:260px;height:260px;left:-40px;top:45%}
  .bp-hero-media{left:0;bottom:35%;height:65%}
  .bp-hero-media::before{background:linear-gradient(180deg,rgba(2,11,19,.02) 0%,rgba(2,11,19,.08) 48%,rgba(2,11,19,.92) 88%,#020b13 100%)}
  .bp-hero-media img{object-position:58% 42%;filter:saturate(1.02) contrast(1.05) brightness(.86)}
  .bp-hero-shade{background:linear-gradient(180deg,rgba(2,11,19,.10) 0%,rgba(2,11,19,.12) 34%,rgba(2,11,19,.62) 61%,#020b13 78%)}
  .bp-hero-grid{display:none}
  .bp-hero-content{width:100%}
  .bp-back{margin-bottom:13px;font-size:10px}
  .bp-hero .bp-kicker{gap:8px;margin-bottom:11px;font-size:9px;line-height:1.4;letter-spacing:.16em}
  .bp-hero .bp-kicker::before{width:20px}
  .bp-hero h1{font-size:clamp(40px,11.8vw,58px);line-height:.91;letter-spacing:-.052em}
  .bp-hero-lead{max-width:520px;margin-top:17px;font-size:14px;line-height:1.48}
  .bp-hero-actions{margin-top:20px;gap:8px}
  .bp-hero .bp-btn{min-height:50px}
  .bp-hero-facts{margin-top:16px;border-radius:12px}
  .bp-hero-facts div{padding:10px 13px}
  .bp-hero-facts b{font-size:13px}
  .bp-hero-facts span{font-size:9.5px}
}

@media (max-width:430px){
  .bp-hero{min-height:770px;padding-left:16px;padding-right:16px}
  .bp-hero h1{font-size:clamp(38px,11.8vw,52px)}
}

/* BIRTHDAY HERO TITLE V4 — explicit final override.
   Previous attempt was shadowed by this stylesheet itself. */
@media (min-width:1101px){
  .bp-hero h1{
    font-size:clamp(44px,4.25vw,74px) !important;
    line-height:1.02 !important;
    letter-spacing:-.045em !important;
  }
  .bp-hero h1 span{white-space:nowrap}
}
@media (min-width:701px) and (max-width:1100px){
  .bp-hero h1{
    font-size:clamp(42px,6.5vw,65px) !important;
    line-height:1 !important;
    letter-spacing:-.045em !important;
  }
  .bp-hero h1 span{white-space:nowrap}
}


/* HERO V5 — approved quest/birthday visual */
@media (min-width:1101px){
  .bp-hero{
    min-height:820px;
    padding-top:128px;
    padding-bottom:74px;
    background:
      radial-gradient(circle at 44% 24%,rgba(54,225,246,.07),transparent 26%),
      linear-gradient(90deg,#020b13 0%,#020b13 38%,#03111a 100%);
  }
  .bp-hero-media{
    left:38%;
    top:0;
    bottom:0;
  }
  .bp-hero-media::before{
    background:
      linear-gradient(90deg,#020b13 0%,rgba(2,11,19,.96) 9%,rgba(2,11,19,.74) 20%,rgba(2,11,19,.24) 36%,rgba(2,11,19,.04) 62%,rgba(2,11,19,.08) 100%),
      linear-gradient(180deg,rgba(2,11,19,.08),transparent 58%,rgba(2,11,19,.18) 100%);
  }
  .bp-hero-media img{
    object-position:center 48%;
    filter:saturate(1.08) contrast(1.06) brightness(.96);
    transform:scale(1.04);
  }
  .bp-hero-shade{
    background:
      linear-gradient(90deg,#020b13 0%,rgba(2,11,19,.99) 29%,rgba(2,11,19,.80) 41%,rgba(2,11,19,.24) 56%,rgba(2,11,19,.05) 74%,rgba(2,11,19,.08) 100%),
      linear-gradient(180deg,rgba(2,11,19,.05),transparent 58%,rgba(2,11,19,.20) 100%);
  }
  .bp-hero-grid{
    opacity:.07;
    mask-image:linear-gradient(90deg,#000 0 33%,transparent 58%);
  }
  .bp-hero-content{
    width:min(730px,47vw);
  }
  .bp-hero h1{
    max-width:700px;
    font-size:clamp(48px,4.45vw,78px)!important;
    line-height:.98!important;
    letter-spacing:-.05em!important;
  }
  .bp-hero-lead{
    max-width:625px;
    color:#d4e0e7;
  }
  .bp-hero-facts{
    background:linear-gradient(180deg,rgba(5,24,39,.82),rgba(3,17,28,.74));
    backdrop-filter:blur(10px);
  }
}

/* Tablet/mobile keep same content, use the new scene responsively. */
@media (min-width:701px) and (max-width:1100px){
  .bp-hero-media{left:26%}
  .bp-hero-media img{object-position:58% 47%;filter:saturate(1.07) contrast(1.05) brightness(.92)}
}
@media (max-width:700px){
  .bp-hero-media img{object-position:58% 44%;filter:saturate(1.06) contrast(1.05) brightness(.90)}
}